851 lines
39 KiB
TypeScript
851 lines
39 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
|
import { Link } from "react-router-dom";
|
|
import { toast } from "sonner";
|
|
import SettingsLayout from "../components/layout/SettingsLayout";
|
|
import ConfirmDialog from "../components/ui/ConfirmDialog";
|
|
import Modal from "../components/ui/Modal";
|
|
import SearchableSelect from "../components/ui/SearchableSelect";
|
|
import type { ApiResponse } from "../lib/api";
|
|
import { api } from "../lib/api";
|
|
import { formatDate } from "../lib/utils";
|
|
import { useSubscription } from "../hooks/useSubscription";
|
|
import { useAuthStore } from "../stores/authStore";
|
|
import type { Secretary, SecretaryPermissions } from "../types";
|
|
|
|
// ── SVG icons (copied verbatim from clinic-pro-tauri) ───────────────────────
|
|
|
|
const PlusIcon = () => (
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
<path d="M5 10H15" stroke="#EFEFEF" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
|
<path d="M10 15V5" stroke="#EFEFEF" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
|
</svg>
|
|
);
|
|
|
|
const EyeIcon = () => (
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
<path d="M12.9833 9.99993C12.9833 11.6499 11.6499 12.9833 9.99993 12.9833C8.34993 12.9833 7.0166 11.6499 7.0166 9.99993C7.0166 8.34993 8.34993 7.0166 9.99993 7.0166C11.6499 7.0166 12.9833 8.34993 12.9833 9.99993Z" stroke="#616161" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
|
<path d="M9.99987 16.8918C12.9415 16.8918 15.6832 15.1584 17.5915 12.1584C18.3415 10.9834 18.3415 9.00843 17.5915 7.83343C15.6832 4.83343 12.9415 3.1001 9.99987 3.1001C7.0582 3.1001 4.31654 4.83343 2.4082 7.83343C1.6582 9.00843 1.6582 10.9834 2.4082 12.1584C4.31654 15.1584 7.0582 16.8918 9.99987 16.8918Z" stroke="#616161" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
|
</svg>
|
|
);
|
|
|
|
const EditIcon = () => (
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
<path d="M11.0504 3.00002L4.20878 10.2417C3.95045 10.5167 3.70045 11.0584 3.65045 11.4334L3.34211 14.1334C3.23378 15.1084 3.93378 15.775 4.90045 15.6084L7.58378 15.15C7.95878 15.0834 8.48378 14.8084 8.74211 14.525L15.5838 7.28335C16.7671 6.03335 17.3004 4.60835 15.4588 2.86668C13.6254 1.14168 12.2338 1.75002 11.0504 3.00002Z" stroke="#616161" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
|
|
<path d="M9.9082 4.2085C10.2665 6.5085 12.1332 8.26683 14.4499 8.50016" stroke="#616161" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
|
|
<path d="M2.5 18.3335H17.5" stroke="#616161" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
|
|
</svg>
|
|
);
|
|
|
|
const ChevronDown = ({ open }: { open: boolean }) => (
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
className="text-[#616161] dark:text-[#A1A1A1] transition-transform"
|
|
style={{ transform: open ? "rotate(180deg)" : "rotate(0deg)" }}
|
|
>
|
|
<path d="M6 9L12 15L18 9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
|
</svg>
|
|
);
|
|
|
|
// ── Avatar (first-letter gradient fallback, like tauri) ─────────────────────
|
|
|
|
function Avatar({ name, size = 32 }: { name?: string; size?: number }) {
|
|
const firstLetter = (name?.trim().charAt(0) || "?").toUpperCase();
|
|
return (
|
|
<div
|
|
className="rounded-full flex items-center justify-center bg-gradient-to-br from-[#5559CE] to-[#7B7FE8] text-white font-bold flex-shrink-0"
|
|
style={{ width: size, height: size, fontSize: size / 2 }}
|
|
>
|
|
{firstLetter}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ── Permission sections (based on existing clinicpro pages) ─────────────────
|
|
|
|
const EMPTY_PERMISSIONS: SecretaryPermissions = {
|
|
appointments: { view: false, create: false, cancel: false, update_status: false },
|
|
patients: { view: false, create: false, update: false, delete: false },
|
|
payments: { view: false, create: false, update: false, delete: false },
|
|
insurances: { view: false, create: false, update: false, delete: false },
|
|
addresses: { view: false, create: false, update: false, delete: false },
|
|
clinic_info: { view: false, update: false },
|
|
};
|
|
|
|
type PermSection = keyof SecretaryPermissions;
|
|
|
|
const PERMISSION_SECTIONS: {
|
|
key: PermSection;
|
|
title: string;
|
|
items: { key: string; label: string }[];
|
|
}[] = [
|
|
{
|
|
key: "appointments",
|
|
title: "مدیریت نوبتها",
|
|
items: [
|
|
{ key: "view", label: "مشاهده نوبتها" },
|
|
{ key: "create", label: "ایجاد نوبت" },
|
|
{ key: "cancel", label: "لغو نوبت" },
|
|
{ key: "update_status", label: "تغییر وضعیت نوبت" },
|
|
],
|
|
},
|
|
{
|
|
key: "patients",
|
|
title: "پرونده بیماران",
|
|
items: [
|
|
{ key: "view", label: "مشاهده بیماران" },
|
|
{ key: "create", label: "ایجاد بیمار" },
|
|
{ key: "update", label: "ویرایش بیمار" },
|
|
{ key: "delete", label: "حذف بیمار" },
|
|
],
|
|
},
|
|
{
|
|
key: "payments",
|
|
title: "مدیریت پرداختها",
|
|
items: [
|
|
{ key: "view", label: "مشاهده پرداختها" },
|
|
{ key: "create", label: "ثبت پرداخت" },
|
|
{ key: "update", label: "ویرایش پرداخت" },
|
|
{ key: "delete", label: "حذف پرداخت" },
|
|
],
|
|
},
|
|
{
|
|
key: "insurances",
|
|
title: "مدیریت بیمهها",
|
|
items: [
|
|
{ key: "view", label: "مشاهده بیمهها" },
|
|
{ key: "create", label: "ایجاد بیمه" },
|
|
{ key: "update", label: "ویرایش بیمه" },
|
|
{ key: "delete", label: "حذف بیمه" },
|
|
],
|
|
},
|
|
{
|
|
key: "addresses",
|
|
title: "آدرسها",
|
|
items: [
|
|
{ key: "view", label: "مشاهده آدرسها" },
|
|
{ key: "create", label: "ایجاد آدرس" },
|
|
{ key: "update", label: "ویرایش آدرس" },
|
|
{ key: "delete", label: "حذف آدرس" },
|
|
],
|
|
},
|
|
{
|
|
key: "clinic_info",
|
|
title: "اطلاعات کلینیک",
|
|
items: [
|
|
{ key: "view", label: "مشاهده اطلاعات" },
|
|
{ key: "update", label: "ویرایش اطلاعات" },
|
|
],
|
|
},
|
|
];
|
|
|
|
function PermissionAccordions({
|
|
permissions,
|
|
onChange,
|
|
disabled,
|
|
}: {
|
|
permissions: SecretaryPermissions;
|
|
onChange: (section: PermSection, item: string, value: boolean) => void;
|
|
disabled?: boolean;
|
|
}) {
|
|
const [openKeys, setOpenKeys] = useState<Set<string>>(
|
|
new Set(["appointments", "patients"]),
|
|
);
|
|
|
|
const toggleOpen = (key: string) => {
|
|
setOpenKeys((prev) => {
|
|
const next = new Set(prev);
|
|
next.has(key) ? next.delete(key) : next.add(key);
|
|
return next;
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div className="w-full">
|
|
<p className="text-[#525252] dark:text-[#D7D8ED] text-[16px] font-bold mb-[16px]">
|
|
مجوزهای دسترسی
|
|
</p>
|
|
<div className="flex flex-col gap-[8px] w-full items-stretch">
|
|
{PERMISSION_SECTIONS.map((section) => {
|
|
const open = openKeys.has(section.key);
|
|
const sectionPerm = permissions[section.key] as Record<string, boolean>;
|
|
return (
|
|
<div
|
|
key={section.key}
|
|
className="w-full border border-[#DBDBDB] dark:border-[#343645] rounded-[8px] overflow-hidden"
|
|
>
|
|
<button
|
|
type="button"
|
|
onClick={() => toggleOpen(section.key)}
|
|
className="w-full flex items-center justify-between px-[16px] min-h-[64px] cursor-pointer"
|
|
>
|
|
<p className="text-[#525252] dark:text-[#D7D8ED] text-[14px] font-medium">
|
|
{section.title}
|
|
</p>
|
|
<ChevronDown open={open} />
|
|
</button>
|
|
{open && (
|
|
<div className="px-[16px] pt-[8px] pb-[16px]">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-x-[16px] gap-y-0">
|
|
{section.items.map((item) => (
|
|
<label
|
|
key={item.key}
|
|
className="flex items-center gap-[11px] cursor-pointer py-[9px] min-h-[42px]"
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
checked={sectionPerm?.[item.key] ?? false}
|
|
disabled={disabled}
|
|
onChange={(e) =>
|
|
onChange(section.key, item.key, e.target.checked)
|
|
}
|
|
className="w-[20px] h-[20px] shrink-0"
|
|
style={{ accentColor: "#5559CE", cursor: "pointer" }}
|
|
/>
|
|
<span className="text-[#616161] dark:text-[#A1A1A1] text-[14px]">
|
|
{item.label}
|
|
</span>
|
|
</label>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ── Text field (tauri DefaultTextField look) ────────────────────────────────
|
|
|
|
function DefaultTextField({
|
|
placeholder,
|
|
value,
|
|
onChange,
|
|
disabled,
|
|
multiline,
|
|
rows,
|
|
}: {
|
|
placeholder?: string;
|
|
value: string;
|
|
onChange: (v: string) => void;
|
|
disabled?: boolean;
|
|
multiline?: boolean;
|
|
rows?: number;
|
|
}) {
|
|
const cls =
|
|
"w-full bg-[#FAFAFA] dark:bg-[#222433] rounded-[8px] border border-[#D7D7D7] dark:border-[#343645] " +
|
|
"text-[#7E7E7E] dark:text-[#D7D8ED] text-[16px] font-normal px-[12px] py-[12.5px] outline-none " +
|
|
"focus:border-[#5559CE] disabled:opacity-70";
|
|
if (multiline) {
|
|
return (
|
|
<textarea
|
|
className={cls}
|
|
placeholder={placeholder}
|
|
value={value}
|
|
rows={rows ?? 2}
|
|
disabled={disabled}
|
|
onChange={(e) => onChange(e.target.value)}
|
|
/>
|
|
);
|
|
}
|
|
return (
|
|
<input
|
|
className={cls}
|
|
placeholder={placeholder}
|
|
value={value}
|
|
disabled={disabled}
|
|
onChange={(e) => onChange(e.target.value)}
|
|
/>
|
|
);
|
|
}
|
|
|
|
// ── Add/Edit/View modal ─────────────────────────────────────────────────────
|
|
|
|
type ModalMode = "add" | "edit" | "view";
|
|
|
|
interface FormState {
|
|
name: string;
|
|
family: string;
|
|
telephone: string;
|
|
national_code: string;
|
|
address: string;
|
|
permission: SecretaryPermissions;
|
|
}
|
|
|
|
function SecretaryModal({
|
|
open,
|
|
mode,
|
|
data,
|
|
saving,
|
|
onClose,
|
|
onSubmit,
|
|
}: {
|
|
open: boolean;
|
|
mode: ModalMode;
|
|
data: Secretary | null;
|
|
saving: boolean;
|
|
onClose: () => void;
|
|
onSubmit: (form: FormState) => void;
|
|
}) {
|
|
const [form, setForm] = useState<FormState>({
|
|
name: "",
|
|
family: "",
|
|
telephone: "",
|
|
national_code: "",
|
|
address: "",
|
|
permission: EMPTY_PERMISSIONS,
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (!open) return;
|
|
if ((mode === "edit" || mode === "view") && data) {
|
|
const parts = (data.user_name ?? "").split(" ");
|
|
setForm({
|
|
name: parts[0] ?? "",
|
|
family: parts.slice(1).join(" "),
|
|
telephone: data.mobile_number ?? "",
|
|
national_code: data.national_code ?? "",
|
|
address: data.address ?? "",
|
|
permission: { ...EMPTY_PERMISSIONS, ...(data.permissions ?? {}) },
|
|
});
|
|
} else {
|
|
setForm({
|
|
name: "",
|
|
family: "",
|
|
telephone: "",
|
|
national_code: "",
|
|
address: "",
|
|
permission: EMPTY_PERMISSIONS,
|
|
});
|
|
}
|
|
}, [open, mode, data]);
|
|
|
|
const disabled = mode === "view";
|
|
const title =
|
|
mode === "add"
|
|
? "اضافه کردن منشی جدید"
|
|
: mode === "edit"
|
|
? "ویرایش منشی"
|
|
: "مشاهده اطلاعات منشی";
|
|
|
|
const setField = (field: keyof FormState, value: string) =>
|
|
setForm((prev) => ({ ...prev, [field]: value }));
|
|
|
|
const setPermission = (section: PermSection, item: string, value: boolean) =>
|
|
setForm((prev) => ({
|
|
...prev,
|
|
permission: {
|
|
...prev.permission,
|
|
[section]: { ...(prev.permission[section] as Record<string, boolean>), [item]: value },
|
|
},
|
|
}));
|
|
|
|
const handleSubmit = () => {
|
|
if (mode === "view") {
|
|
onClose();
|
|
return;
|
|
}
|
|
if (!form.name.trim()) return toast.error("لطفاً نام را وارد کنید");
|
|
if (!form.family.trim()) return toast.error("لطفاً نام خانوادگی را وارد کنید");
|
|
if (!form.telephone.trim()) return toast.error("لطفاً شماره تلفن را وارد کنید");
|
|
if (!/^09\d{9}$/.test(form.telephone))
|
|
return toast.error("شماره تلفن باید 11 رقم و با 09 شروع شود");
|
|
onSubmit(form);
|
|
};
|
|
|
|
return (
|
|
<Modal
|
|
open={open}
|
|
onClose={onClose}
|
|
title={title}
|
|
size="lg"
|
|
footer={
|
|
<>
|
|
<button
|
|
onClick={onClose}
|
|
className="border border-[#5559CE] dark:border-transparent dark:bg-[#C7CEF4] text-[#5559CE] dark:text-[#222433]
|
|
h-[40px] md:h-[44px] lg:h-[48px] py-[11px] px-[48px] rounded-[4px] cursor-pointer"
|
|
>
|
|
{mode === "view" ? "بستن" : "انصراف"}
|
|
</button>
|
|
{mode !== "view" && (
|
|
<button
|
|
onClick={handleSubmit}
|
|
disabled={saving}
|
|
className="bg-[#5559CE] text-[#EFEFEF] rounded-[4px] h-[40px] md:h-[44px] lg:h-[48px] py-[11px] px-[48px] cursor-pointer disabled:opacity-60"
|
|
>
|
|
{saving ? "در حال ذخیره..." : "ذخیره"}
|
|
</button>
|
|
)}
|
|
</>
|
|
}
|
|
>
|
|
<div dir="rtl" className="flex flex-col justify-start items-start gap-[24px] w-full">
|
|
{/* اطلاعات پایه */}
|
|
<div className="w-full">
|
|
<p className="text-[#525252] dark:text-[#D7D8ED] text-[16px] font-bold mb-[16px]">
|
|
اطلاعات پایه
|
|
</p>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-[16px]">
|
|
<div className="flex w-full flex-col items-start justify-start gap-[12px]">
|
|
<p className="w-full text-right text-[#525252] dark:text-[#D7D8ED] text-[14px] font-medium">نام</p>
|
|
<DefaultTextField placeholder="نام" value={form.name} onChange={(v) => setField("name", v)} disabled={disabled} />
|
|
</div>
|
|
<div className="flex w-full flex-col items-start justify-start gap-[12px]">
|
|
<p className="w-full text-right text-[#525252] dark:text-[#D7D8ED] text-[14px] font-medium">نام خانوادگی</p>
|
|
<DefaultTextField placeholder="نام خانوادگی" value={form.family} onChange={(v) => setField("family", v)} disabled={disabled} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="w-full grid grid-cols-1 md:grid-cols-2 gap-[16px]">
|
|
<div className="flex w-full flex-col items-start justify-start gap-[12px]">
|
|
<p className="w-full text-right text-[#525252] dark:text-[#D7D8ED] text-[14px] font-medium">شماره موبایل</p>
|
|
<DefaultTextField placeholder="09121234567" value={form.telephone} onChange={(v) => setField("telephone", v)} disabled={disabled || mode === "edit"} />
|
|
</div>
|
|
<div className="flex w-full flex-col items-start justify-start gap-[12px]">
|
|
<p className="w-full text-right text-[#525252] dark:text-[#D7D8ED] text-[14px] font-medium">کد ملی</p>
|
|
<DefaultTextField placeholder="کد ملی" value={form.national_code} onChange={(v) => setField("national_code", v)} disabled={disabled} />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex w-full flex-col items-start justify-start gap-[12px]">
|
|
<p className="w-full text-right text-[#525252] dark:text-[#D7D8ED] text-[14px] font-medium">آدرس</p>
|
|
<DefaultTextField placeholder="آدرس" value={form.address} onChange={(v) => setField("address", v)} disabled={disabled} multiline rows={2} />
|
|
</div>
|
|
|
|
<PermissionAccordions permissions={form.permission} onChange={setPermission} disabled={disabled} />
|
|
</div>
|
|
</Modal>
|
|
);
|
|
}
|
|
|
|
// ── Row buttons (view + edit) ───────────────────────────────────────────────
|
|
|
|
function RowButtons({ onView, onEdit }: { onView: () => void; onEdit: () => void }) {
|
|
return (
|
|
<div className="flex items-center justify-start gap-[16px]">
|
|
<button onClick={onView} className="p-1 cursor-pointer" title="مشاهده">
|
|
<EyeIcon />
|
|
</button>
|
|
<button onClick={onEdit} className="p-1 cursor-pointer" title="ویرایش">
|
|
<EditIcon />
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ── Desktop table ────────────────────────────────────────────────────────────
|
|
|
|
function SecretaryTable({
|
|
data,
|
|
onView,
|
|
onEdit,
|
|
onDeactivate,
|
|
showDoctor,
|
|
}: {
|
|
data: Secretary[];
|
|
onView: (s: Secretary) => void;
|
|
onEdit: (s: Secretary) => void;
|
|
onDeactivate: (s: Secretary) => void;
|
|
showDoctor: boolean;
|
|
}) {
|
|
const headCls =
|
|
"text-[#616161] dark:text-[#D7D8ED] text-[14px] font-normal py-[10px] px-[18px] text-start";
|
|
const cellCls =
|
|
"text-[#616161] dark:text-[#A1A1A1] text-[16px] font-medium px-[18px] py-[10px] whitespace-nowrap";
|
|
return (
|
|
<div className="hidden lg:block mt-[24px]">
|
|
<div className="rounded-[8px] overflow-hidden border border-solid border-[#E7E7E7] dark:border-[#35343D]">
|
|
<table className="w-full border-collapse">
|
|
<thead>
|
|
<tr className="bg-[#EFEFEF] dark:bg-[#35343D]">
|
|
<th className={headCls}>ردیف</th>
|
|
<th className={headCls}>نام منشی</th>
|
|
{showDoctor && <th className={headCls}>پزشک</th>}
|
|
<th className={headCls}>کد ملی</th>
|
|
<th className={headCls + " text-center"}>تاریخ همکاری</th>
|
|
<th className={headCls}>شماره تماس</th>
|
|
<th className={headCls}>عملیات</th>
|
|
<th className={headCls + " text-center"}>لغو همکاری</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{data.map((row, idx) => (
|
|
<tr key={row.uuid} className="border-b border-[#DBDBDB] dark:border-[#343645]">
|
|
<td className={cellCls}>{idx + 1}</td>
|
|
<td className={cellCls}>
|
|
<div className="flex items-center justify-start gap-[8px]">
|
|
<Avatar name={row.user_name} size={32} />
|
|
<span>{row.user_name}</span>
|
|
</div>
|
|
</td>
|
|
{showDoctor && <td className={cellCls}>{row.doctor_name}</td>}
|
|
<td className={cellCls}>{row.national_code || "-"}</td>
|
|
<td className={cellCls + " text-center"}>{formatDate(Number(row.created_at))}</td>
|
|
<td className={cellCls}>
|
|
<span dir="ltr">{row.mobile_number}</span>
|
|
</td>
|
|
<td className={cellCls}>
|
|
<RowButtons onView={() => onView(row)} onEdit={() => onEdit(row)} />
|
|
</td>
|
|
<td className={cellCls + " text-center"}>
|
|
{row.is_active ? (
|
|
<button
|
|
onClick={() => onDeactivate(row)}
|
|
className="border border-[#E53935] text-[#E53935] hover:bg-[#FFEBEE] text-[12px] font-medium py-[6px] px-[16px] rounded-[4px] cursor-pointer"
|
|
>
|
|
لغو همکاری
|
|
</button>
|
|
) : (
|
|
<button
|
|
onClick={() => onDeactivate(row)}
|
|
className="border border-[#2E7D32] text-[#2E7D32] hover:bg-[#E8F5E9] text-[12px] font-medium py-[6px] px-[16px] rounded-[4px] cursor-pointer"
|
|
>
|
|
فعالسازی
|
|
</button>
|
|
)}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ── Mobile cards ─────────────────────────────────────────────────────────────
|
|
|
|
function SecretaryCards({
|
|
data,
|
|
onView,
|
|
onEdit,
|
|
onDeactivate,
|
|
}: {
|
|
data: Secretary[];
|
|
onView: (s: Secretary) => void;
|
|
onEdit: (s: Secretary) => void;
|
|
onDeactivate: (s: Secretary) => void;
|
|
}) {
|
|
return (
|
|
<ul className="grid lg:hidden grid-cols-1 sm:grid-cols-2 gap-[24px] mt-[24px]">
|
|
{data.map((item) => (
|
|
<div
|
|
key={item.uuid}
|
|
className="bg-[#FFF] dark:bg-[#222433] dark:shadow-transparent rounded-[8px] shadow-[0px_1px_24.8px_0px_rgba(204,204,204,0.18)] p-[12px]"
|
|
>
|
|
<div className="flex items-center justify-start gap-[8px]">
|
|
<Avatar name={item.user_name} size={32} />
|
|
<p className="text-[#616161] dark:text-[#D7D8ED] text-[14px] font-medium">{item.user_name}</p>
|
|
</div>
|
|
<div className="w-full mt-[16px]">
|
|
<div className="flex items-center justify-between">
|
|
<p className="text-[#7E7E7E] dark:text-[#A1A1A1] text-[14px] font-normal">کدملی:</p>
|
|
<p className="text-[#616161] dark:text-[#A1A1A1] text-[14px] font-normal">{item.national_code || "-"}</p>
|
|
</div>
|
|
<span className="block w-full h-px bg-[#EFEFEF] dark:bg-[#343645] my-[8px]" />
|
|
<div className="flex items-center justify-between">
|
|
<p className="text-[#7E7E7E] dark:text-[#A1A1A1] text-[14px] font-normal">تاریخ همکاری:</p>
|
|
<p className="text-[#616161] dark:text-[#A1A1A1] text-[14px] font-normal">{formatDate(Number(item.created_at))}</p>
|
|
</div>
|
|
<span className="block w-full h-px bg-[#EFEFEF] dark:bg-[#343645] my-[8px]" />
|
|
<div className="flex items-center justify-between">
|
|
<p className="text-[#7E7E7E] dark:text-[#A1A1A1] text-[14px] font-normal">شماره تماس:</p>
|
|
<p className="text-[#616161] dark:text-[#A1A1A1] text-[14px] font-normal" dir="ltr">{item.mobile_number}</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center justify-between mt-[16px]">
|
|
<button
|
|
onClick={() => onView(item)}
|
|
className="text-[#5559CE] dark:bg-[#C7CEF4] gap-[5px] text-[14px] font-medium border border-[#5559CE] py-[8px] px-[12px] rounded-[4px] cursor-pointer flex items-center"
|
|
>
|
|
<EyeIcon />
|
|
</button>
|
|
<button
|
|
onClick={() => onEdit(item)}
|
|
className="border border-[#EFEFEF] dark:border-[#343645] rounded-[4px] p-[7px] cursor-pointer"
|
|
>
|
|
<EditIcon />
|
|
</button>
|
|
</div>
|
|
<button
|
|
onClick={() => onDeactivate(item)}
|
|
className={
|
|
item.is_active
|
|
? "w-full border border-[#E53935] text-[#E53935] hover:bg-[#FFEBEE] text-[14px] font-medium py-[8px] mt-[12px] rounded-[4px] cursor-pointer"
|
|
: "w-full border border-[#2E7D32] text-[#2E7D32] hover:bg-[#E8F5E9] text-[14px] font-medium py-[8px] mt-[12px] rounded-[4px] cursor-pointer"
|
|
}
|
|
>
|
|
{item.is_active ? "لغو همکاری" : "فعالسازی"}
|
|
</button>
|
|
</div>
|
|
))}
|
|
</ul>
|
|
);
|
|
}
|
|
|
|
// ── Main content ─────────────────────────────────────────────────────────────
|
|
|
|
interface ClinicDoctor {
|
|
uuid: string;
|
|
name: string;
|
|
}
|
|
|
|
function MySecretariesPageContent() {
|
|
const qc = useQueryClient();
|
|
const { doctorUuid, dbUuid, primaryRole } = useAuthStore();
|
|
const isClinic = primaryRole === "clinic";
|
|
const { maxSecretaries } = useSubscription();
|
|
|
|
const [tab, setTab] = useState(0); // 0: منشی های فعلی، 1: منشی های قبلی
|
|
const [selectedDoctorUuid, setSelectedDoctorUuid] = useState<string>("");
|
|
const activeDoctorUuid = isClinic ? selectedDoctorUuid : (doctorUuid ?? "");
|
|
|
|
const [modalOpen, setModalOpen] = useState(false);
|
|
const [modalMode, setModalMode] = useState<ModalMode>("add");
|
|
const [selected, setSelected] = useState<Secretary | null>(null);
|
|
const [deactivateTarget, setDeactivateTarget] = useState<Secretary | null>(null);
|
|
|
|
// clinic: list of doctors
|
|
const { data: clinicDoctorsData, isLoading: clinicDoctorsLoading } = useQuery<
|
|
ApiResponse<{ data: ClinicDoctor[] }>
|
|
>({
|
|
queryKey: ["clinic-doctors", dbUuid],
|
|
queryFn: () => api.get(`/api/v1/clinic/doctor-list/${dbUuid}`),
|
|
enabled: isClinic && !!dbUuid,
|
|
});
|
|
const clinicDoctors: ClinicDoctor[] = clinicDoctorsData?.data?.data ?? [];
|
|
|
|
// clinic: all secretaries across clinic
|
|
const { data: clinicSecrData, isLoading: clinicSecrLoading } = useQuery<ApiResponse<Secretary[]>>({
|
|
queryKey: ["my-secretaries-clinic", dbUuid],
|
|
queryFn: () => api.get(`/api/v1/secretaries/clinic/${dbUuid}`),
|
|
enabled: isClinic && !!dbUuid,
|
|
});
|
|
|
|
// doctor: secretaries for the doctor
|
|
const { data: doctorSecrData, isLoading: doctorSecrLoading } = useQuery<ApiResponse<Secretary[]>>({
|
|
queryKey: ["my-secretaries", activeDoctorUuid],
|
|
queryFn: () => api.get(`/api/v1/secretaries/${activeDoctorUuid}`),
|
|
enabled: !isClinic && !!activeDoctorUuid,
|
|
});
|
|
|
|
const allSecretaries = isClinic ? (clinicSecrData?.data ?? []) : (doctorSecrData?.data ?? []);
|
|
const isLoading = isClinic ? clinicSecrLoading : doctorSecrLoading;
|
|
|
|
// client-side filter by tab (active/previous)
|
|
const secretaries = allSecretaries.filter((s) => (tab === 0 ? s.is_active : !s.is_active));
|
|
const activeSecretaryCount = allSecretaries.filter((s) => s.is_active).length;
|
|
const atLimit = activeSecretaryCount >= maxSecretaries;
|
|
|
|
const invalidate = () => {
|
|
qc.invalidateQueries({ queryKey: ["my-secretaries"] });
|
|
qc.invalidateQueries({ queryKey: ["my-secretaries-clinic"] });
|
|
};
|
|
|
|
const createMutation = useMutation({
|
|
mutationFn: (form: FormState) =>
|
|
api.post("/api/v1/secretary", {
|
|
doctor_uuid: activeDoctorUuid,
|
|
mobile_number: form.telephone,
|
|
name: `${form.name} ${form.family}`.trim(),
|
|
national_code: form.national_code || null,
|
|
address: form.address || null,
|
|
permissions: { version: 1, resources: form.permission },
|
|
}),
|
|
onSuccess: () => {
|
|
toast.success("منشی با موفقیت اضافه شد");
|
|
setModalOpen(false);
|
|
invalidate();
|
|
},
|
|
onError: (e: any) => toast.error(e.message),
|
|
});
|
|
|
|
const updateMutation = useMutation({
|
|
mutationFn: ({ uuid, form }: { uuid: string; form: FormState }) =>
|
|
api.patch(`/api/v1/secretary/${uuid}`, {
|
|
name: `${form.name} ${form.family}`.trim(),
|
|
national_code: form.national_code || null,
|
|
address: form.address || null,
|
|
permissions: { version: 1, resources: form.permission },
|
|
}),
|
|
onSuccess: () => {
|
|
toast.success("منشی با موفقیت ویرایش شد");
|
|
setModalOpen(false);
|
|
invalidate();
|
|
},
|
|
onError: (e: any) => toast.error(e.message),
|
|
});
|
|
|
|
const toggleActiveMutation = useMutation({
|
|
mutationFn: ({ uuid, active }: { uuid: string; active: boolean }) =>
|
|
api.patch(`/api/v1/secretary/${uuid}`, { active }),
|
|
onSuccess: (_, { active }) => {
|
|
toast.success(active ? "همکاری با منشی برقرار شد" : "همکاری با منشی لغو شد");
|
|
setDeactivateTarget(null);
|
|
invalidate();
|
|
},
|
|
onError: (e: any) => toast.error(e.message),
|
|
});
|
|
|
|
const saving = createMutation.isPending || updateMutation.isPending;
|
|
|
|
const handleAddClick = () => {
|
|
if (isClinic && !selectedDoctorUuid) return toast.error("ابتدا یک پزشک را انتخاب کنید");
|
|
if (atLimit) return toast.error(`حداکثر ${maxSecretaries} منشی مجاز است؛ برای افزودن، پنل را ارتقا دهید`);
|
|
setModalMode("add");
|
|
setSelected(null);
|
|
setModalOpen(true);
|
|
};
|
|
|
|
const openModal = (mode: ModalMode, s: Secretary) => {
|
|
setModalMode(mode);
|
|
setSelected(s);
|
|
setModalOpen(true);
|
|
};
|
|
|
|
const handleModalSubmit = (form: FormState) => {
|
|
if (modalMode === "add") createMutation.mutate(form);
|
|
else if (modalMode === "edit" && selected) updateMutation.mutate({ uuid: selected.uuid, form });
|
|
};
|
|
|
|
return (
|
|
<div dir="rtl">
|
|
<div className="flex items-center justify-between">
|
|
<p className="text-[#525252] dark:text-[#D7D8ED] text-[20px] font-bold">لیست منشی ها</p>
|
|
</div>
|
|
|
|
{/* کلینیک: انتخاب پزشک */}
|
|
{isClinic && (
|
|
<div className="mt-[16px] max-w-[360px]">
|
|
<label className="text-[#525252] dark:text-[#D7D8ED] text-[14px] font-medium block mb-[8px]">
|
|
پزشک مورد نظر برای افزودن منشی جدید
|
|
</label>
|
|
{clinicDoctorsLoading ? (
|
|
<p className="text-[13px] text-[#7E7E7E]">در حال بارگذاری...</p>
|
|
) : clinicDoctors.length === 0 ? (
|
|
<p className="text-[13px] text-[#7E7E7E]">هیچ پزشکی در این کلینیک تعریف نشده است.</p>
|
|
) : (
|
|
<SearchableSelect
|
|
options={clinicDoctors.map((d) => ({ value: d.uuid, label: d.name }))}
|
|
value={selectedDoctorUuid}
|
|
onChange={(v) => setSelectedDoctorUuid(v ? String(v) : "")}
|
|
placeholder="یک پزشک را انتخاب کنید"
|
|
/>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* تبها + دکمه افزودن */}
|
|
<div className="w-full flex items-end justify-between mt-[20px]">
|
|
<div className="flex items-center gap-[8px] border-b border-[#EFEFEF] dark:border-[#343645]">
|
|
{["منشی های فعلی", "منشی های قبلی"].map((label, idx) => (
|
|
<button
|
|
key={idx}
|
|
onClick={() => setTab(idx)}
|
|
className={
|
|
"px-[12px] py-[10px] text-[14px] md:text-[16px] font-bold cursor-pointer border-b-2 -mb-px " +
|
|
(tab === idx
|
|
? "text-[#5559CE] border-[#5559CE]"
|
|
: "text-[#495057] dark:text-[#A1A1A1] border-transparent")
|
|
}
|
|
>
|
|
{label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
<button
|
|
onClick={handleAddClick}
|
|
disabled={isClinic && !selectedDoctorUuid}
|
|
className="shadow-none gap-[8px] bg-[#5559CE] text-[#EFEFEF] text-[14px] md:text-[15px] lg:text-[16px]
|
|
font-medium py-[10px] px-[16px] h-[43px] md:h-[45px] lg:h-[48px] rounded-[4px] cursor-pointer
|
|
flex items-center disabled:opacity-60"
|
|
>
|
|
<PlusIcon />
|
|
اضافه کردن منشی
|
|
</button>
|
|
</div>
|
|
|
|
{!isClinic && !doctorUuid ? (
|
|
<div className="mt-[24px] text-center text-[#7E7E7E] py-[40px]">پروفایل پزشک یافت نشد</div>
|
|
) : isLoading ? (
|
|
<div className="mt-[24px] text-center text-[#7E7E7E] py-[40px]">در حال بارگذاری...</div>
|
|
) : secretaries.length === 0 ? (
|
|
<div className="mt-[24px] text-center text-[#7E7E7E] py-[60px]">
|
|
{tab === 0 ? "هنوز منشی فعالی اضافه نشده است" : "منشی قبلیای وجود ندارد"}
|
|
</div>
|
|
) : (
|
|
<>
|
|
<SecretaryTable
|
|
data={secretaries}
|
|
showDoctor={isClinic}
|
|
onView={(s) => openModal("view", s)}
|
|
onEdit={(s) => openModal("edit", s)}
|
|
onDeactivate={(s) => setDeactivateTarget(s)}
|
|
/>
|
|
<SecretaryCards
|
|
data={secretaries}
|
|
onView={(s) => openModal("view", s)}
|
|
onEdit={(s) => openModal("edit", s)}
|
|
onDeactivate={(s) => setDeactivateTarget(s)}
|
|
/>
|
|
</>
|
|
)}
|
|
|
|
{atLimit && (
|
|
<div className="mt-[16px]">
|
|
<Link to="/admin/subscription" className="text-[#5559CE] text-[13px] underline">
|
|
برای افزودن منشی بیشتر، پنل خود را ارتقا دهید
|
|
</Link>
|
|
</div>
|
|
)}
|
|
|
|
<SecretaryModal
|
|
open={modalOpen}
|
|
mode={modalMode}
|
|
data={selected}
|
|
saving={saving}
|
|
onClose={() => setModalOpen(false)}
|
|
onSubmit={handleModalSubmit}
|
|
/>
|
|
|
|
<ConfirmDialog
|
|
open={!!deactivateTarget}
|
|
title={deactivateTarget?.is_active ? "لغو همکاری با منشی" : "فعالسازی منشی"}
|
|
message={
|
|
deactivateTarget?.is_active
|
|
? `آیا مطمئن هستید که میخواهید همکاری با «${deactivateTarget?.user_name}» را لغو کنید؟`
|
|
: `آیا مطمئن هستید که میخواهید «${deactivateTarget?.user_name}» را دوباره فعال کنید؟`
|
|
}
|
|
confirmLabel={deactivateTarget?.is_active ? "لغو همکاری" : "فعالسازی"}
|
|
danger={deactivateTarget?.is_active}
|
|
loading={toggleActiveMutation.isPending}
|
|
onConfirm={() =>
|
|
deactivateTarget &&
|
|
toggleActiveMutation.mutate({
|
|
uuid: deactivateTarget.uuid,
|
|
active: !deactivateTarget.is_active,
|
|
})
|
|
}
|
|
onCancel={() => setDeactivateTarget(null)}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function MySecretariesPage() {
|
|
return (
|
|
<SettingsLayout active="secretary">
|
|
<MySecretariesPageContent />
|
|
</SettingsLayout>
|
|
);
|
|
}
|