- You have access to multiple organizations. Select one to continue.
-
+
+
+
+
Organizations
+
+ Select an organization to continue, or create a new one.
+
+
+
{
+ clearError();
+ setIsCreateOpen(prev => !prev);
+ }}
+ >
+
-
- {organizations.map((org) => (
-
selectOrganization(org.id)}
- className="surface-card p-6 transition-all text-left flex items-center gap-4 hover:border-primary/60"
- >
-
- {getIcon(org.type)}
+ {isCreateOpen && (
+
+
setOrganizationName(event.target.value)}
+ placeholder="Sunshine Dental Clinic"
+ icon={
}
+ />
+
setOrganizationEmail(event.target.value)}
+ placeholder="contact@sunshineclinic.com"
+ type="email"
+ icon={
}
+ />
+
+
+ Organization type
+
+
+ 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
+
+ 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
+
+
+ {error && (
+
+ )}
+
+
+ Create and Continue
+
+
+
+ )}
-
-
- {org.name}
-
-
- {org.type === 'CLINIC' ? 'Dental Clinic' : 'Dental Lab'}
-
-
+ {!organizations.length ? (
+
+
No organizations found. Create your first one to continue.
+
+ ) : (
+
+ {organizations.map((org) => (
+
selectOrganization(org.id)}
+ className="surface-card p-6 transition-all text-left flex items-center gap-4 hover:border-primary/60"
+ >
+
+ {getIcon(org.type)}
+
-
- Continue →
-
-
- ))}
-
+
+
+ {org.name}
+
+
+ {org.type === 'CLINIC' ? 'Dental Clinic' : 'Dental Lab'}
+
+
+
+
+ Continue →
+
+
+ ))}
+
);
diff --git a/frontend/src/components/ui/DashboardAccountMenu.tsx b/frontend/src/components/ui/DashboardAccountMenu.tsx
new file mode 100644
index 0000000..ec0f9ec
--- /dev/null
+++ b/frontend/src/components/ui/DashboardAccountMenu.tsx
@@ -0,0 +1,156 @@
+'use client';
+
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import Link from 'next/link';
+import {
+ Settings,
+ AlertTriangle,
+ Building2,
+ CreditCard,
+ User,
+ LogOut,
+ ChevronDown,
+} from 'lucide-react';
+import { useAuth } from '@/lib/hooks/useAuth';
+import { authApi } from '@/lib/api/auth';
+import type { SubscriptionAlertData } from '@/types';
+
+function warningTooltip(data: SubscriptionAlertData | null): string {
+ if (!data?.showWarning) return '';
+ if (data.trialExpired) return 'Trial ended — review Subscriptions';
+ if (data.trialEndingSoon) return 'Trial ending soon — review Subscriptions';
+ if (data.seatsLow) return 'Seats running low — review Subscriptions';
+ return 'Review Subscriptions';
+}
+
+export function DashboardAccountMenu() {
+ const { user, currentOrganization, logout } = useAuth();
+ const [open, setOpen] = useState(false);
+ const menuRef = useRef
(null);
+ const [alert, setAlert] = useState(null);
+ const isOwner = currentOrganization?.isOwner ?? false;
+
+ useEffect(() => {
+ const onDocClick = (e: MouseEvent) => {
+ if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+ setOpen(false);
+ }
+ };
+ document.addEventListener('mousedown', onDocClick);
+ return () => document.removeEventListener('mousedown', onDocClick);
+ }, []);
+
+ useEffect(() => {
+ if (!isOwner || !currentOrganization) {
+ setAlert(null);
+ return;
+ }
+ let cancelled = false;
+ void (async () => {
+ try {
+ const res = await authApi.getSubscriptionAlert();
+ if (!cancelled && res.success) setAlert(res.data);
+ } catch {
+ if (!cancelled) setAlert(null);
+ }
+ })();
+ return () => {
+ cancelled = true;
+ };
+ }, [isOwner, currentOrganization?.id]);
+
+ const showWarning = Boolean(isOwner && alert?.showWarning);
+ const tooltip = useMemo(() => warningTooltip(alert), [alert]);
+
+ const handleLogout = useCallback(() => {
+ setOpen(false);
+ void logout();
+ }, [logout]);
+
+ return (
+
+
setOpen((v) => !v)}
+ className="inline-flex items-center gap-2 rounded-[var(--radius-md)] border border-border/70 px-3 py-2 text-sm text-text-primary hover:bg-background-card/80 transition-colors"
+ aria-expanded={open}
+ aria-haspopup="menu"
+ >
+
+
+
+ )}
+
+ {user?.name}
+
+
+ {open && (
+
+
+
Signed in
+
{user?.email}
+
+ {currentOrganization?.name}
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
-
-
DyoLink
+
+
+
DyoLink
+
-
+
{menu.map((item) => {
const Icon = item.icon;
const isActive = pathname === item.path;
diff --git a/frontend/src/lib/api/auth.ts b/frontend/src/lib/api/auth.ts
index 89d18c3..fae6744 100644
--- a/frontend/src/lib/api/auth.ts
+++ b/frontend/src/lib/api/auth.ts
@@ -1,6 +1,6 @@
// src/lib/api/auth.ts
import { apiClient } from './client';
-import { AuthResponse, TrialRegistrationData, LoginData } from '@/types';
+import { AuthResponse, TrialRegistrationData, LoginData, SubscriptionAlertData } from '@/types';
export const authApi = {
// Register a new trial organization
@@ -21,12 +21,32 @@ export const authApi = {
return response.data;
},
+ /** Owner-only meaningful data; staff always gets showWarning: false */
+ getSubscriptionAlert: async (): Promise<{
+ success: boolean;
+ data: SubscriptionAlertData;
+ }> => {
+ const response = await apiClient.get('/auth/subscription-alert');
+ return response.data;
+ },
+
// Select organization
selectOrganization: async (organizationId: string): Promise => {
const response = await apiClient.post('/auth/select-organization', { organizationId });
return response.data;
},
+ // Create organization for current user
+ createOrganization: async (data: {
+ organizationName: string;
+ organizationEmail: string;
+ organizationType: 'CLINIC' | 'LAB';
+ planName?: string;
+ }): Promise => {
+ const response = await apiClient.post('/auth/organizations', data);
+ return response.data;
+ },
+
// Logout
logout: async (): Promise => {
await apiClient.post('/auth/logout');
diff --git a/frontend/src/lib/hooks/useAuth.tsx b/frontend/src/lib/hooks/useAuth.tsx
index 58be0ac..852e442 100644
--- a/frontend/src/lib/hooks/useAuth.tsx
+++ b/frontend/src/lib/hooks/useAuth.tsx
@@ -17,11 +17,18 @@ interface AuthContextType {
password: string,
name: string,
organizationName: string,
+ organizationEmail: string,
organizationType: 'CLINIC' | 'LAB'
) => Promise;
login: (email: string, password: string) => Promise;
logout: () => Promise;
selectOrganization: (orgId: string) => Promise;
+ createOrganization: (
+ organizationName: string,
+ organizationEmail: string,
+ organizationType: 'CLINIC' | 'LAB',
+ planName?: string,
+ ) => Promise;
clearError: () => void;
}
@@ -111,6 +118,7 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
password: string,
name: string,
organizationName: string,
+ organizationEmail: string,
organizationType: 'CLINIC' | 'LAB'
) => {
try {
@@ -122,6 +130,7 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
password,
name,
organizationName,
+ organizationEmail,
organizationType,
});
@@ -209,7 +218,13 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
localStorage.setItem('currentOrganizationId', organization.id);
- setCurrentOrganization(organization);
+ setCurrentOrganization({
+ id: organization.id,
+ name: organization.name,
+ type: organization.type as Organization['type'],
+ isOwner: Boolean((organization as { isOwner?: boolean }).isOwner),
+ plan: (organization as { plan?: Organization['plan'] }).plan,
+ });
router.push('/today');
@@ -221,6 +236,39 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
}
}, [router]);
+ const createOrganization = useCallback(async (
+ organizationName: string,
+ organizationEmail: string,
+ organizationType: 'CLINIC' | 'LAB',
+ planName?: string,
+ ) => {
+ try {
+ setIsLoading(true);
+ setError(null);
+
+ const createResponse = await authApi.createOrganization({
+ organizationName,
+ organizationEmail,
+ organizationType,
+ planName,
+ });
+
+ const profileResponse = await authApi.getProfile();
+ if (profileResponse.success) {
+ const { user: userData, organizations: orgs } = normalizeProfilePayload(profileResponse.data);
+ setUser(userData);
+ setOrganizations(orgs);
+ }
+
+ return createResponse.data.organization.id as string;
+ } catch (err: any) {
+ setError(err.message || 'Failed to create organization');
+ throw err;
+ } finally {
+ setIsLoading(false);
+ }
+ }, [normalizeProfilePayload]);
+
const clearError = useCallback(() => setError(null), []);
const contextValue = useMemo(
@@ -235,6 +283,7 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
login,
logout,
selectOrganization,
+ createOrganization,
clearError,
}),
[
@@ -248,6 +297,7 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
login,
logout,
selectOrganization,
+ createOrganization,
clearError,
],
);
diff --git a/frontend/src/middleware.ts b/frontend/src/middleware.ts
index d067010..27b6361 100644
--- a/frontend/src/middleware.ts
+++ b/frontend/src/middleware.ts
@@ -3,7 +3,6 @@ import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
const publicRoutes = ['/', '/login', '/register', '/terms', '/privacy', '/forgot-password'];
-const authOnlyRoutes = ['/login', '/register']; // routes that should NOT be accessed when logged in
export function middleware(request: NextRequest) {
const { pathname } = request.nextUrl;
@@ -15,12 +14,10 @@ export function middleware(request: NextRequest) {
return NextResponse.redirect(new URL('/today', request.url));
}
- // Always allow public routes first
+ // 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)) {
- // If user is already logged in and tries to access login/register → redirect to dashboard
- if (isAuthenticated && authOnlyRoutes.includes(pathname)) {
- return NextResponse.redirect(new URL('/today', request.url));
- }
return NextResponse.next();
}
diff --git a/frontend/src/styles/globals.css b/frontend/src/styles/globals.css
index 33b62ff..27dc929 100644
--- a/frontend/src/styles/globals.css
+++ b/frontend/src/styles/globals.css
@@ -2,9 +2,9 @@
/* Light theme tokens (future-ready) */
:root[data-theme="light"] {
- --radius-sm: 6px;
- --radius-md: 8px;
- --radius-lg: 12px;
+ --radius-sm: 4px;
+ --radius-md: 6px;
+ --radius-lg: 8px;
--color-background-primary: #f6f9fc;
--color-background-secondary: #ffffff;
@@ -45,7 +45,7 @@
--color-primary: #09a9bc;
--color-primary-contrast: #001117;
--color-primary-soft: rgba(9, 169, 188, 0.2);
- --color-icon: #f3bb4b;
+ --color-icon: #e1bc72;
}
/* Default theme = dark */
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
index b3743f9..3100c77 100644
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -10,12 +10,25 @@ export interface Organization {
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: {
@@ -31,6 +44,7 @@ export interface TrialRegistrationData {
password: string;
name: string;
organizationName: string;
+ organizationEmail: string;
organizationType: 'CLINIC' | 'LAB';
}