List out house

view house detail
2026-02-01 11:12:33 +07:00
parent ed7e5baaea
commit afa26ab50d
25 changed files with 570 additions and 103 deletions
--- a/src/routes/(app)/(auth)/kanri/houses.tsx
+++ b/src/routes/(app)/(auth)/kanri/houses.tsx
@@ -0,0 +1,81 @@
+import DataTable from '@/components/DataTable';
+import CreateNewHouse from '@/components/house/create-house-dialog';
+import { houseColumns } from '@/components/house/house-column';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import SearchInput from '@/components/ui/search-input';
+import { Skeleton } from '@/components/ui/skeleton';
+import useDebounced from '@/hooks/use-debounced';
+import { m } from '@/paraglide/messages';
+import { housesQueries } from '@/service/queries';
+import { WarehouseIcon } from '@phosphor-icons/react';
+import { useQuery } from '@tanstack/react-query';
+import { createFileRoute } from '@tanstack/react-router';
+import { useState } from 'react';
+
+export const Route = createFileRoute('/(app)/(auth)/kanri/houses')({
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  const [page, setPage] = useState(1);
+  const [pageLimit, setPageLimit] = useState(10);
+  const [searchKeyword, setSearchKeyword] = useState('');
+  const debouncedSearch = useDebounced(searchKeyword, 500);
+
+  const { data, isLoading } = useQuery(
+    housesQueries.list({
+      page,
+      limit: pageLimit,
+      keyword: debouncedSearch,
+    }),
+  );
+
+  const onSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchKeyword(e.target.value);
+    setPage(1);
+  };
+
+  if (isLoading) {
+    return (
+      <div className="@container/main flex flex-1 flex-col gap-2 p-4">
+        <Skeleton className="h-130 w-full" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="@container/main flex flex-1 flex-col gap-2 p-4">
+      <div className="*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card *:data-[slot=card]:bg-linear-to-br *:data-[slot=card]:shadow-xs">
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-xl flex items-center gap-2">
+              <WarehouseIcon size={24} />
+              {m.houses_page_ui_title()}
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="flex flex-col gap-4">
+            <div className="flex items-center justify-between">
+              <SearchInput
+                keywords={searchKeyword}
+                setKeyword={setSearchKeyword}
+                onChange={onSearchChange}
+              />
+              <CreateNewHouse />
+            </div>
+            {data && (
+              <DataTable
+                data={data.result || []}
+                columns={houseColumns}
+                page={page}
+                setPage={setPage}
+                limit={pageLimit}
+                setLimit={setPageLimit}
+                pagination={data.pagination}
+              />
+            )}
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}
--- a/src/routes/(app)/(auth)/kanri/logs.tsx
+++ b/src/routes/(app)/(auth)/kanri/logs.tsx
@@ -1,6 +1,6 @@
 import { logColumns } from '@/components/audit/audit-columns';
 import DataTable from '@/components/DataTable';
-import { Card, CardHeader, CardTitle } from '@/components/ui/card';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import SearchInput from '@/components/ui/search-input';
 import { Skeleton } from '@/components/ui/skeleton';
 import useDebounced from '@/hooks/use-debounced';
@@ -37,17 +37,14 @@ function RouteComponent() {
  if (isLoading) {
    return (
      <div className="@container/main flex flex-1 flex-col gap-2 p-4">
-        <div className="flex flex-col gap-4">
-          <Skeleton className="h-20 w-full" />
-          <Skeleton className="h-130 w-full" />
-        </div>
+        <Skeleton className="h-150 w-full" />
      </div>
    );
  }

  return (
    <div className="@container/main flex flex-1 flex-col gap-2 p-4">
-      <div className="*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card *:data-[slot=card]:bg-linear-to-br *:data-[slot=card]:shadow-xs flex flex-col gap-4">
+      <div className="*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card *:data-[slot=card]:bg-linear-to-br *:data-[slot=card]:shadow-xs">
        <Card>
          <CardHeader>
            <CardTitle className="text-xl flex items-center gap-2">
@@ -55,25 +52,27 @@ function RouteComponent() {
              {m.logs_page_ui_title()}
            </CardTitle>
          </CardHeader>
+          <CardContent className="flex flex-col gap-4">
+            <div className="flex items-center">
+              <SearchInput
+                keywords={searchKeyword}
+                setKeyword={setSearchKeyword}
+                onChange={onSearchChange}
+              />
+            </div>
+            {data?.result && (
+              <DataTable
+                data={data.result || []}
+                columns={logColumns}
+                page={page}
+                setPage={setPage}
+                limit={pageLimit}
+                setLimit={setPageLimit}
+                pagination={data.pagination}
+              />
+            )}
+          </CardContent>
        </Card>
-        <div className="flex items-center">
-          <SearchInput
-            keywords={searchKeyword}
-            setKeyword={setSearchKeyword}
-            onChange={onSearchChange}
-          />
-        </div>
-        {data?.result && (
-          <DataTable
-            data={data.result || []}
-            columns={logColumns}
-            page={page}
-            setPage={setPage}
-            limit={pageLimit}
-            setLimit={setPageLimit}
-            pagination={data.pagination}
-          />
-        )}
      </div>
    </div>
  );
--- a/src/routes/(app)/(auth)/kanri/users.tsx
+++ b/src/routes/(app)/(auth)/kanri/users.tsx
@@ -1,5 +1,5 @@
 import DataTable from '@/components/DataTable';
-import { Card, CardHeader, CardTitle } from '@/components/ui/card';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import SearchInput from '@/components/ui/search-input';
 import { Skeleton } from '@/components/ui/skeleton';
 import AddNewUserButton from '@/components/user/add-new-user-dialog';
@@ -39,44 +39,43 @@ function RouteComponent() {
  if (isLoading) {
    return (
      <div className="@container/main flex flex-1 flex-col gap-2 p-4">
-        <div className="flex flex-col gap-4">
-          <Skeleton className="h-20 w-full" />
-          <Skeleton className="h-130 w-full" />
-        </div>
+        <Skeleton className="h-130 w-full" />
      </div>
    );
  }

  return (
    <div className="@container/main flex flex-1 flex-col gap-2 p-4">
-      <div className="*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card *:data-[slot=card]:bg-linear-to-br *:data-[slot=card]:shadow-xs flex flex-col gap-4">
+      <div className="*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card *:data-[slot=card]:bg-linear-to-br *:data-[slot=card]:shadow-xs">
        <Card>
-          <CardHeader>
+          <CardHeader className="border-b">
            <CardTitle className="text-xl flex items-center gap-2">
              <UsersIcon size={24} />
              {m.users_page_ui_title()}
            </CardTitle>
          </CardHeader>
+          <CardContent className="flex flex-col gap-4">
+            <div className="flex items-center justify-between">
+              <SearchInput
+                keywords={searchKeyword}
+                setKeyword={setSearchKeyword}
+                onChange={onSearchChange}
+              />
+              <AddNewUserButton />
+            </div>
+            {data && (
+              <DataTable
+                data={data.result || []}
+                columns={userColumns}
+                page={page}
+                setPage={setPage}
+                limit={pageLimit}
+                setLimit={setPageLimit}
+                pagination={data.pagination}
+              />
+            )}
+          </CardContent>
        </Card>
-        <div className="flex items-center justify-between">
-          <SearchInput
-            keywords={searchKeyword}
-            setKeyword={setSearchKeyword}
-            onChange={onSearchChange}
-          />
-          <AddNewUserButton />
-        </div>
-        {data && (
-          <DataTable
-            data={data.result || []}
-            columns={userColumns}
-            page={page}
-            setPage={setPage}
-            limit={pageLimit}
-            setLimit={setPageLimit}
-            pagination={data.pagination}
-          />
-        )}
      </div>
    </div>
  );