feat: implement project development module, transfer management features, and industrial AVM model integration

2026-04-18 20:34:35 +07:00
parent 0f3b4d7b0d
commit 38b9def99a
66 changed files with 9051 additions and 17 deletions
--- a/tmp/tec2773-industrial-stash/apps/web/components/khu-cong-nghiep/park-listing-client.tsx
+++ b/tmp/tec2773-industrial-stash/apps/web/components/khu-cong-nghiep/park-listing-client.tsx
@@ -0,0 +1,131 @@
+'use client';
+
+import { Factory, Map } from 'lucide-react';
+import * as React from 'react';
+import { ParkCard } from '@/components/khu-cong-nghiep/park-card';
+import { ParkFilterBar } from '@/components/khu-cong-nghiep/park-filter-bar';
+import { ParkMap } from '@/components/khu-cong-nghiep/park-map';
+import { Button } from '@/components/ui/button';
+import { useIndustrialParksSearch } from '@/lib/hooks/use-khu-cong-nghiep';
+import type { SearchIndustrialParksParams } from '@/lib/khu-cong-nghiep-api';
+
+const PAGE_SIZE = 12;
+
+export function ParkListingClient() {
+  const [filters, setFilters] = React.useState<SearchIndustrialParksParams>({
+    page: 1,
+    limit: PAGE_SIZE,
+  });
+  const [showMap, setShowMap] = React.useState(false);
+
+  const { data, isLoading, isError } = useIndustrialParksSearch(filters);
+
+  const handleFilterChange = (newFilters: SearchIndustrialParksParams) => {
+    setFilters({ ...newFilters, limit: PAGE_SIZE });
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  const handlePageChange = (page: number) => {
+    setFilters((prev) => ({ ...prev, page }));
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  return (
+    <>
+      {/* Filters */}
+      <ParkFilterBar params={filters} onChange={handleFilterChange} />
+
+      {/* Map toggle */}
+      <div className="mt-4 flex justify-end">
+        <Button
+          variant={showMap ? 'default' : 'outline'}
+          size="sm"
+          className="gap-2"
+          onClick={() => setShowMap(!showMap)}
+        >
+          <Map className="h-4 w-4" />
+          {showMap ? '\u1EA8n b\u1EA3n \u0111\u1ED3' : 'Xem b\u1EA3n \u0111\u1ED3'}
+        </Button>
+      </div>
+
+      {/* Park Map */}
+      {showMap && data && data.data.length > 0 && (
+        <div className="mt-4">
+          <ParkMap parks={data.data} />
+        </div>
+      )}
+
+      {/* Results */}
+      <div className="mt-6">
+        {isLoading ? (
+          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+            {Array.from({ length: 6 }).map((_, i) => (
+              <div
+                key={i}
+                className="h-72 animate-pulse rounded-lg bg-muted"
+              />
+            ))}
+          </div>
+        ) : isError ? (
+          <div className="py-12 text-center">
+            <p className="text-muted-foreground">
+              Kh\u00F4ng th\u1EC3 t\u1EA3i danh s\u00E1ch khu c\u00F4ng nghi\u1EC7p. Vui l\u00F2ng th\u1EED l\u1EA1i.
+            </p>
+            <Button
+              variant="outline"
+              className="mt-4"
+              onClick={() => setFilters({ ...filters })}
+            >
+              Th\u1EED l\u1EA1i
+            </Button>
+          </div>
+        ) : data && data.data.length > 0 ? (
+          <>
+            <p className="mb-4 text-sm text-muted-foreground">
+              {data.total} khu c\u00F4ng nghi\u1EC7p \u0111\u01B0\u1EE3c t\u00ECm th\u1EA5y
+            </p>
+
+            <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+              {data.data.map((park) => (
+                <ParkCard key={park.id} park={park} />
+              ))}
+            </div>
+
+            {/* Pagination */}
+            {data.totalPages > 1 && (
+              <div className="mt-8 flex items-center justify-center gap-2">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  disabled={filters.page === 1}
+                  onClick={() => handlePageChange((filters.page || 1) - 1)}
+                >
+                  Tr\u01B0\u1EDBc
+                </Button>
+                <span className="text-sm text-muted-foreground">
+                  Trang {data.page} / {data.totalPages}
+                </span>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  disabled={data.page >= data.totalPages}
+                  onClick={() => handlePageChange((filters.page || 1) + 1)}
+                >
+                  Sau
+                </Button>
+              </div>
+            )}
+          </>
+        ) : (
+          <div className="py-12 text-center">
+            <Factory className="mx-auto h-12 w-12 text-muted-foreground/30" />
+            <p className="mt-4 text-lg font-medium">Kh\u00F4ng t\u00ECm th\u1EA5y khu c\u00F4ng nghi\u1EC7p</p>
+            <p className="mt-1 text-sm text-muted-foreground">
+              Th\u1EED thay \u0111\u1ED5i b\u1ED9 l\u1ECDc \u0111\u1EC3 t\u00ECm ki\u1EBFm nhi\u1EC1u h\u01A1n
+            </p>
+          </div>
+        )}
+      </div>
+    </>
+  );
+}