feat(patients): default to card view, match tauri /files CardView pixel-for-pixel

- default view is now the card grid (was table), matching tauri /files
  (viewMode='card').
- rebuild the patient card to mirror tauri files/list/CardView exactly:
  avatar-in-circle + name + ⋮ actions menu (view/edit) header, شماره پرونده /
  موبایل rows, برچسب‌ها footer with the inline tag popover. Same Tailwind
  classes/colors/spacing (rounded-[6px], #EDEDED/#E0E0E0 borders,
  grid md:grid-cols-4 gap-[12px]).
- per-view page size like tauri: 16 for card, 12 for table; reset page on
  view switch.
- empty state text 'بیماری یافت نشد'.

Frontend only; no API change. Tests updated (default card, ⋮ menu, table
toggle, tag popover, filter apply) — all green.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

assets/admin/pages/PatientsListPage.test.tsx

@@ -31,21 +31,31 @@ beforeEach(() => {
 });
 
 describe('PatientsListPage (پرونده‌ها)', () => {
-  it('renders the records table with the create button', async () => {
+  it('renders records as cards by default', async () => {
     renderWithProviders(<PatientsListPage />, { route: '/admin/patients' });
     expect(await screen.findByText('دنیا خلیلی')).toBeInTheDocument();
     expect(screen.getByText('علی بدیعی زاده')).toBeInTheDocument();
+    // card-only labels (with colon) — proves the default view is the card grid
+    expect(screen.getAllByText('شماره پرونده:').length).toBe(2);
     expect(screen.getByRole('button', { name: /تشکیل پرونده/ })).toBeInTheDocument();
-    // record with no tags shows the inline "add" trigger
-    expect(screen.getByText('اضافه کردن')).toBeInTheDocument();
+    // default card view: requests 16 per page
+    expect(get.mock.calls.some(([u]) => String(u).includes('limit=16'))).toBe(true);
   });
 
-  it('switches to the card view', async () => {
+  it('opens the card ⋮ menu with view/edit actions', async () => {
     renderWithProviders(<PatientsListPage />, { route: '/admin/patients' });
     await screen.findByText('دنیا خلیلی');
-    fireEvent.click(screen.getByLabelText('نمایش کارتی'));
-    expect(screen.getByText('دنیا خلیلی')).toBeInTheDocument();
-    expect(screen.getAllByText('مشاهده').length).toBeGreaterThan(0);
+    fireEvent.click(screen.getAllByLabelText('عملیات')[0]);
+    expect(await screen.findByText('مشاهده')).toBeInTheDocument();
+    expect(screen.getByText('ویرایش')).toBeInTheDocument();
+  });
+
+  it('switches to the table view', async () => {
+    renderWithProviders(<PatientsListPage />, { route: '/admin/patients' });
+    await screen.findByText('دنیا خلیلی');
+    fireEvent.click(screen.getByLabelText('نمایش جدولی'));
+    expect(await screen.findByText('مراجعه کننده')).toBeInTheDocument(); // table header
+    expect(get.mock.calls.some(([u]) => String(u).includes('limit=12'))).toBe(true);
   });
 
   it('assigns a tag inline through the برچسب‌ها popover', async () => {

assets/admin/pages/PatientsListPage.tsx

@@ -4,6 +4,7 @@ import { Link, useNavigate } from 'react-router-dom';
 import {
   PlusIcon, PencilIcon, EyeIcon, MagnifyingGlassIcon, AdjustmentsHorizontalIcon,
   Squares2X2Icon, TableCellsIcon, ExclamationCircleIcon, IdentificationIcon,
+  UserIcon, EllipsisHorizontalIcon,
 } from '@heroicons/react/24/outline';
 import { api } from '../lib/api';
 import type { ApiResponse } from '../lib/api';
@@ -13,7 +14,9 @@ import Pagination from '../components/ui/Pagination';
 import PatientTagsCell from '../components/PatientTagsCell';
 import PatientsFilterModal, { type PatientFilters } from '../components/PatientsFilterModal';
 
-const LIMIT = 20;
+// tauri /files paginates card view by 16 and table view by 12.
+const CARD_PAGE_SIZE = 16;
+const TABLE_PAGE_SIZE = 12;
 const EMPTY: PatientRecord[] = [];
 
 /** unix start-of-day for `from`, end-of-day for `to`, from a gregorian Y-m-d. */
@@ -31,16 +34,83 @@ function countFilters(f: PatientFilters): number {
     .filter(Boolean).length;
 }
 
-/** پرونده‌ها — patient records list (table + card views) matching the Figma design. */
+/**
+ * A single patient card — mirrors tauri `files/list/CardView` pixel-for-pixel
+ * (avatar + name + ⋮ menu header, file-number/mobile rows, tags footer).
+ * The whole card navigates to the detail; the ⋮ menu offers view/edit.
+ */
+function PatientCard({ r, onView, onEdit }: { r: PatientRecord; onView: () => void; onEdit: () => void }) {
+  const [menu, setMenu] = useState(false);
+  return (
+    <div
+      className="bg-white dark:bg-[#222433] rounded-[6px] p-[14px] border border-[#EDEDED] dark:border-[#35343D] shadow-sm transition-all duration-300 hover:shadow-md hover:-translate-y-1 cursor-pointer"
+      onClick={(e) => { if ((e.target as HTMLElement).closest('.more-square-icon')) return; onView(); }}
+    >
+      {/* نام بیمار */}
+      <div className="flex items-center justify-between gap-[6px] mb-[12px] pb-[8px] border-b border-[#E0E0E0] dark:border-[#404040]">
+        <div className="flex items-center gap-[6px] flex-1 min-w-0">
+          <span style={{ width: 28, height: 28, borderRadius: '50%', background: 'var(--primary-soft)', display: 'grid', placeItems: 'center', flexShrink: 0 }}>
+            <UserIcon style={{ width: 16, color: 'var(--primary)' }} />
+          </span>
+          <h3 className="text-[#525252] dark:text-[#D7D8ED] text-[14px] font-semibold truncate">{r.user_name || '—'}</h3>
+        </div>
+        <div className="flex-shrink-0 more-square-icon" style={{ position: 'relative' }}>
+          <button
+            type="button" aria-label="عملیات" onClick={(e) => { e.stopPropagation(); setMenu((v) => !v); }}
+            style={{ display: 'grid', placeItems: 'center', width: 25, height: 25, border: 'none', background: 'none', cursor: 'pointer', color: 'var(--text-3)' }}
+          >
+            <EllipsisHorizontalIcon style={{ width: 20 }} />
+          </button>
+          {menu && (
+            <>
+              <div style={{ position: 'fixed', inset: 0, zIndex: 60 }} onClick={(e) => { e.stopPropagation(); setMenu(false); }} />
+              <div style={{ position: 'absolute', top: 28, insetInlineStart: 0, zIndex: 61, minWidth: 130, background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 'var(--r-sm)', boxShadow: 'var(--shadow)', padding: 6, display: 'flex', flexDirection: 'column', gap: 2 }}>
+                <button type="button" className="btn sm ghost" style={{ justifyContent: 'flex-start', color: 'var(--primary)' }} onClick={(e) => { e.stopPropagation(); setMenu(false); onView(); }}><EyeIcon style={{ width: 15 }} /> مشاهده</button>
+                <button type="button" className="btn sm ghost" style={{ justifyContent: 'flex-start', color: 'var(--accent)' }} onClick={(e) => { e.stopPropagation(); setMenu(false); onEdit(); }}><PencilIcon style={{ width: 15 }} /> ویرایش</button>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+
+      <div className="mb-[12px] my-4" style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+        {/* شماره پرونده */}
+        <div className="flex items-start justify-between text-[15px]">
+          <span className="text-[#616161] dark:text-[#A1A1A1] font-medium min-w-[65px]">شماره پرونده:</span>
+          <span className="text-[#525252] dark:text-[#D7D8ED] truncate">{r.record_number || '—'}</span>
+        </div>
+        {/* شماره موبایل */}
+        <div className="flex items-start justify-between text-[15px]">
+          <span className="text-[#616161] dark:text-[#A1A1A1] font-medium min-w-[65px]">موبایل:</span>
+          <span className="text-[#525252] dark:text-[#D7D8ED] truncate" dir="ltr">{r.user_mobile || '—'}</span>
+        </div>
+      </div>
+
+      {/* فوتر: برچسب‌ها */}
+      <div
+        className="flex items-center pt-[8px] justify-end gap-[8px] border-t border-[#E0E0E0] dark:border-[#404040]"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <span className="text-[#616161] dark:text-[#A1A1A1] text-[14px] min-w-[65px]">برچسب‌ها:</span>
+        <div className="flex-1 flex justify-end"><PatientTagsCell record={r} /></div>
+      </div>
+    </div>
+  );
+}
+
+/** پرونده‌ها — patient records list. Ported from tauri /files (default card view). */
 export default function PatientsListPage() {
   const navigate = useNavigate();
   const [page, setPage] = useState(1);
   const [search, setSearch] = useState('');
-  const [view, setView] = useState<'table' | 'card'>('table');
+  const [view, setView] = useState<'table' | 'card'>('card');
   const [filterOpen, setFilterOpen] = useState(false);
   const [filters, setFilters] = useState<PatientFilters>({});
 
-  const qs = new URLSearchParams({ page: String(page), limit: String(LIMIT) });
+  const pageSize = view === 'card' ? CARD_PAGE_SIZE : TABLE_PAGE_SIZE;
+  const switchView = (v: 'table' | 'card') => { setView(v); setPage(1); };
+
+  const qs = new URLSearchParams({ page: String(page), limit: String(pageSize) });
   if (search) qs.set('search', search);
   if (filters.gender)         qs.set('gender', filters.gender);
   if (filters.insurance_id)   qs.set('insurance_id', filters.insurance_id);
@@ -58,7 +128,6 @@ export default function PatientsListPage() {
   });
 
   const activeFilters = countFilters(filters);
-
   const records = data?.data ?? EMPTY;
   const total   = data?.meta?.totalRecords ?? 0;
 
@@ -81,10 +150,10 @@ export default function PatientsListPage() {
           </div>
           {/* view toggle */}
           <div style={{ display: 'flex', border: '1px solid var(--border)', borderRadius: 'var(--r-sm)', overflow: 'hidden' }}>
-            <button aria-label="نمایش کارتی" onClick={() => setView('card')} style={{ padding: '8px 10px', border: 'none', cursor: 'pointer', background: view === 'card' ? 'var(--primary-soft)' : 'var(--surface)', color: view === 'card' ? 'var(--primary)' : 'var(--text-3)' }}>
+            <button aria-label="نمایش کارتی" onClick={() => switchView('card')} style={{ padding: '8px 10px', border: 'none', cursor: 'pointer', background: view === 'card' ? 'var(--primary-soft)' : 'var(--surface)', color: view === 'card' ? 'var(--primary)' : 'var(--text-3)' }}>
               <Squares2X2Icon style={{ width: 18 }} />
             </button>
-            <button aria-label="نمایش جدولی" onClick={() => setView('table')} style={{ padding: '8px 10px', border: 'none', cursor: 'pointer', background: view === 'table' ? 'var(--primary-soft)' : 'var(--surface)', color: view === 'table' ? 'var(--primary)' : 'var(--text-3)' }}>
+            <button aria-label="نمایش جدولی" onClick={() => switchView('table')} style={{ padding: '8px 10px', border: 'none', cursor: 'pointer', background: view === 'table' ? 'var(--primary-soft)' : 'var(--surface)', color: view === 'table' ? 'var(--primary)' : 'var(--text-3)' }}>
               <TableCellsIcon style={{ width: 18 }} />
             </button>
           </div>
@@ -105,7 +174,7 @@ export default function PatientsListPage() {
       ) : records.length === 0 ? (
         <div className="card" style={{ padding: '60px 0', textAlign: 'center', color: 'var(--text-3)' }}>
           <IdentificationIcon style={{ width: 52, margin: '0 auto 14px', display: 'block', opacity: 0.3 }} />
-          <div style={{ fontSize: 14, color: 'var(--text-2)' }}>پرونده‌ای یافت نشد.</div>
+          <div style={{ fontSize: 14, color: 'var(--text-2)' }}>بیماری یافت نشد</div>
         </div>
       ) : view === 'table' ? (
         <div style={{ background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 'var(--r-lg)', overflow: 'auto' }}>
@@ -120,7 +189,7 @@ export default function PatientsListPage() {
             <tbody>
               {records.map((r, i) => (
                 <tr key={r.uuid} style={{ borderTop: '1px solid var(--border)', fontSize: 13.5, textAlign: 'center' }}>
-                  <td style={{ padding: '12px 14px', color: 'var(--text-3)' }}>{formatNumber((page - 1) * LIMIT + i + 1)}</td>
+                  <td style={{ padding: '12px 14px', color: 'var(--text-3)' }}>{formatNumber((page - 1) * pageSize + i + 1)}</td>
                   <td style={{ padding: '12px 14px' }}>
                     <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontWeight: 600 }}>
                       {r.user_name || '—'}
@@ -145,29 +214,15 @@ export default function PatientsListPage() {
           </table>
         </div>
       ) : (
-        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(260px, 1fr))', gap: 14 }}>
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-[12px] mt-[16px]">
           {records.map((r) => (
-            <div key={r.uuid} style={{ background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 'var(--r-lg)', padding: 16 }}>
-              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 10 }}>
-                <span style={{ fontWeight: 700, fontSize: 15 }}>{r.user_name || '—'}</span>
-                <PatientTagsCell record={r} />
-              </div>
-              <div style={{ fontSize: 12.5, color: 'var(--text-3)', display: 'flex', flexDirection: 'column', gap: 4 }}>
-                <span>شماره پرونده: {r.record_number || '—'}</span>
-                <span style={{ direction: 'ltr', textAlign: 'right' }}>تماس: {r.user_mobile || '—'}</span>
-                <span style={{ direction: 'ltr', textAlign: 'right' }}>کد ملی: {r.user_national_code || '—'}</span>
-              </div>
-              <div style={{ display: 'flex', gap: 8, marginTop: 12, borderTop: '1px solid var(--border)', paddingTop: 10 }}>
-                <Link to={viewHref(r)} className="btn sm ghost" style={{ flex: 1, justifyContent: 'center', color: 'var(--primary)' }}><EyeIcon style={{ width: 15 }} /> مشاهده</Link>
-                <Link to={editHref(r)} className="btn sm ghost" style={{ flex: 1, justifyContent: 'center', color: 'var(--accent)' }}><PencilIcon style={{ width: 15 }} /> ویرایش</Link>
-              </div>
-            </div>
+            <PatientCard key={r.uuid} r={r} onView={() => navigate(viewHref(r))} onEdit={() => navigate(editHref(r))} />
           ))}
         </div>
       )}
 
       <div style={{ marginTop: 20, display: 'flex', justifyContent: 'center' }}>
-        <Pagination page={page} total={total} limit={LIMIT} onPageChange={setPage} />
+        <Pagination page={page} total={total} limit={pageSize} onPageChange={setPage} />
       </div>
 
       <PatientsFilterModal