feat(caveman): add new caveman communication mode with intensity levels
This commit is contained in:
@@ -1313,6 +1313,25 @@ function MyPatientsPageInner() {
|
||||
);
|
||||
}
|
||||
|
||||
function patientAvatar(name: string, size = 28) {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
width: size, height: size, borderRadius: "50%", flexShrink: 0,
|
||||
background: "linear-gradient(145deg, #f8945a, #f0682a)",
|
||||
color: "#fff", display: "flex", alignItems: "center",
|
||||
justifyContent: "center", fontWeight: 700, fontSize: size * 0.42,
|
||||
}}
|
||||
>
|
||||
{(name === "—" ? "؟" : name).charAt(0)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function fileNumber(record: PatientRecord): string {
|
||||
return `P-${record.uuid.slice(0, 8).toUpperCase()}`;
|
||||
}
|
||||
|
||||
function PatientCard({
|
||||
record,
|
||||
onOpen,
|
||||
@@ -1322,122 +1341,63 @@ function PatientCard({
|
||||
}) {
|
||||
const name = getPatientName(record);
|
||||
const phone = getPatientPhone(record);
|
||||
const nationalCode = getPatientNationalCode(record);
|
||||
|
||||
const infoRow = (label: string, value: React.ReactNode) => (
|
||||
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: 13 }}>
|
||||
<span style={{ color: "var(--text-3)" }}>{label}:</span>
|
||||
<span dir="ltr" style={{ color: "var(--text-2)" }}>{value}</span>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="card"
|
||||
style={{ padding: 16, display: "flex", flexDirection: "column", gap: 12, cursor: "pointer" }}
|
||||
onClick={onOpen}
|
||||
>
|
||||
<div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
|
||||
<span className="mini-btn" style={{ pointerEvents: "none" }}>···</span>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 8 }}>
|
||||
<b style={{ fontSize: 14 }}>{name}</b>
|
||||
{patientAvatar(name)}
|
||||
</div>
|
||||
</div>
|
||||
{infoRow("شماره پرونده", fileNumber(record))}
|
||||
{infoRow("موبایل", phone)}
|
||||
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: 13 }}>
|
||||
<span style={{ color: "var(--text-3)" }}>برچسبها:</span>
|
||||
<span style={{ color: "var(--text-3)" }}>—</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function PatientRow({
|
||||
record,
|
||||
onOpen,
|
||||
}: {
|
||||
record: PatientRecord;
|
||||
onOpen: () => void;
|
||||
}) {
|
||||
const name = getPatientName(record);
|
||||
return (
|
||||
<div
|
||||
className="card"
|
||||
style={{
|
||||
padding: 16,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: 14,
|
||||
padding: "12px 16px", display: "flex", alignItems: "center", gap: 14,
|
||||
cursor: "pointer",
|
||||
transition: "border-color .15s, box-shadow .15s",
|
||||
}}
|
||||
onClick={onOpen}
|
||||
>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 12 }}>
|
||||
<div
|
||||
className="avatar"
|
||||
style={{
|
||||
width: 44,
|
||||
height: 44,
|
||||
borderRadius: "50%",
|
||||
background:
|
||||
"linear-gradient(145deg, #f8945a, #f0682a)",
|
||||
color: "#fff",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
fontWeight: 700,
|
||||
fontSize: 17,
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
{(name === "—" ? "؟" : name).charAt(0)}
|
||||
</div>
|
||||
<div style={{ minWidth: 0, flex: 1 }}>
|
||||
<div
|
||||
style={{
|
||||
fontWeight: 600,
|
||||
fontSize: 15,
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
whiteSpace: "nowrap",
|
||||
}}
|
||||
>
|
||||
{name}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
fontSize: 12,
|
||||
color: "var(--text-3)",
|
||||
marginTop: 2,
|
||||
}}
|
||||
>
|
||||
{formatDate(record.created_at)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: 7,
|
||||
fontSize: 13,
|
||||
color: "var(--text-2)",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{ display: "flex", alignItems: "center", gap: 7 }}
|
||||
>
|
||||
<PhoneIcon
|
||||
style={{
|
||||
width: 14,
|
||||
color: "var(--text-3)",
|
||||
flexShrink: 0,
|
||||
}}
|
||||
/>
|
||||
<span dir="ltr">{phone}</span>
|
||||
</div>
|
||||
<div
|
||||
style={{ display: "flex", alignItems: "center", gap: 7 }}
|
||||
>
|
||||
<IdentificationIcon
|
||||
style={{
|
||||
width: 14,
|
||||
color: "var(--text-3)",
|
||||
flexShrink: 0,
|
||||
}}
|
||||
/>
|
||||
<span dir="ltr">
|
||||
{nationalCode ?? (
|
||||
<span style={{ color: "var(--text-3)" }}>
|
||||
کد ملی ثبت نشده
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{patientAvatar(name, 38)}
|
||||
<b style={{ fontSize: 14, minWidth: 140 }}>{name}</b>
|
||||
<span style={{ fontSize: 13, color: "var(--text-3)" }} dir="ltr">{fileNumber(record)}</span>
|
||||
<span style={{ fontSize: 13, color: "var(--text-2)", flex: 1 }} dir="ltr">{getPatientPhone(record)}</span>
|
||||
<button
|
||||
className="btn primary sm"
|
||||
style={{
|
||||
width: "100%",
|
||||
justifyContent: "center",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: 5,
|
||||
}}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onOpen();
|
||||
}}
|
||||
onClick={(e) => { e.stopPropagation(); onOpen(); }}
|
||||
>
|
||||
<FolderOpenIcon style={{ width: 14 }} />
|
||||
مشاهده پرونده
|
||||
<FolderOpenIcon style={{ width: 14 }} /> مشاهده
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user