feat(商品): 調整商品代號顯示與會計報表樣式

resources/js/Components/Product/BarcodeViewDialog.tsx

@@ -78,7 +78,7 @@ export default function BarcodeViewDialog({
             <div class="barcode-container">
               <div class="product-info">
                 <div class="product-name">${productName}</div>
-                <div class="product-code">商品編號: ${productCode}</div>
+                <div class="product-code">商品代號: ${productCode}</div>
               </div>
               <img src="${barcodePlaceholder}" alt="商品條碼" />
             </div>

resources/js/Components/Product/ProductDialog.tsx

@@ -35,6 +35,7 @@ export default function ProductDialog({
   units,
 }: ProductDialogProps) {
   const { data, setData, post, put, processing, errors, reset, clearErrors } = useForm({
+    code: "",
     name: "",
     category_id: "",
     brand: "",
@@ -50,6 +51,7 @@ export default function ProductDialog({
       clearErrors();
       if (product) {
         setData({
+          code: product.code,
           name: product.name,
           category_id: product.category_id.toString(),
           brand: product.brand || "",
@@ -142,6 +144,21 @@ export default function ProductDialog({
                 {errors.name && <p className="text-sm text-red-500">{errors.name}</p>}
               </div>
 
+              <div className="space-y-2">
+                <Label htmlFor="code">
+                  商品代號 <span className="text-red-500">*</span>
+                </Label>
+                <Input
+                  id="code"
+                  value={data.code}
+                  onChange={(e) => setData("code", e.target.value)}
+                  placeholder="例：A1 (最多2碼)"
+                  maxLength={2}
+                  className={errors.code ? "border-red-500" : ""}
+                />
+                {errors.code && <p className="text-sm text-red-500">{errors.code}</p>}
+              </div>
+
               <div className="space-y-2">
                 <Label htmlFor="brand">品牌</Label>
                 <Input

resources/js/Components/Product/ProductTable.tsx

@@ -76,7 +76,7 @@ export default function ProductTable({
               <TableHead className="w-[50px] text-center">#</TableHead>
               <TableHead>
                 <button onClick={() => onSort("code")} className="flex items-center hover:text-gray-900">
-                  商品編號 <SortIcon field="code" />
+                  商品代號 <SortIcon field="code" />
                 </button>
               </TableHead>
               <TableHead>