diff --git a/src/app/label-data-confirmation/page.tsx b/src/app/label-data-confirmation/page.tsx
index eb5a7131..bdab3635 100644
--- a/src/app/label-data-confirmation/page.tsx
+++ b/src/app/label-data-confirmation/page.tsx
@@ -1,12 +1,412 @@
"use client";
+import ImageViewer from "@/components/ImageViewer";
+import useUploadedFilesStore from "@/stores/fileStore";
import useLabelDataStore from "@/stores/labelDataStore";
+import {
+ Box,
+ Chip,
+ Container,
+ Link,
+ Table,
+ TableBody,
+ TableCell,
+ TableContainer,
+ TableHead,
+ TableRow,
+ Typography,
+} from "@mui/material";
+import { useEffect } from "react";
+import { useTranslation } from "react-i18next";
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"}
+
+
+
+
+
+
+
+ {/* 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}
+
+
+
+
+ {labelData?.baseInformation.weight.quantities?.map(
+ (q, i) => (
+
+ ),
+ )}
+
+
+
+
+ {labelData?.baseInformation.density.quantities?.map(
+ (q, i) => (
+
+ ),
+ )}
+
+
+
+
+ {labelData?.baseInformation.volume.quantities?.map(
+ (q, i) => (
+
+ ),
+ )}
+
+
+
+
+
+
+
+
+ {/* 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}
+
+
+ ),
+ )}
+
+
+
+
+
+
+
+
);
};
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 }),
}));