[new page] create temp rough schedule page

src/app/(main)/settings/rss/page.tsx

@@ -0,0 +1,48 @@
+import { TypeEnum } from "@/app/utils/typeEnum";
+import ItemsSearch from "@/components/ItemsSearch";
+import { getServerI18n } from "@/i18n";
+import Add from "@mui/icons-material/Add";
+import Button from "@mui/material/Button";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import { Metadata } from "next";
+import Link from "next/link";
+import { Suspense } from "react";
+
+export const metadata: Metadata = {
+    title: "Rough Schedule Setting",
+};
+
+const roughScheduleSetting: React.FC = async () => {
+    const project = TypeEnum.PRODUCT
+    const { t } = await getServerI18n(project);
+    //   preloadClaims();
+
+    return (
+        <>
+            <Stack
+                direction="row"
+                justifyContent="space-between"
+                flexWrap="wrap"
+                rowGap={2}
+            >
+                <Typography variant="h4" marginInlineEnd={2}>
+                    {t("Rough Schedule Setting")}
+                </Typography>
+                {/* <Button
+          variant="contained"
+          startIcon={<Add />}
+          LinkComponent={Link}
+          href="product/create"
+        >
+          {t("Create product")}
+        </Button> */}
+            </Stack>
+            <Suspense fallback={<ItemsSearch.Loading />}>
+                <ItemsSearch />
+            </Suspense>
+        </>
+    );
+};
+
+export default roughScheduleSetting;

src/components/Breadcrumb/Breadcrumb.tsx

