feat: add dual-date filter

frontend/src/pages/Appointment.tsx

@@ -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>