@djb25/digit-ui-module-ekyc 1.0.8 → 1.0.10

package/src/pages/employee/MeterDetails.js

@@ -1,486 +1,496 @@
-import React, { useState, useRef, Fragment, useEffect } from "react";
+// import React, { useState, Fragment, useEffect } from "react";
+// import {
+//   Card,
+//   CardLabel,
+//   TextInput,
+//   SubmitBar,
+//   CardHeader,
+//   ActionBar,
+//   Dropdown,
+//   UploadFile,
+//   Toast,
+//   FormStep,
+// } from "@djb25/digit-ui-react-components";
+// import { useTranslation } from "react-i18next";
+// import { useHistory, useLocation } from "react-router-dom";
+// import { getSavedData } from "../../utils";
+
+// const MeterDetails = ({ config, onSelect, formData, t: tProps }) => {
+//   const { t } = useTranslation();
+//   const history = useHistory();
+//   const location = useLocation();
+
+//   const flowState = location.state || {};
+//   const { isEditing, kNumber } = flowState;
+
+//   // Robust data extraction from formData
+//   const activeEdits = formData || {};
+//   const rawReviewData = formData?.reviewData || formData?.connectionDetails || {};
+//   const reviewWrapper = rawReviewData?.applicationReview || rawReviewData;
+//   const applicationData = (Array.isArray(reviewWrapper) ? reviewWrapper[0] : reviewWrapper) || {};
+//   const apiData = applicationData?.newData || applicationData;
+//   const apiMeter = apiData?.meterDetails || apiData || {};
+
+//   const tenantId = Digit.ULBService.getCurrentTenantId();
+
+//   const { data: dataV0 } = Digit.Hooks.ekyc.useGetPropertyType(tenantId);
+//   const { data: dataConn } = Digit.Hooks.ekyc.useGetConnectionTypeV2(tenantId);
+
+//   const mtrData = activeEdits?.meterDetails || {};
+
+//   const [meterStatus, setMeterStatus] = useState(mtrData.meterStatusData || (apiMeter.metered !== undefined ? { label: apiMeter.metered ? t("EKYC_METER_METERED") : t("EKYC_METER_UNMETERED"), value: apiMeter.metered ? "Metered" : "Unmetered" } : (apiMeter.meterStatus ? { label: t(`EKYC_METER_${apiMeter.meterStatus}`), value: apiMeter.meterStatus } : null)));
+//   const [meterPhoto, setMeterStatusPhoto] = useState(mtrData.meterPhoto || null);
+//   const [meterPhotoFileStoreId, setMeterStatusPhotoFileStoreId] = useState(mtrData.meterPhotoFileStoreId || apiMeter.meterPhotoFileStoreId || null);
+//   const [workingStatus, setWorkingStatus] = useState(mtrData.workingStatusData || (apiMeter.workingStatus !== undefined ? { label: apiMeter.workingStatus ? t("EKYC_METER_WORKING") : t("EKYC_METER_NOT_WORKING"), value: apiMeter.workingStatus ? "Working" : "Not Working" } : (apiMeter.workingStatus ? { label: t(`EKYC_METER_${apiMeter.workingStatus}`), value: apiMeter.workingStatus } : null)));
+//   const [meterLocation, setMeterLocation] = useState(mtrData.meterLocation || apiMeter.meterLocationAddress || apiMeter.meterLocation || "");
+//   const [lastBillRaised, setLastBillRaised] = useState(mtrData.lastBillRaisedData || (apiMeter.lastBillRaised !== undefined ? { label: apiMeter.lastBillRaised ? t("CORE_COMMON_YES") : t("CORE_COMMON_NO"), value: apiMeter.lastBillRaised ? "Yes" : "No" } : (apiMeter.lastBillRaised ? { label: t(`EKYC_${apiMeter.lastBillRaised}`), value: apiMeter.lastBillRaised } : null)));
+//   const [sewerConnection, setSewerConnection] = useState(mtrData.sewerConnectionData || (apiMeter.sewerConnection ? { label: t(`EKYC_${apiMeter.sewerConnection}`), value: apiMeter.sewerConnection } : null));
+//   const [connectionCategory, setConnectionCategory] = useState(mtrData.connectionCategoryData || (apiMeter.connectionCategory ? { label: t(apiMeter.connectionCategory), value: apiMeter.connectionCategory } : (apiMeter.typeOfConnection ? { label: t(apiMeter.typeOfConnection), value: apiMeter.typeOfConnection } : null)));
+//   const [connectionType, setConnectionType] = useState(mtrData.connectionTypeData || (apiMeter.connectionType ? { label: t(apiMeter.connectionType), value: apiMeter.connectionType } : (apiMeter.connectionCategory ? { label: t(apiMeter.connectionCategory), value: apiMeter.connectionCategory } : null)));
+
+//   const [toast, setToast] = useState(null);
+
+//   const getUpdatedData = () => ({
+//     meterStatusData: meterStatus,
+//     meterPhoto,
+//     meterPhotoFileStoreId,
+//     workingStatusData: workingStatus,
+//     meterLocation,
+//     lastBillRaisedData: lastBillRaised,
+//     sewerConnectionData: sewerConnection,
+//     connectionCategoryData: connectionCategory,
+//     connectionTypeData: connectionType,
+//   });
+
+//   const selectphoto = async (e) => {
+//     const file = e.target.files[0];
+//     if (file) {
+//       if (file.size >= 2000000) {
+//         setToast({ type: "error", message: t("EKYC_MAXIMUM_UPLOAD_SIZE_EXCEEDED") });
+//         return;
+//       }
+//       try {
+//         const res = await Digit.UploadServices.Filestorage("EKYC", file, tenantId);
+//         if (res?.data?.files?.[0]?.fileStoreId) {
+//           const fileStoreId = res.data.files[0].fileStoreId;
+//           setMeterStatusPhotoFileStoreId(fileStoreId);
+//           const reader = new FileReader();
+//           reader.onloadend = () => {
+//             setMeterStatusPhoto(reader.result);
+//             if (onSelect) {
+//               onSelect(config.key, { ...getUpdatedData(), meterPhoto: reader.result, meterPhotoFileStoreId: fileStoreId });
+//             }
+//           };
+//           reader.readAsDataURL(file);
+//           setToast({ type: "success", message: t("EKYC_UPLOAD_SUCCESS") });
+//         }
+//       } catch (err) {
+//         setToast({ type: "error", message: t("EKYC_FILE_UPLOAD_ERROR") });
+//       }
+//     }
+//   };
+
+//   const onStepSelect = () => {
+//     const updatedData = getUpdatedData();
+//     if (onSelect) {
+//       onSelect(config.key, updatedData);
+//     } else {
+//       if (isEditing) {
+//         history.push("/digit-ui/employee/ekyc/review", { ...location.state, edits: { ...edits, meterDetails: updatedData } });
+//       } else {
+//         history.push("/digit-ui/employee/ekyc/review", {
+//           ...location.state,
+//           edits: { ...edits, meterDetails: updatedData }
+//         });
+//       }
+//     }
+//   };
+
+//   const handleUpdateAndReturn = () => {
+//     history.push("/digit-ui/employee/ekyc/review", { ...location.state, edits: { ...edits, meterDetails: getUpdatedData() } });
+//   };
+
+//   const meterStatusOptions = [
+//     { label: t("EKYC_METER_METERED"), value: "Metered" },
+//     { label: t("EKYC_METER_UNMETERED"), value: "Unmetered" },
+//   ];
+
+//   const workingStatusOptions = [
+//     { label: t("EKYC_METER_WORKING"), value: "Working" },
+//     { label: t("EKYC_METER_NOT_WORKING"), value: "Not Working" },
+//   ];
+
+//   const yesNoOptions = [
+//     { label: t("CORE_COMMON_YES"), value: "Yes" },
+//     { label: t("CORE_COMMON_NO"), value: "No" },
+//   ];
+
+//   const connectionCategoryOptions = dataV0?.["ws-services-calculation"]?.propertyTypeV2?.map((item) => ({
+//     label: t(item.code), value: item.code,
+//   })) || [];
+
+//   const connectionTypeOptions = dataConn?.["ws-services-calculation"]?.connectionTypeV2?.map((item) => ({
+//     label: t(item.code), value: item.code,
+//   })) || [];
+
+//   return (
+//     <Fragment>
+//       <FormStep t={t} onSelect={onStepSelect} config={config || {}} label={t(config?.texts?.submitBarLabel) || (isEditing ? t("EKYC_UPDATE_AND_RETURN") : t("ES_COMMON_CONTINUE"))}>
+//         <CardLabel>{t("EKYC_METER_STATUS")}</CardLabel>
+//         <Dropdown
+//           option={meterStatusOptions}
+//           optionKey="label"
+//           selected={meterStatus}
+//           select={setMeterStatus}
+//           t={t}
+//         />
+
+//         {meterStatus?.value === "Metered" && (
+//           <Fragment>
+//             <CardLabel>{t("EKYC_METER_WORKING_STATUS")}</CardLabel>
+//             <Dropdown
+//               option={workingStatusOptions}
+//               optionKey="label"
+//               selected={workingStatus}
+//               select={setWorkingStatus}
+//               t={t}
+//             />
+
+//             <CardLabel>{t("EKYC_CAPTURE_METER_IMAGE")}</CardLabel>
+//             <UploadFile
+//               onUpload={selectphoto}
+//               onDelete={() => {
+//                 setMeterStatusPhoto(null);
+//                 setMeterStatusPhotoFileStoreId(null);
+//                 if (onSelect) {
+//                   onSelect(config.key, { ...getUpdatedData(), meterPhoto: null, meterPhotoFileStoreId: null });
+//                 }
+//               }}
+//               message={meterPhotoFileStoreId ? t("EKYC_FILE_UPLOADED") : t("EKYC_NO_FILE_SELECTED")}
+//             />
+//             {meterPhoto && <img src={meterPhoto} style={{ width: "100%", marginTop: "10px", borderRadius: "8px" }} />}
+
+//             <CardLabel>{t("EKYC_METER_LOCATION")}</CardLabel>
+//             <TextInput
+//               id="meterLocation"
+//               name="meterLocation"
+//               value={meterLocation}
+//               onChange={(e) => setMeterLocation(e.target.value)}
+//               placeholder={t("EKYC_ENTER_METER_LOCATION")}
+//             />
+
+//             <CardLabel>{t("EKYC_LAST_BILL_RAISED")}</CardLabel>
+//             <Dropdown
+//               option={yesNoOptions}
+//               optionKey="label"
+//               selected={lastBillRaised}
+//               select={setLastBillRaised}
+//               t={t}
+//             />
+//           </Fragment>
+//         )}
+
+//         <CardLabel>{t("EKYC_SEWER_CONNECTION")}</CardLabel>
+//         <Dropdown
+//           option={yesNoOptions}
+//           optionKey="label"
+//           selected={sewerConnection}
+//           select={setSewerConnection}
+//           t={t}
+//         />
+
+//         <CardLabel>{t("EKYC_TYPE_OF_CONNECTION")}</CardLabel>
+//         <Dropdown
+//           option={connectionCategoryOptions}
+//           optionKey="label"
+//           selected={connectionCategory}
+//           select={setConnectionCategory}
+//           t={t}
+//         />
+
+//         <CardLabel>{t("EKYC_CONNECTION_CATEGORY")}</CardLabel>
+//         <Dropdown
+//           option={connectionTypeOptions}
+//           optionKey="label"
+//           selected={connectionType}
+//           select={setConnectionType}
+//           t={t}
+//         />
+
+//         {toast && <Toast label={toast.message} error={toast.type === "error"} onClose={() => setToast(null)} />}
+//       </FormStep>
+//       {isEditing && !onSelect && (
+//         <ActionBar style={{ position: "static", marginTop: "20px" }}>
+//           <SubmitBar label={t("EKYC_UPDATE_AND_RETURN")} onSubmit={handleUpdateAndReturn} />
+//         </ActionBar>
+//       )}
+//     </Fragment>
+//   );
+// };
+
+// export default MeterDetails;
+
+
+
+
+import React, { useState, Fragment } from "react";
 import {
-    Card,
-    CardLabel,
-    TextInput,
-    SubmitBar,
-    CardHeader,
-    ActionBar,
-    Dropdown,
-    InfoBannerIcon,
-    HomeIcon,
-    UploadFile,
-    Toast,
+  CardLabel,
+  TextInput,
+  Dropdown,
+  UploadFile,
+  Toast,
+  FormStep,
 } from "@djb25/digit-ui-react-components";
