From 806c8c1242cf33568e65e964593e0945defe7c56 Mon Sep 17 00:00:00 2001
From: "kelvin.yau" <kelvin.yau@2fi-solutions.com.hk>
Date: Fri, 13 Mar 2026 15:17:34 +0800
Subject: [PATCH] A4 printer routing and register, see backend

---
 src/app/api/settings/printer/actions.ts       |  1 +
 src/app/api/settings/printer/index.ts         |  2 +
 .../CreatePrinter/CreatePrinter.tsx           | 46 ++++++++++++++++
 src/components/EditPrinter/EditPrinter.tsx    | 54 ++++++++++++++++++-
 .../PrinterSearch/PrinterSearch.tsx           | 16 ++++++
 src/i18n/zh/common.json                       |  3 +-
 6 files changed, 120 insertions(+), 2 deletions(-)

diff --git a/src/app/api/settings/printer/actions.ts b/src/app/api/settings/printer/actions.ts
index 21ceb3a..5ed68e0 100644
--- a/src/app/api/settings/printer/actions.ts
+++ b/src/app/api/settings/printer/actions.ts
@@ -12,6 +12,7 @@ export interface PrinterInputs {
   name?: string;
   code?: string;
   type?: string;
+  brand?: string;
   description?: string;
   ip?: string;
   port?: number;
diff --git a/src/app/api/settings/printer/index.ts b/src/app/api/settings/printer/index.ts
index a4c4117..3173551 100644
--- a/src/app/api/settings/printer/index.ts
+++ b/src/app/api/settings/printer/index.ts
@@ -10,6 +10,7 @@ export interface PrinterCombo {
     code?: string;
     name?: string;
     type?: string;
+    brand?: string;
     description?: string;
     ip?: string;
     port?: number;
@@ -21,6 +22,7 @@ export interface PrinterResult {
     name?: string;
     code?: string;
     type?: string;
+    brand?: string;
     description?: string;
     ip?: string;
     port?: number;
diff --git a/src/components/CreatePrinter/CreatePrinter.tsx b/src/components/CreatePrinter/CreatePrinter.tsx
index b72de16..07542ec 100644
--- a/src/components/CreatePrinter/CreatePrinter.tsx
+++ b/src/components/CreatePrinter/CreatePrinter.tsx
@@ -30,6 +30,7 @@ const CreatePrinter: React.FC = () => {
     ip: "",
     port: undefined,
     type: "A4",
+    brand: "Canon",
     dpi: undefined,
     description: "",
   });
@@ -50,6 +51,18 @@ const CreatePrinter: React.FC = () => {
     if (formData.type !== "Label") {
       setFormData((prev) => ({ ...prev, dpi: undefined }));
     }
+    if (formData.type === "A4") {
+      // A4: allow Canon/Brother (keep whatever is selected, default Canon from initial state)
+      if (!formData.brand) {
+        setFormData((prev) => ({ ...prev, brand: "Canon" }));
+      }
+    } else if (formData.type === "Label") {
+      // Label: preview Zebra
+      setFormData((prev) => ({ ...prev, brand: "Zebra" }));
+    } else {
+      // Other types (if any): no brand
+      setFormData((prev) => ({ ...prev, brand: undefined }));
+    }
   }, [formData.type]);
 
   const handleChange = useCallback((field: keyof PrinterInputs) => {
@@ -74,6 +87,13 @@ const CreatePrinter: React.FC = () => {
     }));
   }, []);
 
