From e5fb950f46b0d3e95ee747883b090e00f7238fda Mon Sep 17 00:00:00 2001
From: Jason Chuang <jchuang@2fi-solutions.com.hk>
Date: Sun, 9 Aug 2026 00:55:21 +0800
Subject: [PATCH] CR023 - update user search

---
 src/components/FiDataGrid.js                  | 12 ++++--
 .../UserSearchForm_Individual.js              | 43 +++++++++++++------
 .../UserTable_Individual.js                   | 12 ++++++
 .../UserSearchForm_Organization.js            | 43 +++++++++++++------
 .../UserTable_Organization.js                 | 12 ++++++
 5 files changed, 91 insertions(+), 31 deletions(-)

diff --git a/src/components/FiDataGrid.js b/src/components/FiDataGrid.js
index 4470d9d..d8fd662 100644
--- a/src/components/FiDataGrid.js
+++ b/src/components/FiDataGrid.js
@@ -343,9 +343,15 @@ export function FiDataGrid({ rows, columns, sx, autoHeight = true,
                                 page={page}
                                 rowsPerPage={pageSize}
                                 rowsPerPageOptions={_pageSizeOptions}
-                                labelDisplayedRows={() =>
-                                    `${(_rows?.length ? page * pageSize + 1 : 0)}-${page * pageSize + (_rows?.length ?? 0)} ${intl.formatMessage({ id: "of" })} ${rowCount}`
-                                }
+                                labelDisplayedRows={() => {
+                                    const total = rowCount || 0;
+                                    if (!_rows?.length || total === 0) {
+                                        return `0-0 ${intl.formatMessage({ id: "of" })} ${total}`;
+                                    }
+                                    const from = page * pageSize + 1;
+                                    const to = Math.min(page * pageSize + _rows.length, total);
+                                    return `${from}-${to} ${intl.formatMessage({ id: "of" })} ${total}`;
+                                }}
                                 labelRowsPerPage={intl.formatMessage({ id: "rowsPerPage" }) + ":"}
                                 getItemAriaLabel={(type) => {
                                     if (type === 'previous') {
diff --git a/src/pages/User/SearchPage_Individual/UserSearchForm_Individual.js b/src/pages/User/SearchPage_Individual/UserSearchForm_Individual.js
index 3be7555..aa0a348 100644
--- a/src/pages/User/SearchPage_Individual/UserSearchForm_Individual.js
+++ b/src/pages/User/SearchPage_Individual/UserSearchForm_Individual.js
@@ -7,7 +7,7 @@ import {
 } from '@mui/material';
 import MainCard from "components/MainCard";
 import { useForm } from "react-hook-form";
-import { useState,useEffect } from "react";
+import { useState } from "react";
 import {PNSPS_BUTTON_THEME} from "themes/buttonConst";
 import {ThemeProvider} from "@emotion/react";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
@@ -16,22 +16,15 @@ import {ThemeProvider} from "@emotion/react";
 const UserSearchForm_Individual = ({ applySearch, onGridReady, searchCriteria }) => {
 
     const [type, setType] = useState([]);
-    const [accountFilter, setAccountFilter] = useState("All");
+    const [accountFilter, setAccountFilter] = useState(() => {
+        if (searchCriteria.accountFilter != undefined && searchCriteria.accountFilter !== "") {
+            return searchCriteria.accountFilter;
+        }
+        return "All";
+    });
 
     const { reset, register, handleSubmit } = useForm()
 
-    useEffect(() => {
-        if(searchCriteria.accountFilter!=undefined){
-            if(searchCriteria.accountFilter === ""){
-                setAccountFilter("All")
-            }else{
-                setAccountFilter(searchCriteria.accountFilter)
-            }
-        }else{
-            setAccountFilter("All")    
-        }
-    }, [searchCriteria]);
-
     const onSubmit = (data) => {
 
         let typeArray = [];
@@ -52,6 +45,15 @@ const UserSearchForm_Individual = ({ applySearch, onGridReady, searchCriteria })
         applySearch(temp);
     };
 
+    function onToBeVerified() {
+        applySearch({
+            accountFilter: "Not Verified",
+            descOrder: true,
+            start: 0,
+            limit: 10
+        });
+    }
+
     function resetForm() {
         setType([]);
         setAccountFilter("All");
@@ -178,9 +180,22 @@ const UserSearchForm_Individual = ({ applySearch, onGridReady, searchCriteria })
                 <Grid container maxWidth justifyContent="flex-end">
                     <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                     <Grid item sx={{ ml: 3, mr: 3, mb: 3 }}>
+                        <Button
+                            variant="contained"
+                            color="edit"
+                            type="button"
+                            onClick={onToBeVerified}
+                            disabled={onGridReady}
+                        >
+                            To be verified
+                        </Button>
+                    </Grid>
+
+                    <Grid item sx={{ mr: 3, mb: 3 }}>
                         <Button
                             variant="contained"
                             color="cancel"
+                            type="button"
                             onClick={resetForm}
                             >
                             Reset
diff --git a/src/pages/User/SearchPage_Individual/UserTable_Individual.js b/src/pages/User/SearchPage_Individual/UserTable_Individual.js
index b100afa..71fc206 100644
--- a/src/pages/User/SearchPage_Individual/UserTable_Individual.js
+++ b/src/pages/User/SearchPage_Individual/UserTable_Individual.js
@@ -91,6 +91,18 @@ export default function UserTable_Individual({ searchCriteria, applyGridOnReady,
             flex: 1,
             minWidth: 150,
         },
+        {
+            id: 'created',
+            field: 'created',
+            headerName: 'Created Date',
+            flex: 1,
+            minWidth: 200,
+            valueGetter: (params) => {
+                if (params.value) {
+                    return DateUtils.datetimeStr(params.value);
+                }
+            }
+        },
         {
             id: 'lastLogin',
             field: 'lastLogin',
diff --git a/src/pages/User/SearchPage_Organization/UserSearchForm_Organization.js b/src/pages/User/SearchPage_Organization/UserSearchForm_Organization.js
index e3ae73f..9ad2b57 100644
--- a/src/pages/User/SearchPage_Organization/UserSearchForm_Organization.js
+++ b/src/pages/User/SearchPage_Organization/UserSearchForm_Organization.js
@@ -9,7 +9,7 @@ import MainCard from "../../../components/MainCard";
 import OrgComboAutocomplete from "../../../components/OrgComboAutocomplete";
 import {useForm} from "react-hook-form";
 
-import { useState, useEffect} from "react";
+import { useState } from "react";
 import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
 import {ThemeProvider} from "@emotion/react";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
@@ -18,22 +18,15 @@ import {ThemeProvider} from "@emotion/react";
 const UserSearchForm_Organization = ({applySearch, onGridReady, searchCriteria}) => {
 
     const [type, setType] = useState([]);
-    const [accountFilter, setAccountFilter] = useState("All");
+    const [accountFilter, setAccountFilter] = useState(() => {
+        if (searchCriteria.accountFilter != undefined && searchCriteria.accountFilter !== "") {
+            return searchCriteria.accountFilter;
+        }
+        return "All";
+    });
     const [orgSelected, setOrgSelected] = useState({});
 
     const { reset, register, handleSubmit } = useForm()
-    
-    useEffect(() => {
-        if(searchCriteria.accountFilter!=undefined){
-            if(searchCriteria.accountFilter === ""){
-                setAccountFilter("All")
-            }else{
-                setAccountFilter(searchCriteria.accountFilter)
-            }
-        }else{
-            setAccountFilter("All")    
-        }
-    }, [searchCriteria]);
 
     const onSubmit = (data) => {
 
@@ -58,6 +51,15 @@ const UserSearchForm_Organization = ({applySearch, onGridReady, searchCriteria})
         applySearch(temp);
     };
 
+    function onToBeVerified() {
+        applySearch({
+            accountFilter: "Not Verified",
+            descOrder: true,
+            start: 0,
+            limit: 10
+        });
+    }
+
     function resetForm(){
         setType([]);
         setAccountFilter("All");
@@ -211,9 +213,22 @@ const UserSearchForm_Organization = ({applySearch, onGridReady, searchCriteria})
                     <Grid container maxWidth justifyContent="flex-end">
                         <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                         <Grid item sx={{ml:3, mr:3, mb:3}}>
+                            <Button
+                                variant="contained"
+                                color="edit"
+                                type="button"
+                                onClick={onToBeVerified}
+                                disabled={onGridReady}
+                            >
+                                To be verified
+                            </Button>
+                        </Grid>
+
+                        <Grid item sx={{mr:3, mb:3}}>
                             <Button
                                 variant="contained"
                                 color="cancel"
+                                type="button"
                                 onClick={resetForm}
                                 >
                                 Reset
diff --git a/src/pages/User/SearchPage_Organization/UserTable_Organization.js b/src/pages/User/SearchPage_Organization/UserTable_Organization.js
index ee0b386..dbd3203 100644
--- a/src/pages/User/SearchPage_Organization/UserTable_Organization.js
+++ b/src/pages/User/SearchPage_Organization/UserTable_Organization.js
@@ -85,6 +85,18 @@ export default function UserTable_Organization({searchCriteria, applyGridOnReady
             flex: 1,
             minWidth: 150,
         },
+        {
+            id: 'created',
+            field: 'created',
+            headerName: 'Created Date',
+            flex: 1,
+            minWidth: 200,
+            valueGetter:(params)=>{
+                if(params.value){
+                    return DateUtils.datetimeStr(params.value);
+                }
+            }
+        },
         {
             id: 'lastLogin',
             field: 'lastLogin',