admin/dyolink
0
0
Fork 0
Code Issues 24 Pull Requests 1 Actions Packages Projects 1 Releases Wiki Activity

improvement: all clinic side ui components related to treatment types updated based on the new real world data.

Browse Source
This commit is contained in:
Admin
2026-07-07 13:13:04 +03:30
parent 667b08ed0c
commit ed7e7b1d8f
20 changed files with 321 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
backend/prisma/catalog-seed-data.ts
View File

@@ -7,7 +7,17 @@ export type CatalogTranslationSeed = {
label: string;
};
export const TREATMENT_TYPES = [
export type TreatmentTypeSeed = {
code: string;
labDependent: boolean;
sortOrder: number;
/** Selectable when booking an appointment. Defaults to true. */
availableInAppointments?: boolean;
/** Selectable as a treatment plan detail. Defaults to true. */
availableInTreatment?: boolean;
};
export const TREATMENT_TYPES: readonly TreatmentTypeSeed[] = [
{ code: 'restoration', labDependent: false, sortOrder: 1 },
{ code: 'specialized_restoration', labDependent: false, sortOrder: 2 },
{ code: 'radiography', labDependent: false, sortOrder: 3 },
@@ -19,11 +29,23 @@ export const TREATMENT_TYPES = [
{ code: 'perio', labDependent: false, sortOrder: 9 },
{ code: 'pediatrics', labDependent: false, sortOrder: 10 },
{ code: 'extraction', labDependent: false, sortOrder: 11 },
{ code: 'clinic_visit', labDependent: false, sortOrder: 12 },
// Appointment-only: not real treatment plan details.
{
code: 'clinic_visit',
labDependent: false,
sortOrder: 12,
availableInTreatment: false,
},
{
code: 'continue_treatment',
labDependent: false,
sortOrder: 13,
availableInTreatment: false,
},
] as const;
/** Legacy codes kept for historical rows; hidden from catalog. */
export const LEGACY_TREATMENT_TYPES = [
export const LEGACY_TREATMENT_TYPES: readonly TreatmentTypeSeed[] = [
{ code: 'consultation', labDependent: false, sortOrder: 99 },
{ code: 'filling', labDependent: false, sortOrder: 100 },
{ code: 'visit', labDependent: false, sortOrder: 101 },
@@ -207,7 +229,8 @@ const TREATMENT_LABELS: Record<string, Record<string, string>> = {
perio: { en: 'Perio', fa: 'پریو', nl: 'Paro' },
pediatrics: { en: 'Pediatrics', fa: 'اطفال', nl: 'Kinderen' },
extraction: { en: 'Extraction', fa: 'کشیدن', nl: 'Extractie' },
clinic_visit: { en: 'Clinic Visit', fa: 'درمانگاه', nl: 'Kliniekbezoek' },
clinic_visit: { en: 'Clinic Visit', fa: 'ویزیت درمانگاه', nl: 'Kliniekbezoek' },
continue_treatment: { en: 'Continue Treatment', fa: 'ادامه درمان', nl: 'Behandeling Voortzetten' },
consultation: { en: 'Consultation', fa: 'مشاوره', nl: 'Consult' },
filling: { en: 'Filling', fa: 'پر کردن', nl: 'Vulling' },
visit: { en: 'Visit', fa: 'ویزیت', nl: 'Bezoek' },

3
backend/prisma/migrations/20260707120000_treatment_type_context/migration.sql Normal file
View File

@@ -0,0 +1,3 @@
-- Treatment type context flags: control which selection contexts each type appears in.
ALTER TABLE "treatment_types" ADD COLUMN "availableInAppointments" BOOLEAN NOT NULL DEFAULT true;
ALTER TABLE "treatment_types" ADD COLUMN "availableInTreatment" BOOLEAN NOT NULL DEFAULT true;

46
backend/prisma/reset-treatment-data.ts
View File

@@ -1,6 +1,9 @@
/**
* Dev-only: truncate treatment and lab case data (preserves catalog tables).
* Usage: npx ts-node prisma/reset-treatment-data.ts
*
* Safe to run before or after `prisma migrate deploy`: tables that do not yet
* exist are skipped instead of throwing.
*/
import { PrismaClient } from '@prisma/client';
import { config } from 'dotenv';
@@ -16,17 +19,44 @@ if (process.env.NODE_ENV === 'production') {
const prisma = new PrismaClient();
// FK-safe order: children before parents.
const TABLES_IN_ORDER = [
'lab_case_tasks',
'lab_case_sends',
'lab_case_tooth_prosthesis',
'lab_case_details',
'lab_cases',
'treatment_detail_attachments',
'treatment_details',
'treatments',
];
async function tableExists(table: string): Promise<boolean> {
const rows = await prisma.$queryRawUnsafe<Array<{ exists: string | null }>>(
`SELECT to_regclass('public."${table}"')::text AS exists`,
);
return rows[0]?.exists != null;
}
async function main() {
console.log('Truncating treatment and lab case data...');
await prisma.$executeRawUnsafe('TRUNCATE TABLE "lab_case_tasks" CASCADE');
await prisma.$executeRawUnsafe('TRUNCATE TABLE "lab_case_sends" CASCADE');
await prisma.$executeRawUnsafe('TRUNCATE TABLE "lab_case_tooth_prosthesis" CASCADE');
await prisma.$executeRawUnsafe('TRUNCATE TABLE "lab_case_details" CASCADE');
await prisma.$executeRawUnsafe('TRUNCATE TABLE "lab_cases" CASCADE');
await prisma.$executeRawUnsafe('TRUNCATE TABLE "treatment_detail_attachments" CASCADE');
await prisma.$executeRawUnsafe('TRUNCATE TABLE "treatment_details" CASCADE');
await prisma.$executeRawUnsafe('TRUNCATE TABLE "treatments" CASCADE');
const existing: string[] = [];
for (const table of TABLES_IN_ORDER) {
if (await tableExists(table)) {
existing.push(table);
} else {
console.log(` - skipping "${table}" (does not exist yet)`);
}
}
if (existing.length === 0) {
console.log('No target tables exist yet. Run `prisma migrate deploy` first.');
return;
}
const targets = existing.map((t) => `"${t}"`).join(', ');
await prisma.$executeRawUnsafe(`TRUNCATE TABLE ${targets} CASCADE`);
console.log('Done.');
}

12
backend/prisma/schema.prisma
View File

@@ -224,11 +224,13 @@ model LabCaseSend {
}
model TreatmentType {
id String @id @default(uuid())
code String @unique
labDependent Boolean @default(false)
sortOrder Int @default(0)
isActive Boolean @default(true)
id String @id @default(uuid())
code String @unique
labDependent Boolean @default(false)
sortOrder Int @default(0)
isActive Boolean @default(true)
availableInAppointments Boolean @default(true)
availableInTreatment Boolean @default(true)
@@map("treatment_types")
}

6
backend/prisma/seed.ts
View File

@@ -138,12 +138,16 @@ async function main() {
for (const type of [...TREATMENT_TYPES, ...LEGACY_TREATMENT_TYPES]) {
const isActive = TREATMENT_TYPES.some((t) => t.code === type.code);
const availableInAppointments = type.availableInAppointments ?? true;
const availableInTreatment = type.availableInTreatment ?? true;
await prisma.treatmentType.upsert({
where: { code: type.code },
update: {
labDependent: type.labDependent,
sortOrder: type.sortOrder,
isActive,
availableInAppointments,
availableInTreatment,
},
create: {
id: randomUUID(),
@@ -151,6 +155,8 @@ async function main() {
labDependent: type.labDependent,
sortOrder: type.sortOrder,
isActive,
availableInAppointments,
availableInTreatment,
},
});
}

29
backend/src/modules/treatment-catalog/treatment-catalog.controller.ts
View File

@@ -1,7 +1,10 @@
import { Controller, Get, Req, UseGuards } from '@nestjs/common';
import { ApiBearerAuth, ApiOperation, ApiTags } from '@nestjs/swagger';
import { Controller, Get, Query, Req, UseGuards } from '@nestjs/common';
import { ApiBearerAuth, ApiOperation, ApiQuery, ApiTags } from '@nestjs/swagger';
import { JwtAuthGuard } from '../auth/guards/jwt-auth.guard';
import { TreatmentCatalogService } from './treatment-catalog.service';
import {
TreatmentCatalogContext,
TreatmentCatalogService,
} from './treatment-catalog.service';
@ApiTags('treatment-catalog')
@ApiBearerAuth('JWT-auth')
@@ -12,8 +15,24 @@ export class TreatmentCatalogController {
@Get()
@ApiOperation({ summary: 'List active treatment types with localized labels' })
async list(@Req() req: { user?: { language?: string | null } }) {
const data = await this.treatmentCatalogService.list(req.user?.language);
@ApiQuery({
name: 'context',
required: false,
enum: ['appointment', 'treatment'],
description: 'Filter to types selectable in the given context',
})
async list(
@Req() req: { user?: { language?: string | null } },
@Query('context') context?: string,
) {
const normalizedContext =
context === 'appointment' || context === 'treatment'
? (context as TreatmentCatalogContext)
: undefined;
const data = await this.treatmentCatalogService.list(
req.user?.language,
normalizedContext,
);
return { success: true, data };
}
}

30
backend/src/modules/treatment-catalog/treatment-catalog.service.ts
View File

@@ -7,12 +7,16 @@ import {
normalizeCatalogLocale,
} from '../catalog/catalog-label.service';
export type TreatmentCatalogContext = 'appointment' | 'treatment';
export type TreatmentTypeCatalogEntry = {
id: string;
code: string;
labDependent: boolean;
sortOrder: number;
label: string;
availableInAppointments: boolean;
availableInTreatment: boolean;
};
@Injectable()
@@ -33,7 +37,14 @@ export class TreatmentCatalogService implements OnModuleInit {
const rows = await this.prisma.treatmentType.findMany({
where: { isActive: true },
orderBy: [{ sortOrder: 'asc' }, { code: 'asc' }],
select: { id: true, code: true, labDependent: true, sortOrder: true },
select: {
id: true,
code: true,
labDependent: true,
sortOrder: true,
availableInAppointments: true,
availableInTreatment: true,
},
});
this.byCode = new Map(
@@ -45,17 +56,26 @@ export class TreatmentCatalogService implements OnModuleInit {
labDependent: row.labDependent,
sortOrder: row.sortOrder,
label: row.code,
availableInAppointments: row.availableInAppointments,
availableInTreatment: row.availableInTreatment,
},
]),
);
this.loaded = true;
}
async list(localeInput?: string | null): Promise<TreatmentTypeCatalogEntry[]> {
async list(
localeInput?: string | null,
context?: TreatmentCatalogContext | null,
): Promise<TreatmentTypeCatalogEntry[]> {
await this.ensureLabels(localeInput);
return [...this.byCode.values()].sort(
(a, b) => a.sortOrder - b.sortOrder || a.code.localeCompare(b.code),
);
return [...this.byCode.values()]
.filter((entry) => {
if (context === 'appointment') return entry.availableInAppointments;
if (context === 'treatment') return entry.availableInTreatment;
return true;
})
.sort((a, b) => a.sortOrder - b.sortOrder || a.code.localeCompare(b.code));
}
private async ensureLabels(localeInput?: string | null) {

14
frontend/src/app/[locale]/(dashboard)/appointments/page.tsx
View File

@@ -4,6 +4,8 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { useTranslations } from 'next-intl';
import { appointmentsApi } from '@/lib/api/appointments';
import { patientsApi } from '@/lib/api/patients';
import { treatmentCatalogApi } from '@/lib/api/treatment-catalog';
import type { TreatmentCatalogEntry } from '@/types/treatment-catalog';
import { useAuth } from '@/lib/hooks/useAuth';
import { canEditAppointments, hasPermission } from '@/components/shared/permissions';
import type { AppointmentColumnProvider, AppointmentRecord } from '@/types/appointment';
@@ -36,6 +38,7 @@ export default function AppointmentsPage() {
const [providers, setProviders] = useState<AppointmentColumnProvider[]>([]);
const [appointments, setAppointments] = useState<AppointmentRecord[]>([]);
const [treatmentCatalog, setTreatmentCatalog] = useState<TreatmentCatalogEntry[]>([]);
const [loadingSchedule, setLoadingSchedule] = useState(false);
const toast = useToast();
@@ -114,6 +117,13 @@ export default function AppointmentsPage() {
void loadSchedule();
}, [loadSchedule]);
useEffect(() => {
void treatmentCatalogApi
.list('appointment')
.then((r) => setTreatmentCatalog(r.data))
.catch(() => {});
}, []);
useEffect(() => {
const t = setTimeout(() => {
void loadPatientsSearch(search);
@@ -301,7 +311,7 @@ export default function AppointmentsPage() {
</div>
<div className="xl:col-span-2 space-y-4">
<AppointmentScheduleLegend />
<AppointmentScheduleLegend treatmentCatalog={treatmentCatalog} />
<div className="flex flex-col sm:flex-row sm:items-end gap-4 sm:justify-between">
<ScheduleDayPicker
@@ -317,6 +327,7 @@ export default function AppointmentsPage() {
day={scheduleDate}
providers={providers}
appointments={appointments}
treatmentCatalog={treatmentCatalog}
canBook={canManageAppointments && !isViewingPastDay}
onSlotClick={(startMinute, uid, name) => handleSlotClick(startMinute, uid, name)}
onAppointmentClick={(apt) => handleAppointmentClick(apt)}
@@ -332,6 +343,7 @@ export default function AppointmentsPage() {
providerUserId={bookingProviderId}
providerName={bookingProviderName}
initialStartMinute={bookingStartMinute}
treatmentCatalog={treatmentCatalog}
editingAppointment={activeEditingAppointment}
onClose={() => {
setBookingOpen(false);

42
frontend/src/components/ui/appointments/AppointmentBookingModal.tsx
View File

@@ -6,8 +6,11 @@ import { Button } from '@/components/ui/shared/Button';
import { DialogCloseButton } from '@/components/ui/shared/DialogCloseButton';
import { Dropdown } from '@/components/ui/shared/Dropdown';
import type { AppointmentPurpose, AppointmentRecord } from '@/types/appointment';
import { APPOINTMENT_PURPOSES } from '@/types/appointment';
import { getPurposeLabel } from '@/components/ui/appointments/appointmentPurposeStyles';
import type { TreatmentCatalogEntry } from '@/types/treatment-catalog';
import {
DROPDOWN_OPTION_BG,
treatmentTypeColor,
} from '@/components/ui/treatment/treatmentTypeDisplay';
import type { Patient } from '@/types/patient';
import {
combineLocalDateAndTime,
@@ -31,6 +34,7 @@ interface AppointmentBookingModalProps {
endAt: string;
purpose: AppointmentPurpose;
}) => Promise<void>;
treatmentCatalog: TreatmentCatalogEntry[];
editingAppointment?: AppointmentRecord | null;
loading?: boolean;
canDelete?: boolean;
@@ -38,14 +42,6 @@ interface AppointmentBookingModalProps {
deleting?: boolean;
}
const PURPOSE_OPTION_COLORS: Record<AppointmentPurpose, string> = {
consultation: '#ddd6fe',
filling: '#fed7aa',
endo: '#fecaca',
visit: '#bae6fd',
hygiene: '#d9f99d',
};
export function AppointmentBookingModal({
open,
scheduleDate,
@@ -55,6 +51,7 @@ export function AppointmentBookingModal({
initialStartMinute,
onClose,
onSubmit,
treatmentCatalog,
editingAppointment = null,
loading = false,
canDelete = false,
@@ -65,11 +62,14 @@ export function AppointmentBookingModal({
const tCommon = useTranslations('common');
const tPatients = useTranslations('patients');
const defaultPurpose = treatmentCatalog[0]?.code ?? '';
const [startTime, setStartTime] = useState('09:00');
const [endTime, setEndTime] = useState('10:00');
const [purpose, setPurpose] = useState<AppointmentPurpose>('consultation');
const [purpose, setPurpose] = useState<AppointmentPurpose>(defaultPurpose);
const [error, setError] = useState('');
const purposeTextColor = PURPOSE_OPTION_COLORS[purpose];
const purposeIndex = treatmentCatalog.findIndex((e) => e.code === purpose);
const purposeTextColor = treatmentTypeColor(purpose, purposeIndex < 0 ? 0 : purposeIndex);
useEffect(() => {
if (!open) {
@@ -80,7 +80,7 @@ export function AppointmentBookingModal({
const end = new Date(editingAppointment.endAt);
setStartTime(formatTimeForInput(start));
setEndTime(formatTimeForInput(end));
setPurpose((editingAppointment.purpose as AppointmentPurpose) ?? 'consultation');
setPurpose(editingAppointment.purpose || defaultPurpose);
} else {
const start = new Date(
scheduleDate.getFullYear(),
@@ -103,10 +103,10 @@ export function AppointmentBookingModal({
);
setStartTime(formatTimeForInput(start));
setEndTime(formatTimeForInput(end));
setPurpose('consultation');
setPurpose(defaultPurpose);
}
setError('');
}, [open, scheduleDate, initialStartMinute, editingAppointment]);
}, [open, scheduleDate, initialStartMinute, editingAppointment, defaultPurpose]);
if (!open || !providerUserId) {
return null;
@@ -224,16 +224,16 @@ export function AppointmentBookingModal({
<Dropdown
label={t('purposeLabel')}
value={purpose}
onChange={(e) => setPurpose(e.target.value as AppointmentPurpose)}
onChange={(e) => setPurpose(e.target.value)}
style={{ color: purposeTextColor }}
>
{APPOINTMENT_PURPOSES.map((purposeOption) => (
{treatmentCatalog.map((entry, index) => (
<option
key={purposeOption}
value={purposeOption}
style={{ color: PURPOSE_OPTION_COLORS[purposeOption], backgroundColor: '#14253d' }}
key={entry.code}
value={entry.code}
style={{ color: treatmentTypeColor(entry.code, index), backgroundColor: DROPDOWN_OPTION_BG }}
>
{getPurposeLabel(purposeOption, t)}
{entry.label}
</option>
))}
</Dropdown>

53
frontend/src/components/ui/appointments/AppointmentOverlapPopover.tsx
View File

@@ -4,13 +4,15 @@ import { useEffect, useRef } from 'react';
import { useTranslations } from 'next-intl';
import { DialogCloseButton } from '@/components/ui/shared/DialogCloseButton';
import {
getPurposeLabel,
purposeStyle,
purposeBannerStyle,
purposeLabel,
} from '@/components/ui/appointments/appointmentPurposeStyles';
import type { AppointmentPurpose, AppointmentRecord } from '@/types/appointment';
import type { AppointmentRecord } from '@/types/appointment';
import type { TreatmentCatalogEntry } from '@/types/treatment-catalog';
type AppointmentOverlapPopoverProps = {
appointments: AppointmentRecord[];
treatmentCatalog: TreatmentCatalogEntry[];
anchorRect: DOMRect;
onSelect: (appointment: AppointmentRecord) => void;
onClose: () => void;
@@ -25,6 +27,7 @@ function formatTimeRange(apt: AppointmentRecord): string {
export function AppointmentOverlapPopover({
appointments,
treatmentCatalog,
anchorRect,
onSelect,
onClose,
@@ -82,29 +85,27 @@ export function AppointmentOverlapPopover({
<DialogCloseButton onClick={onClose} />
</div>
<ul className="space-y-1.5 max-h-[min(16rem,50vh)] overflow-y-auto">
{sorted.map((apt) => {
const purpose = apt.purpose as AppointmentPurpose;
return (
<li key={apt.id}>
<button
type="button"
onClick={() => {
onSelect(apt);
onClose();
}}
className={`w-full rounded-[var(--radius-sm)] border px-2.5 py-2 text-left transition-colors hover:brightness-110 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/35 ${purposeStyle(apt.purpose)}`}
>
<p className="text-xs font-medium truncate">
{apt.patient.firstName} {apt.patient.lastName}
</p>
<p className="text-[11px] opacity-90 tabular-nums">{formatTimeRange(apt)}</p>
<p className="text-[10px] opacity-80 truncate">
{getPurposeLabel(purpose, t) ?? apt.purpose}
</p>
</button>
</li>
);
})}
{sorted.map((apt) => (
<li key={apt.id}>
<button
type="button"
onClick={() => {
onSelect(apt);
onClose();
}}
className="w-full rounded-[var(--radius-sm)] border px-2.5 py-2 text-left transition-colors hover:brightness-110 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/35"
style={purposeBannerStyle(apt.purpose, treatmentCatalog)}
>
<p className="text-xs font-medium truncate">
{apt.patient.firstName} {apt.patient.lastName}
</p>
<p className="text-[11px] opacity-90 tabular-nums">{formatTimeRange(apt)}</p>
<p className="text-[10px] opacity-80 truncate">
{purposeLabel(apt.purpose, treatmentCatalog)}
</p>
</button>
</li>
))}
</ul>
</div>
</div>

9
frontend/src/components/ui/appointments/AppointmentScheduleGrid.tsx
View File

@@ -18,10 +18,11 @@ import {
findOverlapCluster,
lanePositionStyles,
} from '@/components/appointments/appointmentOverlapLayout';
import { purposeStyle } from '@/components/ui/appointments/appointmentPurposeStyles';
import { purposeBannerStyle } from '@/components/ui/appointments/appointmentPurposeStyles';
import { AppointmentOverlapPopover } from '@/components/ui/appointments/AppointmentOverlapPopover';
import { formatMobileForDisplay } from '@/lib/phone';
import { startOfLocalDay } from '@/components/appointments/appointmentTime';
import type { TreatmentCatalogEntry } from '@/types/treatment-catalog';
const HOUR_PX = 80;
const SLOT_PX = (HOUR_PX * SCHEDULE_SLOT_MINUTES) / 60;
@@ -78,6 +79,7 @@ interface AppointmentScheduleGridProps {
day: Date;
providers: AppointmentColumnProvider[];
appointments: AppointmentRecord[];
treatmentCatalog: TreatmentCatalogEntry[];
canBook: boolean;
onSlotClick: (startMinute: number, providerUserId: string, providerName: string) => void;
onAppointmentClick?: (appointment: AppointmentRecord) => void;
@@ -88,6 +90,7 @@ export function AppointmentScheduleGrid({
day,
providers,
appointments,
treatmentCatalog,
canBook,
onSlotClick,
onAppointmentClick,
@@ -320,7 +323,7 @@ export function AppointmentScheduleGrid({
e.currentTarget,
)
}
className={`absolute min-h-0 overflow-hidden rounded-[var(--radius-sm)] border pointer-events-auto z-10 flex text-left ${purposeStyle(apt.purpose)} focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/35 ${
className={`absolute min-h-0 overflow-hidden rounded-[var(--radius-sm)] border pointer-events-auto z-10 flex text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/35 ${
outsideHours ? 'opacity-70 ring-1 ring-amber-500/60' : ''
} ${
isUnderOneHour
@@ -332,6 +335,7 @@ export function AppointmentScheduleGrid({
height: pos.height,
left: lanePos.left,
width: lanePos.width,
...purposeBannerStyle(apt.purpose, treatmentCatalog),
}}
title={bannerTitle}
>
@@ -366,6 +370,7 @@ export function AppointmentScheduleGrid({
{overlapPopover && (
<AppointmentOverlapPopover
appointments={overlapPopover.appointments}
treatmentCatalog={treatmentCatalog}
anchorRect={overlapPopover.anchorRect}
onSelect={(apt) => {
const provider = providers.find((p) => p.userId === apt.providerUserId);

28
frontend/src/components/ui/appointments/AppointmentScheduleLegend.tsx
View File

@@ -1,25 +1,33 @@
'use client';
import { useTranslations } from 'next-intl';
import {
APPOINTMENT_PURPOSE_LEGEND_SWATCH,
getPurposeLabel,
} from '@/components/ui/appointments/appointmentPurposeStyles';
import { APPOINTMENT_PURPOSES } from '@/types/appointment';
import { purposeSwatchStyle } from '@/components/ui/appointments/appointmentPurposeStyles';
import type { TreatmentCatalogEntry } from '@/types/treatment-catalog';
export function AppointmentScheduleLegend() {
interface AppointmentScheduleLegendProps {
treatmentCatalog: TreatmentCatalogEntry[];
}
export function AppointmentScheduleLegend({
treatmentCatalog,
}: AppointmentScheduleLegendProps) {
const t = useTranslations('appointments');
if (treatmentCatalog.length === 0) {
return null;
}
return (
<div className="surface-panel px-4 py-3">
<p className="text-xs font-medium text-text-secondary mb-2">{t('legend')}</p>
<div className="flex flex-wrap gap-3">
{APPOINTMENT_PURPOSES.map((p) => (
<div key={p} className="flex items-center gap-1.5 text-xs text-text-secondary">
{treatmentCatalog.map((entry) => (
<div key={entry.code} className="flex items-center gap-1.5 text-xs text-text-secondary">
<span
className={`inline-block h-3 w-3 rounded-sm border ${APPOINTMENT_PURPOSE_LEGEND_SWATCH[p]}`}
className="inline-block h-3 w-3 rounded-sm border"
style={purposeSwatchStyle(entry.code, treatmentCatalog)}
/>
{getPurposeLabel(p, t)}
{entry.label}
</div>
))}
</div>

71
frontend/src/components/ui/appointments/appointmentPurposeStyles.ts
View File

@@ -1,46 +1,39 @@
import type { AppointmentPurpose } from '@/types/appointment';
import type { CSSProperties } from 'react';
import type { TreatmentCatalogEntry } from '@/types/treatment-catalog';
import {
treatmentTypeBannerStyle,
treatmentTypeLabelFromCatalog,
treatmentTypeSwatchStyle,
} from '@/components/ui/treatment/treatmentTypeDisplay';
export const APPOINTMENT_PURPOSE_LABEL_KEYS = {
consultation: 'purposeConsultation',
filling: 'purposeFilling',
endo: 'purposeEndo',
visit: 'purposeVisit',
hygiene: 'purposeHygiene',
} as const satisfies Record<AppointmentPurpose, string>;
/**
* Appointment purposes are treatment-type codes. Labels and colors now come from
* the shared treatment catalog + palette so the appointment and treatment
* features stay in sync. These helpers adapt the shared palette to the appointment
* components' call sites.
*/
export type AppointmentPurposeLabelKey =
(typeof APPOINTMENT_PURPOSE_LABEL_KEYS)[AppointmentPurpose];
export type AppointmentPurposeTranslate = (key: AppointmentPurposeLabelKey) => string;
export function getPurposeLabel(
purpose: AppointmentPurpose,
t: AppointmentPurposeTranslate,
export function purposeLabel(
purpose: string,
catalog: TreatmentCatalogEntry[],
): string {
const key = APPOINTMENT_PURPOSE_LABEL_KEYS[purpose];
return key ? t(key) : purpose;
return treatmentTypeLabelFromCatalog(purpose, catalog);
}
/** Background + border for blocks / legend (matches reference palette). */
export const APPOINTMENT_PURPOSE_STYLES: Record<AppointmentPurpose, string> = {
consultation:
'bg-purpose-consultation-bg border-purpose-consultation-border text-purpose-consultation-fg',
filling: 'bg-purpose-filling-bg border-purpose-filling-border text-purpose-filling-fg',
endo: 'bg-purpose-endo-bg border-purpose-endo-border text-purpose-endo-fg',
visit: 'bg-purpose-visit-bg border-purpose-visit-border text-purpose-visit-fg',
hygiene: 'bg-purpose-hygiene-bg border-purpose-hygiene-border text-purpose-hygiene-fg',
};
export function purposeStyle(purpose: string): string {
const p = purpose as AppointmentPurpose;
return APPOINTMENT_PURPOSE_STYLES[p] ?? 'bg-surface-elevated border-border text-text-secondary';
/** Inline style for a colored appointment banner/block. */
export function purposeBannerStyle(
purpose: string,
catalog: TreatmentCatalogEntry[],
): CSSProperties {
const index = catalog.findIndex((e) => e.code === purpose);
return treatmentTypeBannerStyle(purpose, index);
}
/** Small swatch for legend (background + border only). */
export const APPOINTMENT_PURPOSE_LEGEND_SWATCH: Record<AppointmentPurpose, string> = {
consultation: 'bg-violet-500/85 border-violet-400/75',
filling: 'bg-orange-500/85 border-orange-400/75',
endo: 'bg-red-500/85 border-red-400/75',
visit: 'bg-sky-500/85 border-sky-400/75',
hygiene: 'bg-lime-500/80 border-lime-400/70',
};
/** Inline style for a small legend swatch. */
export function purposeSwatchStyle(
purpose: string,
catalog: TreatmentCatalogEntry[],
): CSSProperties {
const index = catalog.findIndex((e) => e.code === purpose);
return treatmentTypeSwatchStyle(purpose, index);
}

10
frontend/src/components/ui/treatment/AppointmentsStrip.tsx
View File

@@ -2,11 +2,13 @@
import { useTranslations } from 'next-intl';
import { CalendarDays } from 'lucide-react';
import { purposeStyle } from '@/components/ui/appointments/appointmentPurposeStyles';
import { Card } from '@/components/ui/shared/Card';
import { ScheduleDayPicker } from '@/components/ui/shared/ScheduleDayPicker';
import { startOfLocalDay } from '@/components/appointments/appointmentTime';
import { treatmentTypeLabelFromCatalog } from '@/components/ui/treatment/treatmentTypeDisplay';
import {
treatmentTypeBannerStyle,
treatmentTypeLabelFromCatalog,
} from '@/components/ui/treatment/treatmentTypeDisplay';
import type { TreatmentCatalogEntry } from '@/types/treatment-catalog';
import type { TreatmentAppointment } from '@/types/treatment';
@@ -91,8 +93,8 @@ export function AppointmentsStrip({
hour: 'numeric',
minute: '2-digit',
})}`;
const palette = purposeStyle(a.purpose);
const purposeLabel = treatmentTypeLabelFromCatalog(a.purpose, treatmentCatalog);
const purposeIndex = treatmentCatalog.findIndex((e) => e.code === a.purpose);
return (
<Card
as="button"
@@ -100,10 +102,10 @@ export function AppointmentsStrip({
type="button"
onClick={() => onSelectAppointment(a.id)}
padding="none"
style={treatmentTypeBannerStyle(a.purpose, purposeIndex < 0 ? 0 : purposeIndex)}
className={`
text-left rounded-[var(--radius-sm)] px-3 py-2 min-w-[200px] max-w-[280px] transition-shadow min-h-[52px]
focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/45
${palette}
${sel ? 'ring-2 ring-primary ring-offset-2 ring-offset-background-secondary shadow-[inset_0_1px_0_rgba(255,255,255,0.06)]' : 'hover:brightness-110'}
`}
>

9
frontend/src/components/ui/treatment/TreatmentTypeBadge.tsx
View File

@@ -1,7 +1,9 @@
'use client';
import { purposeStyle } from '@/components/ui/appointments/appointmentPurposeStyles';
import { formatCodeAsLabel } from '@/components/ui/treatment/treatmentTypeDisplay';
import {
formatCodeAsLabel,
treatmentTypeBannerStyle,
} from '@/components/ui/treatment/treatmentTypeDisplay';
interface TreatmentTypeBadgeProps {
type: string;
@@ -14,7 +16,8 @@ export function TreatmentTypeBadge({ type, label, className = '' }: TreatmentTyp
return (
<span
className={`inline-flex items-center justify-center box-border rounded-md border min-h-[1.75rem] px-2.5 py-1 text-xs font-medium leading-none shrink-0 ${purposeStyle(type)} ${className}`.trim()}
className={`inline-flex items-center justify-center box-border rounded-md border min-h-[1.75rem] px-2.5 py-1 text-xs font-medium leading-none shrink-0 ${className}`.trim()}
style={treatmentTypeBannerStyle(type)}
>
{display}
</span>

6
frontend/src/components/ui/treatment/TreatmentWorkspace.tsx
View File

@@ -242,6 +242,10 @@ export function TreatmentWorkspace({ userId, currentOrganization }: TreatmentWor
const [orgs, setOrgs] = useState<LinkedOrganizationOption[]>([]);
const [labDependentCodes, setLabDependentCodes] = useState<Set<string>>(new Set());
const [treatmentCatalog, setTreatmentCatalog] = useState<TreatmentCatalogEntry[]>([]);
const treatmentDropdownCatalog = useMemo(
() => treatmentCatalog.filter((entry) => entry.availableInTreatment),
[treatmentCatalog],
);
const [details, setDetails] = useState<TreatmentDetailDraft[]>(() => [newDetail()]);
const [labCaseDrafts, setLabCaseDrafts] = useState<LabCaseDraft[]>([]);
@@ -984,7 +988,7 @@ export function TreatmentWorkspace({ userId, currentOrganization }: TreatmentWor
onDetailsChange={setDetails}
isDetailLocked={isDetailLocked}
labDependentCodes={labDependentCodes}
treatmentCatalog={treatmentCatalog}
treatmentCatalog={treatmentDropdownCatalog}
disabled={!canEditTreatmentForDay}
canEdit={canEdit}
saveStatus={saveStatus}

43
frontend/src/components/ui/treatment/treatmentTypeDisplay.ts
View File

@@ -1,9 +1,19 @@
import type { CSSProperties } from 'react';
import type { TreatmentCatalogEntry } from '@/types/treatment-catalog';
/**
* Single source of truth for treatment-type colors across the app
* (treatment detail dropdown, appointment booking dropdown, appointment legend,
* appointment schedule banners, and the treatment feature's appointment cards).
*
* There is no universal dental type→color standard (only status-based blue/red
* conventions), so this is a curated pastel palette. Extend it as new treatment
* types are added; unknown codes fall back to a rotating pastel set by index.
*/
const TREATMENT_TYPE_COLORS: Record<string, string> = {
restoration: '#fed7aa',
specialized_restoration: '#fdba74',
radiography: '#e2e8f0',
radiography: '#cbd5e1',
endo: '#fecaca',
surgery: '#fca5a5',
prosthesis: '#c4b5fd',
@@ -11,16 +21,43 @@ const TREATMENT_TYPE_COLORS: Record<string, string> = {
orthodontics: '#93c5fd',
perio: '#86efac',
pediatrics: '#fde68a',
extraction: '#f87171',
extraction: '#f9a8d4',
clinic_visit: '#bae6fd',
continue_treatment: '#99f6e4',
};
const FALLBACK_COLORS = ['#ddd6fe', '#fed7aa', '#fecaca', '#bae6fd', '#d9f99d'];
const FALLBACK_COLORS = ['#ddd6fe', '#fed7aa', '#fecaca', '#bae6fd', '#d9f99d', '#fbcfe8'];
/** Dark ink that stays readable on every pastel in the palette. */
const BANNER_INK = '#14253d';
/** Dark background used behind pastel option text in native <select> dropdowns. */
export const DROPDOWN_OPTION_BG = '#14253d';
export function treatmentTypeColor(code: string, index = 0): string {
return TREATMENT_TYPE_COLORS[code] ?? FALLBACK_COLORS[index % FALLBACK_COLORS.length];
}
/** Filled swatch (legend dots, small indicators). */
export function treatmentTypeSwatchStyle(code: string, index = 0): CSSProperties {
const color = treatmentTypeColor(code, index);
return { backgroundColor: color, borderColor: 'rgba(0, 0, 0, 0.18)' };
}
/** Colored banner / card fill with readable dark text (schedule blocks, appointment cards). */
export function treatmentTypeBannerStyle(code: string, index = 0): CSSProperties {
const color = treatmentTypeColor(code, index);
return {
backgroundColor: color,
borderColor: 'rgba(0, 0, 0, 0.16)',
color: BANNER_INK,
};
}
/** Pastel option text on the dark dropdown background. */
export function treatmentTypeOptionStyle(code: string, index = 0): CSSProperties {
return { color: treatmentTypeColor(code, index), backgroundColor: DROPDOWN_OPTION_BG };
}
export function treatmentTypeLabelFromCatalog(
code: string,
catalog: TreatmentCatalogEntry[],

10
frontend/src/lib/api/treatment-catalog.ts
View File

@@ -1,9 +1,15 @@
import { apiClient } from './client';
import type { TreatmentCatalogEntry } from '@/types/treatment-catalog';
export type TreatmentCatalogContext = 'appointment' | 'treatment';
export const treatmentCatalogApi = {
list: async (): Promise<{ success: boolean; data: TreatmentCatalogEntry[] }> => {
const response = await apiClient.get('/treatment-catalog');
list: async (
context?: TreatmentCatalogContext,
): Promise<{ success: boolean; data: TreatmentCatalogEntry[] }> => {
const response = await apiClient.get('/treatment-catalog', {
params: context ? { context } : undefined,
});
return response.data;
},
};

15
frontend/src/types/appointment.ts
View File

@@ -1,14 +1,11 @@
import type { Patient } from './patient';
export const APPOINTMENT_PURPOSES = [
'consultation',
'filling',
'endo',
'visit',
'hygiene',
] as const;
export type AppointmentPurpose = (typeof APPOINTMENT_PURPOSES)[number];
/**
* An appointment purpose is any treatment-type code selectable in the appointment
* context (see the treatment catalog with `?context=appointment`). Kept as a
* string so the set is driven by the DB catalog rather than a hardcoded union.
*/
export type AppointmentPurpose = string;
export interface AppointmentColumnProvider {
userId: string;

2
frontend/src/types/treatment-catalog.ts
View File

@@ -4,6 +4,8 @@ export interface TreatmentCatalogEntry {
labDependent: boolean;
sortOrder: number;
label: string;
availableInAppointments: boolean;
availableInTreatment: boolean;
}
export interface ProsthesisCatalogEntry {