style(admin): patient record cards match Figma patients-card

Restyle PatientCard to the Figma patient card: overflow menu (edit/view),
name + orange user avatar, dividers, file number + phone rows, tags row.
Avatar now a solid accent circle with user icon.

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

assets/admin/pages/MyPatientsPage.tsx

@@ -9,7 +9,10 @@ import {
     PlusIcon,
     Squares2X2Icon,
     UserPlusIcon,
+    UserIcon,
     UsersIcon,
+    EllipsisHorizontalIcon,
+    EyeIcon,
 } from "@heroicons/react/24/outline";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
@@ -1585,17 +1588,16 @@ function MyPatientsPageInner() {
     );
 }
 
-function patientAvatar(name: string, size = 28) {
+function patientAvatar(_name: string, size = 32) {
     return (
         <div
             style={{
                 width: size, height: size, borderRadius: "50%", flexShrink: 0,
-                background: "linear-gradient(145deg, #f8945a, #f0682a)",
+                background: "var(--accent, #F17732)",
-                color: "#fff", display: "flex", alignItems: "center",
+                color: "#fff", display: "grid", placeItems: "center",
-                justifyContent: "center", fontWeight: 700, fontSize: size * 0.42,
             }}
         >
-            {(name === "—" ? "؟" : name).charAt(0)}
+            <UserIcon style={{ width: size * 0.6, height: size * 0.6 }} />
         </div>
     );
 }
@@ -1613,32 +1615,74 @@ function PatientCard({
 }) {
     const name = getPatientName(record);
     const phone = getPatientPhone(record);
+    const [menu, setMenu] = React.useState(false);
 
     const infoRow = (label: string, value: React.ReactNode) => (
-        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: 13 }}>
+        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: 14, padding: "2px 0" }}>
             <span style={{ color: "var(--text-3)" }}>{label}:</span>
-            <span dir="ltr" style={{ color: "var(--text-2)" }}>{value}</span>
+            <span dir="ltr" style={{ color: "var(--text-2)", fontWeight: 500 }}>{value}</span>
         </div>
     );
 
+    const menuItemStyle: React.CSSProperties = {
+        display: "flex", alignItems: "center", justifyContent: "flex-end", gap: 8, width: "100%",
+        padding: "8px 10px", borderRadius: 8, border: "none", cursor: "pointer",
+        background: "transparent", color: "var(--text-2)", fontSize: 13, fontFamily: "inherit", whiteSpace: "nowrap",
+    };
+
     return (
         <div
-            className="card"
+            style={{
-            style={{ padding: 16, display: "flex", flexDirection: "column", gap: 12, cursor: "pointer" }}
+                position: "relative", cursor: "pointer",
+                background: "var(--surface)", border: "1px solid var(--border)", borderRadius: 8,
+                boxShadow: "0 1px 24.8px rgba(204,204,204,0.18)", padding: 12,
+            }}
             onClick={onOpen}
         >
-            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+            <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 8 }}>
-                <span className="mini-btn" style={{ pointerEvents: "none" }}>···</span>
+                <button
-                <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+                    className="btn sm ghost"
-                    <b style={{ fontSize: 14 }}>{name}</b>
+                    style={{ padding: 4 }}
-                    {patientAvatar(name)}
+                    onClick={(e) => { e.stopPropagation(); setMenu((v) => !v); }}
+                    title="عملیات"
+                >
+                    <EllipsisHorizontalIcon style={{ width: 20 }} />
+                </button>
+                <div style={{ display: "flex", alignItems: "flex-start", gap: 8 }}>
+                    <b style={{ fontSize: 16, color: "var(--text)", textAlign: "right" }}>{name}</b>
+                    {patientAvatar(name, 32)}
                 </div>
             </div>
+            {menu && (
+                <>
+                    <div style={{ position: "fixed", inset: 0, zIndex: 40 }} onClick={(e) => { e.stopPropagation(); setMenu(false); }} />
+                    <div
+                        style={{
+                            position: "absolute", top: 38, left: 8, zIndex: 41,
+                            background: "var(--surface)", border: "1px solid var(--border)",
+                            borderRadius: "var(--r-sm)", boxShadow: "var(--shadow)", padding: 6, minWidth: 150,
+                            display: "flex", flexDirection: "column", gap: 2,
+                        }}
+                        onClick={(e) => e.stopPropagation()}
+                    >
+                        <button style={menuItemStyle} onClick={() => { setMenu(false); onOpen(); }}>ویرایش <PencilIcon style={{ width: 15 }} /></button>
+                        <button style={menuItemStyle} onClick={() => { setMenu(false); onOpen(); }}>مشاهده <EyeIcon style={{ width: 15 }} /></button>
+                    </div>
+                </>
+            )}
+
+            <div style={{ height: 1, background: "var(--border)", margin: "12px 0" }} />
+
             {infoRow("شماره پرونده", fileNumber(record))}
-            {infoRow("موبایل", phone)}
+            {infoRow("تلفن", phone)}
-            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: 13 }}>
+
+            <div style={{ height: 1, background: "var(--border)", margin: "12px 0" }} />
+
+            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: 14 }}>
                 <span style={{ color: "var(--text-3)" }}>برچسب‌ها:</span>
-                <span style={{ color: "var(--text-3)" }}>—</span>
+                <span style={{ display: "inline-flex", alignItems: "center", gap: 4, color: "var(--text-3)", fontSize: 13 }}>
+                    افزودن <PlusIcon style={{ width: 15 }} />
+                </span>
             </div>
         </div>
     );