Kailasdevdas
220 lines
8.1 KiB
TypeScript
220 lines
8.1 KiB
TypeScript
import { useState, useEffect, useCallback } from 'react';
|
|
import { getAllInquiriesApi, HealthInquiry } from '@/api/healthCheck';
|
|
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
|
|
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Loader2, RefreshCw, ChevronLeft, ChevronRight } from 'lucide-react';
|
|
|
|
export default function PackageInquiriesTab() {
|
|
const [inquiries, setInquiries] = useState<HealthInquiry[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
const [filterDate, setFilterDate] = useState('');
|
|
const [startDate, setStartDate] = useState('');
|
|
const [endDate, setEndDate] = useState('');
|
|
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
const [itemsPerPage, setItemsPerPage] = useState(10);
|
|
const [totalItems, setTotalItems] = useState(0);
|
|
const [totalPages, setTotalPages] = useState(1);
|
|
|
|
const fetchInquiries = useCallback(async () => {
|
|
setLoading(true);
|
|
try {
|
|
const res = await getAllInquiriesApi(currentPage, itemsPerPage, filterDate, startDate, endDate);
|
|
setInquiries(res.data || []);
|
|
setTotalItems(res.pagination?.total || 0);
|
|
setTotalPages(res.pagination?.totalPages || 1);
|
|
} catch (err) {
|
|
console.error('Failed to fetch inquiries', err);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [currentPage, itemsPerPage, filterDate, startDate, endDate]);
|
|
|
|
useEffect(() => {
|
|
fetchInquiries();
|
|
}, [fetchInquiries]);
|
|
|
|
const handleFilterChange = (setter: React.Dispatch<React.SetStateAction<string>>, value: string) => {
|
|
setter(value);
|
|
setCurrentPage(1);
|
|
};
|
|
|
|
const indexOfFirstItem = (currentPage - 1) * itemsPerPage;
|
|
const indexOfLastItem = Math.min(currentPage * itemsPerPage, totalItems);
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
|
|
<CardTitle className="text-xl">Package Inquiries</CardTitle>
|
|
|
|
<div className="flex flex-wrap items-end gap-3">
|
|
<div className="flex flex-col gap-1">
|
|
<label className="text-xs font-medium text-muted-foreground">Specific Date</label>
|
|
<Input
|
|
type="date"
|
|
value={filterDate}
|
|
onChange={(e) => handleFilterChange(setFilterDate, e.target.value)}
|
|
className="w-[140px] text-sm"
|
|
disabled={!!startDate || !!endDate}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-1">
|
|
<label className="text-xs font-medium text-muted-foreground">From</label>
|
|
<Input
|
|
type="date"
|
|
value={startDate}
|
|
onChange={(e) => handleFilterChange(setStartDate, e.target.value)}
|
|
className="w-[140px] text-sm"
|
|
disabled={!!filterDate}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-1">
|
|
<label className="text-xs font-medium text-muted-foreground">To</label>
|
|
<Input
|
|
type="date"
|
|
value={endDate}
|
|
onChange={(e) => handleFilterChange(setEndDate, e.target.value)}
|
|
className="w-[140px] text-sm"
|
|
disabled={!!filterDate}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-1">
|
|
<label className="text-xs font-medium text-muted-foreground">Rows</label>
|
|
<select
|
|
value={itemsPerPage}
|
|
onChange={(e) => {
|
|
setItemsPerPage(Number(e.target.value));
|
|
setCurrentPage(1);
|
|
}}
|
|
className="flex h-10 rounded-md border border-input bg-background px-3 py-2 text-sm focus:ring-2 focus:ring-primary"
|
|
>
|
|
<option value={5}>5 / page</option>
|
|
<option value={10}>10 / page</option>
|
|
<option value={20}>20 / page</option>
|
|
<option value={50}>50 / page</option>
|
|
</select>
|
|
</div>
|
|
|
|
<Button variant="outline" onClick={fetchInquiries} disabled={loading}>
|
|
<RefreshCw className={`mr-2 h-4 w-4 ${loading ? 'animate-spin' : ''}`} />
|
|
Refresh
|
|
</Button>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="p-0 sm:p-6 sm:pt-0">
|
|
<div className="rounded-md border overflow-x-auto overflow-y-auto max-h-[650px] relative">
|
|
<Table className="w-full min-w-[1000px] table-fixed border-separate border-spacing-0">
|
|
<TableHeader className="sticky top-0 z-20 bg-background shadow-sm">
|
|
<TableRow>
|
|
<TableHead className="w-[150px] font-bold bg-background">Requested Date</TableHead>
|
|
<TableHead className="w-[220px] font-bold bg-background">Patient Details</TableHead>
|
|
<TableHead className="w-[250px] font-bold bg-background">Requested Package</TableHead>
|
|
<TableHead className="w-[120px] font-bold bg-background">Age/Gender</TableHead>
|
|
<TableHead className="w-[250px] font-bold bg-background">Message</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{loading ? (
|
|
<TableRow>
|
|
<TableCell colSpan={5} className="text-center py-10">
|
|
<Loader2 className="h-8 w-8 animate-spin mx-auto" />
|
|
</TableCell>
|
|
</TableRow>
|
|
) : inquiries.length === 0 ? (
|
|
<TableRow>
|
|
<TableCell colSpan={5} className="text-center text-muted-foreground py-10">
|
|
No inquiries found for the selected criteria
|
|
</TableCell>
|
|
</TableRow>
|
|
) : (
|
|
inquiries.map((inq) => (
|
|
<TableRow key={inq.id} className="hover:bg-muted/50">
|
|
<TableCell>
|
|
<div className="font-semibold text-primary">
|
|
{new Date(inq.preferredDate).toLocaleDateString()}
|
|
</div>
|
|
<div className="text-[11px] text-muted-foreground mt-1">
|
|
Submitted: {new Date(inq.createdAt).toLocaleDateString()}
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>
|
|
<div className="font-semibold text-base">{inq.fullName}</div>
|
|
<div className="text-sm">{inq.mobileNumber}</div>
|
|
<div className="text-xs text-muted-foreground">{inq.email || '-'}</div>
|
|
</TableCell>
|
|
<TableCell>
|
|
<div className="font-semibold text-sm truncate">{inq.healthPackage?.name || 'N/A'}</div>
|
|
</TableCell>
|
|
<TableCell>
|
|
<div className="font-medium">
|
|
{inq.age} yrs / {inq.gender}
|
|
</div>
|
|
</TableCell>
|
|
<TooltipProvider>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<div className="text-sm italic line-clamp-3 text-muted-foreground whitespace-pre-wrap cursor-pointer">
|
|
{inq.message || 'No message provided.'}
|
|
</div>
|
|
</TooltipTrigger>
|
|
|
|
<TooltipContent className="max-w-md whitespace-pre-wrap">
|
|
{inq.message || 'No message provided.'}
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</TooltipProvider>
|
|
</TableRow>
|
|
))
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
|
|
{!loading && totalItems > 0 && (
|
|
<div className="flex flex-col sm:flex-row items-center justify-between px-2 py-4 border-t gap-4 mt-2">
|
|
<div className="text-sm text-muted-foreground">
|
|
Showing <span className="font-semibold">{indexOfFirstItem + 1}</span> to{' '}
|
|
<span className="font-semibold">{indexOfLastItem}</span> of{' '}
|
|
<span className="font-semibold">{totalItems}</span> inquiries
|
|
</div>
|
|
<div className="flex items-center gap-6">
|
|
<div className="text-sm font-semibold">
|
|
Page {currentPage} of {totalPages || 1}
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<Button
|
|
variant="outline"
|
|
size="icon"
|
|
className="h-9 w-9"
|
|
onClick={() => setCurrentPage((prev) => Math.max(prev - 1, 1))}
|
|
disabled={currentPage === 1}
|
|
>
|
|
<ChevronLeft className="h-4 w-4" />
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="icon"
|
|
className="h-9 w-9"
|
|
onClick={() => setCurrentPage((prev) => Math.min(prev + 1, totalPages))}
|
|
disabled={currentPage === totalPages || totalPages === 0}
|
|
>
|
|
<ChevronRight className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|