From 1e33a0b043f1f783c22791b744f0dd797747a8d9 Mon Sep 17 00:00:00 2001
From: "cyril.tsui" <cyril.tsui@2fi-solutions.com.hk>
Date: Thu, 9 Oct 2025 16:37:56 +0800
Subject: [PATCH] update for import warehouse

---
 src/app/api/stockTake/actions.ts              |   1 -
 src/app/api/warehouse/actions.ts              |  15 +++
 .../ExcelFileImport/ExcelFileImport.tsx       | 111 +++++++++++-------
 3 files changed, 85 insertions(+), 42 deletions(-)
 create mode 100644 src/app/api/warehouse/actions.ts

diff --git a/src/app/api/stockTake/actions.ts b/src/app/api/stockTake/actions.ts
index 6b91b20..b0cea1a 100644
--- a/src/app/api/stockTake/actions.ts
+++ b/src/app/api/stockTake/actions.ts
@@ -11,6 +11,5 @@ export const importStockTake = async (data: FormData) => {
             body: data,
         },
     );
-    console.log(importStockTake)
     return importStockTake;
 }
\ No newline at end of file
diff --git a/src/app/api/warehouse/actions.ts b/src/app/api/warehouse/actions.ts
new file mode 100644
index 0000000..bbe0bac
--- /dev/null
+++ b/src/app/api/warehouse/actions.ts
@@ -0,0 +1,15 @@
+"use server";
+
+import { serverFetchString } from "@/app/utils/fetchUtil";
+import { BASE_API_URL } from "@/config/api";
+
+export const importWarehouse = async (data: FormData) => {
+    const importWarehouse = await serverFetchString<string>(
+        `${BASE_API_URL}/warehouse/import`,
+        {
+            method: "POST",
+            body: data,
+        },
+    );
+    return importWarehouse;
+}
\ No newline at end of file
diff --git a/src/components/ExcelFileImport/ExcelFileImport.tsx b/src/components/ExcelFileImport/ExcelFileImport.tsx
index 800b841..c02ce7e 100644
--- a/src/components/ExcelFileImport/ExcelFileImport.tsx
+++ b/src/components/ExcelFileImport/ExcelFileImport.tsx
@@ -1,25 +1,29 @@
 "use client";
 
 import { FileUpload } from "@mui/icons-material";
-import { Button, Grid, Stack } from "@mui/material";
-import React, { ChangeEvent, useCallback, useMemo } from "react";
+import { Button, Card, CardContent, Grid, Stack, Typography } from "@mui/material";
+import React, { ChangeEvent, useCallback, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { errorDialogWithContent, submitDialog, successDialog, successDialogWithContent } from "../Swal/CustomAlerts";
 import { importStockTake } from "@/app/api/stockTake/actions";
+import { importWarehouse } from "@/app/api/warehouse/actions";
 
 interface Props {
 }
 
-const ExcelFileImport: React.FC<Props> = async ({ }) => {
+const BUTTON_NAMES = ["Import Stock Take", "Import Warehouse"] as const;
+type ButtonNameType = typeof BUTTON_NAMES[number];
+
+const ExcelFileImport: React.FC<Props> = ({ }) => {
 
     const { t } = useTranslation("common");
+    const [isLoading, setIsLoading] = useState(false);
 
-    const buttonName: string[] = useMemo(() => {
-        return ["Import Stock Take"]
+    const buttonNames: ButtonNameType[] = useMemo(() => {
+        return [...BUTTON_NAMES]
     }, [])
 
     const handleExcelFileImportClick = useCallback(async (event: ChangeEvent<HTMLInputElement>) => {
-
         try {
             if (event.target.files !== null) {
                 const file = event.target.files[0]
@@ -28,12 +32,17 @@ const ExcelFileImport: React.FC<Props> = async ({ }) => {
 
                 if (file.name.endsWith(".xlsx") || file.name.endsWith(".csv")) {
                     let response: String = ""
+                    const buttonId = event.target.id as ButtonNameType;
+                    setIsLoading(() => true);
 
-                    console.log(event.target.id)
-                    switch (event.target.id) {
+                    console.log(buttonId)
+                    switch (buttonId) {
                         case "Import Stock Take":
                             response = await importStockTake(formData)
                             break;
+                        case "Import Warehouse":
+                            response = await importWarehouse(formData)
+                            break;
                     }
 
                     if (response.includes("Import Excel success")) {
@@ -41,47 +50,67 @@ const ExcelFileImport: React.FC<Props> = async ({ }) => {
                     } else {
                         errorDialogWithContent(t("Import Fail"), t(`${response}`), t)
                     }
+                    setIsLoading(() => false);
                 }
             }
 
         } catch (err) {
             console.log(err)
-            return false
+            setIsLoading(() => false);
+            // return false
         }
-
-        return
-    }, [])
+    }, [isLoading])
 
     return (
-        <>
-            <Grid container rowGap={1.5}>
-                {
-                    buttonName.map((name) => {
-                        return (
-                            <Grid container>
-                                <Button
-                                    variant="contained"
-                                    color="info"
-                                    startIcon={<FileUpload />}
-                                    component="label"
-                                >
-                                    <input
-                                        id={name}
-                                        type='file'
-                                        accept='.xlsx'
-                                        hidden
-                                        onChange={(event) => {
-                                            handleExcelFileImportClick(event)
-                                        }}
-                                    />
-                                    {t(name)}
-                                </Button>
-                            </Grid>
-                        )
-                    })
-                }
-            </Grid>
-        </>
+        <Card>
+            <CardContent sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
+                <Typography
+                    variant="h4"
+                    sx={{
+                        background: 'linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet)',
+                        WebkitBackgroundClip: 'text',
+                        WebkitTextFillColor: 'transparent',
+                        backgroundClip: 'text',
+                        color: 'transparent', // Fallback for non-Webkit browsers
+                    }}
+                >
+                    {isLoading ? t("Importing...") : t("Pending for importing")}
+                </Typography>
+                <Stack
+                    spacing={2}
+                >
+                    <Grid container rowGap={1.5}>
+                        {
+                            buttonNames.map((name) => {
+                                return (
+                                    <Grid container key={`${name}-grid`}>
+                                        <Button
+                                            key={`${name}-btn`}
+                                            variant="contained"
+                                            color="info"
+                                            startIcon={<FileUpload />}
+                                            component="label"
+                                        >
+                                            <input
+                                                key={`${name}-in`}
+                                                id={name}
+                                                type='file'
+                                                accept='.xlsx'
+                                                hidden
+                                                onChange={(event) => {
+                                                    handleExcelFileImportClick(event)
+                                                }}
+                                            />
+                                            {t(name)}
+                                        </Button>
+                                    </Grid>
+                                )
+                            })
+                        }
+                    </Grid>
+                </Stack>
+            </CardContent>
+        </Card>
     );
 };