@@ -13,7 +13,7 @@ const pathToLabelMap: { [path: string]: string } = {
   "/tasks": "Task Template",
   "/tasks/create": "Create Task Template",
   "/settings/qcItem": "Qc Item",
-
+  "/settings/rss": "Rough Schedule Setting",
 };
 
 const Breadcrumb = () => {

src/components/NavigationContent/NavigationContent.tsx

@@ -196,6 +196,11 @@ const NavigationContent: React.FC = () => {
           label: "Items",
           path: "/settings/items",
         },
+        {
+          icon: <RequestQuote />,
+          label: "Rough Schedule Setting",
+          path: "/settings/rss",
+        },
         {
           icon: <RequestQuote />,
           label: "Equipment Type",

src/components/RoughScheduleSetting/RoughScheduleSetting.tsx

@@ -0,0 +1,191 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+
+import {
+    FormProvider,
+    SubmitErrorHandler,
+    SubmitHandler,
+    useForm,
+} from "react-hook-form";
+import { deleteDialog } from "../Swal/CustomAlerts";
+import { Box, Button, Grid, Stack, Tab, Tabs, TabsProps, Typography } from "@mui/material";
+import { Check, Close, EditNote } from "@mui/icons-material";
+import { useGridApiRef } from "@mui/x-data-grid";
+import {CreateItemInputs, saveItem} from "@/app/api/settings/item/actions";
+import {saveItemQcChecks} from "@/app/api/settings/qcCheck/actions";
+import {useTranslation} from "react-i18next/index";
+import {ItemQc} from "@/app/api/settings/item";
+
+type Props = {
+    isEditMode: boolean;
+    // type: TypeEnum;
+    defaultValues: Partial<CreateItemInputs> | undefined;
+    qcChecks: ItemQc[]
+};
+
+const CreateItem: React.FC<Props> = ({
+                                         isEditMode,
+                                         // type,
+                                         defaultValues,
+                                         qcChecks
+                                     }) => {
+    // console.log(type)
+    const apiRef = useGridApiRef();
+    const params = useSearchParams()
+    console.log(params.get("id"))
+    const [serverError, setServerError] = useState<String>("");
+    const [tabIndex, setTabIndex] = useState(0);
+    const { t } = useTranslation();
+    const router = useRouter();
+    const title = "Product / Material"
+    const [mode, redirPath] = useMemo(() => {
+        // var typeId = TypeEnum.CONSUMABLE_ID
+        var title = "";
+        var mode = "";
+        var redirPath = "";
+        // if (type === TypeEnum.MATERIAL) {
+        //   typeId = TypeEnum.MATERIAL_ID
+        //   title = "Material";
+        //   redirPath = "/settings/material";
+        // }
+        // if (type === TypeEnum.PRODUCT) {
+        // typeId = TypeEnum.PRODUCT_ID
+        title = "Rough Schedule";
+        redirPath = "/settings/rss";
+        // }
+        // if (type === TypeEnum.BYPRODUCT) {
+        //   typeId = TypeEnum.BYPRODUCT_ID
+        //   title = "By-Product";
+        //   redirPath = "/settings/byProduct";
+        // }
+        if (isEditMode) {
+            mode = "Edit";
+        } else {
+            mode = "Create";
+        }
+        return [mode, redirPath];
+    }, [isEditMode]);
+    // console.log(typeId)
+    const formProps = useForm<CreateItemInputs>({
+        defaultValues: defaultValues ? defaultValues : {
+        },
+    });
+    const errors = formProps.formState.errors;
+
+    const handleCancel = () => {
+        router.replace(`/settings/product`);
+    };
+    const onSubmit = useCallback<SubmitHandler<CreateItemInputs & {}>>(
+        async (data, event) => {
+            let hasErrors = false;
+            console.log(errors)
+            // console.log(apiRef.current.getCellValue(2, "lowerLimit"))
+            // apiRef.current.
+            try {
+                if (hasErrors) {
+                    setServerError(t("An error has occurred. Please try again later.") as String);
+                    return false;
+                }
+                console.log("data posted");
+                console.log(data);
+                const qcCheck =  data.qcChecks.length > 0 ? data.qcChecks.filter((q) => data.qcChecks_active.includes(q.id!!)).map((qc) => {
+                    return {
+                        qcItemId: qc.id,
+                        instruction: qc.instruction,
+                        lowerLimit: qc.lowerLimit,
+                        upperLimit: qc.upperLimit,
+                        itemId: parseInt(params.get("id")!.toString())
+                    }
+                }) : []
+
+                const test = data.qcChecks.filter((q) => data.qcChecks_active.includes(q.id!!))
+                // TODO:
+                // 1. check field ( directly modify col def / check here )
+                // 2. set error change tab index
+                console.log(test)
+                console.log(qcCheck)
+                // return
+                // do api
+                console.log("asdad")
+                var responseI = await saveItem(data);
+                console.log("asdad")
+                var responseQ = await saveItemQcChecks(qcCheck)
+                if (responseI && responseQ) {
+                    if (!Boolean(responseI.id)) {
+                        formProps.setError(responseI.errorPosition!! as keyof CreateItemInputs, {
+                            message: responseI.message!!,
+                            type: "required",
+                        });
+                    } else if (!Boolean(responseQ.id)) {
+
+                    } else if (Boolean(responseI.id) && Boolean(responseQ.id)) {
+                        router.replace(redirPath);
+                    }
+                }
+            } catch (e) {
+                // backend error
+                setServerError(t("An error has occurred. Please try again later."));
+                console.log(e);
+            }
+        },
+        [apiRef, router, t]
+    );
+
+    // multiple tabs
+    const onSubmitError = useCallback<SubmitErrorHandler<CreateItemInputs>>(
+        (errors) => {},
+        []
+    );
+
+    return (
+        <>
+            <FormProvider {...formProps}>
+                <Stack
+                    spacing={2}
+                    component="form"
+                    onSubmit={formProps.handleSubmit(onSubmit, onSubmitError)}
+                >
+                    <Grid>
+                        <Typography mb={2} variant="h4">
+                            {t(`${mode} ${title}`)}
+                        </Typography>
+                    </Grid>
+                    <Tabs value={tabIndex} onChange={handleTabChange} variant="scrollable">
+                        <Tab label={t("Product / Material Details")} iconPosition="end"/>
+                        <Tab label={t("Qc items")} iconPosition="end" />
+                    </Tabs>
+                    {serverError && (
+                        <Typography variant="body2" color="error" alignSelf="flex-end">
+                            {serverError}
+                        </Typography>
+                    )}
+                    {tabIndex === 0 && <ProductDetails />}
+                    {tabIndex === 1 && <QcDetails apiRef={apiRef} />}
+                    {/* {type === TypeEnum.MATERIAL && <MaterialDetails />} */}
+                    {/* {type === TypeEnum.BYPRODUCT && <ByProductDetails />} */}
+                    <Stack direction="row" justifyContent="flex-end" gap={1}>
+                        <Button
+                            name="submit"
+                            variant="contained"
+                            startIcon={<Check />}
+                            type="submit"
+                            //   disabled={submitDisabled}
+                        >
+                            {isEditMode ? t("Save") as String : t("Confirm") as String}
+                        </Button>
+                        <Button
+                            variant="outlined"
+                            startIcon={<Close />}
+                            onClick={handleCancel}
+                        >
+                            {t("Cancel") as String}
+                        </Button>
+                    </Stack>
+                </Stack>
+            </FormProvider>
+        </>
+    );
+};
+export default CreateItem;

src/components/RoughScheduleSetting/RoughScheduleSettingWrapper.tsx

@@ -0,0 +1,51 @@
+import {CreateItemInputs} from "@/app/api/settings/item/actions";
+import CreateItemLoading from "../CreateItem/CreateItemLoading";
+import {fetchItem} from "@/app/api/settings/item";
+import CreateItem from "@/components/RoughScheduleSetting/RoughScheduleSetting";
+
+interface SubComponents {
+    Loading: typeof CreateItemLoading;
+}
+
+type Props = {
+    id?: number
+    // type: TypeEnum;
+};
+
+const RoughScheduleSettingWrapper: ({id}: { id: any }) => Promise<JSX.Element> = async ({ id }) => {
+    var result
+    var defaultValues: Partial<CreateItemInputs> | undefined
+    // console.log(type)
+    var qcChecks
+    if (id) {
+        result = await fetchItem(id);
+        const item = result.item
+        qcChecks = result.qcChecks
+        const activeRows = qcChecks.filter(it => it.isActive).map(i => i.id)
+        console.log(qcChecks)
+        defaultValues = {
+            type: item?.type,
+            id: item?.id,
+            code: item?.code,
+            name: item?.name,
+            description: item?.description,
+            remarks: item?.remarks,
+            shelfLife: item?.shelfLife,
+            countryOfOrigin: item?.countryOfOrigin,
+            maxQty: item?.maxQty,
+            qcChecks: qcChecks,
+            qcChecks_active: activeRows
+        };
+    }
+
+    return (
+        <CreateItem
+            isEditMode={Boolean(id)}
+            defaultValues={defaultValues}
+            qcChecks={qcChecks || []}
+        />
+    );
+};
+RoughScheduleSettingWrapper.Loading = CreateItemLoading;
+
+export default RoughScheduleSettingWrapper;

src/components/RoughScheduleSetting/index.ts

@@ -0,0 +1 @@
+export { default } from "./RoughScheduleSettingWrapper";