-import { useTranslation } from "react-i18next";
-import { useHistory, useLocation } from "react-router-dom";
-import { getPayloadDiff, getSavedData } from "../../utils";
-
-// ─── Icons ────────────────────────────────────────────────────────────────────
-
-const CheckIcon = ({ size = 11, color = "#fff" }) => (
-    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="3" strokeLinecap="round">
-        <polyline points="20 6 9 17 4 12" />
-    </svg>
-);
-
-const MeterIcon = ({ size = 16 }) => (
-    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
-        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67V7z" />
-    </svg>
-);
-
-const ConnectionIcon = ({ size = 16 }) => (
-    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
-        <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z" />
-    </svg>
-);
-
-const CameraIcon = ({ size = 24 }) => (
-    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
-        <path d="M9 2L7.17 4H4C2.9 4 2 4.9 2 6v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L13 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" />
-    </svg>
-);
-
-// ─── Reusable: Section heading with inline rule ───────────────────────────────
-
-const SectionHead = ({ icon, label }) => (
-    <div style={{
-        display: "flex", alignItems: "center", gap: "8px",
-        marginBottom: "16px", marginTop: "4px",
-    }}>
-        <div style={{ opacity: 0.5, display: "flex" }}>{icon}</div>
-        <span style={{ fontSize: "15px", fontWeight: "600", color: "#0B0C0C", whiteSpace: "nowrap" }}>
-            {label}
-        </span>
-        <div style={{ flex: 1, height: "1px", background: "#EAECF0" }} />
-    </div>
-);
-
-// ─── Reusable: Icon-prefixed input ────────────────────────────────────────────
-
-const IconInput = ({ icon, ...props }) => (
-    <div style={{ position: "relative", width: "100%" }}>
-        <div style={{
-            position: "absolute", left: "10px",
-            top: "50%", transform: "translateY(-50%)",
-            zIndex: 1, opacity: 0.45, display: "flex", pointerEvents: "none",
-        }}>
-            {icon}
-        </div>
-        <TextInput textInputStyle={{ paddingLeft: "36px", paddingRight: "12px" }} {...props} />
-    </div>
-);
 
