feat(appointments): close the three remaining design gaps
1. شارژ کیف پول is now functional end-to-end. New owner-gated
POST /api/v1/patient/{uuid}/wallet/charge creates a manual credit
WalletTransaction (computed balance_after); the patient detail's wallet tab
gains a top-up modal (PriceInput + description) and supports ?tab= deep
links. The deposit sections of the create drawer, the edit page and the
replace modal link to it via WalletChargeLink (record resolved by mobile).
2. جایگزینی نوبت now matches appointments-replace.pdf: patient search-or-new,
بخش/سرویس/پرسنل selects prefilled from the appointment, deposit toggle +
amount + charge link, read-only original date/time, status pick and notes —
all through the general PATCH.
3. The confirmed-appointments table is paginated (20/page, client-side so the
schedule view and doctor-tab derivation keep the whole day), resetting on
date/doctor/filter changes. The page-local STATUS_META also adopts the
design labels plus following_up/salon for the schedule cards.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
hamed
@@ -1,4 +1,4 @@
|
||||
import React, { useRef, useState } from 'react';
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import {
|
||||
PlusIcon, ChevronRightIcon, ChevronLeftIcon, CalendarDaysIcon,
|
||||
@@ -11,6 +11,7 @@ import type { Appointment } from '../types';
|
||||
import { formatDate, toGregorianDate } from '../lib/utils';
|
||||
import { useAuthStore } from '../stores/authStore';
|
||||
import AppointmentStatusDropdown from '../components/ui/AppointmentStatusDropdown';
|
||||
import Pagination from '../components/ui/Pagination';
|
||||
import AppointmentActionsMenu from '../components/AppointmentActions';
|
||||
import NewAppointmentDrawer from '../components/NewAppointmentDrawer';
|
||||
import AppointmentFiltersModal, { applyAppointmentFilters, EMPTY_FILTERS } from '../components/AppointmentFiltersModal';
|
||||
@@ -25,14 +26,17 @@ const EMPTY_ARR: Appointment[] = [];
|
||||
// Status config
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
// Labels follow the Figma نوبتها design; keep in sync with AppointmentStatusDropdown.
|
||||
const STATUS_META: Record<string, { label: string; color: string; bg: string }> = {
|
||||
pending: { label: 'رزرو شده', color: 'var(--info)', bg: 'var(--info-bg)' },
|
||||
confirmed: { label: 'تأیید شده', color: 'var(--success)', bg: 'var(--success-bg)' },
|
||||
completed: { label: 'تکمیل شده', color: 'var(--success)', bg: 'var(--success-bg)' },
|
||||
cancelled_by_doctor: { label: 'لغو پزشک', color: 'var(--danger)', bg: 'var(--danger-bg)' },
|
||||
cancelled_by_user: { label: 'لغو بیمار', color: 'var(--danger)', bg: 'var(--danger-bg)' },
|
||||
no_show: { label: 'غیبت', color: 'var(--text-3)', bg: 'var(--surface-2)' },
|
||||
expired: { label: 'منقضی', color: 'var(--text-3)', bg: 'var(--surface-2)' },
|
||||
pending: { label: 'ثبت شده', color: 'var(--info)', bg: 'var(--info-bg)' },
|
||||
confirmed: { label: 'قطعی شده', color: 'var(--success)', bg: 'var(--success-bg)' },
|
||||
following_up: { label: 'در حال پیگیری', color: 'var(--warning)', bg: 'var(--warning-bg)' },
|
||||
salon: { label: 'سالن', color: 'var(--violet)', bg: 'var(--violet-bg)' },
|
||||
completed: { label: 'ویزیت شده', color: 'var(--success)', bg: 'var(--success-bg)' },
|
||||
cancelled_by_doctor: { label: 'لغو شده', color: 'var(--danger)', bg: 'var(--danger-bg)' },
|
||||
cancelled_by_user: { label: 'لغو توسط بیمار', color: 'var(--danger)', bg: 'var(--danger-bg)' },
|
||||
no_show: { label: 'غیبت', color: 'var(--text-3)', bg: 'var(--surface-2)' },
|
||||
expired: { label: 'منقضی', color: 'var(--text-3)', bg: 'var(--surface-2)' },
|
||||
};
|
||||
|
||||
function statusMeta(s: string) {
|
||||
@@ -574,6 +578,13 @@ export default function AppointmentsPage() {
|
||||
const filteredAppointments = applyAppointmentFilters(appointments, filters);
|
||||
const filtersActive = filters !== EMPTY_FILTERS && JSON.stringify(filters) !== JSON.stringify(EMPTY_FILTERS);
|
||||
|
||||
// Table pagination is client-side: the day's full list stays loaded because
|
||||
// the schedule view and doctor-tab derivation need every row.
|
||||
const TABLE_PAGE_SIZE = 20;
|
||||
const [tablePage, setTablePage] = useState(1);
|
||||
useEffect(() => { setTablePage(1); }, [selectedDate, selectedDoctorUuid, filters]);
|
||||
const pagedAppointments = filteredAppointments.slice((tablePage - 1) * TABLE_PAGE_SIZE, tablePage * TABLE_PAGE_SIZE);
|
||||
|
||||
// ── Clinic: load doctors from clinic profile (not derived from appointments)
|
||||
const clinicDoctorsQuery = useQuery<ApiResponse<{ data: { uuid: string; name: string }[] }>>({
|
||||
queryKey: ['clinic-doctors', dbUuid],
|
||||
@@ -782,12 +793,19 @@ export default function AppointmentsPage() {
|
||||
{/* Content */}
|
||||
<div style={{ padding: 16 }}>
|
||||
{viewMode === 'table' ? (
|
||||
<TableView
|
||||
items={filteredAppointments}
|
||||
loading={apptQuery.isLoading}
|
||||
queryKey={apptQueryKey}
|
||||
showDoctor={showDoctorCol}
|
||||
/>
|
||||
<>
|
||||
<TableView
|
||||
items={pagedAppointments}
|
||||
loading={apptQuery.isLoading}
|
||||
queryKey={apptQueryKey}
|
||||
showDoctor={showDoctorCol}
|
||||
/>
|
||||
{filteredAppointments.length > TABLE_PAGE_SIZE && (
|
||||
<div style={{ marginTop: 14 }}>
|
||||
<Pagination page={tablePage} total={filteredAppointments.length} limit={TABLE_PAGE_SIZE} onPageChange={setTablePage} />
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{bookingHint && !isRepresentation && (
|
||||
|
||||
Reference in New Issue
Block a user