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

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