-// ─── Main Component ───────────────────────────────────────────────────────────
+const MeterDetails = ({ config, onSelect }) => {
+  const tenantId = Digit.ULBService.getCurrentTenantId();
 
-const MeterDetails = () => {
-    const { t } = useTranslation();
-    const history = useHistory();
-    const location = useLocation();
+  // 🔹 STATES
+  const [connectionCategory, setConnectionCategory] = useState("");
+  const [saType, setSaType] = useState("");
+  const [status, setStatus] = useState("");
 
-    const flowState = location.state || {
-        kNumber: sessionStorage.getItem("EKYC_K_NUMBER") || "EKYC-1234567890",
-        initialData: getSavedData("EKYC_INITIAL_DATA", {})
-    };
-    const { kNumber } = flowState;
-    const initialData = flowState.initialData || getSavedData("EKYC_INITIAL_DATA", {});
-
-    const tenantId = Digit.ULBService.getCurrentTenantId();
-    
-    // MDMS Hooks for Connection Details
-    const { data: dataV0 } = Digit.Hooks.ekyc.useGetPropertyType(tenantId);
-    const { data: dataConn } = Digit.Hooks.ekyc.useGetConnectionTypeV2(tenantId);
-
-    // ── Meter State ──
-    const [meterStatus, setMeterStatus] = useState(() => 
-        getSavedData("EKYC_METER_STATUS_DATA", initialData.meterStatus ? { label: t(`EKYC_METER_${initialData.meterStatus}`), value: initialData.meterStatus } : null)
-    );
-    const [meterPhoto, setMeterStatusPhoto] = useState(() => sessionStorage.getItem("EKYC_METER_PHOTO") || null);
-    const [meterPhotoFileStoreId, setMeterStatusPhotoFileStoreId] = useState(() => sessionStorage.getItem("EKYC_METER_PHOTO_FILESTORE_ID") || null);
-    const [workingStatus, setWorkingStatus] = useState(() =>
-        getSavedData("EKYC_METER_WORKING_STATUS_DATA", initialData.workingStatus ? { label: t(`EKYC_METER_${initialData.workingStatus}`), value: initialData.workingStatus } : null)
-    );
-    const [meterLocation, setMeterLocation] = useState(() => sessionStorage.getItem("EKYC_METER_LOCATION") || initialData.meterLocation || "");
-    const [lastBillRaised, setLastBillRaised] = useState(() =>
-        getSavedData("EKYC_LAST_BILL_RAISED_DATA", initialData.lastBillRaised ? { label: t(`EKYC_${initialData.lastBillRaised}`), value: initialData.lastBillRaised } : null)
-    );
-    const [noBillReason, setNoBillReason] = useState(() => sessionStorage.getItem("EKYC_REASON_FOR_NO_BILL") || initialData.noBillReason || "");
-    const [sewerConnection, setSewerConnection] = useState(() =>
-        getSavedData("EKYC_SEWER_CONNECTION_DATA", initialData.sewerConnection ? { label: t(`EKYC_${initialData.sewerConnection}`), value: initialData.sewerConnection } : null)
-    );
-
-    // ── Connection State (Moved from PropertyInfo) ──
-    const [connectionCategory, setConnectionCategory] = useState(() =>
-        getSavedData("EKYC_TYPE_OF_CONNECTION_DATA", initialData.typeOfConnection ? { label: t(initialData.typeOfConnection), value: initialData.typeOfConnection } : null)
-    );
-    const [connectionType, setConnectionType] = useState(() =>
-        getSavedData("EKYC_CONNECTION_CATEGORY_DATA", initialData.connectionCategory ? { label: t(initialData.connectionCategory), value: initialData.connectionCategory } : null)
-    );
-
-    const [filephoto, setFilephoto] = useState(null);
-    const [error, setError] = useState(null);
-    const [toast, setToast] = useState(null);
-
-    // Sync state to sessionStorage
-    useEffect(() => {
-        sessionStorage.setItem("EKYC_METER_STATUS_DATA", JSON.stringify(meterStatus));
-        sessionStorage.setItem("EKYC_METER_WORKING_STATUS_DATA", JSON.stringify(workingStatus));
-        sessionStorage.setItem("EKYC_METER_LOCATION", meterLocation);
-        sessionStorage.setItem("EKYC_LAST_BILL_RAISED_DATA", JSON.stringify(lastBillRaised));
-        sessionStorage.setItem("EKYC_REASON_FOR_NO_BILL", noBillReason);
-        sessionStorage.setItem("EKYC_SEWER_CONNECTION_DATA", JSON.stringify(sewerConnection));
-        sessionStorage.setItem("EKYC_TYPE_OF_CONNECTION_DATA", JSON.stringify(connectionCategory));
-        sessionStorage.setItem("EKYC_CONNECTION_CATEGORY_DATA", JSON.stringify(connectionType));
-        if (meterPhoto) sessionStorage.setItem("EKYC_METER_PHOTO", meterPhoto);
-        if (meterPhotoFileStoreId) sessionStorage.setItem("EKYC_METER_PHOTO_FILESTORE_ID", meterPhotoFileStoreId);
-        sessionStorage.setItem("EKYC_CURRENT_STEP", "METER");
-    }, [meterStatus, workingStatus, meterLocation, lastBillRaised, noBillReason, sewerConnection, connectionCategory, connectionType, meterPhoto, meterPhotoFileStoreId]);
-
-    const uploadFile = async (file, tenantId) => {
-        if (!file) return null;
-        const res = await Digit.UploadServices.Filestorage("EKYC", file, tenantId);
-        return res?.data?.files?.[0]?.fileStoreId || null;
-    };
+  const [mrCode, setMrCode] = useState("");
+  const [areaCode, setAreaCode] = useState("");
+  const [mrKey, setMrKey] = useState("");
 
-    useEffect(() => {
-        (async () => {
-            setError(null);
-            if (filephoto) {
-                if (filephoto.size >= 2000000) {
-                    setError(t("EKYC_MAXIMUM_UPLOAD_SIZE_EXCEEDED"));
-                    setToast({ type: "error", message: t("EKYC_MAXIMUM_UPLOAD_SIZE_EXCEEDED") });
-                } else {
-                    try {
-                        setToast({ type: "info", message: t("EKYC_UPLOADING") });
-                        const fileStoreId = await uploadFile(filephoto, tenantId);
-                        if (fileStoreId) {
-                            setMeterStatusPhotoFileStoreId(fileStoreId);
-                            const reader = new FileReader();
-                            reader.onloadend = () => setMeterStatusPhoto(reader.result);
-                            reader.readAsDataURL(filephoto);
-                            setToast({ type: "success", message: t("EKYC_UPLOAD_SUCCESS") });
-                        } else {
-                            setError(t("EKYC_FILE_UPLOAD_ERROR"));
-                            setToast({ type: "error", message: t("EKYC_FILE_UPLOAD_ERROR") });
-                        }
-                    } catch (err) {
-                        setError(t("EKYC_FILE_UPLOAD_ERROR"));
-                        setToast({ type: "error", message: t("EKYC_FILE_UPLOAD_ERROR") });
-                    }
-                }
-            }
-        })();
-    }, [filephoto]);
-
-    const handleSaveAndContinue = () => {
-        history.push("/digit-ui/employee/ekyc/review", {
-            ...location.state,
-            meterDetails: {
-                meterStatus, meterPhoto, meterPhotoFileStoreId,
-                workingStatus, meterLocation, lastBillRaised,
-                noBillReason, sewerConnection,
-                connectionType, connectionCategory
-            }
-        });
-    };
+  const [meterNumber, setMeterNumber] = useState("");
+  const [meterMaker, setMeterMaker] = useState("");
+
+  const [meterStatus, setMeterStatus] = useState(null);
+  const [meterCondition, setMeterCondition] = useState(null);
+  const [meterLocation, setMeterLocation] = useState(null);
+
+  const [lastBillReceived, setLastBillReceived] = useState(null);
+  const [billMonthYear, setBillMonthYear] = useState(null);
+  const [reason, setReason] = useState("");
+
+  const [accessToMeter, setAccessToMeter] = useState(null);
+  const [sewerConnection, setSewerConnection] = useState(null);
+  const [septicTank, setSepticTank] = useState(null);
 
-    function selectphoto(e) {
-        setMeterStatusPhotoFileStoreId(null);
-        setFilephoto(e.target.files[0]);
+  const [meterPhoto, setMeterPhoto] = useState(null);
+  const [meterPhotoId, setMeterPhotoId] = useState(null);
+
+  const [toast, setToast] = useState(null);
+
+  // 🔹 OPTIONS
+  const yesNo = [{ name: "Yes" }, { name: "No" }];
+
+  const meterStatusOptions = [
+    { name: "Metered" },
+    { name: "Unmetered" },
+    { name: "Can not be identified" },
+  ];
+
+  const meterConditionOptions = [
+    { name: "Damaged" },
+    { name: "Not-Damaged" },
+  ];
+
+  const meterLocationOptions = [
+    { name: "Inside" },
+    { name: "Outside" },
+  ];
+
+  // 🔹 MONTH-YEAR OPTIONS (1998–2026)
+  const monthYearOptions = [];
+  for (let y = 1998; y <= 2026; y++) {
+    for (let m = 1; m <= 12; m++) {
+      monthYearOptions.push({ name: `${m}/${y}` });
     }
+  }
 
-    const meterStatusOptions = [
-        { label: t("EKYC_METERED"), value: "Metered" },
-        { label: t("EKYC_UNMETERED"), value: "Unmetered" },
-    ];
-
-    const workingStatusOptions = [
-        { label: t("EKYC_WORKING"), value: "Working" },
-        { label: t("EKYC_NOT_WORKING"), value: "Not Working" },
-    ];
-
-    const yesNoOptions = [
-        { label: t("CORE_COMMON_YES"), value: "Yes" },
-        { label: t("CORE_COMMON_NO"), value: "No" },
-    ];
-
-    const connectionCategoryOptions =
-        dataV0?.["ws-services-calculation"]?.propertyTypeV2?.map((item) => ({
-            label: t(item.code), value: item.code,
-        })) || [];
-
-    const connectionTypeOptions =
-        dataConn?.["ws-services-calculation"]?.connectionTypeV2?.map((item) => ({
-            label: t(item.code), value: item.code,
-        })) || [];
-
-    return (
-            <div className="inbox-container">
-                <style>{`
-                    @keyframes fadeSlideIn {
-                        from { opacity: 0; transform: translateY(8px); }
-                        to   { opacity: 1; transform: translateY(0); }
-                    }
-                `}</style>
-
-                {/* ── Sidebar ── */}
-                <div className="filters-container">
-                    <Card style={{ display: "flex", alignItems: "center", padding: "12px 16px", marginBottom: "12px", borderRadius: "8px" }}>
-                        <div style={{ color: "#185FA5", marginRight: "10px", display: "flex" }}>
-                            <HomeIcon style={{ width: "20px", height: "20px" }} />
-                        </div>
-                        <div style={{ fontWeight: "600", fontSize: "15px", color: "#0B0C0C" }}>
-                            {t("EKYC_PROCESS") || "eKYC Process"}
-                        </div>
-                    </Card>
-
-                    <div style={{ background: "#fff", padding: "16px 14px", borderRadius: "8px", border: "1px solid #EAECF0" }}>
-                        {[
-                            { label: t("EKYC_STEP_AADHAAR") || "Aadhaar", done: true, active: false },
-                            { label: t("EKYC_STEP_ADDRESS") || "Address", done: true, active: false },
-                            { label: t("EKYC_STEP_PROPERTY") || "Property", done: true, active: false },
-                            { label: t("EKYC_STEP_METER") || "Meter", done: false, active: true },
-                            { label: t("EKYC_STEP_REVIEW") || "Review", done: false, active: false },
-                        ].map((step, i) => (
-                            <div key={i} style={{ display: "flex", gap: "10px", alignItems: "flex-start", position: "relative", paddingBottom: i < 4 ? "18px" : 0 }}>
-                                {i < 4 && (
-                                    <div style={{ position: "absolute", left: "10px", top: "22px", width: "1px", height: "calc(100% - 10px)", background: "#EAECF0" }} />
-                                )}
-                                <div style={{
-                                    width: "20px", height: "20px", borderRadius: "50%", flexShrink: 0, marginTop: "1px",
-                                    border: step.done ? "none" : step.active ? "1.5px solid #185FA5" : "1.5px solid #D0D5DD",
-                                    background: step.done ? "#0F6E56" : step.active ? "#E6F1FB" : "#fff",
-                                    display: "flex", alignItems: "center", justifyContent: "center",
-                                    fontSize: "10px", fontWeight: "500",
-                                    color: step.done ? "#fff" : step.active ? "#185FA5" : "#98A2B3",
-                                }}>
-                                    {step.done ? <CheckIcon size={11} color="#fff" /> : i + 1}
-                                </div>
-                                <div style={{
-                                    fontSize: "12px", paddingTop: "2px",
-                                    color: step.done ? "#0F6E56" : step.active ? "#0B0C0C" : "#667085",
-                                    fontWeight: step.done || step.active ? "600" : "400",
-                                }}>
-                                    {step.label}
-                                </div>
-                            </div>
-                        ))}
-                    </div>
-                </div>
+  // 🔹 FREEZE LOGIC
+  const isFrozen = meterStatus?.name === "Can not be identified";
 
-                {/* ── Main Content ── */}
-                <div style={{ flex: 1, marginLeft: "16px" }}>
-                    <Card>
-                        {/* Header */}
-                        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "20px" }}>
-                            <CardHeader style={{ margin: 0, fontSize: "18px" }}>
-                                {t("EKYC_METER_DETAILS_HEADER") || "Meter Details"}
-                            </CardHeader>
-                            <div style={{
-                                background: "#F9FAFB", border: "0.5px solid #EAECF0",
-                                borderRadius: "20px", padding: "4px 14px",
-                                fontSize: "12px", color: "#667085",
-                            }}>
-                                {t("EKYC_K_NUMBER") || "K Number"}:{" "}
-                                <span style={{ color: "#0B0C0C", fontWeight: "600" }}>{kNumber}</span>
-                            </div>
-                        </div>
-
-                        <div style={{ animation: "fadeSlideIn 0.3s ease" }}>
-
-                            {/* ── Meter Details Section ── */}
-                            <SectionHead
-                                icon={<MeterIcon size={16} />}
-                                label={t("EKYC_METER_DETAILS") || "Meter details"}
-                            />
-
-                            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "14px", marginBottom: "20px" }}>
-                                <div>
-                                    <div style={{ fontSize: "11px", fontWeight: "600", color: "#667085", textTransform: "uppercase", letterSpacing: "0.04em", marginBottom: "6px" }}>
-                                        {t("EKYC_METER_STATUS") || "Meter status"}
-                                    </div>
-                                    <Dropdown
-                                        selected={meterStatus}
-                                        select={setMeterStatus}
-                                        option={meterStatusOptions}
-                                        optionKey="label"
-                                        t={t}
-                                        placeholder={t("EKYC_SELECT") || "Select"}
-                                    />
-                                </div>
-                                {meterStatus?.value === "Metered" && (
-                                    <div>
-                                        <div style={{ fontSize: "11px", fontWeight: "600", color: "#667085", textTransform: "uppercase", letterSpacing: "0.04em", marginBottom: "6px" }}>
-                                            {t("EKYC_METER_WORKING_STATUS") || "Meter working status"}
-                                        </div>
-                                        <Dropdown
-                                            selected={workingStatus}
-                                            select={setWorkingStatus}
-                                            option={workingStatusOptions}
-                                            optionKey="label"
-                                            t={t}
-                                            placeholder={t("EKYC_SELECT") || "Select"}
-                                        />
-                                    </div>
-                                )}
-                            </div>
-
-                            {meterStatus?.value === "Metered" && (
-                                <Fragment>
-                                    <div style={{ marginBottom: "20px" }}>
-                                        <div style={{ fontSize: "11px", fontWeight: "600", color: "#667085", textTransform: "uppercase", letterSpacing: "0.04em", marginBottom: "8px" }}>
-                                            {t("EKYC_CAPTURE_METER_IMAGE") || "Capture meter image"}
-                                        </div>
-                                        <UploadFile
-                                            id={"ekyc-meter-photo"}
-                                            extraStyleName={"propertyCreate"}
-                                            accept=".jpg,.png,.jpeg"
-                                            onUpload={selectphoto}
-                                            onDelete={() => {
-                                                setMeterStatusPhotoFileStoreId(null);
-                                                setMeterStatusPhoto(null);
-                                                setFilephoto(null);
-                                            }}
-                                            message={meterPhotoFileStoreId ? `1 ${t(`EKYC_ACTION_FILEUPLOADED`)}` : t(`EKYC_ACTION_NO_FILEUPLOADED`)}
-                                            error={error}
-                                        />
-                                        {meterPhoto && (
-                                            <div style={{ marginTop: "10px", borderRadius: "8px", overflow: "hidden", border: "1px solid #EAECF0" }}>
-                                                <img src={meterPhoto} alt="Meter Preview" style={{ width: "100%", maxHeight: "150px", objectFit: "cover" }} />
-                                            </div>
-                                        )}
-                                    </div>
-
-                                    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "14px", marginBottom: "20px" }}>
-                                        <div>
-                                            <div style={{ fontSize: "11px", fontWeight: "600", color: "#667085", textTransform: "uppercase", letterSpacing: "0.04em", marginBottom: "6px" }}>
-                                                {t("EKYC_METER_LOCATION") || "Meter location"}
-                                            </div>
-                                            <TextInput
-                                                value={meterLocation}
-                                                onChange={(e) => setMeterLocation(e.target.value)}
-                                                placeholder={t("EKYC_ENTER_METER_LOCATION") || "Enter location"}
-                                            />
-                                        </div>
-                                        <div>
-                                            <div style={{ fontSize: "11px", fontWeight: "600", color: "#667085", textTransform: "uppercase", letterSpacing: "0.04em", marginBottom: "6px" }}>
-                                                {t("EKYC_LAST_BILL_RAISED") || "Last bill raised"}
-                                            </div>
-                                            <Dropdown
-                                                selected={lastBillRaised}
-                                                select={setLastBillRaised}
-                                                option={yesNoOptions}
-                                                optionKey="label"
-                                                t={t}
-                                                placeholder={t("EKYC_SELECT") || "Select"}
-                                            />
-                                        </div>
-                                    </div>
-
-                                    {lastBillRaised?.value === "No" && (
-                                        <div style={{ marginBottom: "20px" }}>
-                                            <div style={{ fontSize: "11px", fontWeight: "600", color: "#667085", textTransform: "uppercase", letterSpacing: "0.04em", marginBottom: "6px" }}>
-                                                {t("EKYC_REASON_FOR_NO_BILL") || "Reason for no bill"}
-                                            </div>
-                                            <TextInput
-                                                value={noBillReason}
-                                                onChange={(e) => setNoBillReason(e.target.value)}
-                                                placeholder={t("EKYC_ENTER_REASON") || "Enter reason"}
-                                            />
-                                        </div>
-                                    )}
-                                </Fragment>
-                            )}
-
-                            <div style={{ marginBottom: "20px" }}>
-                                <div style={{ fontSize: "11px", fontWeight: "600", color: "#667085", textTransform: "uppercase", letterSpacing: "0.04em", marginBottom: "6px" }}>
-                                    {t("EKYC_SEWER_CONNECTION") || "Sewer connection"}
-                                </div>
-                                <div style={{ width: "calc(50% - 7px)" }}>
-                                    <Dropdown
-                                        selected={sewerConnection}
-                                        select={setSewerConnection}
-                                        option={yesNoOptions}
-                                        optionKey="label"
-                                        t={t}
-                                        placeholder={t("EKYC_SELECT") || "Select"}
-                                    />
-                                </div>
-                            </div>
-
-                            <hr style={{ margin: "24px 0", border: 0, borderTop: "1px solid #EAECF0" }} />
-
-                            {/* ── Property/Connection Details Section ── */}
-                            <SectionHead
-                                icon={<ConnectionIcon size={16} />}
-                                label={t("EKYC_PROPERTY_CONNECTION_DETAILS") || "Property Connection Details"}
-                            />
-
-                            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "14px", marginBottom: "24px" }}>
-                                <div>
-                                    <div style={{ fontSize: "11px", fontWeight: "600", color: "#667085", textTransform: "uppercase", letterSpacing: "0.04em", marginBottom: "6px" }}>
-                                        {t("EKYC_TYPE_OF_CONNECTION") || "Type of connection"}
-                                    </div>
-                                    <Dropdown
-                                        selected={connectionCategory}
-                                        select={setConnectionCategory}
-                                        option={connectionCategoryOptions}
-                                        optionKey="label"
-                                        t={t}
-                                        placeholder={t("EKYC_SELECT") || "Select"}
-                                    />
-                                </div>
-                                <div>
-                                    <div style={{ fontSize: "11px", fontWeight: "600", color: "#667085", textTransform: "uppercase", letterSpacing: "0.04em", marginBottom: "6px" }}>
-                                        {t("EKYC_CONNECTION_CATEGORY") || "Connection category"}
-                                    </div>
-                                    <Dropdown
-                                        selected={connectionType}
-                                        select={setConnectionType}
-                                        option={connectionTypeOptions}
-                                        optionKey="label"
-                                        t={t}
-                                        placeholder={t("EKYC_SELECT") || "Select"}
-                                    />
-                                </div>
-                            </div>
-
-                        </div>
-
-                        {/* Submit */}
-                        <div style={{ marginTop: "24px" }}>
-                            <SubmitBar
-                                label={t("EKYC_SAVE_AND_CONTINUE") || "Save & Continue"}
-                                onSubmit={handleSaveAndContinue}
-                            />
-                        </div>
-
-                        {/* Secure notice */}
-                        <div style={{
-                            display: "flex", alignItems: "center", justifyContent: "center",
-                            gap: "5px", marginTop: "16px",
-                            fontSize: "11px", color: "#98A2B3",
-                        }}>
-                            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
-                                <rect x="3" y="11" width="18" height="11" rx="2" />
-                                <path d="M7 11V7a5 5 0 0 1 10 0v4" />
-                            </svg>
-                            {t("EKYC_SECURE_DATA_NOTICE") || "Your data is encrypted and secure"}
-                        </div>
-                    </Card>
+  // 🔹 FILE UPLOAD
+  const uploadPhoto = async (e) => {
+    const file = e.target.files[0];
+    if (!file) return;
+
+    try {
+      const res = await Digit.UploadServices.Filestorage("EKYC", file, tenantId);
+      const id = res?.data?.files?.[0]?.fileStoreId;
+
+      if (id) {
+        setMeterPhotoId(id);
+
+        const reader = new FileReader();
+        reader.onloadend = () => setMeterPhoto(reader.result);
+        reader.readAsDataURL(file);
+      }
+    } catch {
+      setToast({ type: "error", message: "Upload failed" });
+    }
+  };
+
+  // 🔹 VALIDATION
+  const isValid = () => {
+    if (!connectionCategory) return false;
+    if (!meterStatus) return false;
+    if (!meterLocation) return false;
+    if (!lastBillReceived) return false;
+    if (!sewerConnection) return false;
+
+    if (meterStatus?.name === "Metered" && !meterPhotoId) return false;
+
+    if (lastBillReceived?.name === "No" && !reason) return false;
+
+    if (sewerConnection?.name === "No" && !septicTank) return false;
+
+    return true;
+  };
+
+  // 🔹 SUBMIT
+  const onStepSelect = () => {
+    if (!isValid()) {
+      setToast({ type: "error", message: "Fill all mandatory fields" });
+      return;
+    }
+
+    const data = {
+      connectionCategory,
+      saType,
+      status,
+      mrCode,
+      areaCode,
+      mrKey,
+      meterNumber,
+      meterMaker,
+      meterStatus: meterStatus?.name,
+      meterCondition: meterCondition?.name,
+      meterLocation: meterLocation?.name,
+      lastBillReceived: lastBillReceived?.name,
+      billMonthYear: billMonthYear?.name,
+      reason,
+      accessToMeter: accessToMeter?.name,
+      sewerConnection: sewerConnection?.name,
+      septicTank: septicTank?.name,
+      meterPhotoId,
+    };
+
+    onSelect(config.key, data);
+  };
+
+  return (
+    <Fragment>
+      <FormStep onSelect={onStepSelect} config={config}>
+        <div>
+          <CardLabel>Connection Category *</CardLabel>
+          <TextInput value={connectionCategory} onChange={(e) => setConnectionCategory(e.target.value)} />
+        </div>
+
+        <div>
+          <CardLabel>SA Type</CardLabel>
+          <TextInput value={saType} onChange={(e) => setSaType(e.target.value)} />
+        </div>
+
+        <div>
+          <CardLabel>Status</CardLabel>
+          <TextInput value={status} onChange={(e) => setStatus(e.target.value)} />
+        </div>
+
+        <div>
+          <CardLabel>MR Code</CardLabel>
+          <TextInput value={mrCode} onChange={(e) => setMrCode(e.target.value)} />
+        </div>
+
+        <div>
+          <CardLabel>Area Code</CardLabel>
+          <TextInput value={areaCode} onChange={(e) => setAreaCode(e.target.value)} />
+        </div>
+
+        <div>
+          <CardLabel>MR Key</CardLabel>
+          <TextInput value={mrKey} onChange={(e) => setMrKey(e.target.value)} />
+        </div>
+
+        {!isFrozen && (
+          <Fragment>
+            <div>
+              <CardLabel>Meter Number</CardLabel>
+              <TextInput value={meterNumber} onChange={(e) => setMeterNumber(e.target.value)} />
+            </div>
+
+            <div>
+              <CardLabel>Meter Maker</CardLabel>
+              <TextInput value={meterMaker} onChange={(e) => setMeterMaker(e.target.value)} />
+            </div>
+
+            <div>
+              <CardLabel>Meter Condition</CardLabel>
+              <Dropdown option={meterConditionOptions} selected={meterCondition} select={setMeterCondition} />
+            </div>
+
+            {meterStatus?.name === "Metered" && (
+              <Fragment>
+                <div>
+                  <CardLabel>Meter Photo *</CardLabel>
+                  <UploadFile onUpload={uploadPhoto} message={meterPhotoId ? "Uploaded" : "No file"} />
                 </div>
-            {toast && (
-                <Toast
-                    label={toast.message}
-                    error={toast.type === "error"}
-                    info={toast.type === "info"}
-                    success={toast.type === "success"}
-                    onClose={() => setToast(null)}
-                />
+                {meterPhoto && (
+                  <div style={{ gridColumn: "span 2" }}>
+                    <img src={meterPhoto} style={{ width: "100%" }} />
+                  </div>
+                )}
+              </Fragment>
             )}
+          </Fragment>
+        )}
+
+        <div>
+          <CardLabel>Meter Status *</CardLabel>
+          <Dropdown option={meterStatusOptions} selected={meterStatus} select={setMeterStatus} />
+        </div>
+
+        <div>
+          <CardLabel>Meter Location *</CardLabel>
+          <Dropdown option={meterLocationOptions} selected={meterLocation} select={setMeterLocation} />
         </div>
-    );
+
+        <div>
+          <CardLabel>Last Bill Received *</CardLabel>
+          <Dropdown option={yesNo} selected={lastBillReceived} select={setLastBillReceived} />
+        </div>
+
+        {lastBillReceived?.name === "Yes" && (
+          <div>
+            <CardLabel>When was the last bill received *</CardLabel>
+            <Dropdown option={monthYearOptions} selected={billMonthYear} select={setBillMonthYear} />
+          </div>
+        )}
+
+        {lastBillReceived?.name === "No" && (
+          <div>
+            <CardLabel>Reason *</CardLabel>
+            <TextInput value={reason} onChange={(e) => setReason(e.target.value)} />
+          </div>
+        )}
+
+        <div>
+          <CardLabel>Access to Meter</CardLabel>
+          <Dropdown option={yesNo} selected={accessToMeter} select={setAccessToMeter} />
+        </div>
+
+        <div>
+          <CardLabel>Sewer Connection *</CardLabel>
+          <Dropdown option={yesNo} selected={sewerConnection} select={setSewerConnection} />
+        </div>
+
+        {sewerConnection?.name === "No" && (
+          <div>
+            <CardLabel>Septic Tank *</CardLabel>
+            <Dropdown option={yesNo} selected={septicTank} select={setSepticTank} />
+          </div>
+        )}
+
+        {toast && <Toast label={toast.message} error={toast.type === "error"} onClose={() => setToast(null)} />}
+
+      </FormStep>
+    </Fragment>
+  );
 };
 
-export default MeterDetails;
+export default MeterDetails;