@@ -69,27 +62,16 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
const DashboardHeader = memo(function DashboardHeader({
organizationName,
- userName,
- onLogout,
}: {
organizationName: string;
- userName: string;
- onLogout: () => void;
}) {
return (
-
-
+
{organizationName}
+{organizationName}
-
+
(null);
+
+ useEffect(() => {
+ if (currentOrganization && !currentOrganization.isOwner) {
+ router.replace('/today');
+ }
+ }, [currentOrganization, router]);
+
+ useEffect(() => {
+ if (!currentOrganization?.isOwner) return;
+ void authApi.getSubscriptionAlert().then((r) => {
+ if (r.success) setAlert(r.data);
+ });
+ }, [currentOrganization?.id, currentOrganization?.isOwner]);
+
+ if (!currentOrganization) {
+ return (
+ (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 (
+
+
+ );
+}
diff --git a/frontend/src/app/(dashboard)/settings/subscriptions/page.tsx b/frontend/src/app/(dashboard)/settings/subscriptions/page.tsx
new file mode 100644
index 0000000..7ac3bb3
--- /dev/null
+++ b/frontend/src/app/(dashboard)/settings/subscriptions/page.tsx
@@ -0,0 +1,103 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+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';
+
+export default function SubscriptionsSettingsPage() {
+ const { currentOrganization } = useAuth();
+ const router = useRouter();
+ const [alert, setAlert] = useState
+
+ ← Back to app
+
+
+
+ Account
++ Profile and security settings for your login. +
+
+
+ + Password change and profile editing will be wired here next (e.g. invite + flow, reset password). +
+Loading...
+ ); + } + + if (!currentOrganization.isOwner) { + return ( +Redirecting...
+ ); + } + + const plan = currentOrganization.plan; + const maxUsers = plan?.maxUsers; + + return ( +
+
+ );
+}
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
+
+ ← Back to app
+
+
+
+ Subscriptions
++ Your DyoLink workspace plan and seats for{' '} + {currentOrganization.name}. + Clinic and lab income tracking stays under the sidebar{' '} + Billing tab. +
+
+
+
+
+
+ {alert?.showWarning && (
+
+
+ {typeof maxUsers === 'number' && maxUsers < 999999 && (
+ Current plan
++ {plan?.name ?? '—'} +
+
+
+ )}
+ Seats (this org)
++ {alert?.seatsUsed ?? '—'} / {maxUsers} +
+
+ {alert.trialExpired && (
+
+ )}
+
+ Trial period has ended. Choose a plan when checkout is available.
+ )} + {!alert.trialExpired && alert.trialEndingSoon && ( ++ Trial ends in {alert.daysUntilTrialEnd ?? '—'} day(s). +
+ )} + {!alert.trialExpired && !alert.trialEndingSoon && alert.seatsLow && ( +Seat usage is high for this organization.
+ )} ++ Payment and plan upgrades will connect here. The warning on the settings + icon is only shown to workspace owners when seats are low or the trial window + is ending. +
+
+
+
+ {open && (
+
+ );
+}
diff --git a/frontend/src/components/ui/Sidebar.tsx b/frontend/src/components/ui/Sidebar.tsx
index 9078bf8..79d8d82 100644
--- a/frontend/src/components/ui/Sidebar.tsx
+++ b/frontend/src/components/ui/Sidebar.tsx
@@ -11,7 +11,6 @@ import {
FlaskConical,
FileText,
CreditCard,
- Building2
} from 'lucide-react';
const menu = [
@@ -22,19 +21,19 @@ const menu = [
{ name: 'Lab Management', path: '/lab', icon: FlaskConical },
{ name: 'Billing', path: '/billing', icon: CreditCard },
{ name: 'Reports', path: '/reports', icon: FileText },
- { name: 'Organizations', path: '/select-organization', icon: Building2 },
];
function Sidebar() {
const pathname = usePathname();
return (
-
+
+ )}
+
+
+
+ Signed in
+{user?.email}
++ {currentOrganization?.name} +
+
+ setOpen(false)}
+ >
+
+
+
+
+
+