hamed/clinicpro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(admin): card-grid redesign for clinic-services items

Browse Source 
Convert clinic service items from rows to a Figma-style card grid using
cp-card/tokens; drop hardcoded oklch tint. Functionality unchanged.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
hamed
2026-07-12 22:15:03 +03:30
co-authored by Claude Opus 4.8
parent a954a0389d
commit f26c80040d
1 changed files with 25 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/admin/pages/ClinicServicesPage.tsx
+25 -28
View File
@@ -313,60 +313,57 @@ function ClinicServicesPageInner() {
)} )}
</div> </div>
) : ( ) : (
<div style={{ padding: 12, display: 'flex', flexDirection: 'column', gap: 8 }}> <div style={{ padding: 12, display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))', gap: 12 }}>
{items.map((item) => ( {items.map((item) => (
<div <div
key={item.uuid} key={item.uuid}
className="cp-card"
style={{ style={{
display: 'flex', alignItems: 'center', gap: 14, padding: 14, display: 'flex', flexDirection: 'column', gap: 10,
padding: '12px 14px', borderRadius: 11, background: item.active ? 'var(--surface)' : 'var(--surface-2)',
border: '1px solid var(--border)', opacity: item.active ? 1 : 0.75,
background: item.active ? 'var(--bg)' : 'oklch(0.97 0.005 256)',
opacity: item.active ? 1 : 0.7,
transition: 'box-shadow 0.15s',
}} }}
> >
<div style={{ minWidth: 0, flex: 1 }}> <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 8 }}>
<div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}> <span style={{ fontWeight: 700, fontSize: 14, lineHeight: 1.5 }}>{item.name}</span>
<span style={{ fontWeight: 600, fontSize: 13.5 }}>{item.name}</span> <div style={{ display: 'flex', gap: 4, flexShrink: 0 }}>
{!item.active && <span className="badge gray" style={{ fontSize: 10 }}>غیرفعال</span>} {!item.active && <span className="badge gray" style={{ fontSize: 10 }}>غیرفعال</span>}
{item.insurance_covered && ( {item.insurance_covered && (
<span className="badge green" style={{ fontSize: 10 }}><span className="bdot" />بیمه</span> <span className="badge green" style={{ fontSize: 10 }}><span className="bdot" />بیمه</span>
)} )}
</div> </div>
<div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12, color: 'var(--text-3)' }}>
{item.staff ? (
<>
<Avatar name={item.staff.full_name} />
<span>{item.staff.full_name}</span>
</>
) : (
<span>بدون پرسنل مسئول</span>
)}
</div>
</div> </div>
<div style={{ textAlign: 'end', flexShrink: 0 }}> <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12, color: 'var(--text-3)' }}>
<div style={{ color: 'var(--primary)', fontWeight: 700, fontSize: 14 }}>{formatRial(item.price_rials)}</div> {item.staff ? (
<>
<Avatar name={item.staff.full_name} />
<span>{item.staff.full_name}</span>
</>
) : (
<span>بدون پرسنل مسئول</span>
)}
</div> </div>
<div style={{ display: 'flex', gap: 4, flexShrink: 0 }}> <div style={{ color: 'var(--primary)', fontWeight: 800, fontSize: 16 }}>{formatRial(item.price_rials)}</div>
<div style={{ display: 'flex', gap: 4, marginTop: 'auto', paddingTop: 8, borderTop: '1px solid var(--border)' }}>
<button className="btn sm ghost" onClick={() => openEditItem(item)} title="ویرایش"> <button className="btn sm ghost" onClick={() => openEditItem(item)} title="ویرایش">
<PencilIcon style={{ width: 14 }} /> <PencilIcon style={{ width: 15 }} />
</button> </button>
<button className="btn sm ghost" onClick={() => setTariffItem(item)} title="تعرفه‌های سالانه"> <button className="btn sm ghost" onClick={() => setTariffItem(item)} title="تعرفه‌های سالانه">
<BanknotesIcon style={{ width: 14 }} /> <BanknotesIcon style={{ width: 15 }} />
</button> </button>
<button className="btn sm ghost" onClick={() => setInsuranceItem(item)} title="پوشش بیمه"> <button className="btn sm ghost" onClick={() => setInsuranceItem(item)} title="پوشش بیمه">
<ShieldCheckIcon style={{ width: 14 }} /> <ShieldCheckIcon style={{ width: 15 }} />
</button> </button>
<button <button
className="btn sm ghost" className="btn sm ghost"
onClick={() => setToggleItem(item)} onClick={() => setToggleItem(item)}
title={item.active ? 'غیرفعال‌کردن' : 'فعال‌کردن'} title={item.active ? 'غیرفعال‌کردن' : 'فعال‌کردن'}
style={{ color: item.active ? 'var(--text-3)' : 'var(--primary)' }} style={{ marginInlineStart: 'auto', color: item.active ? 'var(--text-3)' : 'var(--primary)' }}
> >
{item.active ? <EyeSlashIcon style={{ width: 14 }} /> : <EyeIcon style={{ width: 14 }} />} {item.active ? <EyeSlashIcon style={{ width: 15 }} /> : <EyeIcon style={{ width: 15 }} />}
</button> </button>
</div> </div>
</div> </div>