feat(appointments): edit page + filters modal — phase C2/C3

- AppointmentEditPage (edit.pdf): full-page edit of بخش/سرویس/پرسنل, Jalali
  date + start/end time, deposit, status and notes; hydrates from
  GET /appointment/{uuid} and saves through the general PATCH with the
  optimistic-lock version. Routed at /admin/appointments/:uuid/edit (the
  actions-menu ویرایش target).
- AppointmentFiltersModal (filter-desktop.pdf): name/national-code search,
  بخش/سرویس selects, six status checkboxes (لغو شده covers both cancel
  reasons), gender radios, حذف همه reset. Filtering is client-side over the
  loaded day via the pure applyAppointmentFilters; toolbar gains the filter
  button with an active indicator.
- /my/appointments rows now include patient_national_code and patient_gender
  so the filters have data to match on.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

assets/admin/pages/AppointmentEditPage.test.tsx

@@ -0,0 +1,67 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { screen, fireEvent, waitFor } from '@testing-library/react';
+import { Routes, Route } from 'react-router-dom';
+import { renderWithProviders } from '../test/utils';
+
+vi.mock('../lib/api', () => ({
+  api: { get: vi.fn(), post: vi.fn(), patch: vi.fn(), put: vi.fn(), delete: vi.fn() },
+  ApiError: class extends Error {},
+}));
+
+import { api } from '../lib/api';
+import AppointmentEditPage from './AppointmentEditPage';
+
+const get = api.get as ReturnType<typeof vi.fn>;
+const patch = api.patch as ReturnType<typeof vi.fn>;
+
+const slotStart = Math.floor(new Date('2026-08-01T15:00').getTime() / 1000);
+const slotEnd = Math.floor(new Date('2026-08-01T16:00').getTime() / 1000);
+
+beforeEach(() => {
+  get.mockReset(); patch.mockReset();
+  get.mockImplementation((url: string) => {
+    if (url === '/api/v1/appointment/ap1') return Promise.resolve({ success: true, data: { data: {
+      uuid: 'ap1', slot_start: slotStart, slot_end: slotEnd, status: 'confirmed', version: 4,
+      note: 'یادداشت', deposit_required: true, deposit_amount_rials: 5000000,
+      service_section: { uuid: 'sec1', name: 'زیبایی' }, service_item: { uuid: 'it1', name: 'لیزر' },
+      staff: { uuid: 'st1', full_name: 'سحر ایمانی' },
+    } } });
+    if (url === '/api/v1/service-sections') return Promise.resolve({ success: true, data: [{ uuid: 'sec1', name: 'زیبایی' }] });
+    if (url.startsWith('/api/v1/service-items/')) return Promise.resolve({ success: true, data: [{ uuid: 'it1', name: 'لیزر' }] });
+    if (url === '/api/v1/staff') return Promise.resolve({ success: true, data: [{ uuid: 'st1', full_name: 'سحر ایمانی' }] });
+    return Promise.resolve({ success: true, data: [] });
+  });
+  patch.mockResolvedValue({ success: true, data: {} });
+});
+
+function renderEdit() {
+  return renderWithProviders(
+    <Routes><Route path="/admin/appointments/:uuid/edit" element={<AppointmentEditPage />} /></Routes>,
+    { route: '/admin/appointments/ap1/edit' },
+  );
+}
+
+describe('AppointmentEditPage (ویرایش نوبت)', () => {
+  it('hydrates the form from the appointment', async () => {
+    renderEdit();
+    expect(await screen.findByText('مشخصات سرویس:')).toBeInTheDocument();
+    expect((screen.getByLabelText('ساعت شروع') as HTMLInputElement).value).toBe('15:00');
+    expect((screen.getByLabelText('وضعیت') as HTMLSelectElement).value).toBe('confirmed');
+    expect(screen.getByDisplayValue('یادداشت')).toBeInTheDocument();
+  });
+
+  it('patches the general update endpoint with the edited values', async () => {
+    renderEdit();
+    await screen.findByText('مشخصات سرویس:');
+    fireEvent.change(screen.getByLabelText('ساعت پایان'), { target: { value: '16:30' } });
+    fireEvent.click(screen.getByRole('button', { name: 'ثبت اطلاعات' }));
+    await waitFor(() => expect(patch).toHaveBeenCalledWith('/api/v1/appointment/ap1', expect.objectContaining({
+      slot_start: slotStart,
+      slot_end: Math.floor(new Date('2026-08-01T16:30').getTime() / 1000),
+      service_section_uuid: 'sec1',
+      staff_uuid: 'st1',
+      deposit_required: true,
+      version: 4,
+    })));
+  });
+});

