From 7a1dfde293051f716477bfa3439fcc3d1762b2f9 Mon Sep 17 00:00:00 2001 From: "K. Allagbe" Date: Fri, 27 Dec 2024 00:52:18 -0700 Subject: [PATCH] issue #202: layout --- src/app/label-data-confirmation/page.tsx | 477 ++++++++++++++++++++++- src/stores/labelDataStore.ts | 3 +- 2 files changed, 477 insertions(+), 3 deletions(-) diff --git a/src/app/label-data-confirmation/page.tsx b/src/app/label-data-confirmation/page.tsx index eb5a7131..a90d84f5 100644 --- a/src/app/label-data-confirmation/page.tsx +++ b/src/app/label-data-confirmation/page.tsx @@ -1,12 +1,485 @@ "use client"; +import ImageViewer from "@/components/ImageViewer"; +import useUploadedFilesStore from "@/stores/fileStore"; import useLabelDataStore from "@/stores/labelDataStore"; +import { Quantity } from "@/types/types"; +import { + Box, + Button, + Checkbox, + Chip, + Container, + FormControlLabel, + FormGroup, + Link, + Table, + TableBody, + TableCell, + TableContainer, + TableHead, + TableRow, + Typography, +} from "@mui/material"; +import React, { useEffect } from "react"; +import { useTranslation } from "react-i18next"; + +interface QuantityChipsProps extends React.ComponentProps { + quantities: Quantity[] | undefined; +} + +const QuantityChips = React.forwardRef( + ({ quantities, ...rest }, ref) => { + return ( + + {quantities?.map((q, i) => ( + + ))} + + ); + }, +); + +QuantityChips.displayName = "QuantityChips"; const LabelDataConfirmationPage = () => { - // use label data from store const { labelData } = useLabelDataStore(); + const { uploadedFiles } = useUploadedFilesStore(); + const imageFiles = uploadedFiles.map((file) => file.getFile()); + const { t } = useTranslation("labelDataValidator"); + + useEffect(() => { + console.log(labelData); + }, [labelData]); return ( -
{labelData ? JSON.stringify(labelData) : "No data available"}
+ + + + + + + + + {/* Title */} + + Review and Confirm The Label Data + + + {/* Instructional Text */} + + Review the information below. Click Confirm to + proceed, or return to the previous page to make changes. + + + + + {/* Base Information */} + + + Fertilizer Base Information + + + + + + + Name + + + + Registration Number + + + + + Lot Number + + + + NPK + + + Weight + + + Density + + + Volume + + + + + + + + {labelData?.baseInformation.name.value} + + + + + {labelData?.baseInformation.registrationNumber.value} + + + + + {labelData?.baseInformation.lotNumber.value} + + + + + {labelData?.baseInformation.npk.value} + + + + + + + + + + + + + +
+ + + + {/* Organizations Table */} + + + Organizations + + + + + + + Name + + + Address + + + Website + + + + Phone Number + + + + + + {labelData?.organizations?.map((org, index) => ( + + + {org.name.value} + + + {org.address.value} + + + + + {org.website.value} + + + + + + + {org.phoneNumber.value} + + + + + ))} + +
+ + + + {/* Cautions */} + + + Cautions + + + + + + + English + + + French + + + + + {labelData?.cautions?.map((caution, index) => ( + + + {caution.en} + + + {caution.fr} + + + ))} + +
+ + + + {/* Instructions */} + + + Instructions + + + + + + + English + + + French + + + + + {labelData?.instructions?.map((instruction, index) => ( + + + {instruction.en} + + + {instruction.fr} + + + ))} + +
+ + + + {/* Guaranteed Analysis */} + + + Guaranteed Analysis + + {/* Title Section */} + + + Title + + + + + + + + English + + + + French + + + + Is Minimal + + + + + + + + + {labelData?.guaranteedAnalysis.titleEn.value} + + + + + {labelData?.guaranteedAnalysis.titleFr.value} + + + + + {labelData?.guaranteedAnalysis.isMinimal.value + ? "Yes" + : "No"} + + + + +
+ + + + {/* Nutrients Section */} + + + Nutrients + + + + + + + + English + + + + French + + + Value + + + Unit + + + + + {labelData?.guaranteedAnalysis.nutrients.map( + (nutrient, index) => ( + + + {nutrient.en} + + + {nutrient.fr} + + + {nutrient.value} + + + {nutrient.unit} + + + ), + )} + +
+ + + + + + {/* Confirmation Section */} + + + Please confirm the data is accurate. If changes are needed, return + to edit. + + + {/* Acknowledgment Checkbox */} + + } + label={ + + I acknowledge that the data is accurate. + + } + /> + + + + + + + + + + ); }; diff --git a/src/stores/labelDataStore.ts b/src/stores/labelDataStore.ts index 31298b42..3b1fd56c 100644 --- a/src/stores/labelDataStore.ts +++ b/src/stores/labelDataStore.ts @@ -1,4 +1,5 @@ import { LabelData } from "@/types/types"; +import { VERIFIED_LABEL_DATA } from "@/utils/client/constants"; import { create } from "zustand"; interface LabelDataState { @@ -8,7 +9,7 @@ interface LabelDataState { } const useLabelDataStore = create((set) => ({ - labelData: null, + labelData: VERIFIED_LABEL_DATA, setLabelData: (newData) => set({ labelData: newData }), resetLabelData: () => set({ labelData: null }), }));