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

feature: dashboard settings and invite activation flow consistency fixed. frontend warnings fixed

Browse Source
This commit is contained in:
Admin
2026-04-30 14:05:44 +03:30
parent 1b8856f64e
commit 1387e4cb5e
38 changed files with 375 additions and 362 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/next.config.ts
View File

@@ -9,11 +9,12 @@ const nextConfig = {
// Disable x-powered-by header for security
poweredByHeader: false,
// Configure image domains if needed
// Configure allowed remote image sources
images: {
domains: process.env.NODE_ENV === 'production'
? ['yourdomain.com']
: ['localhost'],
remotePatterns:
process.env.NODE_ENV === 'production'
? [{ protocol: 'https', hostname: 'yourdomain.com' }]
: [{ protocol: 'http', hostname: 'localhost' }],
},
// Environment variables that will be available at build time

56
frontend/src/access/dashboard-tab-access.ts
View File

@@ -1,56 +0,0 @@
/**
* Dashboard route ↔ TAB_* READ permission mapping and helpers used by the shell
* (Sidebar, layout guard). Cross-cutting access logic lives here — not in `lib`,
* which remains for generic utilities (API client, hooks, etc.).
*/
import type { Organization } from '@/types';
const ROUTE_TAB_READ: { prefix: string; permission: string }[] = [
{ prefix: '/today', permission: 'TAB_TODAY_READ' },
{ prefix: '/patients', permission: 'TAB_PATIENTS_READ' },
{ prefix: '/appointments', permission: 'TAB_APPOINTMENTS_READ' },
{ prefix: '/staff', permission: 'TAB_STAFF_READ' },
{ prefix: '/lab', permission: 'TAB_LAB_READ' },
{ prefix: '/billing', permission: 'TAB_BILLING_READ' },
{ prefix: '/reports', permission: 'TAB_REPORTS_READ' },
];
export function hasPermission(org: Organization | null, permission: string): boolean {
if (!org) return false;
if (org.isOwner) return true;
return Boolean(org.permissions?.includes(permission));
}
/** Sidebar / route guard: READ access to a tab */
export function canViewTab(org: Organization | null, readPermission: string): boolean {
return hasPermission(org, readPermission);
}
export function getRequiredReadPermissionForPath(pathname: string): string | null {
for (const { prefix, permission } of ROUTE_TAB_READ) {
if (pathname === prefix || pathname.startsWith(`${prefix}/`)) {
return permission;
}
}
return null;
}
/** First dashboard route the user may open (ordered). Fallback: account settings. */
export function firstAccessibleDashboardPath(org: Organization | null): string {
if (!org) return '/today';
if (org.isOwner) return '/today';
for (const { prefix, permission } of ROUTE_TAB_READ) {
if (hasPermission(org, permission)) return prefix;
}
return '/settings/account';
}
export function canEditStaff(org: Organization | null): boolean {
return hasPermission(org, 'TAB_STAFF_EDIT');
}
export function canViewStaff(org: Organization | null): boolean {
return (
hasPermission(org, 'TAB_STAFF_READ') || hasPermission(org, 'TAB_STAFF_EDIT')
);
}

1
frontend/src/access/index.ts
View File

@@ -1 +0,0 @@
export * from './dashboard-tab-access';

6
frontend/src/app/(dashboard)/billing/page.tsx
View File

@@ -2,9 +2,9 @@
'use client';
import { useState } from 'react';
import { Search, Filter, Plus } from 'lucide-react';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { Badge } from '@/components/ui/Badge';
import { Button } from '@/components/ui/common/Button';
import { Input } from '@/components/ui/common/Input';
import { Badge } from '@/components/ui/common/Badge';
// Mock data matching your design
const invoices = [
{ id: '#123456', patient: 'Ali Rahmani', date: '24/9/2026', service: 'Hygiene', amount: 300, paid: 0, status: 'unpaid' },

10
frontend/src/app/(dashboard)/layout.tsx
View File

@@ -3,14 +3,14 @@
import { memo, useEffect } from 'react';
import { usePathname, useRouter } from 'next/navigation';
import { useAuth } from '@/lib/hooks/useAuth';
import Sidebar from '@/components/ui/Sidebar';
import { ThemeToggle } from '@/components/ui/ThemeToggle';
import { DashboardAccountMenu } from '@/components/ui/DashboardAccountMenu';
import Sidebar from '@/components/ui/common/Sidebar';
import { ThemeToggle } from '@/components/ui/common/ThemeToggle';
import { DashboardAccountMenu } from '@/components/ui/dashboard/DashboardAccountMenu';
import {
firstAccessibleDashboardPath,
getRequiredReadPermissionForPath,
hasPermission,
} from '@/access';
} from '@/shared/permissions';
export default function DashboardLayout({ children }: { children: React.ReactNode }) {
const { user, currentOrganization, isAuthReady } = useAuth();
@@ -77,7 +77,7 @@ const DashboardHeader = memo(function DashboardHeader({
organizationName: string;
}) {
return (
<header className="h-[71px] flex justify-between items-center gap-4 px-6 border-b border-border/70 backdrop-blur-sm">
<header className="relative z-40 h-[71px] flex justify-between items-center gap-4 px-6 border-b border-border/70 backdrop-blur-sm">
<h2 className="text-lg font-medium truncate min-w-0">{organizationName}</h2>
<div className="flex items-center gap-3 shrink-0">

12
frontend/src/app/(dashboard)/patients/page.tsx
View File

@@ -2,7 +2,7 @@
import { useEffect, useMemo, useState } from 'react';
import { Plus } from 'lucide-react';
import { Button } from '@/components/ui/Button';
import { Button } from '@/components/ui/common/Button';
import { patientsApi } from '@/lib/api/patients';
import {
CreatePatientInput,
@@ -10,10 +10,10 @@ import {
Patient,
TreatmentHistoryItem,
} from '@/types/patient';
import { PatientSearchSelect } from './components/PatientSearchSelect';
import { CreatePatientModal } from './components/CreatePatientModal';
import { PatientSummaryCard } from './components/PatientSummaryCard';
import { TreatmentHistoryPreview } from './components/TreatmentHistoryPreview';
import { PatientSearchSelect } from '../../../components/ui/patient/PatientSearchSelect';
import { CreatePatientModal } from '../../../components/ui/patient/CreatePatientModal';
import { PatientSummaryCard } from '../../../components/ui/patient/PatientSummaryCard';
import { TreatmentHistoryPreview } from '../../../components/ui/patient/TreatmentHistoryPreview';
const EMPTY_PATIENT_FORM: CreatePatientInput = {
firstName: '',
@@ -201,7 +201,7 @@ export default function PatientsPage() {
</div>
{(errorMessage || successMessage) && (
<div className="absolute bottom-0 left-0 right-0 z-50 w-full">
<div className="absolute bottom-0 left-0 right-0 z-10 w-full">
{errorMessage && (
<div className="rounded-[var(--radius-sm)] border border-red-500/50 bg-red-500/10 px-3 py-2 text-sm text-red-300 shadow-lg">
{errorMessage}

20
frontend/src/app/(dashboard)/settings/organizations/page.tsx Normal file
View File

@@ -0,0 +1,20 @@
'use client';
import Link from 'next/link';
import { OrganizationSelectorContent } from '@/components/ui/organization/OrganizationSelectorContent';
export default function DashboardOrganizationsSettingsPage() {
return (
<div className="max-w-3xl space-y-6">
<div>
<Link
href="/today"
className="text-sm text-primary hover:opacity-90"
>
← Back to app
</Link>
</div>
<OrganizationSelectorContent />
</div>
);
}

54
frontend/src/app/(dashboard)/settings/subscriptions/page.tsx
View File

@@ -5,7 +5,7 @@ import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { useAuth } from '@/lib/hooks/useAuth';
import { authApi } from '@/lib/api/auth';
import type { SubscriptionAlertData } from '@/types';
import type { SubscriptionAlertData } from '@/types/subscription';
export default function SubscriptionsSettingsPage() {
const { currentOrganization } = useAuth();
@@ -39,9 +39,24 @@ export default function SubscriptionsSettingsPage() {
const plan = currentOrganization.plan;
const maxUsers = plan?.maxUsers;
const isUnlimited = typeof maxUsers === 'number' && maxUsers >= 999999;
const seatsUsed = alert?.seatsUsed;
const seatsRemaining =
typeof seatsUsed === 'number' && typeof maxUsers === 'number' && !isUnlimited
? Math.max(0, maxUsers - seatsUsed)
: null;
const daysUntilPlanEnd = alert?.daysUntilPlanEnd ?? null;
const planDayTone =
daysUntilPlanEnd == null
? 'text-text-primary'
: daysUntilPlanEnd > 20
? 'text-emerald-400'
: daysUntilPlanEnd >= 10
? 'text-amber-300'
: 'text-red-400';
return (
<div className="max-w-xl space-y-6">
<div className="max-w-4xl space-y-6">
<div>
<Link
href="/today"
@@ -59,21 +74,38 @@ export default function SubscriptionsSettingsPage() {
</div>
<div className="surface-card p-6 space-y-4">
<div className="flex flex-wrap gap-4 justify-between">
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-5">
<div>
<p className="text-xs text-text-muted uppercase tracking-wide">Current plan</p>
<p className="text-lg font-medium text-text-primary capitalize">
{plan?.name ?? '—'}
</p>
</div>
{typeof maxUsers === 'number' && maxUsers < 999999 && (
<div>
<p className="text-xs text-text-muted uppercase tracking-wide">Seats (this org)</p>
<p className="text-lg font-medium text-text-primary">
{alert?.seatsUsed ?? '—'} / {maxUsers}
</p>
</div>
)}
<div>
<p className="text-xs text-text-muted uppercase tracking-wide">Plan price</p>
<p className="text-lg font-medium text-text-primary">
{typeof plan?.price === 'number' ? `$${plan.price}` : '—'}
</p>
</div>
<div>
<p className="text-xs text-text-muted uppercase tracking-wide">Seats used</p>
<p className="text-lg font-medium text-text-primary">
{typeof seatsUsed === 'number' ? seatsUsed : '—'}
{typeof maxUsers === 'number' ? ` / ${isUnlimited ? 'Unlimited' : maxUsers}` : ''}
</p>
</div>
<div>
<p className="text-xs text-text-muted uppercase tracking-wide">Seats remaining</p>
<p className="text-lg font-medium text-text-primary">
{isUnlimited ? 'Unlimited' : seatsRemaining ?? '—'}
</p>
</div>
<div>
<p className="text-xs text-text-muted uppercase tracking-wide">Days remaining</p>
<p className={`text-lg font-medium ${planDayTone}`}>
{daysUntilPlanEnd ?? '—'}
</p>
</div>
</div>
{alert?.showWarning && (

10
frontend/src/app/(dashboard)/staff/page.tsx
View File

@@ -6,7 +6,7 @@ import {
firstAccessibleDashboardPath,
canEditStaff,
canViewStaff,
} from '@/access';
} from '@/shared/permissions';
import {
STAFF_FEATURE_GROUPS,
permissionNamesFromFeatureState,
@@ -18,10 +18,10 @@ import {
import { UserPlus, Pencil, Trash2, Copy, Check, X, Clock3 } from 'lucide-react';
import { useAuth } from '@/lib/hooks/useAuth';
import { staffApi, type StaffMemberDto } from '@/lib/api/staff';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { Checkbox } from '@/components/ui/Checkbox';
import { ApiError } from '@/types';
import { Button } from '@/components/ui/common/Button';
import { Input } from '@/components/ui/common/Input';
import { Checkbox } from '@/components/ui/common/Checkbox';
import type { ApiError } from '@/types/api';
function formatApiMessage(err: unknown): string {
if (!err || typeof err !== 'object') return 'Something went wrong';

4
frontend/src/app/(public)/accept-invite/page.tsx
View File

@@ -4,8 +4,8 @@ import { useEffect, useMemo, useState } from 'react';
import { Suspense } from 'react';
import Link from 'next/link';
import { useRouter, useSearchParams } from 'next/navigation';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { Button } from '@/components/ui/common/Button';
import { Input } from '@/components/ui/common/Input';
import { staffApi } from '@/lib/api/staff';
function AcceptInviteContent() {

4
frontend/src/app/(public)/login/page.tsx
View File

@@ -116,8 +116,8 @@ import Link from 'next/link';
import { Mail, Lock } from 'lucide-react';
import { useAuth } from '@/lib/hooks/useAuth';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { Button } from '@/components/ui/common/Button';
import { Input } from '@/components/ui/common/Input';
const loginSchema = z.object({
email: z.string().email('Please enter a valid email address'),

4
frontend/src/app/(public)/page.tsx
View File

@@ -2,8 +2,8 @@
import Link from 'next/link';
import { useAuth } from '@/lib/hooks/useAuth';
import { Button } from '@/components/ui/Button';
import { ThemeToggle } from '@/components/ui/ThemeToggle';
import { Button } from '@/components/ui/common/Button';
import { ThemeToggle } from '@/components/ui/common/ThemeToggle';
import { Building2, Beaker, Calendar, Shield, Clock, Users } from 'lucide-react';
export default function HomePage() {

4
frontend/src/app/(public)/register/page.tsx
View File

@@ -7,8 +7,8 @@ import * as z from 'zod';
import Link from 'next/link';
import { Building2, Mail, Lock, User, ChevronRight } from 'lucide-react';
import { useAuth } from '@/lib/hooks/useAuth';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { Button } from '@/components/ui/common/Button';
import { Input } from '@/components/ui/common/Input';
const registerSchema = z.object({
name: z.string().min(2, 'Name must be at least 2 characters'),
email: z.string().email('Please enter a valid email address'),

162
frontend/src/app/(public)/select-organization/page.tsx
View File

@@ -1,170 +1,12 @@
'use client';
import { useState } from 'react';
import { useAuth } from '@/lib/hooks/useAuth';
import { Building2, Beaker, Mail, Plus } from 'lucide-react';
import { Input } from '@/components/ui/Input';
import { Button } from '@/components/ui/Button';
import { OrganizationSelectorContent } from '@/components/ui/organization/OrganizationSelectorContent';
export default function SelectOrganizationPage() {
const { organizations, selectOrganization, createOrganization, isLoading, error, clearError } = useAuth();
const [isCreateOpen, setIsCreateOpen] = useState(false);
const [organizationName, setOrganizationName] = useState('');
const [organizationEmail, setOrganizationEmail] = useState('');
const [organizationType, setOrganizationType] = useState<'CLINIC' | 'LAB'>('CLINIC');
const getIcon = (type: string) => {
return type === 'CLINIC'
? <Building2 className="h-8 w-8 icon-flat" />
: <Beaker className="h-8 w-8 icon-flat" />;
};
const handleCreateOrganization = async () => {
try {
clearError();
const createdId = await createOrganization(
organizationName.trim(),
organizationEmail.trim(),
organizationType,
);
setOrganizationName('');
setOrganizationEmail('');
setOrganizationType('CLINIC');
setIsCreateOpen(false);
await selectOrganization(createdId);
} catch {
// Error is already handled in auth context.
}
};
if (isLoading) {
return (
<div className="min-h-screen app-web-bg flex items-center justify-center">
<p className="text-text-secondary">Loading...</p>
</div>
);
}
return (
<div className="min-h-screen app-web-bg p-4 sm:p-8">
<div className="max-w-3xl mx-auto">
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-8">
<div>
<h1 className="text-3xl font-semibold text-text-primary">Organizations</h1>
<p className="text-text-secondary mt-2">
Select an organization to continue, or create a new one.
</p>
</div>
<Button
type="button"
variant={isCreateOpen ? 'outline' : 'primary'}
onClick={() => {
clearError();
setIsCreateOpen(prev => !prev);
}}
>
<Plus className="h-4 w-4 mr-2 icon-flat" />
{isCreateOpen ? 'Cancel' : 'Create Organization'}
</Button>
</div>
{isCreateOpen && (
<div className="surface-card p-6 mb-6 space-y-4">
<Input
label="Organization name"
value={organizationName}
onChange={(event) => setOrganizationName(event.target.value)}
placeholder="Sunshine Dental Clinic"
icon={<Building2 className="h-5 w-5 icon-flat" />}
/>
<Input
label="Organization email"
value={organizationEmail}
onChange={(event) => setOrganizationEmail(event.target.value)}
placeholder="contact@sunshineclinic.com"
type="email"
icon={<Mail className="h-5 w-5 icon-flat" />}
/>
<div>
<label className="block text-sm font-medium text-text-secondary mb-2">
Organization type
</label>
<div className="grid grid-cols-2 gap-3">
<button
type="button"
onClick={() => setOrganizationType('CLINIC')}
className={`p-3 border rounded-[var(--radius-md)] text-sm ${
organizationType === 'CLINIC'
? 'border-primary/60 bg-primary-soft text-text-primary'
: 'border-border text-text-secondary hover:border-border-strong'
}`}
>
Dental Clinic
</button>
<button
type="button"
onClick={() => setOrganizationType('LAB')}
className={`p-3 border rounded-[var(--radius-md)] text-sm ${
organizationType === 'LAB'
? 'border-primary/60 bg-primary-soft text-text-primary'
: 'border-border text-text-secondary hover:border-border-strong'
}`}
>
Dental Lab
</button>
</div>
</div>
{error && (
<div className="p-3 bg-red-950/30 border border-red-600/40 rounded-[var(--radius-md)]">
<p className="text-sm text-red-600">{error}</p>
</div>
)}
<div className="flex justify-end">
<Button
type="button"
variant="primary"
onClick={handleCreateOrganization}
isLoading={isLoading}
disabled={!organizationName.trim() || !organizationEmail.trim()}
>
Create and Continue
</Button>
</div>
</div>
)}
{!organizations.length ? (
<div className="surface-card p-8 text-center">
<p className="text-text-secondary">No organizations found. Create your first one to continue.</p>
</div>
) : (
<div className="grid gap-4">
{organizations.map((org) => (
<button
key={org.id}
onClick={() => selectOrganization(org.id)}
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">
{getIcon(org.type)}
</div>
<div className="flex-1">
<h3 className="text-lg font-semibold text-text-primary">
{org.name}
</h3>
<p className="text-sm text-text-secondary">
{org.type === 'CLINIC' ? 'Dental Clinic' : 'Dental Lab'}
</p>
</div>
<div className="text-primary text-sm">
Continue →
</div>
</button>
))}
</div>
)}
<OrganizationSelectorContent />
</div>
</div>
);

0
frontend/src/components/ui/Badge.tsx → frontend/src/components/ui/common/Badge.tsx
View File

0
frontend/src/components/ui/Button.tsx → frontend/src/components/ui/common/Button.tsx
View File

0
frontend/src/components/ui/Checkbox.tsx → frontend/src/components/ui/common/Checkbox.tsx
View File

0
frontend/src/components/ui/Input.tsx → frontend/src/components/ui/common/Input.tsx
View File

2
frontend/src/components/ui/OrganizationCard.tsx → frontend/src/components/ui/common/OrganizationCard.tsx
View File

@@ -1,7 +1,7 @@
// src/components/ui/OrganizationCard.tsx
import React from 'react';
import { Building2, Beaker, ChevronRight } from 'lucide-react';
import { Organization } from '@/types';
import type { Organization } from '@/types/organization';
interface OrganizationCardProps {
organization: Organization;

2
frontend/src/components/ui/Sidebar.tsx → frontend/src/components/ui/common/Sidebar.tsx
View File

@@ -13,7 +13,7 @@ import {
CreditCard,
} from 'lucide-react';
import { useAuth } from '@/lib/hooks/useAuth';
import { canViewTab } from '@/access';
import { canViewTab } from '@/shared/permissions';
const menu = [
{ name: 'Today', path: '/today', icon: LayoutDashboard, read: 'TAB_TODAY_READ' as const },

0
frontend/src/components/ui/ThemeToggle.tsx → frontend/src/components/ui/common/ThemeToggle.tsx
View File

8
frontend/src/components/ui/DashboardAccountMenu.tsx → frontend/src/components/ui/dashboard/DashboardAccountMenu.tsx
View File

@@ -13,7 +13,7 @@ import {
} from 'lucide-react';
import { useAuth } from '@/lib/hooks/useAuth';
import { authApi } from '@/lib/api/auth';
import type { SubscriptionAlertData } from '@/types';
import type { SubscriptionAlertData } from '@/types/subscription';
function warningTooltip(data: SubscriptionAlertData | null): string {
if (!data?.showWarning) return '';
@@ -68,7 +68,7 @@ export function DashboardAccountMenu() {
}, [logout]);
return (
<div className="relative" ref={menuRef}>
<div className="relative z-[120]" ref={menuRef}>
<button
type="button"
onClick={() => setOpen((v) => !v)}
@@ -94,7 +94,7 @@ export function DashboardAccountMenu() {
{open && (
<div
role="menu"
className="absolute right-0 mt-2 w-72 rounded-[var(--radius-md)] border border-border bg-background-secondary/95 py-2 shadow-lg z-50 backdrop-blur-sm"
className="absolute right-0 mt-2 w-72 rounded-[var(--radius-md)] border border-border bg-background-secondary/95 py-2 shadow-lg z-[200] backdrop-blur-sm"
>
<div className="px-3 py-2 border-b border-border/60">
<p className="text-xs text-text-muted">Signed in</p>
@@ -106,7 +106,7 @@ export function DashboardAccountMenu() {
<div className="py-1">
<Link
href="/select-organization"
href="/settings/organizations"
role="menuitem"
className="flex items-center gap-3 px-3 py-2.5 text-sm text-text-primary hover:bg-background-card/70"
onClick={() => setOpen(false)}

162
frontend/src/components/ui/organization/OrganizationSelectorContent.tsx Normal file
View File

@@ -0,0 +1,162 @@
'use client';
import { useState } from 'react';
import { useAuth } from '@/lib/hooks/useAuth';
import { Building2, Beaker, Mail, Plus } from 'lucide-react';
import { Input } from '@/components/ui/common/Input';
import { Button } from '@/components/ui/common/Button';
export function OrganizationSelectorContent() {
const { organizations, selectOrganization, createOrganization, isLoading, error, clearError } = useAuth();
const [isCreateOpen, setIsCreateOpen] = useState(false);
const [organizationName, setOrganizationName] = useState('');
const [organizationEmail, setOrganizationEmail] = useState('');
const [organizationType, setOrganizationType] = useState<'CLINIC' | 'LAB'>('CLINIC');
const getIcon = (type: string) =>
type === 'CLINIC' ? <Building2 className="h-8 w-8 icon-flat" /> : <Beaker className="h-8 w-8 icon-flat" />;
const handleCreateOrganization = async () => {
try {
clearError();
const createdId = await createOrganization(
organizationName.trim(),
organizationEmail.trim(),
organizationType,
);
setOrganizationName('');
setOrganizationEmail('');
setOrganizationType('CLINIC');
setIsCreateOpen(false);
await selectOrganization(createdId);
} catch {
// handled by auth context
}
};
if (isLoading) {
return <p className="text-text-secondary">Loading...</p>;
}
return (
<div className="space-y-6">
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<div>
<h1 className="text-3xl font-semibold text-text-primary">Organizations</h1>
<p className="text-text-secondary mt-2">
Select an organization to continue, or create a new one.
</p>
</div>
<Button
type="button"
variant={isCreateOpen ? 'outline' : 'primary'}
onClick={() => {
clearError();
setIsCreateOpen((prev) => !prev);
}}
>
<Plus className="h-4 w-4 mr-2 icon-flat" />
{isCreateOpen ? 'Cancel' : 'Create Organization'}
</Button>
</div>
{isCreateOpen && (
<div className="surface-card p-6 space-y-4">
<Input
label="Organization name"
value={organizationName}
onChange={(event) => setOrganizationName(event.target.value)}
placeholder="Sunshine Dental Clinic"
icon={<Building2 className="h-5 w-5 icon-flat" />}
/>
<Input
label="Organization email"
value={organizationEmail}
onChange={(event) => setOrganizationEmail(event.target.value)}
placeholder="contact@sunshineclinic.com"
type="email"
icon={<Mail className="h-5 w-5 icon-flat" />}
/>
<div>
<label className="block text-sm font-medium text-text-secondary mb-2">
Organization type
</label>
<div className="grid grid-cols-2 gap-3">
<button
type="button"
onClick={() => setOrganizationType('CLINIC')}
className={`p-3 border rounded-[var(--radius-md)] text-sm ${
organizationType === 'CLINIC'
? 'border-primary/60 bg-primary-soft text-text-primary'
: 'border-border text-text-secondary hover:border-border-strong'
}`}
>
Dental Clinic
</button>
<button
type="button"
onClick={() => setOrganizationType('LAB')}
className={`p-3 border rounded-[var(--radius-md)] text-sm ${
organizationType === 'LAB'
? 'border-primary/60 bg-primary-soft text-text-primary'
: 'border-border text-text-secondary hover:border-border-strong'
}`}
>
Dental Lab
</button>
</div>
</div>
{error && (
<div className="p-3 bg-red-950/30 border border-red-600/40 rounded-[var(--radius-md)]">
<p className="text-sm text-red-600">{error}</p>
</div>
)}
<div className="flex justify-end">
<Button
type="button"
variant="primary"
onClick={handleCreateOrganization}
isLoading={isLoading}
disabled={!organizationName.trim() || !organizationEmail.trim()}
>
Create and Continue
</Button>
</div>
</div>
)}
{!organizations.length ? (
<div className="surface-card p-8 text-center">
<p className="text-text-secondary">No organizations found. Create your first one to continue.</p>
</div>
) : (
<div className="grid gap-4">
{organizations.map((org) => (
<button
key={org.id}
onClick={() => selectOrganization(org.id)}
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">
{getIcon(org.type)}
</div>
<div className="flex-1">
<h3 className="text-lg font-semibold text-text-primary">
{org.name}
</h3>
<p className="text-sm text-text-secondary">
{org.type === 'CLINIC' ? 'Dental Clinic' : 'Dental Lab'}
</p>
</div>
<div className="text-primary text-sm">
Continue →
</div>
</button>
))}
</div>
)}
</div>
);
}

4
frontend/src/app/(dashboard)/patients/components/CreatePatientModal.tsx → frontend/src/components/ui/patient/CreatePatientModal.tsx
View File

@@ -1,7 +1,7 @@
'use client';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { Button } from '@/components/ui/common/Button';
import { Input } from '@/components/ui/common/Input';
import { CreatePatientInput } from '@/types/patient';
interface CreatePatientModalProps {

2
frontend/src/app/(dashboard)/patients/components/PatientSearchSelect.tsx → frontend/src/components/ui/patient/PatientSearchSelect.tsx
View File

@@ -1,7 +1,7 @@
'use client';
import { Search } from 'lucide-react';
import { Input } from '@/components/ui/Input';
import { Input } from '@/components/ui/common/Input';
import { Patient } from '@/types/patient';
interface PatientSearchSelectProps {

0
frontend/src/app/(dashboard)/patients/components/PatientSummaryCard.tsx → frontend/src/components/ui/patient/PatientSummaryCard.tsx
View File

0
frontend/src/app/(dashboard)/patients/components/TreatmentHistoryPreview.tsx → frontend/src/components/ui/patient/TreatmentHistoryPreview.tsx
View File

3
frontend/src/lib/api/auth.ts
View File

@@ -1,6 +1,7 @@
// src/lib/api/auth.ts
import { apiClient } from './client';
import { AuthResponse, TrialRegistrationData, LoginData, SubscriptionAlertData } from '@/types';
import type { AuthResponse, TrialRegistrationData, LoginData } from '@/types/auth';
import type { SubscriptionAlertData } from '@/types/subscription';
export const authApi = {
// Register a new trial organization

2
frontend/src/lib/api/client.ts
View File

@@ -1,6 +1,6 @@
// src/lib/api/client.ts
import axios, { AxiosError, InternalAxiosRequestConfig } from 'axios';
import { ApiError } from '@/types';
import type { ApiError } from '@/types/api';
interface CustomAxiosRequestConfig extends InternalAxiosRequestConfig {
_retry?: boolean;

2
frontend/src/lib/hooks/useAuth.tsx
View File

@@ -3,7 +3,7 @@
import React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
import { useRouter } from 'next/navigation';
import { authApi } from '@/lib/api/auth';
import { User, Organization } from '@/types';
import { User, Organization } from '@/types/organization';
interface AuthContextType {
user: User | null;

11
frontend/src/middleware.ts → frontend/src/proxy.ts
View File

@@ -1,29 +1,22 @@
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
const publicRoutes = ['/', '/login', '/register', '/terms', '/privacy', '/forgot-password'];
export function middleware(request: NextRequest) {
export function proxy(request: NextRequest) {
const { pathname } = request.nextUrl;
const token = request.cookies.get('accessToken')?.value;
const isAuthenticated = !!token;
// If a logged-in user opens home, send them to dashboard.
if (isAuthenticated && pathname === '/') {
return NextResponse.redirect(new URL('/today', request.url));
}
// Always allow public routes first. We intentionally do not block /login or /register
// when a cookie exists, because the cookie might be stale/invalid and the client
// auth check needs to recover gracefully.
if (publicRoutes.includes(pathname)) {
return NextResponse.next();
}
// Protected routes: redirect to login if no token
if (!isAuthenticated) {
// Prevent loop: if somehow redirecting to login from login, just continue
if (pathname === '/login') {
return NextResponse.next();
}
@@ -40,4 +33,4 @@ export const config = {
matcher: [
'/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)',
],
};
};

2
frontend/src/shared/permissions.ts
View File

@@ -1,4 +1,4 @@
import type { Organization } from '@/types';
import type { Organization } from '@/types/organization';
const ROUTE_TAB_READ: { prefix: string; permission: string }[] = [
{ prefix: '/today', permission: 'TAB_TODAY_READ' },

5
frontend/src/types/api.ts Normal file
View File

@@ -0,0 +1,5 @@
export interface ApiError {
statusCode: number;
message: string | string[];
error?: string;
}

25
frontend/src/types/auth.ts Normal file
View File

@@ -0,0 +1,25 @@
import type { Organization, User } from './organization';
export interface AuthResponse {
success: boolean;
data: {
accessToken: string;
refreshToken: string;
user: User;
organizations: Organization[];
};
}
export interface TrialRegistrationData {
email: string;
password: string;
name: string;
organizationName: string;
organizationEmail: string;
organizationType: 'CLINIC' | 'LAB';
}
export interface LoginData {
email: string;
password: string;
}

65
frontend/src/types/index.ts
View File

@@ -1,60 +1,5 @@
// src/types/index.ts
export interface User {
id: string;
email: string;
name: string;
}
export interface Organization {
id: string;
name: string;
type: 'CLINIC' | 'LAB';
isOwner: boolean;
permissions?: string[];
plan?: {
name: string;
maxUsers: number;
};
}
/** GET /auth/subscription-alert — owners only get meaningful flags */
export interface SubscriptionAlertData {
showWarning: boolean;
seatsLow: boolean;
trialEndingSoon: boolean;
trialExpired: boolean;
seatsUsed?: number;
seatsLimit?: number;
daysUntilTrialEnd?: number | null;
trialEndsAt?: string | null;
}
export interface AuthResponse {
success: boolean;
data: {
accessToken: string;
refreshToken: string;
user: User;
organizations: Organization[];
};
}
export interface TrialRegistrationData {
email: string;
password: string;
name: string;
organizationName: string;
organizationEmail: string;
organizationType: 'CLINIC' | 'LAB';
}
export interface LoginData {
email: string;
password: string;
}
export interface ApiError {
statusCode: number;
message: string | string[];
error?: string;
}
export * from './organization';
export * from './subscription';
export * from './auth';
export * from './api';
export * from './patient';

20
frontend/src/types/organization.ts Normal file
View File

@@ -0,0 +1,20 @@
export interface User {
id: string;
email: string;
name: string;
}
export interface OrganizationPlan {
name: string;
maxUsers: number;
price?: number;
}
export interface Organization {
id: string;
name: string;
type: 'CLINIC' | 'LAB';
isOwner: boolean;
permissions?: string[];
plan?: OrganizationPlan;
}

13
frontend/src/types/subscription.ts Normal file
View File

@@ -0,0 +1,13 @@
/** GET /auth/subscription-alert — owners only get meaningful flags */
export interface SubscriptionAlertData {
showWarning: boolean;
seatsLow: boolean;
trialEndingSoon: boolean;
trialExpired: boolean;
seatsUsed?: number;
seatsLimit?: number;
daysUntilTrialEnd?: number | null;
trialEndsAt?: string | null;
daysUntilPlanEnd?: number | null;
planEndsAt?: string | null;
}