updated living space add list updagte

frontend/pages/living-space/list/page.tsx

@@ -0,0 +1,42 @@
+'use client';
+import { useEffect, useState } from "react";
+import PageLivingSpaceBuildsTableSection from "../tables/builds/page";
+import { Button } from "@/components/ui/button";
+import { useRouter } from "next/navigation";
+import { IconPlus } from "@tabler/icons-react";
+import { LivingSpaceDataTable } from "../tables/living-spaces/list/data-table";
+import { useGraphQlLivingSpaceList } from "./queries";
+
+const PageLivingSpaceList = () => {
+
+    const router = useRouter();
+    const [buildID, setBuildID] = useState<string | null>(null);
+    // const [collectionToken, setCollectionToken] = useState<string | null>(null);
+    const [isUserTypeEnabled, setIsUserTypeEnabled] = useState(false);
+    const [page, setPage] = useState(1);
+    const [limit, setLimit] = useState(10);
+    const [sort, setSort] = useState({ createdAt: 'desc' });
+    const [filters, setFilters] = useState({});
+
+    useEffect(() => { console.log(`buildID: ${buildID} is changed.`) }, [buildID]);
+    const additionButtons = <>
+        <Button variant="outline" size="sm" onClick={() => { router.push("/living-spaces/add") }}>
+            <IconPlus /><span className="hidden lg:inline">Add Living Space</span>
+        </Button>
+    </>
+    const { data, isLoading, refetch } = useGraphQlLivingSpaceList(buildID || '', { limit, skip: (page - 1) * limit, sort, filters });
+    const handlePageChange = (newPage: number) => { setPage(newPage) };
+    const handlePageSizeChange = (newSize: number) => { setLimit(newSize); setPage(1) };
+
+    return <>
+        <div className="flex flex-col gap-2.5">
+            <PageLivingSpaceBuildsTableSection buildID={buildID} setBuildID={setBuildID} setIsUserTypeEnabled={setIsUserTypeEnabled} additionButtons={additionButtons} />
+            <h1 className="text-center justify-center">Living Space Added to selected Build with collectionToken: </h1><h1 className="text-center justify-center text-2xl font-bold">{buildID}</h1>
+            {
+                buildID && <LivingSpaceDataTable data={data?.data || []} totalCount={data?.totalCount || 0} currentPage={page} pageSize={limit} onPageChange={handlePageChange} onPageSizeChange={handlePageSizeChange} refetchTable={refetch} />
+            }
+        </div>
+    </>;
+}
+
+export { PageLivingSpaceList };

frontend/pages/living-space/list/queries.tsx

@@ -0,0 +1,16 @@
+import { useQuery } from '@tanstack/react-query'
+import { ListArguments } from '@/types/listRequest'
+
+const fetchGraphQlLivingSpaceList = async (buildID: string, params: ListArguments): Promise<any> => {
+    console.log('Fetching test data from local API');
+    const { limit, skip, sort, filters } = params;
+    try {
+        const res = await fetch('/api/living-space/list', { method: 'POST', cache: 'no-store', credentials: "include", body: JSON.stringify({ buildID, limit, skip, sort, filters }) });
+        if (!res.ok) { const errorText = await res.text(); console.error('Test data API error:', errorText); throw new Error(`API error: ${res.status} ${res.statusText}`) }; const data = await res.json();
+        return { data: data.data, totalCount: data.totalCount }
+    } catch (error) { console.error('Error fetching test data:', error); throw error }
+};
+
+export function useGraphQlLivingSpaceList(buildID: string, params: ListArguments) {
+    return useQuery({ queryKey: ['graphql-living-space-list', buildID, params], queryFn: () => fetchGraphQlLivingSpaceList(buildID, params) })
+}