feat: add clinic status management with active/inactive toggle and update related API endpoints

assets/admin/pages/ClinicsPage.tsx

@@ -1,85 +1,86 @@
 import React, { useState } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { useNavigate } from 'react-router-dom';
-import { EyeIcon, TrashIcon, PencilIcon, MagnifyingGlassIcon } from '@heroicons/react/24/outline';
+import {
+  EyeIcon,
+  TrashIcon,
+  MagnifyingGlassIcon,
+  PlusIcon,
+  BuildingOffice2Icon,
+} from '@heroicons/react/24/outline';
 import { toast } from 'sonner';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
 import { api } from '../lib/api';
 import type { ApiResponse, PaginatedResponse } from '../lib/api';
 import type { Clinic } from '../types';
 import { formatDate, formatNumber } from '../lib/utils';
-import DataTable, { Column } from '../components/ui/DataTable';
-import { ActiveBadge } from '../components/ui/StatusBadge';
 import Pagination from '../components/ui/Pagination';
 import ConfirmDialog from '../components/ui/ConfirmDialog';
 
 const HUES_LIST = [256, 205, 162, 295, 272];
 
+const addSchema = z.object({
+  name: z.string().min(2, 'نام الزامی است'),
+  phone: z.string().optional(),
+});
+type AddForm = z.infer<typeof addSchema>;
+
 export default function ClinicsPage() {
   const navigate = useNavigate();
   const qc = useQueryClient();
   const [page, setPage] = useState(1);
   const [search, setSearch] = useState('');
+  const [statusFilter, setStatusFilter] = useState('');
   const [deleteTarget, setDeleteTarget] = useState<Clinic | null>(null);
+  const [addOpen, setAddOpen] = useState(false);
   const limit = 15;
 
   const { data, isLoading } = useQuery({
-    queryKey: ['clinics', page, search],
+    queryKey: ['admin-clinics', page, search, statusFilter],
     queryFn: () =>
       api.get<PaginatedResponse<Clinic>>(
-        `/api/v1/clinics?page=${page}&limit=${limit}${search ? `&search=${encodeURIComponent(search)}` : ''}`,
+        `/api/v1/admin/clinics?page=${page}&limit=${limit}` +
+          (search ? `&search=${encodeURIComponent(search)}` : '') +
+          (statusFilter !== '' ? `&status=${statusFilter}` : ''),
       ),
   });
 
   const deleteMutation = useMutation({
-    mutationFn: (c: Clinic) => api.delete<ApiResponse<null>>(`/api/v1/clinic/${c.uuid}`),
+    mutationFn: (c: Clinic) => api.delete<ApiResponse<null>>(`/api/v1/admin/clinic/${c.uuid}`),
     onSuccess: () => {
       toast.success('کلینیک حذف شد');
       setDeleteTarget(null);
-      qc.invalidateQueries({ queryKey: ['clinics'] });
+      qc.invalidateQueries({ queryKey: ['admin-clinics'] });
     },
     onError: (err: Error) => toast.error(err.message),
   });
 
-  const columns: Column<Clinic>[] = [
-    {
-      key: 'name',
-      header: 'نام کلینیک',
-      render: (c) => {
-        const hue = HUES_LIST[(c.uuid?.charCodeAt(0) ?? 0) % HUES_LIST.length];
-        return (
-          <div className="cell-user">
-            {c.logo ? (
-              <img src={c.logo} alt="" className="avatar sm" style={{ objectFit: 'cover' }} />
-            ) : (
-              <div className="avatar sm" style={{
-                background: `linear-gradient(145deg, oklch(0.62 0.15 ${hue}), oklch(0.48 0.16 ${hue}))`,
-              }}>
-                {c.name?.[0] ?? '?'}
-              </div>
-            )}
-            <div>
-              <b>{c.name}</b>
-            </div>
-          </div>
-        );
-      },
+  const toggleMutation = useMutation({
+    mutationFn: (c: Clinic) => api.patch<ApiResponse<{ is_active: boolean }>>(`/api/v1/admin/clinic/${c.uuid}/status`, {}),
+    onSuccess: () => {
+      toast.success('وضعیت کلینیک تغییر کرد');
+      qc.invalidateQueries({ queryKey: ['admin-clinics'] });
     },
-    { key: 'phone', header: 'تلفن', render: (c) => c.phone ? <span dir="ltr">{c.phone}</span> : '—' },
-    {
-      key: 'doctors_count',
-      header: 'پزشکان',
-      render: (c) => (
-        <span className="badge blue">
-          <span className="bdot" />
-          {formatNumber(c.doctors_count ?? 0)} پزشک
-        </span>
-      ),
-    },
-    { key: 'is_active', header: 'وضعیت', render: (c) => <ActiveBadge active={c.is_active} /> },
-    { key: 'created_at', header: 'تاریخ ثبت', render: (c) => formatDate(c.created_at) },
-  ];
+    onError: (err: Error) => toast.error(err.message),
+  });
 
-  const items = data?.data ?? [];
+  const addForm = useForm<AddForm>({ resolver: zodResolver(addSchema) });
+
+  const addMutation = useMutation({
+    mutationFn: (d: AddForm) => api.post<ApiResponse<{ uuid: string }>>('/api/v1/clinic', d),
+    onSuccess: (res) => {
+      toast.success('کلینیک اضافه شد');
+      setAddOpen(false);
+      addForm.reset();
+      qc.invalidateQueries({ queryKey: ['admin-clinics'] });
+      if (res?.data?.uuid) navigate(`/admin/clinics/${res.data.uuid}`);
+    },
+    onError: (err: Error) => toast.error(err.message),
+  });
+
+  const items: Clinic[] = data?.data ?? [];
   const total = data?.meta?.totalRecords ?? 0;
 
   return (
@@ -87,8 +88,12 @@ export default function ClinicsPage() {
       <div className="card-title-row" style={{ marginBottom: 'var(--gap)' }}>
         <div>
           <h1 className="section-title">کلینیک‌ها</h1>
-          <div className="muted">{total} کلینیک ثبت‌شده</div>
+          <div className="muted">{formatNumber(total)} کلینیک ثبت‌شده</div>
         </div>
+        <button className="btn primary sm" onClick={() => setAddOpen(true)}>
+          <PlusIcon style={{ width: 16, height: 16 }} />
+          افزودن کلینیک
+        </button>
       </div>
 
       <div className="card">
@@ -99,36 +104,166 @@ export default function ClinicsPage() {
               <input
                 value={search}
                 onChange={(e) => { setSearch(e.target.value); setPage(1); }}
-                placeholder="جستجو بر اساس نام کلینیک..."
+                placeholder="جستجو بر اساس نام..."
               />
             </div>
+            <div className="seg">
+              {[
+                { v: '', label: 'همه' },
+                { v: '1', label: 'فعال' },
+                { v: '0', label: 'غیرفعال' },
+              ].map(({ v, label }) => (
+                <button
+                  key={v}
+                  className={statusFilter === v ? 'active' : ''}
+                  onClick={() => { setStatusFilter(v); setPage(1); }}
+                >
+                  {label}
+                </button>
+              ))}
+            </div>
           </div>
         </div>
-        <DataTable<Clinic>
-          columns={columns}
-          data={items}
-          loading={isLoading}
-          emptyMessage="هیچ کلینیکی یافت نشد"
-          actions={(clinic) => (
-            <>
-              <button onClick={() => navigate(`/admin/clinics/${clinic.uuid}`)}
-                className="mini-btn" title="مشاهده">
-                <EyeIcon style={{ width: 15, height: 15 }} />
-              </button>
-              <button onClick={() => navigate(`/admin/clinics/${clinic.uuid}?edit=1`)}
-                className="mini-btn" title="ویرایش">
-                <PencilIcon style={{ width: 15, height: 15 }} />
-              </button>
-              <button onClick={() => setDeleteTarget(clinic)}
-                className="mini-btn danger" title="حذف">
-                <TrashIcon style={{ width: 15, height: 15 }} />
-              </button>
-            </>
-          )}
-        />
+
+        <table className="t">
+          <thead>
+            <tr>
+              <th>کلینیک</th>
+              <th>تلفن</th>
+              <th>پزشکان</th>
+              <th>وضعیت</th>
+              <th>تاریخ ثبت</th>
+              <th />
+            </tr>
+          </thead>
+          <tbody>
+            {isLoading
+              ? Array.from({ length: 8 }).map((_, i) => (
+                  <tr key={i}>
+                    {Array.from({ length: 6 }).map((_, j) => (
+                      <td key={j}><div className="skeleton" style={{ height: 18, borderRadius: 6 }} /></td>
+                    ))}
+                  </tr>
+                ))
+              : items.length === 0
+              ? (
+                <tr>
+                  <td colSpan={6}>
+                    <div className="empty">
+                      <BuildingOffice2Icon style={{ width: 36, height: 36 }} />
+                      <p>هیچ کلینیکی یافت نشد</p>
+                    </div>
+                  </td>
+                </tr>
+              )
+              : items.map((c) => {
+                  const hue = HUES_LIST[(c.uuid?.charCodeAt(0) ?? 0) % HUES_LIST.length];
+                  return (
+                    <tr key={c.uuid}>
+                      <td>
+                        <div className="cell-user">
+                          {c.logo ? (
+                            <img src={c.logo} alt="" className="avatar sm" style={{ objectFit: 'cover' }} />
+                          ) : (
+                            <div className="avatar sm" style={{
+                              background: `linear-gradient(145deg, oklch(0.62 0.15 ${hue}), oklch(0.48 0.16 ${hue}))`,
+                            }}>
+                              {c.name?.[0] ?? '?'}
+                            </div>
+                          )}
+                          <div>
+                            <b>{c.name}</b>
+                          </div>
+                        </div>
+                      </td>
+                      <td>{c.phone ? <span dir="ltr">{c.phone}</span> : '—'}</td>
+                      <td>
+                        <span className="badge blue">
+                          <span className="bdot" />
+                          {formatNumber(c.doctors_count ?? 0)} پزشک
+                        </span>
+                      </td>
+                      <td>
+                        <span className={`badge ${c.is_active ? 'green' : 'gray'}`}>
+                          <span className="bdot" />
+                          {c.is_active ? 'فعال' : 'غیرفعال'}
+                        </span>
+                      </td>
+                      <td>{formatDate(String(c.created_at))}</td>
+                      <td>
+                        <div className="row-actions">
+                          <button
+                            className="mini-btn"
+                            title="مشاهده"
+                            onClick={() => navigate(`/admin/clinics/${c.uuid}`)}
+                          >
+                            <EyeIcon style={{ width: 15, height: 15 }} />
+                          </button>
+                          <button
+                            className={`mini-btn${c.is_active ? '' : ' active'}`}
+                            title={c.is_active ? 'غیرفعال کردن' : 'فعال کردن'}
+                            onClick={() => toggleMutation.mutate(c)}
+                          >
+                            <span style={{ fontSize: 11, fontWeight: 700 }}>
+                              {c.is_active ? 'OFF' : 'ON'}
+                            </span>
+                          </button>
+                          <button
+                            className="mini-btn danger"
+                            title="حذف"
+                            onClick={() => setDeleteTarget(c)}
+                          >
+                            <TrashIcon style={{ width: 15, height: 15 }} />
+                          </button>
+                        </div>
+                      </td>
+                    </tr>
+                  );
+                })}
+          </tbody>
+        </table>
+
         <Pagination page={page} total={total} limit={limit} onPageChange={setPage} />
       </div>
 
+      {/* Add Modal */}
+      {addOpen && (
+        <div className="overlay" onClick={() => setAddOpen(false)}>
+          <div className="modal" style={{ maxWidth: 420 }} onClick={(e) => e.stopPropagation()}>
+            <div className="modal-head">
+              <b>افزودن کلینیک</b>
+            </div>
+            <form onSubmit={addForm.handleSubmit((d) => addMutation.mutate(d))}>
+              <div className="modal-body" style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
+                <div>
+                  <label style={{ fontSize: 13, fontWeight: 600, marginBottom: 6, display: 'block' }}>
+                    نام کلینیک
+                  </label>
+                  <input className="input" placeholder="نام کلینیک را وارد کنید" {...addForm.register('name')} />
+                  {addForm.formState.errors.name && (
+                    <div className="err-text">{addForm.formState.errors.name.message}</div>
+                  )}
+                </div>
+                <div>
+                  <label style={{ fontSize: 13, fontWeight: 600, marginBottom: 6, display: 'block' }}>
+                    تلفن (اختیاری)
+                  </label>
+                  <input className="input" placeholder="مثال: 021-12345678" dir="ltr" {...addForm.register('phone')} />
+                </div>
+              </div>
+              <div className="modal-foot">
+                <button type="button" className="btn ghost sm" onClick={() => setAddOpen(false)}>
+                  انصراف
+                </button>
+                <button type="submit" className="btn primary sm" disabled={addMutation.isPending}>
+                  {addMutation.isPending ? 'در حال ذخیره...' : 'افزودن'}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+
       <ConfirmDialog
         open={!!deleteTarget}
         title="حذف کلینیک"