450 lines
20 KiB
TypeScript
450 lines
20 KiB
TypeScript
"use client"
|
|
|
|
import { Pencil, Filter, Trash2, Search, Calendar, X } from "lucide-react"
|
|
import { useMigrants } from "@/hooks/useMigrants"
|
|
import { useState } from "react"
|
|
import DeleteDialog from "./migrant/Modal/DeleteDialog"
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Input } from "@/components/ui/input"
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
|
|
import { Checkbox } from "@/components/ui/checkbox"
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
DialogDescription,
|
|
} from "@/components/ui/dialog"
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
|
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
|
|
import { Label } from "@/components/ui/label"
|
|
import { useNavigate } from "react-router-dom"
|
|
import { formatDate } from "@/utils/date"
|
|
|
|
const MigrantsTable = () => {
|
|
const navigate = useNavigate()
|
|
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
|
|
const [deleteDialogIds, setDeleteDialogIds] = useState<string[]>([])
|
|
const [isBulkDelete, setIsBulkDelete] = useState(false)
|
|
const [isModalOpen, setIsModalOpen] = useState(false)
|
|
|
|
const applyAdvancedFilters = () => {
|
|
setIsModalOpen(false)
|
|
handleSearch() // Trigger the search with the current filters
|
|
}
|
|
|
|
const handleEdit = (id: number) => {
|
|
navigate(`/admin/migrants/edit/${id}?mode=edit`)
|
|
}
|
|
|
|
const [showAllActive, setShowAllActive] = useState(false)
|
|
|
|
const {
|
|
migrants,
|
|
loading,
|
|
currentPage,
|
|
totalPages,
|
|
searchFullName,
|
|
searchOccupation,
|
|
filters,
|
|
selectedMigrants,
|
|
setCurrentPage,
|
|
setSearchFullName,
|
|
setSearchOccupation,
|
|
setFilters,
|
|
handleSearch,
|
|
resetFilters,
|
|
toggleSelectMigrant,
|
|
toggleSelectAll,
|
|
isAllSelected,
|
|
handleBulkDelete,
|
|
refetchMigrants
|
|
} = useMigrants(showAllActive ? 1000 : 10)
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Filters */}
|
|
<Card className="border border-gray-800 bg-gray-900 shadow-2xl overflow-hidden">
|
|
<CardHeader className="pb-3 border-b border-gray-800">
|
|
<CardTitle className="text-md font-medium flex justify-between items-center text-white">
|
|
Search & Filters
|
|
<Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
|
|
<DialogTrigger asChild>
|
|
<Button
|
|
size="icon"
|
|
className="border-gray-700 text-gray-300 hover:bg-gray-900 hover:text-white bg-gray-800"
|
|
>
|
|
<Filter className="h-4 w-4" />
|
|
<span className="sr-only">Advanced filters</span>
|
|
</Button>
|
|
</DialogTrigger>
|
|
|
|
<DialogContent className="sm:max-w-[425px] bg-gray-900 border-gray-800">
|
|
<DialogHeader>
|
|
<DialogTitle className="text-white">Advanced Filters</DialogTitle>
|
|
<DialogDescription className="text-gray-400">
|
|
Set sorting options and filters for the migrants list.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="grid gap-4 py-4">
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="sort-by" className="text-gray-300">
|
|
Sort By
|
|
</Label>
|
|
<Select
|
|
value={filters.sort_by}
|
|
onValueChange={(value) => setFilters({ ...filters, sort_by: value })}
|
|
>
|
|
<SelectTrigger id="sort-by" className="bg-gray-800 border-gray-700 text-white">
|
|
<SelectValue placeholder="Select field" />
|
|
</SelectTrigger>
|
|
<SelectContent className="bg-gray-800 border-gray-700">
|
|
<SelectItem value="full_name" className="text-white hover:bg-gray-700">
|
|
Full Name
|
|
</SelectItem>
|
|
<SelectItem value="occupation" className="text-white hover:bg-gray-700">
|
|
Occupation
|
|
</SelectItem>
|
|
<SelectItem value="arrival_date" className="text-white hover:bg-gray-700">
|
|
Arrival Date
|
|
</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<div className="grid gap-2">
|
|
<Label className="text-gray-300">Alphabetical Order</Label>
|
|
<RadioGroup
|
|
value={filters.alphabetical_order}
|
|
onValueChange={(value) => setFilters({ ...filters, alphabetical_order: value })}
|
|
className="flex gap-4"
|
|
>
|
|
<div className="flex items-center space-x-2">
|
|
<RadioGroupItem value="asc" id="asc" className="border-gray-600 text-[#9B2335]" />
|
|
<Label htmlFor="asc" className="text-gray-300">
|
|
A-Z
|
|
</Label>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<RadioGroupItem value="desc" id="desc" className="border-gray-600 text-[#9B2335]" />
|
|
<Label htmlFor="desc" className="text-gray-300">
|
|
Z-A
|
|
</Label>
|
|
</div>
|
|
</RadioGroup>
|
|
</div>
|
|
|
|
{/* Arrival Date Sorting Options */}
|
|
{filters.sort_by === "arrival_date" && (
|
|
<div className="grid gap-2">
|
|
<Label className="text-gray-300">Arrival Date Order</Label>
|
|
<RadioGroup
|
|
value={filters.arrival_order === "desc" ? "newest" : "oldest"}
|
|
onValueChange={(value) =>
|
|
setFilters((prev) => ({
|
|
...prev,
|
|
sort_by: "arrival_date",
|
|
arrival_order: value === "newest" ? "desc" : "asc",
|
|
}))
|
|
}
|
|
className="flex gap-4"
|
|
>
|
|
<div className="flex items-center space-x-2">
|
|
<RadioGroupItem value="newest" id="newest" className="border-gray-600 text-[#9B2335]" />
|
|
<Label htmlFor="newest" className="text-gray-300">
|
|
Newest First
|
|
</Label>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<RadioGroupItem value="oldest" id="oldest" className="border-gray-600 text-[#9B2335]" />
|
|
<Label htmlFor="oldest" className="text-gray-300">
|
|
Oldest First
|
|
</Label>
|
|
</div>
|
|
</RadioGroup>
|
|
</div>
|
|
)}
|
|
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="arrival-from" className="text-gray-300">
|
|
Arrival Date Range
|
|
</Label>
|
|
<div className="flex gap-2 items-center">
|
|
<div className="relative flex-1">
|
|
<Calendar className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500" />
|
|
<Input
|
|
id="arrival-from"
|
|
type="date"
|
|
placeholder="From"
|
|
value={filters.arrival_from}
|
|
onChange={(e) => setFilters({ ...filters, arrival_from: e.target.value })}
|
|
className="pl-8 bg-gray-800 border-gray-700 text-white focus:border-[#9B2335]"
|
|
/>
|
|
</div>
|
|
<span className="text-gray-400">to</span>
|
|
<div className="relative flex-1">
|
|
<Calendar className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500" />
|
|
<Input
|
|
type="date"
|
|
placeholder="To"
|
|
value={filters.arrival_to}
|
|
onChange={(e) => setFilters({ ...filters, arrival_to: e.target.value })}
|
|
className="pl-8 bg-gray-800 border-gray-700 text-white focus:border-[#9B2335]"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex justify-end gap-2">
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => setIsModalOpen(false)}
|
|
className="border-gray-700 text-gray-300 hover:bg-gray-800 bg-gray-800"
|
|
>
|
|
Cancel
|
|
</Button>
|
|
<Button onClick={applyAdvancedFilters} className="bg-[#9B2335] hover:bg-[#9B2335]/80">
|
|
Apply Filters
|
|
</Button>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="p-6">
|
|
<div className="flex flex-wrap gap-4">
|
|
<div className="relative flex-1 min-w-[200px]">
|
|
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500" />
|
|
<Input
|
|
type="text"
|
|
placeholder="Search Full Name"
|
|
value={searchFullName}
|
|
onChange={(e) => setSearchFullName(e.target.value)}
|
|
onKeyDown={(e) => e.key === "Enter" && handleSearch()}
|
|
className="pl-8 bg-gray-800 border-gray-700 text-white placeholder:text-gray-500 focus:border-[#9B2335]"
|
|
/>
|
|
</div>
|
|
<div className="relative flex-1 min-w-[200px]">
|
|
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500" />
|
|
<Input
|
|
type="text"
|
|
placeholder="Search Occupation"
|
|
value={searchOccupation}
|
|
onChange={(e) => setSearchOccupation(e.target.value)}
|
|
onKeyDown={(e) => e.key === "Enter" && handleSearch()}
|
|
onBlur={() => searchOccupation.trim() !== "" && handleSearch()}
|
|
className="pl-8 bg-gray-800 border-gray-700 text-white placeholder:text-gray-500 focus:border-[#9B2335]"
|
|
/>
|
|
</div>
|
|
<div className="relative flex-1 min-w-[200px]">
|
|
<Calendar className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500" />
|
|
<Input
|
|
type="date"
|
|
placeholder="Arrival From"
|
|
value={filters.arrival_from || ""}
|
|
onChange={(e) => setFilters({ ...filters, arrival_from: e.target.value })}
|
|
className="pl-8 bg-gray-800 border-gray-700 text-white focus:border-[#9B2335]"
|
|
/>
|
|
</div>
|
|
<div className="relative flex-1 min-w-[200px]">
|
|
<Calendar className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500" />
|
|
<Input
|
|
type="date"
|
|
placeholder="Arrival To"
|
|
value={filters.arrival_to || ""}
|
|
onChange={(e) => setFilters({ ...filters, arrival_to: e.target.value })}
|
|
className="pl-8 bg-gray-800 border-gray-700 text-white focus:border-[#9B2335]"
|
|
/>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<Button onClick={handleSearch} className="whitespace-nowrap bg-[#9B2335] hover:bg-[#9B2335]/90">
|
|
Apply Filters
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
onClick={resetFilters}
|
|
className="whitespace-nowrap border-gray-700 text-gray-300 hover:bg-gray-800 bg-gray-900"
|
|
>
|
|
<X className="mr-1 h-4 w-4" /> Reset
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Bulk Actions */}
|
|
{selectedMigrants.length > 0 && (
|
|
<div className="flex items-center gap-2 mb-4">
|
|
<span className="text-sm font-medium text-gray-400">{selectedMigrants.length} migrants selected</span>
|
|
<Button
|
|
variant="destructive"
|
|
size="sm"
|
|
className="ml-auto bg-red-600 hover:bg-red-700"
|
|
onClick={() => {
|
|
setIsBulkDelete(true)
|
|
setDeleteDialogIds(selectedMigrants.map((id) => id.toString()))
|
|
setDeleteDialogOpen(true)
|
|
}}
|
|
>
|
|
<Trash2 className="mr-1 h-4 w-4" /> Delete Selected
|
|
</Button>
|
|
</div>
|
|
)}
|
|
|
|
{/* Table */}
|
|
<Card className="border border-gray-800 bg-gray-900 shadow-2xl py-0">
|
|
<CardContent className="p-0">
|
|
{loading ? (
|
|
<div className="flex justify-center items-center h-64">
|
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-[#9B2335]"></div>
|
|
</div>
|
|
) : (
|
|
<div className="overflow-x-auto">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow className="bg-gray-800/50 hover:bg-gray-800/50 border-b border-gray-800">
|
|
<TableHead className="w-[50px] text-center text-gray-300">
|
|
<Checkbox
|
|
checked={isAllSelected}
|
|
onCheckedChange={toggleSelectAll}
|
|
className="border-gray-600 data-[state=checked]:bg-[#9B2335] data-[state=checked]:border-[#9B2335]"
|
|
/>
|
|
</TableHead>
|
|
<TableHead className="text-gray-300">ID</TableHead>
|
|
<TableHead className="text-gray-300">Full Name</TableHead>
|
|
<TableHead className="text-gray-300">Date of Birth</TableHead>
|
|
<TableHead className="text-gray-300">Place of Birth</TableHead>
|
|
<TableHead className="text-gray-300">Occupation</TableHead>
|
|
<TableHead className="text-gray-300">Date of Arrival NT</TableHead>
|
|
<TableHead className="text-right text-gray-300">Actions</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{migrants.map((migrant) => {
|
|
const isSelected =
|
|
migrant.person_id !== undefined &&
|
|
typeof migrant.person_id === "number" &&
|
|
selectedMigrants.includes(migrant.person_id)
|
|
|
|
const hasValidId =
|
|
migrant.person_id !== undefined &&
|
|
typeof migrant.person_id === "number" &&
|
|
!isNaN(migrant.person_id)
|
|
|
|
return (
|
|
<TableRow
|
|
key={migrant.person_id}
|
|
className={`border-b border-gray-800 hover:bg-gray-800/30 ${
|
|
isSelected ? "bg-[#9B2335]/10" : ""
|
|
}`}
|
|
>
|
|
<TableCell className="text-center">
|
|
<Checkbox
|
|
checked={isSelected}
|
|
onCheckedChange={() => toggleSelectMigrant(migrant.person_id)}
|
|
disabled={!hasValidId}
|
|
className="border-gray-600 data-[state=checked]:bg-[#9B2335] data-[state=checked]:border-[#9B2335]"
|
|
/>
|
|
</TableCell>
|
|
<TableCell className="font-medium text-white">{migrant.person_id ?? "—"}</TableCell>
|
|
<TableCell className="text-gray-300">{migrant.full_name ?? "—"}</TableCell>
|
|
<TableCell className="text-gray-300">{formatDate(migrant.date_of_birth ?? "—")}</TableCell>
|
|
<TableCell className="text-gray-300">{migrant.place_of_birth ?? "—"}</TableCell>
|
|
<TableCell className="text-gray-300">{migrant.occupation ?? "—"}</TableCell>
|
|
<TableCell className="text-gray-300">
|
|
{formatDate(migrant.migration?.date_of_arrival_nt ?? "—")}
|
|
</TableCell>
|
|
<TableCell className="text-right">
|
|
<div className="flex justify-end gap-2">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="h-8 px-2 text-blue-400 hover:text-blue-300 hover:bg-blue-900/20"
|
|
onClick={() => handleEdit(migrant.person_id as number)}
|
|
>
|
|
<Pencil className="w-4 h-4 mr-1" /> Edit
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="h-8 px-2 text-red-400 hover:text-red-300 hover:bg-red-900/20"
|
|
onClick={() => {
|
|
if (migrant.person_id) {
|
|
setIsBulkDelete(false)
|
|
setDeleteDialogIds([migrant.person_id.toString()])
|
|
setDeleteDialogOpen(true)
|
|
}
|
|
}}
|
|
>
|
|
<Trash2 className="w-4 h-4 mr-1" /> Delete
|
|
</Button>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
)
|
|
})}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Pagination */}
|
|
<div className="flex justify-center items-center gap-3 py-2">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => setCurrentPage((prev) => Math.max(prev - 1, 1))}
|
|
disabled={currentPage === 1 || showAllActive}
|
|
className="border-gray-700 text-gray-300 hover:bg-gray-800 hover:text-white disabled:opacity-50 bg-gray-900"
|
|
>
|
|
Previous
|
|
</Button>
|
|
<span className="text-sm font-medium text-white">
|
|
{showAllActive ? "Showing all records" : `Page ${currentPage} of ${totalPages}`}
|
|
</span>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => setCurrentPage((prev) => Math.min(prev + 1, totalPages))}
|
|
disabled={currentPage === totalPages || showAllActive}
|
|
className="border-gray-700 text-gray-300 hover:bg-gray-800 hover:text-white disabled:opacity-50 bg-gray-900"
|
|
>
|
|
Next
|
|
</Button>
|
|
<Button
|
|
variant={showAllActive ? "default" : "outline"}
|
|
size="sm"
|
|
onClick={() => {
|
|
setShowAllActive(!showAllActive);
|
|
if (!showAllActive) {
|
|
// When activating show all
|
|
setCurrentPage(1);
|
|
}
|
|
// Trigger refetch with new page size
|
|
refetchMigrants();
|
|
}}
|
|
className={`${showAllActive ? "bg-[#9B2335] hover:bg-[#9B2335]/90" : "border-gray-700 bg-gray-900"} text-white hover:bg-gray-800 hover:text-white shadow-sm`}
|
|
>
|
|
{showAllActive ? "Show Paged" : "Show All"}
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Delete Confirmation Dialog */}
|
|
<DeleteDialog
|
|
open={deleteDialogOpen}
|
|
onOpenChange={setDeleteDialogOpen}
|
|
bulkDelete={isBulkDelete}
|
|
selectedCount={deleteDialogIds.length}
|
|
ids={deleteDialogIds}
|
|
onDeleteSuccess={handleBulkDelete}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default MigrantsTable
|