updated left menu and page template

WebServices/client-frontend/src/components/NavigatePages/app000003.tsx

@@ -1,45 +1,100 @@
 "use client";
 import React, { useEffect } from "react";
-import buildingsMockData from "./mock-data";
 
-import { BuildingFormData } from "../Pages/build/buildschema1";
-import BuildPageForm1 from "../Pages/build/buildform1";
-import BuildPage1 from "../Pages/build/buildpage1";
-import BuildInfo1 from "../Pages/build/buildinfo1";
+import {
+  PeopleFormData,
+  PeopleSchema,
+} from "../Pages/people/superusers/peopleschema1";
+
+import PeoplePageForm1 from "../Pages/people/superusers/peopleform1";
+import PeoplePage1 from "../Pages/people/superusers/peoplepage1";
+import PeopleInfo1 from "../Pages/people/superusers/peopleinfo1";
+import { peopleList } from "@/apicalls/people/people";
+
+interface Pagination {
+  page: number;
+  size: number;
+  totalCount: number;
+  allCount: number;
+  totalPages: number;
+  orderField: string[];
+  orderType: string[];
+  pageCount: number;
+}
+
+const defaultPagination: Pagination = {
+  page: 1,
+  size: 1,
+  totalCount: 0,
+  allCount: 0,
+  totalPages: 0,
+  orderField: ["uu_id"],
+  orderType: ["asc"],
+  pageCount: 0,
+};
 
 function app000003() {
   const [modifyEnable, setModifyEnable] = React.useState<boolean | null>(false);
   const [isCreate, setIsCreate] = React.useState<boolean | null>(false);
   const [selectedId, setSelectedId] = React.useState<string | null>(null);
-  const [tableData, setTableData] = React.useState<BuildingFormData[]>([]);
+  const [tableData, setTableData] = React.useState<PeopleFormData[]>([]);
+  const [pagination, setPagination] =
+    React.useState<Pagination>(defaultPagination);
 
   const fecthData = async ({
     // Add any parameters if needed
     page = 1,
     pageSize = 10,
-    orderBy = "asc",
-    orderType = "name",
+    orderBy = ["asc"],
+    orderType = ["uu_id"],
     query = {},
   }) => {
     // Simulate an API call
-    const response = await new Promise((resolve) =>
-      setTimeout(() => resolve(buildingsMockData), 1000)
-    );
-    setTableData(response as BuildingFormData[]);
+    const result = await peopleList({
+      page,
+      size: pageSize,
+      orderField: orderType,
+      orderType: orderBy,
+      query: query,
+    });
+    setTableData(result?.data || []);
+    setPagination(result?.pagination || {});
   };
-  // Fetch data when the component mounts
 
-  useEffect(() => {
-    fecthData({
-      page: 1,
-      pageSize: 10,
-      orderBy: "asc",
-      orderType: "uu_id",
-      query: {},
+  const fetchDataRef = React.useCallback(({
+    page = 1,
+    pageSize = 10,
+    orderBy = ["asc"],
+    orderType = ["uu_id"],
+    query = {},
+  }) => {
+    peopleList({
+      page,
+      size: pageSize,
+      orderField: orderType,
+      orderType: orderBy,
+      query: query,
+    }).then(result => {
+      setTableData(result?.data || []);
+      setPagination(result?.pagination || {});
     });
   }, []);
 
-  const onSubmit = (data: BuildingFormData) => {
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      fetchDataRef({
+        page: pagination.page,
+        pageSize: pagination.size,
+        orderBy: pagination.orderField,
+        orderType: pagination.orderType,
+        query: {},
+      });
+    }, 300); // 300ms debounce
+
+    return () => clearTimeout(timer);
+  }, [pagination.page, pagination.size, fetchDataRef]);
+
+  const onSubmit = (data: PeopleFormData) => {
     console.log("Form data:", data);
     // Submit to API or do other operations
   };
@@ -57,21 +112,22 @@ function app000003() {
   return (
     <>
       <div className="h-screen overflow-y-auto">
-        <BuildInfo1
-          data={tableData}
+        <PeopleInfo1
+          pagination={pagination}
+          setPagination={setPagination}
           selectedId={selectedId}
           setIsCreate={() => setIsCreate(true)}
         />
         {!isCreate ? (
           <div className="min-w-full mx-4 p-6 rounded-lg shadow-md ">
             {!selectedId ? (
-              <BuildPage1
+              <PeoplePage1
                 data={tableData}
                 handleUpdateModify={handleUpdateModify}
                 handleView={handleView}
               />
             ) : (
-              <BuildPageForm1
+              <PeoplePageForm1
                 data={tableData.find((item) => item.uu_id === selectedId) || {}}
                 onSubmit={onSubmit}
                 modifyEnable={modifyEnable}
@@ -81,7 +137,7 @@ function app000003() {
           </div>
         ) : (
           <>
-            <BuildPageForm1
+            <PeoplePageForm1
               data={{
                 build_date: new Date(),
                 decision_period_date: new Date(),