feat: add Staff, Subscription, ClinicServices, SmsWallet pages (TASK-10,11,13,14)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

assets/admin/pages/ClinicServicesPage.tsx

@@ -0,0 +1,312 @@
+import React, { useState } from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { PlusIcon, PencilIcon, TrashIcon } from '@heroicons/react/24/outline';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { toast } from 'sonner';
+import { api } from '../lib/api';
+import type { ApiResponse } from '../lib/api';
+import type { ServiceSection, ServiceItem, ClinicStaff } from '../types';
+import { formatRial } from '../lib/utils';
+import Modal from '../components/ui/Modal';
+import ConfirmDialog from '../components/ui/ConfirmDialog';
+import PageHeader from '../components/ui/PageHeader';
+import SearchableSelect from '../components/ui/SearchableSelect';
+
+const sectionSchema = z.object({ name: z.string().min(1, 'نام بخش الزامی است') });
+const itemSchema = z.object({
+  name:        z.string().min(1, 'نام سرویس الزامی است'),
+  price_rials: z.coerce.number().min(0, 'مبلغ نمی‌تواند منفی باشد'),
+  staff_uuid:  z.string().optional(),
+});
+type SectionForm = z.infer<typeof sectionSchema>;
+type ItemForm    = z.infer<typeof itemSchema>;
+
+const EMPTY_SECTIONS: ServiceSection[] = [];
+const EMPTY_ITEMS: ServiceItem[] = [];
+
+export default function ClinicServicesPage() {
+  const qc = useQueryClient();
+
+  const [selectedSection, setSelectedSection] = useState<ServiceSection | null>(null);
+  const [sectionModal, setSectionModal] = useState<'create' | ServiceSection | null>(null);
+  const [deleteSection, setDeleteSection] = useState<ServiceSection | null>(null);
+  const [itemModal, setItemModal] = useState<'create' | ServiceItem | null>(null);
+  const [deleteItem, setDeleteItem] = useState<ServiceItem | null>(null);
+
+  const { data: sectionsData, isLoading: sectionsLoading } = useQuery<ApiResponse<ServiceSection[]>>({
+    queryKey: ['service-sections'],
+    queryFn: () => api.get('/api/v1/service-sections'),
+  });
+
+  const { data: itemsData, isLoading: itemsLoading } = useQuery<ApiResponse<ServiceItem[]>>({
+    queryKey: ['service-items', selectedSection?.uuid],
+    queryFn: () => api.get(`/api/v1/service-items/${selectedSection!.uuid}`),
+    enabled: !!selectedSection,
+  });
+
+  const { data: staffData } = useQuery<ApiResponse<ClinicStaff[]>>({
+    queryKey: ['staff'],
+    queryFn: () => api.get('/api/v1/staff'),
+  });
+
+  const sections = sectionsData?.data ?? EMPTY_SECTIONS;
+  const items    = itemsData?.data ?? EMPTY_ITEMS;
+  const staffOptions = (staffData?.data ?? []).filter((s) => s.active).map((s) => ({
+    value: s.uuid,
+    label: s.full_name,
+  }));
+
+  const sectionForm = useForm<SectionForm>({ resolver: zodResolver(sectionSchema) });
+  const itemForm    = useForm<ItemForm>({ resolver: zodResolver(itemSchema) });
+
+  const createSection = useMutation({
+    mutationFn: (body: SectionForm) => api.post('/api/v1/service-section', body),
+    onSuccess: () => { qc.invalidateQueries({ queryKey: ['service-sections'] }); setSectionModal(null); sectionForm.reset(); toast.success('بخش ایجاد شد'); },
+    onError: (e: any) => toast.error(e.message),
+  });
+
+  const editSection = useMutation({
+    mutationFn: ({ uuid, body }: { uuid: string; body: SectionForm }) =>
+      api.patch(`/api/v1/service-section/${uuid}`, body),
+    onSuccess: () => { qc.invalidateQueries({ queryKey: ['service-sections'] }); setSectionModal(null); toast.success('بخش ویرایش شد'); },
+    onError: (e: any) => toast.error(e.message),
+  });
+
+  const delSection = useMutation({
+    mutationFn: (uuid: string) => api.delete(`/api/v1/service-section/${uuid}`),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ['service-sections'] });
+      if (selectedSection?.uuid === deleteSection?.uuid) setSelectedSection(null);
+      setDeleteSection(null);
+      toast.success('بخش حذف شد');
+    },
+    onError: (e: any) => { toast.error(e.message); setDeleteSection(null); },
+  });
+
+  const createItem = useMutation({
+    mutationFn: (body: ItemForm & { section_uuid: string }) => api.post('/api/v1/service-item', body),
+    onSuccess: () => { qc.invalidateQueries({ queryKey: ['service-items', selectedSection?.uuid] }); setItemModal(null); itemForm.reset(); toast.success('سرویس ایجاد شد'); },
+    onError: (e: any) => toast.error(e.message),
+  });
+
+  const editItem = useMutation({
+    mutationFn: ({ uuid, body }: { uuid: string; body: ItemForm }) =>
+      api.patch(`/api/v1/service-item/${uuid}`, body),
+    onSuccess: () => { qc.invalidateQueries({ queryKey: ['service-items', selectedSection?.uuid] }); setItemModal(null); toast.success('سرویس ویرایش شد'); },
+    onError: (e: any) => toast.error(e.message),
+  });
+
+  const delItem = useMutation({
+    mutationFn: (uuid: string) => api.delete(`/api/v1/service-item/${uuid}`),
+    onSuccess: () => { qc.invalidateQueries({ queryKey: ['service-items', selectedSection?.uuid] }); setDeleteItem(null); toast.success('سرویس حذف شد'); },
+    onError: (e: any) => {
+      if (e.code === 'ERR_SERVICE_ITEM_IN_USE') {
+        toast.error('این سرویس در پرونده بیمار استفاده شده و قابل حذف نیست');
+      } else {
+        toast.error(e.message);
+      }
+      setDeleteItem(null);
+    },
+  });
+
+  const openEditSection = (s: ServiceSection) => {
+    sectionForm.reset({ name: s.name });
+    setSectionModal(s);
+  };
+
+  const openEditItem = (item: ServiceItem) => {
+    itemForm.reset({
+      name: item.name,
+      price_rials: item.price_rials,
+      staff_uuid: item.staff?.uuid ?? '',
+    });
+    setItemModal(item);
+  };
+
+  return (
+    <>
+      <PageHeader title="سرویس‌های کلینیک" description="مدیریت بخش‌ها و سرویس‌های کلینیک" />
+
+      <div style={{ display: 'grid', gridTemplateColumns: '280px 1fr', gap: 16, alignItems: 'start' }}>
+        {/* ستون بخش‌ها */}
+        <div className="card">
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
+            <b style={{ fontSize: 14 }}>بخش‌ها</b>
+            <button className="btn primary sm" onClick={() => { sectionForm.reset(); setSectionModal('create'); }}>
+              <PlusIcon style={{ width: 14 }} />
+            </button>
+          </div>
+          {sectionsLoading ? (
+            <div style={{ color: 'var(--text-3)', fontSize: 13 }}>در حال بارگذاری...</div>
+          ) : sections.length === 0 ? (
+            <div style={{ color: 'var(--text-3)', fontSize: 13 }}>بخشی ثبت نشده است</div>
+          ) : (
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+              {sections.map((s) => (
+                <div
+                  key={s.uuid}
+                  style={{
+                    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+                    padding: '8px 10px', borderRadius: 6, cursor: 'pointer',
+                    background: selectedSection?.uuid === s.uuid ? 'var(--primary-subtle)' : 'transparent',
+                    border: selectedSection?.uuid === s.uuid ? '1px solid var(--primary)' : '1px solid transparent',
+                  }}
+                  onClick={() => setSelectedSection(s)}
+                >
+                  <span style={{ fontSize: 13 }}>{s.name}</span>
+                  <div style={{ display: 'flex', gap: 4 }} onClick={(e) => e.stopPropagation()}>
+                    <button className="btn sm" onClick={() => openEditSection(s)}><PencilIcon style={{ width: 13 }} /></button>
+                    <button className="btn sm" onClick={() => setDeleteSection(s)}><TrashIcon style={{ width: 13 }} /></button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* ستون آیتم‌ها */}
+        <div className="card">
+          {!selectedSection ? (
+            <div style={{ padding: '40px 0', textAlign: 'center', color: 'var(--text-3)' }}>
+              یک بخش را از سمت راست انتخاب کنید
+            </div>
+          ) : (
+            <>
+              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
+                <b style={{ fontSize: 14 }}>سرویس‌های «{selectedSection.name}»</b>
+                <button
+                  className="btn primary sm"
+                  onClick={() => { itemForm.reset({ price_rials: 0, staff_uuid: '' }); setItemModal('create'); }}
+                >
+                  <PlusIcon style={{ width: 14 }} /> سرویس جدید
+                </button>
+              </div>
+              {itemsLoading ? (
+                <div style={{ color: 'var(--text-3)', fontSize: 13 }}>در حال بارگذاری...</div>
+              ) : items.length === 0 ? (
+                <div style={{ color: 'var(--text-3)', fontSize: 13 }}>سرویسی ثبت نشده است</div>
+              ) : (
+                <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
+                  <thead>
+                    <tr style={{ borderBottom: '1px solid var(--border)' }}>
+                      <th style={{ textAlign: 'right', padding: '8px 4px' }}>نام سرویس</th>
+                      <th style={{ textAlign: 'right', padding: '8px 4px' }}>قیمت</th>
+                      <th style={{ textAlign: 'right', padding: '8px 4px' }}>پرسنل مسئول</th>
+                      <th style={{ textAlign: 'right', padding: '8px 4px' }}>عملیات</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {items.map((item) => (
+                      <tr key={item.uuid} style={{ borderBottom: '1px solid var(--border)' }}>
+                        <td style={{ padding: '8px 4px' }}>{item.name}</td>
+                        <td style={{ padding: '8px 4px' }}>{formatRial(item.price_rials)}</td>
+                        <td style={{ padding: '8px 4px' }}>{item.staff?.full_name ?? '—'}</td>
+                        <td style={{ padding: '8px 4px' }}>
+                          <div style={{ display: 'flex', gap: 4 }}>
+                            <button className="btn sm" onClick={() => openEditItem(item)}><PencilIcon style={{ width: 13 }} /></button>
+                            <button className="btn sm" onClick={() => setDeleteItem(item)}><TrashIcon style={{ width: 13 }} /></button>
+                          </div>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              )}
+            </>
+          )}
+        </div>
+      </div>
+
+      {/* Modal بخش */}
+      <Modal
+        open={sectionModal !== null}
+        onClose={() => setSectionModal(null)}
+        title={sectionModal === 'create' ? 'بخش جدید' : 'ویرایش بخش'}
+      >
+        <form onSubmit={sectionForm.handleSubmit((d) => {
+          if (sectionModal === 'create') createSection.mutate(d);
+          else if (sectionModal !== null && typeof sectionModal === 'object') editSection.mutate({ uuid: sectionModal.uuid, body: d });
+        })}>
+          <div className="field">
+            <label>نام بخش *</label>
+            <input {...sectionForm.register('name')} placeholder="مثلاً: تزریقات" />
+            {sectionForm.formState.errors.name && (
+              <span className="field-error">{sectionForm.formState.errors.name.message}</span>
+            )}
+          </div>
+          <div style={{ display: 'flex', gap: 8, marginTop: 16 }}>
+            <button type="submit" className="btn primary" disabled={createSection.isPending || editSection.isPending}>ذخیره</button>
+            <button type="button" className="btn" onClick={() => setSectionModal(null)}>انصراف</button>
+          </div>
+        </form>
+      </Modal>
+
+      {/* Modal آیتم */}
+      <Modal
+        open={itemModal !== null}
+        onClose={() => setItemModal(null)}
+        title={itemModal === 'create' ? 'سرویس جدید' : 'ویرایش سرویس'}
+      >
+        <form onSubmit={itemForm.handleSubmit((d) => {
+          if (itemModal === 'create' && selectedSection) {
+            createItem.mutate({ ...d, section_uuid: selectedSection.uuid });
+          } else if (itemModal !== null && typeof itemModal === 'object') {
+            editItem.mutate({ uuid: itemModal.uuid, body: d });
+          }
+        })}>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+            <div className="field">
+              <label>نام سرویس *</label>
+              <input {...itemForm.register('name')} placeholder="مثلاً: سرم ۵۰۰cc" />
+              {itemForm.formState.errors.name && (
+                <span className="field-error">{itemForm.formState.errors.name.message}</span>
+              )}
+            </div>
+            <div className="field">
+              <label>قیمت (ریال) *</label>
+              <input {...itemForm.register('price_rials')} type="number" min={0} placeholder="85000" dir="ltr" />
+            </div>
+            <div className="field">
+              <label>پرسنل مسئول</label>
+              <SearchableSelect
+                options={staffOptions}
+                value={itemForm.watch('staff_uuid') ?? ''}
+                onChange={(v) => itemForm.setValue('staff_uuid', v != null ? String(v) : undefined)}
+                placeholder="انتخاب پرسنل (اختیاری)"
+                isClearable
+              />
+            </div>
+          </div>
+          <div style={{ display: 'flex', gap: 8, marginTop: 16 }}>
+            <button type="submit" className="btn primary" disabled={createItem.isPending || editItem.isPending}>ذخیره</button>
+            <button type="button" className="btn" onClick={() => setItemModal(null)}>انصراف</button>
+          </div>
+        </form>
+      </Modal>
+
+      {/* Confirm حذف بخش */}
+      <ConfirmDialog
+        open={!!deleteSection}
+        title="حذف بخش"
+        message={`آیا مطمئن هستید که می‌خواهید بخش «${deleteSection?.name}» را حذف کنید؟`}
+        confirmLabel="حذف"
+        onConfirm={() => deleteSection && delSection.mutate(deleteSection.uuid)}
+        onCancel={() => setDeleteSection(null)}
+        loading={delSection.isPending}
+      />
+
+      {/* Confirm حذف آیتم */}
+      <ConfirmDialog
+        open={!!deleteItem}
+        title="حذف سرویس"
+        message={`آیا مطمئن هستید که می‌خواهید سرویس «${deleteItem?.name}» را حذف کنید؟`}
+        confirmLabel="حذف"
+        onConfirm={() => deleteItem && delItem.mutate(deleteItem.uuid)}
+        onCancel={() => setDeleteItem(null)}
+        loading={delItem.isPending}
+      />
+    </>
+  );
+}