ui phase 0

This commit is contained in:
hamid
2026-07-17 14:00:22 +03:30
parent 9051bb3e18
commit f1cba6cf74
139 changed files with 1242 additions and 667 deletions
@@ -102,7 +102,7 @@ export default function AddressesPage() {
</Typography>
</Box>
{!isEmpty ? (
<AppButton color="primary" variant="contained" startIcon="add" onClick={openAdd} sx={{ m: 0, flexShrink: 0 }}>
<AppButton color="primary" variant="contained" startIcon="add" onClick={openAdd} sx={{ flexShrink: 0 }}>
{t('add')}
</AppButton>
) : null}
@@ -93,11 +93,10 @@ export default function CancelBookingPage() {
variant="contained"
color="primary"
onClick={() => router.push(`/${locale}${bookingRefundStatusPath(bookingId)}`)}
sx={{ m: 0 }}
>
{t('view_refund_status')}
</AppButton>
<AppButton variant="text" color="inherit" onClick={() => router.push(bookingHref)} sx={{ m: 0 }}>
<AppButton variant="text" color="inherit" onClick={() => router.push(bookingHref)}>
{t('back_to_booking')}
</AppButton>
</Stack>
@@ -157,7 +156,7 @@ export default function CancelBookingPage() {
/>
<Stack direction="row" sx={{ gap: 1, justifyContent: 'space-between', flexWrap: 'wrap' }}>
<AppButton variant="text" color="inherit" onClick={() => router.push(bookingHref)} sx={{ m: 0 }}>
<AppButton variant="text" color="inherit" onClick={() => router.push(bookingHref)}>
{t('back_to_booking')}
</AppButton>
<AppButton
@@ -165,7 +164,6 @@ export default function CancelBookingPage() {
color="primary"
disabled={!acknowledged}
onClick={() => setStep(1)}
sx={{ m: 0 }}
>
{t('continue_cta')}
</AppButton>
@@ -192,7 +190,6 @@ export default function CancelBookingPage() {
color="inherit"
onClick={() => setStep(0)}
disabled={cancel.isPending}
sx={{ m: 0 }}
>
{tc('back')}
</AppButton>
@@ -201,7 +198,6 @@ export default function CancelBookingPage() {
color="error"
onClick={submit}
disabled={cancel.isPending}
sx={{ m: 0 }}
>
{cancel.isPending ? t('submitting') : t('confirm_cta')}
</AppButton>
@@ -51,7 +51,7 @@ export default function BookingInvoicePage() {
<Typography variant="body2" sx={{ color: 'text.secondary' }}>
{t('invalid_link_body')}
</Typography>
<AppButton variant="contained" onClick={() => router.push(`/${locale}${ROUTES.BOOKINGS}`)} sx={{ m: 0 }}>
<AppButton variant="contained" onClick={() => router.push(`/${locale}${ROUTES.BOOKINGS}`)}>
{t('view_booking')}
</AppButton>
</Stack>
@@ -82,11 +82,11 @@ export default function BookingInvoicePage() {
{notIssued ? t('invoice_not_issued_body') : t('error_body')}
</Typography>
{notIssued ? (
<AppButton variant="contained" onClick={() => router.push(`/${locale}${ROUTES.BOOKINGS}/${bookingId}`)} sx={{ m: 0 }}>
<AppButton variant="contained" onClick={() => router.push(`/${locale}${ROUTES.BOOKINGS}/${bookingId}`)}>
{t('view_booking')}
</AppButton>
) : (
<AppButton variant="contained" onClick={() => refetch()} sx={{ m: 0 }}>
<AppButton variant="contained" onClick={() => refetch()}>
{tc('retry')}
</AppButton>
)}
@@ -185,15 +185,15 @@ export default function BookingInvoicePage() {
<Stack sx={{ gap: 1 }}>
{invoice.pdfUrl ? (
<AppButton color="primary" variant="contained" startIcon="document" href={invoice.pdfUrl} openInNewTab sx={{ m: 0 }}>
<AppButton color="primary" variant="contained" startIcon="document" href={invoice.pdfUrl} openInNewTab>
{t('download_invoice')}
</AppButton>
) : (
<AppButton color="primary" variant="contained" startIcon="document" onClick={handlePrint} sx={{ m: 0 }}>
<AppButton color="primary" variant="contained" startIcon="document" onClick={handlePrint}>
{t('print_invoice')}
</AppButton>
)}
<AppButton variant="text" onClick={() => router.push(`/${locale}${ROUTES.BOOKINGS}/${bookingId}`)} sx={{ m: 0 }}>
<AppButton variant="text" onClick={() => router.push(`/${locale}${ROUTES.BOOKINGS}/${bookingId}`)}>
{t('view_booking')}
</AppButton>
</Stack>
@@ -207,7 +207,7 @@ function MetaRow({ label, value, ltr }: { label: string; value: string; ltr?: bo
<Typography variant="body2" sx={{ color: 'text.secondary' }}>
{label}
</Typography>
<Typography variant="body2" sx={{ fontWeight: 600 }} dir={ltr ? 'ltr' : undefined}>
<Typography variant="body2" sx={{ fontWeight: 500 }} dir={ltr ? 'ltr' : undefined}>
{value}
</Typography>
</Stack>
@@ -63,7 +63,6 @@ function LeaveReviewCta({ bookingId }: { bookingId: number }) {
color="primary"
startIcon="star"
onClick={() => router.push(`/${locale}${bookingReviewPath(bookingId)}`)}
sx={{ m: 0 }}
>
{alreadyReviewed ? (underReview ? t('cta_under_review') : t('cta_view_review')) : t('cta_leave')}
</AppButton>
@@ -95,7 +94,6 @@ function CustomerBookingActions({ bookingId }: { bookingId: number }) {
color="error"
startIcon="rejected"
onClick={() => router.push(`/${locale}${bookingCancelPath(bookingId)}`)}
sx={{ m: 0 }}
>
{t('cancel_booking_cta')}
</AppButton>
@@ -114,7 +112,7 @@ function CustomerBookingActions({ bookingId }: { bookingId: number }) {
variant="text"
color="primary"
onClick={() => router.push(`/${locale}${bookingRefundStatusPath(bookingId)}`)}
sx={{ m: 0, alignSelf: 'flex-start' }}
sx={{ alignSelf: 'flex-start' }}
>
{t('view_refund_status')}
</AppButton>
@@ -66,7 +66,7 @@ export default function RefundStatusPage() {
variant="text"
color="inherit"
onClick={() => router.push(`/${locale}${ROUTES.BOOKINGS}/${bookingId}`)}
sx={{ m: 0, alignSelf: 'flex-start' }}
sx={{ alignSelf: 'flex-start' }}
>
{t('back_to_booking')}
</AppButton>
@@ -95,7 +95,7 @@ export default function LeaveReviewPage() {
) : null}
</Stack>
</Paper>
<AppButton variant="outlined" color="primary" onClick={() => router.back()} sx={{ m: 0, alignSelf: 'flex-start' }}>
<AppButton variant="outlined" color="primary" onClick={() => router.back()} sx={{ alignSelf: 'flex-start' }}>
{tc('back')}
</AppButton>
</Stack>
@@ -124,7 +124,7 @@ export default function LeaveReviewPage() {
{t(`reason_${reason}`)}
</Typography>
</Paper>
<AppButton variant="outlined" color="primary" onClick={() => router.back()} sx={{ m: 0, alignSelf: 'flex-start' }}>
<AppButton variant="outlined" color="primary" onClick={() => router.back()} sx={{ alignSelf: 'flex-start' }}>
{tc('back')}
</AppButton>
</Stack>
@@ -167,7 +167,7 @@ export default function LeaveReviewPage() {
</Stack>
<Stack direction="row" sx={{ gap: 1, justifyContent: 'flex-end' }}>
<AppButton variant="text" color="primary" onClick={() => router.back()} sx={{ m: 0 }} disabled={createReview.isPending}>
<AppButton variant="text" color="primary" onClick={() => router.back()} disabled={createReview.isPending}>
{tc('cancel')}
</AppButton>
<AppButton
@@ -176,7 +176,6 @@ export default function LeaveReviewPage() {
onClick={submit}
disabled={rating < 1 || createReview.isPending}
startIcon="star"
sx={{ m: 0 }}
>
{createReview.isPending ? t('submitting') : t('submit')}
</AppButton>
@@ -86,7 +86,7 @@ const EligibilityStep: FunctionComponent<EligibilityStepProps> = ({
) : null}
</Stack>
</Paper>
<AppButton color="secondary" variant="contained" size="large" onClick={() => onApproved(result)} sx={{ m: 0 }}>
<AppButton color="secondary" variant="contained" size="large" onClick={() => onApproved(result)}>
{t('approve_continue')}
</AppButton>
</Stack>
@@ -162,11 +162,10 @@ const EligibilityStep: FunctionComponent<EligibilityStepProps> = ({
size="large"
disabled={!consent || check.isPending}
onClick={handleSubmit}
sx={{ m: 0 }}
>
{t('check_eligibility')}
</AppButton>
<AppButton variant="text" color="primary" onClick={onPayWithCard} sx={{ m: 0 }}>
<AppButton variant="text" color="primary" onClick={onPayWithCard}>
{t('pay_with_card')}
</AppButton>
</Stack>
@@ -207,11 +206,11 @@ function DeclinedPanel({
</Paper>
<Stack sx={{ gap: 1 }}>
{onRetry && retryLabel ? (
<AppButton variant="outlined" color="secondary" onClick={onRetry} sx={{ m: 0 }}>
<AppButton variant="outlined" color="secondary" onClick={onRetry}>
{retryLabel}
</AppButton>
) : null}
<AppButton color="primary" variant="contained" size="large" onClick={onPayWithCard} sx={{ m: 0 }}>
<AppButton color="primary" variant="contained" size="large" onClick={onPayWithCard}>
{cardLabel}
</AppButton>
</Stack>
@@ -109,7 +109,6 @@ const MethodStep: FunctionComponent<MethodStepProps> = ({
size="large"
disabled={selectedProvider == null}
onClick={onContinue}
sx={{ m: 0 }}
>
{selectedProvider
? t('continue_with', { provider: t(`provider_${selectedProvider}`) })
@@ -44,7 +44,7 @@ const PlanStep: FunctionComponent<PlanStepProps> = ({
{t('no_plans_body')}
</Typography>
</Paper>
<AppButton variant="outlined" color="primary" onClick={onBack} sx={{ m: 0 }}>
<AppButton variant="outlined" color="primary" onClick={onBack}>
{t('back_to_providers')}
</AppButton>
</Stack>
@@ -93,11 +93,10 @@ const PlanStep: FunctionComponent<PlanStepProps> = ({
size="large"
disabled={selectedPlanId == null}
onClick={onContinue}
sx={{ m: 0 }}
>
{t('continue')}
</AppButton>
<AppButton variant="text" color="primary" onClick={onBack} sx={{ m: 0 }}>
<AppButton variant="text" color="primary" onClick={onBack}>
{tc('back')}
</AppButton>
</Stack>
@@ -82,7 +82,7 @@ const ScheduleStep: FunctionComponent<ScheduleStepProps> = ({
<AppAlert severity="error" variant="outlined" sx={{ marginY: 0 }}>
{t('error_body')}
</AppAlert>
<AppButton variant="outlined" color="secondary" onClick={() => refetch()} sx={{ m: 0 }}>
<AppButton variant="outlined" color="secondary" onClick={() => refetch()}>
{tc('retry')}
</AppButton>
</Stack>
@@ -146,11 +146,11 @@ const ScheduleStep: FunctionComponent<ScheduleStepProps> = ({
size="large"
disabled={!accepted}
onClick={handleConfirm}
sx={{ m: 0, py: 1.25 }}
sx={{ py: 1.25 }}
>
{t('pay_down_payment')}
</AppButton>
<AppButton variant="text" color="primary" onClick={onBack} sx={{ m: 0 }}>
<AppButton variant="text" color="primary" onClick={onBack}>
{tc('back')}
</AppButton>
</Stack>
@@ -61,10 +61,10 @@ function BnplGatewayScreen() {
<Typography variant="body2" sx={{ color: 'text.secondary' }}>
{t('handoff_body', { provider: providerName })}
</Typography>
<AppButton color="secondary" variant="contained" size="large" onClick={() => returnWith('success')} sx={{ m: 0 }}>
<AppButton color="secondary" variant="contained" size="large" onClick={() => returnWith('success')}>
{t('handoff_pay_success')}
</AppButton>
<AppButton variant="text" color="error" onClick={() => returnWith('failure')} sx={{ m: 0 }}>
<AppButton variant="text" color="error" onClick={() => returnWith('failure')}>
{t('handoff_pay_fail')}
</AppButton>
</Stack>
@@ -201,7 +201,7 @@ function MessageCard({
{body}
</Typography>
) : null}
<AppButton variant="contained" color="primary" onClick={onCta} sx={{ m: 0 }}>
<AppButton variant="contained" color="primary" onClick={onCta}>
{ctaLabel}
</AppButton>
</Paper>
@@ -98,7 +98,7 @@ function BnplReturnScreen() {
if (!validId) {
return (
<StateCard icon="error" tone="var(--bal-error)" title={t('error_title')}>
<AppButton variant="contained" onClick={() => router.replace(`/${locale}${ROUTES.BOOKINGS}`)} sx={{ m: 0 }}>
<AppButton variant="contained" onClick={() => router.replace(`/${locale}${ROUTES.BOOKINGS}`)}>
{t('pay_with_card')}
</AppButton>
</StateCard>
@@ -113,7 +113,6 @@ function BnplReturnScreen() {
<AppButton
variant="contained"
onClick={() => router.replace(`/${locale}${ROUTES.BOOKING_REQUEST_STATUS}/${requestId}`)}
sx={{ m: 0 }}
>
{tp('back_to_request')}
</AppButton>
@@ -129,14 +128,12 @@ function BnplReturnScreen() {
variant="contained"
size="large"
onClick={() => router.replace(`/${locale}${ROUTES.CHECKOUT_BNPL}?${BNPL_QUERY_REQUEST_ID}=${requestId}`)}
sx={{ m: 0 }}
>
{t('retry_installments')}
</AppButton>
<AppButton
variant="text"
onClick={() => router.replace(`/${locale}${ROUTES.CHECKOUT}?${CHECKOUT_QUERY_REQUEST_ID}=${requestId}`)}
sx={{ m: 0 }}
>
{t('pay_with_card')}
</AppButton>
@@ -148,7 +145,7 @@ function BnplReturnScreen() {
return (
<StateCard icon="installments" tone="var(--bal-secondary)" title={t('settling_title')} body={t('settling_body')}>
<CircularProgress color="secondary" size="2.5rem" />
<AppButton variant="text" disabled={orderQuery.isFetching} onClick={() => orderQuery.refetch()} sx={{ m: 0 }}>
<AppButton variant="text" disabled={orderQuery.isFetching} onClick={() => orderQuery.refetch()}>
{t('check_again')}
</AppButton>
</StateCard>
@@ -76,7 +76,7 @@ function ConfirmationScreen() {
{summary.variantLabel} · {summary.nurseName}
</Typography>
{isBnpl ? (
<Typography variant="caption" sx={{ color: 'var(--bal-secondary)', fontWeight: 600, mt: 0.5 }}>
<Typography variant="caption" sx={{ color: 'var(--bal-secondary)', fontWeight: 500, mt: 0.5 }}>
{tBnpl('paid_via_installments', {
provider: bnplProvider ? tBnpl(`provider_${bnplProvider}`) : tBnpl('installments_heading'),
})}
@@ -94,7 +94,6 @@ function ConfirmationScreen() {
onClick={() =>
router.push(`/${locale}${bookingId != null ? `${ROUTES.BOOKINGS}/${bookingId}` : ROUTES.BOOKINGS}`)
}
sx={{ m: 0 }}
>
{t('view_booking')}
</AppButton>
@@ -104,7 +103,6 @@ function ConfirmationScreen() {
color="primary"
startIcon="document"
onClick={() => router.push(`/${locale}${bookingInvoicePath(bookingId)}`)}
sx={{ m: 0 }}
>
{t('download_invoice')}
</AppButton>
@@ -206,7 +206,7 @@ function CheckoutScreen() {
size="large"
disabled={busy}
onClick={handlePay}
sx={{ m: 0, py: 1.25 }}
sx={{ py: 1.25 }}
>
{initiate.isPending ? t('state_initiating') : initiate.isSuccess ? t('state_redirecting') : t('cta_pay')}
</AppButton>
@@ -217,7 +217,6 @@ function CheckoutScreen() {
color="secondary"
startIcon="installments"
onClick={() => router.push(`/${locale}${ROUTES.CHECKOUT_BNPL}?${CHECKOUT_QUERY_REQUEST_ID}=${requestId}`)}
sx={{ m: 0 }}
>
{t('bnpl_option')}
</AppButton>
@@ -278,7 +277,7 @@ function MessageCard({
{body}
</Typography>
) : null}
<AppButton variant="contained" color="primary" onClick={onCta} sx={{ m: 0 }}>
<AppButton variant="contained" color="primary" onClick={onCta}>
{ctaLabel}
</AppButton>
</Paper>
@@ -88,7 +88,7 @@ function ReturnScreen() {
if (!validId) {
return (
<StateCard icon="error" tone="var(--bal-error)" title={t('error_title')}>
<AppButton variant="contained" onClick={() => router.replace(`/${locale}${ROUTES.BOOKINGS}`)} sx={{ m: 0 }}>
<AppButton variant="contained" onClick={() => router.replace(`/${locale}${ROUTES.BOOKINGS}`)}>
{t('view_booking')}
</AppButton>
</StateCard>
@@ -101,7 +101,6 @@ function ReturnScreen() {
<AppButton
variant="contained"
onClick={() => router.replace(`/${locale}${ROUTES.BOOKING_REQUEST_STATUS}/${requestId}`)}
sx={{ m: 0 }}
>
{t('back_to_request')}
</AppButton>
@@ -120,14 +119,12 @@ function ReturnScreen() {
onClick={() =>
router.replace(`/${locale}${ROUTES.CHECKOUT}?${CHECKOUT_QUERY_REQUEST_ID}=${requestId}`)
}
sx={{ m: 0 }}
>
{t('retry_payment')}
</AppButton>
<AppButton
variant="text"
onClick={() => router.replace(`/${locale}${ROUTES.BOOKING_REQUEST_STATUS}/${requestId}`)}
sx={{ m: 0 }}
>
{t('back_to_request')}
</AppButton>
@@ -141,7 +138,7 @@ function ReturnScreen() {
<CircularProgress color="primary" size="2.5rem" />
<PaymentStatusBadge status="pending" />
{/* Manual re-check — covers the bounded poll giving up on a very slow callback. */}
<AppButton variant="text" disabled={outcomeQuery.isFetching} onClick={() => outcomeQuery.refetch()} sx={{ m: 0 }}>
<AppButton variant="text" disabled={outcomeQuery.isFetching} onClick={() => outcomeQuery.refetch()}>
{t('check_again')}
</AppButton>
</StateCard>
@@ -93,7 +93,6 @@ function BookingRow({ item }: { item: BookingListItemDto }) {
color="primary"
endIcon="bookings"
onClick={() => router.push(`/${locale}${ROUTES.BOOKINGS}/${item.id}`)}
sx={{ m: 0 }}
>
{t('view_booking')}
</AppButton>
@@ -185,7 +185,7 @@ export default function BookingRequestStatusPage() {
size="large"
endIcon="payment"
onClick={() => router.push(`/${locale}${ROUTES.CHECKOUT}?request_id=${request.id}`)}
sx={{ m: 0, py: 1.25 }}
sx={{ py: 1.25 }}
>
{t('continue_payment')}
</AppButton>
@@ -207,7 +207,7 @@ export default function BookingRequestStatusPage() {
color="error"
disabled={cancelRequest.isPending}
onClick={() => setConfirmCancel(true)}
sx={{ m: 0, alignSelf: 'center' }}
sx={{ alignSelf: 'center' }}
>
{cancelRequest.isPending ? t('cancelling') : t('cancel_request')}
</AppButton>
@@ -273,7 +273,7 @@ function TerminalCard({
{body}
</Typography>
) : null}
<AppButton variant="contained" color="primary" onClick={onCta} sx={{ m: 0 }}>
<AppButton variant="contained" color="primary" onClick={onCta}>
{ctaLabel}
</AppButton>
</Paper>
@@ -384,7 +384,7 @@ function BookingRequestForm() {
'& .MuiToggleButton-root': {
flex: 1,
py: 1.25,
fontWeight: 600,
fontWeight: 700,
borderColor: attempted && gender === '' ? 'var(--bal-error)' : undefined,
},
}}
@@ -438,7 +438,7 @@ function BookingRequestForm() {
startIcon="requests"
disabled={!requiredChosen || genderMismatch || createRequest.isPending}
onClick={handleSubmit}
sx={{ m: 0, py: 1.5 }}
sx={{ py: 1.5 }}
>
{createRequest.isPending ? t('submitting') : t('submit')}
</AppButton>
@@ -494,7 +494,7 @@ function FieldEmpty({
<Typography variant="body2" sx={{ color: 'text.secondary' }}>
{message}
</Typography>
<AppButton variant="outlined" color="primary" startIcon="add" onClick={onCta} sx={{ m: 0 }}>
<AppButton variant="outlined" color="primary" startIcon="add" onClick={onCta}>
{ctaLabel}
</AppButton>
</Stack>
@@ -525,7 +525,7 @@ function EmptyState({
<Typography variant="body2" sx={{ color: 'text.secondary', mb: 2 }}>
{body}
</Typography>
<AppButton variant="contained" color="primary" onClick={onCta} sx={{ m: 0 }}>
<AppButton variant="contained" color="primary" onClick={onCta}>
{ctaLabel}
</AppButton>
</Paper>
@@ -67,7 +67,6 @@ export default function OnboardingPage() {
fullWidth
disabled={!relation}
onClick={() => setStep(1)}
sx={{ m: 0 }}
>
{t('continue')}
</AppButton>
@@ -33,7 +33,7 @@ const NudgeCard: FunctionComponent<NudgeCardProps> = ({ icon, title, body, ctaLa
{body}
</Typography>
</Stack>
<AppButton color="primary" variant="outlined" to={to} sx={{ m: 0, alignSelf: 'flex-start' }}>
<AppButton color="primary" variant="outlined" to={to} sx={{ alignSelf: 'flex-start' }}>
{ctaLabel}
</AppButton>
</Stack>
@@ -180,7 +180,7 @@ const CategoryGrid: FunctionComponent<{ onSelect: (categoryId: number) => void }
<Typography variant="body2" sx={{ color: 'text.secondary', mb: 1 }}>
{t('categories_error')}
</Typography>
<AppButton variant="outlined" color="primary" onClick={() => refetch()} sx={{ m: 0 }}>
<AppButton variant="outlined" color="primary" onClick={() => refetch()}>
{tc('retry')}
</AppButton>
</Paper>
@@ -110,7 +110,7 @@ export default function PatientRecordPage() {
sx={{ p: 2, borderRadius: 2, backgroundColor: 'var(--bal-primary-soft)', display: 'flex', gap: 1, alignItems: 'center' }}
>
<AppIcon icon="family" size={22} color="var(--bal-primary)" />
<Typography variant="body2" sx={{ color: 'var(--bal-primary)', fontWeight: 600 }}>
<Typography variant="body2" sx={{ color: 'var(--bal-primary)', fontWeight: 500 }}>
{t('ownership_banner')}
</Typography>
</Paper>
@@ -435,13 +435,13 @@ function HistoryTab({ patientId }: { patientId: number }) {
))}
{totalPages > 1 ? (
<Stack direction="row" sx={{ gap: 1, justifyContent: 'center', alignItems: 'center' }}>
<AppButton variant="text" color="primary" disabled={page <= 1 || history.isFetching} onClick={() => setPage((n) => Math.max(1, n - 1))} sx={{ m: 0 }}>
<AppButton variant="text" color="primary" disabled={page <= 1 || history.isFetching} onClick={() => setPage((n) => Math.max(1, n - 1))}>
{t('prev')}
</AppButton>
<Typography variant="caption" sx={{ color: 'text.secondary' }}>
{t('page_of', { page, total: totalPages })}
</Typography>
<AppButton variant="text" color="primary" disabled={page >= totalPages || history.isFetching} onClick={() => setPage((n) => n + 1)} sx={{ m: 0 }}>
<AppButton variant="text" color="primary" disabled={page >= totalPages || history.isFetching} onClick={() => setPage((n) => n + 1)}>
{t('next')}
</AppButton>
</Stack>
@@ -468,7 +468,7 @@ function SectionShell({
return (
<Stack sx={{ gap: 1.5 }}>
{canEdit ? (
<AppButton variant="text" color="primary" startIcon="edit" onClick={onEdit} sx={{ m: 0, alignSelf: 'flex-end' }}>
<AppButton variant="text" color="primary" startIcon="edit" onClick={onEdit} sx={{ alignSelf: 'flex-end' }}>
{tc('edit')}
</AppButton>
) : null}
@@ -500,14 +500,14 @@ function EditActions({
const tc = useTranslations('common');
return (
<Stack sx={{ gap: 1 }}>
<AppButton variant="outlined" color="primary" startIcon="add" onClick={onAdd} sx={{ m: 0, alignSelf: 'flex-start' }}>
<AppButton variant="outlined" color="primary" startIcon="add" onClick={onAdd} sx={{ alignSelf: 'flex-start' }}>
{t('add_item')}
</AppButton>
<Stack direction="row" sx={{ gap: 1, justifyContent: 'flex-end' }}>
<AppButton variant="text" color="primary" onClick={onCancel} disabled={saving} sx={{ m: 0 }}>
<AppButton variant="text" color="primary" onClick={onCancel} disabled={saving}>
{tc('cancel')}
</AppButton>
<AppButton variant="contained" color="primary" onClick={onSave} disabled={saving || !canSave} sx={{ m: 0 }}>
<AppButton variant="contained" color="primary" onClick={onSave} disabled={saving || !canSave}>
{saving ? tc('saving') : tc('save')}
</AppButton>
</Stack>
@@ -524,7 +524,7 @@ function BackToPatients() {
variant="outlined"
color="primary"
onClick={() => router.push(`/${locale}${ROUTES.PATIENTS}`)}
sx={{ m: 0, alignSelf: 'flex-start' }}
sx={{ alignSelf: 'flex-start' }}
>
{t('back_to_patients')}
</AppButton>
@@ -94,7 +94,7 @@ export default function PatientsPage() {
</Typography>
</Box>
{!isEmpty ? (
<AppButton color="primary" variant="contained" startIcon="add" onClick={openAdd} sx={{ m: 0, flexShrink: 0 }}>
<AppButton color="primary" variant="contained" startIcon="add" onClick={openAdd} sx={{ flexShrink: 0 }}>
{t('add')}
</AppButton>
) : null}
@@ -131,7 +131,7 @@ const CustomerProfileForm: FunctionComponent<{
variant="contained"
onClick={handleSave}
disabled={upsert.isPending}
sx={{ m: 0, alignSelf: 'flex-start' }}
sx={{ alignSelf: 'flex-start' }}
>
{upsert.isPending ? tc('saving') : t('save')}
</AppButton>
@@ -156,7 +156,7 @@ const CustomerProfileForm: FunctionComponent<{
variant="outlined"
startIcon="location"
to={`/${locale}${ROUTES.ADDRESSES}`}
sx={{ m: 0, alignSelf: 'flex-start' }}
sx={{ alignSelf: 'flex-start' }}
>
{ta('manage_cta')}
</AppButton>
@@ -49,7 +49,6 @@ export default function NurseProfilePage() {
variant="outlined"
color="primary"
onClick={() => (notFound ? router.push(`/${locale}${ROUTES.SEARCH}`) : refetch())}
sx={{ m: 0 }}
>
{notFound ? t('profile_not_found_cta') : t('retry')}
</AppButton>
@@ -95,7 +94,7 @@ export default function NurseProfilePage() {
size="large"
onClick={requestBooking}
startIcon="bookings"
sx={{ m: 0, py: 1.5 }}
sx={{ py: 1.5 }}
>
{t('request_booking')}
</AppButton>
@@ -230,7 +229,7 @@ function ReviewsPanel({ nurseId }: { nurseId: number }) {
<Typography variant="body2" sx={{ color: 'text.secondary', mb: 1.5 }}>
{t('load_error')}
</Typography>
<AppButton variant="outlined" color="primary" onClick={() => refetch()} sx={{ m: 0 }}>
<AppButton variant="outlined" color="primary" onClick={() => refetch()}>
{t('retry')}
</AppButton>
</Paper>
@@ -278,7 +277,7 @@ function ReviewsPanel({ nurseId }: { nurseId: number }) {
color="primary"
onClick={() => fetchNextPage()}
disabled={isFetchingNextPage}
sx={{ m: 0, alignSelf: 'center' }}
sx={{ alignSelf: 'center' }}
>
{isFetchingNextPage ? t('loading') : t('load_more')}
</AppButton>
@@ -134,7 +134,7 @@ function SearchFilterScreen() {
disabled={!controller.isReady}
onClick={goToResults}
startIcon="search"
sx={{ m: 0, py: 1.5 }}
sx={{ py: 1.5 }}
>
{ctaLabel}
</AppButton>
@@ -80,7 +80,7 @@ function ResultsScreen() {
<Typography variant="body2" sx={{ color: 'text.secondary', mb: 2 }}>
{t('results_error')}
</Typography>
<AppButton variant="outlined" color="primary" onClick={() => refetch()} sx={{ m: 0 }}>
<AppButton variant="outlined" color="primary" onClick={() => refetch()}>
{t('retry')}
</AppButton>
</Paper>
@@ -97,7 +97,7 @@ function ResultsScreen() {
color="primary"
onClick={() => setPageSize((size) => size + SEARCH_PAGE_SIZE)}
disabled={isFetching}
sx={{ m: 0, alignSelf: 'center' }}
sx={{ alignSelf: 'center' }}
>
{t('load_more')}
</AppButton>
@@ -128,7 +128,7 @@ function EmptyState({ onRelax }: { onRelax: () => void }) {
{t('empty_suggest_city')}
</Typography>
</Stack>
<AppButton variant="contained" color="primary" onClick={onRelax} startIcon="tune" sx={{ m: 0 }}>
<AppButton variant="contained" color="primary" onClick={onRelax} startIcon="tune">
{t('empty_cta')}
</AppButton>
</Paper>
@@ -42,7 +42,7 @@ const WalletInstallments: FunctionComponent = () => {
<Typography variant="body2" sx={{ color: 'text.secondary' }}>
{t('wallet_error_body')}
</Typography>
<AppButton variant="outlined" color="secondary" onClick={() => refetch()} sx={{ m: 0, mt: 1 }}>
<AppButton variant="outlined" color="secondary" onClick={() => refetch()} sx={{ mt: 1 }}>
{tc('retry')}
</AppButton>
</Stack>
@@ -106,7 +106,7 @@ function InstallmentPlanSection({ plan }: { plan: WalletInstallmentPlan }) {
variant="contained"
size="small"
onClick={handleEarlyPay}
sx={{ m: 0, flex: 'none' }}
sx={{ flex: 'none' }}
>
{t('early_pay')}
</AppButton>
@@ -76,10 +76,10 @@ export default function AdminAuditPage() {
onChange={(e) => setDraft((d) => ({ ...d, to: e.target.value || undefined }))}
slotProps={{ inputLabel: { shrink: true } }}
/>
<AppButton variant="contained" color="primary" onClick={apply} sx={{ m: 0 }}>
<AppButton variant="contained" color="primary" onClick={apply}>
{t('apply')}
</AppButton>
<AppButton variant="text" color="inherit" onClick={clear} sx={{ m: 0 }}>
<AppButton variant="text" color="inherit" onClick={clear}>
{t('clear')}
</AppButton>
</Stack>
@@ -159,15 +159,15 @@ function ConfigEditDialog({ config, onClose }: { config: PlatformConfig; onClose
/>
)}
<DialogContentText sx={{ mt: 2, color: 'var(--bal-warning)', fontWeight: 600 }}>
<DialogContentText sx={{ mt: 2, color: 'var(--bal-warning)', fontWeight: 500 }}>
{t('cfg_save_confirm_body')}
</DialogContentText>
</DialogContent>
<DialogActions sx={{ px: 3, pb: 2 }}>
<AppButton variant="text" color="inherit" onClick={onClose} disabled={update.isPending} sx={{ m: 0 }}>
<AppButton variant="text" color="inherit" onClick={onClose} disabled={update.isPending}>
{t('cancel')}
</AppButton>
<AppButton variant="contained" color="primary" onClick={onSave} disabled={!!errorKey || update.isPending} sx={{ m: 0 }}>
<AppButton variant="contained" color="primary" onClick={onSave} disabled={!!errorKey || update.isPending}>
{update.isPending ? t('saving') : t('save')}
</AppButton>
</DialogActions>
@@ -187,7 +187,7 @@ function ConfigHistoryDrawer({ configKey, onClose }: { configKey: string | null;
<Drawer anchor={anchor} open={configKey != null} onClose={onClose} slotProps={{ paper: { sx: { width: { xs: '100%', sm: 420 }, p: 3 } } }}>
<Stack direction="row" sx={{ justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
<Typography variant="h6">{configKey ? t('cfg_history_title', { key: configKey }) : ''}</Typography>
<AppButton variant="text" color="inherit" onClick={onClose} sx={{ m: 0, minWidth: 0 }}>
<AppButton variant="text" color="inherit" onClick={onClose} sx={{ minWidth: 0 }}>
<AppIcon icon="close" />
</AppButton>
</Stack>
@@ -63,7 +63,7 @@ export default function AdminHolidaysPage() {
key: 'actions',
header: '',
render: (h: Holiday) => (
<AppButton variant="text" color="primary" startIcon="edit" onClick={() => setEditing(h)} sx={{ m: 0 }}>
<AppButton variant="text" color="primary" startIcon="edit" onClick={() => setEditing(h)}>
{t('cfg_edit')}
</AppButton>
),
@@ -79,7 +79,7 @@ export default function AdminHolidaysPage() {
subtitle={t('hol_subtitle')}
actions={
caps.canConfig ? (
<AppButton variant="contained" color="primary" startIcon="add" onClick={() => setEditing('new')} sx={{ m: 0 }}>
<AppButton variant="contained" color="primary" startIcon="add" onClick={() => setEditing('new')}>
{t('hol_add')}
</AppButton>
) : undefined
@@ -168,10 +168,10 @@ function HolidayDialog({ holiday, onClose }: { holiday: Holiday | null; onClose:
</Stack>
</DialogContent>
<DialogActions sx={{ px: 3, pb: 2 }}>
<AppButton variant="text" color="inherit" onClick={onClose} disabled={upsert.isPending} sx={{ m: 0 }}>
<AppButton variant="text" color="inherit" onClick={onClose} disabled={upsert.isPending}>
{t('cancel')}
</AppButton>
<AppButton variant="contained" color="primary" onClick={onSave} disabled={!valid || upsert.isPending} sx={{ m: 0 }}>
<AppButton variant="contained" color="primary" onClick={onSave} disabled={!valid || upsert.isPending}>
{upsert.isPending ? t('saving') : t('save')}
</AppButton>
</DialogActions>
@@ -83,7 +83,7 @@ export default function AdminPartnerCenterDetailPage() {
color="primary"
startIcon="partners"
onClick={() => router.push(`/${locale}${ROUTES.ADMIN_PARTNERS}`)}
sx={{ m: 0, alignSelf: 'flex-start' }}
sx={{ alignSelf: 'flex-start' }}
>
{t('back')}
</AppButton>
@@ -162,7 +162,6 @@ export default function AdminPartnerCenterDetailPage() {
startIcon="verified"
onClick={() => setConfirmVerify(true)}
disabled={verify.isPending}
sx={{ m: 0 }}
>
{t('partner_verify')}
</AppButton>
@@ -172,11 +171,10 @@ export default function AdminPartnerCenterDetailPage() {
color="primary"
onClick={() => setActive.mutate(!data.isActive)}
disabled={setActive.isPending}
sx={{ m: 0 }}
>
{t(data.isActive ? 'partner_suspend' : 'partner_activate')}
</AppButton>
<AppButton variant="outlined" color="inherit" startIcon="edit" onClick={() => setEditing(true)} sx={{ m: 0 }}>
<AppButton variant="outlined" color="inherit" startIcon="edit" onClick={() => setEditing(true)}>
{t('partner_edit')}
</AppButton>
</Stack>
@@ -211,7 +209,6 @@ export default function AdminPartnerCenterDetailPage() {
startIcon="delete"
onClick={() => onRemove(nurse.nurseProfileId)}
disabled={assignNurse.isPending}
sx={{ m: 0 }}
>
{t('partner_unlink_nurse')}
</AppButton>
@@ -239,7 +236,7 @@ export default function AdminPartnerCenterDetailPage() {
startIcon="assign"
onClick={onAssign}
disabled={assignNurse.isPending || Number(assignId) <= 0}
sx={{ m: 0, mt: 0.25 }}
sx={{ mt: 0.25 }}
>
{t('partner_assign_nurse')}
</AppButton>
@@ -270,7 +267,7 @@ function DetailRow({ label, children }: { label: string; children: ReactNode })
<Typography variant="body2" sx={{ color: 'text.secondary' }}>
{label}
</Typography>
<Typography variant="body2" component="div" sx={{ fontWeight: 600, textAlign: 'end' }}>
<Typography variant="body2" component="div" sx={{ fontWeight: 500, textAlign: 'end' }}>
{children}
</Typography>
</Stack>
@@ -77,7 +77,7 @@ export default function AdminPartnersPage() {
subtitle={t('partner_subtitle')}
actions={
caps.canManagePartners ? (
<AppButton variant="contained" color="primary" startIcon="add" onClick={() => setCreating(true)} sx={{ m: 0 }}>
<AppButton variant="contained" color="primary" startIcon="add" onClick={() => setCreating(true)}>
{t('partner_create')}
</AppButton>
) : undefined
@@ -245,10 +245,10 @@ export function PartnerCenterFormDialog({ center, onClose }: { center: PartnerCe
</Stack>
</DialogContent>
<DialogActions sx={{ px: 3, pb: 2 }}>
<AppButton variant="text" color="inherit" onClick={onClose} disabled={mutation.isPending} sx={{ m: 0 }}>
<AppButton variant="text" color="inherit" onClick={onClose} disabled={mutation.isPending}>
{t('cancel')}
</AppButton>
<AppButton variant="contained" color="primary" onClick={onSave} disabled={!valid || mutation.isPending} sx={{ m: 0 }}>
<AppButton variant="contained" color="primary" onClick={onSave} disabled={!valid || mutation.isPending}>
{mutation.isPending ? t('saving') : t('save')}
</AppButton>
</DialogActions>
@@ -54,7 +54,7 @@ export default function AdminPayoutBatchDetailPage() {
variant="text"
color="primary"
onClick={() => router.push(`/${locale}${ROUTES.ADMIN_PAYOUTS}`)}
sx={{ m: 0, alignSelf: 'flex-start' }}
sx={{ alignSelf: 'flex-start' }}
>
{t('back')}
</AppButton>
@@ -92,7 +92,7 @@ export default function AdminPayoutBatchDetailPage() {
<Chip
size="small"
label={t('payout_holiday_shift')}
sx={{ bgcolor: 'var(--bal-warning)', color: 'var(--bal-warning-contrast)', fontWeight: 600 }}
sx={{ bgcolor: 'var(--bal-warning)', color: 'var(--bal-warning-contrast)', fontWeight: 500 }}
/>
) : null}
</Stack>
@@ -226,7 +226,6 @@ const PayoutRowCard: FunctionComponent<{ row: AdminPayoutRow; batchId: number; c
color="error"
onClick={() => setRetryOpen(true)}
disabled={retry.isPending}
sx={{ m: 0 }}
>
{t('payout_retry')}
</AppButton>
@@ -251,7 +250,6 @@ const PayoutRowCard: FunctionComponent<{ row: AdminPayoutRow; batchId: number; c
color="primary"
onClick={onRecord}
disabled={reference.trim().length === 0 || record.isPending}
sx={{ m: 0 }}
>
{record.isPending ? t('saving') : t('save')}
</AppButton>
@@ -279,7 +277,7 @@ const MetaLine: FunctionComponent<{ label: string; children: ReactNode }> = ({ l
<Typography variant="body2" sx={{ color: 'text.secondary' }}>
{label}
</Typography>
<Box sx={{ fontWeight: 600, typography: 'body2' }}>{children}</Box>
<Box sx={{ fontWeight: 500, typography: 'body2' }}>{children}</Box>
</Stack>
);
@@ -288,7 +286,7 @@ const Field: FunctionComponent<{ label: string; children: ReactNode }> = ({ labe
<Typography variant="caption" sx={{ color: 'text.secondary' }}>
{label}
</Typography>
<Typography variant="body2" sx={{ fontWeight: 600 }}>
<Typography variant="body2" sx={{ fontWeight: 500 }}>
{children}
</Typography>
</Stack>
@@ -109,7 +109,7 @@ export default function AdminPayoutsPage() {
<Chip
size="small"
label={t('payout_holiday_shift')}
sx={{ bgcolor: 'var(--bal-warning)', color: 'var(--bal-warning-contrast)', fontWeight: 600 }}
sx={{ bgcolor: 'var(--bal-warning)', color: 'var(--bal-warning-contrast)', fontWeight: 500 }}
/>
) : null}
</Stack>
@@ -143,7 +143,7 @@ export default function AdminPayoutsPage() {
))}
</TextField>
{caps.canPayout ? (
<AppButton variant="contained" color="primary" onClick={() => setPreviewOpen(true)} sx={{ m: 0 }}>
<AppButton variant="contained" color="primary" onClick={() => setPreviewOpen(true)}>
{t('payout_preview')}
</AppButton>
) : null}
@@ -253,7 +253,6 @@ function PreviewBatchDialog({ canPayout, onClose }: { canPayout: boolean; onClos
color="primary"
onClick={onPreview}
disabled={!periodStart || !periodEnd || preview.isPending}
sx={{ m: 0 }}
>
{t('payout_preview')}
</AppButton>
@@ -272,7 +271,7 @@ function PreviewBatchDialog({ canPayout, onClose }: { canPayout: boolean; onClos
<Chip
size="small"
label={t('payout_holiday_shift')}
sx={{ bgcolor: 'var(--bal-warning)', color: 'var(--bal-warning-contrast)', fontWeight: 600 }}
sx={{ bgcolor: 'var(--bal-warning)', color: 'var(--bal-warning-contrast)', fontWeight: 500 }}
/>
) : null}
</Stack>
@@ -300,7 +299,7 @@ function PreviewBatchDialog({ canPayout, onClose }: { canPayout: boolean; onClos
<Chip
size="small"
label={t('payout_no_iban')}
sx={{ bgcolor: 'var(--bal-error)', color: 'var(--bal-error-contrast)', fontWeight: 600 }}
sx={{ bgcolor: 'var(--bal-error)', color: 'var(--bal-error-contrast)', fontWeight: 500 }}
/>
) : null}
</Stack>
@@ -346,7 +345,7 @@ function PreviewBatchDialog({ canPayout, onClose }: { canPayout: boolean; onClos
) : null}
</DialogContent>
<DialogActions sx={{ px: 3, pb: 2 }}>
<AppButton variant="text" color="inherit" onClick={onClose} disabled={run.isPending} sx={{ m: 0 }}>
<AppButton variant="text" color="inherit" onClick={onClose} disabled={run.isPending}>
{t('cancel')}
</AppButton>
{canPayout ? (
@@ -355,7 +354,6 @@ function PreviewBatchDialog({ canPayout, onClose }: { canPayout: boolean; onClos
color="primary"
onClick={() => setRunConfirmOpen(true)}
disabled={!result || run.isPending}
sx={{ m: 0 }}
>
{t('payout_run')}
</AppButton>
@@ -182,13 +182,13 @@ function ModerationCard({
{canModerate ? (
<Stack direction="row" sx={{ gap: 1, flexWrap: 'wrap' }}>
<AppButton variant="contained" color="primary" startIcon="publish" onClick={() => onAct('publish')} sx={{ m: 0 }}>
<AppButton variant="contained" color="primary" startIcon="publish" onClick={() => onAct('publish')}>
{t('mod_publish')}
</AppButton>
<AppButton variant="outlined" color="inherit" onClick={() => onAct('hide')} sx={{ m: 0 }}>
<AppButton variant="outlined" color="inherit" onClick={() => onAct('hide')}>
{t('mod_hide')}
</AppButton>
<AppButton variant="outlined" color="error" onClick={() => onAct('reject')} sx={{ m: 0 }}>
<AppButton variant="outlined" color="error" onClick={() => onAct('reject')}>
{t('mod_reject')}
</AppButton>
</Stack>
@@ -71,7 +71,7 @@ export default function AdminRolesPage() {
header: '',
align: 'right',
render: (g: RoleGrant) => (
<AppButton variant="text" color="error" startIcon="delete" onClick={() => setRevoking(g)} sx={{ m: 0 }}>
<AppButton variant="text" color="error" startIcon="delete" onClick={() => setRevoking(g)}>
{t('role_revoke')}
</AppButton>
),
@@ -100,7 +100,7 @@ export default function AdminRolesPage() {
subtitle={t('role_subtitle')}
actions={
caps.canManageRoles ? (
<AppButton variant="contained" color="primary" startIcon="add" onClick={() => setGranting(true)} sx={{ m: 0 }}>
<AppButton variant="contained" color="primary" startIcon="add" onClick={() => setGranting(true)}>
{t('role_grant')}
</AppButton>
) : undefined
@@ -193,10 +193,10 @@ function GrantRoleDialog({ onClose }: { onClose: () => void }) {
</Stack>
</DialogContent>
<DialogActions sx={{ px: 3, pb: 2 }}>
<AppButton variant="text" color="inherit" onClick={onClose} disabled={grant.isPending} sx={{ m: 0 }}>
<AppButton variant="text" color="inherit" onClick={onClose} disabled={grant.isPending}>
{t('cancel')}
</AppButton>
<AppButton variant="contained" color="primary" onClick={onGrant} disabled={!valid || grant.isPending} sx={{ m: 0 }}>
<AppButton variant="contained" color="primary" onClick={onGrant} disabled={!valid || grant.isPending}>
{grant.isPending ? t('saving') : t('confirm')}
</AppButton>
</DialogActions>
@@ -88,7 +88,7 @@ export default function AdminTicketThreadPage() {
variant="text"
color="primary"
onClick={() => router.push(`/${locale}${ROUTES.ADMIN_TICKETS}`)}
sx={{ m: 0, alignSelf: 'flex-start' }}
sx={{ alignSelf: 'flex-start' }}
>
{t('back')}
</AppButton>
@@ -133,7 +133,6 @@ export default function AdminTicketThreadPage() {
color="primary"
startIcon="refunds"
onClick={() => setRefundShown((v) => !v)}
sx={{ m: 0 }}
>
{t('refund_open')}
</AppButton>
@@ -184,7 +183,7 @@ export default function AdminTicketThreadPage() {
startIcon="send"
onClick={send}
disabled={post.isPending || body.trim().length === 0}
sx={{ m: 0, alignSelf: 'flex-start' }}
sx={{ alignSelf: 'flex-start' }}
>
{t('ticket_send')}
</AppButton>
@@ -124,10 +124,10 @@ export default function AdminTicketsPage() {
onChange={(e) => setDraft((d) => ({ ...d, referenceCode: e.target.value || undefined }))}
sx={{ minWidth: 220 }}
/>
<AppButton variant="contained" color="primary" onClick={apply} sx={{ m: 0 }}>
<AppButton variant="contained" color="primary" onClick={apply}>
{t('apply')}
</AppButton>
<AppButton variant="text" color="inherit" onClick={clear} sx={{ m: 0 }}>
<AppButton variant="text" color="inherit" onClick={clear}>
{t('clear')}
</AppButton>
</Stack>
@@ -104,7 +104,7 @@ export default function AdminVerificationCasePage() {
return (
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
<Stack sx={{ gap: 1 }}>
<AppButton variant="text" color="primary" onClick={backToQueue} sx={{ m: 0, alignSelf: 'flex-start' }}>
<AppButton variant="text" color="primary" onClick={backToQueue} sx={{ alignSelf: 'flex-start' }}>
{t('back')}
</AppButton>
<AdminPageHeader title={t('ver_case_title')} />
@@ -177,7 +177,6 @@ export default function AdminVerificationCasePage() {
color="primary"
onClick={() => setApproveOpen(true)}
disabled={!allPassed || !caps.canVerify}
sx={{ m: 0 }}
>
{t('ver_approve')}
</AppButton>
@@ -186,7 +185,6 @@ export default function AdminVerificationCasePage() {
color="error"
onClick={() => setRejectOpen(true)}
disabled={!caps.canVerify}
sx={{ m: 0 }}
>
{t('ver_reject_all')}
</AppButton>
@@ -274,7 +272,7 @@ function StepCard({
</Typography>
<StatusChip status={STEP_STATUS_KIND[step.status]} label={t(`step_${step.status}`)} />
{step.isAutomated ? (
<Chip size="small" label={t('ver_automated_badge')} sx={{ bgcolor: 'action.hover', fontWeight: 600 }} />
<Chip size="small" label={t('ver_automated_badge')} sx={{ bgcolor: 'action.hover', fontWeight: 500 }} />
) : null}
</Stack>
@@ -303,7 +301,6 @@ function StepCard({
color="primary"
onClick={() => (isCredentialStep ? setCredentialOpen(true) : onPass())}
disabled={decide.isPending}
sx={{ m: 0 }}
>
{t('ver_pass')}
</AppButton>
@@ -312,7 +309,6 @@ function StepCard({
color="error"
onClick={() => setRejectOpen(true)}
disabled={decide.isPending}
sx={{ m: 0 }}
>
{t('ver_reject')}
</AppButton>
@@ -434,7 +430,7 @@ function CredentialDialog({
</Stack>
</DialogContent>
<DialogActions sx={{ px: 3, pb: 2 }}>
<AppButton variant="text" color="inherit" onClick={onClose} disabled={decide.isPending} sx={{ m: 0 }}>
<AppButton variant="text" color="inherit" onClick={onClose} disabled={decide.isPending}>
{t('cancel')}
</AppButton>
<AppButton
@@ -442,7 +438,6 @@ function CredentialDialog({
color="primary"
onClick={onSubmit}
disabled={decide.isPending || expiryMissing}
sx={{ m: 0 }}
>
{decide.isPending ? t('saving') : t('save')}
</AppButton>
@@ -63,7 +63,7 @@ export default function AdminVerificationQueuePage() {
size="small"
icon={<AppIcon icon="warning" size={14} color="var(--bal-warning-contrast)" />}
label={t('ver_expiring_warning')}
sx={{ bgcolor: 'var(--bal-warning)', color: 'var(--bal-warning-contrast)', fontWeight: 600 }}
sx={{ bgcolor: 'var(--bal-warning)', color: 'var(--bal-warning-contrast)', fontWeight: 500 }}
/>
) : null}
</Stack>
@@ -92,7 +92,7 @@ export default function NurseBankPage() {
onSuccess: () => enqueueSnackbar(t('primary_set'), { variant: 'success' }),
})
}
sx={{ m: 0, alignSelf: 'flex-start' }}
sx={{ alignSelf: 'flex-start' }}
>
{t('make_primary')}
</AppButton>
@@ -147,7 +147,7 @@ export default function NurseBankPage() {
startIcon="bank"
onClick={submit}
disabled={addAccount.isPending}
sx={{ m: 0, alignSelf: 'flex-start' }}
sx={{ alignSelf: 'flex-start' }}
>
{addAccount.isPending ? t('submitting') : t('submit')}
</AppButton>
@@ -154,7 +154,7 @@ export default function NurseCoveragePage() {
key={area.id}
label={chipLabel(area)}
onDelete={() => setRemoveTarget(area)}
sx={{ bgcolor: 'var(--bal-primary-soft)', fontWeight: 600 }}
sx={{ bgcolor: 'var(--bal-primary-soft)', fontWeight: 500 }}
/>
))}
</Box>
@@ -237,7 +237,7 @@ export default function NurseCoveragePage() {
startIcon="add"
onClick={handleAdd}
disabled={addArea.isPending}
sx={{ m: 0, alignSelf: 'flex-start' }}
sx={{ alignSelf: 'flex-start' }}
>
{addArea.isPending ? t('adding') : t('add')}
</AppButton>
@@ -173,7 +173,7 @@ function ErrorPanel({ message, onRetry, retryLabel }: { message: string; onRetry
<Typography variant="body2" sx={{ color: 'text.secondary', mb: 1.5 }}>
{message}
</Typography>
<AppButton variant="outlined" color="primary" startIcon="refresh" onClick={onRetry} sx={{ m: 0 }}>
<AppButton variant="outlined" color="primary" startIcon="refresh" onClick={onRetry}>
{retryLabel}
</AppButton>
</Paper>
@@ -199,13 +199,13 @@ function Pager({
return (
<Stack direction="row" sx={{ gap: 1, alignItems: 'center', justifyContent: 'center' }}>
<AppButton variant="text" color="primary" onClick={onPrev} disabled={page <= 1} sx={{ m: 0 }}>
<AppButton variant="text" color="primary" onClick={onPrev} disabled={page <= 1}>
{t('page_prev')}
</AppButton>
<Typography variant="body2" sx={{ color: 'text.secondary' }}>
{t('page_indicator', { page: fmt(page), total: fmt(pageCount) })}
</Typography>
<AppButton variant="text" color="primary" onClick={onNext} disabled={page >= pageCount} sx={{ m: 0 }}>
<AppButton variant="text" color="primary" onClick={onNext} disabled={page >= pageCount}>
{t('page_next')}
</AppButton>
</Stack>
@@ -50,7 +50,7 @@ export default function NursePayoutDetailPage() {
color="primary"
startIcon="wallet"
onClick={() => router.push(`/${locale}${ROUTES.NURSE_EARNINGS_PAYOUTS}`)}
sx={{ m: 0, alignSelf: 'flex-start' }}
sx={{ alignSelf: 'flex-start' }}
>
{t('back_to_history')}
</AppButton>
@@ -193,7 +193,6 @@ export default function NursePayoutDetailPage() {
color="primary"
endIcon="visits"
onClick={() => router.push(`/${locale}${nurseBookingDetailPath(link.bookingId)}`)}
sx={{ m: 0 }}
>
{t('view_booking')}
</AppButton>
@@ -213,7 +212,7 @@ const MetaLine: FunctionComponent<{ label: string; children: ReactNode }> = ({ l
<Typography variant="body2" sx={{ color: 'text.secondary' }}>
{label}
</Typography>
<Typography variant="body2" sx={{ fontWeight: 600 }}>
<Typography variant="body2" sx={{ fontWeight: 500 }}>
{children}
</Typography>
</Stack>
@@ -35,7 +35,7 @@ export default function NursePayoutHistoryPage() {
color="primary"
startIcon="earnings"
onClick={() => router.push(`/${locale}${ROUTES.NURSE_EARNINGS}`)}
sx={{ m: 0, alignSelf: 'flex-start' }}
sx={{ alignSelf: 'flex-start' }}
>
{t('back_to_earnings')}
</AppButton>
@@ -58,7 +58,7 @@ export default function NursePayoutHistoryPage() {
<Typography variant="body2" sx={{ color: 'text.secondary', mb: 1.5 }}>
{t('history_error')}
</Typography>
<AppButton variant="outlined" color="primary" startIcon="refresh" onClick={() => history.refetch()} sx={{ m: 0 }}>
<AppButton variant="outlined" color="primary" startIcon="refresh" onClick={() => history.refetch()}>
{t('retry')}
</AppButton>
</Paper>
@@ -86,13 +86,13 @@ export default function NursePayoutHistoryPage() {
{pageCount > 1 ? (
<Stack direction="row" sx={{ gap: 1, alignItems: 'center', justifyContent: 'center' }}>
<AppButton variant="text" color="primary" onClick={() => setPage((p) => Math.max(1, p - 1))} disabled={page <= 1} sx={{ m: 0 }}>
<AppButton variant="text" color="primary" onClick={() => setPage((p) => Math.max(1, p - 1))} disabled={page <= 1}>
{t('page_prev')}
</AppButton>
<Typography variant="body2" sx={{ color: 'text.secondary' }}>
{t('page_indicator', { page: fmt(page), total: fmt(pageCount) })}
</Typography>
<AppButton variant="text" color="primary" onClick={() => setPage((p) => Math.min(pageCount, p + 1))} disabled={page >= pageCount} sx={{ m: 0 }}>
<AppButton variant="text" color="primary" onClick={() => setPage((p) => Math.min(pageCount, p + 1))} disabled={page >= pageCount}>
{t('page_next')}
</AppButton>
</Stack>
@@ -100,7 +100,7 @@ const NurseProfileForm: FunctionComponent<{ initial: NurseProfile | null }> = ({
color="primary"
variant="outlined"
to={`/${locale}${ROUTES.NURSE_VERIFICATION}`}
sx={{ m: 0, alignSelf: 'flex-start' }}
sx={{ alignSelf: 'flex-start' }}
>
{t('unverified_cta')}
</AppButton>
@@ -126,7 +126,7 @@ const NurseProfileForm: FunctionComponent<{ initial: NurseProfile | null }> = ({
startIcon="camera"
onClick={pickFile}
disabled={uploadAvatar.isPending}
sx={{ m: 0, mt: 0.5, alignSelf: 'flex-start' }}
sx={{ mt: 0.5, alignSelf: 'flex-start' }}
>
{uploadAvatar.isPending ? t('uploading') : t('upload')}
</AppButton>
@@ -166,7 +166,7 @@ const NurseProfileForm: FunctionComponent<{ initial: NurseProfile | null }> = ({
variant="contained"
onClick={handleSave}
disabled={upsert.isPending}
sx={{ m: 0, alignSelf: 'flex-start' }}
sx={{ alignSelf: 'flex-start' }}
>
{upsert.isPending ? tc('saving') : t('save')}
</AppButton>
@@ -66,7 +66,7 @@ export default function NurseRequestDetailPage() {
<Typography variant="body2" sx={{ color: 'text.secondary', mb: 2 }}>
{t('not_found_body')}
</Typography>
<AppButton variant="outlined" color="primary" onClick={() => router.push(`/${locale}${ROUTES.NURSE_REQUESTS}`)} sx={{ m: 0 }}>
<AppButton variant="outlined" color="primary" onClick={() => router.push(`/${locale}${ROUTES.NURSE_REQUESTS}`)}>
{t('inbox_title')}
</AppButton>
</Paper>
@@ -132,13 +132,13 @@ export default function NurseRequestDetailPage() {
<Paper elevation={0} sx={{ p: 2.5, border: '1px solid', borderColor: 'divider', borderRadius: 2 }}>
<Stack sx={{ gap: 1.5 }}>
<DetailRow caption={t('summary_patient')}>
<Typography variant="body2" sx={{ fontWeight: 600 }}>
<Typography variant="body2" sx={{ fontWeight: 500 }}>
{request.patientName}
</Typography>
</DetailRow>
<DetailRow caption={t('summary_service')}>
<Stack sx={{ gap: 0.25, alignItems: 'flex-end' }}>
<Typography variant="body2" sx={{ fontWeight: 600 }}>
<Typography variant="body2" sx={{ fontWeight: 500 }}>
{request.variantLabel}
</Typography>
{request.variantPrice ? (
@@ -147,12 +147,12 @@ export default function NurseRequestDetailPage() {
</Stack>
</DetailRow>
<DetailRow caption={t('location_label')}>
<Typography variant="body2" sx={{ fontWeight: 600, textAlign: 'end' }}>
<Typography variant="body2" sx={{ fontWeight: 500, textAlign: 'end' }}>
{location}
</Typography>
</DetailRow>
<DetailRow caption={t('summary_when')}>
<Typography variant="body2" sx={{ fontWeight: 600, textAlign: 'end' }}>
<Typography variant="body2" sx={{ fontWeight: 500, textAlign: 'end' }}>
{whenLabel}
</Typography>
</DetailRow>
@@ -161,7 +161,7 @@ export default function NurseRequestDetailPage() {
<Chip
size="small"
label={t(`gender_${request.requiredCaregiverGender}`)}
sx={{ bgcolor: 'var(--bal-primary-soft)', color: 'var(--bal-primary)', fontWeight: 600 }}
sx={{ bgcolor: 'var(--bal-primary-soft)', color: 'var(--bal-primary)', fontWeight: 500 }}
/>
</DetailRow>
) : null}
@@ -202,7 +202,7 @@ export default function NurseRequestDetailPage() {
startIcon="verified"
disabled={acceptRequest.isPending}
onClick={handleAccept}
sx={{ m: 0, flex: 1, py: 1.25 }}
sx={{ flex: 1, py: 1.25 }}
>
{acceptRequest.isPending ? t('accepting') : t('accept')}
</AppButton>
@@ -212,7 +212,7 @@ export default function NurseRequestDetailPage() {
startIcon="rejected"
disabled={acceptRequest.isPending}
onClick={() => setRejectOpen(true)}
sx={{ m: 0, flex: 1, py: 1.25 }}
sx={{ flex: 1, py: 1.25 }}
>
{t('reject')}
</AppButton>
@@ -84,7 +84,7 @@ function InboxCard({ item }: { item: BookingRequestListItem }) {
<Chip
size="small"
label={t('required_gender_chip', { gender: t(`gender_${item.requiredCaregiverGender}`) })}
sx={{ bgcolor: 'var(--bal-primary-soft)', color: 'var(--bal-primary)', fontWeight: 600 }}
sx={{ bgcolor: 'var(--bal-primary-soft)', color: 'var(--bal-primary)', fontWeight: 500 }}
/>
</Box>
) : null}
@@ -105,7 +105,7 @@ function InboxCard({ item }: { item: BookingRequestListItem }) {
color="primary"
endIcon="requests"
onClick={() => router.push(`/${locale}${ROUTES.NURSE_REQUESTS}/${item.id}`)}
sx={{ m: 0, alignSelf: 'flex-start' }}
sx={{ alignSelf: 'flex-start' }}
>
{t('open_detail')}
</AppButton>
@@ -81,7 +81,7 @@ const MyServicesList: FunctionComponent<MyServicesListProps> = ({ onAdd, onEdit
</Typography>
</Box>
{!isEmpty && !isLoading ? (
<AppButton color="primary" variant="contained" startIcon="add" onClick={onAdd} sx={{ m: 0, flexShrink: 0 }}>
<AppButton color="primary" variant="contained" startIcon="add" onClick={onAdd} sx={{ flexShrink: 0 }}>
{t('add')}
</AppButton>
) : null}
@@ -62,7 +62,6 @@ const PublishGate: FunctionComponent = () => {
startIcon="publish"
disabled={!approved}
onClick={() => enqueueSnackbar(t('publish_done'), { variant: 'success' })}
sx={{ m: 0 }}
>
{t('publish_cta')}
</AppButton>
@@ -71,7 +70,6 @@ const PublishGate: FunctionComponent = () => {
variant="outlined"
color="primary"
to={`/${locale}${ROUTES.NURSE_VERIFICATION}`}
sx={{ m: 0 }}
>
{t('publish_complete_verification')}
</AppButton>
@@ -260,7 +260,7 @@ const VariantBuilder: FunctionComponent<VariantBuilderProps> = ({ initial, onDon
borderInlineStartColor: 'var(--bal-warning)',
}}
>
<Typography variant="body2" sx={{ color: 'var(--bal-warning)', fontWeight: 600 }}>
<Typography variant="body2" sx={{ color: 'var(--bal-warning)', fontWeight: 500 }}>
{t('duplicate_warning')}
</Typography>
</Paper>
@@ -306,10 +306,10 @@ const VariantBuilder: FunctionComponent<VariantBuilderProps> = ({ initial, onDon
{priceStep}
<Stack direction="row" sx={{ gap: 1, justifyContent: 'flex-end' }}>
<AppButton variant="text" onClick={onCancel} disabled={submitting} sx={{ m: 0 }}>
<AppButton variant="text" onClick={onCancel} disabled={submitting}>
{tc('cancel')}
</AppButton>
<AppButton color="primary" variant="contained" onClick={submit} disabled={submitting} sx={{ m: 0 }}>
<AppButton color="primary" variant="contained" onClick={submit} disabled={submitting}>
{submitting ? tc('saving') : t('submit_save')}
</AppButton>
</Stack>
@@ -350,7 +350,7 @@ const VariantBuilder: FunctionComponent<VariantBuilderProps> = ({ initial, onDon
<Typography variant="body2" sx={{ color: 'text.secondary' }}>
{t('categories_error')}
</Typography>
<AppButton variant="outlined" color="primary" onClick={() => categoriesQuery.refetch()} sx={{ m: 0 }}>
<AppButton variant="outlined" color="primary" onClick={() => categoriesQuery.refetch()}>
{tc('retry')}
</AppButton>
</Stack>
@@ -411,7 +411,7 @@ const VariantBuilder: FunctionComponent<VariantBuilderProps> = ({ initial, onDon
: group.isRequired
? 'var(--bal-primary)'
: 'text.secondary',
fontWeight: 600,
fontWeight: 500,
}}
/>
</Stack>
@@ -435,7 +435,7 @@ const VariantBuilder: FunctionComponent<VariantBuilderProps> = ({ initial, onDon
)}
{optionsError && missingRequiredGroups.length > 0 ? (
<Typography variant="body2" sx={{ color: 'var(--bal-error)', fontWeight: 600 }}>
<Typography variant="body2" sx={{ color: 'var(--bal-error)', fontWeight: 500 }}>
{t('options_incomplete')}
</Typography>
) : null}
@@ -458,7 +458,6 @@ const VariantBuilder: FunctionComponent<VariantBuilderProps> = ({ initial, onDon
variant="text"
onClick={activeStep === 0 ? onCancel : () => setActiveStep((step) => step - 1)}
disabled={submitting}
sx={{ m: 0 }}
>
{activeStep === 0 ? tc('cancel') : tc('back')}
</AppButton>
@@ -469,16 +468,15 @@ const VariantBuilder: FunctionComponent<VariantBuilderProps> = ({ initial, onDon
variant="contained"
onClick={() => setActiveStep(1)}
disabled={categoryId == null}
sx={{ m: 0 }}
>
{t('next')}
</AppButton>
) : activeStep === 1 ? (
<AppButton color="primary" variant="contained" onClick={goNextFromOptions} sx={{ m: 0 }}>
<AppButton color="primary" variant="contained" onClick={goNextFromOptions}>
{t('next')}
</AppButton>
) : (
<AppButton color="primary" variant="contained" onClick={submit} disabled={submitting} sx={{ m: 0 }}>
<AppButton color="primary" variant="contained" onClick={submit} disabled={submitting}>
{submitting ? tc('saving') : t('submit_create')}
</AppButton>
)}
@@ -126,7 +126,7 @@ const StepRow: FunctionComponent<{ step: VerificationStep; highlighted: boolean
color="primary"
endIcon="edit"
to={`/${locale}${route}`}
sx={{ m: 0, alignSelf: 'flex-start' }}
sx={{ alignSelf: 'flex-start' }}
>
{step.status === 'failed' || step.status === 'expired' ? t('row_fix') : t('row_go')}
</AppButton>
@@ -96,7 +96,7 @@ export default function CredentialsSubmitPage() {
<Typography variant="body2" sx={{ color: 'text.secondary' }}>
{t('credentials_needs_start')}
</Typography>
<AppButton color="primary" variant="contained" to={`/${locale}${ROUTES.NURSE_VERIFICATION}`} sx={{ m: 0, alignSelf: 'flex-start' }}>
<AppButton color="primary" variant="contained" to={`/${locale}${ROUTES.NURSE_VERIFICATION}`} sx={{ alignSelf: 'flex-start' }}>
{t('back_to_checklist')}
</AppButton>
</Box>
@@ -168,7 +168,7 @@ export default function CredentialsSubmitPage() {
label={t.has(`specialty_${preset}`) ? t(`specialty_${preset}`) : preset}
onClick={() => toggleSpecialty(preset)}
sx={{
fontWeight: 600,
fontWeight: 500,
backgroundColor: selected ? 'var(--bal-primary)' : 'var(--bal-primary-soft)',
color: selected ? 'var(--bal-primary-contrast)' : 'var(--bal-primary)',
}}
@@ -182,7 +182,7 @@ export default function CredentialsSubmitPage() {
key={value}
label={value}
onDelete={() => toggleSpecialty(value)}
sx={{ fontWeight: 600, backgroundColor: 'var(--bal-primary)', color: 'var(--bal-primary-contrast)' }}
sx={{ fontWeight: 500, backgroundColor: 'var(--bal-primary)', color: 'var(--bal-primary-contrast)' }}
/>
))}
</Stack>
@@ -199,7 +199,7 @@ export default function CredentialsSubmitPage() {
}
}}
/>
<AppButton variant="outlined" color="primary" startIcon="add" onClick={addCustomSpecialty} sx={{ m: 0 }}>
<AppButton variant="outlined" color="primary" startIcon="add" onClick={addCustomSpecialty}>
{t('specialty_add')}
</AppButton>
</Stack>
@@ -253,11 +253,10 @@ export default function CredentialsSubmitPage() {
startIcon="license"
onClick={handleSubmit}
disabled={submitCredentials.isPending || !anyUploaded}
sx={{ m: 0 }}
>
{submitCredentials.isPending ? t('credentials_submitting') : t('credentials_submit')}
</AppButton>
<AppButton variant="text" color="primary" to={`/${locale}${ROUTES.NURSE_VERIFICATION}`} sx={{ m: 0 }}>
<AppButton variant="text" color="primary" to={`/${locale}${ROUTES.NURSE_VERIFICATION}`}>
{t('back_to_checklist')}
</AppButton>
</Stack>
@@ -143,11 +143,10 @@ export default function IdentitySubmitPage() {
startIcon="identity"
onClick={handleSubmit}
disabled={!canSubmit}
sx={{ m: 0 }}
>
{submitIdentity.isPending ? t('identity_submitting') : t('identity_submit')}
</AppButton>
<AppButton variant="text" color="primary" to={`/${locale}${ROUTES.NURSE_VERIFICATION}`} sx={{ m: 0 }}>
<AppButton variant="text" color="primary" to={`/${locale}${ROUTES.NURSE_VERIFICATION}`}>
{t('back_to_checklist')}
</AppButton>
</Stack>
@@ -65,7 +65,7 @@ export default function NurseVerificationPage() {
<AppAlert
severity="error"
action={
<AppButton variant="text" color="inherit" onClick={() => refetch()} sx={{ m: 0 }}>
<AppButton variant="text" color="inherit" onClick={() => refetch()}>
{t('retry')}
</AppButton>
}
@@ -170,7 +170,7 @@ function Approved({ onPublish }: { onPublish: () => void }) {
variant="contained"
startIcon="publish"
onClick={onPublish}
sx={{ m: 0, alignSelf: 'flex-start' }}
sx={{ alignSelf: 'flex-start' }}
>
{t('approved_cta')}
</AppButton>
@@ -200,7 +200,7 @@ function ContinueCta({
const route = nextActionRoute(status);
if (route == null) return null;
return (
<AppButton color="primary" variant="contained" onClick={onContinue} sx={{ m: 0, alignSelf: 'flex-start' }}>
<AppButton color="primary" variant="contained" onClick={onContinue} sx={{ alignSelf: 'flex-start' }}>
{index != null ? t('continue_step', { n: index }) : t('continue')}
</AppButton>
);
@@ -225,10 +225,10 @@ function MockAdminControls({ onApprove, onReject }: { onApprove: () => void; onR
{t('mock_admin_title')}
</Typography>
<Stack direction="row" sx={{ gap: 1, flexWrap: 'wrap' }}>
<AppButton variant="outlined" color="primary" onClick={onApprove} sx={{ m: 0 }}>
<AppButton variant="outlined" color="primary" onClick={onApprove}>
{t('mock_admin_approve')}
</AppButton>
<AppButton variant="outlined" color="error" onClick={onReject} sx={{ m: 0 }}>
<AppButton variant="outlined" color="error" onClick={onReject}>
{t('mock_admin_reject')}
</AppButton>
</Stack>
@@ -52,7 +52,7 @@ export default function UnderReviewPage() {
{isApproved ? t('review_approved_body') : t('review_body')}
</Typography>
{!isApproved ? (
<Typography variant="body2" sx={{ fontWeight: 600, color: 'var(--bal-warning)' }}>
<Typography variant="body2" sx={{ fontWeight: 500, color: 'var(--bal-warning)' }}>
{t('review_eta')}
</Typography>
) : null}
@@ -83,7 +83,7 @@ export default function UnderReviewPage() {
variant="contained"
startIcon="verification"
to={`/${locale}${ROUTES.NURSE_VERIFICATION}`}
sx={{ m: 0, alignSelf: 'flex-start' }}
sx={{ alignSelf: 'flex-start' }}
>
{t('review_view_status')}
</AppButton>
@@ -120,7 +120,7 @@ export default function NurseVisitNotesPanel({ bookingId }: { bookingId: number
startIcon="notes"
onClick={submit}
disabled={createNote.isPending || !note.trim()}
sx={{ m: 0, alignSelf: 'flex-end' }}
sx={{ alignSelf: 'flex-end' }}
>
{createNote.isPending ? tc('saving') : t('note_submit')}
</AppButton>
@@ -89,7 +89,7 @@ function TodayVisitCard({ item, evv }: { item: BookingSessionListItemDto; evv: R
color="primary"
endIcon="bookings"
onClick={() => router.push(`/${locale}${ROUTES.NURSE_VISITS}/${item.bookingId}`)}
sx={{ m: 0, alignSelf: 'flex-start' }}
sx={{ alignSelf: 'flex-start' }}
>
{t('view_booking')}
</AppButton>
@@ -117,11 +117,11 @@ function DetailRow({ label, value, ltr }: { label: string; value: string | null;
{label}
</Typography>
{ltr ? (
<Typography component="span" dir="ltr" variant="body2" sx={{ fontWeight: 600, fontFamily: 'monospace' }}>
<Typography component="span" dir="ltr" variant="body2" sx={{ fontWeight: 500, fontFamily: 'monospace' }}>
{value ?? '—'}
</Typography>
) : (
<Typography variant="body2" sx={{ fontWeight: 600 }}>
<Typography variant="body2" sx={{ fontWeight: 500 }}>
{value ?? '—'}
</Typography>
)}
@@ -65,7 +65,7 @@ export default function PartnerSettlementPage() {
<Typography variant="body2" sx={{ color: 'text.secondary' }}>
{t('settlement_iban')}
</Typography>
<Typography component="span" dir="ltr" variant="body2" sx={{ fontWeight: 600, fontFamily: 'monospace' }}>
<Typography component="span" dir="ltr" variant="body2" sx={{ fontWeight: 500, fontFamily: 'monospace' }}>
{c.settlementIbanMasked ?? '—'}
</Typography>
</Stack>
+19 -4
View File
@@ -1,6 +1,7 @@
import type { ReactNode } from 'react';
import type { Metadata, Viewport } from 'next';
import localFont from 'next/font/local';
import { Space_Grotesk } from 'next/font/google';
import { setRequestLocale, getMessages } from 'next-intl/server';
import { NextIntlClientProvider } from 'next-intl';
import { getThemeMode } from '@/lib/cookies/server';
@@ -47,8 +48,22 @@ const mikhak = localFont({
preload: false,
});
// EN brand font — Space Grotesk. Self-hosted by next/font/google at build
// time (no runtime Google Fonts request). Same discipline as Mikhak:
// preload: false + conditional className below so it is only fetched on `en`.
const spaceGrotesk = Space_Grotesk({
subsets: ['latin'],
weight: ['400', '500', '700'],
display: 'swap',
variable: '--font-space-grotesk',
preload: false,
});
export const viewport: Viewport = {
themeColor: BRAND.teal,
themeColor: [
{ media: '(prefers-color-scheme: light)', color: BRAND.teal },
{ media: '(prefers-color-scheme: dark)', color: BRAND.tealDeep },
],
};
export const metadata: Metadata = {
@@ -77,9 +92,9 @@ export default async function LocaleLayout({
const authState = await getServerAuthState();
const dir = getDirection(safeLocale);
// Only attach the Mikhak font variable on RTL (Persian) routes so the
// Persian typeface is not loaded for English pages.
const fontClassName = safeLocale === 'fa' ? mikhak.variable : undefined;
// Each locale's brand font variable is attached only on its own routes
// Mikhak never ships to /en, Space Grotesk never ships to /fa.
const fontClassName = safeLocale === 'fa' ? mikhak.variable : spaceGrotesk.variable;
return (
<html
Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

+20 -7
View File
@@ -4,14 +4,27 @@
margin: 0;
}
html,
body {
max-width: 100vw;
overflow-x: hidden;
max-height: 100vh;
}
/*
* AppLink is the only place link affordance (color, underline) is decided
* this reset keeps a bare <a> (e.g. inside rich text) from inheriting the
* browser's default blue/underline before AppLink's own styling applies.
*/
a {
color: inherit;
text-decoration: none;
}
::selection {
background-color: var(--bal-primary-soft);
color: var(--bal-text-primary);
}
/*
* Directional icons (back/chevron_start, ) are authored for LTR and mirror
* under RTL. AppIcon sets `data-icon-directional` for every name registered
* in AppIcon/config.ts's DIRECTIONAL_ICONS this is the only flip rule in
* the app; never hand-roll a per-component mirror.
*/
[dir='rtl'] [data-icon-directional] {
transform: scaleX(-1);
}
@@ -93,7 +93,7 @@ const BankStatusPanel: FunctionComponent<BankStatusPanelProps> = ({
{ibanLabel}
</Typography>
) : null}
<Typography sx={{ fontWeight: 600, letterSpacing: 1 }} dir="ltr">
<Typography sx={{ fontWeight: 500, letterSpacing: 1 }} dir="ltr">
{ibanMasked}
</Typography>
{bankName ? (
@@ -105,7 +105,7 @@ const BankStatusPanel: FunctionComponent<BankStatusPanelProps> = ({
) : null}
{status === 'mismatch' && onReenter && reenterLabel ? (
<AppButton color="primary" variant="outlined" startIcon="bank" onClick={onReenter} sx={{ m: 0, alignSelf: 'flex-start' }}>
<AppButton color="primary" variant="outlined" startIcon="bank" onClick={onReenter} sx={{ alignSelf: 'flex-start' }}>
{reenterLabel}
</AppButton>
) : null}
@@ -96,14 +96,14 @@ const BookingRequestSummaryCard: FunctionComponent<BookingRequestSummaryCardProp
<Stack sx={{ gap: 1.5 }}>
<SummaryRow caption={t('summary_patient')}>
<Typography variant="body2" sx={{ fontWeight: 600 }}>
<Typography variant="body2" sx={{ fontWeight: 500 }}>
{patientName}
</Typography>
</SummaryRow>
<SummaryRow caption={t('summary_service')}>
<Stack sx={{ gap: 0.25, alignItems: 'flex-end' }}>
<Typography variant="body2" sx={{ fontWeight: 600 }}>
<Typography variant="body2" sx={{ fontWeight: 500 }}>
{variantLabel}
</Typography>
{variantPrice ? (
@@ -113,13 +113,13 @@ const BookingRequestSummaryCard: FunctionComponent<BookingRequestSummaryCardProp
</SummaryRow>
<SummaryRow caption={t('summary_address')}>
<Typography variant="body2" sx={{ fontWeight: 600, textAlign: 'end' }}>
<Typography variant="body2" sx={{ fontWeight: 500, textAlign: 'end' }}>
{addressLabel}
</Typography>
</SummaryRow>
<SummaryRow caption={t('summary_when')}>
<Typography variant="body2" sx={{ fontWeight: 600, textAlign: 'end' }}>
<Typography variant="body2" sx={{ fontWeight: 500, textAlign: 'end' }}>
{whenLabel}
</Typography>
</SummaryRow>
@@ -52,7 +52,7 @@ const CancellationPolicyDisclosure: FunctionComponent<CancellationPolicyDisclosu
<Typography variant="body2" sx={{ color: 'text.secondary' }}>
{t(`lead_${preview.leadTimeLabel}`)}
</Typography>
<Typography variant="body2" sx={{ color: 'var(--bal-secondary)', fontWeight: 600 }}>
<Typography variant="body2" sx={{ color: 'var(--bal-secondary)', fontWeight: 500 }}>
{t('fee_percent', { percent: feePercent })}
</Typography>
</Stack>
@@ -69,7 +69,7 @@ const CountdownTimer: FunctionComponent<CountdownTimerProps> = ({
return (
<Stack direction="row" sx={{ gap: 0.75, alignItems: 'center', color: 'text.secondary' }}>
<AppIcon icon="pending" size={18} color="var(--bal-text-secondary)" />
<Typography variant="body2" sx={{ fontWeight: 600 }}>
<Typography variant="body2" sx={{ fontWeight: 500 }}>
{elapsedText}
</Typography>
</Stack>
@@ -92,7 +92,7 @@ const CountdownTimer: FunctionComponent<CountdownTimerProps> = ({
return (
<Stack sx={{ gap: 0.25, alignItems: 'center' }}>
{label ? (
<Typography variant="caption" sx={{ color: 'text.secondary', fontWeight: 600 }}>
<Typography variant="caption" sx={{ color: 'text.secondary', fontWeight: 500 }}>
{label}
</Typography>
) : null}
@@ -185,7 +185,7 @@ const DocumentUpload: FunctionComponent<DocumentUploadProps> = ({
startIcon="upload"
onClick={openPicker}
disabled={disabled}
sx={{ m: 0, alignSelf: 'flex-start' }}
sx={{ alignSelf: 'flex-start' }}
>
{t('upload_reupload')}
</AppButton>
@@ -194,7 +194,7 @@ const DocumentUpload: FunctionComponent<DocumentUploadProps> = ({
<Paper elevation={0} data-upload-state="uploading" sx={uploadedSx}>
<Stack direction="row" sx={{ gap: 1, alignItems: 'center' }}>
<AppIcon icon="upload" size={20} color="var(--bal-primary)" />
<Typography variant="body2" sx={{ fontWeight: 600, flexGrow: 1, wordBreak: 'break-all' }}>
<Typography variant="body2" sx={{ fontWeight: 500, flexGrow: 1, wordBreak: 'break-all' }}>
{fileName}
</Typography>
<Typography variant="caption" sx={{ color: 'text.secondary' }}>
@@ -220,7 +220,7 @@ const DocumentUpload: FunctionComponent<DocumentUploadProps> = ({
<AppIcon icon="document" size={28} color="var(--bal-primary)" />
)}
<Stack sx={{ gap: 0.25, flexGrow: 1, minWidth: 0 }}>
<Typography variant="body2" sx={{ fontWeight: 600, wordBreak: 'break-all' }}>
<Typography variant="body2" sx={{ fontWeight: 500, wordBreak: 'break-all' }}>
{uploadedName}
</Typography>
<Stack direction="row" sx={{ gap: 0.5, alignItems: 'center' }}>
@@ -230,7 +230,7 @@ const DocumentUpload: FunctionComponent<DocumentUploadProps> = ({
</Typography>
</Stack>
</Stack>
<AppButton variant="text" color="primary" onClick={openPicker} disabled={disabled} sx={{ m: 0 }}>
<AppButton variant="text" color="primary" onClick={openPicker} disabled={disabled}>
{t('upload_change')}
</AppButton>
</Stack>
@@ -253,7 +253,7 @@ const DocumentUpload: FunctionComponent<DocumentUploadProps> = ({
startIcon="refresh"
onClick={openPicker}
disabled={disabled}
sx={{ m: 0, alignSelf: 'flex-start' }}
sx={{ alignSelf: 'flex-start' }}
>
{t('upload_retry')}
</AppButton>
@@ -287,7 +287,7 @@ const DocumentUpload: FunctionComponent<DocumentUploadProps> = ({
}}
>
<AppIcon icon={capture ? 'camera' : 'upload'} size={28} color="var(--bal-primary)" />
<Typography variant="body2" sx={{ fontWeight: 600 }}>
<Typography variant="body2" sx={{ fontWeight: 700 }}>
{capture ? t('upload_capture') : t('upload_choose')}
</Typography>
<Typography variant="caption" sx={{ color: 'text.secondary' }}>
@@ -59,7 +59,7 @@ const EarningsBalanceHeader: FunctionComponent<EarningsBalanceHeaderProps> = ({
<Stack sx={{ gap: 0.75 }}>
<Stack direction="row" sx={{ gap: 1, alignItems: 'center' }}>
<AppIcon icon={isOwed ? 'warning' : 'wallet'} size={20} color={accent} />
<Typography variant="subtitle2" sx={{ color: 'text.secondary', fontWeight: 600 }}>
<Typography variant="subtitle2" sx={{ color: 'text.secondary', fontWeight: 500 }}>
{isOwed ? t('balance_owed_label') : t('balance_net_label')}
</Typography>
</Stack>
@@ -67,7 +67,7 @@ const EarningsBalanceHeader: FunctionComponent<EarningsBalanceHeaderProps> = ({
<Typography component="span" sx={{ fontWeight: 800, fontSize: '2rem', color: accent }}>
{formatIrrToToman(magnitude, locale)}
</Typography>
<Typography component="span" variant="subtitle1" sx={{ color: 'text.secondary', fontWeight: 600 }}>
<Typography component="span" variant="subtitle1" sx={{ color: 'text.secondary', fontWeight: 500 }}>
{tc('currency_toman')}
</Typography>
</Stack>
@@ -101,7 +101,7 @@ const EarningsBalanceHeader: FunctionComponent<EarningsBalanceHeaderProps> = ({
<Stack sx={{ gap: 0.75 }}>
<Stack direction="row" sx={{ gap: 0.75, alignItems: 'center' }}>
<AppIcon icon={bucket.icon} size={16} color={bucket.token} />
<Typography variant="caption" sx={{ color: 'text.secondary', fontWeight: 600 }}>
<Typography variant="caption" sx={{ color: 'text.secondary', fontWeight: 500 }}>
{t(`bucket_${bucket.key}`)}
</Typography>
</Stack>
@@ -105,7 +105,6 @@ const EarningsRow: FunctionComponent<EarningsRowProps> = ({ item, onViewBooking,
color="primary"
endIcon="visits"
onClick={() => onViewBooking(item.bookingId)}
sx={{ m: 0 }}
>
{t('view_booking')}
</AppButton>
@@ -178,7 +177,6 @@ const StateAffordance: FunctionComponent<{
color="primary"
endIcon="wallet"
onClick={() => onViewPayout(item.nursePayoutId as number)}
sx={{ m: 0 }}
>
{t('view_payout')}
</AppButton>
@@ -44,7 +44,7 @@ const GenderToggle: FunctionComponent<GenderToggleProps> = ({
'& .MuiToggleButton-root': {
flex: 1,
py: 1.25,
fontWeight: 600,
fontWeight: 700,
borderColor: error ? 'var(--bal-error)' : undefined,
},
}}
@@ -161,7 +161,7 @@ const PatientForm: FunctionComponent<PatientFormProps> = ({
<Stack direction="row" sx={{ gap: 1, justifyContent: 'flex-end' }}>
{onCancel ? (
<AppButton variant="text" onClick={onCancel} disabled={submitting} sx={{ m: 0 }}>
<AppButton variant="text" onClick={onCancel} disabled={submitting}>
{cancelLabel}
</AppButton>
) : null}
@@ -170,7 +170,6 @@ const PatientForm: FunctionComponent<PatientFormProps> = ({
variant="contained"
onClick={handleSubmit}
disabled={submitting}
sx={{ m: 0 }}
>
{submitLabel}
</AppButton>
@@ -43,7 +43,7 @@ const PatientHeader: FunctionComponent<PatientHeaderProps> = ({
{displayName}
</Typography>
{relationLabel ? (
<Chip size="small" label={relationLabel} sx={{ bgcolor: 'var(--bal-primary-soft)', fontWeight: 600 }} />
<Chip size="small" label={relationLabel} sx={{ bgcolor: 'var(--bal-primary-soft)', fontWeight: 500 }} />
) : null}
</Stack>
@@ -47,7 +47,7 @@ const PayoutHistoryRow: FunctionComponent<PayoutHistoryRowProps> = ({ item, onOp
sx={{ justifyContent: 'space-between', alignItems: 'flex-start', gap: 1.5, flexWrap: 'wrap' }}
>
<Stack sx={{ gap: 0.25, minWidth: 0 }}>
<Typography variant="caption" sx={{ color: 'text.secondary', fontWeight: 600 }}>
<Typography variant="caption" sx={{ color: 'text.secondary', fontWeight: 500 }}>
{t('payout_net_amount')}
</Typography>
<Typography variant="subtitle1" sx={{ fontWeight: 800 }}>
@@ -110,7 +110,7 @@ const PayoutHistoryRow: FunctionComponent<PayoutHistoryRowProps> = ({ item, onOp
) : null}
<Stack direction="row" sx={{ justifyContent: 'flex-end' }}>
<AppButton variant="text" color="primary" endIcon="wallet" onClick={() => onOpen(item.id)} sx={{ m: 0 }}>
<AppButton variant="text" color="primary" endIcon="wallet" onClick={() => onOpen(item.id)}>
{t('view_payout_detail')}
</AppButton>
</Stack>
@@ -124,7 +124,7 @@ const MetaLine: FunctionComponent<{ label: string; children: ReactNode }> = ({ l
<Typography variant="body2" sx={{ color: 'text.secondary' }}>
{label}
</Typography>
<Typography variant="body2" sx={{ fontWeight: 600 }}>
<Typography variant="body2" sx={{ fontWeight: 500 }}>
{children}
</Typography>
</Stack>
@@ -49,7 +49,7 @@ const PriceBreakdown: FunctionComponent<PriceBreakdownProps> = ({ rows, totalLab
<Typography variant="body2" sx={{ color: 'text.secondary' }}>
{row.label}
</Typography>
<Typography variant="body2" sx={{ fontWeight: 600 }}>
<Typography variant="body2" sx={{ fontWeight: 500 }}>
{formatIrrToToman(row.amountIrr, locale)}
</Typography>
</Stack>
@@ -47,12 +47,12 @@ const PriceDisplay: FunctionComponent<PriceDisplayProps> = ({
<Stack sx={{ gap: 0.25, alignItems: align === 'center' ? 'center' : 'flex-start' }}>
<Typography component="p" sx={{ fontWeight: 700 }}>
{amount} {tc('currency_toman')}{' '}
<Typography component="span" variant="body2" sx={{ color: 'text.secondary', fontWeight: 600 }}>
<Typography component="span" variant="body2" sx={{ color: 'text.secondary', fontWeight: 500 }}>
{unitLabel}
</Typography>
</Typography>
{hasEstimate ? (
<Typography variant="caption" sx={{ color: 'var(--bal-primary)', fontWeight: 600 }}>
<Typography variant="caption" sx={{ color: 'var(--bal-primary)', fontWeight: 500 }}>
{t('estimate_label')}: {total} {tc('currency_toman')} ·{' '}
{t('estimate_for', { count: countLabel, unit: t(`count_${priceUnit}`) })}
</Typography>
@@ -52,7 +52,7 @@ const RefundEtaBanner: FunctionComponent<RefundEtaBannerProps> = ({ channel, eta
</Typography>
<Typography variant="body2">{t(copy.bodyKey)}</Typography>
{channel === 'bnpl_revert' && (
<Typography variant="caption" sx={{ fontWeight: 600 }} data-testid="refund-eta-window">
<Typography variant="caption" sx={{ fontWeight: 500 }} data-testid="refund-eta-window">
{t('eta_business_days')}
{eta ? ` · ${t('eta_expected_label', { date: formatShamsiDate(eta, locale) })}` : ''}
</Typography>
@@ -62,7 +62,7 @@ const RefundStatusCard: FunctionComponent<RefundStatusCardProps> = ({ refund })
</Typography>
<Typography variant="body2">{t('failed_body')}</Typography>
{refund.externalRevertReference && (
<Typography variant="caption" sx={{ fontWeight: 600, direction: 'ltr' }}>
<Typography variant="caption" sx={{ fontWeight: 500, direction: 'ltr' }}>
{t('reference_label')}: {refund.externalRevertReference}
</Typography>
)}
@@ -97,7 +97,7 @@ const RefundStatusCard: FunctionComponent<RefundStatusCardProps> = ({ refund })
<Typography variant="body2" sx={{ color: 'text.secondary' }}>
{t('reference_label')}
</Typography>
<Typography variant="body2" sx={{ fontWeight: 600, direction: 'ltr' }}>
<Typography variant="body2" sx={{ fontWeight: 500, direction: 'ltr' }}>
{refund.externalRevertReference}
</Typography>
</Stack>
@@ -56,7 +56,7 @@ const RelationSelect: FunctionComponent<RelationSelectProps> = ({ options, value
}}
>
{option.icon ? <AppIcon icon={option.icon} size={26} color="var(--bal-primary)" /> : null}
<Typography variant="subtitle1" sx={{ fontWeight: 600 }}>
<Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
{option.label}
</Typography>
</Paper>
@@ -38,7 +38,7 @@ const ServicePriceRow: FunctionComponent<ServicePriceRowProps> = ({
borderColor: 'divider',
}}
>
<Typography variant="body1" sx={{ fontWeight: 600, flexGrow: 1 }}>
<Typography variant="body1" sx={{ fontWeight: 500, flexGrow: 1 }}>
{displayName}
</Typography>
<PriceDisplay price={priceIrr} priceUnit={priceUnit} sessionCount={sessionCount} align="start" />
@@ -41,7 +41,7 @@ const StatusChip: FunctionComponent<StatusChipProps> = ({ status, label, size =
size={size}
label={label}
icon={<AppIcon icon={style.icon} size={16} color={style.fg} />}
sx={{ backgroundColor: style.bg, color: style.fg, fontWeight: 600, ...sx }}
sx={{ backgroundColor: style.bg, color: style.fg, fontWeight: 500, ...sx }}
{...rest}
/>
);
@@ -76,7 +76,7 @@ const VariantCard: FunctionComponent<VariantCardProps> = ({ variant, onEdit, onT
) : null}
<Stack direction="row" sx={{ gap: 1, flexWrap: 'wrap' }}>
<AppButton variant="outlined" color="primary" startIcon="edit" onClick={onEdit} sx={{ m: 0 }}>
<AppButton variant="outlined" color="primary" startIcon="edit" onClick={onEdit}>
{t('edit')}
</AppButton>
<AppButton
@@ -84,7 +84,6 @@ const VariantCard: FunctionComponent<VariantCardProps> = ({ variant, onEdit, onT
color={active ? 'inherit' : 'primary'}
startIcon={active ? 'visibilityoff' : 'visibilityon'}
onClick={onToggleActive}
sx={{ m: 0 }}
>
{active ? t('deactivate') : t('activate')}
</AppButton>
@@ -23,7 +23,7 @@ const AdminErrorState: FunctionComponent<AdminErrorStateProps> = ({ message, ret
<Typography variant="body2" sx={{ color: 'text.secondary', mb: 1.5 }}>
{message}
</Typography>
<AppButton variant="outlined" color="primary" startIcon="refresh" onClick={onRetry} sx={{ m: 0 }}>
<AppButton variant="outlined" color="primary" startIcon="refresh" onClick={onRetry}>
{retryLabel}
</AppButton>
</Paper>
+2 -2
View File
@@ -32,13 +32,13 @@ const AdminPager: FunctionComponent<AdminPagerProps> = ({
if (pageCount <= 1) return null;
return (
<Stack direction="row" sx={{ gap: 1, alignItems: 'center', justifyContent: 'center', mt: 1 }}>
<AppButton variant="text" color="primary" onClick={onPrev} disabled={page <= 1} sx={{ m: 0 }}>
<AppButton variant="text" color="primary" onClick={onPrev} disabled={page <= 1}>
{prevLabel}
</AppButton>
<Typography variant="body2" sx={{ color: 'text.secondary' }}>
{indicator}
</Typography>
<AppButton variant="text" color="primary" onClick={onNext} disabled={page >= pageCount} sx={{ m: 0 }}>
<AppButton variant="text" color="primary" onClick={onNext} disabled={page >= pageCount}>
{nextLabel}
</AppButton>
</Stack>
+1 -1
View File
@@ -69,7 +69,7 @@ const AuditLogRow: FunctionComponent<AuditLogRowProps> = ({ entry }) => {
<TableBody>
{fields.map(([field, delta]) => (
<TableRow key={field}>
<TableCell sx={{ fontWeight: 600 }}>{field}</TableCell>
<TableCell sx={{ fontWeight: 500 }}>{field}</TableCell>
<TableCell sx={{ color: 'text.secondary' }}>{displayValue(delta.old)}</TableCell>
<TableCell>{displayValue(delta.new)}</TableCell>
</TableRow>
+2 -2
View File
@@ -47,11 +47,11 @@ const ConfigRow: FunctionComponent<ConfigRowProps> = ({ config, canEdit = false,
</Box>
<Stack direction="row" sx={{ gap: 1, flexWrap: 'wrap' }}>
<AppButton variant="text" color="primary" startIcon="history" onClick={() => onHistory?.(config)} sx={{ m: 0 }}>
<AppButton variant="text" color="primary" startIcon="history" onClick={() => onHistory?.(config)}>
{t('cfg_history')}
</AppButton>
{canEdit ? (
<AppButton variant="outlined" color="primary" startIcon="edit" onClick={() => onEdit?.(config)} sx={{ m: 0 }}>
<AppButton variant="outlined" color="primary" startIcon="edit" onClick={() => onEdit?.(config)}>
{t('cfg_edit')}
</AppButton>
) : null}
@@ -93,7 +93,7 @@ const ConfirmDialog: FunctionComponent<ConfirmDialogProps> = ({
) : null}
</DialogContent>
<DialogActions sx={{ px: 3, pb: 2 }}>
<AppButton variant="text" color="inherit" onClick={close} disabled={loading} sx={{ m: 0 }}>
<AppButton variant="text" color="inherit" onClick={close} disabled={loading}>
{cancelLabel}
</AppButton>
<AppButton
@@ -102,7 +102,6 @@ const ConfirmDialog: FunctionComponent<ConfirmDialogProps> = ({
onClick={confirm}
disabled={confirmDisabled}
startIcon={loading ? <CircularProgress size={16} color="inherit" /> : undefined}
sx={{ m: 0 }}
>
{confirmLabel}
</AppButton>
@@ -38,7 +38,7 @@ const DocumentViewer: FunctionComponent<DocumentViewerProps> = ({ document }) =>
>
<Stack direction="row" sx={{ gap: 1, alignItems: 'center', mb: 1 }}>
<AppIcon icon="document" size={18} color="var(--bal-text-secondary)" />
<Typography variant="body2" sx={{ fontWeight: 600, flexGrow: 1, wordBreak: 'break-all' }}>
<Typography variant="body2" sx={{ fontWeight: 500, flexGrow: 1, wordBreak: 'break-all' }}>
{t('doc_file_meta', { name: document.originalFileName ?? `#${document.id}`, size: formatSize(document.fileSizeBytes) })}
</Typography>
<AppButton
@@ -47,7 +47,7 @@ const DocumentViewer: FunctionComponent<DocumentViewerProps> = ({ document }) =>
startIcon="refresh"
onClick={() => signed.refetch()}
disabled={signed.isFetching}
sx={{ m: 0, minWidth: 0 }}
sx={{ minWidth: 0 }}
>
{t('doc_reload')}
</AppButton>
@@ -60,7 +60,7 @@ const DocumentViewer: FunctionComponent<DocumentViewerProps> = ({ document }) =>
<Typography variant="body2" sx={{ color: 'var(--bal-error)' }}>
{t('doc_error')}
</Typography>
<AppButton variant="outlined" color="primary" startIcon="refresh" onClick={() => signed.refetch()} sx={{ m: 0 }}>
<AppButton variant="outlined" color="primary" startIcon="refresh" onClick={() => signed.refetch()}>
{t('doc_reload')}
</AppButton>
</Stack>
@@ -74,7 +74,7 @@ const DocumentViewer: FunctionComponent<DocumentViewerProps> = ({ document }) =>
sx={{ maxWidth: '100%', maxHeight: 320, borderRadius: 1, display: 'block' }}
/>
) : (
<AppButton variant="outlined" color="primary" endIcon="external" href={signed.data.url} openInNewTab sx={{ m: 0 }}>
<AppButton variant="outlined" color="primary" endIcon="external" href={signed.data.url} openInNewTab>
{t('doc_open_new')}
</AppButton>
)
@@ -74,11 +74,11 @@ const PartnerSettlementRow: FunctionComponent<PartnerSettlementRowProps> = ({ in
/>
{invoice.pdfUrl ? (
downloadError ? (
<AppButton variant="outlined" color="error" startIcon="refresh" onClick={() => onRetryDownload?.(invoice)} sx={{ m: 0 }}>
<AppButton variant="outlined" color="error" startIcon="refresh" onClick={() => onRetryDownload?.(invoice)}>
{t('invoice_pdf_error')}
</AppButton>
) : (
<AppButton variant="outlined" color="primary" startIcon="download" onClick={() => onDownloadPdf?.(invoice)} sx={{ m: 0 }}>
<AppButton variant="outlined" color="primary" startIcon="download" onClick={() => onDownloadPdf?.(invoice)}>
{t('invoice_download')}
</AppButton>
)
+3 -3
View File
@@ -160,7 +160,7 @@ const RefundPanel: FunctionComponent<RefundPanelProps> = ({ bookingId, ticketId,
minRows={2}
/>
<AppButton variant="contained" color="primary" startIcon="refunds" onClick={() => setConfirmOpen(true)} disabled={busy} sx={{ m: 0, alignSelf: 'flex-start' }}>
<AppButton variant="contained" color="primary" startIcon="refunds" onClick={() => setConfirmOpen(true)} disabled={busy} sx={{ alignSelf: 'flex-start' }}>
{t('refund_initiate')}
</AppButton>
</>
@@ -170,10 +170,10 @@ const RefundPanel: FunctionComponent<RefundPanelProps> = ({ bookingId, ticketId,
{t('refund_provider_failed')}
</Alert>
<Stack direction="row" sx={{ gap: 1 }}>
<AppButton variant="contained" color="primary" startIcon="refresh" onClick={doRetry} disabled={busy} sx={{ m: 0 }}>
<AppButton variant="contained" color="primary" startIcon="refresh" onClick={doRetry} disabled={busy}>
{t('refund_approve')}
</AppButton>
<AppButton variant="outlined" color="error" onClick={() => setRejectOpen(true)} disabled={busy} sx={{ m: 0 }}>
<AppButton variant="outlined" color="error" onClick={() => setRejectOpen(true)} disabled={busy}>
{t('refund_reject')}
</AppButton>
</Stack>
@@ -85,11 +85,11 @@ const SupportAlertCard: FunctionComponent<SupportAlertCardProps> = ({ alert, can
{canAct && alert.status !== 'resolved' ? (
<Stack direction="row" sx={{ gap: 1, mt: 1.5, flexWrap: 'wrap' }}>
{alert.status === 'open' ? (
<AppButton variant="outlined" color="primary" startIcon="assign" onClick={() => onAssignSelf?.(alert)} sx={{ m: 0 }}>
<AppButton variant="outlined" color="primary" startIcon="assign" onClick={() => onAssignSelf?.(alert)}>
{t('alert_assign_me')}
</AppButton>
) : null}
<AppButton variant="contained" color="primary" startIcon="verified" onClick={() => onResolve?.(alert)} sx={{ m: 0 }}>
<AppButton variant="contained" color="primary" startIcon="verified" onClick={() => onResolve?.(alert)}>
{t('alert_resolve')}
</AppButton>
</Stack>
+3 -2
View File
@@ -2,7 +2,7 @@
import { FunctionComponent } from 'react';
import { Stack, Typography } from '@mui/material';
import { useTranslations } from 'next-intl';
import AppIcon from '../common/AppIcon';
import LogoLockup from '../common/AppIcon/icons/LogoLockup';
interface BrandMarkProps {
/** Show the brand tagline under the wordmark. */
@@ -18,7 +18,8 @@ const BrandMark: FunctionComponent<BrandMarkProps> = ({ withTagline }) => {
const t = useTranslations('common');
return (
<Stack sx={{ alignItems: 'center', gap: 1 }}>
<AppIcon icon="logo" size={56} color="var(--bal-primary)" />
{/* Decorative — the wordmark below already announces "Balinyaar" to AT. */}
<LogoLockup size={56} aria-hidden="true" />
<Typography variant="h5" component="p" sx={{ fontWeight: 700, color: 'primary.main' }}>
{t('brand')}
</Typography>
-1
View File
@@ -129,7 +129,6 @@ const OtpStep: FunctionComponent<OtpStepProps> = ({
fullWidth
disabled={code.length !== OTP_CODE_LENGTH || verifyOtp.isPending || locked}
startIcon={verifyOtp.isPending ? <CircularProgress size={18} color="inherit" /> : undefined}
sx={{ m: 0 }}
>
{isNurse ? t('otp_verify_nurse') : t('otp_verify_customer')}
</AppButton>
-1
View File
@@ -85,7 +85,6 @@ const PhoneStep: FunctionComponent<PhoneStepProps> = ({ intendedRole, onSwitchRo
fullWidth
disabled={requestOtp.isPending}
startIcon={requestOtp.isPending ? <CircularProgress size={18} color="inherit" /> : undefined}
sx={{ m: 0 }}
>
{t('request_code')}
</AppButton>
+1 -2
View File
@@ -84,7 +84,7 @@ const SelectRole: FunctionComponent<SelectRoleProps> = ({ initialRole }) => {
>
<AppIcon icon={icon} size={28} color="var(--bal-primary)" />
<Stack sx={{ gap: 0.25 }}>
<Typography variant="subtitle1" sx={{ fontWeight: 600 }}>
<Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
{t(`role_${role}`)}
</Typography>
<Typography variant="body2" sx={{ color: 'text.secondary' }}>
@@ -103,7 +103,6 @@ const SelectRole: FunctionComponent<SelectRoleProps> = ({ initialRole }) => {
onClick={confirm}
disabled={selectRole.isPending}
startIcon={selectRole.isPending ? <CircularProgress size={18} color="inherit" /> : undefined}
sx={{ m: 0 }}
>
{t('continue')}
</AppButton>
@@ -133,7 +133,7 @@ function HeaderFact({ label, value }: { label: string; value: string }) {
<Typography variant="caption" sx={{ color: 'text.secondary' }}>
{label}
</Typography>
<Typography variant="body2" sx={{ fontWeight: 600 }}>
<Typography variant="body2" sx={{ fontWeight: 500 }}>
{value}
</Typography>
</Stack>
@@ -45,7 +45,7 @@ const BookingStatusTimeline: FunctionComponent<BookingStatusTimelineProps> = ({
sx={{ gap: 1, alignItems: 'center', px: 1.5, py: 1.25, borderRadius: 2, bgcolor: 'var(--bal-primary-soft)' }}
>
<AppIcon icon="rejected" size={20} color="var(--bal-text-secondary)" />
<Typography variant="body2" sx={{ fontWeight: 600, color: 'text.secondary' }}>
<Typography variant="body2" sx={{ fontWeight: 500, color: 'text.secondary' }}>
{t('bstatus_cancelled')}
</Typography>
</Stack>
@@ -89,7 +89,7 @@ const SessionCard: FunctionComponent<SessionCardProps> = ({
</Typography>
) : null}
<Stack direction="row" sx={{ justifyContent: 'space-between', alignItems: 'center', gap: 1 }}>
<Typography variant="subtitle2" sx={{ fontWeight: title ? 600 : 700, color: title ? 'text.secondary' : 'text.primary' }}>
<Typography variant="subtitle2" sx={{ fontWeight: title ? 500 : 700, color: title ? 'text.secondary' : 'text.primary' }}>
{t('session_index', { n: sessionIndex })}
</Typography>
<StatusChip status={SESSION_STATUS_KIND[status]} label={t(`sstatus_${status}`)} />
@@ -109,7 +109,7 @@ const SessionCard: FunctionComponent<SessionCardProps> = ({
) : null}
{showPayout && visitPayoutAmount ? (
<Typography variant="caption" sx={{ color: 'var(--bal-secondary-dark)', fontWeight: 600 }}>
<Typography variant="caption" sx={{ color: 'var(--bal-secondary-dark)', fontWeight: 500 }}>
{t('session_payout')}: {formatIrrToToman(visitPayoutAmount, locale)} {tc('currency_toman')}
</Typography>
) : null}
@@ -121,7 +121,7 @@ const SessionCard: FunctionComponent<SessionCardProps> = ({
startIcon={acquiringLocation ? 'gps' : 'check_in'}
disabled={busy}
onClick={onCheckIn}
sx={{ m: 0, alignSelf: 'flex-start', py: 1 }}
sx={{ alignSelf: 'flex-start', py: 1 }}
>
{acquiringLocation ? t('evv_acquiring_location') : evvPending ? t('evv_checking_in') : t('evv_check_in')}
</AppButton>
@@ -134,7 +134,7 @@ const SessionCard: FunctionComponent<SessionCardProps> = ({
startIcon={acquiringLocation ? 'gps' : 'check_out'}
disabled={busy}
onClick={onCheckOut}
sx={{ m: 0, alignSelf: 'flex-start', py: 1 }}
sx={{ alignSelf: 'flex-start', py: 1 }}
>
{acquiringLocation ? t('evv_acquiring_location') : evvPending ? t('evv_checking_out') : t('evv_check_out')}
</AppButton>
@@ -60,14 +60,17 @@ describe('<AppButton/> component', () => {
expect(button).toHaveAttribute('type', 'button'); // not "submit" or "input" by default
});
it('has .margin style by default', () => {
let text = 'button with default margin';
it('does not force a default margin, and passes a custom sx through untouched', () => {
const testId = randomText(8);
render(<ComponentToTest data-testid={testId}>{text}</ComponentToTest>);
render(
<ComponentToTest data-testid={testId} sx={{ marginInlineStart: 2 }}>
button with custom sx
</ComponentToTest>
);
const button = screen.getByTestId(testId);
expect(button).toBeDefined();
// MUI v9 + cssVariables: spacing is emitted as CSS vars (not resolved in jsdom).
// Verify the sx margin is applied via class rather than inline style.
// Regression guard for the removed starter DEFAULT_SX_VALUES={ margin: 1 }:
// AppButton must not silently drop or merge over a caller-provided sx.
expect(button).toHaveClass('MuiButton-root');
});
@@ -127,7 +130,7 @@ describe('<AppButton/> component', () => {
let text = 'button with start icon';
render(<ComponentToTest text={text} startIcon="default" />);
let button = screen.getByText(text);
let icon = within(button).getByTestId('MoreHorizIcon'); //Note: this is valid only when "default" icon is <MoreHorizIcon />
let icon = within(button).getByTestId('MoreHorizRoundedIcon'); //Note: this is valid only when "default" icon is <MoreHorizRoundedIcon />
expect(icon).toBeDefined();
let span = icon.closest('span');
expect(span).toHaveClass('MuiButton-startIcon');
@@ -137,7 +140,7 @@ describe('<AppButton/> component', () => {
let text = 'button with end icon as string';
render(<ComponentToTest text={text} endIcon="default" />);
let button = screen.getByText(text);
let icon = within(button).getByTestId('MoreHorizIcon'); //Note: this is valid only when "default" icon is <MoreHorizIcon />
let icon = within(button).getByTestId('MoreHorizRoundedIcon'); //Note: this is valid only when "default" icon is <MoreHorizRoundedIcon />
expect(icon).toBeDefined();
let span = icon.closest('span');
expect(span).toHaveClass('MuiButton-endIcon');

Some files were not shown because too many files have changed in this diff Show More