bugfix: organization sidebar icon updated like organization switch feature.
This commit is contained in:
@@ -17,8 +17,8 @@ import { ScheduleDayPicker } from '@/components/ui/shared/ScheduleDayPicker';
|
|||||||
import { ToastStack } from '@/components/ui/shared/Toast';
|
import { ToastStack } from '@/components/ui/shared/Toast';
|
||||||
import { useToast } from '@/lib/hooks/useToast';
|
import { useToast } from '@/lib/hooks/useToast';
|
||||||
import type { AppointmentPurpose } from '@/types/appointment';
|
import type { AppointmentPurpose } from '@/types/appointment';
|
||||||
import { formatApiErrorMessage } from '@/lib/formatApiError';
|
import { formatApiErrorMessage } from '@/components/shared/formatApiError';
|
||||||
import { compareLocalDayStart, getLocalDayIsoRange, startOfLocalDay } from '@/lib/appointmentTime';
|
import { compareLocalDayStart, getLocalDayIsoRange, startOfLocalDay } from '@/components/appointments/appointmentTime';
|
||||||
|
|
||||||
const EMPTY_PATIENT_FORM: CreatePatientInput = {
|
const EMPTY_PATIENT_FORM: CreatePatientInput = {
|
||||||
firstName: '',
|
firstName: '',
|
||||||
|
|||||||
@@ -4,7 +4,7 @@ import { useEffect, useMemo, useState } from 'react';
|
|||||||
import { Button } from '@/components/ui/shared/Button';
|
import { Button } from '@/components/ui/shared/Button';
|
||||||
import { ToastStack } from '@/components/ui/shared/Toast';
|
import { ToastStack } from '@/components/ui/shared/Toast';
|
||||||
import { patientsApi } from '@/lib/api/patients';
|
import { patientsApi } from '@/lib/api/patients';
|
||||||
import { formatApiErrorMessage } from '@/lib/formatApiError';
|
import { formatApiErrorMessage } from '@/components/shared/formatApiError';
|
||||||
import { useAuth } from '@/lib/hooks/useAuth';
|
import { useAuth } from '@/lib/hooks/useAuth';
|
||||||
import { useToast } from '@/lib/hooks/useToast';
|
import { useToast } from '@/lib/hooks/useToast';
|
||||||
import { hasPermission } from '@/components/shared/permissions';
|
import { hasPermission } from '@/components/shared/permissions';
|
||||||
|
|||||||
16
frontend/src/components/shared/organizationTypeIcon.ts
Normal file
16
frontend/src/components/shared/organizationTypeIcon.ts
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
import { Building2, Beaker, type LucideIcon } from 'lucide-react';
|
||||||
|
import type { Organization } from '@/types/organization';
|
||||||
|
|
||||||
|
/** Clinic → Building2, Lab → Beaker (switch-organization cards). */
|
||||||
|
export function organizationTypeIcon(type: Organization['type']): LucideIcon {
|
||||||
|
return type === 'CLINIC' ? Building2 : Beaker;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Organizations tab lists counterpart orgs (labs for clinics, clinics for labs). */
|
||||||
|
export function counterpartOrganizationType(
|
||||||
|
currentType: Organization['type'] | undefined,
|
||||||
|
): Organization['type'] {
|
||||||
|
if (currentType === 'CLINIC') return 'LAB';
|
||||||
|
if (currentType === 'LAB') return 'CLINIC';
|
||||||
|
return 'CLINIC';
|
||||||
|
}
|
||||||
@@ -1,4 +1,4 @@
|
|||||||
import { isSameLocalCalendarDay } from '@/lib/appointmentTime';
|
import { isSameLocalCalendarDay } from '@/components/appointments/appointmentTime';
|
||||||
import type { TreatmentAppointment } from '@/types/treatment';
|
import type { TreatmentAppointment } from '@/types/treatment';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -12,7 +12,7 @@ import {
|
|||||||
compareLocalDayStart,
|
compareLocalDayStart,
|
||||||
formatTimeForInput,
|
formatTimeForInput,
|
||||||
isSameLocalCalendarDay,
|
isSameLocalCalendarDay,
|
||||||
} from '@/lib/appointmentTime';
|
} from '@/components/appointments/appointmentTime';
|
||||||
|
|
||||||
interface AppointmentBookingModalProps {
|
interface AppointmentBookingModalProps {
|
||||||
open: boolean;
|
open: boolean;
|
||||||
|
|||||||
@@ -2,12 +2,12 @@
|
|||||||
|
|
||||||
import { useMemo, useState } from 'react';
|
import { useMemo, useState } from 'react';
|
||||||
import type { AppointmentColumnProvider, AppointmentRecord } from '@/types/appointment';
|
import type { AppointmentColumnProvider, AppointmentRecord } from '@/types/appointment';
|
||||||
import { formatHourLabel } from '@/lib/appointmentTime';
|
import { formatHourLabel } from '@/components/appointments/appointmentTime';
|
||||||
import {
|
import {
|
||||||
computeAppointmentLaneLayouts,
|
computeAppointmentLaneLayouts,
|
||||||
findOverlapCluster,
|
findOverlapCluster,
|
||||||
lanePositionStyles,
|
lanePositionStyles,
|
||||||
} from '@/lib/appointmentOverlapLayout';
|
} from '@/components/appointments/appointmentOverlapLayout';
|
||||||
import { purposeStyle } from '@/components/ui/appointments/appointmentPurposeStyles';
|
import { purposeStyle } from '@/components/ui/appointments/appointmentPurposeStyles';
|
||||||
import { AppointmentOverlapPopover } from '@/components/ui/appointments/AppointmentOverlapPopover';
|
import { AppointmentOverlapPopover } from '@/components/ui/appointments/AppointmentOverlapPopover';
|
||||||
|
|
||||||
|
|||||||
@@ -3,7 +3,9 @@
|
|||||||
import { useMemo, useState } from 'react';
|
import { useMemo, useState } from 'react';
|
||||||
import { useAuth } from '@/lib/hooks/useAuth';
|
import { useAuth } from '@/lib/hooks/useAuth';
|
||||||
import { canCreateOrganizationFromCurrentOrg } from '@/components/shared/permissions';
|
import { canCreateOrganizationFromCurrentOrg } from '@/components/shared/permissions';
|
||||||
import { Building2, Beaker, Mail } from 'lucide-react';
|
import { Building2, Mail } from 'lucide-react';
|
||||||
|
import type { Organization } from '@/types/organization';
|
||||||
|
import { organizationTypeIcon } from '@/components/shared/organizationTypeIcon';
|
||||||
import { Input } from '@/components/ui/shared/Input';
|
import { Input } from '@/components/ui/shared/Input';
|
||||||
import { Button } from '@/components/ui/shared/Button';
|
import { Button } from '@/components/ui/shared/Button';
|
||||||
|
|
||||||
@@ -26,8 +28,10 @@ export function OrganizationSelectorContent() {
|
|||||||
const [organizationEmail, setOrganizationEmail] = useState('');
|
const [organizationEmail, setOrganizationEmail] = useState('');
|
||||||
const [organizationType, setOrganizationType] = useState<'CLINIC' | 'LAB'>('CLINIC');
|
const [organizationType, setOrganizationType] = useState<'CLINIC' | 'LAB'>('CLINIC');
|
||||||
|
|
||||||
const getIcon = (type: string) =>
|
const renderOrgTypeIcon = (type: Organization['type']) => {
|
||||||
type === 'CLINIC' ? <Building2 className="h-8 w-8 icon-flat" /> : <Beaker className="h-8 w-8 icon-flat" />;
|
const Icon = organizationTypeIcon(type);
|
||||||
|
return <Icon className="h-8 w-8 icon-flat" />;
|
||||||
|
};
|
||||||
|
|
||||||
const handleCreateOrganization = async () => {
|
const handleCreateOrganization = async () => {
|
||||||
try {
|
try {
|
||||||
@@ -158,7 +162,7 @@ export function OrganizationSelectorContent() {
|
|||||||
className="surface-card p-6 transition-all text-left flex items-center gap-4 hover:border-primary/60"
|
className="surface-card p-6 transition-all text-left flex items-center gap-4 hover:border-primary/60"
|
||||||
>
|
>
|
||||||
<div className="p-3 bg-primary-soft rounded-[var(--radius-sm)] text-primary">
|
<div className="p-3 bg-primary-soft rounded-[var(--radius-sm)] text-primary">
|
||||||
{getIcon(org.type)}
|
{renderOrgTypeIcon(org.type)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex-1">
|
<div className="flex-1">
|
||||||
|
|||||||
@@ -1,7 +1,8 @@
|
|||||||
// src/components/ui/OrganizationCard.tsx
|
// src/components/ui/OrganizationCard.tsx
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { Building2, Beaker, ChevronRight } from 'lucide-react';
|
import { ChevronRight } from 'lucide-react';
|
||||||
import type { Organization } from '@/types/organization';
|
import type { Organization } from '@/types/organization';
|
||||||
|
import { organizationTypeIcon } from '@/components/shared/organizationTypeIcon';
|
||||||
|
|
||||||
interface OrganizationCardProps {
|
interface OrganizationCardProps {
|
||||||
organization: Organization;
|
organization: Organization;
|
||||||
@@ -12,7 +13,7 @@ export const OrganizationCard: React.FC<OrganizationCardProps> = ({
|
|||||||
organization,
|
organization,
|
||||||
onSelect,
|
onSelect,
|
||||||
}) => {
|
}) => {
|
||||||
const Icon = organization.type === 'CLINIC' ? Building2 : Beaker;
|
const Icon = organizationTypeIcon(organization.type);
|
||||||
const typeText = organization.type === 'CLINIC' ? 'Dental Clinic' : 'Dental Lab';
|
const typeText = organization.type === 'CLINIC' ? 'Dental Clinic' : 'Dental Lab';
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
|
|
||||||
import { useEffect, useId, useRef, useState } from 'react';
|
import { useEffect, useId, useRef, useState } from 'react';
|
||||||
import { ChevronDown, ChevronLeft, ChevronRight } from 'lucide-react';
|
import { ChevronDown, ChevronLeft, ChevronRight } from 'lucide-react';
|
||||||
import { addCalendarDays, startOfLocalDay } from '@/lib/appointmentTime';
|
import { addCalendarDays, startOfLocalDay } from '@/components/appointments/appointmentTime';
|
||||||
|
|
||||||
interface ScheduleDayPickerProps {
|
interface ScheduleDayPickerProps {
|
||||||
value: Date;
|
value: Date;
|
||||||
|
|||||||
@@ -14,9 +14,13 @@ import {
|
|||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
import { useAuth } from '@/lib/hooks/useAuth';
|
import { useAuth } from '@/lib/hooks/useAuth';
|
||||||
import { canAccessAppointmentsSection, canViewTab } from '@/components/shared/permissions';
|
import { canAccessAppointmentsSection, canViewTab } from '@/components/shared/permissions';
|
||||||
|
import {
|
||||||
|
counterpartOrganizationType,
|
||||||
|
organizationTypeIcon,
|
||||||
|
} from '@/components/shared/organizationTypeIcon';
|
||||||
|
|
||||||
const menu = [
|
const menu = [
|
||||||
{ name: 'Today', path: '/today', icon: LayoutDashboard, read: 'TAB_TODAY_READ' as const },
|
{ name: 'Dashboard', path: '/today', icon: LayoutDashboard, read: 'TAB_TODAY_READ' as const },
|
||||||
{ name: 'Staff', path: '/staff', icon: UserCog, read: 'TAB_STAFF_READ' as const },
|
{ name: 'Staff', path: '/staff', icon: UserCog, read: 'TAB_STAFF_READ' as const },
|
||||||
{ name: 'Patients', path: '/patients', icon: Users, read: 'TAB_PATIENTS_READ' as const },
|
{ name: 'Patients', path: '/patients', icon: Users, read: 'TAB_PATIENTS_READ' as const },
|
||||||
{ name: 'Appointment', path: '/appointments', icon: Calendar, read: 'TAB_APPOINTMENTS_READ' as const },
|
{ name: 'Appointment', path: '/appointments', icon: Calendar, read: 'TAB_APPOINTMENTS_READ' as const },
|
||||||
@@ -29,6 +33,9 @@ function Sidebar() {
|
|||||||
const pathname = usePathname();
|
const pathname = usePathname();
|
||||||
const { currentOrganization } = useAuth();
|
const { currentOrganization } = useAuth();
|
||||||
const counterpartLabel = currentOrganization?.type === 'LAB' ? 'Clinics' : 'Labs';
|
const counterpartLabel = currentOrganization?.type === 'LAB' ? 'Clinics' : 'Labs';
|
||||||
|
const organizationsTabIcon = organizationTypeIcon(
|
||||||
|
counterpartOrganizationType(currentOrganization?.type),
|
||||||
|
);
|
||||||
|
|
||||||
const visibleMenu = useMemo(
|
const visibleMenu = useMemo(
|
||||||
() => {
|
() => {
|
||||||
@@ -38,7 +45,7 @@ function Sidebar() {
|
|||||||
{
|
{
|
||||||
name: counterpartLabel,
|
name: counterpartLabel,
|
||||||
path: '/organizations',
|
path: '/organizations',
|
||||||
icon: FlaskConical,
|
icon: organizationsTabIcon,
|
||||||
read: 'TAB_ORGANIZATIONS_READ' as const,
|
read: 'TAB_ORGANIZATIONS_READ' as const,
|
||||||
},
|
},
|
||||||
menu[2],
|
menu[2],
|
||||||
@@ -54,7 +61,7 @@ function Sidebar() {
|
|||||||
return canViewTab(currentOrganization, item.read);
|
return canViewTab(currentOrganization, item.read);
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
[counterpartLabel, currentOrganization],
|
[counterpartLabel, organizationsTabIcon, currentOrganization],
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|||||||
@@ -4,7 +4,7 @@ import { CalendarDays } from 'lucide-react';
|
|||||||
import { purposeStyle } from '@/components/ui/appointments/appointmentPurposeStyles';
|
import { purposeStyle } from '@/components/ui/appointments/appointmentPurposeStyles';
|
||||||
import { Card } from '@/components/ui/shared/Card';
|
import { Card } from '@/components/ui/shared/Card';
|
||||||
import { ScheduleDayPicker } from '@/components/ui/shared/ScheduleDayPicker';
|
import { ScheduleDayPicker } from '@/components/ui/shared/ScheduleDayPicker';
|
||||||
import { startOfLocalDay } from '@/lib/appointmentTime';
|
import { startOfLocalDay } from '@/components/appointments/appointmentTime';
|
||||||
import type { TreatmentAppointment } from '@/types/treatment';
|
import type { TreatmentAppointment } from '@/types/treatment';
|
||||||
|
|
||||||
interface AppointmentsStripProps {
|
interface AppointmentsStripProps {
|
||||||
|
|||||||
@@ -9,7 +9,7 @@ import { Button } from '@/components/ui/shared/Button';
|
|||||||
import { Dropdown } from '@/components/ui/shared/Dropdown';
|
import { Dropdown } from '@/components/ui/shared/Dropdown';
|
||||||
import { SearchBar } from '@/components/ui/shared/SearchBar';
|
import { SearchBar } from '@/components/ui/shared/SearchBar';
|
||||||
import { Toast } from '@/components/ui/shared/Toast';
|
import { Toast } from '@/components/ui/shared/Toast';
|
||||||
import { compareLocalDayStart, isSameLocalCalendarDay, startOfLocalDay } from '@/lib/appointmentTime';
|
import { compareLocalDayStart, isSameLocalCalendarDay, startOfLocalDay } from '@/components/appointments/appointmentTime';
|
||||||
import {
|
import {
|
||||||
fetchLinkedOrganizations,
|
fetchLinkedOrganizations,
|
||||||
fetchMyAppointmentsForDay,
|
fetchMyAppointmentsForDay,
|
||||||
@@ -17,7 +17,7 @@ import {
|
|||||||
saveTreatmentDraft,
|
saveTreatmentDraft,
|
||||||
sendTreatmentRecord,
|
sendTreatmentRecord,
|
||||||
} from '@/lib/mocks/treatmentMockApi';
|
} from '@/lib/mocks/treatmentMockApi';
|
||||||
import { pickAutoAppointment } from '@/lib/treatmentSelection';
|
import { pickAutoAppointment } from '@/components/shared/treatmentSelection';
|
||||||
import { canEditTreatment } from '@/components/shared/permissions';
|
import { canEditTreatment } from '@/components/shared/permissions';
|
||||||
import type { Organization } from '@/types/organization';
|
import type { Organization } from '@/types/organization';
|
||||||
import type {
|
import type {
|
||||||
|
|||||||
@@ -2,7 +2,7 @@ import {
|
|||||||
addCalendarDays,
|
addCalendarDays,
|
||||||
isSameLocalCalendarDay,
|
isSameLocalCalendarDay,
|
||||||
startOfLocalDay,
|
startOfLocalDay,
|
||||||
} from '@/lib/appointmentTime';
|
} from '@/components/appointments/appointmentTime';
|
||||||
import type {
|
import type {
|
||||||
FdiToothId,
|
FdiToothId,
|
||||||
LinkedOrganizationOption,
|
LinkedOrganizationOption,
|
||||||
|
|||||||
Reference in New Issue
Block a user