1172 lines
32 KiB
TypeScript
1172 lines
32 KiB
TypeScript
import { useState, useEffect, useCallback } from "react";
|
||
import { AxiosError } from "axios";
|
||
import { Eye } from "lucide-react";
|
||
import { BytescaleUploader } from "@/components/BytescaleUploader/BytescaleUploader";
|
||
|
||
import {
|
||
getDoctorsApi,
|
||
createDoctorApi,
|
||
updateDoctorApi,
|
||
getDoctorTimingApi,
|
||
} from "@/api/doctor";
|
||
import { getDepartmentsApi } from "@/api/department";
|
||
|
||
import {
|
||
Table,
|
||
TableBody,
|
||
TableCell,
|
||
TableHead,
|
||
TableHeader,
|
||
TableRow,
|
||
} from "@/components/ui/table";
|
||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||
import { Button } from "@/components/ui/button";
|
||
import {
|
||
Dialog,
|
||
DialogContent,
|
||
DialogHeader,
|
||
DialogTitle,
|
||
DialogFooter,
|
||
} from "@/components/ui/dialog";
|
||
import SeoPreview from "@/components/SeoPreview/SeoPreview";
|
||
import { Input } from "@/components/ui/input";
|
||
import { Badge } from "@/components/ui/badge";
|
||
import { Switch } from "@/components/ui/switch";
|
||
import { Label } from "@/components/ui/label";
|
||
|
||
import {
|
||
Loader2,
|
||
RefreshCw,
|
||
Plus,
|
||
Pencil,
|
||
ChevronLeft,
|
||
ChevronRight,
|
||
} from "lucide-react";
|
||
import { Textarea } from "@/components/ui/textarea";
|
||
|
||
interface Department {
|
||
departmentId: string;
|
||
name: string;
|
||
}
|
||
|
||
const DAYS = [
|
||
"monday",
|
||
"tuesday",
|
||
"wednesday",
|
||
"thursday",
|
||
"friday",
|
||
"saturday",
|
||
"sunday",
|
||
"additional",
|
||
];
|
||
|
||
export default function DoctorPage() {
|
||
const WEBSITE_URL = import.meta.env.VITE_WEBSITE_URL;
|
||
|
||
const [doctors, setDoctors] = useState<any[]>([]);
|
||
const [departments, setDepartments] = useState<Department[]>([]);
|
||
const [loading, setLoading] = useState(true);
|
||
const [error, setError] = useState("");
|
||
|
||
const [openModal, setOpenModal] = useState(false);
|
||
const [editing, setEditing] = useState<any>(null);
|
||
|
||
const [searchText, setSearchText] = useState("");
|
||
const [filterDepartment, setFilterDepartment] = useState("");
|
||
|
||
const [currentPage, setCurrentPage] = useState(1);
|
||
const itemsPerPage = 10;
|
||
|
||
const [form, setForm] = useState<any>({
|
||
doctorId: "",
|
||
name: "",
|
||
image: "",
|
||
designation: "",
|
||
workingStatus: "",
|
||
qualification: "",
|
||
isActive: true,
|
||
globalSortOrder: 0,
|
||
departments: [],
|
||
professionalSummary: "",
|
||
seoTitle: "",
|
||
metaDescription: "",
|
||
ogTitle: "",
|
||
ogDescription: "",
|
||
ogImage: "",
|
||
specializations: [
|
||
{
|
||
name: "",
|
||
description: "",
|
||
},
|
||
],
|
||
focusKeyphrase: "",
|
||
slug: "",
|
||
tags: [],
|
||
});
|
||
const [openOgPreview, setOpenOgPreview] = useState(false);
|
||
const [previewDoctor, setPreviewDoctor] = useState<any>(null);
|
||
|
||
const fetchAll = useCallback(async () => {
|
||
setLoading(true);
|
||
setError("");
|
||
try {
|
||
const [docRes, depRes] = await Promise.all([
|
||
getDoctorsApi(),
|
||
getDepartmentsApi(),
|
||
]);
|
||
setDoctors(docRes?.data || []);
|
||
setDepartments(depRes?.data || []);
|
||
} catch (err) {
|
||
if (err instanceof AxiosError) {
|
||
setError(err.response?.data?.message || "Failed to load data");
|
||
} else {
|
||
setError("Something went wrong");
|
||
}
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
fetchAll();
|
||
}, [fetchAll]);
|
||
|
||
const filteredDoctors = doctors
|
||
.filter((doc) => {
|
||
const matchesSearch =
|
||
doc.name.toLowerCase().includes(searchText.toLowerCase()) ||
|
||
doc.doctorId.toLowerCase().includes(searchText.toLowerCase());
|
||
|
||
const matchesDepartment = filterDepartment
|
||
? doc.departments?.some((d: any) => d.departmentId === filterDepartment)
|
||
: true;
|
||
|
||
return matchesSearch && matchesDepartment;
|
||
})
|
||
.sort((a, b) => {
|
||
if (!filterDepartment) {
|
||
return a.globalSortOrder - b.globalSortOrder;
|
||
}
|
||
|
||
const aDept = a.departments.find(
|
||
(d: any) => d.departmentId === filterDepartment,
|
||
);
|
||
|
||
const bDept = b.departments.find(
|
||
(d: any) => d.departmentId === filterDepartment,
|
||
);
|
||
|
||
return (
|
||
(aDept?.deptSortOrder ?? Number.MAX_SAFE_INTEGER) -
|
||
(bDept?.deptSortOrder ?? Number.MAX_SAFE_INTEGER)
|
||
);
|
||
});
|
||
|
||
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) {
|
||
let value =
|
||
e.target.type === "number" ? Number(e.target.value) : e.target.value;
|
||
if (e.target.name === "slug") {
|
||
value = value
|
||
.toLowerCase()
|
||
.replace(/\s+/g, "-") // replace spaces with -
|
||
.replace(/[^\w-]+/g, "") // remove special chars
|
||
.replace(/--+/g, "-"); // remove duplicate -
|
||
}
|
||
|
||
setForm({ ...form, [e.target.name]: value });
|
||
}
|
||
|
||
const handleToggleStatus = async (doc: any) => {
|
||
try {
|
||
const newStatus = !doc.isActive;
|
||
|
||
const payload = {
|
||
isActive: newStatus,
|
||
};
|
||
|
||
await updateDoctorApi(doc.doctorId, payload, "toggleStatus");
|
||
|
||
fetchAll();
|
||
} catch (err) {
|
||
console.error("Failed to update status", err);
|
||
}
|
||
};
|
||
|
||
function handleDepartmentToggle(depId: string) {
|
||
const exists = form.departments.find((d: any) => d.departmentId === depId);
|
||
if (exists) {
|
||
setForm({
|
||
...form,
|
||
departments: form.departments.filter(
|
||
(d: any) => d.departmentId !== depId,
|
||
),
|
||
});
|
||
} else {
|
||
setForm({
|
||
...form,
|
||
departments: [
|
||
...form.departments,
|
||
{ departmentId: depId, sortOrder: 0, timing: {} },
|
||
],
|
||
});
|
||
}
|
||
}
|
||
|
||
function handleDeptSortChange(depId: string, value: string) {
|
||
setForm({
|
||
...form,
|
||
departments: form.departments.map((d: any) =>
|
||
d.departmentId === depId ? { ...d, sortOrder: Number(value) } : d,
|
||
),
|
||
});
|
||
}
|
||
|
||
function handleTimingChange(depId: string, day: string, value: string) {
|
||
setForm({
|
||
...form,
|
||
departments: form.departments.map((d: any) =>
|
||
d.departmentId === depId
|
||
? { ...d, timing: { ...d.timing, [day]: value } }
|
||
: d,
|
||
),
|
||
});
|
||
}
|
||
|
||
function openAdd() {
|
||
setEditing(null);
|
||
setForm({
|
||
doctorId: "",
|
||
name: "",
|
||
image: "",
|
||
designation: "",
|
||
workingStatus: "",
|
||
qualification: "",
|
||
experience: "",
|
||
professionalSummary: "",
|
||
isActive: true,
|
||
globalSortOrder: 0,
|
||
specializations: [
|
||
{
|
||
name: "",
|
||
description: "",
|
||
},
|
||
],
|
||
departments: [],
|
||
seoTitle: "",
|
||
metaDescription: "",
|
||
focusKeyphrase: "",
|
||
slug: "",
|
||
tags: [],
|
||
ogTitle: "",
|
||
ogDescription: "",
|
||
ogImage: "",
|
||
});
|
||
setOpenModal(true);
|
||
}
|
||
|
||
async function openEdit(doc: any) {
|
||
setEditing(doc);
|
||
try {
|
||
const timingRes = await getDoctorTimingApi(doc.doctorId);
|
||
const timingData = timingRes?.data?.departments || [];
|
||
|
||
setForm({
|
||
doctorId: doc.doctorId,
|
||
name: doc.name,
|
||
image: doc.image || "",
|
||
designation: doc.designation,
|
||
workingStatus: doc.workingStatus,
|
||
qualification: doc.qualification,
|
||
isActive: doc.isActive ?? true,
|
||
globalSortOrder: doc.globalSortOrder ?? 0,
|
||
experience: doc.experience || "",
|
||
professionalSummary: doc.professionalSummary || "",
|
||
seoTitle: doc.seo?.seoTitle || "",
|
||
metaDescription: doc.seo?.metaDescription || "",
|
||
focusKeyphrase: doc.seo?.focusKeyphrase || "",
|
||
slug: doc.seo?.slug || "",
|
||
tags: doc.seo?.tags || [],
|
||
ogTitle: doc.seo?.ogTitle || "",
|
||
ogDescription: doc.seo?.ogDescription || "",
|
||
ogImage: doc.seo?.ogImage || "",
|
||
specializations: doc.specializations?.length
|
||
? doc.specializations.map((item: any) => ({
|
||
name: item.name || "",
|
||
description: item.description || "",
|
||
}))
|
||
: [
|
||
{
|
||
name: "",
|
||
description: "",
|
||
},
|
||
],
|
||
departments: timingData.map((d: any) => ({
|
||
departmentId: d.departmentId,
|
||
sortOrder: d.deptSortOrder ?? 0,
|
||
timing: d.timing || {},
|
||
})),
|
||
});
|
||
setOpenModal(true);
|
||
} catch (err) {
|
||
console.error("Error fetching doctor details:", err);
|
||
}
|
||
}
|
||
|
||
function handlePreview(doc: any) {
|
||
setPreviewDoctor(doc);
|
||
setOpenOgPreview(true);
|
||
}
|
||
|
||
async function handleSubmit() {
|
||
try {
|
||
if (editing) {
|
||
await updateDoctorApi(editing.doctorId, form);
|
||
} else {
|
||
await createDoctorApi(form);
|
||
}
|
||
setOpenModal(false);
|
||
fetchAll();
|
||
} catch (error) {
|
||
console.error(error);
|
||
}
|
||
}
|
||
|
||
const createSlug = (text: string) => {
|
||
if (!text) return "";
|
||
|
||
return text
|
||
.toString()
|
||
.toLowerCase()
|
||
.trim()
|
||
.replace(/\s+/g, "-")
|
||
.replace(/[^\w-]+/g, "")
|
||
.replace(/--+/g, "-");
|
||
};
|
||
|
||
const getDoctorUrl = (doctor: any) => {
|
||
const slug = doctor?.seo?.slug || createSlug(doctor?.name);
|
||
|
||
return `${WEBSITE_URL}/${doctor?.doctorId}/${slug}`;
|
||
};
|
||
|
||
return (
|
||
<div className="p-6 space-y-6">
|
||
<div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
|
||
<h1 className="text-3xl font-bold">Doctors</h1>
|
||
|
||
<div className="flex flex-wrap gap-3">
|
||
<Input
|
||
placeholder="Search doctor..."
|
||
value={searchText}
|
||
onChange={(e) => setSearchText(e.target.value)}
|
||
className="w-[250px] text-base"
|
||
/>
|
||
|
||
<select
|
||
value={filterDepartment}
|
||
onChange={(e) => setFilterDepartment(e.target.value)}
|
||
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) => (
|
||
<option key={dep.departmentId} value={dep.departmentId}>
|
||
{dep.name}
|
||
</option>
|
||
))}
|
||
</select>
|
||
|
||
<Button
|
||
variant="outline"
|
||
onClick={fetchAll}
|
||
disabled={loading}
|
||
className="text-base"
|
||
>
|
||
<RefreshCw className="mr-2 h-5 w-5" />
|
||
Refresh
|
||
</Button>
|
||
|
||
<Button onClick={openAdd} className="text-base">
|
||
<Plus className="mr-2 h-5 w-5" />
|
||
Add Doctor
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
{error && (
|
||
<div className="p-4 text-red-600 bg-red-50 border rounded-md text-base">
|
||
{error}
|
||
</div>
|
||
)}
|
||
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle className="text-xl">Doctor List</CardTitle>
|
||
</CardHeader>
|
||
|
||
<CardContent className="p-0 sm:p-6 space-y-4">
|
||
<div className="rounded-md border overflow-x-auto overflow-y-auto max-h-[650px] relative">
|
||
<Table className="w-full min-w-[1100px] table-fixed border-separate border-spacing-0">
|
||
<TableHeader className="sticky top-0 z-20 bg-background shadow-sm">
|
||
<TableRow>
|
||
<TableHead className="w-[80px] bg-background text-sm font-bold">
|
||
Priority{" "}
|
||
</TableHead>
|
||
<TableHead className="w-[180px] bg-background text-sm font-bold">
|
||
Doctor Info
|
||
</TableHead>
|
||
<TableHead className="w-[150px] bg-background text-sm font-bold">
|
||
Designation
|
||
</TableHead>
|
||
<TableHead className="w-[220px] bg-background text-sm font-bold">
|
||
Departments (Hierarchy)
|
||
</TableHead>
|
||
<TableHead className="w-[80px] bg-background text-sm font-bold">
|
||
Status (Active)
|
||
</TableHead>
|
||
<TableHead className="w-[80px] bg-background text-right text-sm font-bold">
|
||
Actions
|
||
</TableHead>
|
||
</TableRow>
|
||
</TableHeader>
|
||
|
||
<TableBody>
|
||
{loading ? (
|
||
<TableRow>
|
||
<TableCell colSpan={6} className="text-center py-10">
|
||
<Loader2 className="h-8 w-8 animate-spin mx-auto" />
|
||
</TableCell>
|
||
</TableRow>
|
||
) : currentItems.length === 0 ? (
|
||
<TableRow>
|
||
<TableCell
|
||
colSpan={6}
|
||
className="text-center text-muted-foreground py-10 text-base"
|
||
>
|
||
No doctors found
|
||
</TableCell>
|
||
</TableRow>
|
||
) : (
|
||
currentItems.map((doc) => (
|
||
<TableRow key={doc.doctorId} className="hover:bg-muted/50">
|
||
<TableCell className="font-mono text-sm">
|
||
{doc.globalSortOrder}
|
||
</TableCell>
|
||
|
||
<TableCell>
|
||
<div
|
||
className="font-semibold text-base truncate"
|
||
title={doc.name}
|
||
>
|
||
{doc.name}
|
||
</div>
|
||
<div className="text-xs text-muted-foreground truncate font-mono">
|
||
{doc.doctorId}
|
||
</div>
|
||
</TableCell>
|
||
|
||
<TableCell>
|
||
<div
|
||
className="truncate text-sm font-medium"
|
||
title={doc.designation}
|
||
>
|
||
{doc.designation || "-"}
|
||
</div>
|
||
<div className="text-xs italic text-muted-foreground truncate">
|
||
{doc.workingStatus}
|
||
</div>
|
||
</TableCell>
|
||
|
||
<TableCell>
|
||
<div className="flex flex-wrap gap-1">
|
||
{doc.departments?.map((d: any) => (
|
||
<Badge
|
||
key={d.departmentId}
|
||
variant="secondary"
|
||
className="text-xs px-2 h-6 leading-none flex items-center gap-1"
|
||
>
|
||
{d.departmentName}
|
||
<span className="bg-primary text-primary-foreground px-1 rounded-full text-[10px]">
|
||
{d.deptSortOrder}
|
||
</span>
|
||
</Badge>
|
||
))}
|
||
</div>
|
||
</TableCell>
|
||
|
||
<TableCell>
|
||
<div className="flex items-center gap-2">
|
||
<Switch
|
||
checked={doc.isActive}
|
||
onCheckedChange={() => handleToggleStatus(doc)}
|
||
/>
|
||
<Badge
|
||
variant={doc.isActive ? "default" : "secondary"}
|
||
>
|
||
{doc.isActive ? "Active" : "Hidden"}
|
||
</Badge>
|
||
</div>
|
||
</TableCell>
|
||
|
||
<TableCell className="text-right">
|
||
<div className="flex justify-end gap-2">
|
||
<Button
|
||
size="icon"
|
||
variant="ghost"
|
||
className="h-9 w-9"
|
||
onClick={() => handlePreview(doc)}
|
||
>
|
||
<Eye className="h-4 w-4" />
|
||
</Button>
|
||
<Button
|
||
size="icon"
|
||
variant="ghost"
|
||
className="h-9 w-9"
|
||
onClick={() => openEdit(doc)}
|
||
>
|
||
<Pencil className="h-4 w-4" />
|
||
</Button>
|
||
</div>
|
||
</TableCell>
|
||
</TableRow>
|
||
))
|
||
)}
|
||
</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>
|
||
|
||
<Dialog open={openModal} onOpenChange={setOpenModal}>
|
||
<DialogContent className="w-full !max-w-5xl h-[90vh] flex flex-col p-0 overflow-hidden">
|
||
<DialogHeader className="p-6 border-b bg-background z-10">
|
||
<DialogTitle className="text-2xl">
|
||
{editing ? "Edit Doctor" : "Add Doctor"}
|
||
</DialogTitle>
|
||
</DialogHeader>
|
||
|
||
<div className="flex-1 overflow-y-auto p-6">
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||
<div className="space-y-6">
|
||
<h3 className="font-bold text-base border-b pb-2">
|
||
Profile & Visibility
|
||
</h3>
|
||
<div className="space-y-4">
|
||
<div className="space-y-2">
|
||
<label className="text-sm font-semibold">
|
||
Doctor Photo
|
||
</label>
|
||
<BytescaleUploader
|
||
value={form.image}
|
||
folderPath="/doctors"
|
||
onChange={(url) => setForm({ ...form, image: url })}
|
||
/>
|
||
</div>
|
||
|
||
<div className="flex items-center justify-between p-3 border rounded-md bg-muted/30">
|
||
<Label
|
||
htmlFor="isActive"
|
||
className="text-base font-semibold cursor-pointer"
|
||
>
|
||
Active
|
||
</Label>
|
||
<Switch
|
||
id="isActive"
|
||
checked={form.isActive}
|
||
onCheckedChange={(val) =>
|
||
setForm({ ...form, isActive: val })
|
||
}
|
||
/>
|
||
</div>
|
||
|
||
<div className="space-y-1">
|
||
<Label
|
||
htmlFor="globalSortOrder"
|
||
className="text-sm font-semibold"
|
||
>
|
||
Sort Priority (Lower numbers show first)
|
||
</Label>
|
||
<Input
|
||
id="globalSortOrder"
|
||
name="globalSortOrder"
|
||
type="number"
|
||
value={form.globalSortOrder}
|
||
onChange={handleChange}
|
||
className="text-base"
|
||
/>
|
||
</div>
|
||
|
||
<div className="space-y-1">
|
||
<label className="text-sm font-semibold">Doctor ID</label>
|
||
<Input
|
||
name="doctorId"
|
||
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="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="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="Active / On Call"
|
||
value={form.workingStatus}
|
||
onChange={handleChange}
|
||
className="text-base"
|
||
/>
|
||
</div>
|
||
<div className="space-y-1">
|
||
<label className="text-sm font-semibold">
|
||
Brief Professional Summary
|
||
</label>
|
||
|
||
<Textarea
|
||
name="professionalSummary"
|
||
placeholder="Write a brief professional summary about the doctor..."
|
||
value={form.professionalSummary || ""}
|
||
onChange={(e) =>
|
||
setForm({
|
||
...form,
|
||
professionalSummary: e.target.value,
|
||
})
|
||
}
|
||
className="min-h-[120px] text-base"
|
||
/>
|
||
</div>
|
||
<div className="space-y-1">
|
||
<label className="text-sm font-semibold">
|
||
Qualification
|
||
</label>
|
||
<Input
|
||
name="qualification"
|
||
placeholder="MBBS, MD"
|
||
value={form.qualification}
|
||
onChange={handleChange}
|
||
className="text-base"
|
||
/>
|
||
</div>
|
||
<div className="space-y-1">
|
||
<label className="text-sm font-semibold">
|
||
Years of Experience
|
||
</label>
|
||
|
||
<Input
|
||
name="experience"
|
||
type="number"
|
||
min={0}
|
||
placeholder="e.g. 15"
|
||
value={form.experience || ""}
|
||
onChange={handleChange}
|
||
className="text-base"
|
||
/>
|
||
|
||
<p className="text-xs text-muted-foreground">
|
||
Enter total years of professional experience
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<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,
|
||
);
|
||
return (
|
||
<Button
|
||
key={dep.departmentId}
|
||
type="button"
|
||
variant={isSelected ? "default" : "outline"}
|
||
size="sm"
|
||
className="justify-start text-sm min-h-11 whitespace-normal break-words text-left py-2"
|
||
onClick={() =>
|
||
handleDepartmentToggle(dep.departmentId)
|
||
}
|
||
>
|
||
{dep.name}
|
||
</Button>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
<div className="space-y-4 p-5 border rounded-md bg-muted/20">
|
||
<div className="flex items-center justify-between">
|
||
<p className="text-base font-bold">Specializations</p>
|
||
|
||
<Button
|
||
type="button"
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={() =>
|
||
setForm({
|
||
...form,
|
||
specializations: [
|
||
...(form.specializations || []),
|
||
{
|
||
name: "",
|
||
description: "",
|
||
},
|
||
],
|
||
})
|
||
}
|
||
>
|
||
+ Add
|
||
</Button>
|
||
</div>
|
||
|
||
{form.specializations?.length === 0 ? (
|
||
<p className="text-sm text-muted-foreground italic">
|
||
No specializations added
|
||
</p>
|
||
) : (
|
||
<div className="space-y-4">
|
||
{form.specializations?.map(
|
||
(specialization: any, index: number) => (
|
||
<div
|
||
key={index}
|
||
className="border rounded-lg p-4 space-y-3 bg-background"
|
||
>
|
||
<div className="flex items-center justify-between">
|
||
<p className="font-medium text-sm">
|
||
Specialization {index + 1}
|
||
</p>
|
||
|
||
<Button
|
||
type="button"
|
||
variant="ghost"
|
||
size="sm"
|
||
onClick={() => {
|
||
const updated = form.specializations.filter(
|
||
(_: any, i: number) => i !== index,
|
||
);
|
||
|
||
setForm({
|
||
...form,
|
||
specializations: updated,
|
||
});
|
||
}}
|
||
>
|
||
Remove
|
||
</Button>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label>Name</Label>
|
||
<Input
|
||
placeholder="e.g. Cardiology"
|
||
value={specialization.name}
|
||
onChange={(e) => {
|
||
const updated = [...form.specializations];
|
||
|
||
updated[index].name = e.target.value;
|
||
|
||
setForm({
|
||
...form,
|
||
specializations: updated,
|
||
});
|
||
}}
|
||
/>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label>Doctor-specific Description</Label>
|
||
|
||
<Textarea
|
||
placeholder="Describe how this doctor specializes in this area..."
|
||
value={specialization.description}
|
||
onChange={(e) => {
|
||
const updated = [...form.specializations];
|
||
|
||
updated[index].description = e.target.value;
|
||
|
||
setForm({
|
||
...form,
|
||
specializations: updated,
|
||
});
|
||
}}
|
||
/>
|
||
</div>
|
||
</div>
|
||
),
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<div className="space-y-4 p-5 border rounded-md bg-muted/20">
|
||
<div className="flex items-center justify-between">
|
||
<p className="text-base font-bold">SEO Settings</p>
|
||
|
||
<Badge variant="secondary">Optional</Badge>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label className="text-sm font-semibold">SEO Title</Label>
|
||
|
||
<Input
|
||
name="seoTitle"
|
||
placeholder="Best Cardiologist in Kochi | Dr John Doe"
|
||
value={form.seoTitle || ""}
|
||
onChange={handleChange}
|
||
className="text-base"
|
||
/>
|
||
|
||
<p className="text-xs text-muted-foreground">
|
||
Title shown in Google search results
|
||
</p>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label className="text-sm font-semibold">
|
||
Meta Description
|
||
</Label>
|
||
|
||
<Textarea
|
||
name="metaDescription"
|
||
placeholder="Short description shown in Google search..."
|
||
value={form.metaDescription || ""}
|
||
onChange={(e) =>
|
||
setForm({
|
||
...form,
|
||
metaDescription: e.target.value,
|
||
})
|
||
}
|
||
className="min-h-[100px] text-base"
|
||
/>
|
||
|
||
<p className="text-xs text-muted-foreground">
|
||
Recommended: 150–160 characters
|
||
</p>
|
||
</div>
|
||
<div className="border-t pt-5 space-y-4">
|
||
<div className="flex items-center justify-between">
|
||
<p className="text-base font-bold">
|
||
Open Graph (Social Preview)
|
||
</p>
|
||
|
||
<Badge variant="secondary">Optional</Badge>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label className="text-sm font-semibold">OG Title</Label>
|
||
|
||
<Input
|
||
name="ogTitle"
|
||
placeholder="Title for WhatsApp / Facebook sharing"
|
||
value={form.ogTitle || ""}
|
||
onChange={handleChange}
|
||
className="text-base"
|
||
/>
|
||
|
||
<p className="text-xs text-muted-foreground">
|
||
If empty, SEO title will be used
|
||
</p>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label className="text-sm font-semibold">
|
||
OG Description
|
||
</Label>
|
||
|
||
<Textarea
|
||
name="ogDescription"
|
||
placeholder="Description for social sharing..."
|
||
value={form.ogDescription || ""}
|
||
onChange={(e) =>
|
||
setForm({
|
||
...form,
|
||
ogDescription: e.target.value,
|
||
})
|
||
}
|
||
className="min-h-[100px] text-base"
|
||
/>
|
||
|
||
<p className="text-xs text-muted-foreground">
|
||
If empty, meta description will be used
|
||
</p>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label className="text-sm font-semibold">OG Image</Label>
|
||
|
||
<BytescaleUploader
|
||
value={form.ogImage}
|
||
folderPath="/doctor-og"
|
||
onChange={(url) =>
|
||
setForm({
|
||
...form,
|
||
ogImage: url,
|
||
})
|
||
}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label className="text-sm font-semibold">
|
||
Focus Keyphrase
|
||
</Label>
|
||
|
||
<Input
|
||
name="focusKeyphrase"
|
||
placeholder="best cardiologist in kochi"
|
||
value={form.focusKeyphrase || ""}
|
||
onChange={handleChange}
|
||
className="text-base"
|
||
/>
|
||
|
||
<p className="text-xs text-muted-foreground">
|
||
Main keyword people may search in Google
|
||
</p>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label className="text-sm font-semibold">URL Slug</Label>
|
||
|
||
<Input
|
||
name="slug"
|
||
placeholder="dr-john-doe"
|
||
value={form.slug || ""}
|
||
onChange={handleChange}
|
||
className="text-base"
|
||
/>
|
||
|
||
<p className="text-xs text-muted-foreground">
|
||
URL:
|
||
<span className="font-medium">
|
||
{" "}
|
||
/doctors/
|
||
{form.slug || "doctor-slug"}
|
||
</span>
|
||
</p>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label className="text-sm font-semibold">
|
||
Tags / Keywords
|
||
</Label>
|
||
|
||
<div className="flex flex-wrap gap-2 border rounded-md p-3 min-h-[48px] bg-background">
|
||
{form.tags?.map((tag: string, index: number) => (
|
||
<div
|
||
key={index}
|
||
className="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm flex items-center gap-2"
|
||
>
|
||
{tag}
|
||
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
const updated = form.tags.filter(
|
||
(_: string, i: number) => i !== index,
|
||
);
|
||
|
||
setForm({
|
||
...form,
|
||
tags: updated,
|
||
});
|
||
}}
|
||
>
|
||
×
|
||
</button>
|
||
</div>
|
||
))}
|
||
|
||
<Input
|
||
placeholder="Type keyword and press Enter"
|
||
className="border-0 shadow-none focus-visible:ring-0 min-w-[220px]"
|
||
onKeyDown={(e) => {
|
||
if (
|
||
e.key === "Enter" &&
|
||
e.currentTarget.value.trim()
|
||
) {
|
||
e.preventDefault();
|
||
|
||
setForm({
|
||
...form,
|
||
tags: [
|
||
...(form.tags || []),
|
||
e.currentTarget.value.trim(),
|
||
],
|
||
});
|
||
|
||
e.currentTarget.value = "";
|
||
}
|
||
}}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-6">
|
||
<h3 className="font-bold text-base border-b pb-2">
|
||
Department Hierarchy & Timing
|
||
</h3>
|
||
{form.departments.length === 0 ? (
|
||
<div className="text-base text-muted-foreground italic py-24 text-center border-2 border-dashed rounded-lg">
|
||
Select a department to configure hierarchy and timing
|
||
</div>
|
||
) : (
|
||
<div className="space-y-8">
|
||
{form.departments.map((dep: any) => {
|
||
const depName = departments.find(
|
||
(d) => d.departmentId === dep.departmentId,
|
||
)?.name;
|
||
return (
|
||
<div
|
||
key={dep.departmentId}
|
||
className="space-y-4 p-5 border rounded-lg bg-background shadow-sm border-primary/20"
|
||
>
|
||
<div className="flex items-center justify-between border-b pb-2">
|
||
<p className="font-bold text-base text-primary">
|
||
{depName}
|
||
</p>
|
||
<div className="flex items-center gap-2">
|
||
<Label className="text-xs font-bold">
|
||
Hierarchy Order:
|
||
</Label>
|
||
<Input
|
||
type="number"
|
||
className="w-20 h-8 text-sm"
|
||
value={dep.sortOrder}
|
||
onChange={(e) =>
|
||
handleDeptSortChange(
|
||
dep.departmentId,
|
||
e.target.value,
|
||
)
|
||
}
|
||
/>
|
||
</div>
|
||
</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-xs uppercase font-bold text-muted-foreground">
|
||
{day}
|
||
</label>
|
||
<Input
|
||
className="h-9 text-sm"
|
||
placeholder="e.g. 09:00 AM - 01:00 PM"
|
||
value={dep.timing?.[day] || ""}
|
||
onChange={(e) =>
|
||
handleTimingChange(
|
||
dep.departmentId,
|
||
day,
|
||
e.target.value,
|
||
)
|
||
}
|
||
/>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<DialogFooter className="p-6 border-t bg-background z-10 mt-0">
|
||
<Button
|
||
variant="ghost"
|
||
onClick={() => setOpenModal(false)}
|
||
className="text-base"
|
||
>
|
||
Cancel
|
||
</Button>
|
||
<Button onClick={handleSubmit} className="px-10 text-base">
|
||
{editing ? "Save Changes" : "Create Doctor Profile"}
|
||
</Button>
|
||
</DialogFooter>
|
||
</DialogContent>
|
||
</Dialog>
|
||
<SeoPreview
|
||
open={openOgPreview}
|
||
onOpenChange={setOpenOgPreview}
|
||
previewData={previewDoctor}
|
||
url={getDoctorUrl(previewDoctor)}
|
||
/>
|
||
</div>
|
||
);
|
||
}
|