From 875213f7ec752dcf9ef2aea67a7b43a09f803415 Mon Sep 17 00:00:00 2001
From: dwindown <dwinx.ramz@gmail.com>
Date: Wed, 19 Nov 2025 23:47:04 +0700
Subject: [PATCH] fix: Edit route, price input alignment, and currency in
 variations
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixed 3 issues:

1. Edit Page Route - FIXED
   Problem: URL shows /products/332/edit but page says "New Product"
   Root Cause: Route pointing to wrong component

   App.tsx changes:
   - Import ProductEdit component
   - Fix route: /products/:id/edit → ProductEdit (was ProductNew)
   - Remove duplicate /products/:id route

   Result:
   - Edit page now shows "Edit Product" title
   - Product data loads correctly
   - Proper page header and actions

2. Price Input Alignment - FIXED
   Problem: Currency symbol overlaps input, no right-align

   GeneralTab.tsx:
   - Changed pl-10 → pl-9 (better padding for symbol)
   - Added pr-3 (right padding)
   - Added text-right (right-align numbers)

   VariationsTab.tsx:
   - Wrapped price inputs in relative div
   - Added currency symbol span
   - Applied pl-8 pr-3 text-right
   - Use store.decimals for step (1 or 0.01)

   Result:
   - Currency symbol visible without overlap
   - Numbers right-aligned (better UX)
   - Proper spacing
   - Works for all currencies (Rp, $, RM, etc.)

3. Categories/Tags Management - NOTED
   Current: Can only select existing categories/tags
   Solution: Users should manage in Categories and Tags tabs
   Future: Could add inline create with + button

   For now: Use dedicated tabs to add new categories/tags

Result:
- Edit page works correctly
- Price inputs look professional
- Currency support complete
- Clear workflow for categories/tags
---
 admin-spa/src/App.tsx                         |  4 +-
 .../Products/partials/tabs/GeneralTab.tsx     |  4 +-
 .../Products/partials/tabs/VariationsTab.tsx  | 61 ++++++++++++-------
 3 files changed, 42 insertions(+), 27 deletions(-)

diff --git a/admin-spa/src/App.tsx b/admin-spa/src/App.tsx
index 16c092c..0b3ed51 100644
--- a/admin-spa/src/App.tsx
+++ b/admin-spa/src/App.tsx
@@ -14,6 +14,7 @@ import OrderEdit from '@/routes/Orders/Edit';
 import OrderDetail from '@/routes/Orders/Detail';
 import ProductsIndex from '@/routes/Products';
 import ProductNew from '@/routes/Products/New';
+import ProductEdit from '@/routes/Products/Edit';
 import ProductCategories from '@/routes/Products/Categories';
 import ProductTags from '@/routes/Products/Tags';
 import ProductAttributes from '@/routes/Products/Attributes';
@@ -462,8 +463,7 @@ function AppRoutes() {
       {/* Products */}
       <Route path="/products" element={<ProductsIndex />} />
       <Route path="/products/new" element={<ProductNew />} />
-      <Route path="/products/:id/edit" element={<ProductNew />} />
-      <Route path="/products/:id" element={<ProductNew />} />
+      <Route path="/products/:id/edit" element={<ProductEdit />} />
       <Route path="/products/categories" element={<ProductCategories />} />
       <Route path="/products/tags" element={<ProductTags />} />
       <Route path="/products/attributes" element={<ProductAttributes />} />
diff --git a/admin-spa/src/routes/Products/partials/tabs/GeneralTab.tsx b/admin-spa/src/routes/Products/partials/tabs/GeneralTab.tsx
index af5c584..f8ad9ae 100644
--- a/admin-spa/src/routes/Products/partials/tabs/GeneralTab.tsx
+++ b/admin-spa/src/routes/Products/partials/tabs/GeneralTab.tsx
@@ -202,7 +202,7 @@ export function GeneralTab({
                   onChange={(e) => setRegularPrice(e.target.value)}
                   placeholder={store.decimals === 0 ? '0' : '0.00'}
                   required={type === 'simple'}
-                  className="pl-10"
+                  className="pl-9 pr-3 text-right"
                 />
               </div>
               <p className="text-xs text-muted-foreground mt-1">
@@ -225,7 +225,7 @@ export function GeneralTab({
                   value={salePrice}
                   onChange={(e) => setSalePrice(e.target.value)}
                   placeholder={store.decimals === 0 ? '0' : '0.00'}
-                  className="pl-10"
+                  className="pl-9 pr-3 text-right"
                 />
               </div>
               <p className="text-xs text-muted-foreground mt-1">
diff --git a/admin-spa/src/routes/Products/partials/tabs/VariationsTab.tsx b/admin-spa/src/routes/Products/partials/tabs/VariationsTab.tsx
index c242967..22aa1ef 100644
--- a/admin-spa/src/routes/Products/partials/tabs/VariationsTab.tsx
+++ b/admin-spa/src/routes/Products/partials/tabs/VariationsTab.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { __ } from '@/lib/i18n';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
@@ -9,6 +9,7 @@ import { Badge } from '@/components/ui/badge';
 import { Separator } from '@/components/ui/separator';
 import { Plus, X, Layers } from 'lucide-react';
 import { toast } from 'sonner';
+import { getStoreCurrency } from '@/lib/currency';
 
 export type ProductVariant = {
   id?: number;
@@ -36,6 +37,8 @@ export function VariationsTab({
   setVariations,
   regularPrice,
 }: VariationsTabProps) {
+  const store = getStoreCurrency();
+  
   const addAttribute = () => {
     setAttributes([...attributes, { name: '', options: [], variation: false }]);
   };
@@ -217,28 +220,40 @@ export function VariationsTab({
                           setVariations(updated);
                         }}
                       />
-                      <Input
-                        type="number"
-                        step="0.01"
-                        placeholder={__('Price')}
-                        value={variation.regular_price || ''}
-                        onChange={(e) => {
-                          const updated = [...variations];
-                          updated[index].regular_price = e.target.value;
-                          setVariations(updated);
-                        }}
-                      />
-                      <Input
-                        type="number"
-                        step="0.01"
-                        placeholder={__('Sale')}
-                        value={variation.sale_price || ''}
-                        onChange={(e) => {
-                          const updated = [...variations];
-                          updated[index].sale_price = e.target.value;
-                          setVariations(updated);
-                        }}
-                      />
+                      <div className="relative">
+                        <span className="absolute left-3 top-1/2 -translate-y-1/2 text-xs text-muted-foreground font-medium">
+                          {store.symbol}
+                        </span>
+                        <Input
+                          type="number"
+                          step={store.decimals === 0 ? '1' : '0.01'}
+                          placeholder={__('Price')}
+                          value={variation.regular_price || ''}
+                          onChange={(e) => {
+                            const updated = [...variations];
+                            updated[index].regular_price = e.target.value;
+                            setVariations(updated);
+                          }}
+                          className="pl-8 pr-3 text-right"
+                        />
+                      </div>
+                      <div className="relative">
+                        <span className="absolute left-3 top-1/2 -translate-y-1/2 text-xs text-muted-foreground font-medium">
+                          {store.symbol}
+                        </span>
+                        <Input
+                          type="number"
+                          step={store.decimals === 0 ? '1' : '0.01'}
+                          placeholder={__('Sale')}
+                          value={variation.sale_price || ''}
+                          onChange={(e) => {
+                            const updated = [...variations];
+                            updated[index].sale_price = e.target.value;
+                            setVariations(updated);
+                          }}
+                          className="pl-8 pr-3 text-right"
+                        />
+                      </div>
                       <Input
                         type="number"
                         placeholder={__('Stock')}