feat(ui-kit): patient card tauri layout + grid/list toggle

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

assets/admin/pages/MyPatientsPage.tsx

@@ -1,12 +1,13 @@
 import {
+    Bars3Icon,
     CheckCircleIcon,
     ChevronRightIcon,
     FolderOpenIcon,
-    IdentificationIcon,
     MagnifyingGlassIcon,
     PencilIcon,
     PhoneIcon,
     PlusIcon,
+    Squares2X2Icon,
     UserPlusIcon,
     UsersIcon,
 } from "@heroicons/react/24/outline";
@@ -107,6 +108,7 @@ function MyPatientsPageInner() {
     );
     const [page, setPage] = useState(1);
     const [search, setSearch] = useState("");
+    const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
     const [sessionPage, setSessionPage] = useState(1);
     const [sessionModal, setSessionModal] = useState(false);
     const [editSession, setEditSession] = useState<PatientSession | null>(null);
@@ -440,6 +442,24 @@ function MyPatientsPageInner() {
                             onChange={(e) => handleSearch(e.target.value)}
                             placeholder="جستجو بر اساس نام، شماره موبایل یا کد ملی..."
                         />
+                        <div style={{ display: "flex", gap: 4, flexShrink: 0 }}>
+                            <button
+                                className={`mini-btn${viewMode === "grid" ? " active" : ""}`}
+                                style={viewMode === "grid" ? { background: "var(--primary-soft)", color: "var(--primary)" } : undefined}
+                                onClick={() => setViewMode("grid")}
+                                title="نمای کارتی"
+                            >
+                                <Squares2X2Icon style={{ width: 16 }} />
+                            </button>
+                            <button
+                                className={`mini-btn${viewMode === "list" ? " active" : ""}`}
+                                style={viewMode === "list" ? { background: "var(--primary-soft)", color: "var(--primary)" } : undefined}
+                                onClick={() => setViewMode("list")}
+                                title="نمای لیستی"
+                            >
+                                <Bars3Icon style={{ width: 16 }} />
+                            </button>
+                        </div>
                     </div>
                 </div>
 
@@ -481,23 +501,18 @@ function MyPatientsPageInner() {
                 ) : (
                     <>
                         <div
-                            style={{
+                            style={
-                                display: "grid",
+                                viewMode === "grid"
-                                gridTemplateColumns:
+                                    ? { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))", gap: 14 }
-                                    "repeat(auto-fill, minmax(280px, 1fr))",
+                                    : { display: "flex", flexDirection: "column", gap: 10 }
-                                gap: 14,
+                            }
-                            }}
                         >
-                            {records.map((r) => (
+                            {records.map((r) => {
-                                <PatientCard
+                                const open = () => { setSelectedRecord(r); setSessionPage(1); };
-                                    key={r.uuid}
+                                return viewMode === "grid"
-                                    record={r}
+                                    ? <PatientCard key={r.uuid} record={r} onOpen={open} />
-                                    onOpen={() => {
+                                    : <PatientRow key={r.uuid} record={r} onOpen={open} />;
-                                        setSelectedRecord(r);
+                            })}
-                                        setSessionPage(1);
-                                    }}
-                                />
-                            ))}
                         </div>
                         <div style={{ marginTop: 16 }}>
                             <Pagination