feat: add dual-date filter
This commit is contained in:
Kailasdevdas
@@ -147,7 +147,7 @@ export const getAppointments = async (req, res) => {
|
||||
const limit = parseInt(req.query.limit) || 10;
|
||||
const skip = (page - 1) * limit;
|
||||
|
||||
const { date, startDate, endDate, search } = req.query;
|
||||
const { date, startDate, endDate, createdDate, createdStartDate, createdEndDate, search } = req.query;
|
||||
|
||||
const where = {};
|
||||
|
||||
@@ -161,11 +161,7 @@ export const getAppointments = async (req, res) => {
|
||||
|
||||
const end = new Date(date);
|
||||
end.setHours(23, 59, 59, 999);
|
||||
|
||||
where.date = {
|
||||
gte: start,
|
||||
lte: end,
|
||||
};
|
||||
where.date = { gte: start, lte: end };
|
||||
}
|
||||
|
||||
if (!hasSingleDate && hasRange) {
|
||||
@@ -188,6 +184,33 @@ export const getAppointments = async (req, res) => {
|
||||
where.date = dateFilter;
|
||||
}
|
||||
|
||||
const hasSingleCreatedDate = createdDate && createdDate.trim() !== '';
|
||||
const hasCreatedRange =
|
||||
(createdStartDate && createdStartDate.trim() !== '') || (createdEndDate && createdEndDate.trim() !== '');
|
||||
|
||||
if (hasSingleCreatedDate) {
|
||||
const start = new Date(createdDate);
|
||||
start.setHours(0, 0, 0, 0);
|
||||
const end = new Date(createdDate);
|
||||
end.setHours(23, 59, 59, 999);
|
||||
where.createdAt = { gte: start, lte: end };
|
||||
}
|
||||
|
||||
if (!hasSingleCreatedDate && hasCreatedRange) {
|
||||
const createdDateFilter = {};
|
||||
if (createdStartDate && createdStartDate.trim() !== '') {
|
||||
const start = new Date(createdStartDate);
|
||||
start.setHours(0, 0, 0, 0);
|
||||
createdDateFilter.gte = start;
|
||||
}
|
||||
if (createdEndDate && createdEndDate.trim() !== '') {
|
||||
const end = new Date(createdEndDate);
|
||||
end.setHours(23, 59, 59, 999);
|
||||
createdDateFilter.lte = end;
|
||||
}
|
||||
where.createdAt = createdDateFilter;
|
||||
}
|
||||
|
||||
if (search && search.trim() !== '') {
|
||||
where.OR = [
|
||||
{ name: { contains: search, mode: 'insensitive' } },
|
||||
|
||||
@@ -431,7 +431,17 @@ export const getPackageBySlug = async (req, res) => {
|
||||
|
||||
export const getAllInquiries = async (req, res) => {
|
||||
try {
|
||||
const { page = 1, limit = 10, filterDate, startDate, endDate } = req.query;
|
||||
const {
|
||||
page = 1,
|
||||
limit = 10,
|
||||
filterDate,
|
||||
startDate,
|
||||
endDate,
|
||||
createdDate,
|
||||
createdStartDate,
|
||||
createdEndDate,
|
||||
search,
|
||||
} = req.query;
|
||||
|
||||
const queryPage = parseInt(page);
|
||||
const queryLimit = parseInt(limit);
|
||||
@@ -439,6 +449,15 @@ export const getAllInquiries = async (req, res) => {
|
||||
|
||||
let where = {};
|
||||
|
||||
if (search && search.trim() !== '') {
|
||||
where.OR = [
|
||||
{ fullName: { contains: search, mode: 'insensitive' } },
|
||||
{ mobileNumber: { contains: search } },
|
||||
{ email: { contains: search, mode: 'insensitive' } },
|
||||
{ healthPackage: { name: { contains: search, mode: 'insensitive' } } },
|
||||
];
|
||||
}
|
||||
|
||||
if (filterDate) {
|
||||
where.preferredDate = {
|
||||
gte: new Date(`${filterDate}T00:00:00.000Z`),
|
||||
@@ -454,6 +473,21 @@ export const getAllInquiries = async (req, res) => {
|
||||
}
|
||||
}
|
||||
|
||||
if (createdDate) {
|
||||
where.createdAt = {
|
||||
gte: new Date(`${createdDate}T00:00:00.000Z`),
|
||||
lte: new Date(`${createdDate}T23:59:59.999Z`),
|
||||
};
|
||||
} else if (createdStartDate || createdEndDate) {
|
||||
where.createdAt = {};
|
||||
if (createdStartDate) {
|
||||
where.createdAt.gte = new Date(`${createdStartDate}T00:00:00.000Z`);
|
||||
}
|
||||
if (createdEndDate) {
|
||||
where.createdAt.lte = new Date(`${createdEndDate}T23:59:59.999Z`);
|
||||
}
|
||||
}
|
||||
|
||||
const [total, inquiries] = await prisma.$transaction([
|
||||
prisma.healthPackageInquiry.count({ where }),
|
||||
prisma.healthPackageInquiry.findMany({
|
||||
|
||||
@@ -6,6 +6,9 @@ export const getAppointmentsApi = async (
|
||||
date = '',
|
||||
startDate = '',
|
||||
endDate = '',
|
||||
createdDate = '',
|
||||
createdStartDate = '',
|
||||
createdEndDate = '',
|
||||
search = ''
|
||||
) => {
|
||||
const params = new URLSearchParams({
|
||||
@@ -14,6 +17,9 @@ export const getAppointmentsApi = async (
|
||||
...(date && { date }),
|
||||
...(startDate && { startDate }),
|
||||
...(endDate && { endDate }),
|
||||
...(createdDate && { createdDate }),
|
||||
...(createdStartDate && { createdStartDate }),
|
||||
...(createdEndDate && { createdEndDate }),
|
||||
...(search && { search }),
|
||||
});
|
||||
const res = await apiClient.get(`/appointments/getall?${params}`);
|
||||
|
||||
@@ -140,7 +140,17 @@ export const deleteCategoryApi = async (id: number) => {
|
||||
}
|
||||
};
|
||||
|
||||
export const getAllInquiriesApi = async (page = 1, limit = 10, filterDate = '', startDate = '', endDate = '') => {
|
||||
export const getAllInquiriesApi = async (
|
||||
page = 1,
|
||||
limit = 10,
|
||||
filterDate = '',
|
||||
startDate = '',
|
||||
endDate = '',
|
||||
createdDate = '',
|
||||
createdStartDate = '',
|
||||
createdEndDate = '',
|
||||
search = ''
|
||||
) => {
|
||||
const params = new URLSearchParams({
|
||||
page: page.toString(),
|
||||
limit: limit.toString(),
|
||||
@@ -149,6 +159,10 @@ export const getAllInquiriesApi = async (page = 1, limit = 10, filterDate = '',
|
||||
if (filterDate) params.append('filterDate', filterDate);
|
||||
if (startDate) params.append('startDate', startDate);
|
||||
if (endDate) params.append('endDate', endDate);
|
||||
if (createdDate) params.append('createdDate', createdDate);
|
||||
if (createdStartDate) params.append('createdStartDate', createdStartDate);
|
||||
if (createdEndDate) params.append('createdEndDate', createdEndDate);
|
||||
if (search) params.append('search', search);
|
||||
|
||||
const res = await apiClient.get(`/health-check/inquiries?${params.toString()}`);
|
||||
return res.data;
|
||||
|
||||
@@ -7,16 +7,24 @@ 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';
|
||||
import { Loader2, RefreshCw, ChevronLeft, ChevronRight, CalendarDays } from 'lucide-react';
|
||||
|
||||
export default function PackageInquiriesTab() {
|
||||
const [inquiries, setInquiries] = useState<HealthInquiry[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const [searchText, setSearchText] = useState('');
|
||||
|
||||
const [dateMode, setDateMode] = useState<'preferred' | 'booked'>('preferred');
|
||||
|
||||
const [filterDate, setFilterDate] = useState('');
|
||||
const [startDate, setStartDate] = useState('');
|
||||
const [endDate, setEndDate] = useState('');
|
||||
|
||||
const [createdDate, setCreatedDate] = useState('');
|
||||
const [createdStartDate, setCreatedStartDate] = useState('');
|
||||
const [createdEndDate, setCreatedEndDate] = useState('');
|
||||
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [itemsPerPage, setItemsPerPage] = useState(10);
|
||||
const [totalItems, setTotalItems] = useState(0);
|
||||
@@ -25,7 +33,17 @@ export default function PackageInquiriesTab() {
|
||||
const fetchInquiries = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await getAllInquiriesApi(currentPage, itemsPerPage, filterDate, startDate, endDate);
|
||||
const res = await getAllInquiriesApi(
|
||||
currentPage,
|
||||
itemsPerPage,
|
||||
filterDate,
|
||||
startDate,
|
||||
endDate,
|
||||
createdDate,
|
||||
createdStartDate,
|
||||
createdEndDate,
|
||||
searchText
|
||||
);
|
||||
setInquiries(res.data || []);
|
||||
setTotalItems(res.pagination?.total || 0);
|
||||
setTotalPages(res.pagination?.totalPages || 1);
|
||||
@@ -34,144 +52,216 @@ export default function PackageInquiriesTab() {
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [currentPage, itemsPerPage, filterDate, startDate, endDate]);
|
||||
}, [
|
||||
currentPage,
|
||||
itemsPerPage,
|
||||
filterDate,
|
||||
startDate,
|
||||
endDate,
|
||||
createdDate,
|
||||
createdStartDate,
|
||||
createdEndDate,
|
||||
searchText,
|
||||
]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchInquiries();
|
||||
}, [fetchInquiries]);
|
||||
|
||||
const handleFilterChange = (setter: React.Dispatch<React.SetStateAction<string>>, value: string) => {
|
||||
setter(value);
|
||||
const handleModeChange = (newMode: 'preferred' | 'booked') => {
|
||||
setDateMode(newMode);
|
||||
setFilterDate('');
|
||||
setStartDate('');
|
||||
setEndDate('');
|
||||
setCreatedDate('');
|
||||
setCreatedStartDate('');
|
||||
setCreatedEndDate('');
|
||||
setCurrentPage(1);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setCurrentPage(1);
|
||||
}, [searchText, filterDate, startDate, endDate, createdDate, createdStartDate, createdEndDate, itemsPerPage]);
|
||||
|
||||
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}>
|
||||
<Card className="shadow-sm">
|
||||
<CardHeader className="flex flex-col gap-4 border-b pb-4 w-full">
|
||||
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-2 w-full">
|
||||
<CardTitle className="text-xl flex items-center gap-2">
|
||||
<span>Package Inquiries</span>
|
||||
</CardTitle>
|
||||
<Button variant="outline" size="sm" onClick={fetchInquiries} disabled={loading} className="text-sm">
|
||||
<RefreshCw className={`mr-2 h-4 w-4 ${loading ? 'animate-spin' : ''}`} />
|
||||
Refresh
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 xl:grid-cols-4 gap-4 bg-muted/20 p-4 rounded-lg border w-full">
|
||||
<div className="flex flex-col gap-1.5 w-full">
|
||||
<label className="text-xs font-bold text-muted-foreground uppercase tracking-wider">Search Inquiry</label>
|
||||
<Input
|
||||
placeholder="Search name, phone, email, or package name..."
|
||||
value={searchText}
|
||||
onChange={(e) => setSearchText(e.target.value)}
|
||||
className="text-base h-10 bg-background w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1.5 w-full">
|
||||
<label className="text-xs font-bold text-muted-foreground uppercase tracking-wider flex items-center gap-1">
|
||||
<CalendarDays className="h-3.5 w-3.5 text-primary" /> Filter Date By
|
||||
</label>
|
||||
<select
|
||||
value={dateMode}
|
||||
onChange={(e) => handleModeChange(e.target.value as 'preferred' | 'booked')}
|
||||
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm font-medium focus:ring-2 focus:ring-primary focus:outline-none"
|
||||
>
|
||||
<option value="preferred">🗓️ Preferred Date</option>
|
||||
<option value="booked">✍️ Booked Date (Created)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="flex items-end gap-2 p-1.5 bg-background rounded-md border border-dashed flex-wrap sm:flex-nowrap w-full">
|
||||
<div className="flex flex-col gap-1 flex-1 min-w-[80px]">
|
||||
<span className="text-[10px] font-bold text-muted-foreground uppercase">Specific Day</span>
|
||||
<Input
|
||||
type="date"
|
||||
value={dateMode === 'preferred' ? filterDate : createdDate}
|
||||
onChange={(e) =>
|
||||
dateMode === 'preferred' ? setFilterDate(e.target.value) : setCreatedDate(e.target.value)
|
||||
}
|
||||
className="text-sm h-8"
|
||||
disabled={dateMode === 'preferred' ? !!startDate || !!endDate : !!createdStartDate || !!createdEndDate}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1 flex-1 min-w-[80px]">
|
||||
<span className="text-[10px] font-bold text-muted-foreground uppercase">From Range</span>
|
||||
<Input
|
||||
type="date"
|
||||
value={dateMode === 'preferred' ? startDate : createdStartDate}
|
||||
onChange={(e) =>
|
||||
dateMode === 'preferred' ? setStartDate(e.target.value) : setCreatedStartDate(e.target.value)
|
||||
}
|
||||
className="text-sm h-8"
|
||||
disabled={dateMode === 'preferred' ? !!filterDate : !!createdDate}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1 flex-1 min-w-[80px]">
|
||||
<span className="text-[10px] font-bold text-muted-foreground uppercase">To Range</span>
|
||||
<Input
|
||||
type="date"
|
||||
value={dateMode === 'preferred' ? endDate : createdEndDate}
|
||||
onChange={(e) =>
|
||||
dateMode === 'preferred' ? setEndDate(e.target.value) : setCreatedEndDate(e.target.value)
|
||||
}
|
||||
className="text-sm h-8"
|
||||
disabled={dateMode === 'preferred' ? !!filterDate : !!createdDate}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1.5 w-full">
|
||||
<label className="text-xs font-bold text-muted-foreground uppercase tracking-wider">Page Sizing</label>
|
||||
<select
|
||||
value={itemsPerPage}
|
||||
onChange={(e) => setItemsPerPage(Number(e.target.value))}
|
||||
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus:ring-2 focus:ring-primary focus:outline-none"
|
||||
>
|
||||
<option value={5}>5 Rows</option>
|
||||
<option value={10}>10 Rows</option>
|
||||
<option value={20}>20 Rows</option>
|
||||
<option value={50}>50 Rows</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0 sm:p-6 sm:pt-0">
|
||||
<CardContent className="p-0 sm:p-6 sm:pt-4">
|
||||
<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">
|
||||
<Table className="w-full min-w-[1100px] 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>
|
||||
<TableHead className="w-[145px] font-bold bg-background text-sm">Preferred Date</TableHead>
|
||||
<TableHead className="w-[145px] font-bold bg-background text-sm">Booked Date</TableHead>
|
||||
<TableHead className="w-[220px] font-bold bg-background text-sm">Patient Details</TableHead>
|
||||
<TableHead className="w-[240px] font-bold bg-background text-sm">Requested Package</TableHead>
|
||||
<TableHead className="w-[120px] font-bold bg-background text-sm">Demographics</TableHead>
|
||||
<TableHead className="w-[230px] font-bold bg-background text-sm">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 colSpan={6} className="text-center py-10">
|
||||
<Loader2 className="h-8 w-8 animate-spin mx-auto text-primary" />
|
||||
</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 colSpan={6} className="text-center text-muted-foreground py-10 text-base">
|
||||
No package inquiries matched your active search filters.
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : (
|
||||
inquiries.map((inq) => (
|
||||
<TableRow key={inq.id} className="hover:bg-muted/50">
|
||||
<TableRow key={inq.id} className="hover:bg-muted/50 transition-colors">
|
||||
<TableCell>
|
||||
<div className="font-semibold text-primary">
|
||||
{new Date(inq.preferredDate).toLocaleDateString()}
|
||||
{inq.preferredDate ? (
|
||||
<div
|
||||
className={`text-sm font-semibold rounded px-1.5 py-0.5 inline-block ${dateMode === 'preferred' ? 'bg-primary/10 text-primary' : 'bg-muted'}`}
|
||||
>
|
||||
{new Date(inq.preferredDate).toLocaleDateString('en-GB')}
|
||||
</div>
|
||||
<div className="text-[11px] text-muted-foreground mt-1">
|
||||
Submitted: {new Date(inq.createdAt).toLocaleDateString()}
|
||||
) : (
|
||||
<span className="text-xs text-muted-foreground italic">Not specified</span>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div
|
||||
className={`text-sm rounded px-1.5 py-0.5 inline-block ${dateMode === 'booked' ? 'bg-sky-500/10 text-sky-600 font-semibold' : 'text-muted-foreground'}`}
|
||||
>
|
||||
{new Date(inq.createdAt).toLocaleDateString('en-GB')}
|
||||
</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>
|
||||
<div className="font-semibold text-base text-gray-900 truncate">{inq.fullName}</div>
|
||||
<div className="text-sm text-gray-700 mt-0.5">{inq.mobileNumber}</div>
|
||||
{inq.email && <div className="text-xs text-muted-foreground truncate">{inq.email}</div>}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="font-semibold text-sm truncate">{inq.healthPackage?.name || 'N/A'}</div>
|
||||
<div className="font-semibold text-sm line-clamp-2 text-gray-800" title={inq.healthPackage?.name}>
|
||||
{inq.healthPackage?.name || 'N/A'}
|
||||
</div>
|
||||
{inq.healthPackage?.category?.name && (
|
||||
<Badge variant="secondary" className="text-[10px] font-normal px-2 py-0 mt-1">
|
||||
{inq.healthPackage.category.name}
|
||||
</Badge>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="font-medium">
|
||||
{inq.age} yrs / {inq.gender}
|
||||
<div className="font-medium text-sm text-gray-800">{inq.age ? `${inq.age} yrs` : '—'}</div>
|
||||
<div className="text-xs text-muted-foreground capitalize mt-0.5">
|
||||
{inq.gender || 'unspecified'}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<div className="text-sm italic line-clamp-3 text-muted-foreground whitespace-pre-wrap cursor-pointer">
|
||||
<div className="text-sm italic line-clamp-3 text-muted-foreground whitespace-pre-wrap cursor-pointer leading-relaxed hover:text-foreground transition-colors">
|
||||
{inq.message || 'No message provided.'}
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
|
||||
<TooltipContent className="max-w-md whitespace-pre-wrap">
|
||||
<TooltipContent className="max-w-md whitespace-pre-wrap p-3 bg-popover text-popover-foreground border shadow-md rounded-md">
|
||||
{inq.message || 'No message provided.'}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
)}
|
||||
@@ -187,10 +277,10 @@ export default function PackageInquiriesTab() {
|
||||
<span className="font-semibold">{totalItems}</span> inquiries
|
||||
</div>
|
||||
<div className="flex items-center gap-6">
|
||||
<div className="text-sm font-semibold">
|
||||
<div className="text-sm font-medium text-gray-700">
|
||||
Page {currentPage} of {totalPages || 1}
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<div className="flex gap-1">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
|
||||
+173
-106
@@ -10,7 +10,7 @@ import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog';
|
||||
|
||||
import { Loader2, Trash, RefreshCw, Download, ChevronLeft, ChevronRight, Eye } from 'lucide-react';
|
||||
import { Loader2, Trash, RefreshCw, Download, ChevronLeft, ChevronRight, Eye, CalendarDays } from 'lucide-react';
|
||||
|
||||
export default function AppointmentPage() {
|
||||
const [appointments, setAppointments] = useState<any[]>([]);
|
||||
@@ -18,9 +18,17 @@ export default function AppointmentPage() {
|
||||
|
||||
const [searchText, setSearchText] = useState('');
|
||||
const [filterDoctor, setFilterDoctor] = useState('');
|
||||
|
||||
const [dateMode, setDateMode] = useState<'scheduled' | 'booked'>('scheduled');
|
||||
|
||||
const [filterDate, setFilterDate] = useState('');
|
||||
const [startDate, setStartDate] = useState('');
|
||||
const [endDate, setEndDate] = useState('');
|
||||
|
||||
const [createdDate, setCreatedDate] = useState('');
|
||||
const [createdStartDate, setCreatedStartDate] = useState('');
|
||||
const [createdEndDate, setCreatedEndDate] = useState('');
|
||||
|
||||
const [viewOpen, setViewOpen] = useState(false);
|
||||
const [viewData, setViewData] = useState<any>(null);
|
||||
|
||||
@@ -32,7 +40,17 @@ export default function AppointmentPage() {
|
||||
const fetchAll = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await getAppointmentsApi(currentPage, itemsPerPage, filterDate, startDate, endDate, searchText);
|
||||
const res = await getAppointmentsApi(
|
||||
currentPage,
|
||||
itemsPerPage,
|
||||
filterDate,
|
||||
startDate,
|
||||
endDate,
|
||||
createdDate,
|
||||
createdStartDate,
|
||||
createdEndDate,
|
||||
searchText
|
||||
);
|
||||
setAppointments(res?.data || []);
|
||||
setTotalPages(res?.pagination?.totalPages || 1);
|
||||
setTotalItems(res?.pagination?.total || 0);
|
||||
@@ -41,7 +59,17 @@ export default function AppointmentPage() {
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [currentPage, itemsPerPage, filterDate, startDate, endDate, searchText]);
|
||||
}, [
|
||||
currentPage,
|
||||
itemsPerPage,
|
||||
filterDate,
|
||||
startDate,
|
||||
endDate,
|
||||
createdDate,
|
||||
createdStartDate,
|
||||
createdEndDate,
|
||||
searchText,
|
||||
]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchAll();
|
||||
@@ -53,9 +81,20 @@ export default function AppointmentPage() {
|
||||
return matchesDoctor;
|
||||
});
|
||||
|
||||
const handleModeChange = (newMode: 'scheduled' | 'booked') => {
|
||||
setDateMode(newMode);
|
||||
setFilterDate('');
|
||||
setStartDate('');
|
||||
setEndDate('');
|
||||
setCreatedDate('');
|
||||
setCreatedStartDate('');
|
||||
setCreatedEndDate('');
|
||||
setCurrentPage(1);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setCurrentPage(1);
|
||||
}, [searchText, filterDoctor, filterDate]);
|
||||
}, [searchText, filterDoctor, filterDate, startDate, endDate, createdDate, createdStartDate, createdEndDate]);
|
||||
|
||||
const indexOfFirstItem = (currentPage - 1) * itemsPerPage;
|
||||
|
||||
@@ -78,7 +117,8 @@ export default function AppointmentPage() {
|
||||
Email: item.email,
|
||||
Doctor: item.doctor?.name,
|
||||
Department: item.department?.name,
|
||||
Date: new Date(item.date).toLocaleDateString(),
|
||||
ScheduledDate: new Date(item.date).toLocaleDateString(),
|
||||
BookedDate: new Date(item.createdAt).toLocaleDateString(),
|
||||
Message: item.message,
|
||||
}));
|
||||
exportToExcel(exportData, 'appointments');
|
||||
@@ -87,85 +127,12 @@ export default function AppointmentPage() {
|
||||
return (
|
||||
<div className="p-6 space-y-6">
|
||||
<div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
|
||||
<h1 className="text-3xl font-bold">Appointments</h1>
|
||||
|
||||
<div className="flex flex-wrap gap-4 items-end">
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-xs font-medium text-muted-foreground">Search</label>
|
||||
<Input
|
||||
placeholder="Search name / phone..."
|
||||
value={searchText}
|
||||
onChange={(e) => {
|
||||
setSearchText(e.target.value);
|
||||
setCurrentPage(1);
|
||||
}}
|
||||
className="w-[220px] text-base"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-xs font-medium text-muted-foreground">Date</label>
|
||||
<Input
|
||||
type="date"
|
||||
value={filterDate}
|
||||
onChange={(e) => {
|
||||
setFilterDate(e.target.value);
|
||||
setCurrentPage(1);
|
||||
}}
|
||||
className="w-[160px] text-base"
|
||||
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) => {
|
||||
setStartDate(e.target.value);
|
||||
setCurrentPage(1);
|
||||
}}
|
||||
className="w-[160px] text-base"
|
||||
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) => {
|
||||
setEndDate(e.target.value);
|
||||
setCurrentPage(1);
|
||||
}}
|
||||
className="w-[160px] text-base"
|
||||
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>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<h1 className="text-3xl font-bold tracking-tight">Appointments</h1>
|
||||
<div className="flex items-center gap-3">
|
||||
<Button variant="outline" onClick={fetchAll} disabled={loading} className="text-base">
|
||||
<RefreshCw className="mr-2 h-5 w-5" />
|
||||
Refresh
|
||||
</Button>
|
||||
|
||||
<Button onClick={handleExport} className="text-base">
|
||||
<Download className="mr-2 h-5 w-5" />
|
||||
Export
|
||||
@@ -173,41 +140,128 @@ export default function AppointmentPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Card className="shadow-sm">
|
||||
<CardContent className="p-4 flex flex-wrap xl:flex-nowrap items-end gap-4">
|
||||
<div className="flex flex-col gap-1.5 flex-1 min-w-[240px]">
|
||||
<label className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
|
||||
Search Target
|
||||
</label>
|
||||
<Input
|
||||
placeholder="Search patient name, phone, or email..."
|
||||
value={searchText}
|
||||
onChange={(e) => setSearchText(e.target.value)}
|
||||
className="text-base h-10"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1.5 w-[180px]">
|
||||
<label className="text-xs font-semibold text-muted-foreground uppercase tracking-wider flex items-center gap-1">
|
||||
<CalendarDays className="h-3.5 w-3.5 text-primary" /> Filter Date By
|
||||
</label>
|
||||
<select
|
||||
value={dateMode}
|
||||
onChange={(e) => handleModeChange(e.target.value as 'scheduled' | 'booked')}
|
||||
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm font-medium focus:ring-2 focus:ring-primary focus:outline-none"
|
||||
>
|
||||
<option value="scheduled">🗓️ Scheduled Date</option>
|
||||
<option value="booked">✍️ Booked (Created At)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="flex items-end gap-2 p-2 bg-muted/40 rounded-md border border-dashed flex-wrap sm:flex-nowrap flex-1 min-w-[320px]">
|
||||
<div className="flex flex-col gap-1 flex-1 min-w-[110px]">
|
||||
<span className="text-[10px] font-bold text-muted-foreground uppercase">Specific Day</span>
|
||||
<Input
|
||||
type="date"
|
||||
value={dateMode === 'scheduled' ? filterDate : createdDate}
|
||||
onChange={(e) =>
|
||||
dateMode === 'scheduled' ? setFilterDate(e.target.value) : setCreatedDate(e.target.value)
|
||||
}
|
||||
className="text-sm h-8 bg-background"
|
||||
disabled={dateMode === 'scheduled' ? !!startDate || !!endDate : !!createdStartDate || !!createdEndDate}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1 flex-1 min-w-[110px]">
|
||||
<span className="text-[10px] font-bold text-muted-foreground uppercase">From Range</span>
|
||||
<Input
|
||||
type="date"
|
||||
value={dateMode === 'scheduled' ? startDate : createdStartDate}
|
||||
onChange={(e) =>
|
||||
dateMode === 'scheduled' ? setStartDate(e.target.value) : setCreatedStartDate(e.target.value)
|
||||
}
|
||||
className="text-sm h-8 bg-background"
|
||||
disabled={dateMode === 'scheduled' ? !!filterDate : !!createdDate}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1 flex-1 min-w-[110px]">
|
||||
<span className="text-[10px] font-bold text-muted-foreground uppercase">To Range</span>
|
||||
<Input
|
||||
type="date"
|
||||
value={dateMode === 'scheduled' ? endDate : createdEndDate}
|
||||
onChange={(e) =>
|
||||
dateMode === 'scheduled' ? setEndDate(e.target.value) : setCreatedEndDate(e.target.value)
|
||||
}
|
||||
className="text-sm h-8 bg-background"
|
||||
disabled={dateMode === 'scheduled' ? !!filterDate : !!createdDate}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1.5 w-[95px]">
|
||||
<label className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">Page Limit</label>
|
||||
<select
|
||||
value={itemsPerPage}
|
||||
onChange={(e) => setItemsPerPage(Number(e.target.value))}
|
||||
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus:ring-2 focus:ring-primary focus:outline-none"
|
||||
>
|
||||
<option value={5}>5 Rows</option>
|
||||
<option value={10}>10 Rows</option>
|
||||
<option value={20}>20 Rows</option>
|
||||
</select>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl">Appointment List</CardTitle>
|
||||
<CardHeader className="px-6 py-4 border-b">
|
||||
<CardTitle className="text-xl flex items-center gap-2">
|
||||
<span>Appointment Registrations</span>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="p-0 sm:p-6 space-y-4">
|
||||
<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">
|
||||
<Table className="w-full min-w-[1100px] table-fixed border-separate border-spacing-0">
|
||||
<TableHeader className="sticky top-0 z-20 bg-background shadow-sm">
|
||||
<TableRow>
|
||||
<TableHead className="w-[60px] bg-background font-bold text-sm">ID</TableHead>
|
||||
<TableHead className="w-[200px] bg-background font-bold text-sm">Patient</TableHead>
|
||||
<TableHead className="w-[180px] bg-background font-bold text-sm">Doctor</TableHead>
|
||||
<TableHead className="w-[150px] bg-background font-bold text-sm">Date</TableHead>
|
||||
<TableHead className="w-[250px] bg-background font-bold text-sm">Message</TableHead>
|
||||
<TableHead className="w-[120px] bg-background font-bold text-right text-sm">Actions</TableHead>
|
||||
<TableHead className="w-[140px] bg-background font-bold text-sm">Scheduled Date</TableHead>
|
||||
<TableHead className="w-[140px] bg-background font-bold text-sm">Booked Date</TableHead>
|
||||
<TableHead className="w-[200px] bg-background font-bold text-sm">Message</TableHead>
|
||||
<TableHead className="w-[100px] bg-background font-bold text-right text-sm">Actions</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
|
||||
<TableBody>
|
||||
{loading ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={6} className="text-center py-10">
|
||||
<Loader2 className="h-8 w-8 animate-spin mx-auto" />
|
||||
<TableCell colSpan={7} className="text-center py-10">
|
||||
<Loader2 className="h-8 w-8 animate-spin mx-auto text-primary" />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : filteredAppointments.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={6} className="text-center text-muted-foreground py-10 text-base">
|
||||
No appointments found
|
||||
<TableCell colSpan={7} className="text-center text-muted-foreground py-10 text-base">
|
||||
No appointments found matching your selected criteria.
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : (
|
||||
filteredAppointments.map((item) => (
|
||||
<TableRow key={item.id} className="hover:bg-muted/50">
|
||||
<TableRow key={item.id} className="hover:bg-muted/50 transition-colors">
|
||||
<TableCell className="font-mono text-xs">{item.id}</TableCell>
|
||||
<TableCell>
|
||||
<div className="font-semibold text-base truncate">{item.name}</div>
|
||||
@@ -218,13 +272,24 @@ export default function AppointmentPage() {
|
||||
<div className="text-[10px] text-muted-foreground truncate">{item.department?.name}</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="text-sm">{new Date(item.date).toLocaleDateString()}</div>
|
||||
<div
|
||||
className={`text-sm font-semibold rounded px-1.5 py-0.5 inline-block ${dateMode === 'scheduled' ? 'bg-primary/10 text-primary' : 'bg-muted'}`}
|
||||
>
|
||||
{new Date(item.date).toLocaleDateString()}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div
|
||||
className={`text-sm rounded px-1.5 py-0.5 inline-block ${dateMode === 'booked' ? 'bg-sky-500/10 text-sky-600 font-semibold' : 'text-muted-foreground'}`}
|
||||
>
|
||||
{new Date(item.createdAt).toLocaleDateString()}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="text-sm line-clamp-2 text-muted-foreground italic">{item.message || '-'}</div>
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<div className="flex justify-end gap-2">
|
||||
<div className="flex justify-end gap-1">
|
||||
<Button size="icon" variant="ghost" className="h-9 w-9" onClick={() => openView(item)}>
|
||||
<Eye className="h-4 w-4" />
|
||||
</Button>
|
||||
@@ -246,34 +311,34 @@ export default function AppointmentPage() {
|
||||
</div>
|
||||
|
||||
{!loading && totalItems > 0 && (
|
||||
<div className="flex items-center justify-between px-2 py-6 border-t">
|
||||
<div className="text-base text-muted-foreground">
|
||||
<div className="flex items-center justify-between px-2 py-4 border-t">
|
||||
<div className="text-sm text-muted-foreground">
|
||||
Showing <span className="font-semibold">{indexOfFirstItem + 1}</span> to{' '}
|
||||
<span className="font-semibold">{Math.min(currentPage * itemsPerPage, totalItems)}</span> of{' '}
|
||||
<span className="font-semibold">{totalItems}</span>
|
||||
<span className="font-semibold">{totalItems}</span> entries
|
||||
</div>
|
||||
<div className="flex items-center gap-6">
|
||||
<div className="text-base font-semibold">
|
||||
<div className="text-sm font-medium">
|
||||
Page {currentPage} of {totalPages}
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<div className="flex gap-1">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="h-10 w-10"
|
||||
className="h-9 w-9"
|
||||
onClick={() => setCurrentPage((prev) => Math.max(prev - 1, 1))}
|
||||
disabled={currentPage === 1}
|
||||
>
|
||||
<ChevronLeft className="h-5 w-5" />
|
||||
<ChevronLeft className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="h-10 w-10"
|
||||
className="h-9 w-9"
|
||||
onClick={() => setCurrentPage((prev) => Math.min(prev + 1, totalPages))}
|
||||
disabled={currentPage === totalPages || totalPages === 0}
|
||||
>
|
||||
<ChevronRight className="h-5 w-5" />
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -298,10 +363,12 @@ export default function AppointmentPage() {
|
||||
<p className="text-sm">{viewData.email || 'No email provided'}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs uppercase font-bold text-muted-foreground">Appointment Date</p>
|
||||
<p className="text-base font-semibold">{new Date(viewData.date).toLocaleDateString()}</p>
|
||||
<p className="text-[10px] text-muted-foreground">
|
||||
Booked on: {new Date(viewData.createdAt).toLocaleString()}
|
||||
<p className="text-xs uppercase font-bold text-muted-foreground">Key Datestamps</p>
|
||||
<p className="text-base font-semibold text-primary">
|
||||
Scheduled: {new Date(viewData.date).toLocaleDateString()}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Record Created: {new Date(viewData.createdAt).toLocaleString()}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user