+    const handleBrandChange = useCallback((e: SelectChangeEvent) => {
+    setFormData((prev) => ({
+      ...prev,
+      brand: e.target.value,
+    }));
+  }, []);
+
   const handleDescriptionChange = useCallback((_e: any, newValue: string | null) => {
     setFormData((prev) => ({
       ...prev,
@@ -155,6 +175,32 @@ const CreatePrinter: React.FC = () => {
             </Select>
           </FormControl>
         </Grid>
+          {formData.type === "A4" && (
+            <Grid item xs={12} md={6}>
+              <FormControl fullWidth>
+                <InputLabel>{t("Brand")}</InputLabel>
+                <Select
+                  label={t("Brand")}
+                  value={formData.brand ?? "Canon"}
+                  onChange={handleBrandChange}
+                >
+                  <MenuItem value="Canon">Canon</MenuItem>
+                  <MenuItem value="Brother">Brother</MenuItem>
+                </Select>
+              </FormControl>
+            </Grid>
+          )}
+
+          {formData.type === "Label" && (
+            <Grid item xs={12} md={6}>
+              <TextField
+                fullWidth
+                label={t("Brand")}
+                value={formData.brand ?? "Zebra"}
+                disabled
+              />
+            </Grid>
+          )}
         <Grid item xs={12} md={6}>
           <TextField
             fullWidth
diff --git a/src/components/EditPrinter/EditPrinter.tsx b/src/components/EditPrinter/EditPrinter.tsx
index e8512ce..31e0643 100644
--- a/src/components/EditPrinter/EditPrinter.tsx
+++ b/src/components/EditPrinter/EditPrinter.tsx
@@ -16,7 +16,6 @@ import {
   SelectChangeEvent,
   Stack,
   TextField,
-  Typography,
 } from "@mui/material";
 import { Check, ArrowBack } from "@mui/icons-material";
 import { successDialog } from "../Swal/CustomAlerts";
@@ -34,13 +33,24 @@ const EditPrinter: React.FC<Props> = ({ printer }) => {
     ip: printer.ip || "",
     port: printer.port || undefined,
     type: printer.type || "",
+    brand: printer.brand ?? "Canon",
     dpi: printer.dpi || undefined,
+    description: printer.description || "",
   });
 
   useEffect(() => {
     if (formData.type !== "Label") {
       setFormData((prev) => ({ ...prev, dpi: undefined }));
     }
+    if (formData.type === "A4") {
+      if (!formData.brand) {
+        setFormData((prev) => ({ ...prev, brand: "Canon" }));
+      }
+    } else if (formData.type === "Label") {
+      setFormData((prev) => ({ ...prev, brand: "Zebra" }));
+    } else {
+      setFormData((prev) => ({ ...prev, brand: undefined }));
+    }
   }, [formData.type]);
 
   const handleChange = useCallback((field: keyof PrinterInputs) => {
@@ -63,6 +73,14 @@ const EditPrinter: React.FC<Props> = ({ printer }) => {
     }));
   }, []);
 
+  const handleBrandChange = useCallback((e: SelectChangeEvent) => {
+    const value = e.target.value;
+    setFormData((prev) => ({
+      ...prev,
+      brand: value,
+    }));
+  }, []);
+
   const handleSubmit = useCallback(async () => {
     setIsSubmitting(true);
     try {
@@ -123,6 +141,31 @@ const EditPrinter: React.FC<Props> = ({ printer }) => {
             </Select>
           </FormControl>
         </Grid>
+        {formData.type === "A4" && (
+          <Grid item xs={12} md={6}>
+            <FormControl fullWidth>
+              <InputLabel>{t("Brand")}</InputLabel>
+              <Select
+                label={t("Brand")}
+                value={formData.brand ?? "Canon"}
+                onChange={handleBrandChange}
+              >
+                <MenuItem value="Canon">Canon</MenuItem>
+                <MenuItem value="Brother">Brother</MenuItem>
+              </Select>
+            </FormControl>
+          </Grid>
+        )}
+        {formData.type === "Label" && (
+          <Grid item xs={12} md={6}>
+            <TextField
+              fullWidth
+              label={t("Brand")}
+              value={formData.brand ?? "Zebra"}
+              disabled
+            />
+          </Grid>
+        )}
         <Grid item xs={12} md={6}>
           <TextField
             fullWidth
@@ -134,6 +177,15 @@ const EditPrinter: React.FC<Props> = ({ printer }) => {
             disabled={formData.type !== "Label"}
           />
         </Grid>
+        <Grid item xs={12} md={6}>
+          <TextField
+            fullWidth
+            label={t("Description")}
+            value={formData.description || ""}
+            onChange={handleChange("description")}
+            variant="outlined"
+          />
+        </Grid>
         <Grid item xs={12}>
           <Stack direction="row" spacing={2}>
             <Button
diff --git a/src/components/PrinterSearch/PrinterSearch.tsx b/src/components/PrinterSearch/PrinterSearch.tsx
index d2de7e2..3638e99 100644
--- a/src/components/PrinterSearch/PrinterSearch.tsx
+++ b/src/components/PrinterSearch/PrinterSearch.tsx
@@ -51,6 +51,10 @@ const PrinterSearch: React.FC<Props> = ({ printers }) => {
         paramName: "type",
         type: "text",
       },
+      {
+        label: t("Brand"),
+        paramName: "brand",
+        type: "text" },
     ],
     [t],
   );
@@ -129,6 +133,13 @@ const PrinterSearch: React.FC<Props> = ({ printers }) => {
         align: "left",
         headerAlign: "left",
         sx: { width: "15%", minWidth: "100px" },
+      },
+            { 
+        name: "brand", 
+        label: t("Brand"),
+        align: "left",
+        headerAlign: "left",
+        sx: { width: "12%", minWidth: "90px" },
       },
       { 
         name: "dpi", 
@@ -182,6 +193,11 @@ const PrinterSearch: React.FC<Props> = ({ printers }) => {
                 printer.type?.toLowerCase().includes(query.type?.toLowerCase() || "")
               );
             }
+            if (query.brand && query.brand.trim()) {
+              results = results.filter((printer) =>
+                printer.brand?.toLowerCase().includes(query.brand?.toLowerCase() || "")
+              );
+            }
 
             setFilteredPrinters(results);
             setPagingController({ pageNum: 1, pageSize: pagingController.pageSize });
diff --git a/src/i18n/zh/common.json b/src/i18n/zh/common.json
index 0ac3c96..38a39fc 100644
--- a/src/i18n/zh/common.json
+++ b/src/i18n/zh/common.json
@@ -526,5 +526,6 @@
     "Auto-refresh every 5 minutes": "每5分鐘自動刷新",
     "Auto-refresh every 10 minutes": "每10分鐘自動刷新",
     "Auto-refresh every 15 minutes": "每15分鐘自動刷新",
-    "Auto-refresh every 1 minute": "每1分鐘自動刷新"
+    "Auto-refresh every 1 minute": "每1分鐘自動刷新",
+    "Brand": "品牌"
 }
\ No newline at end of file