assets/admin/pages/AppointmentEditPage.tsx

@@ -0,0 +1,191 @@
+import { useEffect, useState } from 'react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useNavigate, useParams, Link } from 'react-router-dom';
+import { ChevronRightIcon } from '@heroicons/react/24/outline';
+import { toast } from 'sonner';
+import { api } from '../lib/api';
+import type { ApiResponse } from '../lib/api';
+import PersianDateInput from '../components/ui/PersianDateInput';
+import PriceInput from '../components/ui/PriceInput';
+
+interface Option { uuid: string; name?: string; full_name?: string }
+
+interface AppointmentDetail {
+  uuid: string; slot_start: number; slot_end: number; status: string; version: number;
+  note?: string | null;
+  deposit_required?: boolean; deposit_amount_rials?: number | null;
+  service_section?: Option | null; service_item?: Option | null; staff?: Option | null;
+}
+
+const isoDate = (ts: number) => {
+  const d = new Date(ts * 1000);
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
+};
+const isoTime = (ts: number) => {
+  const d = new Date(ts * 1000);
+  return `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`;
+};
+const toEpoch = (date: string, time: string) => Math.floor(new Date(`${date}T${time || '00:00'}`).getTime() / 1000);
+
+/** ویرایش نوبت (Figma edit.pdf) — full-page edit of service specs, timing, deposit, status and notes. */
+export default function AppointmentEditPage() {
+  const { uuid = '' } = useParams();
+  const navigate = useNavigate();
+  const qc = useQueryClient();
+
+  const { data, isLoading } = useQuery<ApiResponse<{ data: AppointmentDetail }>>({
+    queryKey: ['appointment-edit', uuid],
+    queryFn: () => api.get(`/api/v1/appointment/${uuid}`),
+    enabled: !!uuid,
+  });
+  const a = data?.data?.data;
+
+  const [sectionUuid, setSectionUuid] = useState('');
+  const [itemUuid, setItemUuid] = useState('');
+  const [staffUuid, setStaffUuid] = useState('');
+  const [date, setDate] = useState('');
+  const [start, setStart] = useState('');
+  const [end, setEnd] = useState('');
+  const [depositRequired, setDepositRequired] = useState(false);
+  const [depositRials, setDepositRials] = useState(0);
+  const [status, setStatus] = useState('');
+  const [note, setNote] = useState('');
+
+  // hydrate once the appointment arrives
+  useEffect(() => {
+    if (!a) return;
+    setSectionUuid(a.service_section?.uuid ?? '');
+    setItemUuid(a.service_item?.uuid ?? '');
+    setStaffUuid(a.staff?.uuid ?? '');
+    setDate(isoDate(a.slot_start));
+    setStart(isoTime(a.slot_start));
+    setEnd(isoTime(a.slot_end));
+    setDepositRequired(!!a.deposit_required);
+    setDepositRials(a.deposit_amount_rials ?? 0);
+    setStatus(a.status);
+    setNote(a.note ?? '');
+  }, [a]);
+
+  const sectionsQ = useQuery<ApiResponse<Option[]>>({ queryKey: ['service-sections'], queryFn: () => api.get('/api/v1/service-sections') });
+  const itemsQ = useQuery<ApiResponse<Option[]>>({
+    queryKey: ['service-items', sectionUuid],
+    queryFn: () => api.get(`/api/v1/service-items/${sectionUuid}`),
+    enabled: !!sectionUuid,
+  });
+  const staffQ = useQuery<ApiResponse<Option[]>>({ queryKey: ['staff-list'], queryFn: () => api.get('/api/v1/staff') });
+
+  const save = useMutation({
+    mutationFn: () => api.patch(`/api/v1/appointment/${uuid}`, {
+      slot_start: toEpoch(date, start),
+      slot_end: toEpoch(date, end),
+      service_section_uuid: sectionUuid,
+      service_item_uuid: itemUuid,
+      staff_uuid: staffUuid,
+      deposit_required: depositRequired,
+      deposit_amount_rials: depositRequired ? depositRials : null,
+      note,
+      ...(status !== a?.status ? { status } : {}),
+      version: a?.version,
+    }),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ['appointments'] });
+      toast.success('نوبت به‌روزرسانی شد');
+      navigate('/admin/appointments');
+    },
+    onError: (e: any) => toast.error(e.message || 'خطا در ذخیره اطلاعات'),
+  });
+
+  const label = { fontSize: 12.5, color: 'var(--text-3)' } as const;
+  const sel = { width: '100%', height: 38, borderRadius: 'var(--r-sm)', border: '1px solid var(--border)', background: 'var(--surface)', fontSize: 13, fontFamily: 'inherit', padding: '0 10px' } as const;
+
+  if (isLoading || !a) return <div style={{ padding: 24, color: 'var(--text-3)', fontSize: 13 }}>در حال بارگذاری...</div>;
+
+  const statusOptions: [string, string][] = [
+    ['pending', 'ثبت شده'], ['confirmed', 'قطعی شده'], ['following_up', 'در حال پیگیری'],
+    ['salon', 'سالن'], ['completed', 'ویزیت شده'], ['cancelled_by_doctor', 'لغو شده'],
+  ];
+
+  return (
+    <div className="fade-in" style={{ maxWidth: 860, margin: '0 auto' }}>
+      <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: 14 }}>
+        <Link to="/admin/appointments" className="btn sm ghost" style={{ color: 'var(--text-2)' }}>
+          <ChevronRightIcon style={{ width: 16 }} /> بازگشت
+        </Link>
+      </div>
+
+      <div style={{ background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 'var(--r-lg)', padding: 22 }}>
+        <div style={{ fontSize: 14, fontWeight: 700, marginBottom: 12 }}>مشخصات سرویس:</div>
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: 12, marginBottom: 18 }}>
+          <div>
+            <label style={label}>بخش</label>
+            <select aria-label="بخش" style={{ ...sel, marginTop: 6 }} value={sectionUuid} onChange={e => { setSectionUuid(e.target.value); setItemUuid(''); }}>
+              <option value="">انتخاب بخش</option>
+              {(sectionsQ.data?.data ?? []).map(o => <option key={o.uuid} value={o.uuid}>{o.name}</option>)}
+            </select>
+          </div>
+          <div>
+            <label style={label}>سرویس</label>
+            <select aria-label="سرویس" style={{ ...sel, marginTop: 6 }} value={itemUuid} onChange={e => setItemUuid(e.target.value)} disabled={!sectionUuid}>
+              <option value="">انتخاب سرویس</option>
+              {(itemsQ.data?.data ?? []).map(o => <option key={o.uuid} value={o.uuid}>{o.name}</option>)}
+            </select>
+          </div>
+          <div>
+            <label style={label}>پرسنل</label>
+            <select aria-label="پرسنل" style={{ ...sel, marginTop: 6 }} value={staffUuid} onChange={e => setStaffUuid(e.target.value)}>
+              <option value="">انتخاب پرسنل</option>
+              {(staffQ.data?.data ?? []).map(o => <option key={o.uuid} value={o.uuid}>{o.full_name}</option>)}
+            </select>
+          </div>
+        </div>
+
+        <div style={{ fontSize: 14, fontWeight: 700, marginBottom: 12 }}>زمان نوبت:</div>
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(160px, 1fr))', gap: 12, marginBottom: 18 }}>
+          <div>
+            <label style={label}>انتخاب تاریخ</label>
+            <div style={{ marginTop: 6 }}><PersianDateInput value={date} onChange={setDate} /></div>
+          </div>
+          <div>
+            <label style={label}>ساعت شروع</label>
+            <div className="field" style={{ marginTop: 6 }}><input aria-label="ساعت شروع" type="time" value={start} onChange={e => setStart(e.target.value)} dir="ltr" /></div>
+          </div>
+          <div>
+            <label style={label}>ساعت پایان</label>
+            <div className="field" style={{ marginTop: 6 }}><input aria-label="ساعت پایان" type="time" value={end} onChange={e => setEnd(e.target.value)} dir="ltr" /></div>
+          </div>
+        </div>
+
+        <div style={{ fontSize: 14, fontWeight: 700, marginBottom: 12 }}>بیعانه:</div>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap', marginBottom: 18 }}>
+          <label style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 13, cursor: 'pointer' }}>
+            <input type="checkbox" checked={depositRequired} onChange={e => setDepositRequired(e.target.checked)} />
+            بیعانه مورد نیاز است.
+          </label>
+          {depositRequired && (
+            <div style={{ minWidth: 220 }}>
+              <label style={label}>مبلغ بیعانه (تومان)</label>
+              <div style={{ marginTop: 6 }}><PriceInput value={depositRials} onChange={setDepositRials} /></div>
+            </div>
+          )}
+        </div>
+
+        <div style={{ maxWidth: 320, marginBottom: 18 }}>
+          <label style={label}>انتخاب وضعیت</label>
+          <select aria-label="وضعیت" style={{ ...sel, marginTop: 6 }} value={status} onChange={e => setStatus(e.target.value)}>
+            {statusOptions.map(([v, l]) => <option key={v} value={v}>{l}</option>)}
+          </select>
+        </div>
+
+        <label style={label}>توضیحات</label>
+        <div className="field" style={{ height: 'auto', margin: '6px 0 18px' }}>
+          <textarea value={note} onChange={e => setNote(e.target.value)} rows={4} placeholder="توضیحات"
+            style={{ width: '100%', border: 'none', background: 'transparent', fontFamily: 'inherit', resize: 'vertical' }} />
+        </div>
+
+        <button className="btn primary" disabled={!date || !start || !end || save.isPending} onClick={() => save.mutate()}>
+          ثبت اطلاعات
+        </button>
+      </div>
+    </div>
+  );
+}

