feat(admin): session action menu (view invoice + archive) and archive filter

SessionServiceCard's '...' icon becomes a real dropdown with «مشاهده فاکتور»
and «آرشیو»/«خروج از آرشیو» (click-outside close), plus an «آرشیو» badge on
archived cards. PatientDetailPage adds a فعال‌ها/همه/آرشیو segmented filter on
the services tab (default active), threads the filter into the sessions query,
and wires the archive action to PATCH /session/{uuid} { archived }.

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

assets/admin/components/SessionServiceCard.tsx

@@ -1,4 +1,4 @@
-import type { CSSProperties } from 'react';
+import { useEffect, useRef, useState, type CSSProperties } from 'react';
 import { formatDate, formatRial } from '../lib/utils';
 import { FilesServiceSuccess, FilesServiceMore } from './icons/FilesServiceIcons';
 
@@ -23,6 +23,7 @@ export interface SessionCardData {
   is_paid?: boolean;
   invoice_uuid?: string | null;
   notes?: string | null;
+  archived?: boolean;
   created_at?: number;
   // تسویه چندتکه + تخفیف (backend session settlement fields)
   discount_type?: 'percent' | 'fixed' | null;
@@ -49,16 +50,26 @@ function Row({ label, value, valueStyle }: { label: string; value: string; value
  * pixel-for-pixel from tauri files/services/ServiceCard. Paid cards show
  * «مشاهده فاکتور», unpaid ones «تکمیل پرداخت».
  */
-export default function SessionServiceCard({ session, onSettle, onViewInvoice, settling, issuing }: {
+export default function SessionServiceCard({ session, onSettle, onViewInvoice, onArchive, settling, issuing }: {
   session: SessionCardData;
   onSettle: (uuid: string) => void;
   /** کل session پاس می‌شود؛ اگر invoice_uuid نداشت، caller فاکتور را می‌سازد. */
   onViewInvoice: (session: SessionCardData) => void;
+  /** آرشیو/خروج از آرشیو مراجعه. */
+  onArchive?: (session: SessionCardData, archived: boolean) => void;
   settling?: boolean;
   /** true وقتی صدور فاکتور همین لحظه در جریان است (دکمه قفل می‌شود). */
   issuing?: boolean;
 }) {
   const paid = !!session.is_paid;
+  const [menuOpen, setMenuOpen] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (!menuOpen) return;
+    const onDoc = (e: MouseEvent) => { if (menuRef.current && !menuRef.current.contains(e.target as Node)) setMenuOpen(false); };
+    document.addEventListener('mousedown', onDoc);
+    return () => document.removeEventListener('mousedown', onDoc);
+  }, [menuOpen]);
   const names = (session.services ?? []).map((s) => s.service_name || s.name).filter(Boolean) as string[];
   if ((session.visit_price_rials ?? 0) > 0) names.unshift('ویزیت');
   // A «مراجعه» = the visit plus the services performed in it.
@@ -75,11 +86,33 @@ export default function SessionServiceCard({ session, onSettle, onViewInvoice, s
         <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>
+            <span className="dark:text-[#D7D8ED]" style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 14, fontWeight: 600, color: '#525252', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', maxWidth: 180 }}>
+              {title}
+              {session.archived && <span className="badge" style={{ fontSize: 10, color: '#9CA3AF', border: '1px solid #E0E0E0', borderRadius: 4, padding: '1px 6px' }}>آرشیو</span>}
+            </span>
             <span className="dark:text-[#A1A1A1]" style={{ fontSize: 12, color: '#6B7280', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', maxWidth: 200 }}>{subtitle}</span>
           </div>
         </div>
-        <FilesServiceMore style={{ color: '#9CA3AF', flexShrink: 0 }} />
+        <div ref={menuRef} style={{ position: 'relative', flexShrink: 0 }}>
+          <button type="button" aria-label="عملیات" onClick={() => setMenuOpen((o) => !o)}
+            style={{ background: 'transparent', border: 'none', cursor: 'pointer', padding: 2, display: 'flex' }}>
+            <FilesServiceMore style={{ color: '#9CA3AF' }} />
+          </button>
+          {menuOpen && (
+            <div className="card dark:bg-[#222433] dark:border-[#35343D]" style={{ position: 'absolute', insetInlineEnd: 0, top: '100%', marginTop: 4, minWidth: 150, zIndex: 20, padding: 4, background: '#fff', border: '1px solid var(--border)', borderRadius: 8, boxShadow: 'var(--shadow-lg)' }}>
+              <button type="button" onClick={() => { setMenuOpen(false); onViewInvoice(session); }}
+                style={{ display: 'block', width: '100%', textAlign: 'right', padding: '8px 10px', fontSize: 13, background: 'transparent', border: 'none', borderRadius: 6, cursor: 'pointer', color: 'var(--text)', fontFamily: 'inherit' }}>
+                مشاهده فاکتور
+              </button>
+              {onArchive && (
+                <button type="button" onClick={() => { setMenuOpen(false); onArchive(session, !session.archived); }}
+                  style={{ display: 'block', width: '100%', textAlign: 'right', padding: '8px 10px', fontSize: 13, background: 'transparent', border: 'none', borderRadius: 6, cursor: 'pointer', color: session.archived ? 'var(--text)' : '#EF4444', fontFamily: 'inherit' }}>
+                  {session.archived ? 'خروج از آرشیو' : 'آرشیو'}
+                </button>
+              )}
+            </div>
+          )}
+        </div>
       </div>
 
       <div className="dark:border-[#35343D]" style={{ borderTop: '1px solid #F1F1F1' }} />