feat: health checkup page
This commit is contained in:
Kailasdevdas
@@ -0,0 +1,273 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user