prod-wag-backend-automate-services/WebServices/client-frontend/src/components/NavigatePages/app000003.tsx

"use client";
import React, { useEffect } from "react";

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<PeopleFormData[]>([]);
  const [pagination, setPagination] =
    React.useState<Pagination>(defaultPagination);

  const fecthData = async ({
    // Add any parameters if needed
    page = 1,
    pageSize = 10,
    orderBy = ["asc"],
    orderType = ["uu_id"],
    query = {},
  }) => {
    // Simulate an API call
    const result = await peopleList({
      page,
      size: pageSize,
      orderField: orderType,
      orderType: orderBy,
      query: query,
    });
    setTableData(result?.data || []);
    setPagination(result?.pagination || {});
  };

  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 || {});
    });
  }, []);

  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
  };

  const handleUpdateModify = (uuid: string) => {
    setSelectedId(uuid);
    setModifyEnable(false);
  };

  const handleView = (uuid: string) => {
    setSelectedId(uuid);
    setModifyEnable(true);
  };

  return (
    <>
      <div className="h-screen overflow-y-auto">
        <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 ? (
              <PeoplePage1
                data={tableData}
                handleUpdateModify={handleUpdateModify}
                handleView={handleView}
              />
            ) : (
              <PeoplePageForm1
                data={tableData.find((item) => item.uu_id === selectedId) || {}}
                onSubmit={onSubmit}
                modifyEnable={modifyEnable}
                setSelectedId={() => setSelectedId(null)}
              />
            )}
          </div>
        ) : (
          <>
            <PeoplePageForm1
              data={{
                build_date: new Date(),
                decision_period_date: new Date(),
              }}
              onSubmit={onSubmit}
              modifyEnable={modifyEnable}
              setSelectedId={() => setIsCreate(null)}
            />
          </>
        )}
      </div>
    </>
  );
}

export default app000003;