feat: port نوبت‌ها (appointments) tab from tauri to patient detail page

Replace the placeholder row list on the patient detail «نوبت‌ها» tab with the
card-grid design ported pixel-for-pixel from clinic-pro-tauri TurnsSection:

- New AppointmentTurnCard mirrors tauri TurnsCard (success icon, title, date/time
  chips, personnel, status). Status uses the live AppointmentStatusDropdown
  instead of the tauri mock.
- New AppointmentsTab in PatientDetailPage: sort/filter toolbar (client-side) +
  reserve/new buttons linking to existing /admin/appointments pages + card grid.
- Add CalendarD/ClockP/UserD/StatusGlobe icons (verbatim from tauri).
- Backend: expose version on GET /patient/{uuid}/appointments so the status
  dropdown can optimistic-lock. No new endpoint.
- Tests: PatientAppointmentsTest (shape/version/order/empty/ownership) +
  AppointmentTurnCard + tab data/empty cases. docs/api/patient.md updated.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

assets/admin/components/AppointmentTurnCard.tsx

@@ -0,0 +1,93 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { formatDate, formatTime } from '../lib/utils';
+import {
+  FilesServiceSuccess, FilesServiceMore, CalendarD, ClockP, UserD, StatusGlobe,
+} from './icons/FilesServiceIcons';
+import AppointmentStatusDropdown from './ui/AppointmentStatusDropdown';
+
+export interface AppointmentCardData {
+  uuid: string;
+  starts_at: number;
+  status: string;
+  version: number;
+  doctor_name?: string | null;
+  service_name?: string | null;
+}
+
+/**
+ * label/value row inside the turn card — mirrors tauri ServiceInfoRow
+ * (separatedValues variant): icon+label on one side, value (optionally chip) on
+ * the other.
+ */
+function InfoRow({ icon, label, value, chip = false, valueStyle }: {
+  icon: ReactNode; label: string; value: ReactNode; chip?: boolean; valueStyle?: CSSProperties;
+}) {
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%' }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+        {icon}
+        <span className="dark:text-[#A1A1A1]" style={{ fontSize: 12, color: '#616161' }}>{label}:</span>
+      </div>
+      <span
+        className={chip ? 'dark:bg-[#404040] dark:text-[#D7D8ED]' : 'dark:text-[#D7D8ED]'}
+        style={{
+          fontSize: 12, color: '#525252', textAlign: 'left',
+          ...(chip ? { background: '#efefef', borderRadius: 8, padding: '2px 8px', color: '#2f2f2f' } : {}),
+          ...valueStyle,
+        }}
+      >
+        {value}
+      </span>
+    </div>
+  );
+}
+
+/**
+ * A patient «نوبت» card — ported pixel-for-pixel from tauri
+ * files/services/TurnsCard. The status uses the admin's live
+ * AppointmentStatusDropdown (backed by PATCH /appointment/{uuid}/status)
+ * instead of the tauri mock.
+ */
+export default function AppointmentTurnCard({ appointment, queryKey }: {
+  appointment: AppointmentCardData;
+  queryKey: unknown[];
+}) {
+  const title = appointment.service_name || 'نوبت';
+  return (
+    <div
+      className="bg-white dark:bg-[#222433] border border-[#EDEDED] dark:border-[#35343D]"
+      style={{ width: 277, maxWidth: '100%', minHeight: 249, borderRadius: 12, padding: 14, display: 'flex', flexDirection: 'column', gap: 10, boxShadow: '0 1px 6px rgba(15,23,42,0.06)' }}
+    >
+      {/* Header */}
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 2 }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 0 }}>
+          <FilesServiceSuccess />
+          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 3, minWidth: 0 }}>
+            <span className="dark:text-[#D7D8ED]" style={{ fontSize: 14, fontWeight: 600, color: '#525252', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', maxWidth: 180 }}>{title}</span>
+          </div>
+        </div>
+        <FilesServiceMore style={{ color: '#9CA3AF', flexShrink: 0 }} />
+      </div>
+
+      <div className="dark:border-[#35343D]" style={{ borderTop: '1px solid #F1F1F1' }} />
+
+      {/* Middle: date & time chips */}
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+        <InfoRow icon={<CalendarD />} label="تاریخ" chip value={formatDate(appointment.starts_at)} />
+        <InfoRow icon={<ClockP />} label="ساعت" chip value={formatTime(appointment.starts_at)} />
+      </div>
+
+      <div className="dark:border-[#35343D]" style={{ borderTop: '1px solid #F1F1F1' }} />
+
+      {/* Bottom: personnel & status */}
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
+        <InfoRow icon={<UserD size={19} />} label="پرسنل" value={appointment.doctor_name || '—'} valueStyle={{ fontWeight: 500 }} />
+        <InfoRow
+          icon={<StatusGlobe size={19} />}
+          label="وضعیت"
+          value={<AppointmentStatusDropdown uuid={appointment.uuid} currentStatus={appointment.status} version={appointment.version} queryKey={queryKey} />}
+        />
+      </div>
+    </div>
+  );
+}