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>
2026-07-14 00:02:22 +03:30
parent 91ea1b02aa
commit f736e4acd8
8 changed files with 493 additions and 1 deletions
@@ -0,0 +1,74 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { screen, fireEvent } from '@testing-library/react';
+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 AppointmentFiltersModal, { applyAppointmentFilters, EMPTY_FILTERS } from './AppointmentFiltersModal';
+import type { Appointment } from '../types';
+
+const get = api.get as ReturnType<typeof vi.fn>;
+
+beforeEach(() => {
+  get.mockReset();
+  get.mockResolvedValue({ success: true, data: [] });
+});
+
+const mk = (over: Partial<Appointment>): Appointment => ({
+  uuid: Math.random().toString(36), patient_name: 'x', patient_mobile: '0912',
+  doctor_uuid: 'd', doctor_name: 'دکتر', slot_start: 0, slot_end: 0,
+  appointment_date: '', appointment_time: '', end_time: '',
+  status: 'pending', version: 1, created_at: '', ...over,
+});
+
+describe('applyAppointmentFilters', () => {
+  const items = [
+    mk({ patient_name: 'مریم اسکندری', patient_national_code: '001', status: 'completed', patient_gender: 'female', service_section: { uuid: 's1', name: 'زیبایی' } }),
+    mk({ patient_name: 'مازیار عزیزی', patient_national_code: '002', status: 'cancelled_by_user', patient_gender: 'male' }),
+    mk({ patient_name: 'پریسا همتی', status: 'salon', patient_gender: 'female' }),
+  ];
+
+  it('filters by name, national code, section, status group and gender', () => {
+    expect(applyAppointmentFilters(items, { ...EMPTY_FILTERS, name: 'مریم' })).toHaveLength(1);
+    expect(applyAppointmentFilters(items, { ...EMPTY_FILTERS, nationalCode: '002' })).toHaveLength(1);
+    expect(applyAppointmentFilters(items, { ...EMPTY_FILTERS, sectionUuid: 's1' })).toHaveLength(1);
+    // «لغو شده» covers both cancelled_by_* statuses
+    expect(applyAppointmentFilters(items, { ...EMPTY_FILTERS, statuses: ['cancelled'] })).toHaveLength(1);
+    expect(applyAppointmentFilters(items, { ...EMPTY_FILTERS, statuses: ['salon', 'completed'] })).toHaveLength(2);
+    expect(applyAppointmentFilters(items, { ...EMPTY_FILTERS, gender: 'female' })).toHaveLength(2);
+    expect(applyAppointmentFilters(items, EMPTY_FILTERS)).toHaveLength(3);
+  });
+});
+
+describe('AppointmentFiltersModal (فیلترها)', () => {
+  it('renders the design controls and applies the chosen filters', () => {
+    const onApply = vi.fn();
+    renderWithProviders(<AppointmentFiltersModal value={EMPTY_FILTERS} onApply={onApply} onClose={() => {}} />);
+
+    expect(screen.getByText('حذف همه')).toBeInTheDocument();
+    expect(screen.getByText('وضعیت نوبت')).toBeInTheDocument();
+    expect(screen.getByText('جنسیت')).toBeInTheDocument();
+
+    fireEvent.change(screen.getByPlaceholderText('نام مراجعه کننده را وارد کنید...'), { target: { value: 'مریم' } });
+    fireEvent.click(screen.getByLabelText('ویزیت شده'));
+    fireEvent.click(screen.getByLabelText('خانم'));
+    fireEvent.click(screen.getByText('اعمال تغییرات'));
+
+    expect(onApply).toHaveBeenCalledWith(expect.objectContaining({
+      name: 'مریم', statuses: ['completed'], gender: 'female',
+    }));
+  });
+
+  it('«حذف همه» resets to the empty filter set', () => {
+    const onApply = vi.fn();
+    renderWithProviders(<AppointmentFiltersModal
+      value={{ ...EMPTY_FILTERS, name: 'x', statuses: ['salon'] }} onApply={onApply} onClose={() => {}} />);
+    fireEvent.click(screen.getByText('حذف همه'));
+    fireEvent.click(screen.getByText('اعمال تغییرات'));
+    expect(onApply).toHaveBeenCalledWith(EMPTY_FILTERS);
+  });
+});
@@ -0,0 +1,127 @@
+import { useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { XMarkIcon } from '@heroicons/react/24/outline';
+import { api } from '../lib/api';
+import type { ApiResponse } from '../lib/api';
+import type { Appointment } from '../types';
+import Modal from './ui/Modal';
+
+interface Option { uuid: string; name?: string }
+
+export interface AppointmentFilters {
+  name: string;
+  nationalCode: string;
+  sectionUuid: string;
+  itemUuid: string;
+  statuses: string[];
+  gender: 'female' | 'male' | 'both';
+}
+
+export const EMPTY_FILTERS: AppointmentFilters = {
+  name: '', nationalCode: '', sectionUuid: '', itemUuid: '', statuses: [], gender: 'both',
+};
+
+// design's 6 checkboxes; لغو شده covers both cancel reasons
+const STATUS_OPTIONS: [string, string][] = [
+  ['pending', 'ثبت شده'],
+  ['confirmed', 'قطعی شده'],
+  ['following_up', 'در حال پیگیری'],
+  ['salon', 'سالن'],
+  ['completed', 'ویزیت شده'],
+  ['cancelled', 'لغو شده'],
+];
+
+/** Pure client-side filter of the loaded day's appointments (Figma فیلترها). */
+export function applyAppointmentFilters(items: Appointment[], f: AppointmentFilters): Appointment[] {
+  return items.filter(a => {
+    if (f.name && !(a.patient_name ?? '').includes(f.name)) return false;
+    if (f.nationalCode && !(a.patient_national_code ?? '').includes(f.nationalCode)) return false;
+    if (f.sectionUuid && a.service_section?.uuid !== f.sectionUuid) return false;
+    if (f.itemUuid && a.service_item?.uuid !== f.itemUuid) return false;
+    if (f.statuses.length) {
+      const matches = f.statuses.some(s =>
+        s === 'cancelled' ? a.status.startsWith('cancelled') : a.status === s);
+      if (!matches) return false;
+    }
+    if (f.gender !== 'both' && (a.patient_gender ?? '') !== f.gender) return false;
+    return true;
+  });
+}
+
+/** فیلترها (filter-desktop.pdf) — name/national-code search, بخش/سرویس, status checkboxes, gender. */
+export default function AppointmentFiltersModal({ value, onApply, onClose }: {
+  value: AppointmentFilters; onApply: (f: AppointmentFilters) => void; onClose: () => void;
+}) {
+  const [f, setF] = useState<AppointmentFilters>(value);
+
+  const sectionsQ = useQuery<ApiResponse<Option[]>>({ queryKey: ['service-sections'], queryFn: () => api.get('/api/v1/service-sections') });
+  const itemsQ = useQuery<ApiResponse<Option[]>>({
+    queryKey: ['service-items', f.sectionUuid],
+    queryFn: () => api.get(`/api/v1/service-items/${f.sectionUuid}`),
+    enabled: !!f.sectionUuid,
+  });
+
+  const toggleStatus = (s: string) => setF(v => ({
+    ...v,
+    statuses: v.statuses.includes(s) ? v.statuses.filter(x => x !== s) : [...v.statuses, s],
+  }));
+
+  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;
+
+  return (
+    <Modal open title="فیلترها" onClose={onClose}>
+      <div>
+        <div style={{ display: 'flex', justifyContent: 'flex-start', marginBottom: 8 }}>
+          <button className="btn sm ghost" style={{ color: 'var(--accent)' }} onClick={() => setF(EMPTY_FILTERS)}>
+            <XMarkIcon style={{ width: 14 }} /> حذف همه
+          </button>
+        </div>
+
+        <label style={label}>جستجو براساس نام</label>
+        <div className="field" style={{ margin: '6px 0 12px' }}>
+          <input value={f.name} onChange={e => setF(v => ({ ...v, name: e.target.value }))} placeholder="نام مراجعه کننده را وارد کنید..." />
+        </div>
+        <label style={label}>جستجو براساس کد ملی</label>
+        <div className="field" style={{ margin: '6px 0 12px' }}>
+          <input value={f.nationalCode} onChange={e => setF(v => ({ ...v, nationalCode: e.target.value }))} placeholder="کد ملی مراجعه کننده را وارد کنید..." dir="ltr" />
+        </div>
+
+        <label style={label}>بخش</label>
+        <select aria-label="بخش" style={{ ...sel, margin: '6px 0 12px' }} value={f.sectionUuid}
+          onChange={e => setF(v => ({ ...v, sectionUuid: e.target.value, itemUuid: '' }))}>
+          <option value="">انتخاب بخش</option>
+          {(sectionsQ.data?.data ?? []).map(o => <option key={o.uuid} value={o.uuid}>{o.name}</option>)}
+        </select>
+        <label style={label}>سرویس</label>
+        <select aria-label="سرویس" style={{ ...sel, margin: '6px 0 14px' }} value={f.itemUuid} disabled={!f.sectionUuid}
+          onChange={e => setF(v => ({ ...v, itemUuid: e.target.value }))}>
+          <option value="">انتخاب سرویس</option>
+          {(itemsQ.data?.data ?? []).map(o => <option key={o.uuid} value={o.uuid}>{o.name}</option>)}
+        </select>
+
+        <div style={{ fontSize: 13.5, fontWeight: 700, marginBottom: 8 }}>وضعیت نوبت</div>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 14 }}>
+          {STATUS_OPTIONS.map(([v, l]) => (
+            <label key={v} style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 13, cursor: 'pointer' }}>
+              <input type="checkbox" checked={f.statuses.includes(v)} onChange={() => toggleStatus(v)} /> {l}
+            </label>
+          ))}
+        </div>
+
+        <div style={{ borderTop: '1px solid var(--border)', paddingTop: 12, marginBottom: 16 }}>
+          <div style={{ fontSize: 13.5, fontWeight: 700, marginBottom: 8 }}>جنسیت</div>
+          {([['female', 'خانم'], ['male', 'آقا'], ['both', 'هر دو']] as const).map(([v, l]) => (
+            <label key={v} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, cursor: 'pointer', marginBottom: 6 }}>
+              <input type="radio" name="gender" checked={f.gender === v} onChange={() => setF(x => ({ ...x, gender: v }))} /> {l}
+            </label>
+          ))}
+        </div>
+
+        <button className="btn primary" style={{ width: '100%' }} onClick={() => { onApply(f); onClose(); }}>
+          اعمال تغییرات
+        </button>
+      </div>
+    </Modal>
+  );
+}