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

style: restyle appointment create page to match tauri CreateTurn mockup

Browse Source 
Widen card to 1080px, 18px section headings, multi-column grids
(patient 3-col, service 3-col, slot-mode time 4-col), search field +
outlined 'new patient' button row, toggle switch for deposit, orange
wallet charge button, right-aligned submit. Service/slot booking logic,
endpoints, validation, and placeholders unchanged.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
hamed
2026-07-16 09:18:29 +03:30
co-authored by Claude Opus 4.8
parent b7730f545a
commit 170cd5f37e
1 changed files with 134 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/admin/pages/AppointmentCreatePage.tsx
+134 -97
View File
@@ -1,7 +1,7 @@
import { useEffect, useMemo, useState } from 'react'; import { useEffect, useMemo, useState } from 'react';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'; import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { useNavigate, useSearchParams } from 'react-router-dom'; import { useNavigate, useSearchParams } from 'react-router-dom';
import { PlusIcon, ChevronRightIcon } from '@heroicons/react/24/outline'; import { PlusIcon, ChevronRightIcon, MagnifyingGlassIcon } from '@heroicons/react/24/outline';
import { toast } from 'sonner'; import { toast } from 'sonner';
import { api } from '../lib/api'; import { api } from '../lib/api';
import type { ApiResponse } from '../lib/api'; import type { ApiResponse } from '../lib/api';
@@ -31,7 +31,7 @@ const addMinutes = (time: string, min: number) => {
}; };
const label = { fontSize: 12.5, color: 'var(--text-3)', display: 'block' } as const; const label = { fontSize: 12.5, color: 'var(--text-3)', display: 'block' } as const;
const sectionTitle: React.CSSProperties = { fontSize: 14, fontWeight: 700, color: 'var(--text)', margin: '18px 0 12px' }; const sectionTitle: React.CSSProperties = { fontSize: 18, fontWeight: 700, color: 'var(--text)', margin: '22px 0 14px' };
export default function AppointmentCreatePage() { export default function AppointmentCreatePage() {
const navigate = useNavigate(); const navigate = useNavigate();
@@ -140,7 +140,7 @@ export default function AppointmentCreatePage() {
}); });
return ( return (
<div style={{ padding: '20px 24px', maxWidth: 720, margin: '0 auto' }}> <div style={{ padding: '20px 24px', maxWidth: 1080, margin: '0 auto' }}>
{/* بردکرامب */} {/* بردکرامب */}
<div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 18 }}> <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 18 }}>
<button onClick={() => navigate(-1)} className="btn sm" style={{ display: 'flex', alignItems: 'center', gap: 4 }}> <button onClick={() => navigate(-1)} className="btn sm" style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
@@ -151,35 +151,42 @@ export default function AppointmentCreatePage() {
<span style={{ fontSize: 15, fontWeight: 700, color: 'var(--text)' }}>ثبت نوبت جدید</span> <span style={{ fontSize: 15, fontWeight: 700, color: 'var(--text)' }}>ثبت نوبت جدید</span>
</div> </div>
<div style={{ background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 'var(--r)', padding: 20 }}> <div style={{ background: 'var(--surface)', border: '1px solid var(--border-2)', borderRadius: 'var(--r-sm)', padding: 28 }}>
{/* پزشک — فقط برای admin/clinic */} {/* پزشک — فقط برای admin/clinic */}
{!isDoctor && ( {!isDoctor && (
<> <>
<div style={{ ...sectionTitle, marginTop: 0 }}>پزشک:</div> <div style={{ ...sectionTitle, marginTop: 0 }}>پزشک:</div>
<label style={label}>انتخاب پزشک</label> <label style={label}>انتخاب پزشک</label>
<div style={{ margin: '6px 0 4px' }}> <div style={{ margin: '6px 0 4px', maxWidth: 400 }}>
<SearchableSelect <SearchableSelect
options={doctorOptions} options={doctorOptions}
value={doctorUuid || null} value={doctorUuid || null}
onChange={(v) => setDoctorUuid(v ? String(v) : '')} onChange={(v) => setDoctorUuid(v ? String(v) : '')}
placeholder="انتخاب پزشک..." placeholder="انتخاب پزشک..."
isClearable isClearable
height={38} height={44}
/> />
</div> </div>
</> </>
)} )}
{/* مراجعه کننده */} {/* مراجعه کننده */}
<div style={{ ...sectionTitle, marginTop: isDoctor ? 0 : 18 }}>اطلاعات مراجعه کننده:</div> <div style={{ ...sectionTitle, marginTop: isDoctor ? 0 : 18 }}>اطلاعات مراجعه کننده :</div>
<label style={label}>انتخاب مراجعه کننده</label> <label style={label}>انتخاب مراجعه کننده</label>
<div className="field" style={{ margin: '6px 0 8px' }}> <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 12, margin: '6px 0 8px' }}>
<input value={picked ? `${picked.user_name ?? ''} — ${picked.user_mobile ?? ''}` : patientSearch} <div className="field" style={{ width: 400, maxWidth: '100%' }}>
onChange={e => { setPicked(null); setPatientSearch(e.target.value); }} <MagnifyingGlassIcon style={{ width: 18, height: 18, color: 'var(--text-3)', flexShrink: 0 }} />
placeholder="جستجوی نام، شماره تماس، شماره پرونده..." /> <input value={picked ? `${picked.user_name ?? ''} — ${picked.user_mobile ?? ''}` : patientSearch}
onChange={e => { setPicked(null); setPatientSearch(e.target.value); }}
placeholder="جستجوی نام، شماره تماس، شماره پرونده..." />
</div>
<button type="button" className="btn outline" onClick={() => { setPicked(null); setPatientSearch(''); }}
style={{ height: 44, minWidth: 161, gap: 6 }}>
<PlusIcon style={{ width: 16, height: 16 }} /> مراجعه کننده جدید
</button>
</div> </div>
{!picked && patients.length > 0 && ( {!picked && patients.length > 0 && (
<div style={{ border: '1px solid var(--border)', borderRadius: 'var(--r-sm)', marginBottom: 10, overflow: 'hidden' }}> <div style={{ border: '1px solid var(--border)', borderRadius: 'var(--r-sm)', marginBottom: 10, overflow: 'hidden', maxWidth: 400 }}>
{patients.map(p => ( {patients.map(p => (
<button key={p.uuid} onClick={() => setPicked(p)} style={{ <button key={p.uuid} onClick={() => setPicked(p)} style={{
display: 'block', width: '100%', padding: '8px 10px', fontSize: 13, textAlign: 'right', display: 'block', width: '100%', padding: '8px 10px', fontSize: 13, textAlign: 'right',
@@ -191,40 +198,33 @@ export default function AppointmentCreatePage() {
</div> </div>
)} )}
{picked === null && ( {picked === null && (
<> <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, marginTop: 8 }}>
<div style={{ margin: '4px 0 10px' }}> <div>
<span style={{ color: 'var(--primary)', border: '1px solid var(--primary)', borderRadius: 'var(--r-sm)', padding: '5px 10px', fontSize: 12, display: 'inline-flex', gap: 5, alignItems: 'center' }}> <label style={label}>نام و نام خانوادگی مراجعه کننده</label>
<PlusIcon style={{ width: 13 }} /> مراجعه کننده جدید <div className="field" style={{ marginTop: 6, height: 44 }}>
</span> <input value={name} onChange={e => setName(e.target.value)} placeholder="نام و نام خانوادگی مراجعه کننده" />
</div>
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
<div>
<label style={label}>نام و نام خانوادگی</label>
<div className="field" style={{ marginTop: 6 }}>
<input value={name} onChange={e => setName(e.target.value)} placeholder="نام و نام خانوادگی مراجعه کننده" />
</div>
</div>
<div>
<label style={label}>شماره تماس</label>
<div className="field" style={{ marginTop: 6 }}>
<input value={mobile} onChange={e => setMobile(e.target.value)} placeholder="شماره تماس مراجعه کننده" dir="ltr" />
</div>
</div>
<div>
<label style={label}>کد ملی</label>
<div className="field" style={{ marginTop: 6 }}>
<input value={nationalCode} onChange={e => setNationalCode(e.target.value.replace(/\D/g, '').slice(0, 10))}
placeholder="کد ملی مراجعه کننده" dir="ltr" inputMode="numeric" maxLength={10} />
</div>
</div> </div>
</div> </div>
</> <div>
<label style={label}>شماره تماس</label>
<div className="field" style={{ marginTop: 6, height: 44 }}>
<input value={mobile} onChange={e => setMobile(e.target.value)} placeholder="شماره تماس مراجعه کننده" dir="ltr" />
</div>
</div>
<div>
<label style={label}>کد ملی</label>
<div className="field" style={{ marginTop: 6, height: 44 }}>
<input value={nationalCode} onChange={e => setNationalCode(e.target.value.replace(/\D/g, '').slice(0, 10))}
placeholder="کد ملی مراجعه کننده" dir="ltr" inputMode="numeric" maxLength={10} />
</div>
</div>
</div>
)} )}
{/* مشخصات سرویس */} {/* مشخصات سرویس */}
<div style={sectionTitle}>مشخصات سرویس:</div> <div style={sectionTitle}>مشخصات سرویس</div>
{!serviceMode && ( {!serviceMode ? (
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginBottom: 10 }}> <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, marginBottom: 10 }}>
<div> <div>
<label style={label}>بخش</label> <label style={label}>بخش</label>
<div style={{ marginTop: 6 }}> <div style={{ marginTop: 6 }}>
@@ -235,7 +235,7 @@ export default function AppointmentCreatePage() {
placeholder="انتخاب بخش" placeholder="انتخاب بخش"
isLoading={sectionsQ.isLoading} isLoading={sectionsQ.isLoading}
isClearable isClearable
height={38} height={44}
/> />
</div> </div>
</div> </div>
@@ -250,97 +250,134 @@ export default function AppointmentCreatePage() {
isDisabled={!sectionUuid} isDisabled={!sectionUuid}
isLoading={itemsQ.isLoading} isLoading={itemsQ.isLoading}
isClearable isClearable
height={38} height={44}
/>
</div>
</div>
<div>
<label style={label}>پرسنل</label>
<div style={{ marginTop: 6 }}>
<SearchableSelect
options={(staffQ.data?.data ?? []).map(o => ({ value: o.uuid, label: o.full_name ?? '' }))}
value={staffUuid || null}
onChange={v => setStaffUuid(v ? String(v) : '')}
placeholder="انتخاب پرسنل"
isLoading={staffQ.isLoading}
isClearable
height={44}
/> />
</div> </div>
</div> </div>
</div> </div>
) : (
<div style={{ maxWidth: 400, marginBottom: 10 }}>
<label style={label}>پرسنل</label>
<div style={{ marginTop: 6 }}>
<SearchableSelect
options={(staffQ.data?.data ?? []).map(o => ({ value: o.uuid, label: o.full_name ?? '' }))}
value={staffUuid || null}
onChange={v => setStaffUuid(v ? String(v) : '')}
placeholder="انتخاب پرسنل"
isLoading={staffQ.isLoading}
isClearable
height={44}
/>
</div>
</div>
)} )}
<label style={label}>انتخاب پرسنل</label>
<div style={{ margin: '6px 0 4px' }}>
<SearchableSelect
options={(staffQ.data?.data ?? []).map(o => ({ value: o.uuid, label: o.full_name ?? '' }))}
value={staffUuid || null}
onChange={v => setStaffUuid(v ? String(v) : '')}
placeholder="انتخاب..."
isLoading={staffQ.isLoading}
isClearable
height={38}
/>
</div>
{/* زمان نوبت */} {/* زمان نوبت */}
<div style={sectionTitle}>زمان نوبت:</div> <div style={sectionTitle}>زمان نوبت</div>
<label style={label}>انتخاب تاریخ</label>
<div style={{ margin: '6px 0 10px' }}><PersianDateInput value={date} onChange={setDate} /></div>
{serviceMode ? ( {serviceMode ? (
<div style={{ marginBottom: 12 }}> <>
{doctorUuid ? ( <label style={label}>انتخاب تاریخ</label>
<ServiceSlotPicker <div style={{ margin: '6px 0 10px', maxWidth: 400 }}><PersianDateInput value={date} onChange={setDate} /></div>
doctorUuid={doctorUuid} <div style={{ marginBottom: 12 }}>
date={date} {doctorUuid ? (
services={services} <ServiceSlotPicker
onSelect={setServicePick} doctorUuid={doctorUuid}
/> date={date}
) : ( services={services}
<div style={{ fontSize: 12.5, color: 'var(--text-3)' }}>ابتدا پزشک را انتخاب کنید.</div> onSelect={setServicePick}
)} />
</div> ) : (
<div style={{ fontSize: 12.5, color: 'var(--text-3)' }}>ابتدا پزشک را انتخاب کنید.</div>
)}
</div>
</>
) : ( ) : (
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10, marginBottom: 12 }}> <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginBottom: 12 }}>
<div>
<label style={label}>انتخاب تاریخ</label>
<div style={{ marginTop: 6 }}><PersianDateInput value={date} onChange={setDate} /></div>
</div>
<div> <div>
<label style={label}>زمان پیش فرض (دقیقه)</label> <label style={label}>زمان پیش فرض (دقیقه)</label>
<div className="field" style={{ marginTop: 6 }}> <div className="field" style={{ marginTop: 6, height: 44 }}>
<input aria-label="زمان پیش فرض" type="number" min={5} value={duration} onChange={e => setDuration(Math.max(5, Number(e.target.value) || 0))} dir="ltr" /> <input aria-label="زمان پیش فرض" type="number" min={5} value={duration} onChange={e => setDuration(Math.max(5, Number(e.target.value) || 0))} dir="ltr" />
</div> </div>
</div> </div>
<div> <div>
<label style={label}>ساعت شروع</label> <label style={label}>ساعت شروع</label>
<div className="field" style={{ marginTop: 6 }}><input aria-label="ساعت شروع" type="time" value={start} onChange={e => setStart(e.target.value)} dir="ltr" /></div> <div className="field" style={{ marginTop: 6, height: 44 }}><input aria-label="ساعت شروع" type="time" value={start} onChange={e => setStart(e.target.value)} dir="ltr" /></div>
</div> </div>
<div> <div>
<label style={label}>ساعت پایان</label> <label style={label}>ساعت پایان</label>
<div className="field" style={{ marginTop: 6 }}><input aria-label="ساعت پایان" type="time" value={end} onChange={e => setEnd(e.target.value)} dir="ltr" /></div> <div className="field" style={{ marginTop: 6, height: 44 }}><input aria-label="ساعت پایان" type="time" value={end} onChange={e => setEnd(e.target.value)} dir="ltr" /></div>
</div> </div>
</div> </div>
)} )}
{/* بیعانه */} {/* بیعانه */}
<div style={sectionTitle}>بیعانه:</div> <div style={sectionTitle}>بیعانه</div>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}> <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 20, marginBottom: 12 }}>
<label style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 13, cursor: 'pointer' }}> <label style={{ display: 'inline-flex', alignItems: 'center', gap: 10, fontSize: 14, cursor: 'pointer' }}>
<input type="checkbox" checked={depositRequired} onChange={e => setDepositRequired(e.target.checked)} /> <span style={{
position: 'relative', width: 42, height: 22, borderRadius: 999, flexShrink: 0,
background: depositRequired ? 'var(--primary)' : '#c4c4c4', transition: 'background .2s',
}}>
<input type="checkbox" checked={depositRequired} onChange={e => setDepositRequired(e.target.checked)}
style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', margin: 0, opacity: 0, cursor: 'pointer' }} />
<span style={{
position: 'absolute', top: 2, insetInlineStart: depositRequired ? 22 : 2, width: 18, height: 18,
borderRadius: 999, background: '#fff', transition: 'inset-inline-start .2s', boxShadow: '0 1px 2px rgba(0,0,0,.2)',
}} />
</span>
بیعانه مورد نیاز است. بیعانه مورد نیاز است.
</label> </label>
{depositRequired && (
<div style={{ width: 300, maxWidth: '100%' }}>
<label style={label}>مبلغ بیعانه (تومان)</label>
<div style={{ marginTop: 6 }}><PriceInput value={depositRials} onChange={setDepositRials} /></div>
</div>
)}
{depositRequired && <WalletChargeLink mobile={effectiveMobile} />} {depositRequired && <WalletChargeLink mobile={effectiveMobile} />}
</div> </div>
{depositRequired && (
<div style={{ marginBottom: 12 }}>
<label style={label}>مبلغ بیعانه (تومان)</label>
<div style={{ marginTop: 6 }}><PriceInput value={depositRials} onChange={setDepositRials} /></div>
</div>
)}
<label style={label}>انتخاب وضعیت</label> <div style={{ maxWidth: 500 }}>
<div style={{ margin: '6px 0 12px' }}> <label style={label}>انتخاب وضعیت</label>
<SearchableSelect <div style={{ margin: '6px 0 12px' }}>
options={[{ value: 'pending', label: 'ثبت شده' }, { value: 'confirmed', label: 'قطعی شده' }]} <SearchableSelect
value={status || null} options={[{ value: 'pending', label: 'ثبت شده' }, { value: 'confirmed', label: 'قطعی شده' }]}
onChange={v => setStatus(v ? String(v) : '')} value={status || null}
placeholder="انتخاب وضعیت" onChange={v => setStatus(v ? String(v) : '')}
height={38} placeholder="انتخاب وضعیت"
/> height={44}
/>
</div>
</div> </div>
<label style={label}>توضیحات</label> <label style={label}>توضیحات</label>
<div className="field" style={{ height: 'auto', margin: '6px 0 16px' }}> <div className="field" style={{ height: 'auto', margin: '6px 0 16px' }}>
<textarea value={note} onChange={e => setNote(e.target.value)} rows={3} placeholder="توضیحات..." <textarea value={note} onChange={e => setNote(e.target.value)} rows={4} placeholder="توضیحات..."
style={{ width: '100%', border: 'none', background: 'transparent', fontFamily: 'inherit', resize: 'vertical' }} /> style={{ width: '100%', border: 'none', background: 'transparent', fontFamily: 'inherit', resize: 'vertical' }} />
</div> </div>
<button className="btn primary" style={{ width: '100%' }} disabled={!valid || create.isPending} onClick={() => create.mutate()}> <div style={{ display: 'flex', justifyContent: 'flex-end', paddingTop: 4 }}>
{create.isPending ? '...' : 'ثبت اطلاعات'} <button className="btn primary lg" disabled={!valid || create.isPending} onClick={() => create.mutate()}>
</button> {create.isPending ? '...' : 'ثبت اطلاعات'}
</button>
</div>
</div> </div>
</div> </div>
); );