assets/admin/pages/AppointmentsPage.tsx

@@ -13,6 +13,9 @@ import { useAuthStore } from '../stores/authStore';
 import AppointmentStatusDropdown from '../components/ui/AppointmentStatusDropdown';
 import AppointmentActionsMenu from '../components/AppointmentActions';
 import NewAppointmentDrawer from '../components/NewAppointmentDrawer';
+import AppointmentFiltersModal, { applyAppointmentFilters, EMPTY_FILTERS } from '../components/AppointmentFiltersModal';
+import type { AppointmentFilters } from '../components/AppointmentFiltersModal';
+import { AdjustmentsHorizontalIcon } from '@heroicons/react/24/outline';
 import PersianCalendar from '../components/ui/PersianCalendar';
 import SearchableSelect from '../components/ui/SearchableSelect';
 
@@ -549,6 +552,8 @@ export default function AppointmentsPage() {
   const [bookingSlot,    setBookingSlot]    = useState<BookingSlot | null>(null);
   const [bookingHint,    setBookingHint]    = useState(false);
   const [drawerOpen,     setDrawerOpen]     = useState(false);
+  const [filtersOpen,    setFiltersOpen]    = useState(false);
+  const [filters,        setFilters]        = useState<AppointmentFilters>(EMPTY_FILTERS);
   const qc = useQueryClient();
 
   // ── Appointments query
@@ -566,6 +571,8 @@ export default function AppointmentsPage() {
     queryFn: () => api.get(`${apptEndpoint}?${apptParams}`),
   });
   const appointments: Appointment[] = apptQuery.data?.data ?? EMPTY_ARR;
