Added Unit master

ipi-survey-platform/package-lock.json

@@ -13,7 +13,8 @@
         "react": "^19.1.1",
         "react-dom": "^19.1.1",
         "react-google-recaptcha": "^3.1.0",
-        "react-router-dom": "^7.9.4"
+        "react-router-dom": "^7.9.4",
+        "react-toastify": "^11.0.5"
       },
       "devDependencies": {
         "@eslint/js": "^9.36.0",
@@ -1982,6 +1983,15 @@
         "node": ">=18"
       }
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -3612,6 +3622,19 @@
         "react-dom": ">=18"
       }
     },
+    "node_modules/react-toastify": {
+      "version": "11.0.5",
+      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-11.0.5.tgz",
+      "integrity": "sha512-EpqHBGvnSTtHYhCPLxML05NLY2ZX0JURbAdNYa6BUkk+amz4wbKBQvoKQAB0ardvSarUBuY4Q4s1sluAzZwkmA==",
+      "license": "MIT",
+      "dependencies": {
+        "clsx": "^2.1.1"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19",
+        "react-dom": "^18 || ^19"
+      }
+    },
     "node_modules/resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",

ipi-survey-platform/package.json

@@ -15,7 +15,8 @@
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "react-google-recaptcha": "^3.1.0",
-    "react-router-dom": "^7.9.4"
+    "react-router-dom": "^7.9.4",
+    "react-toastify": "^11.0.5"
   },
   "devDependencies": {
     "@eslint/js": "^9.36.0",

ipi-survey-platform/public/assets/images/Eye.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.1853 11.6962C23.1525 11.6222 22.3584 9.86062 20.5931 8.09531C18.2409 5.74312 15.27 4.5 12 4.5C8.72999 4.5 5.75905 5.74312 3.40687 8.09531C1.64155 9.86062 0.843741 11.625 0.814679 11.6962C0.772035 11.7922 0.75 11.896 0.75 12.0009C0.75 12.1059 0.772035 12.2097 0.814679 12.3056C0.847491 12.3797 1.64155 14.1403 3.40687 15.9056C5.75905 18.2569 8.72999 19.5 12 19.5C15.27 19.5 18.2409 18.2569 20.5931 15.9056C22.3584 14.1403 23.1525 12.3797 23.1853 12.3056C23.2279 12.2097 23.25 12.1059 23.25 12.0009C23.25 11.896 23.2279 11.7922 23.1853 11.6962ZM12 18C9.11437 18 6.59343 16.9509 4.50655 14.8828C3.65028 14.0313 2.92179 13.0603 2.34374 12C2.92164 10.9396 3.65014 9.9686 4.50655 9.11719C6.59343 7.04906 9.11437 6 12 6C14.8856 6 17.4066 7.04906 19.4934 9.11719C20.3514 9.9684 21.0815 10.9394 21.6609 12C20.985 13.2619 18.0403 18 12 18ZM12 7.5C11.11 7.5 10.2399 7.76392 9.49993 8.25839C8.7599 8.75285 8.18313 9.45566 7.84253 10.2779C7.50194 11.1002 7.41282 12.005 7.58646 12.8779C7.76009 13.7508 8.18867 14.5526 8.81801 15.182C9.44735 15.8113 10.2492 16.2399 11.1221 16.4135C11.995 16.5872 12.8998 16.4981 13.7221 16.1575C14.5443 15.8169 15.2471 15.2401 15.7416 14.5001C16.2361 13.76 16.5 12.89 16.5 12C16.4988 10.8069 16.0242 9.66303 15.1806 8.81939C14.337 7.97575 13.1931 7.50124 12 7.5ZM12 15C11.4066 15 10.8266 14.8241 10.3333 14.4944C9.83993 14.1648 9.45542 13.6962 9.22835 13.1481C9.00129 12.5999 8.94188 11.9967 9.05764 11.4147C9.17339 10.8328 9.45911 10.2982 9.87867 9.87868C10.2982 9.45912 10.8328 9.1734 11.4147 9.05764C11.9967 8.94189 12.5999 9.0013 13.148 9.22836C13.6962 9.45542 14.1648 9.83994 14.4944 10.3333C14.824 10.8266 15 11.4067 15 12C15 12.7956 14.6839 13.5587 14.1213 14.1213C13.5587 14.6839 12.7956 15 12 15Z" fill="#5F646D"/>
+</svg>

ipi-survey-platform/src/pages/Admin/configuration/CompanyProfile.jsx

@@ -14,7 +14,7 @@ const searchIconSrc = '/assets/images/material-symbols_search-rounded.svg';
 const downloadIconSrc = '/assets/images/DownloadSimple.svg';
 const addIconSrc = '/assets/images/ic_baseline-plus.svg';
 const pencilActiveSrc = '/assets/images/PencilSimple.svg';
-const pencilInactiveSrc = '/assets/images/PencilSimple-inactive.svg';
+const pencilInactiveSrc = '/assets/images/pencilsimple-inactive.svg';
 const trashActiveSrc = '/assets/images/Trash - active.svg';
 const trashInactiveSrc = '/assets/images/Trash - Inactive.svg';
 const resetPasswordActiveSrc = '/assets/images/hugeicons_reset-password.svg';
@@ -633,6 +633,7 @@ const CompanyProfile = () => {
                 onCountryCodeChange={handleFormChange('contactCountryCode')}
                 value={form.contactMobileNumber}
                 onChange={handleFormChange('contactMobileNumber')}
+                // placeholder="---------"
                 width="100%"
                 required
                 error={fieldErrors.contactMobileNumber}
@@ -766,6 +767,7 @@ const CompanyProfile = () => {
                 onCountryCodeChange={handleFormChange('corporateCountryCode')}
                 value={form.corporateMobileNumber}
                 onChange={handleFormChange('corporateMobileNumber')}
+                placeholder="-------"
                 width="100%"
                 required
                 error={fieldErrors.corporateMobileNumber}
@@ -987,36 +989,37 @@ const CompanyProfile = () => {
   );
 
   const headers = [
-    renderSortableHeader('Establishment Name', 'establishmentName'),
+    'Establishment Name',
-    'Name',
+    'Contact Name',
-    'Emirates',
+    'Emirate',
     'ISIC Code',
     'Establishment ID',
     'Products',
-    renderSortableHeader('Total Employees', 'totalEmployees'),
+    'Total Employees',
     'Created By',
-    renderSortableHeader('Created on', 'createdOn'),
+    'Created On',
-    renderSortableHeader('Last Updated', 'lastUpdated'),
+    'Last Updated',
     'Status',
     'Actions',
   ];
 
   const columnWidths = React.useMemo(() => {
-    const base = Array(headers.length).fill(undefined);
+    const base = [
-    base[0] = 250; // Establishment Name
+      250, // Establishment Name (250px)
-    base[1] = 118; // Name
+      150, // Contact Name (150px)
-    base[2] = 118; // Emirates
+      120, // Emirate (120px)
-    base[3] = 132; // ISIC Code
+      120, // ISIC Code (120px)
-    base[4] = 208; // Establishment ID
+      150, // Establishment ID (150px)
-    base[5] = 100; // Products
+      100, // Products (100px)
-    base[6] = 152; // Total Employees
+      120, // Total Employees (120px)
-    base[7] = 152; // Created By
+      120, // Created By (120px)
-    base[8] = 148; // Created on
+      120, // Created On (120px)
-    base[9] = 136; // Last Updated
+      120, // Last Updated (120px)
-    base[10] = 120; // Status
+      100, // Status (100px)
-    base[11] = 119; // Actions
+      150, // Actions (150px)
+    ];
     return base;
-  }, [headers.length]);
+  }, []);
 
   const contactToCorporateMap = React.useMemo(
     () => ({

ipi-survey-platform/src/pages/Admin/configuration/UnitMaster.jsx

@@ -1,17 +1,18 @@
-import React from 'react';
+import React, { useState, useEffect, useMemo, useRef } from 'react';
 import Table from '@/components/common/Table';
 import StatusBadge from '@/components/common/StatusBadge';
 import { TextField, SelectField } from '@/components/common/FormControls';
+import { getUnits, createUnit, updateUnit, deleteUnit } from '@/services/configuration/unitService';
 
 const downloadIconSrc = '/assets/images/DownloadSimple.svg';
 const addIconSrc = '/assets/images/ic_baseline-plus.svg';
 const pencilActiveSrc = '/assets/images/PencilSimple.svg';
-const pencilInactiveSrc = '/assets/images/PencilSimple-inactive.svg';
+const pencilInactiveSrc = '/assets/images/pencilsimple-inactive.svg';
 const trashActiveSrc = '/assets/images/Trash - active.svg';
 const trashInactiveSrc = '/assets/images/Trash - Inactive.svg';
 const deleteIconSrc = '/assets/images/delete.svg';
 const caretDownIconSrc = '/assets/images/caretdown-active.svg';
-const rectangleIconSrc = '/assets/images/rectangle.svg';
+const rectangleIconSrc = '/assets/images/Rectangle.svg';
 const checkboxIconSrc = '/assets/images/checkbox.svg';
 
 const createEmptyUnitForm = () => ({
@@ -22,128 +23,72 @@ const createEmptyUnitForm = () => ({
 });
 
 const UnitMaster = () => {
-  const [units, setUnits] = React.useState([
+  const [units, setUnits] = useState([]);
-    {
+  const [loading, setLoading] = useState(true);
-      unitName: 'Kg',
+  const [editingRow, setEditingRow] = useState(null);
-      description: 'Kilogram',
+  const [deletingRow, setDeletingRow] = useState(null);
-      productsMapped: ['Wheat', 'Barley', 'Oats', 'Corn', 'Soybeans'],
+  const [modalMode, setModalMode] = useState(null);
-      createdBy: 'Akbar',
+  const [currentPage, setCurrentPage] = useState(1);
-      createdOn: '25/03/2025',
+  const [form, setForm] = useState(createEmptyUnitForm());
-      lastUpdated: '31/03/2025',
+  const [isProductDropdownOpen, setIsProductDropdownOpen] = useState(false);
-      status: 'Active',
+  const productDropdownRef = useRef(null);
-    },
+  const pageSize = 10; // Add this line
-    {
+  const [currentUser, setCurrentUser] = useState(null);
-      unitName: 'Lt',
-      description: 'Liters',
-      productsMapped: ['Rice', 'Sorghum', 'Millet', 'Quinoa', 'Buckwheat', 'Corn'],
-      createdBy: 'Zara',
-      createdOn: '01/04/2025',
-      lastUpdated: '10/04/2025',
-      status: 'Active',
-    },
-    {
-      unitName: 'Kg',
-      description: 'Kilogram',
-      productsMapped: ['Rice', 'Oats'],
-      createdBy: 'Ravi',
-      createdOn: '15/05/2025',
-      lastUpdated: '25/05/2025',
-      status: 'Inactive',
-    },
-    {
-      unitName: 'Lt',
-      description: 'Liters',
-      productsMapped: ['Wheat', 'Barley', 'Corn', 'Soybeans', 'Millet', 'Quinoa', 'Sorghum'],
-      createdBy: 'Maya',
-      createdOn: '10/06/2025',
-      lastUpdated: '20/06/2025',
-      status: 'Active',
-    },
-    {
-      unitName: 'Kg',
-      description: 'Kilogram',
-      productsMapped: ['Buckwheat'],
-      createdBy: 'Jin',
-      createdOn: '30/07/2025',
-      lastUpdated: '05/08/2025',
-      status: 'Active',
-    },
-    {
-      unitName: 'Lt',
-      description: 'Liters',
-      productsMapped: ['Rice', 'Quinoa', 'Millet', 'Corn'],
-      createdBy: 'Leo',
-      createdOn: '12/09/2025',
-      lastUpdated: '20/09/2025',
-      status: 'Inactive',
-    },
-    {
-      unitName: 'Kg',
-      description: 'Kilogram',
-      productsMapped: ['Wheat', 'Soybeans', 'Corn', 'Sorghum'],
-      createdBy: 'Lila',
-      createdOn: '05/10/2025',
-      lastUpdated: '15/10/2025',
-      status: 'Active',
-    },
-    {
-      unitName: 'Lt',
-      description: 'Liters',
-      productsMapped: ['Barley', 'Oats', 'Millet'],
-      createdBy: 'Nina',
-      createdOn: '30/07/2025',
-      lastUpdated: '05/08/2025',
-      status: 'Inactive',
-    },
-    {
-      unitName: 'Kg',
-      description: 'Kilogram',
-      productsMapped: ['Rice', 'Corn', 'Soybeans', 'Quinoa', 'Millet', 'Sorghum'],
-      createdBy: 'Owen',
-      createdOn: '10/06/2025',
-      lastUpdated: '20/06/2025',
-      status: 'Inactive',
-    },
-    {
-      unitName: 'Lt',
-      description: 'Liters',
-      productsMapped: ['Wheat', 'Barley'],
-      createdBy: 'Riya',
-      createdOn: '28/03/2025',
-      lastUpdated: '31/03/2025',
-      status: 'Inactive',
-    },
-  ]);
-  const [editingRow, setEditingRow] = React.useState(null);
-  const [deletingRow, setDeletingRow] = React.useState(null);
-  const [modalMode, setModalMode] = React.useState(null);
-  const [currentPage, setCurrentPage] = React.useState(1);
-  const pageSize = 10;
-  const [form, setForm] = React.useState(createEmptyUnitForm());
-  const [isProductDropdownOpen, setIsProductDropdownOpen] = React.useState(false);
-  const productDropdownRef = React.useRef(null);
 
+  // Fetch units on component mount
+  useEffect(() => {
+    fetchUnits();
+  }, []);
+
+  const fetchUnits = async () => {
+    try {
+      setLoading(true);
+      const response = await getUnits();
+      setUnits(response.data || []);
+    } catch (error) {
+      console.error('Error fetching units:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+  const userProfile = sessionStorage.getItem('user_profile');
+
+  if (userProfile) {
+    setCurrentUser(JSON.parse(userProfile));
+  }
+}, []);
   const headers = [
     'Unit Name',
     'Description',
     'Mapped Products',
     'Created By',
     'Created On',
-    'Last Updated',
     'Status',
     'Actions',
   ];
 
-  const rows = units.map((item) => [
+  const rows = useMemo(() => {
-    item.unitName,
+  return units.map((item) => {
-    item.description,
+    const createdDate = item.created_at ? new Date(item.created_at).toLocaleDateString('en-GB') : '-';
-    Array.isArray(item.productsMapped) ? item.productsMapped.length : item.productsMapped,
+    const currentUserName = currentUser?.name || '';
-    item.createdBy,
+    const updatedDate =
-    item.createdOn,
+      item.updated_at && item.updated_at !== item.created_at
-    item.lastUpdated,
+        ? new Date(item.updated_at).toLocaleDateString('en-GB')
-    <StatusBadge status={item.status} tone={item.status === 'Active' ? 'green' : 'gray'} />,
+        : '-';
+
+    return [
+      item.uom || item.unitName,
+      item.uom_short_name || item.description,
+      Array.isArray(item.productsMapped) ? item.productsMapped.length : 0,
+      item.created_by_name || currentUserName || '-',
+      createdDate,
+      <StatusBadge status={item.is_active ? 'Active' : 'Inactive'} tone={item.is_active ? 'green' : 'gray'} />,
       'actions',
-  ]);
+    ];
+  });
+}, [units]);
 
   const statusOptions = React.useMemo(
     () => [
@@ -183,10 +128,10 @@ const UnitMaster = () => {
     if (!selected) return;
     setEditingRow(index);
     setForm({
-      unitName: selected.unitName,
+      unitName: selected.uom || selected.unitName,
-      description: selected.description,
+      description: selected.uom_short_name || selected.description,
       productsMapped: Array.isArray(selected.productsMapped) ? [...selected.productsMapped] : [],
-      status: selected.status,
+      status: selected.is_active ? 'Active' : 'Inactive',
     });
     setModalMode('edit');
     setIsProductDropdownOpen(false);
@@ -196,6 +141,17 @@ const UnitMaster = () => {
     setDeletingRow(index);
   };
 
+  const confirmDelete = async () => {
+    if (deletingRow === null) return;
+    
+    try {
+      await deleteUnit(units[deletingRow].id);
+      setUnits(prev => prev.filter((_, index) => index !== deletingRow));
+      setDeletingRow(null);
+    } catch (error) {
+      console.error('Error deleting unit:', error);
+    }
+  };
   const closeModal = () => {
     setModalMode(null);
     setForm(createEmptyUnitForm());
@@ -219,6 +175,7 @@ const UnitMaster = () => {
     });
   };
 
+
   React.useEffect(() => {
     const handleClickOutside = (event) => {
       if (!productDropdownRef.current) return;
@@ -244,43 +201,66 @@ const UnitMaster = () => {
     return `${day}/${month}/${year}`;
   };
 
-  const handleSaveForm = () => {
+const handleSaveForm = async () => {
   const selectedProducts = Array.isArray(form.productsMapped) ? form.productsMapped : [];
-    if (!form.unitName || !form.description || selectedProducts.length === 0 || !form.status) {
+  if (!form.unitName || !form.description || !form.status) {
     return;
   }
+
+  const unitData = {
+    uom: form.unitName,
+    uom_short_name: form.description,
+    is_active: form.status === 'Active',
+  };
+
+  try {
+    setLoading(true);
+
     if (modalMode === 'edit' && editingRow !== null) {
-      setUnits((prev) =>
+      const updatedUnitData = {
+        ...unitData,
+        updated_at: new Date().toISOString(),
+        updated_by: currentUser?.id || null,
+      };
+
+      const updatedUnit = await updateUnit(units[editingRow].id, updatedUnitData);
+
+      setUnits(prev =>
         prev.map((item, index) =>
           index === editingRow
             ? {
                 ...item,
-                unitName: form.unitName,
+                ...updatedUnit,
-                description: form.description,
+                updated_at: updatedUnitData.updated_at,
-                productsMapped: [...selectedProducts],
+                created_at: item.created_at,
-                status: form.status,
+                created_by: item.created_by,
-                lastUpdated: getToday(),
+                created_by_name: item.created_by_name,
               }
             : item
         )
       );
     } else {
-      setUnits((prev) => [
+      const newUnit = await createUnit({
-        {
+        ...unitData,
-          unitName: form.unitName,
+        created_at: new Date().toISOString(),
-          description: form.description,
+        created_by: currentUser?.id || null,
-          productsMapped: [...selectedProducts],
+        created_by_name: currentUser?.name || '',
-          createdBy: 'Admin',
+      });
-          createdOn: getToday(),
+
-          lastUpdated: getToday(),
+      setUnits(prev => [newUnit, ...prev]);
-          status: form.status,
-        },
-        ...prev,
-      ]);
     }
+
+    await fetchUnits();
     closeModal();
+  } catch (error) {
+    console.error('Error saving unit:', error);
+  } finally {
+    setLoading(false);
+  }
 };
 
+
+
   const deletingUnit = React.useMemo(() => {
     if (deletingRow === null || deletingRow < 0 || deletingRow >= units.length) {
       return null;
@@ -292,10 +272,16 @@ const UnitMaster = () => {
     setDeletingRow(null);
   };
   
-  const handleDeleteConfirm = () => {
+
+  const handleDeleteConfirm = async () => {
     if (deletingRow === null) return;
-    setUnits((prev) => prev.filter((_, index) => index !== deletingRow));
+    try {
+      await deleteUnit(units[deletingRow].id);
+      setUnits(prev => prev.filter((_, index) => index !== deletingRow));
       closeDeleteConfirm();
+    } catch (error) {
+      console.error('Error deleting unit:', error);
+    }
 };
 
   return (
@@ -317,7 +303,11 @@ const UnitMaster = () => {
           </button>
         </div>
       </div>
-
+      {loading ? (
+  <div className="flex justify-center items-center h-64">
+    <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-gray-900"></div>
+  </div>
+) : (
       <Table
         headers={headers}
         rows={rows}
@@ -364,7 +354,7 @@ const UnitMaster = () => {
           totalItems: filteredRows.length,
         }}
       />
-
+    )}
       {modalMode && (
         <div className="fixed inset-0 z-50">
           <div className="absolute inset-0 bg-black/40" onClick={closeModal} />
@@ -399,14 +389,14 @@ const UnitMaster = () => {
                   label="Unit Name"
                   value={form.unitName}
                   onChange={handleFormChange('unitName')}
-                  placeholder="Enter Unit Code"
+                  placeholder="Enter Unit Name"
                   width="100%"
                 />
                 <TextField
                   label="Description"
                   value={form.description}
                   onChange={handleFormChange('description')}
-                  placeholder="Enter Unit Name"
+                  placeholder="Enter Description"
                   width="100%"
                 />
                 <div className="w-full" ref={productDropdownRef}>
@@ -475,10 +465,16 @@ const UnitMaster = () => {
                 </button>
                 <button
                   type="button"
-                  className="h-10 px-8 rounded-md bg-[#92722A] text-sm font-medium text-white shadow-[0_8px_18px_rgba(146,114,42,0.35)]"
+                  className="h-10 px-4 rounded-[6px] bg-[#92722A] text-white text-sm font-medium disabled:opacity-50"
                   onClick={handleSaveForm}
+                  disabled={loading}
                 >
-                  {modalMode === 'edit' ? 'Update' : 'Add'}
+                  {loading ? (
+                    <div className="flex items-center justify-center">
+                      <div className="animate-spin rounded-full h-5 w-5 border-t-2 border-b-2 border-white mr-2"></div>
+                      {modalMode === 'edit' ? 'Updating...' : 'Saving...'}
+                    </div>
+                  ) : modalMode === 'edit' ? 'Update' : 'Save'}
                 </button>
               </div>
             </div>
@@ -511,7 +507,7 @@ const UnitMaster = () => {
                   <p className="mt-1 text-sm leading-5 text-[#4B5563]">
                     Are you sure you want to delete{' '}
                     <span className="font-semibold text-[#232528]">
-                      {`${deletingUnit.unitName} - ${deletingUnit.description}`}
+                      {`${deletingUnit?.unitName || deletingUnit?.uom || 'N/A'} - ${deletingUnit?.description || deletingUnit?.uom_short_name || 'N/A'}`}
                     </span>
                     ?
                   </p>