fix/frontend-ui #6
@@ -13,11 +13,26 @@ import {
|
||||
} from "@/components/ui/table";
|
||||
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
|
||||
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 } from "lucide-react";
|
||||
import {
|
||||
Loader2,
|
||||
Trash,
|
||||
RefreshCw,
|
||||
Download,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
Eye,
|
||||
BookOpen,
|
||||
} from "lucide-react";
|
||||
|
||||
export default function AcademicsPage() {
|
||||
const [records, setRecords] = useState<any[]>([]);
|
||||
@@ -25,6 +40,12 @@ export default function AcademicsPage() {
|
||||
|
||||
const [searchText, setSearchText] = useState("");
|
||||
|
||||
const [viewOpen, setViewOpen] = useState(false);
|
||||
const [viewData, setViewData] = useState<any>(null);
|
||||
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const itemsPerPage = 10;
|
||||
|
||||
const fetchAll = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
@@ -51,6 +72,20 @@ export default function AcademicsPage() {
|
||||
);
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
setCurrentPage(1);
|
||||
}, [searchText]);
|
||||
|
||||
const totalPages = Math.ceil(filteredRecords.length / itemsPerPage);
|
||||
const indexOfLastItem = currentPage * itemsPerPage;
|
||||
const indexOfFirstItem = indexOfLastItem - itemsPerPage;
|
||||
const currentItems = filteredRecords.slice(indexOfFirstItem, indexOfLastItem);
|
||||
|
||||
function openView(item: any) {
|
||||
setViewData(item);
|
||||
setViewOpen(true);
|
||||
}
|
||||
|
||||
async function handleDelete(id: number) {
|
||||
if (!confirm("Delete record?")) return;
|
||||
await deleteAcademicsApi(id);
|
||||
@@ -74,24 +109,29 @@ export default function AcademicsPage() {
|
||||
|
||||
return (
|
||||
<div className="p-6 space-y-6">
|
||||
<div className="flex justify-between items-center gap-3 flex-wrap">
|
||||
<h1 className="text-2xl font-bold">Academics & Research</h1>
|
||||
<div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
|
||||
<h1 className="text-3xl font-bold">Academics & Research</h1>
|
||||
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Input
|
||||
placeholder="Search name / phone / email / subject..."
|
||||
placeholder="Search name / course / email..."
|
||||
value={searchText}
|
||||
onChange={(e) => setSearchText(e.target.value)}
|
||||
className="w-[260px]"
|
||||
className="w-[280px] text-base"
|
||||
/>
|
||||
|
||||
<Button variant="outline" onClick={fetchAll} disabled={loading}>
|
||||
<RefreshCw className="mr-2 h-4 w-4" />
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={fetchAll}
|
||||
disabled={loading}
|
||||
className="text-base"
|
||||
>
|
||||
<RefreshCw className="mr-2 h-5 w-5" />
|
||||
Refresh
|
||||
</Button>
|
||||
|
||||
<Button variant="outline" onClick={handleExport}>
|
||||
<Download className="mr-2 h-4 w-4" />
|
||||
<Button onClick={handleExport} className="text-base">
|
||||
<Download className="mr-2 h-5 w-5" />
|
||||
Export
|
||||
</Button>
|
||||
</div>
|
||||
@@ -99,65 +139,108 @@ export default function AcademicsPage() {
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Academics Records</CardTitle>
|
||||
<CardTitle className="text-xl">Academic Records</CardTitle>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent>
|
||||
<div className="overflow-x-auto">
|
||||
<Table className="min-w-[1000px]">
|
||||
<TableHeader>
|
||||
<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-[1100px] table-fixed border-separate border-spacing-0">
|
||||
<TableHeader className="sticky top-0 z-20 bg-background shadow-sm">
|
||||
<TableRow>
|
||||
<TableHead>ID</TableHead>
|
||||
<TableHead>Name</TableHead>
|
||||
<TableHead>Phone</TableHead>
|
||||
<TableHead>Email</TableHead>
|
||||
<TableHead>Course</TableHead>
|
||||
<TableHead>Subject</TableHead>
|
||||
<TableHead>Message</TableHead>
|
||||
<TableHead>Date</TableHead>
|
||||
<TableHead>Actions</TableHead>
|
||||
<TableHead className="w-[60px] bg-background font-bold text-sm">
|
||||
ID
|
||||
</TableHead>
|
||||
<TableHead className="w-[220px] bg-background font-bold text-sm">
|
||||
Full Name
|
||||
</TableHead>
|
||||
<TableHead className="w-[180px] bg-background font-bold text-sm">
|
||||
Course
|
||||
</TableHead>
|
||||
<TableHead className="w-[180px] bg-background font-bold text-sm">
|
||||
Subject
|
||||
</TableHead>
|
||||
<TableHead className="w-[140px] bg-background font-bold text-sm">
|
||||
Applied Date
|
||||
</TableHead>
|
||||
<TableHead className="w-[220px] bg-background font-bold text-sm">
|
||||
Message
|
||||
</TableHead>
|
||||
<TableHead className="w-[120px] bg-background font-bold text-right text-sm">
|
||||
Actions
|
||||
</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
|
||||
<TableBody>
|
||||
{loading ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={9} className="text-center">
|
||||
<Loader2 className="h-6 w-6 animate-spin mx-auto" />
|
||||
<TableCell colSpan={7} className="text-center py-10">
|
||||
<Loader2 className="h-8 w-8 animate-spin mx-auto" />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : filteredRecords.length === 0 ? (
|
||||
) : currentItems.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={9} className="text-center">
|
||||
<TableCell
|
||||
colSpan={7}
|
||||
className="text-center text-muted-foreground py-10 text-base"
|
||||
>
|
||||
No records found
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : (
|
||||
filteredRecords.map((item) => (
|
||||
<TableRow key={item.id}>
|
||||
<TableCell>{item.id}</TableCell>
|
||||
<TableCell>{item.fullName}</TableCell>
|
||||
<TableCell>{item.number}</TableCell>
|
||||
<TableCell>{item.emailId}</TableCell>
|
||||
|
||||
<TableCell>{item.courseName}</TableCell>
|
||||
<TableCell>{item.subject}</TableCell>
|
||||
|
||||
<TableCell className="max-w-[250px] whitespace-normal">
|
||||
{item.message}
|
||||
currentItems.map((item) => (
|
||||
<TableRow key={item.id} className="hover:bg-muted/50">
|
||||
<TableCell className="font-mono text-xs">
|
||||
{item.id}
|
||||
</TableCell>
|
||||
|
||||
<TableCell>
|
||||
<div className="font-semibold text-base truncate">
|
||||
{item.fullName}
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground truncate">
|
||||
{item.emailId}
|
||||
</div>
|
||||
<div className="text-[11px] font-medium">
|
||||
{item.number}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="text-sm font-medium line-clamp-2">
|
||||
{item.courseName || "-"}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="text-sm line-clamp-2">
|
||||
{item.subject || "-"}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="text-sm">
|
||||
{new Date(item.createdAt).toLocaleDateString()}
|
||||
</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">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="destructive"
|
||||
onClick={() => handleDelete(item.id)}>
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
className="h-9 w-9"
|
||||
onClick={() => openView(item)}
|
||||
>
|
||||
<Eye className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
className="h-9 w-9 text-destructive hover:text-destructive hover:bg-destructive/10"
|
||||
onClick={() => handleDelete(item.id)}
|
||||
>
|
||||
<Trash className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
@@ -165,8 +248,117 @@ export default function AcademicsPage() {
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
{!loading && filteredRecords.length > 0 && (
|
||||
<div className="flex items-center justify-between px-2 py-6 border-t">
|
||||
<div className="text-base text-muted-foreground">
|
||||
Showing{" "}
|
||||
<span className="font-semibold">{indexOfFirstItem + 1}</span> to{" "}
|
||||
<span className="font-semibold">
|
||||
{Math.min(indexOfLastItem, filteredRecords.length)}
|
||||
</span>{" "}
|
||||
of{" "}
|
||||
<span className="font-semibold">{filteredRecords.length}</span>{" "}
|
||||
records
|
||||
</div>
|
||||
<div className="flex items-center gap-6">
|
||||
<div className="text-base font-semibold">
|
||||
Page {currentPage} of {totalPages}
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="h-10 w-10"
|
||||
onClick={() =>
|
||||
setCurrentPage((prev) => Math.max(prev - 1, 1))
|
||||
}
|
||||
disabled={currentPage === 1}
|
||||
>
|
||||
<ChevronLeft className="h-5 w-5" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="h-10 w-10"
|
||||
onClick={() =>
|
||||
setCurrentPage((prev) => Math.min(prev + 1, totalPages))
|
||||
}
|
||||
disabled={currentPage === totalPages || totalPages === 0}
|
||||
>
|
||||
<ChevronRight className="h-5 w-5" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Dialog open={viewOpen} onOpenChange={setViewOpen}>
|
||||
<DialogContent className="w-full !max-w-3xl max-h-[85vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-2xl border-b pb-2 flex items-center gap-2">
|
||||
<BookOpen className="h-6 w-6" /> Academic Detail View
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
{viewData && (
|
||||
<div className="space-y-6 py-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<p className="text-xs uppercase font-bold text-muted-foreground">
|
||||
Applicant Information
|
||||
</p>
|
||||
<p className="text-lg font-bold text-primary">
|
||||
{viewData.fullName}
|
||||
</p>
|
||||
<p className="text-sm font-medium">{viewData.emailId}</p>
|
||||
<p className="text-sm">{viewData.number}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs uppercase font-bold text-muted-foreground">
|
||||
Course & Subject
|
||||
</p>
|
||||
<p className="text-base font-semibold">
|
||||
{viewData.courseName || "N/A"}
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{viewData.subject}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs uppercase font-bold text-muted-foreground">
|
||||
Submission Date
|
||||
</p>
|
||||
<p className="text-sm">
|
||||
{new Date(viewData.createdAt).toLocaleString()}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<div className="p-4 bg-muted/30 rounded-lg border">
|
||||
<p className="text-xs uppercase font-bold text-muted-foreground mb-2">
|
||||
Message / Research Inquiry
|
||||
</p>
|
||||
<p className="text-sm leading-relaxed whitespace-pre-wrap italic">
|
||||
{viewData.message || "No message content provided."}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<DialogFooter>
|
||||
<Button
|
||||
onClick={() => setViewOpen(false)}
|
||||
className="w-full md:w-auto"
|
||||
>
|
||||
Close
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import {useState, useEffect, useCallback} from "react";
|
||||
import { useState, useEffect, useCallback } from "react";
|
||||
|
||||
import {getAppointmentsApi, deleteAppointmentApi} from "@/api/appointment";
|
||||
import {exportToExcel} from "@/utils/exportToExcel";
|
||||
import { getAppointmentsApi, deleteAppointmentApi } from "@/api/appointment";
|
||||
import { exportToExcel } from "@/utils/exportToExcel";
|
||||
|
||||
import {
|
||||
Table,
|
||||
@@ -12,12 +12,26 @@ import {
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
|
||||
import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogFooter,
|
||||
} from "@/components/ui/dialog";
|
||||
|
||||
import {Button} from "@/components/ui/button";
|
||||
import {Input} from "@/components/ui/input";
|
||||
|
||||
import {Loader2, Trash, RefreshCw, Download} from "lucide-react";
|
||||
import {
|
||||
Loader2,
|
||||
Trash,
|
||||
RefreshCw,
|
||||
Download,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
Eye,
|
||||
} from "lucide-react";
|
||||
|
||||
export default function AppointmentPage() {
|
||||
const [appointments, setAppointments] = useState<any[]>([]);
|
||||
@@ -25,9 +39,14 @@ export default function AppointmentPage() {
|
||||
|
||||
const [searchText, setSearchText] = useState("");
|
||||
const [filterDoctor, setFilterDoctor] = useState("");
|
||||
const [filterDepartment, setFilterDepartment] = useState("");
|
||||
const [filterDate, setFilterDate] = useState("");
|
||||
|
||||
const [viewOpen, setViewOpen] = useState(false);
|
||||
const [viewData, setViewData] = useState<any>(null);
|
||||
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const itemsPerPage = 10;
|
||||
|
||||
const fetchAll = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
@@ -54,19 +73,30 @@ export default function AppointmentPage() {
|
||||
? item.doctor?.name?.toLowerCase().includes(filterDoctor.toLowerCase())
|
||||
: true;
|
||||
|
||||
const matchesDepartment = filterDepartment
|
||||
? item.department?.name
|
||||
?.toLowerCase()
|
||||
.includes(filterDepartment.toLowerCase())
|
||||
: true;
|
||||
|
||||
const matchesDate = filterDate
|
||||
? new Date(item.date).toISOString().split("T")[0] === filterDate
|
||||
: true;
|
||||
|
||||
return matchesSearch && matchesDoctor && matchesDepartment && matchesDate;
|
||||
return matchesSearch && matchesDoctor && matchesDate;
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
setCurrentPage(1);
|
||||
}, [searchText, filterDoctor, filterDate]);
|
||||
|
||||
const totalPages = Math.ceil(filteredAppointments.length / itemsPerPage);
|
||||
const indexOfLastItem = currentPage * itemsPerPage;
|
||||
const indexOfFirstItem = indexOfLastItem - itemsPerPage;
|
||||
const currentItems = filteredAppointments.slice(
|
||||
indexOfFirstItem,
|
||||
indexOfLastItem,
|
||||
);
|
||||
|
||||
function openView(item: any) {
|
||||
setViewData(item);
|
||||
setViewOpen(true);
|
||||
}
|
||||
|
||||
async function handleDelete(id: number) {
|
||||
if (!confirm("Delete appointment?")) return;
|
||||
await deleteAppointmentApi(id);
|
||||
@@ -84,51 +114,41 @@ export default function AppointmentPage() {
|
||||
Date: new Date(item.date).toLocaleDateString(),
|
||||
Message: item.message,
|
||||
}));
|
||||
|
||||
exportToExcel(exportData, "appointments");
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="p-6 space-y-6">
|
||||
<div className="flex justify-between items-center gap-3 flex-wrap">
|
||||
<h1 className="text-2xl font-bold">Appointments</h1>
|
||||
<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-2">
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Input
|
||||
placeholder="Search name / phone / email..."
|
||||
placeholder="Search name / phone..."
|
||||
value={searchText}
|
||||
onChange={(e) => setSearchText(e.target.value)}
|
||||
className="w-[220px]"
|
||||
/>
|
||||
|
||||
<Input
|
||||
placeholder="Filter Doctor"
|
||||
value={filterDoctor}
|
||||
onChange={(e) => setFilterDoctor(e.target.value)}
|
||||
className="w-[180px]"
|
||||
/>
|
||||
|
||||
<Input
|
||||
placeholder="Filter Department"
|
||||
value={filterDepartment}
|
||||
onChange={(e) => setFilterDepartment(e.target.value)}
|
||||
className="w-[200px]"
|
||||
className="w-[220px] text-base"
|
||||
/>
|
||||
|
||||
<Input
|
||||
type="date"
|
||||
value={filterDate}
|
||||
onChange={(e) => setFilterDate(e.target.value)}
|
||||
className="w-[180px]"
|
||||
className="w-[160px] text-base"
|
||||
/>
|
||||
|
||||
<Button variant="outline" onClick={fetchAll} disabled={loading}>
|
||||
<RefreshCw className="mr-2 h-4 w-4" />
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={fetchAll}
|
||||
disabled={loading}
|
||||
className="text-base"
|
||||
>
|
||||
<RefreshCw className="mr-2 h-5 w-5" />
|
||||
Refresh
|
||||
</Button>
|
||||
|
||||
<Button variant="outline" onClick={handleExport}>
|
||||
<Download className="mr-2 h-4 w-4" />
|
||||
<Button onClick={handleExport} className="text-base">
|
||||
<Download className="mr-2 h-5 w-5" />
|
||||
Export
|
||||
</Button>
|
||||
</div>
|
||||
@@ -136,72 +156,102 @@ export default function AppointmentPage() {
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Appointment List</CardTitle>
|
||||
<CardTitle className="text-xl">Appointment List</CardTitle>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent>
|
||||
<div className="overflow-x-auto">
|
||||
<Table className="min-w-[700px]">
|
||||
<TableHeader>
|
||||
<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">
|
||||
<TableHeader className="sticky top-0 z-20 bg-background shadow-sm">
|
||||
<TableRow>
|
||||
<TableHead>ID</TableHead>
|
||||
<TableHead>Name</TableHead>
|
||||
<TableHead>Phone</TableHead>
|
||||
<TableHead>Email</TableHead>
|
||||
<TableHead>Doctor</TableHead>
|
||||
<TableHead>Department</TableHead>
|
||||
<TableHead>Appointment Date</TableHead>
|
||||
<TableHead>Message</TableHead>
|
||||
<TableHead>Generated on</TableHead>
|
||||
|
||||
<TableHead>Actions</TableHead>
|
||||
<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>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
|
||||
<TableBody>
|
||||
{loading ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={9} className="text-center">
|
||||
<Loader2 className="h-6 w-6 animate-spin mx-auto" />
|
||||
<TableCell colSpan={6} className="text-center py-10">
|
||||
<Loader2 className="h-8 w-8 animate-spin mx-auto" />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : filteredAppointments.length === 0 ? (
|
||||
) : currentItems.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={9} className="text-center">
|
||||
<TableCell
|
||||
colSpan={6}
|
||||
className="text-center text-muted-foreground py-10 text-base"
|
||||
>
|
||||
No appointments found
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : (
|
||||
filteredAppointments.map((item) => (
|
||||
<TableRow key={item.id}>
|
||||
<TableCell>{item.id}</TableCell>
|
||||
<TableCell>{item.name}</TableCell>
|
||||
<TableCell>{item.mobileNumber}</TableCell>
|
||||
<TableCell>{item.email}</TableCell>
|
||||
<TableCell>{item.doctor?.name}</TableCell>
|
||||
<TableCell>{item.department?.name}</TableCell>
|
||||
|
||||
{/* ✅ DATE ONLY */}
|
||||
currentItems.map((item) => (
|
||||
<TableRow key={item.id} className="hover:bg-muted/50">
|
||||
<TableCell className="font-mono text-xs">
|
||||
{item.id}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="font-semibold text-base truncate">
|
||||
{item.name}
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
{item.mobileNumber}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="text-sm font-medium">
|
||||
{item.doctor?.name || "-"}
|
||||
</div>
|
||||
<div className="text-[10px] text-muted-foreground truncate">
|
||||
{item.department?.name}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="text-sm">
|
||||
{new Date(item.date).toLocaleDateString()}
|
||||
</TableCell>
|
||||
|
||||
<TableCell className="max-w-[250px] whitespace-normal">
|
||||
{item.message}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{" "}
|
||||
{new Date(item.createdAt).toLocaleDateString()}
|
||||
<div className="text-sm line-clamp-2 text-muted-foreground italic">
|
||||
{item.message || "-"}
|
||||
</div>
|
||||
</TableCell>
|
||||
|
||||
<TableCell>
|
||||
<TableCell className="text-right">
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="destructive"
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
className="h-9 w-9"
|
||||
onClick={() => openView(item)}
|
||||
>
|
||||
<Eye className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
className="h-9 w-9 text-destructive hover:text-destructive hover:bg-destructive/10"
|
||||
onClick={() => handleDelete(item.id)}
|
||||
>
|
||||
<Trash className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
@@ -209,8 +259,123 @@ export default function AppointmentPage() {
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
{!loading && filteredAppointments.length > 0 && (
|
||||
<div className="flex items-center justify-between px-2 py-6 border-t">
|
||||
<div className="text-base text-muted-foreground">
|
||||
Showing{" "}
|
||||
<span className="font-semibold">{indexOfFirstItem + 1}</span> to{" "}
|
||||
<span className="font-semibold">
|
||||
{Math.min(indexOfLastItem, filteredAppointments.length)}
|
||||
</span>{" "}
|
||||
of{" "}
|
||||
<span className="font-semibold">
|
||||
{filteredAppointments.length}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-6">
|
||||
<div className="text-base font-semibold">
|
||||
Page {currentPage} of {totalPages}
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="h-10 w-10"
|
||||
onClick={() =>
|
||||
setCurrentPage((prev) => Math.max(prev - 1, 1))
|
||||
}
|
||||
disabled={currentPage === 1}
|
||||
>
|
||||
<ChevronLeft className="h-5 w-5" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="h-10 w-10"
|
||||
onClick={() =>
|
||||
setCurrentPage((prev) => Math.min(prev + 1, totalPages))
|
||||
}
|
||||
disabled={currentPage === totalPages || totalPages === 0}
|
||||
>
|
||||
<ChevronRight className="h-5 w-5" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Dialog open={viewOpen} onOpenChange={setViewOpen}>
|
||||
<DialogContent className="w-full !max-w-3xl max-h-[85vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-2xl border-b pb-2">
|
||||
Appointment Details
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
{viewData && (
|
||||
<div className="space-y-6 py-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<p className="text-xs uppercase font-bold text-muted-foreground">
|
||||
Patient Information
|
||||
</p>
|
||||
<p className="text-lg font-bold text-primary">
|
||||
{viewData.name}
|
||||
</p>
|
||||
<p className="text-sm">{viewData.mobileNumber}</p>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<p className="text-xs uppercase font-bold text-muted-foreground">
|
||||
Doctor / Department
|
||||
</p>
|
||||
<p className="text-base font-bold">
|
||||
{viewData.doctor?.name || "Not Assigned"}
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{viewData.department?.name || "General"}
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-4 bg-muted/30 rounded-lg">
|
||||
<p className="text-xs uppercase font-bold text-muted-foreground mb-2">
|
||||
Message from Patient
|
||||
</p>
|
||||
<p className="text-sm italic leading-relaxed whitespace-pre-wrap">
|
||||
{viewData.message || "No message provided."}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<DialogFooter>
|
||||
<Button
|
||||
onClick={() => setViewOpen(false)}
|
||||
className="w-full md:w-auto"
|
||||
>
|
||||
Close
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
+190
-62
@@ -1,7 +1,6 @@
|
||||
import { useState, useEffect, useCallback } from "react";
|
||||
|
||||
import { getCareersApi, deleteCareerApi } from "@/api/career";
|
||||
|
||||
import apiClient from "@/api/client";
|
||||
|
||||
import {
|
||||
@@ -15,7 +14,6 @@ import {
|
||||
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
@@ -25,8 +23,17 @@ import {
|
||||
} from "@/components/ui/dialog";
|
||||
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
|
||||
import { Loader2, Plus, Pencil, Trash, RefreshCw } from "lucide-react";
|
||||
import {
|
||||
Loader2,
|
||||
Plus,
|
||||
Pencil,
|
||||
Trash,
|
||||
RefreshCw,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
} from "lucide-react";
|
||||
|
||||
export default function CareerPage() {
|
||||
const [careers, setCareers] = useState<any[]>([]);
|
||||
@@ -37,6 +44,9 @@ export default function CareerPage() {
|
||||
|
||||
const [searchText, setSearchText] = useState("");
|
||||
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const itemsPerPage = 10;
|
||||
|
||||
const [form, setForm] = useState({
|
||||
post: "",
|
||||
designation: "",
|
||||
@@ -63,10 +73,21 @@ export default function CareerPage() {
|
||||
fetchAll();
|
||||
}, [fetchAll]);
|
||||
|
||||
const filteredCareers = careers.filter((item) =>
|
||||
item.post?.toLowerCase().includes(searchText.toLowerCase()),
|
||||
const filteredCareers = careers.filter(
|
||||
(item) =>
|
||||
item.post?.toLowerCase().includes(searchText.toLowerCase()) ||
|
||||
item.designation?.toLowerCase().includes(searchText.toLowerCase()),
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
setCurrentPage(1);
|
||||
}, [searchText]);
|
||||
|
||||
const totalPages = Math.ceil(filteredCareers.length / itemsPerPage);
|
||||
const indexOfLastItem = currentPage * itemsPerPage;
|
||||
const indexOfFirstItem = indexOfLastItem - itemsPerPage;
|
||||
const currentItems = filteredCareers.slice(indexOfFirstItem, indexOfLastItem);
|
||||
|
||||
function handleChange(e: any) {
|
||||
setForm({ ...form, [e.target.name]: e.target.value });
|
||||
}
|
||||
@@ -87,7 +108,6 @@ export default function CareerPage() {
|
||||
|
||||
function openEdit(item: any) {
|
||||
setEditing(item);
|
||||
|
||||
setForm({
|
||||
post: item.post || "",
|
||||
designation: item.designation || "",
|
||||
@@ -97,7 +117,6 @@ export default function CareerPage() {
|
||||
number: item.number || "",
|
||||
status: item.status || "new",
|
||||
});
|
||||
|
||||
setOpenModal(true);
|
||||
}
|
||||
|
||||
@@ -108,7 +127,6 @@ export default function CareerPage() {
|
||||
} else {
|
||||
await apiClient.post("/careers", form);
|
||||
}
|
||||
|
||||
setOpenModal(false);
|
||||
fetchAll();
|
||||
} catch (err) {
|
||||
@@ -124,24 +142,29 @@ export default function CareerPage() {
|
||||
|
||||
return (
|
||||
<div className="p-6 space-y-6">
|
||||
<div className="flex justify-between items-center gap-3 flex-wrap">
|
||||
<h1 className="text-2xl font-bold">Careers</h1>
|
||||
<div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
|
||||
<h1 className="text-3xl font-bold">Careers</h1>
|
||||
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Input
|
||||
placeholder="Search career..."
|
||||
placeholder="Search post / designation..."
|
||||
value={searchText}
|
||||
onChange={(e) => setSearchText(e.target.value)}
|
||||
className="w-[220px]"
|
||||
className="w-[250px] text-base"
|
||||
/>
|
||||
|
||||
<Button variant="outline" onClick={fetchAll} disabled={loading}>
|
||||
<RefreshCw className="mr-2 h-4 w-4" />
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={fetchAll}
|
||||
disabled={loading}
|
||||
className="text-base"
|
||||
>
|
||||
<RefreshCw className="mr-2 h-5 w-5" />
|
||||
Refresh
|
||||
</Button>
|
||||
|
||||
<Button onClick={openAdd}>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
<Button onClick={openAdd} className="text-base">
|
||||
<Plus className="mr-2 h-5 w-5" />
|
||||
Add Career
|
||||
</Button>
|
||||
</div>
|
||||
@@ -149,67 +172,113 @@ export default function CareerPage() {
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Career List</CardTitle>
|
||||
<CardTitle className="text-xl">Career Opportunities</CardTitle>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent>
|
||||
<div className="overflow-x-auto">
|
||||
<Table className="min-w-[900px]">
|
||||
<TableHeader>
|
||||
<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">
|
||||
<TableHeader className="sticky top-0 z-20 bg-background shadow-sm">
|
||||
<TableRow>
|
||||
<TableHead>ID</TableHead>
|
||||
<TableHead>Post</TableHead>
|
||||
<TableHead>Designation</TableHead>
|
||||
<TableHead>Qualification</TableHead>
|
||||
<TableHead>Experience</TableHead>
|
||||
<TableHead>Email</TableHead>
|
||||
<TableHead>Phone</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
<TableHead>Actions</TableHead>
|
||||
<TableHead className="w-[60px] bg-background font-bold text-sm">
|
||||
ID
|
||||
</TableHead>
|
||||
<TableHead className="w-[200px] bg-background font-bold text-sm">
|
||||
Post & Designation
|
||||
</TableHead>
|
||||
<TableHead className="w-[200px] bg-background font-bold text-sm">
|
||||
Qualification
|
||||
</TableHead>
|
||||
<TableHead className="w-[120px] bg-background font-bold text-sm">
|
||||
Experience
|
||||
</TableHead>
|
||||
<TableHead className="w-[200px] bg-background font-bold text-sm">
|
||||
Contact Info
|
||||
</TableHead>
|
||||
<TableHead className="w-[100px] bg-background font-bold text-sm">
|
||||
Status
|
||||
</TableHead>
|
||||
<TableHead className="w-[120px] bg-background font-bold text-right text-sm">
|
||||
Actions
|
||||
</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
|
||||
<TableBody>
|
||||
{loading ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={9} className="text-center">
|
||||
<Loader2 className="h-6 w-6 animate-spin mx-auto" />
|
||||
<TableCell colSpan={7} className="text-center py-10">
|
||||
<Loader2 className="h-8 w-8 animate-spin mx-auto" />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : filteredCareers.length === 0 ? (
|
||||
) : currentItems.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={9} className="text-center">
|
||||
<TableCell
|
||||
colSpan={7}
|
||||
className="text-center text-muted-foreground py-10 text-base"
|
||||
>
|
||||
No careers found
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : (
|
||||
filteredCareers.map((item) => (
|
||||
<TableRow key={item.id}>
|
||||
<TableCell>{item.id}</TableCell>
|
||||
<TableCell>{item.post}</TableCell>
|
||||
<TableCell>{item.designation}</TableCell>
|
||||
<TableCell>{item.qualification}</TableCell>
|
||||
<TableCell>{item.experienceNeed}</TableCell>
|
||||
<TableCell>{item.email}</TableCell>
|
||||
<TableCell>{item.number}</TableCell>
|
||||
<TableCell>{item.status}</TableCell>
|
||||
currentItems.map((item) => (
|
||||
<TableRow key={item.id} className="hover:bg-muted/50">
|
||||
<TableCell className="font-mono text-xs">
|
||||
{item.id}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="font-semibold text-base truncate">
|
||||
{item.post}
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground truncate">
|
||||
{item.designation}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="text-sm line-clamp-2">
|
||||
{item.qualification}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="text-sm">
|
||||
{item.experienceNeed}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="text-sm font-medium">{item.email}</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
{item.number}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge
|
||||
variant={
|
||||
item.status === "active" ? "default" : "secondary"
|
||||
}
|
||||
className="capitalize"
|
||||
>
|
||||
{item.status}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
|
||||
<TableCell className="flex gap-2">
|
||||
<TableCell className="text-right">
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
className="h-9 w-9"
|
||||
onClick={() => openEdit(item)}
|
||||
>
|
||||
<Pencil className="h-4 w-4" />
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
size="sm"
|
||||
variant="destructive"
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
className="h-9 w-9 text-destructive hover:text-destructive hover:bg-destructive/10"
|
||||
onClick={() => handleDelete(item.id)}
|
||||
>
|
||||
<Trash className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
@@ -217,67 +286,126 @@ export default function CareerPage() {
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
{!loading && filteredCareers.length > 0 && (
|
||||
<div className="flex items-center justify-between px-2 py-6 border-t">
|
||||
<div className="text-base text-muted-foreground">
|
||||
Showing{" "}
|
||||
<span className="font-semibold">{indexOfFirstItem + 1}</span> to{" "}
|
||||
<span className="font-semibold">
|
||||
{Math.min(indexOfLastItem, filteredCareers.length)}
|
||||
</span>{" "}
|
||||
of{" "}
|
||||
<span className="font-semibold">{filteredCareers.length}</span>{" "}
|
||||
careers
|
||||
</div>
|
||||
<div className="flex items-center gap-6">
|
||||
<div className="text-base font-semibold">
|
||||
Page {currentPage} of {totalPages}
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="h-10 w-10"
|
||||
onClick={() =>
|
||||
setCurrentPage((prev) => Math.max(prev - 1, 1))
|
||||
}
|
||||
disabled={currentPage === 1}
|
||||
>
|
||||
<ChevronLeft className="h-5 w-5" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="h-10 w-10"
|
||||
onClick={() =>
|
||||
setCurrentPage((prev) => Math.min(prev + 1, totalPages))
|
||||
}
|
||||
disabled={currentPage === totalPages || totalPages === 0}
|
||||
>
|
||||
<ChevronRight className="h-5 w-5" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* MODAL */}
|
||||
<Dialog open={openModal} onOpenChange={setOpenModal}>
|
||||
<DialogContent>
|
||||
<DialogContent className="w-full max-w-lg">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{editing ? "Edit Career" : "Add Career"}</DialogTitle>
|
||||
<DialogTitle className="text-2xl">
|
||||
{editing ? "Edit Career" : "Add New Career"}
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div className="space-y-4 py-4">
|
||||
<div className="grid grid-cols-1 gap-4">
|
||||
<Input
|
||||
name="post"
|
||||
placeholder="Post"
|
||||
placeholder="Post (e.g. Staff Nurse)"
|
||||
value={form.post}
|
||||
onChange={handleChange}
|
||||
className="text-base"
|
||||
/>
|
||||
<Input
|
||||
name="designation"
|
||||
placeholder="Designation"
|
||||
value={form.designation}
|
||||
onChange={handleChange}
|
||||
className="text-base"
|
||||
/>
|
||||
<Input
|
||||
name="qualification"
|
||||
placeholder="Qualification"
|
||||
value={form.qualification}
|
||||
onChange={handleChange}
|
||||
className="text-base"
|
||||
/>
|
||||
<Input
|
||||
name="experienceNeed"
|
||||
placeholder="Experience Needed"
|
||||
value={form.experienceNeed}
|
||||
onChange={handleChange}
|
||||
className="text-base"
|
||||
/>
|
||||
<Input
|
||||
name="email"
|
||||
placeholder="Email"
|
||||
type="email"
|
||||
placeholder="HR Email Address"
|
||||
value={form.email}
|
||||
onChange={handleChange}
|
||||
className="text-base"
|
||||
/>
|
||||
<Input
|
||||
name="number"
|
||||
placeholder="Phone Number"
|
||||
placeholder="Contact Number"
|
||||
value={form.number}
|
||||
onChange={handleChange}
|
||||
className="text-base"
|
||||
/>
|
||||
<Input
|
||||
name="status"
|
||||
placeholder="Status"
|
||||
placeholder="Status (e.g. active / closed)"
|
||||
value={form.status}
|
||||
onChange={handleChange}
|
||||
className="text-base"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setOpenModal(false)}>
|
||||
<DialogFooter className="pt-4 border-t">
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => setOpenModal(false)}
|
||||
className="text-base"
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={handleSubmit}>
|
||||
{editing ? "Update" : "Create"}
|
||||
<Button onClick={handleSubmit} className="px-8 text-base">
|
||||
{editing ? "Save Changes" : "Create Career"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
|
||||
@@ -31,7 +31,16 @@ import {
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
|
||||
import { Loader2, RefreshCw, Plus, Pencil, Trash, Eye } from "lucide-react";
|
||||
import {
|
||||
Loader2,
|
||||
RefreshCw,
|
||||
Plus,
|
||||
Pencil,
|
||||
Trash,
|
||||
Eye,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
} from "lucide-react";
|
||||
|
||||
interface Department {
|
||||
departmentId: string;
|
||||
@@ -56,6 +65,9 @@ export default function DepartmentPage() {
|
||||
|
||||
const [searchText, setSearchText] = useState("");
|
||||
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const itemsPerPage = 10;
|
||||
|
||||
const [form, setForm] = useState<Department>({
|
||||
departmentId: "",
|
||||
name: "",
|
||||
@@ -88,8 +100,22 @@ export default function DepartmentPage() {
|
||||
fetchDepartments();
|
||||
}, [fetchDepartments]);
|
||||
|
||||
const filteredDepartments = departments.filter((dep) =>
|
||||
dep.name.toLowerCase().includes(searchText.toLowerCase()),
|
||||
const filteredDepartments = departments.filter(
|
||||
(dep) =>
|
||||
dep.name.toLowerCase().includes(searchText.toLowerCase()) ||
|
||||
dep.departmentId.toLowerCase().includes(searchText.toLowerCase()),
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
setCurrentPage(1);
|
||||
}, [searchText]);
|
||||
|
||||
const totalPages = Math.ceil(filteredDepartments.length / itemsPerPage);
|
||||
const indexOfLastItem = currentPage * itemsPerPage;
|
||||
const indexOfFirstItem = indexOfLastItem - itemsPerPage;
|
||||
const currentItems = filteredDepartments.slice(
|
||||
indexOfFirstItem,
|
||||
indexOfLastItem,
|
||||
);
|
||||
|
||||
function handleChange(e: any) {
|
||||
@@ -155,118 +181,153 @@ export default function DepartmentPage() {
|
||||
|
||||
return (
|
||||
<div className="p-6 space-y-6">
|
||||
<div className="flex flex-col md:flex-row md:justify-between md:items-center gap-3">
|
||||
<h1 className="text-2xl font-bold">Departments</h1>
|
||||
<div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
|
||||
<h1 className="text-3xl font-bold">Departments</h1>
|
||||
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Input
|
||||
placeholder="Search department..."
|
||||
value={searchText}
|
||||
onChange={(e) => setSearchText(e.target.value)}
|
||||
className="w-[220px]"
|
||||
className="w-[250px] text-base"
|
||||
/>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={fetchDepartments}
|
||||
disabled={loading}>
|
||||
<RefreshCw className="mr-2 h-4 w-4" />
|
||||
disabled={loading}
|
||||
className="text-base"
|
||||
>
|
||||
<RefreshCw className="mr-2 h-5 w-5" />
|
||||
Refresh
|
||||
</Button>
|
||||
|
||||
<Button onClick={openAdd}>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
<Button onClick={openAdd} className="text-base">
|
||||
<Plus className="mr-2 h-5 w-5" />
|
||||
Add Department
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="p-4 text-red-600 bg-red-50 border rounded-md">
|
||||
<div className="p-4 text-red-600 bg-red-50 border rounded-md text-base">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Department List</CardTitle>
|
||||
<CardTitle className="text-xl">Department List</CardTitle>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent>
|
||||
<div className="border rounded-md max-h-[500px] overflow-y-auto">
|
||||
<Table className="w-full table-fixed">
|
||||
<TableHeader>
|
||||
<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-[900px] table-fixed border-separate border-spacing-0">
|
||||
<TableHeader className="sticky top-0 z-20 bg-background shadow-sm">
|
||||
<TableRow>
|
||||
<TableHead className="w-[80px]">ID</TableHead>
|
||||
<TableHead className="w-[180px]">Name</TableHead>
|
||||
<TableHead className="w-[250px]">Para1</TableHead>
|
||||
<TableHead className="w-[220px]">Facilities</TableHead>
|
||||
<TableHead className="w-[220px]">Services</TableHead>
|
||||
<TableHead className="w-[120px]">Actions</TableHead>
|
||||
<TableHead className="w-[100px] bg-background text-sm font-bold">
|
||||
ID
|
||||
</TableHead>
|
||||
<TableHead className="w-[200px] bg-background text-sm font-bold">
|
||||
Name
|
||||
</TableHead>
|
||||
<TableHead className="w-[250px] bg-background text-sm font-bold">
|
||||
Para 1
|
||||
</TableHead>
|
||||
<TableHead className="w-[220px] bg-background text-sm font-bold">
|
||||
Facilities
|
||||
</TableHead>
|
||||
<TableHead className="w-[220px] bg-background text-sm font-bold">
|
||||
Services
|
||||
</TableHead>
|
||||
<TableHead className="w-[140px] bg-background text-right text-sm font-bold">
|
||||
Actions
|
||||
</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
|
||||
<TableBody>
|
||||
{loading ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={6} className="text-center">
|
||||
<Loader2 className="h-6 w-6 animate-spin mx-auto" />
|
||||
<TableCell colSpan={6} className="text-center py-10">
|
||||
<Loader2 className="h-8 w-8 animate-spin mx-auto" />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : filteredDepartments.length === 0 ? (
|
||||
) : currentItems.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={6} className="text-center">
|
||||
<TableCell
|
||||
colSpan={6}
|
||||
className="text-center text-muted-foreground py-10 text-base"
|
||||
>
|
||||
No departments found
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : (
|
||||
filteredDepartments.map((dep) => (
|
||||
<TableRow key={dep.departmentId}>
|
||||
<TableCell>{dep.departmentId}</TableCell>
|
||||
|
||||
<TableCell>
|
||||
<div className="break-words">{dep.name}</div>
|
||||
currentItems.map((dep) => (
|
||||
<TableRow
|
||||
key={dep.departmentId}
|
||||
className="hover:bg-muted/50"
|
||||
>
|
||||
<TableCell className="font-mono text-xs">
|
||||
{dep.departmentId}
|
||||
</TableCell>
|
||||
|
||||
<TableCell>
|
||||
<div className="break-words whitespace-normal">
|
||||
<div
|
||||
className="font-semibold text-base truncate"
|
||||
title={dep.name}
|
||||
>
|
||||
{dep.name}
|
||||
</div>
|
||||
</TableCell>
|
||||
|
||||
<TableCell>
|
||||
<div className="text-sm break-words whitespace-normal">
|
||||
{truncate(dep.para1)}
|
||||
</div>
|
||||
</TableCell>
|
||||
|
||||
<TableCell>
|
||||
<div className="break-words whitespace-normal">
|
||||
<div className="text-sm break-words whitespace-normal">
|
||||
{truncate(dep.facilities)}
|
||||
</div>
|
||||
</TableCell>
|
||||
|
||||
<TableCell>
|
||||
<div className="break-words whitespace-normal">
|
||||
<div className="text-sm break-words whitespace-normal">
|
||||
{truncate(dep.services)}
|
||||
</div>
|
||||
</TableCell>
|
||||
|
||||
<TableCell className="flex gap-2 whitespace-nowrap">
|
||||
<TableCell className="text-right">
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => openView(dep)}>
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
className="h-9 w-9"
|
||||
onClick={() => openView(dep)}
|
||||
>
|
||||
<Eye className="h-4 w-4" />
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => openEdit(dep)}>
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
className="h-9 w-9"
|
||||
onClick={() => openEdit(dep)}
|
||||
>
|
||||
<Pencil className="h-4 w-4" />
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
size="sm"
|
||||
variant="destructive"
|
||||
onClick={() => handleDelete(dep.departmentId)}>
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
className="h-9 w-9 text-destructive hover:text-destructive hover:bg-destructive/10"
|
||||
onClick={() => handleDelete(dep.departmentId)}
|
||||
>
|
||||
<Trash className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
@@ -274,6 +335,52 @@ export default function DepartmentPage() {
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
{!loading && filteredDepartments.length > 0 && (
|
||||
<div className="flex items-center justify-between px-2 py-6 border-t">
|
||||
<div className="text-base text-muted-foreground">
|
||||
Showing{" "}
|
||||
<span className="font-semibold">{indexOfFirstItem + 1}</span> to{" "}
|
||||
<span className="font-semibold">
|
||||
{Math.min(indexOfLastItem, filteredDepartments.length)}
|
||||
</span>{" "}
|
||||
of{" "}
|
||||
<span className="font-semibold">
|
||||
{filteredDepartments.length}
|
||||
</span>{" "}
|
||||
departments
|
||||
</div>
|
||||
<div className="flex items-center gap-6">
|
||||
<div className="text-base font-semibold">
|
||||
Page {currentPage} of {totalPages}
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="h-10 w-10"
|
||||
onClick={() =>
|
||||
setCurrentPage((prev) => Math.max(prev - 1, 1))
|
||||
}
|
||||
disabled={currentPage === 1}
|
||||
>
|
||||
<ChevronLeft className="h-5 w-5" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="h-10 w-10"
|
||||
onClick={() =>
|
||||
setCurrentPage((prev) => Math.min(prev + 1, totalPages))
|
||||
}
|
||||
disabled={currentPage === totalPages || totalPages === 0}
|
||||
>
|
||||
<ChevronRight className="h-5 w-5" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
@@ -346,7 +453,6 @@ export default function DepartmentPage() {
|
||||
|
||||
<Dialog open={viewOpen} onOpenChange={setViewOpen}>
|
||||
<DialogContent className="w-full !max-w-5xl max-h-[90vh] overflow-y-auto">
|
||||
{" "}
|
||||
<DialogHeader>
|
||||
<DialogTitle>Department Details</DialogTitle>
|
||||
</DialogHeader>
|
||||
@@ -355,35 +461,29 @@ export default function DepartmentPage() {
|
||||
<p>
|
||||
<b>ID:</b> {viewData.departmentId}
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<b>Name:</b> {viewData.name}
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<b>Para1:</b>
|
||||
<br />
|
||||
{viewData.para1}
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<b>Para2:</b>
|
||||
<br />
|
||||
{viewData.para2}
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<b>Para3:</b>
|
||||
<br />
|
||||
{viewData.para3}
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<b>Facilities:</b>
|
||||
<br />
|
||||
{viewData.facilities}
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<b>Services:</b>
|
||||
<br />
|
||||
|
||||
+203
-77
@@ -1,5 +1,5 @@
|
||||
import {useState, useEffect, useCallback} from "react";
|
||||
import {AxiosError} from "axios";
|
||||
import { useState, useEffect, useCallback } from "react";
|
||||
import { AxiosError } from "axios";
|
||||
import {
|
||||
getDoctorsApi,
|
||||
createDoctorApi,
|
||||
@@ -7,7 +7,7 @@ import {
|
||||
deleteDoctorApi,
|
||||
getDoctorTimingApi,
|
||||
} from "@/api/doctor";
|
||||
import {getDepartmentsApi} from "@/api/department";
|
||||
import { getDepartmentsApi } from "@/api/department";
|
||||
|
||||
import {
|
||||
Table,
|
||||
@@ -17,8 +17,8 @@ import {
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card";
|
||||
import {Button} from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
@@ -26,9 +26,17 @@ import {
|
||||
DialogTitle,
|
||||
DialogFooter,
|
||||
} from "@/components/ui/dialog";
|
||||
import {Input} from "@/components/ui/input";
|
||||
import {Badge} from "@/components/ui/badge";
|
||||
import {Loader2, RefreshCw, Plus, Pencil, Trash} from "lucide-react";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import {
|
||||
Loader2,
|
||||
RefreshCw,
|
||||
Plus,
|
||||
Pencil,
|
||||
Trash,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
} from "lucide-react";
|
||||
|
||||
interface Department {
|
||||
departmentId: string;
|
||||
@@ -58,6 +66,9 @@ export default function DoctorPage() {
|
||||
const [searchText, setSearchText] = useState("");
|
||||
const [filterDepartment, setFilterDepartment] = useState("");
|
||||
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const itemsPerPage = 10;
|
||||
|
||||
const [form, setForm] = useState<any>({
|
||||
doctorId: "",
|
||||
name: "",
|
||||
@@ -104,8 +115,17 @@ export default function DoctorPage() {
|
||||
return matchesSearch && matchesDepartment;
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
setCurrentPage(1);
|
||||
}, [searchText, filterDepartment]);
|
||||
|
||||
const totalPages = Math.ceil(filteredDoctors.length / itemsPerPage);
|
||||
const indexOfLastItem = currentPage * itemsPerPage;
|
||||
const indexOfFirstItem = indexOfLastItem - itemsPerPage;
|
||||
const currentItems = filteredDoctors.slice(indexOfFirstItem, indexOfLastItem);
|
||||
|
||||
function handleChange(e: any) {
|
||||
setForm({...form, [e.target.name]: e.target.value});
|
||||
setForm({ ...form, [e.target.name]: e.target.value });
|
||||
}
|
||||
|
||||
function handleDepartmentToggle(depId: string) {
|
||||
@@ -120,7 +140,7 @@ export default function DoctorPage() {
|
||||
} else {
|
||||
setForm({
|
||||
...form,
|
||||
departments: [...form.departments, {departmentId: depId, timing: {}}],
|
||||
departments: [...form.departments, { departmentId: depId, timing: {} }],
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -130,7 +150,7 @@ export default function DoctorPage() {
|
||||
...form,
|
||||
departments: form.departments.map((d: any) =>
|
||||
d.departmentId === depId
|
||||
? {...d, timing: {...d.timing, [day]: value}}
|
||||
? { ...d, timing: { ...d.timing, [day]: value } }
|
||||
: d,
|
||||
),
|
||||
});
|
||||
@@ -197,22 +217,21 @@ export default function DoctorPage() {
|
||||
|
||||
return (
|
||||
<div className="p-6 space-y-6">
|
||||
{/* HEADER */}
|
||||
<div className="flex flex-col md:flex-row md:justify-between md:items-center gap-3">
|
||||
<h1 className="text-2xl font-bold">Doctors</h1>
|
||||
<div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
|
||||
<h1 className="text-3xl font-bold">Doctors</h1>
|
||||
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Input
|
||||
placeholder="Search doctor..."
|
||||
value={searchText}
|
||||
onChange={(e) => setSearchText(e.target.value)}
|
||||
className="w-[200px]"
|
||||
className="w-[250px] text-base"
|
||||
/>
|
||||
|
||||
<select
|
||||
value={filterDepartment}
|
||||
onChange={(e) => setFilterDepartment(e.target.value)}
|
||||
className="flex h-10 w-[200px] rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
|
||||
className="flex h-10 w-[220px] rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
|
||||
>
|
||||
<option value="">All Departments</option>
|
||||
{departments.map((dep) => (
|
||||
@@ -222,95 +241,120 @@ export default function DoctorPage() {
|
||||
))}
|
||||
</select>
|
||||
|
||||
<Button variant="outline" onClick={fetchAll} disabled={loading}>
|
||||
<RefreshCw className="mr-2 h-4 w-4" />
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={fetchAll}
|
||||
disabled={loading}
|
||||
className="text-base"
|
||||
>
|
||||
<RefreshCw className="mr-2 h-5 w-5" />
|
||||
Refresh
|
||||
</Button>
|
||||
|
||||
<Button onClick={openAdd}>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
<Button onClick={openAdd} className="text-base">
|
||||
<Plus className="mr-2 h-5 w-5" />
|
||||
Add Doctor
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* TABLE */}
|
||||
{error && (
|
||||
<div className="p-4 text-red-600 bg-red-50 border rounded-md">
|
||||
<div className="p-4 text-red-600 bg-red-50 border rounded-md text-base">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Doctor List</CardTitle>
|
||||
<CardTitle className="text-xl">Doctor List</CardTitle>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="p-0 sm:p-6">
|
||||
<div className="rounded-md border overflow-x-auto max-w-full">
|
||||
<Table className="w-full min-w-[800px] table-fixed">
|
||||
<TableHeader>
|
||||
<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-[900px] table-fixed border-separate border-spacing-0">
|
||||
<TableHeader className="sticky top-0 z-20 bg-background shadow-sm">
|
||||
<TableRow>
|
||||
<TableHead className="w-[80px]">ID</TableHead>
|
||||
<TableHead className="w-[180px]">Name</TableHead>
|
||||
<TableHead className="w-[150px]">Designation</TableHead>
|
||||
<TableHead className="w-[150px]">Qualification</TableHead>
|
||||
<TableHead className="w-[200px]">Departments</TableHead>
|
||||
<TableHead className="w-[120px]">Actions</TableHead>
|
||||
<TableHead className="w-[100px] bg-background text-sm font-bold">
|
||||
ID
|
||||
</TableHead>
|
||||
<TableHead className="w-[200px] bg-background text-sm font-bold">
|
||||
Name
|
||||
</TableHead>
|
||||
<TableHead className="w-[180px] bg-background text-sm font-bold">
|
||||
Designation
|
||||
</TableHead>
|
||||
<TableHead className="w-[180px] bg-background text-sm font-bold">
|
||||
Qualification
|
||||
</TableHead>
|
||||
<TableHead className="w-[220px] bg-background text-sm font-bold">
|
||||
Departments
|
||||
</TableHead>
|
||||
<TableHead className="w-[120px] bg-background text-right text-sm font-bold">
|
||||
Actions
|
||||
</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
|
||||
<TableBody>
|
||||
{loading ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={6} className="text-center">
|
||||
<Loader2 className="h-6 w-6 animate-spin mx-auto" />
|
||||
<TableCell colSpan={6} className="text-center py-10">
|
||||
<Loader2 className="h-8 w-8 animate-spin mx-auto" />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : filteredDoctors.length === 0 ? (
|
||||
) : currentItems.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell
|
||||
colSpan={6}
|
||||
className="text-center text-muted-foreground py-10"
|
||||
className="text-center text-muted-foreground py-10 text-base"
|
||||
>
|
||||
No doctors found
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : (
|
||||
filteredDoctors.map((doc) => (
|
||||
<TableRow key={doc.doctorId}>
|
||||
currentItems.map((doc) => (
|
||||
<TableRow key={doc.doctorId} className="hover:bg-muted/50">
|
||||
<TableCell className="truncate font-mono text-xs">
|
||||
{doc.doctorId}
|
||||
</TableCell>
|
||||
|
||||
<TableCell>
|
||||
<div className="font-medium truncate" title={doc.name}>
|
||||
<div
|
||||
className="font-semibold text-base truncate"
|
||||
title={doc.name}
|
||||
>
|
||||
{doc.name}
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground truncate">
|
||||
<div className="text-xs text-muted-foreground truncate italic">
|
||||
{doc.workingStatus}
|
||||
</div>
|
||||
</TableCell>
|
||||
|
||||
<TableCell>
|
||||
<div className="truncate" title={doc.designation}>
|
||||
<div
|
||||
className="truncate text-sm"
|
||||
title={doc.designation}
|
||||
>
|
||||
{doc.designation || "-"}
|
||||
</div>
|
||||
</TableCell>
|
||||
|
||||
<TableCell>
|
||||
<div className="truncate" title={doc.qualification}>
|
||||
<div
|
||||
className="truncate text-sm"
|
||||
title={doc.qualification}
|
||||
>
|
||||
{doc.qualification || "-"}
|
||||
</div>
|
||||
</TableCell>
|
||||
|
||||
<TableCell>
|
||||
<div className="flex flex-wrap gap-1 max-h-[40px] overflow-hidden">
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{doc.departments?.map((d: any) => (
|
||||
<Badge
|
||||
key={d.departmentId}
|
||||
variant="secondary"
|
||||
className="text-[10px] px-1"
|
||||
className="text-xs px-2 h-5 leading-none"
|
||||
>
|
||||
{d.departmentName}
|
||||
</Badge>
|
||||
@@ -324,15 +368,17 @@ export default function DoctorPage() {
|
||||
<TableCell className="text-right">
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
className="h-9 w-9"
|
||||
onClick={() => openEdit(doc)}
|
||||
>
|
||||
<Pencil className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="destructive"
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
className="h-9 w-9 text-destructive hover:text-destructive hover:bg-destructive/10"
|
||||
onClick={() => handleDelete(doc.doctorId)}
|
||||
>
|
||||
<Trash className="h-4 w-4" />
|
||||
@@ -345,54 +391,125 @@ export default function DoctorPage() {
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
{!loading && filteredDoctors.length > 0 && (
|
||||
<div className="flex items-center justify-between px-2 py-6 border-t">
|
||||
<div className="text-base text-muted-foreground">
|
||||
Showing{" "}
|
||||
<span className="font-semibold">{indexOfFirstItem + 1}</span> to{" "}
|
||||
<span className="font-semibold">
|
||||
{Math.min(indexOfLastItem, filteredDoctors.length)}
|
||||
</span>{" "}
|
||||
of{" "}
|
||||
<span className="font-semibold">{filteredDoctors.length}</span>{" "}
|
||||
doctors
|
||||
</div>
|
||||
<div className="flex items-center gap-6">
|
||||
<div className="text-base font-semibold">
|
||||
Page {currentPage} of {totalPages}
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="h-10 w-10"
|
||||
onClick={() =>
|
||||
setCurrentPage((prev) => Math.max(prev - 1, 1))
|
||||
}
|
||||
disabled={currentPage === 1}
|
||||
>
|
||||
<ChevronLeft className="h-5 w-5" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="h-10 w-10"
|
||||
onClick={() =>
|
||||
setCurrentPage((prev) => Math.min(prev + 1, totalPages))
|
||||
}
|
||||
disabled={currentPage === totalPages || totalPages === 0}
|
||||
>
|
||||
<ChevronRight className="h-5 w-5" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* MODAL */}
|
||||
<Dialog open={openModal} onOpenChange={setOpenModal}>
|
||||
<DialogContent className="w-full !max-w-5xl max-h-[90vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{editing ? "Edit Doctor" : "Add Doctor"}</DialogTitle>
|
||||
<DialogTitle className="text-2xl">
|
||||
{editing ? "Edit Doctor" : "Add Doctor"}
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 mt-6">
|
||||
<div className="space-y-6">
|
||||
<h3 className="font-bold text-base border-b pb-2">
|
||||
Basic Information
|
||||
</h3>
|
||||
<div className="space-y-4">
|
||||
<h3 className="font-semibold border-b pb-2">Basic Information</h3>
|
||||
<div className="space-y-1">
|
||||
<label className="text-sm font-semibold">Doctor ID</label>
|
||||
<Input
|
||||
name="doctorId"
|
||||
placeholder="Doctor ID"
|
||||
placeholder="GG-DOC-001"
|
||||
value={form.doctorId}
|
||||
onChange={handleChange}
|
||||
disabled={!!editing}
|
||||
className="text-base"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<label className="text-sm font-semibold">Full Name</label>
|
||||
<Input
|
||||
name="name"
|
||||
placeholder="Name"
|
||||
placeholder="Dr. John Doe"
|
||||
value={form.name}
|
||||
onChange={handleChange}
|
||||
className="text-base"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<label className="text-sm font-semibold">Designation</label>
|
||||
<Input
|
||||
name="designation"
|
||||
placeholder="Designation"
|
||||
placeholder="Senior Consultant"
|
||||
value={form.designation}
|
||||
onChange={handleChange}
|
||||
className="text-base"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<label className="text-sm font-semibold">
|
||||
Working Status
|
||||
</label>
|
||||
<Input
|
||||
name="workingStatus"
|
||||
placeholder="Working Status (e.g. Active)"
|
||||
placeholder="Active / On Call"
|
||||
value={form.workingStatus}
|
||||
onChange={handleChange}
|
||||
className="text-base"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<label className="text-sm font-semibold">Qualification</label>
|
||||
<Input
|
||||
name="qualification"
|
||||
placeholder="Qualification"
|
||||
placeholder="MBBS, MD"
|
||||
value={form.qualification}
|
||||
onChange={handleChange}
|
||||
className="text-base"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-4 border rounded-md bg-muted/20">
|
||||
<p className="text-sm font-medium mb-3">Assign Departments</p>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<div className="p-5 border rounded-md bg-muted/20">
|
||||
<p className="text-base font-bold mb-4">Assign Departments</p>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
{departments.map((dep) => {
|
||||
const isSelected = form.departments.some(
|
||||
(d: any) => d.departmentId === dep.departmentId,
|
||||
@@ -403,7 +520,7 @@ export default function DoctorPage() {
|
||||
type="button"
|
||||
variant={isSelected ? "default" : "outline"}
|
||||
size="sm"
|
||||
className="justify-start"
|
||||
className="justify-start text-sm h-9"
|
||||
onClick={() => handleDepartmentToggle(dep.departmentId)}
|
||||
>
|
||||
{dep.name}
|
||||
@@ -414,16 +531,16 @@ export default function DoctorPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<h3 className="font-semibold border-b pb-2">
|
||||
<div className="space-y-6">
|
||||
<h3 className="font-bold text-base border-b pb-2">
|
||||
Working Hours / Timing
|
||||
</h3>
|
||||
{form.departments.length === 0 ? (
|
||||
<div className="text-sm text-muted-foreground italic py-10 text-center">
|
||||
Select a department to set timings
|
||||
<div className="text-base text-muted-foreground italic py-24 text-center border-2 border-dashed rounded-lg">
|
||||
Select a department to configure timing slots
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-8">
|
||||
{form.departments.map((dep: any) => {
|
||||
const depName = departments.find(
|
||||
(d) => d.departmentId === dep.departmentId,
|
||||
@@ -431,20 +548,25 @@ export default function DoctorPage() {
|
||||
return (
|
||||
<div
|
||||
key={dep.departmentId}
|
||||
className="space-y-3 p-3 border rounded-lg bg-background shadow-sm"
|
||||
className="space-y-4 p-5 border rounded-lg bg-background shadow-sm"
|
||||
>
|
||||
<p className="font-bold text-primary underline">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="font-bold text-base text-primary">
|
||||
{depName}
|
||||
</p>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
|
||||
<Badge variant="outline" className="text-xs">
|
||||
Timing Slot
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-3">
|
||||
{DAYS.map((day) => (
|
||||
<div key={day} className="space-y-1">
|
||||
<label className="text-[10px] uppercase font-bold text-muted-foreground">
|
||||
<label className="text-xs uppercase font-bold text-muted-foreground">
|
||||
{day}
|
||||
</label>
|
||||
<Input
|
||||
className="h-8 text-xs"
|
||||
placeholder="e.g. 9 AM - 1 PM"
|
||||
className="h-9 text-sm"
|
||||
placeholder="e.g. 09:00 AM - 01:00 PM"
|
||||
value={dep.timing?.[day] || ""}
|
||||
onChange={(e) =>
|
||||
handleTimingChange(
|
||||
@@ -465,12 +587,16 @@ export default function DoctorPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter className="mt-6">
|
||||
<Button variant="outline" onClick={() => setOpenModal(false)}>
|
||||
<DialogFooter className="mt-10 pt-6 border-t">
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => setOpenModal(false)}
|
||||
className="text-base"
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={handleSubmit}>
|
||||
{editing ? "Update Doctor" : "Create Doctor"}
|
||||
<Button onClick={handleSubmit} className="px-10 text-base">
|
||||
{editing ? "Save Changes" : "Create Doctor Profile"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
|
||||
@@ -13,11 +13,26 @@ import {
|
||||
} from "@/components/ui/table";
|
||||
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
|
||||
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 } from "lucide-react";
|
||||
import {
|
||||
Loader2,
|
||||
Trash,
|
||||
RefreshCw,
|
||||
Download,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
Eye,
|
||||
User,
|
||||
} from "lucide-react";
|
||||
|
||||
export default function CandidatePage() {
|
||||
const [candidates, setCandidates] = useState<any[]>([]);
|
||||
@@ -26,6 +41,12 @@ export default function CandidatePage() {
|
||||
const [searchText, setSearchText] = useState("");
|
||||
const [filterCareer, setFilterCareer] = useState("");
|
||||
|
||||
const [viewOpen, setViewOpen] = useState(false);
|
||||
const [viewData, setViewData] = useState<any>(null);
|
||||
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const itemsPerPage = 10;
|
||||
|
||||
const fetchAll = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
@@ -55,6 +76,23 @@ export default function CandidatePage() {
|
||||
return matchesSearch && matchesCareer;
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
setCurrentPage(1);
|
||||
}, [searchText, filterCareer]);
|
||||
|
||||
const totalPages = Math.ceil(filteredCandidates.length / itemsPerPage);
|
||||
const indexOfLastItem = currentPage * itemsPerPage;
|
||||
const indexOfFirstItem = indexOfLastItem - itemsPerPage;
|
||||
const currentItems = filteredCandidates.slice(
|
||||
indexOfFirstItem,
|
||||
indexOfLastItem,
|
||||
);
|
||||
|
||||
function openView(item: any) {
|
||||
setViewData(item);
|
||||
setViewOpen(true);
|
||||
}
|
||||
|
||||
async function handleDelete(id: number) {
|
||||
if (!confirm("Delete candidate?")) return;
|
||||
await deleteCandidateApi(id);
|
||||
@@ -71,7 +109,7 @@ export default function CandidatePage() {
|
||||
Designation: item.career?.designation,
|
||||
Subject: item.subject,
|
||||
CoverLetter: item.coverLetter,
|
||||
Date: new Date(item.createdAt).toLocaleDateString(),
|
||||
AppliedDate: new Date(item.createdAt).toLocaleDateString(),
|
||||
}));
|
||||
|
||||
exportToExcel(exportData, "candidates");
|
||||
@@ -79,31 +117,36 @@ export default function CandidatePage() {
|
||||
|
||||
return (
|
||||
<div className="p-6 space-y-6">
|
||||
<div className="flex justify-between items-center gap-3 flex-wrap">
|
||||
<h1 className="text-2xl font-bold">Candidates</h1>
|
||||
<div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
|
||||
<h1 className="text-3xl font-bold">Candidates</h1>
|
||||
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Input
|
||||
placeholder="Search name / phone / email..."
|
||||
placeholder="Search candidate..."
|
||||
value={searchText}
|
||||
onChange={(e) => setSearchText(e.target.value)}
|
||||
className="w-[220px]"
|
||||
className="w-[250px] text-base"
|
||||
/>
|
||||
|
||||
<Input
|
||||
placeholder="Filter Career"
|
||||
placeholder="Filter by Career"
|
||||
value={filterCareer}
|
||||
onChange={(e) => setFilterCareer(e.target.value)}
|
||||
className="w-[200px]"
|
||||
className="w-[200px] text-base"
|
||||
/>
|
||||
|
||||
<Button variant="outline" onClick={fetchAll} disabled={loading}>
|
||||
<RefreshCw className="mr-2 h-4 w-4" />
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={fetchAll}
|
||||
disabled={loading}
|
||||
className="text-base"
|
||||
>
|
||||
<RefreshCw className="mr-2 h-5 w-5" />
|
||||
Refresh
|
||||
</Button>
|
||||
|
||||
<Button variant="outline" onClick={handleExport}>
|
||||
<Download className="mr-2 h-4 w-4" />
|
||||
<Button onClick={handleExport} className="text-base">
|
||||
<Download className="mr-2 h-5 w-5" />
|
||||
Export
|
||||
</Button>
|
||||
</div>
|
||||
@@ -111,68 +154,104 @@ export default function CandidatePage() {
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Candidate List</CardTitle>
|
||||
<CardTitle className="text-xl">Application List</CardTitle>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent>
|
||||
<div className="overflow-x-auto">
|
||||
<Table className="min-w-[900px]">
|
||||
<TableHeader>
|
||||
<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-[1100px] table-fixed border-separate border-spacing-0">
|
||||
<TableHeader className="sticky top-0 z-20 bg-background shadow-sm">
|
||||
<TableRow>
|
||||
<TableHead>ID</TableHead>
|
||||
<TableHead>Name</TableHead>
|
||||
<TableHead>Phone</TableHead>
|
||||
<TableHead>Email</TableHead>
|
||||
<TableHead>Career</TableHead>
|
||||
<TableHead>Designation</TableHead>
|
||||
<TableHead>Subject</TableHead>
|
||||
<TableHead>Cover Letter</TableHead>
|
||||
<TableHead>Applied On</TableHead>
|
||||
<TableHead>Actions</TableHead>
|
||||
<TableHead className="w-[60px] bg-background font-bold text-sm">
|
||||
ID
|
||||
</TableHead>
|
||||
<TableHead className="w-[220px] bg-background font-bold text-sm">
|
||||
Full Name
|
||||
</TableHead>
|
||||
<TableHead className="w-[180px] bg-background font-bold text-sm">
|
||||
Career & Post
|
||||
</TableHead>
|
||||
<TableHead className="w-[150px] bg-background font-bold text-sm">
|
||||
Contact
|
||||
</TableHead>
|
||||
<TableHead className="w-[140px] bg-background font-bold text-sm">
|
||||
Applied On
|
||||
</TableHead>
|
||||
<TableHead className="w-[250px] bg-background font-bold text-sm">
|
||||
Cover Letter
|
||||
</TableHead>
|
||||
<TableHead className="w-[120px] bg-background font-bold text-right text-sm">
|
||||
Actions
|
||||
</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
|
||||
<TableBody>
|
||||
{loading ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={10} className="text-center">
|
||||
<Loader2 className="h-6 w-6 animate-spin mx-auto" />
|
||||
<TableCell colSpan={7} className="text-center py-10">
|
||||
<Loader2 className="h-8 w-8 animate-spin mx-auto" />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : filteredCandidates.length === 0 ? (
|
||||
) : currentItems.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={10} className="text-center">
|
||||
<TableCell
|
||||
colSpan={7}
|
||||
className="text-center text-muted-foreground py-10 text-base"
|
||||
>
|
||||
No candidates found
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : (
|
||||
filteredCandidates.map((item) => (
|
||||
<TableRow key={item.id}>
|
||||
<TableCell>{item.id}</TableCell>
|
||||
<TableCell>{item.fullName}</TableCell>
|
||||
<TableCell>{item.mobile}</TableCell>
|
||||
<TableCell>{item.email}</TableCell>
|
||||
|
||||
<TableCell>{item.career?.post}</TableCell>
|
||||
<TableCell>{item.career?.designation}</TableCell>
|
||||
|
||||
<TableCell>{item.subject}</TableCell>
|
||||
|
||||
<TableCell className="max-w-[250px] whitespace-normal">
|
||||
{item.coverLetter}
|
||||
currentItems.map((item) => (
|
||||
<TableRow key={item.id} className="hover:bg-muted/50">
|
||||
<TableCell className="font-mono text-xs">
|
||||
{item.id}
|
||||
</TableCell>
|
||||
|
||||
<TableCell>
|
||||
<div className="font-semibold text-base truncate">
|
||||
{item.fullName}
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground truncate">
|
||||
{item.email}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="text-sm font-medium">
|
||||
{item.career?.post || "-"}
|
||||
</div>
|
||||
<div className="text-[10px] text-muted-foreground truncate">
|
||||
{item.career?.designation}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="text-sm">{item.mobile}</TableCell>
|
||||
<TableCell className="text-sm">
|
||||
{new Date(item.createdAt).toLocaleDateString()}
|
||||
</TableCell>
|
||||
|
||||
<TableCell>
|
||||
<div className="text-sm line-clamp-2 text-muted-foreground italic">
|
||||
{item.coverLetter || "No cover letter provided."}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="destructive"
|
||||
onClick={() => handleDelete(item.id)}>
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
className="h-9 w-9"
|
||||
onClick={() => openView(item)}
|
||||
>
|
||||
<Eye className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
className="h-9 w-9 text-destructive hover:text-destructive hover:bg-destructive/10"
|
||||
onClick={() => handleDelete(item.id)}
|
||||
>
|
||||
<Trash className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
@@ -180,8 +259,126 @@ export default function CandidatePage() {
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
{!loading && filteredCandidates.length > 0 && (
|
||||
<div className="flex items-center justify-between px-2 py-6 border-t">
|
||||
<div className="text-base text-muted-foreground">
|
||||
Showing{" "}
|
||||
<span className="font-semibold">{indexOfFirstItem + 1}</span> to{" "}
|
||||
<span className="font-semibold">
|
||||
{Math.min(indexOfLastItem, filteredCandidates.length)}
|
||||
</span>{" "}
|
||||
of{" "}
|
||||
<span className="font-semibold">
|
||||
{filteredCandidates.length}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-6">
|
||||
<div className="text-base font-semibold">
|
||||
Page {currentPage} of {totalPages}
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="h-10 w-10"
|
||||
onClick={() =>
|
||||
setCurrentPage((prev) => Math.max(prev - 1, 1))
|
||||
}
|
||||
disabled={currentPage === 1}
|
||||
>
|
||||
<ChevronLeft className="h-5 w-5" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="h-10 w-10"
|
||||
onClick={() =>
|
||||
setCurrentPage((prev) => Math.min(prev + 1, totalPages))
|
||||
}
|
||||
disabled={currentPage === totalPages || totalPages === 0}
|
||||
>
|
||||
<ChevronRight className="h-5 w-5" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Dialog open={viewOpen} onOpenChange={setViewOpen}>
|
||||
<DialogContent className="w-full !max-w-3xl max-h-[85vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-2xl border-b pb-2 flex items-center gap-2">
|
||||
<User className="h-6 w-6" /> Candidate Details
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
{viewData && (
|
||||
<div className="space-y-6 py-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<p className="text-xs uppercase font-bold text-muted-foreground">
|
||||
Personal Information
|
||||
</p>
|
||||
<p className="text-lg font-bold text-primary">
|
||||
{viewData.fullName}
|
||||
</p>
|
||||
<p className="text-sm font-medium">{viewData.email}</p>
|
||||
<p className="text-sm">{viewData.mobile}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs uppercase font-bold text-muted-foreground">
|
||||
Applied For
|
||||
</p>
|
||||
<p className="text-base font-semibold">
|
||||
{viewData.career?.post || "General Application"}
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{viewData.career?.designation}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs uppercase font-bold text-muted-foreground">
|
||||
Application Date
|
||||
</p>
|
||||
<p className="text-sm">
|
||||
{new Date(viewData.createdAt).toLocaleString()}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<p className="text-xs uppercase font-bold text-muted-foreground">
|
||||
Subject
|
||||
</p>
|
||||
<p className="text-sm font-semibold">
|
||||
{viewData.subject || "N/A"}
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-4 bg-muted/30 rounded-lg">
|
||||
<p className="text-xs uppercase font-bold text-muted-foreground mb-2">
|
||||
Cover Letter / Message
|
||||
</p>
|
||||
<p className="text-sm leading-relaxed whitespace-pre-wrap italic">
|
||||
{viewData.coverLetter || "No cover letter provided."}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<DialogFooter>
|
||||
<Button
|
||||
onClick={() => setViewOpen(false)}
|
||||
className="w-full md:w-auto"
|
||||
>
|
||||
Close
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
+231
-43
@@ -13,11 +13,26 @@ import {
|
||||
} from "@/components/ui/table";
|
||||
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
|
||||
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 } from "lucide-react";
|
||||
import {
|
||||
Loader2,
|
||||
Trash,
|
||||
RefreshCw,
|
||||
Download,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
Eye,
|
||||
Mail,
|
||||
} from "lucide-react";
|
||||
|
||||
export default function InquiryPage() {
|
||||
const [inquiries, setInquiries] = useState<any[]>([]);
|
||||
@@ -25,6 +40,12 @@ export default function InquiryPage() {
|
||||
|
||||
const [searchText, setSearchText] = useState("");
|
||||
|
||||
const [viewOpen, setViewOpen] = useState(false);
|
||||
const [viewData, setViewData] = useState<any>(null);
|
||||
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const itemsPerPage = 10;
|
||||
|
||||
const fetchAll = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
@@ -50,6 +71,23 @@ export default function InquiryPage() {
|
||||
);
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
setCurrentPage(1);
|
||||
}, [searchText]);
|
||||
|
||||
const totalPages = Math.ceil(filteredInquiries.length / itemsPerPage);
|
||||
const indexOfLastItem = currentPage * itemsPerPage;
|
||||
const indexOfFirstItem = indexOfLastItem - itemsPerPage;
|
||||
const currentItems = filteredInquiries.slice(
|
||||
indexOfFirstItem,
|
||||
indexOfLastItem,
|
||||
);
|
||||
|
||||
function openView(item: any) {
|
||||
setViewData(item);
|
||||
setViewOpen(true);
|
||||
}
|
||||
|
||||
async function handleDelete(id: number) {
|
||||
if (!confirm("Delete inquiry?")) return;
|
||||
await deleteInquiryApi(id);
|
||||
@@ -72,24 +110,29 @@ export default function InquiryPage() {
|
||||
|
||||
return (
|
||||
<div className="p-6 space-y-6">
|
||||
<div className="flex justify-between items-center gap-3 flex-wrap">
|
||||
<h1 className="text-2xl font-bold">Inquiries</h1>
|
||||
<div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
|
||||
<h1 className="text-3xl font-bold">Inquiries</h1>
|
||||
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Input
|
||||
placeholder="Search name / phone / email / subject..."
|
||||
placeholder="Search name / phone / subject..."
|
||||
value={searchText}
|
||||
onChange={(e) => setSearchText(e.target.value)}
|
||||
className="w-[260px]"
|
||||
className="w-[280px] text-base"
|
||||
/>
|
||||
|
||||
<Button variant="outline" onClick={fetchAll} disabled={loading}>
|
||||
<RefreshCw className="mr-2 h-4 w-4" />
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={fetchAll}
|
||||
disabled={loading}
|
||||
className="text-base"
|
||||
>
|
||||
<RefreshCw className="mr-2 h-5 w-5" />
|
||||
Refresh
|
||||
</Button>
|
||||
|
||||
<Button variant="outline" onClick={handleExport}>
|
||||
<Download className="mr-2 h-4 w-4" />
|
||||
<Button onClick={handleExport} className="text-base">
|
||||
<Download className="mr-2 h-5 w-5" />
|
||||
Export
|
||||
</Button>
|
||||
</div>
|
||||
@@ -97,62 +140,100 @@ export default function InquiryPage() {
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Inquiry List</CardTitle>
|
||||
<CardTitle className="text-xl">Customer Inquiries</CardTitle>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent>
|
||||
<div className="overflow-x-auto">
|
||||
<Table className="min-w-[900px]">
|
||||
<TableHeader>
|
||||
<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">
|
||||
<TableHeader className="sticky top-0 z-20 bg-background shadow-sm">
|
||||
<TableRow>
|
||||
<TableHead>ID</TableHead>
|
||||
<TableHead>Name</TableHead>
|
||||
<TableHead>Phone</TableHead>
|
||||
<TableHead>Email</TableHead>
|
||||
<TableHead>Subject</TableHead>
|
||||
<TableHead>Message</TableHead>
|
||||
<TableHead>Date</TableHead>
|
||||
<TableHead>Actions</TableHead>
|
||||
<TableHead className="w-[60px] bg-background font-bold text-sm">
|
||||
ID
|
||||
</TableHead>
|
||||
<TableHead className="w-[220px] bg-background font-bold text-sm">
|
||||
Customer Details
|
||||
</TableHead>
|
||||
<TableHead className="w-[200px] bg-background font-bold text-sm">
|
||||
Subject
|
||||
</TableHead>
|
||||
<TableHead className="w-[150px] bg-background font-bold text-sm">
|
||||
Date
|
||||
</TableHead>
|
||||
<TableHead className="w-[280px] bg-background font-bold text-sm">
|
||||
Message Snippet
|
||||
</TableHead>
|
||||
<TableHead className="w-[120px] bg-background font-bold text-right text-sm">
|
||||
Actions
|
||||
</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
|
||||
<TableBody>
|
||||
{loading ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={8} className="text-center">
|
||||
<Loader2 className="h-6 w-6 animate-spin mx-auto" />
|
||||
<TableCell colSpan={6} className="text-center py-10">
|
||||
<Loader2 className="h-8 w-8 animate-spin mx-auto" />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : filteredInquiries.length === 0 ? (
|
||||
) : currentItems.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={8} className="text-center">
|
||||
<TableCell
|
||||
colSpan={6}
|
||||
className="text-center text-muted-foreground py-10 text-base"
|
||||
>
|
||||
No inquiries found
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : (
|
||||
filteredInquiries.map((item) => (
|
||||
<TableRow key={item.id}>
|
||||
<TableCell>{item.id}</TableCell>
|
||||
<TableCell>{item.fullName}</TableCell>
|
||||
<TableCell>{item.number}</TableCell>
|
||||
<TableCell>{item.emailId}</TableCell>
|
||||
<TableCell>{item.subject}</TableCell>
|
||||
|
||||
<TableCell className="max-w-[250px] whitespace-normal">
|
||||
{item.message}
|
||||
currentItems.map((item) => (
|
||||
<TableRow key={item.id} className="hover:bg-muted/50">
|
||||
<TableCell className="font-mono text-xs">
|
||||
{item.id}
|
||||
</TableCell>
|
||||
|
||||
<TableCell>
|
||||
<div className="font-semibold text-base truncate">
|
||||
{item.fullName}
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground truncate">
|
||||
{item.emailId}
|
||||
</div>
|
||||
<div className="text-[11px] font-medium">
|
||||
{item.number}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="text-sm font-medium line-clamp-2">
|
||||
{item.subject || "-"}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="text-sm">
|
||||
{new Date(item.createdAt).toLocaleDateString()}
|
||||
</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">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="destructive"
|
||||
onClick={() => handleDelete(item.id)}>
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
className="h-9 w-9"
|
||||
onClick={() => openView(item)}
|
||||
>
|
||||
<Eye className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
className="h-9 w-9 text-destructive hover:text-destructive hover:bg-destructive/10"
|
||||
onClick={() => handleDelete(item.id)}
|
||||
>
|
||||
<Trash className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
@@ -160,8 +241,115 @@ export default function InquiryPage() {
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
{!loading && filteredInquiries.length > 0 && (
|
||||
<div className="flex items-center justify-between px-2 py-6 border-t">
|
||||
<div className="text-base text-muted-foreground">
|
||||
Showing{" "}
|
||||
<span className="font-semibold">{indexOfFirstItem + 1}</span> to{" "}
|
||||
<span className="font-semibold">
|
||||
{Math.min(indexOfLastItem, filteredInquiries.length)}
|
||||
</span>{" "}
|
||||
of{" "}
|
||||
<span className="font-semibold">
|
||||
{filteredInquiries.length}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-6">
|
||||
<div className="text-base font-semibold">
|
||||
Page {currentPage} of {totalPages}
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="h-10 w-10"
|
||||
onClick={() =>
|
||||
setCurrentPage((prev) => Math.max(prev - 1, 1))
|
||||
}
|
||||
disabled={currentPage === 1}
|
||||
>
|
||||
<ChevronLeft className="h-5 w-5" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="h-10 w-10"
|
||||
onClick={() =>
|
||||
setCurrentPage((prev) => Math.min(prev + 1, totalPages))
|
||||
}
|
||||
disabled={currentPage === totalPages || totalPages === 0}
|
||||
>
|
||||
<ChevronRight className="h-5 w-5" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Dialog open={viewOpen} onOpenChange={setViewOpen}>
|
||||
<DialogContent className="w-full !max-w-3xl max-h-[85vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-2xl border-b pb-2 flex items-center gap-2">
|
||||
<Mail className="h-6 w-6" /> Inquiry Details
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
{viewData && (
|
||||
<div className="space-y-6 py-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<p className="text-xs uppercase font-bold text-muted-foreground">
|
||||
Customer Information
|
||||
</p>
|
||||
<p className="text-lg font-bold text-primary">
|
||||
{viewData.fullName}
|
||||
</p>
|
||||
<p className="text-sm font-medium">{viewData.emailId}</p>
|
||||
<p className="text-sm">{viewData.number}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs uppercase font-bold text-muted-foreground">
|
||||
Received Date
|
||||
</p>
|
||||
<p className="text-sm">
|
||||
{new Date(viewData.createdAt).toLocaleString()}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<p className="text-xs uppercase font-bold text-muted-foreground">
|
||||
Subject
|
||||
</p>
|
||||
<p className="text-base font-semibold">
|
||||
{viewData.subject || "No Subject"}
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-4 bg-muted/30 rounded-lg border">
|
||||
<p className="text-xs uppercase font-bold text-muted-foreground mb-2">
|
||||
Message
|
||||
</p>
|
||||
<p className="text-sm leading-relaxed whitespace-pre-wrap">
|
||||
{viewData.message || "No message content."}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<DialogFooter>
|
||||
<Button
|
||||
onClick={() => setViewOpen(false)}
|
||||
className="w-full md:w-auto"
|
||||
>
|
||||
Close
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
+234
-134
@@ -19,6 +19,7 @@ import {
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
|
||||
import {
|
||||
Dialog,
|
||||
@@ -37,11 +38,13 @@ import {
|
||||
Eye,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
Newspaper,
|
||||
} from "lucide-react";
|
||||
|
||||
export default function NewsPage() {
|
||||
const [news, setNews] = useState<any[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [totalItems, setTotalItems] = useState(0);
|
||||
|
||||
const [searchText, setSearchText] = useState("");
|
||||
|
||||
@@ -66,29 +69,28 @@ export default function NewsPage() {
|
||||
const fetchAll = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await getNewsApi();
|
||||
const res = await getNewsApi(currentPage, itemsPerPage);
|
||||
|
||||
setNews(res?.data || []);
|
||||
setTotalItems(res?.meta?.total || 0);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
}, [currentPage, itemsPerPage]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchAll();
|
||||
}, [fetchAll]);
|
||||
|
||||
const filteredNews = news.filter((item) =>
|
||||
item.Headline?.toLowerCase().includes(searchText.toLowerCase()),
|
||||
const filteredNews = news.filter(
|
||||
(item) =>
|
||||
item.Headline?.toLowerCase().includes(searchText.toLowerCase()) ||
|
||||
item.Author?.toLowerCase().includes(searchText.toLowerCase()),
|
||||
);
|
||||
|
||||
const totalPages = Math.ceil(filteredNews.length / itemsPerPage);
|
||||
const startIndex = (currentPage - 1) * itemsPerPage;
|
||||
const paginatedData = filteredNews.slice(
|
||||
startIndex,
|
||||
startIndex + itemsPerPage,
|
||||
);
|
||||
const totalPages = Math.ceil(totalItems / itemsPerPage);
|
||||
|
||||
function handleChange(e: any) {
|
||||
setForm({ ...form, [e.target.name]: e.target.value });
|
||||
@@ -109,7 +111,6 @@ export default function NewsPage() {
|
||||
|
||||
function openEdit(item: any) {
|
||||
setEditing(item);
|
||||
|
||||
setForm({
|
||||
headline: item.Headline || "",
|
||||
content: item.Content || "",
|
||||
@@ -118,7 +119,6 @@ export default function NewsPage() {
|
||||
date: item.Date ? item.Date.split("T")[0] : "",
|
||||
author: item.Author || "",
|
||||
});
|
||||
|
||||
setOpenModal(true);
|
||||
}
|
||||
|
||||
@@ -149,18 +149,17 @@ export default function NewsPage() {
|
||||
|
||||
return (
|
||||
<div className="p-6 space-y-6">
|
||||
<div className="flex justify-between items-center flex-wrap gap-3">
|
||||
<h1 className="text-2xl font-bold">News Media</h1>
|
||||
<div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
|
||||
<h1 className="text-3xl font-bold font-sans tracking-tight">
|
||||
News Media
|
||||
</h1>
|
||||
|
||||
<div className="flex gap-2 flex-wrap items-center">
|
||||
<div className="flex flex-wrap gap-3 items-center">
|
||||
<Input
|
||||
placeholder="Search headline..."
|
||||
placeholder="Filter headline..."
|
||||
value={searchText}
|
||||
onChange={(e) => {
|
||||
setSearchText(e.target.value);
|
||||
setCurrentPage(1);
|
||||
}}
|
||||
className="w-[250px]"
|
||||
onChange={(e) => setSearchText(e.target.value)}
|
||||
className="w-[250px] text-base"
|
||||
/>
|
||||
|
||||
<select
|
||||
@@ -169,98 +168,131 @@ export default function NewsPage() {
|
||||
setItemsPerPage(Number(e.target.value));
|
||||
setCurrentPage(1);
|
||||
}}
|
||||
className="border px-2 py-1 rounded">
|
||||
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>
|
||||
|
||||
<Button variant="outline" onClick={fetchAll} disabled={loading}>
|
||||
<RefreshCw className="mr-2 h-4 w-4" />
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={fetchAll}
|
||||
disabled={loading}
|
||||
className="text-base"
|
||||
>
|
||||
<RefreshCw className="mr-2 h-5 w-5" />
|
||||
Refresh
|
||||
</Button>
|
||||
|
||||
<Button onClick={openAdd}>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
<Button onClick={openAdd} className="text-base">
|
||||
<Plus className="mr-2 h-5 w-5" />
|
||||
Add News
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<Card className="shadow-sm">
|
||||
<CardHeader>
|
||||
<CardTitle>News List</CardTitle>
|
||||
<CardTitle className="text-xl">News Archives</CardTitle>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent>
|
||||
<div className="overflow-x-auto">
|
||||
<Table className="min-w-[900px] table-fixed">
|
||||
<TableHeader>
|
||||
<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">
|
||||
<TableHeader className="sticky top-0 z-20 bg-background shadow-sm">
|
||||
<TableRow>
|
||||
<TableHead className="w-[60px]">ID</TableHead>
|
||||
<TableHead className="w-[220px]">Headline</TableHead>
|
||||
<TableHead className="w-[120px]">Author</TableHead>
|
||||
<TableHead className="w-[120px]">Date</TableHead>
|
||||
<TableHead className="w-[260px]">Content</TableHead>
|
||||
<TableHead className="w-[150px]">Actions</TableHead>
|
||||
<TableHead className="w-[80px] bg-background font-bold">
|
||||
ID
|
||||
</TableHead>
|
||||
<TableHead className="w-[280px] bg-background font-bold">
|
||||
Headline
|
||||
</TableHead>
|
||||
<TableHead className="w-[150px] bg-background font-bold">
|
||||
Author
|
||||
</TableHead>
|
||||
<TableHead className="w-[140px] bg-background font-bold">
|
||||
Date
|
||||
</TableHead>
|
||||
<TableHead className="w-[250px] bg-background font-bold">
|
||||
Content Preview
|
||||
</TableHead>
|
||||
<TableHead className="w-[150px] bg-background font-bold text-right">
|
||||
Actions
|
||||
</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
|
||||
<TableBody>
|
||||
{loading ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={6} className="text-center">
|
||||
<Loader2 className="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>
|
||||
) : paginatedData.length === 0 ? (
|
||||
) : filteredNews.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={6} className="text-center">
|
||||
No news found
|
||||
<TableCell
|
||||
colSpan={6}
|
||||
className="text-center text-muted-foreground py-10 text-base"
|
||||
>
|
||||
No news articles found
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : (
|
||||
paginatedData.map((item) => (
|
||||
<TableRow key={item.Id}>
|
||||
<TableCell>{item.Id}</TableCell>
|
||||
|
||||
<TableCell className="break-words whitespace-normal">
|
||||
{item.Headline}
|
||||
filteredNews.map((item) => (
|
||||
<TableRow key={item.Id} className="hover:bg-muted/50">
|
||||
<TableCell className="font-mono text-xs">
|
||||
{item.Id}
|
||||
</TableCell>
|
||||
|
||||
<TableCell>{item.Author}</TableCell>
|
||||
|
||||
<TableCell>
|
||||
<div
|
||||
className="font-semibold text-base line-clamp-2"
|
||||
title={item.Headline}
|
||||
>
|
||||
{item.Headline}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="text-sm font-medium">
|
||||
{item.Author || "-"}
|
||||
</TableCell>
|
||||
<TableCell className="text-sm">
|
||||
{item.Date
|
||||
? new Date(item.Date).toLocaleDateString()
|
||||
: "-"}
|
||||
</TableCell>
|
||||
|
||||
<TableCell className="break-words whitespace-normal">
|
||||
<TableCell>
|
||||
<div className="text-sm line-clamp-2 text-muted-foreground">
|
||||
{item.Content}
|
||||
</div>
|
||||
</TableCell>
|
||||
|
||||
<TableCell className="flex gap-2">
|
||||
<TableCell className="text-right">
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => openView(item)}>
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
className="h-9 w-9"
|
||||
onClick={() => openView(item)}
|
||||
>
|
||||
<Eye className="h-4 w-4" />
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => openEdit(item)}>
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
className="h-9 w-9"
|
||||
onClick={() => openEdit(item)}
|
||||
>
|
||||
<Pencil className="h-4 w-4" />
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
size="sm"
|
||||
variant="destructive"
|
||||
onClick={() => handleDelete(Number(item.Id))}>
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
className="h-9 w-9 text-destructive hover:bg-destructive/10"
|
||||
onClick={() => handleDelete(Number(item.Id))}
|
||||
>
|
||||
<Trash className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
@@ -269,129 +301,197 @@ export default function NewsPage() {
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
{/* PAGINATION */}
|
||||
<div className="flex justify-between items-center mt-4">
|
||||
<p className="text-sm">
|
||||
{!loading && totalItems > 0 && (
|
||||
<div className="flex items-center justify-between px-2 py-4 border-t">
|
||||
<div className="text-sm text-muted-foreground">
|
||||
Total <span className="font-bold">{totalItems}</span> articles
|
||||
(Page <span className="font-bold">{currentPage}</span> of{" "}
|
||||
{totalPages})
|
||||
</div>
|
||||
<div className="flex items-center gap-6">
|
||||
<div className="text-base font-semibold">
|
||||
Page {currentPage} of {totalPages}
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
size="icon"
|
||||
className="h-10 w-10"
|
||||
onClick={() =>
|
||||
setCurrentPage((prev) => Math.max(prev - 1, 1))
|
||||
}
|
||||
disabled={currentPage === 1}
|
||||
onClick={() => setCurrentPage((p) => p - 1)}>
|
||||
<ChevronLeft className="h-4 w-4" />
|
||||
>
|
||||
<ChevronLeft className="h-5 w-5" />
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={currentPage === totalPages}
|
||||
onClick={() => setCurrentPage((p) => p + 1)}>
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
size="icon"
|
||||
className="h-10 w-10"
|
||||
onClick={() =>
|
||||
setCurrentPage((prev) => Math.min(prev + 1, totalPages))
|
||||
}
|
||||
disabled={currentPage === totalPages || totalPages === 0}
|
||||
>
|
||||
<ChevronRight className="h-5 w-5" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* CREATE / EDIT MODAL */}
|
||||
<Dialog open={openModal} onOpenChange={setOpenModal}>
|
||||
<DialogContent className="w-[95vw] max-w-none max-h-[90vh] overflow-y-auto">
|
||||
<DialogContent className="w-full !max-w-5xl max-h-[90vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{editing ? "Edit News" : "Add News"}</DialogTitle>
|
||||
<DialogTitle className="text-2xl font-bold">
|
||||
{editing ? "Edit News Article" : "Add New News Article"}
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 mt-6">
|
||||
<div className="space-y-6">
|
||||
<h3 className="font-bold text-base border-b pb-2 text-primary">
|
||||
Article Information
|
||||
</h3>
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-1">
|
||||
<label className="text-sm font-semibold">Headline</label>
|
||||
<Input
|
||||
name="headline"
|
||||
placeholder="Headline"
|
||||
value={form.headline}
|
||||
onChange={handleChange}
|
||||
className="text-base"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<label className="text-sm font-semibold">Author</label>
|
||||
<Input
|
||||
name="author"
|
||||
placeholder="Author"
|
||||
value={form.author}
|
||||
onChange={handleChange}
|
||||
className="text-base"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<label className="text-sm font-semibold">Publish Date</label>
|
||||
<Input
|
||||
type="date"
|
||||
name="date"
|
||||
value={form.date}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
|
||||
<textarea
|
||||
name="firstPara"
|
||||
placeholder="First Paragraph"
|
||||
value={form.firstPara}
|
||||
onChange={handleChange}
|
||||
className="border rounded p-2 w-full min-h-[100px]"
|
||||
/>
|
||||
<textarea
|
||||
name="secondPara"
|
||||
placeholder="Second Paragraph"
|
||||
value={form.secondPara}
|
||||
onChange={handleChange}
|
||||
className="border rounded p-2 w-full min-h-[100px]"
|
||||
/>
|
||||
<textarea
|
||||
name="content"
|
||||
placeholder="Content"
|
||||
value={form.content}
|
||||
onChange={handleChange}
|
||||
className="border rounded p-2 w-full min-h-[150px]"
|
||||
className="text-base"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-1 pt-2">
|
||||
<label className="text-sm font-semibold">Intro Paragraph</label>
|
||||
<Textarea
|
||||
name="firstPara"
|
||||
value={form.firstPara}
|
||||
onChange={handleChange}
|
||||
className="min-h-[140px] text-base"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setOpenModal(false)}>
|
||||
<div className="space-y-6">
|
||||
<h3 className="font-bold text-base border-b pb-2 text-primary">
|
||||
Story Details
|
||||
</h3>
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-1">
|
||||
<label className="text-sm font-semibold">
|
||||
Second Paragraph
|
||||
</label>
|
||||
<Textarea
|
||||
name="secondPara"
|
||||
value={form.secondPara}
|
||||
onChange={handleChange}
|
||||
className="min-h-[140px] text-base"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<label className="text-sm font-semibold">Content</label>
|
||||
<Textarea
|
||||
name="content"
|
||||
value={form.content}
|
||||
onChange={handleChange}
|
||||
className="min-h-[200px] text-base"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter className="mt-10 pt-6 border-t">
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => setOpenModal(false)}
|
||||
className="text-base"
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={handleSubmit}>
|
||||
{editing ? "Update" : "Create"}
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
className="px-10 text-base bg-primary text-white"
|
||||
>
|
||||
{editing ? "Save Changes" : "Publish Now"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* VIEW MODAL */}
|
||||
<Dialog open={viewOpen} onOpenChange={setViewOpen}>
|
||||
<DialogContent className="w-[95vw] max-w-none max-h-[90vh] overflow-y-auto p-6">
|
||||
<DialogContent className="w-full !max-w-4xl max-h-[85vh] overflow-y-auto p-6">
|
||||
<DialogHeader>
|
||||
<DialogTitle>News Details</DialogTitle>
|
||||
<DialogTitle className="text-2xl border-b pb-2 flex items-center gap-2">
|
||||
<Newspaper className="h-6 w-6 text-primary" /> News Preview
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
{viewData && (
|
||||
<div className="space-y-4 text-sm">
|
||||
<b>Headline:</b>
|
||||
<p>{viewData.Headline}</p>
|
||||
|
||||
<b>Author:</b>
|
||||
<p>{viewData.Author}</p>
|
||||
|
||||
<b>Date:</b>
|
||||
<p>
|
||||
<div className="space-y-6 py-4">
|
||||
<div className="space-y-2">
|
||||
<h2 className="text-2xl font-bold leading-tight">
|
||||
{viewData.Headline}
|
||||
</h2>
|
||||
<div className="flex gap-4 text-sm text-muted-foreground font-medium italic">
|
||||
<span>By: {viewData.Author || "Anonymous"}</span>
|
||||
<span>•</span>
|
||||
<span>
|
||||
{viewData.Date
|
||||
? new Date(viewData.Date).toLocaleDateString()
|
||||
: "-"}
|
||||
</p>
|
||||
? new Date(viewData.Date).toLocaleDateString("en-IN", {
|
||||
dateStyle: "long",
|
||||
})
|
||||
: "No Date"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<b>First Para:</b>
|
||||
<div className="space-y-5 leading-relaxed text-base">
|
||||
<div className="bg-muted/30 p-4 rounded-lg border-l-4 border-primary">
|
||||
<p className="whitespace-pre-line">{viewData.FirstPara}</p>
|
||||
|
||||
<b>Second Para:</b>
|
||||
</div>
|
||||
<div className="space-y-4 px-1">
|
||||
<p className="whitespace-pre-line">{viewData.SecondPara}</p>
|
||||
|
||||
<b>Content:</b>
|
||||
<p className="whitespace-pre-line">{viewData.Content}</p>
|
||||
<hr />
|
||||
<p className="whitespace-pre-line text-muted-foreground">
|
||||
{viewData.Content}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<DialogFooter>
|
||||
<Button onClick={() => setViewOpen(false)}>Close</Button>
|
||||
<Button
|
||||
onClick={() => setViewOpen(false)}
|
||||
className="w-full md:w-auto"
|
||||
>
|
||||
Close Preview
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
Reference in New Issue
Block a user