+  const filteredAppointments = applyAppointmentFilters(appointments, filters);
+  const filtersActive = filters !== EMPTY_FILTERS && JSON.stringify(filters) !== JSON.stringify(EMPTY_FILTERS);
 
   // ── Clinic: load doctors from clinic profile (not derived from appointments)
   const clinicDoctorsQuery = useQuery<ApiResponse<{ data: { uuid: string; name: string }[] }>>({
@@ -705,6 +712,20 @@ export default function AppointmentsPage() {
             </button>
           )}
 
+          {/* Filters (Figma فیلترها) */}
+          <button
+            aria-label="فیلترها"
+            className="btn sm"
+            onClick={() => setFiltersOpen(true)}
+            style={{
+              border: `1px solid ${filtersActive ? 'var(--primary)' : 'var(--border)'}`,
+              color: filtersActive ? 'var(--primary)' : 'var(--text-2)',
+              background: 'var(--surface)',
+            }}
+          >
+            <AdjustmentsHorizontalIcon style={{ width: 16 }} />
+          </button>
+
           {/* View toggle */}
           <div style={{
             display: 'flex', background: 'var(--surface-2)', borderRadius: 'var(--r-sm)',
@@ -759,7 +780,7 @@ export default function AppointmentsPage() {
         <div style={{ padding: 16 }}>
           {viewMode === 'table' ? (
             <TableView
-              items={appointments}
+              items={filteredAppointments}
               loading={apptQuery.isLoading}
               queryKey={apptQueryKey}
               showDoctor={showDoctorCol}
@@ -807,6 +828,11 @@ export default function AppointmentsPage() {
         />
       )}
 
+      {/* Filters modal */}
+      {filtersOpen && (
+        <AppointmentFiltersModal value={filters} onApply={setFilters} onClose={() => setFiltersOpen(false)} />
+      )}
+
       {/* Rich create drawer (اضافه کردن نوبت جدید) */}
       {drawerOpen && (
         <NewAppointmentDrawer