Positioning, sizing and sorting of the gadgets improved.

2026-07-11 22:32:37 +03:30
parent ed8ff61205
commit 83f6003a2b
35 changed files with 1615 additions and 678 deletions
--- a/frontend/src/app/[locale]/(dashboard)/appointments/page.tsx
+++ b/frontend/src/app/[locale]/(dashboard)/appointments/page.tsx
@@ -189,6 +189,9 @@ export default function AppointmentsPage() {
  }

  function handleSlotClick(startMinute: number, providerUserId: string, providerName: string) {
+    if (!canManageAppointments) {
+      return;
+    }
    if (isViewingPastDay) {
      toast.showInfo(t('infoPastViewOnly'));
      return;
@@ -205,6 +208,9 @@ export default function AppointmentsPage() {
  }

  function handleAppointmentClick(appointment: AppointmentRecord) {
+    if (!canManageAppointments) {
+      return;
+    }
    if (isViewingPastDay) {
      toast.showInfo(t('infoPastViewOnly'));
      return;
--- a/frontend/src/app/[locale]/(dashboard)/today/page.tsx
+++ b/frontend/src/app/[locale]/(dashboard)/today/page.tsx
@@ -4,18 +4,8 @@ import { useMemo } from 'react';
 import { useTranslations } from 'next-intl';
 import { Link } from '@/i18n/navigation';
 import { useAuth } from '@/lib/hooks/useAuth';
-import {
-  canAccessAppointmentsSection,
-  canViewAppointmentsTab,
-  canViewCases,
-  canViewLabCasesOrTasks,
-  canViewTasks,
-  canViewTreatment,
-} from '@/components/shared/permissions';
 import { formatApiErrorMessage } from '@/components/shared/formatApiError';
-import { TodayKpiGrid } from '@/components/today/TodayKpiGrid';
-import { TodayChartsSection } from '@/components/today/TodayChartsSection';
-import { TodayUpcomingAppointments } from '@/components/today/TodayUpcomingAppointments';
+import { TodayDashboard } from '@/components/today/TodayDashboard';
 import { TodayLoadErrorBanner } from '@/components/today/TodayLoadErrorBanner';
 import { TodaySectionErrorFallback } from '@/components/today/TodaySectionErrorFallback';
 import { TodayWidgetErrorBoundary } from '@/components/today/TodayWidgetErrorBoundary';
@@ -27,29 +17,10 @@ export default function TodayPage() {
  const orgId = currentOrganization?.id;
  const { data, loading, isInitialLoad, error, reload } = useTodaySummary(orgId);

-  const showNoSubscriptionNotice =
-    Boolean(currentOrganization?.isOwner) && !currentOrganization?.plan;
-
-  const showUpcoming =
-    currentOrganization?.type === 'CLINIC' && canViewTreatment(currentOrganization);
-  const showCharts = useMemo(() => {
-    const orgType = currentOrganization?.type;
-    if (!orgType) return false;
-
-    if (orgType === 'CLINIC') {
-      return (
-        canAccessAppointmentsSection(currentOrganization) ||
-        canViewAppointmentsTab(currentOrganization) ||
-        canViewTreatment(currentOrganization)
-      );
-    }
-
-    return (
-      canViewCases(currentOrganization) ||
-      canViewTasks(currentOrganization) ||
-      canViewLabCasesOrTasks(currentOrganization)
-    );
-  }, [currentOrganization]);
+  const showNoSubscriptionNotice = useMemo(
+    () => Boolean(currentOrganization?.isOwner) && !currentOrganization?.plan,
+    [currentOrganization],
+  );

  const sectionErrorMessage = t('sectionLoadError');

@@ -93,47 +64,16 @@ export default function TodayPage() {
      <TodayWidgetErrorBoundary
        fallback={<TodaySectionErrorFallback message={sectionErrorMessage} />}
      >
-        <TodayKpiGrid
+        <TodayDashboard
          widgets={data?.widgets ?? {}}
+          charts={data?.charts ?? {}}
+          actions={data?.actions ?? {}}
+          subscription={data?.subscription}
          loading={loading}
          isInitialLoad={isInitialLoad}
          hasError={Boolean(error)}
        />
      </TodayWidgetErrorBoundary>
-
-      {showUpcoming && (!error || data) ? (
-        <TodayWidgetErrorBoundary
-          fallback={<TodaySectionErrorFallback message={sectionErrorMessage} />}
-        >
-          <div
-            className={`grid grid-cols-1 gap-4 lg:grid-cols-2 ${loading ? 'opacity-70 transition-opacity' : ''}`}
-          >
-            <TodayUpcomingAppointments
-              actions={data?.actions ?? {}}
-              loading={loading}
-              isInitialLoad={isInitialLoad}
-            />
-            {showCharts ? (
-              <TodayChartsSection
-                charts={data?.charts ?? {}}
-                loading={loading}
-                isInitialLoad={isInitialLoad}
-                embedded
-              />
-            ) : null}
-          </div>
-        </TodayWidgetErrorBoundary>
-      ) : showCharts && (!error || data) ? (
-        <TodayWidgetErrorBoundary
-          fallback={<TodaySectionErrorFallback message={sectionErrorMessage} />}
-        >
-          <TodayChartsSection
-            charts={data?.charts ?? {}}
-            loading={loading}
-            isInitialLoad={isInitialLoad}
-          />
-        </TodayWidgetErrorBoundary>
-      ) : null}
    </div>
  );
 }
--- a/frontend/src/components/shared/permissions.ts
+++ b/frontend/src/components/shared/permissions.ts
@@ -118,8 +118,7 @@ export function canViewStaff(org: Organization | null): boolean {
 }

 /**
- * Create/delete/book slots: owners, appointment editors, or treatment editors (schedule columns).
- * Aligns with backend appointment mutations.
+ * Create/delete/book slots: owners or staff with TAB_APPOINTMENTS_EDIT only.
 */
 export function canEditAppointments(org: Organization | null): boolean {
  if (!org) {
@@ -131,29 +130,12 @@ export function canEditAppointments(org: Organization | null): boolean {
  if (org.isOwner) {
    return true;
  }
-  return (
-    hasPermission(org, 'TAB_APPOINTMENTS_EDIT') ||
-    hasPermission(org, 'TAB_TREATMENT_EDIT')
-  );
+  return hasPermission(org, 'TAB_APPOINTMENTS_EDIT');
 }

-/** Route + sidebar: view appointments page if user can read appointments or manage treatment (column staff). */
+/** Route + sidebar: appointments tab requires TAB_APPOINTMENTS_READ or TAB_APPOINTMENTS_EDIT. */
 export function canAccessAppointmentsSection(org: Organization | null): boolean {
-  if (!org) {
-    return false;
-  }
-  if (org.type !== 'CLINIC') {
-    return false;
-  }
-  if (org.isOwner) {
-    return true;
-  }
-  return (
-    hasPermission(org, 'TAB_APPOINTMENTS_READ') ||
-    hasPermission(org, 'TAB_APPOINTMENTS_EDIT') ||
-    hasPermission(org, 'TAB_TREATMENT_EDIT') ||
-    hasPermission(org, 'TAB_TREATMENT_READ')
-  );
+  return canViewAppointmentsTab(org);
 }

 /** Treatment composer, scheduling columns, and saving clinical workflows */
--- a/frontend/src/components/today/ChartCard.tsx
+++ b/frontend/src/components/today/ChartCard.tsx
@@ -24,8 +24,8 @@ export function ChartCard({
  }

  return (
-    <Card className="min-h-[280px] flex flex-col">
-      <div className="mb-4">
+    <Card className="flex h-full min-h-0 flex-col overflow-hidden">
+      <div className="mb-4 shrink-0">
        <h2 className="text-base font-semibold text-card-foreground">{title}</h2>
        {subtitle ? (
          <p className="text-xs text-text-muted mt-1">{subtitle}</p>
@@ -33,11 +33,11 @@ export function ChartCard({
      </div>

      {isEmpty ? (
-        <div className="flex-1 min-h-[220px] flex items-center justify-center rounded-[var(--radius-md)] border border-dashed border-border/50 bg-background-secondary/20">
+        <div className="flex min-h-0 flex-1 items-center justify-center rounded-[var(--radius-md)] border border-dashed border-border/50 bg-background-secondary/20">
          <p className="text-sm text-text-muted text-center px-4">{emptyMessage}</p>
        </div>
      ) : (
-        <div className="flex flex-1 min-h-[220px] flex-col">{children}</div>
+        <div className="flex min-h-0 flex-1 flex-col">{children}</div>
      )}
    </Card>
  );
--- a/frontend/src/components/today/KpiCard.tsx
+++ b/frontend/src/components/today/KpiCard.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { Link } from '@/i18n/navigation';
 import { Card } from '@/components/ui/shared/Card';
 import type { KpiCardColor } from '@/components/today/widget-registry';
@@ -20,6 +22,7 @@ interface KpiCardProps {
  color?: KpiCardColor;
  loading?: boolean;
  href?: string;
+  className?: string;
 }

 export function KpiCard({
@@ -30,10 +33,11 @@ export function KpiCard({
  color = 'default',
  loading = false,
  href,
+  className = '',
 }: KpiCardProps) {
  const card = (
    <Card
-      className={`${colorClasses[color]} ${href && !loading ? 'transition-opacity hover:opacity-90' : ''}`}
+      className={`h-full ${colorClasses[color]} ${href && !loading ? 'transition-opacity hover:opacity-90' : ''} ${className}`}
    >
      <div className="flex items-start justify-between gap-3">
        <p className="text-sm font-medium">{title}</p>
@@ -57,7 +61,10 @@ export function KpiCard({

  if (href && !loading) {
    return (
-      <Link href={href} className="block focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60 rounded-[var(--radius-lg)]">
+      <Link
+        href={href}
+        className="block h-full cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60 rounded-[var(--radius-lg)]"
+      >
        {card}
      </Link>
    );
--- a/frontend/src/components/today/TodayAreaChart.tsx
+++ b/frontend/src/components/today/TodayAreaChart.tsx
@@ -9,6 +9,7 @@ import {
  XAxis,
  YAxis,
 } from 'recharts';
+import { TodayChartFrame } from '@/components/today/TodayChartFrame';
 import type { TodayChartBucket } from '@/types/today';
 import {
  TODAY_CHART_AXIS_COLOR,
@@ -23,44 +24,46 @@ interface TodayAreaChartProps {

 export function TodayAreaChart({ data }: TodayAreaChartProps) {
  return (
-    <ResponsiveContainer width="100%" height={220}>
-      <AreaChart data={data} margin={{ top: 8, right: 8, left: -12, bottom: 0 }}>
-        <defs>
-          <linearGradient id="todayAreaFill" x1="0" y1="0" x2="0" y2="1">
-            <stop offset="0%" stopColor={TODAY_CHART_PRIMARY_COLOR} stopOpacity={0.45} />
-            <stop offset="100%" stopColor={TODAY_CHART_PRIMARY_COLOR} stopOpacity={0.05} />
-          </linearGradient>
-        </defs>
-        <CartesianGrid stroke={TODAY_CHART_GRID_COLOR} vertical={false} />
-        <XAxis
-          dataKey="label"
-          tick={{ fill: TODAY_CHART_AXIS_COLOR, fontSize: 11 }}
-          axisLine={{ stroke: TODAY_CHART_GRID_COLOR }}
-          tickLine={false}
-          interval={1}
-        />
-        <YAxis
-          allowDecimals={false}
-          tick={{ fill: TODAY_CHART_AXIS_COLOR, fontSize: 11 }}
-          axisLine={false}
-          tickLine={false}
-          width={32}
-        />
-        <Tooltip
-          cursor={{ stroke: 'rgba(0, 188, 255, 0.25)' }}
-          contentStyle={TODAY_CHART_TOOLTIP_STYLE}
-          labelFormatter={(label) => String(label)}
-        />
-        <Area
-          type="monotone"
-          dataKey="count"
-          stroke={TODAY_CHART_PRIMARY_COLOR}
-          strokeWidth={2}
-          fill="url(#todayAreaFill)"
-          dot={{ r: 3, fill: TODAY_CHART_PRIMARY_COLOR, strokeWidth: 0 }}
-          activeDot={{ r: 5, fill: TODAY_CHART_PRIMARY_COLOR }}
-        />
-      </AreaChart>
-    </ResponsiveContainer>
+    <TodayChartFrame>
+      <ResponsiveContainer width="100%" height="100%">
+        <AreaChart data={data} margin={{ top: 8, right: 8, left: -12, bottom: 0 }}>
+          <defs>
+            <linearGradient id="todayAreaFill" x1="0" y1="0" x2="0" y2="1">
+              <stop offset="0%" stopColor={TODAY_CHART_PRIMARY_COLOR} stopOpacity={0.45} />
+              <stop offset="100%" stopColor={TODAY_CHART_PRIMARY_COLOR} stopOpacity={0.05} />
+            </linearGradient>
+          </defs>
+          <CartesianGrid stroke={TODAY_CHART_GRID_COLOR} vertical={false} />
+          <XAxis
+            dataKey="label"
+            tick={{ fill: TODAY_CHART_AXIS_COLOR, fontSize: 11 }}
+            axisLine={{ stroke: TODAY_CHART_GRID_COLOR }}
+            tickLine={false}
+            interval={1}
+          />
+          <YAxis
+            allowDecimals={false}
+            tick={{ fill: TODAY_CHART_AXIS_COLOR, fontSize: 11 }}
+            axisLine={false}
+            tickLine={false}
+            width={32}
+          />
+          <Tooltip
+            cursor={{ stroke: 'rgba(0, 188, 255, 0.25)' }}
+            contentStyle={TODAY_CHART_TOOLTIP_STYLE}
+            labelFormatter={(label) => String(label)}
+          />
+          <Area
+            type="monotone"
+            dataKey="count"
+            stroke={TODAY_CHART_PRIMARY_COLOR}
+            strokeWidth={2}
+            fill="url(#todayAreaFill)"
+            dot={{ r: 3, fill: TODAY_CHART_PRIMARY_COLOR, strokeWidth: 0 }}
+            activeDot={{ r: 5, fill: TODAY_CHART_PRIMARY_COLOR }}
+          />
+        </AreaChart>
+      </ResponsiveContainer>
+    </TodayChartFrame>
  );
 }
--- a/frontend/src/components/today/TodayBarChart.tsx
+++ b/frontend/src/components/today/TodayBarChart.tsx
@@ -11,6 +11,7 @@ import {
  YAxis,
 } from 'recharts';
 import type { TodayChartBucket } from '@/types/today';
+import { TodayChartFrame } from '@/components/today/TodayChartFrame';
 import {
  TODAY_CHART_AXIS_COLOR,
  TODAY_CHART_COLORS,
@@ -31,11 +32,12 @@ export function TodayBarChart({ data, colorForCode }: TodayBarChartProps) {
  }));

  return (
-    <ResponsiveContainer width="100%" height={220}>
-      <BarChart
-        data={chartData}
-        margin={{ top: 8, right: 8, left: -12, bottom: 0 }}
-      >
+    <TodayChartFrame>
+      <ResponsiveContainer width="100%" height="100%">
+        <BarChart
+          data={chartData}
+          margin={{ top: 8, right: 8, left: -12, bottom: 0 }}
+        >
        <CartesianGrid stroke={TODAY_CHART_GRID_COLOR} vertical={false} />
        <XAxis
          dataKey="shortLabel"
@@ -105,7 +107,8 @@ export function TodayBarChart({ data, colorForCode }: TodayBarChartProps) {
          ))}
        </Bar>
      </BarChart>
-    </ResponsiveContainer>
+      </ResponsiveContainer>
+    </TodayChartFrame>
  );
 }

--- a/frontend/src/components/today/TodayCaseCompletionKpiCard.tsx
+++ b/frontend/src/components/today/TodayCaseCompletionKpiCard.tsx
@@ -0,0 +1,59 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+import { Package } from 'lucide-react';
+import { Link } from '@/i18n/navigation';
+import { Card } from '@/components/ui/shared/Card';
+import { TODAY_CHART_COMPLETED_COLOR } from '@/components/today/chart-theme';
+import { TodayRadialGaugeChart } from '@/components/today/TodayRadialGaugeChart';
+
+interface TodayCaseCompletionKpiCardProps {
+  completed: number;
+  total: number;
+  percent: number;
+}
+
+export function TodayCaseCompletionKpiCard({
+  completed,
+  total,
+  percent,
+}: TodayCaseCompletionKpiCardProps) {
+  const t = useTranslations('today');
+
+  const percentLabel =
+    total > 0 ? t('chartCaseCompletionPercent', { percent }) : '—';
+
+  return (
+    <Link
+      href="/cases"
+      className="block h-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60 rounded-[var(--radius-lg)]"
+    >
+      <Card className="flex h-full min-h-0 flex-col transition-opacity hover:opacity-90">
+        <div className="flex items-start justify-between gap-3">
+          <div className="min-w-0">
+            <p className="text-sm font-medium">{t('chartCaseCompletionTitle')}</p>
+            <p className="mt-0.5 truncate text-xs text-text-muted">
+              {t('chartCaseCompletionSubtitle')}
+            </p>
+          </div>
+          <Package className="h-4 w-4 shrink-0 !text-current" aria-hidden />
+        </div>
+
+        <div className="mt-2 flex min-h-0 flex-1 items-center justify-center">
+          <div className="w-1/2 min-w-0">
+            <TodayRadialGaugeChart
+              size="sm"
+              percent={total > 0 ? percent : 0}
+              completed={completed}
+              total={total}
+              percentLabel={percentLabel}
+              tasksLabel={t('chartCaseCompletionTasks')}
+              fillColor={TODAY_CHART_COMPLETED_COLOR}
+              showRatio={total > 0}
+            />
+          </div>
+        </div>
+      </Card>
+    </Link>
+  );
+}
--- a/frontend/src/components/today/TodayChartFrame.tsx
+++ b/frontend/src/components/today/TodayChartFrame.tsx
@@ -0,0 +1,8 @@
+'use client';
+
+import type { ReactNode } from 'react';
+
+/** Fills the chart area inside a dashboard chart card (flex child). */
+export function TodayChartFrame({ children }: { children: ReactNode }) {
+  return <div className="h-full min-h-0 w-full flex-1">{children}</div>;
+}
--- a/frontend/src/components/today/TodayChartsSection.tsx
+++ b/frontend/src/components/today/TodayChartsSection.tsx
@@ -1,243 +0,0 @@
-'use client';
-
-import { useMemo } from 'react';
-import { useTranslations } from 'next-intl';
-import { useAuth } from '@/lib/hooks/useAuth';
-import { ChartCard } from '@/components/today/ChartCard';
-import { TodayAreaChart } from '@/components/today/TodayAreaChart';
-import { TodayBarChart } from '@/components/today/TodayBarChart';
-import {
-  formatTodayChartDayLabel,
-  mapWeekChartBuckets,
-  useTodayDayLabelFormatter,
-} from '@/components/today/chart-day-labels';
-import { TodayDonutChart } from '@/components/today/TodayDonutChart';
-import { TodayHorizontalBarChart } from '@/components/today/TodayHorizontalBarChart';
-import { TodayRadialGaugeChart } from '@/components/today/TodayRadialGaugeChart';
-import { TodayStackedBarChart } from '@/components/today/TodayStackedBarChart';
-import { ChartCardSkeleton } from '@/components/today/TodaySkeleton';
-import { prosthesisTypeColor, prosthesisTypeSwatchStyle } from '@/components/ui/treatment/prosthesisTypeDisplay';
-import { treatmentTypeColor } from '@/components/ui/treatment/treatmentTypeDisplay';
-import type { TodaySummaryCharts } from '@/types/today';
-
-interface TodayChartsSectionProps {
-  charts: TodaySummaryCharts;
-  loading?: boolean;
-  isInitialLoad?: boolean;
-  className?: string;
-  /** When true, chart cards render as siblings (no outer grid wrapper). */
-  embedded?: boolean;
-}
-
-export function TodayChartsSection({
-  charts,
-  loading = false,
-  isInitialLoad = false,
-  className = '',
-  embedded = false,
-}: TodayChartsSectionProps) {
-  const t = useTranslations('today');
-  const dayLabelFormatter = useTodayDayLabelFormatter();
-  const { currentOrganization } = useAuth();
-  const orgType = currentOrganization?.type;
-
-  const showAppointmentsByProvider =
-    orgType === 'CLINIC' && charts.appointmentsByProvider !== undefined;
-  const showAppointmentsWeekAll =
-    orgType === 'CLINIC' && charts.appointmentsWeekAll !== undefined;
-  const showAppointmentsWeekMine =
-    orgType === 'CLINIC' && charts.appointmentsWeekMine !== undefined;
-  const showTreatmentMix =
-    orgType === 'CLINIC' && charts.treatmentMixWeek !== undefined;
-  const showCaseCompletion =
-    orgType === 'LAB' && charts.caseCompletion !== undefined;
-  const showTasksByStep =
-    orgType === 'LAB' && charts.tasksByWorkflowStep !== undefined;
-  const showLabTaskActivityWeek =
-    orgType === 'LAB' && charts.labTaskActivityWeek !== undefined;
-  const showInProgressTasksByProsthesis =
-    orgType === 'LAB' && charts.inProgressTasksByProsthesis !== undefined;
-
-  const visibleChartCount =
-    Number(showAppointmentsByProvider) +
-    Number(showAppointmentsWeekAll) +
-    Number(showAppointmentsWeekMine) +
-    Number(showTreatmentMix) +
-    Number(showCaseCompletion) +
-    Number(showTasksByStep) +
-    Number(showLabTaskActivityWeek) +
-    Number(showInProgressTasksByProsthesis);
-
-  const appointmentsByProviderData = charts.appointmentsByProvider ?? [];
-  const appointmentsWeekAllData = useMemo(
-    () => mapWeekChartBuckets(charts.appointmentsWeekAll ?? [], dayLabelFormatter),
-    [charts.appointmentsWeekAll, dayLabelFormatter],
-  );
-  const appointmentsWeekMineData = useMemo(
-    () => mapWeekChartBuckets(charts.appointmentsWeekMine ?? [], dayLabelFormatter),
-    [charts.appointmentsWeekMine, dayLabelFormatter],
-  );
-  const treatmentData = charts.treatmentMixWeek ?? [];
-  const tasksData = charts.tasksByWorkflowStep ?? [];
-  const labTaskActivityData = useMemo(
-    () => mapWeekChartBuckets(charts.labTaskActivityWeek ?? [], dayLabelFormatter),
-    [charts.labTaskActivityWeek, dayLabelFormatter],
-  );
-  const prosthesisData = charts.inProgressTasksByProsthesis ?? [];
-  const caseCompletion = charts.caseCompletion ?? { completed: 0, total: 0, percent: 0 };
-
-  const formatDayLabel = (code: string) =>
-    formatTodayChartDayLabel(code, dayLabelFormatter);
-
-  if (visibleChartCount === 0) {
-    return null;
-  }
-
-  if (isInitialLoad) {
-    const skeletons = Array.from({ length: Math.min(visibleChartCount, 4) }).map((_, index) => (
-      <ChartCardSkeleton key={index} />
-    ));
-
-    if (embedded) {
-      return <>{skeletons}</>;
-    }
-
-    return (
-      <div className={`grid grid-cols-1 gap-4 lg:grid-cols-2 ${className}`}>{skeletons}</div>
-    );
-  }
-
-  const gridClass =
-    visibleChartCount > 1 ? 'grid grid-cols-1 lg:grid-cols-2' : 'grid grid-cols-1';
-
-  const chartCards = (
-    <>
-      {showAppointmentsWeekAll ? (
-        <ChartCard
-          title={t('chartAppointmentsWeekAllTitle')}
-          subtitle={t('chartAppointmentsWeekAllSubtitle')}
-          isEmpty={appointmentsWeekAllData.every((row) => row.count === 0)}
-          emptyMessage={t('chartEmpty')}
-        >
-          <TodayAreaChart data={appointmentsWeekAllData} />
-        </ChartCard>
-      ) : null}
-
-      {showAppointmentsWeekMine ? (
-        <ChartCard
-          title={t('chartAppointmentsWeekMineTitle')}
-          subtitle={t('chartAppointmentsWeekMineSubtitle')}
-          isEmpty={appointmentsWeekMineData.every((row) => row.count === 0)}
-          emptyMessage={t('chartEmpty')}
-        >
-          <TodayAreaChart data={appointmentsWeekMineData} />
-        </ChartCard>
-      ) : null}
-
-      {showLabTaskActivityWeek ? (
-        <ChartCard
-          title={t('chartLabTaskActivityTitle')}
-          subtitle={t('chartLabTaskActivitySubtitle')}
-          isEmpty={labTaskActivityData.every(
-            (row) => row.completed === 0 && row.received === 0,
-          )}
-          emptyMessage={t('chartEmpty')}
-        >
-          <TodayStackedBarChart
-            data={labTaskActivityData}
-            completedLabel={t('chartLabTaskCompletedLegend')}
-            receivedLabel={t('chartLabTaskReceivedLegend')}
-            formatDayLabel={formatDayLabel}
-          />
-        </ChartCard>
-      ) : null}
-
-      {showInProgressTasksByProsthesis ? (
-        <ChartCard
-          title={t('chartProsthesisMixTitle')}
-          subtitle={t('chartProsthesisMixSubtitle')}
-          isEmpty={prosthesisData.length === 0}
-          emptyMessage={t('chartEmpty')}
-        >
-          <TodayDonutChart
-            data={prosthesisData}
-            labelForCode={(code) =>
-              prosthesisData.find((row) => row.code === code)?.label ?? code
-            }
-            colorForCode={(code, index) => prosthesisTypeColor(code, index)}
-            swatchStyleForCode={(code, index) => prosthesisTypeSwatchStyle(code, index)}
-            variant="pie"
-            sideLegend
-          />
-        </ChartCard>
-      ) : null}
-
-      {showAppointmentsByProvider ? (
-        <ChartCard
-          title={t('chartAppointmentsByProviderTitle')}
-          subtitle={t('chartAppointmentsByProviderSubtitle')}
-          isEmpty={appointmentsByProviderData.length === 0}
-          emptyMessage={t('chartEmpty')}
-        >
-          <TodayHorizontalBarChart data={appointmentsByProviderData} />
-        </ChartCard>
-      ) : null}
-
-      {showTreatmentMix ? (
-        <ChartCard
-          title={t('chartTreatmentMixTitle')}
-          subtitle={t('chartTreatmentMixSubtitle')}
-          isEmpty={treatmentData.length === 0}
-          emptyMessage={t('chartEmpty')}
-        >
-          <TodayBarChart
-            data={treatmentData}
-            colorForCode={(code, index) => treatmentTypeColor(code, index)}
-          />
-        </ChartCard>
-      ) : null}
-
-      {showCaseCompletion ? (
-        <ChartCard
-          title={t('chartCaseCompletionTitle')}
-          subtitle={t('chartCaseCompletionSubtitle')}
-          isEmpty={caseCompletion.total === 0}
-          emptyMessage={t('chartEmpty')}
-        >
-          <TodayRadialGaugeChart
-            percent={caseCompletion.percent}
-            completed={caseCompletion.completed}
-            total={caseCompletion.total}
-            percentLabel={t('chartCaseCompletionPercent', {
-              percent: caseCompletion.percent,
-            })}
-            tasksLabel={t('chartCaseCompletionTasks')}
-          />
-        </ChartCard>
-      ) : null}
-
-      {showTasksByStep ? (
-        <ChartCard
-          title={t('chartTasksByStepTitle')}
-          subtitle={t('chartTasksByStepSubtitle')}
-          isEmpty={tasksData.length === 0}
-          emptyMessage={t('chartEmpty')}
-        >
-          <TodayBarChart data={tasksData} />
-        </ChartCard>
-      ) : null}
-    </>
-  );
-
-  if (embedded) {
-    return chartCards;
-  }
-
-  return (
-    <div
-      className={`${gridClass} gap-4 ${loading ? 'opacity-70 transition-opacity' : ''} ${className}`}
-    >
-      {chartCards}
-    </div>
-  );
-}
--- a/frontend/src/components/today/TodayDashboard.tsx
+++ b/frontend/src/components/today/TodayDashboard.tsx
@@ -0,0 +1,555 @@
+'use client';
+
+import { useMemo } from 'react';
+import { useTranslations } from 'next-intl';
+import { useAuth } from '@/lib/hooks/useAuth';
+import {
+  canViewAppointmentsTab,
+  canViewCases,
+  canViewLabCasesOrTasks,
+  canViewTasks,
+  canViewTreatment,
+} from '@/components/shared/permissions';
+import { KpiCard } from '@/components/today/KpiCard';
+import { ChartCard } from '@/components/today/ChartCard';
+import { TodayAreaChart } from '@/components/today/TodayAreaChart';
+import { TodayBarChart } from '@/components/today/TodayBarChart';
+import {
+  formatTodayChartDayLabel,
+  mapWeekChartBuckets,
+  useTodayDayLabelFormatter,
+} from '@/components/today/chart-day-labels';
+import { TodayDashboardGrid } from '@/components/today/TodayDashboardGrid';
+import { TodayDonutChart } from '@/components/today/TodayDonutChart';
+import { TodayHorizontalBarChart } from '@/components/today/TodayHorizontalBarChart';
+import { TodayCaseCompletionKpiCard } from '@/components/today/TodayCaseCompletionKpiCard';
+import { TodayStackedBarChart } from '@/components/today/TodayStackedBarChart';
+import { TodaySubscriptionKpiCard } from '@/components/today/TodaySubscriptionKpiCard';
+import { TodayUpcomingAppointments } from '@/components/today/TodayUpcomingAppointments';
+import {
+  ChartCardSkeleton,
+  KpiCardSkeleton,
+  ListRowSkeleton,
+} from '@/components/today/TodaySkeleton';
+import {
+  TODAY_DASHBOARD_LAYOUT,
+  type TodayDashboardCell,
+} from '@/components/today/today-dashboard-layout';
+import { getEligibleTodayKpis, getVisibleTodayKpis } from '@/components/today/widget-registry';
+import { prosthesisTypeColor, prosthesisTypeSwatchStyle } from '@/components/ui/treatment/prosthesisTypeDisplay';
+import { treatmentTypeColor } from '@/components/ui/treatment/treatmentTypeDisplay';
+import type {
+  TodaySubscriptionSnapshot,
+  TodaySummaryActions,
+  TodaySummaryCharts,
+  TodaySummaryWidgets,
+} from '@/types/today';
+
+interface TodayDashboardProps {
+  widgets: TodaySummaryWidgets;
+  charts: TodaySummaryCharts;
+  actions: TodaySummaryActions;
+  subscription?: TodaySubscriptionSnapshot;
+  loading?: boolean;
+  isInitialLoad?: boolean;
+  hasError?: boolean;
+}
+
+export function TodayDashboard({
+  widgets,
+  charts,
+  actions,
+  subscription,
+  loading = false,
+  isInitialLoad = false,
+  hasError = false,
+}: TodayDashboardProps) {
+  const t = useTranslations('today');
+  const dayLabelFormatter = useTodayDayLabelFormatter();
+  const { currentOrganization } = useAuth();
+  const orgType = currentOrganization?.type;
+  const isOwner = Boolean(currentOrganization?.isOwner);
+
+  const showUpcoming =
+    orgType === 'CLINIC' && currentOrganization && canViewTreatment(currentOrganization);
+
+  const showCharts = useMemo(() => {
+    if (!orgType || !currentOrganization) return false;
+    if (orgType === 'CLINIC') {
+      return (
+        canViewAppointmentsTab(currentOrganization) ||
+        canViewTreatment(currentOrganization)
+      );
+    }
+    return (
+      canViewCases(currentOrganization) ||
+      canViewTasks(currentOrganization) ||
+      canViewLabCasesOrTasks(currentOrganization)
+    );
+  }, [currentOrganization, orgType]);
+
+  const kpiDefinitions = isInitialLoad
+    ? getEligibleTodayKpis(currentOrganization)
+    : getVisibleTodayKpis(currentOrganization, widgets);
+
+  const showSubscriptionCard = isOwner && (isInitialLoad || Boolean(subscription));
+
+  const showCaseCompletionCard =
+    orgType === 'LAB' &&
+    Boolean(currentOrganization && canViewCases(currentOrganization)) &&
+    (isInitialLoad || charts.caseCompletion !== undefined);
+
+  const cells = useMemo(() => {
+    if (isInitialLoad) {
+      return buildSkeletonCells({
+        kpiDefinitions,
+        showSubscriptionCard,
+        showCaseCompletionCard,
+        showUpcoming: Boolean(showUpcoming),
+        showCharts,
+        orgType,
+        isOwner,
+        charts,
+      });
+    }
+
+    return buildDashboardCells({
+      t,
+      dayLabelFormatter,
+      widgets,
+      charts,
+      actions,
+      subscription,
+      kpiDefinitions,
+      showSubscriptionCard: showSubscriptionCard && Boolean(subscription),
+      showCaseCompletionCard:
+        showCaseCompletionCard && charts.caseCompletion !== undefined,
+      showUpcoming: Boolean(showUpcoming),
+      showCharts,
+      orgType,
+      isOwner,
+      currentOrganization,
+    });
+  }, [
+    isInitialLoad,
+    kpiDefinitions,
+    showSubscriptionCard,
+    showCaseCompletionCard,
+    showUpcoming,
+    showCharts,
+    orgType,
+    isOwner,
+    charts,
+    t,
+    dayLabelFormatter,
+    widgets,
+    actions,
+    subscription,
+    currentOrganization,
+  ]);
+
+  if (hasError && !loading && cells.length === 0) {
+    return null;
+  }
+
+  if (!loading && !hasError && cells.length === 0) {
+    return (
+      <div className="rounded-[var(--radius-md)] border border-border/60 bg-background-secondary/30 px-4 py-6 text-center">
+        <p className="text-sm text-text-muted">{t('noWidgets')}</p>
+      </div>
+    );
+  }
+
+  return <TodayDashboardGrid cells={cells} loading={loading} />;
+}
+
+function buildSkeletonCells(options: {
+  kpiDefinitions: ReturnType<typeof getEligibleTodayKpis>;
+  showSubscriptionCard: boolean;
+  showCaseCompletionCard: boolean;
+  showUpcoming: boolean;
+  showCharts: boolean;
+  orgType?: 'CLINIC' | 'LAB';
+  isOwner: boolean;
+  charts: TodaySummaryCharts;
+}): TodayDashboardCell[] {
+  const cells: TodayDashboardCell[] = [];
+
+  if (options.showCharts) {
+    const chartCount = countVisibleCharts(options.charts, options.orgType, options.isOwner);
+    for (let index = 0; index < Math.min(chartCount, 4); index += 1) {
+      cells.push({
+        id: `chart-skeleton-${index}`,
+        layout: TODAY_DASHBOARD_LAYOUT.chart,
+        content: <ChartCardSkeleton />,
+      });
+    }
+  }
+
+  if (options.showUpcoming) {
+    cells.push({
+      id: 'upcoming-skeleton',
+      layout: TODAY_DASHBOARD_LAYOUT.upcoming,
+      content: (
+        <div className="flex h-full min-h-0 flex-col rounded-[var(--radius-lg)] border border-card-border bg-card p-3">
+          <div className="mb-2 space-y-1.5">
+            <div className="h-3.5 w-32 animate-pulse rounded bg-background-secondary/60" />
+            <div className="h-3 w-44 animate-pulse rounded bg-background-secondary/60" />
+          </div>
+          <div className="space-y-2">
+            {[0, 1].map((key) => (
+              <ListRowSkeleton key={key} compact />
+            ))}
+          </div>
+        </div>
+      ),
+    });
+  }
+
+  if (options.showSubscriptionCard) {
+    cells.push({
+      id: 'subscription-skeleton',
+      layout: TODAY_DASHBOARD_LAYOUT.subscription,
+      content: <KpiCardSkeleton tall />,
+    });
+  }
+
+  if (options.showCaseCompletionCard) {
+    cells.push({
+      id: 'case-completion-skeleton',
+      layout: TODAY_DASHBOARD_LAYOUT.subscription,
+      content: <KpiCardSkeleton tall />,
+    });
+  }
+
+  for (const definition of options.kpiDefinitions) {
+    cells.push({
+      id: `kpi-skeleton-${definition.key}`,
+      layout: TODAY_DASHBOARD_LAYOUT.kpi,
+      content: <KpiCardSkeleton />,
+    });
+  }
+
+  return cells;
+}
+
+function buildDashboardCells(options: {
+  t: ReturnType<typeof useTranslations<'today'>>;
+  dayLabelFormatter: ReturnType<typeof useTodayDayLabelFormatter>;
+  widgets: TodaySummaryWidgets;
+  charts: TodaySummaryCharts;
+  actions: TodaySummaryActions;
+  subscription?: TodaySubscriptionSnapshot;
+  kpiDefinitions: ReturnType<typeof getVisibleTodayKpis>;
+  showSubscriptionCard: boolean;
+  showCaseCompletionCard: boolean;
+  showUpcoming: boolean;
+  showCharts: boolean;
+  orgType?: 'CLINIC' | 'LAB';
+  isOwner: boolean;
+  currentOrganization: ReturnType<typeof useAuth>['currentOrganization'];
+}): TodayDashboardCell[] {
+  const cells: TodayDashboardCell[] = [];
+  const formatDayLabel = (code: string) =>
+    formatTodayChartDayLabel(code, options.dayLabelFormatter);
+
+  if (options.showCharts) {
+    cells.push(
+      ...buildChartCells({
+        t: options.t,
+        charts: options.charts,
+        orgType: options.orgType,
+        isOwner: options.isOwner,
+        formatDayLabel,
+        dayLabelFormatter: options.dayLabelFormatter,
+      }),
+    );
+  }
+
+  if (options.showUpcoming) {
+    cells.push({
+      id: 'upcoming-appointments',
+      layout: TODAY_DASHBOARD_LAYOUT.upcoming,
+      content: (
+        <TodayUpcomingAppointments actions={options.actions} loading={false} isInitialLoad={false} />
+      ),
+    });
+  }
+
+  if (options.showSubscriptionCard && options.subscription) {
+    cells.push({
+      id: 'subscription',
+      layout: TODAY_DASHBOARD_LAYOUT.subscription,
+      content: <TodaySubscriptionKpiCard subscription={options.subscription} />,
+    });
+  }
+
+  if (options.showCaseCompletionCard && options.charts.caseCompletion !== undefined) {
+    const caseCompletion = options.charts.caseCompletion;
+    cells.push({
+      id: 'case-completion',
+      layout: TODAY_DASHBOARD_LAYOUT.subscription,
+      content: (
+        <TodayCaseCompletionKpiCard
+          completed={caseCompletion.completed}
+          total={caseCompletion.total}
+          percent={caseCompletion.percent}
+        />
+      ),
+    });
+  }
+
+  for (const definition of options.kpiDefinitions) {
+    const value = definition.formatValue(options.widgets) ?? '—';
+    const subtitle = definition.formatSubtitle?.(options.widgets);
+
+    cells.push({
+      id: `kpi-${definition.key}`,
+      layout: TODAY_DASHBOARD_LAYOUT.kpi,
+      content: (
+        <KpiCard
+          title={options.t(definition.titleKey)}
+          value={value}
+          subtitle={subtitle}
+          icon={definition.icon}
+          color={definition.color}
+          href={definition.href}
+          className="h-full"
+        />
+      ),
+    });
+  }
+
+  return cells;
+}
+
+function buildChartCells(options: {
+  t: ReturnType<typeof useTranslations<'today'>>;
+  charts: TodaySummaryCharts;
+  orgType?: 'CLINIC' | 'LAB';
+  isOwner: boolean;
+  formatDayLabel: (code: string) => string;
+  dayLabelFormatter: ReturnType<typeof useTodayDayLabelFormatter>;
+}): TodayDashboardCell[] {
+  const { t, charts, orgType, isOwner } = options;
+  const cells: TodayDashboardCell[] = [];
+  const tallChart = TODAY_DASHBOARD_LAYOUT.chart;
+  const mediumChart = TODAY_DASHBOARD_LAYOUT.chartMedium;
+
+  const appointmentsWeekAllData = mapWeekChartBuckets(
+    charts.appointmentsWeekAll ?? [],
+    options.dayLabelFormatter,
+  );
+  const appointmentsWeekMineData = mapWeekChartBuckets(
+    charts.appointmentsWeekMine ?? [],
+    options.dayLabelFormatter,
+  );
+  const labTaskActivityData = mapWeekChartBuckets(
+    charts.labTaskActivityWeek ?? [],
+    options.dayLabelFormatter,
+  );
+
+  if (orgType === 'CLINIC' && charts.appointmentsWeekAll !== undefined) {
+    cells.push({
+      id: 'chart-appointments-week-all',
+      layout: tallChart,
+      content: (
+        <ChartCard
+          title={t('chartAppointmentsWeekAllTitle')}
+          subtitle={t('chartAppointmentsWeekAllSubtitle')}
+          isEmpty={appointmentsWeekAllData.every((row) => row.count === 0)}
+          emptyMessage={t('chartEmpty')}
+        >
+          <TodayAreaChart data={appointmentsWeekAllData} />
+        </ChartCard>
+      ),
+    });
+  }
+
+  if (orgType === 'CLINIC' && charts.appointmentsWeekMine !== undefined) {
+    cells.push({
+      id: 'chart-appointments-week-mine',
+      layout: tallChart,
+      content: (
+        <ChartCard
+          title={t('chartAppointmentsWeekMineTitle')}
+          subtitle={t('chartAppointmentsWeekMineSubtitle')}
+          isEmpty={appointmentsWeekMineData.every((row) => row.count === 0)}
+          emptyMessage={t('chartEmpty')}
+        >
+          <TodayAreaChart data={appointmentsWeekMineData} />
+        </ChartCard>
+      ),
+    });
+  }
+
+  if (orgType === 'LAB' && charts.labTaskActivityWeek !== undefined) {
+    cells.push({
+      id: 'chart-lab-task-activity',
+      layout: tallChart,
+      content: (
+        <ChartCard
+          title={t('chartLabTaskActivityTitle')}
+          subtitle={t('chartLabTaskActivitySubtitle')}
+          isEmpty={labTaskActivityData.every(
+            (row) => row.completed === 0 && row.received === 0,
+          )}
+          emptyMessage={t('chartEmpty')}
+        >
+          <TodayStackedBarChart
+            data={labTaskActivityData}
+            completedLabel={t('chartLabTaskCompletedLegend')}
+            receivedLabel={t('chartLabTaskReceivedLegend')}
+            formatDayLabel={options.formatDayLabel}
+          />
+        </ChartCard>
+      ),
+    });
+  }
+
+  const prosthesisData = charts.inProgressTasksByProsthesis ?? [];
+  if (orgType === 'LAB' && charts.inProgressTasksByProsthesis !== undefined) {
+    cells.push({
+      id: 'chart-prosthesis-mix',
+      layout: tallChart,
+      content: (
+        <ChartCard
+          title={t('chartProsthesisMixTitle')}
+          subtitle={t('chartProsthesisMixSubtitle')}
+          isEmpty={prosthesisData.length === 0}
+          emptyMessage={t('chartEmpty')}
+        >
+          <TodayDonutChart
+            data={prosthesisData}
+            labelForCode={(code) =>
+              prosthesisData.find((row) => row.code === code)?.label ?? code
+            }
+            colorForCode={(code, index) => prosthesisTypeColor(code, index)}
+            swatchStyleForCode={(code, index) => prosthesisTypeSwatchStyle(code, index)}
+            variant="pie"
+            sideLegend
+          />
+        </ChartCard>
+      ),
+    });
+  }
+
+  const efficiencyReportData = charts.efficiencyReport ?? [];
+  if (
+    isOwner &&
+    charts.efficiencyReport !== undefined &&
+    efficiencyReportData.length >= 2
+  ) {
+    cells.push({
+      id: 'chart-efficiency-report',
+      layout: tallChart,
+      content: (
+        <ChartCard
+          title={t('chartEfficiencyReportTitle')}
+          subtitle={
+            orgType === 'CLINIC'
+              ? t('chartEfficiencyReportSubtitleClinic')
+              : t('chartEfficiencyReportSubtitleLab')
+          }
+          isEmpty={efficiencyReportData.every((row) => row.count === 0)}
+          emptyMessage={t('chartEmpty')}
+        >
+          <TodayDonutChart
+            data={efficiencyReportData}
+            labelForCode={(code) =>
+              efficiencyReportData.find((row) => row.code === code)?.label ?? code
+            }
+            variant="pie"
+            sideLegend
+          />
+        </ChartCard>
+      ),
+    });
+  }
+
+  const appointmentsByProviderData = charts.appointmentsByProvider ?? [];
+  if (orgType === 'CLINIC' && charts.appointmentsByProvider !== undefined) {
+    cells.push({
+      id: 'chart-appointments-by-provider',
+      layout: mediumChart,
+      content: (
+        <ChartCard
+          title={t('chartAppointmentsByProviderTitle')}
+          subtitle={t('chartAppointmentsByProviderSubtitle')}
+          isEmpty={appointmentsByProviderData.length === 0}
+          emptyMessage={t('chartEmpty')}
+        >
+          <TodayHorizontalBarChart data={appointmentsByProviderData} />
+        </ChartCard>
+      ),
+    });
+  }
+
+  const treatmentData = charts.treatmentMixWeek ?? [];
+  if (orgType === 'CLINIC' && charts.treatmentMixWeek !== undefined) {
+    cells.push({
+      id: 'chart-treatment-mix',
+      layout: mediumChart,
+      content: (
+        <ChartCard
+          title={t('chartTreatmentMixTitle')}
+          subtitle={t('chartTreatmentMixSubtitle')}
+          isEmpty={treatmentData.length === 0}
+          emptyMessage={t('chartEmpty')}
+        >
+          <TodayBarChart
+            data={treatmentData}
+            colorForCode={(code, index) => treatmentTypeColor(code, index)}
+          />
+        </ChartCard>
+      ),
+    });
+  }
+
+  const tasksData = charts.tasksByWorkflowStep ?? [];
+  if (orgType === 'LAB' && charts.tasksByWorkflowStep !== undefined) {
+    cells.push({
+      id: 'chart-tasks-by-step',
+      layout: mediumChart,
+      content: (
+        <ChartCard
+          title={t('chartTasksByStepTitle')}
+          subtitle={t('chartTasksByStepSubtitle')}
+          isEmpty={tasksData.length === 0}
+          emptyMessage={t('chartEmpty')}
+        >
+          <TodayBarChart data={tasksData} />
+        </ChartCard>
+      ),
+    });
+  }
+
+  return cells;
+}
+
+function countVisibleCharts(
+  charts: TodaySummaryCharts,
+  orgType?: 'CLINIC' | 'LAB',
+  isOwner = false,
+): number {
+  let count = 0;
+  if (orgType === 'CLINIC') {
+    count += charts.appointmentsWeekAll !== undefined ? 1 : 0;
+    count += charts.appointmentsWeekMine !== undefined ? 1 : 0;
+    count += charts.appointmentsByProvider !== undefined ? 1 : 0;
+    count += charts.treatmentMixWeek !== undefined ? 1 : 0;
+  }
+  if (orgType === 'LAB') {
+    count += charts.labTaskActivityWeek !== undefined ? 1 : 0;
+    count += charts.inProgressTasksByProsthesis !== undefined ? 1 : 0;
+    count += charts.tasksByWorkflowStep !== undefined ? 1 : 0;
+  }
+  if (
+    isOwner &&
+    charts.efficiencyReport !== undefined &&
+    (charts.efficiencyReport?.length ?? 0) >= 2
+  ) {
+    count += 1;
+  }
+  return count;
+}
--- a/frontend/src/components/today/TodayDashboardGrid.tsx
+++ b/frontend/src/components/today/TodayDashboardGrid.tsx
@@ -0,0 +1,44 @@
+'use client';
+
+import { useMemo, type CSSProperties } from 'react';
+import {
+  packDashboardCells,
+  packedCellClassName,
+  TODAY_DASHBOARD_GRID_CLASS,
+  type TodayDashboardCell,
+} from '@/components/today/today-dashboard-layout';
+
+interface TodayDashboardGridProps {
+  cells: TodayDashboardCell[];
+  loading?: boolean;
+}
+
+export function TodayDashboardGrid({ cells, loading = false }: TodayDashboardGridProps) {
+  const packed = useMemo(() => packDashboardCells(cells), [cells]);
+
+  if (packed.length === 0) {
+    return null;
+  }
+
+  return (
+    <div
+      className={`${TODAY_DASHBOARD_GRID_CLASS} ${loading ? 'opacity-70 transition-opacity' : ''}`}
+      style={{ gridAutoRows: 'var(--today-grid-unit, 5.75rem)' }}
+    >
+      {packed.map((cell) => (
+        <div
+          key={cell.id}
+          className={`today-dashboard-cell ${packedCellClassName(cell.layout)}`}
+          style={
+            {
+              '--today-gc': cell.gridColumn,
+              '--today-gr': cell.gridRow,
+            } as CSSProperties
+          }
+        >
+          <div className="flex h-full min-h-0 flex-1 flex-col">{cell.content}</div>
+        </div>
+      ))}
+    </div>
+  );
+}
--- a/frontend/src/components/today/TodayDonutChart.tsx
+++ b/frontend/src/components/today/TodayDonutChart.tsx
@@ -3,6 +3,7 @@
 import type { CSSProperties } from 'react';
 import { Cell, Pie, PieChart, ResponsiveContainer, Tooltip } from 'recharts';
 import type { TodayChartBucket } from '@/types/today';
+import { TodayChartFrame } from '@/components/today/TodayChartFrame';
 import {
  TODAY_CHART_COLORS,
  TODAY_CHART_TOOLTIP_STYLE,
@@ -44,8 +45,9 @@ export function TodayDonutChart({
  const outerRadius = sideLegend ? 100 : 92;

  const chart = (
-    <ResponsiveContainer width="100%" height={240}>
-      <PieChart margin={{ top: 0, right: 0, bottom: 0, left: 0 }}>
+    <TodayChartFrame>
+      <ResponsiveContainer width="100%" height="100%">
+        <PieChart margin={{ top: 0, right: 0, bottom: 0, left: 0 }}>
        <Pie
          data={chartData}
          dataKey="count"
@@ -69,7 +71,8 @@ export function TodayDonutChart({
          }}
        />
      </PieChart>
-    </ResponsiveContainer>
+      </ResponsiveContainer>
+    </TodayChartFrame>
  );

  if (!sideLegend) {
@@ -80,9 +83,9 @@ export function TodayDonutChart({
  const legendInset = 'px-12';

  return (
-    <div className={`flex h-full min-h-[220px] items-center ${legendInset}`}>
-      <div className="flex min-w-0 flex-1 items-center overflow-y-auto max-h-full py-0.5">
-        <div className="flex flex-col items-start gap-1.5 shrink-0">
+    <div className={`flex h-full min-h-0 items-center overflow-hidden ${legendInset}`}>
+      <div className="flex min-h-0 min-w-0 flex-1 items-center overflow-hidden py-0.5">
+        <div className="flex max-h-full min-w-0 flex-col items-start gap-1.5 overflow-y-auto">
          {chartData.map((entry, index) => (
            <span key={entry.code} className={rowClass}>
              <span
@@ -94,7 +97,7 @@ export function TodayDonutChart({
          ))}
        </div>

-        <div className="ml-2 flex flex-col items-start gap-1.5">
+        <div className="ml-2 flex min-w-0 flex-col items-start gap-1.5 overflow-hidden">
          {chartData.map((entry) => (
            <span
              key={entry.code}
@@ -117,8 +120,33 @@ export function TodayDonutChart({
        </div>
      </div>

-      <div className="ml-4 flex h-[240px] w-[min(100%,220px)] max-w-[48%] shrink-0 items-center justify-center">
-        {chart}
+      <div className="ml-4 flex h-full min-h-0 w-[min(100%,220px)] max-w-[48%] shrink-0 items-center justify-center">
+        <ResponsiveContainer width="100%" height="100%">
+          <PieChart margin={{ top: 0, right: 0, bottom: 0, left: 0 }}>
+            <Pie
+              data={chartData}
+              dataKey="count"
+              nameKey="displayLabel"
+              cx="50%"
+              cy="50%"
+              innerRadius={innerRadius}
+              outerRadius={outerRadius}
+              paddingAngle={variant === 'pie' ? 1 : 2}
+              stroke="transparent"
+            >
+              {chartData.map((entry, index) => (
+                <Cell key={entry.code} fill={resolveColor(entry.code, index)} />
+              ))}
+            </Pie>
+            <Tooltip
+              contentStyle={TODAY_CHART_TOOLTIP_STYLE}
+              formatter={(value, _name, item) => {
+                const row = item?.payload as TodayChartBucket | undefined;
+                return [value, row ? labelForCode(row.code) : ''];
+              }}
+            />
+          </PieChart>
+        </ResponsiveContainer>
      </div>
    </div>
  );
--- a/frontend/src/components/today/TodayHorizontalBarChart.tsx
+++ b/frontend/src/components/today/TodayHorizontalBarChart.tsx
@@ -10,6 +10,7 @@ import {
  XAxis,
  YAxis,
 } from 'recharts';
+import { TodayChartFrame } from '@/components/today/TodayChartFrame';
 import type { TodayChartBucket } from '@/types/today';
 import {
  TODAY_CHART_AXIS_COLOR,
@@ -29,46 +30,48 @@ export function TodayHorizontalBarChart({ data }: TodayHorizontalBarChartProps)
  }));

  return (
-    <ResponsiveContainer width="100%" height={Math.max(220, chartData.length * 36)}>
-      <BarChart
-        data={chartData}
-        layout="vertical"
-        margin={{ top: 4, right: 12, left: 4, bottom: 0 }}
-      >
-        <CartesianGrid stroke={TODAY_CHART_GRID_COLOR} horizontal={false} />
-        <XAxis
-          type="number"
-          allowDecimals={false}
-          tick={{ fill: TODAY_CHART_AXIS_COLOR, fontSize: 11 }}
-          axisLine={{ stroke: TODAY_CHART_GRID_COLOR }}
-          tickLine={false}
-        />
-        <YAxis
-          type="category"
-          dataKey="shortLabel"
-          width={96}
-          tick={{ fill: TODAY_CHART_AXIS_COLOR, fontSize: 11 }}
-          axisLine={false}
-          tickLine={false}
-        />
-        <Tooltip
-          cursor={{ fill: 'rgba(0, 188, 255, 0.08)' }}
-          contentStyle={TODAY_CHART_TOOLTIP_STYLE}
-          labelFormatter={(_, payload) => {
-            const row = payload?.[0]?.payload as TodayChartBucket | undefined;
-            return row?.label ?? '';
-          }}
-        />
-        <Bar dataKey="count" radius={[0, 4, 4, 0]} maxBarSize={28}>
-          {chartData.map((entry, index) => (
-            <Cell
-              key={entry.code}
-              fill={TODAY_CHART_COLORS[index % TODAY_CHART_COLORS.length]}
-            />
-          ))}
-        </Bar>
-      </BarChart>
-    </ResponsiveContainer>
+    <TodayChartFrame>
+      <ResponsiveContainer width="100%" height="100%">
+        <BarChart
+          data={chartData}
+          layout="vertical"
+          margin={{ top: 4, right: 12, left: 4, bottom: 4 }}
+        >
+          <CartesianGrid stroke={TODAY_CHART_GRID_COLOR} horizontal={false} />
+          <XAxis
+            type="number"
+            allowDecimals={false}
+            tick={{ fill: TODAY_CHART_AXIS_COLOR, fontSize: 11 }}
+            axisLine={{ stroke: TODAY_CHART_GRID_COLOR }}
+            tickLine={false}
+          />
+          <YAxis
+            type="category"
+            dataKey="shortLabel"
+            width={96}
+            tick={{ fill: TODAY_CHART_AXIS_COLOR, fontSize: 11 }}
+            axisLine={false}
+            tickLine={false}
+          />
+          <Tooltip
+            cursor={{ fill: 'rgba(0, 188, 255, 0.08)' }}
+            contentStyle={TODAY_CHART_TOOLTIP_STYLE}
+            labelFormatter={(_, payload) => {
+              const row = payload?.[0]?.payload as TodayChartBucket | undefined;
+              return row?.label ?? '';
+            }}
+          />
+          <Bar dataKey="count" radius={[0, 4, 4, 0]} maxBarSize={28}>
+            {chartData.map((entry, index) => (
+              <Cell
+                key={entry.code}
+                fill={TODAY_CHART_COLORS[index % TODAY_CHART_COLORS.length]}
+              />
+            ))}
+          </Bar>
+        </BarChart>
+      </ResponsiveContainer>
+    </TodayChartFrame>
  );
 }

--- a/frontend/src/components/today/TodayKpiGrid.tsx
+++ b/frontend/src/components/today/TodayKpiGrid.tsx
@@ -1,78 +0,0 @@
-'use client';
-
-import { useTranslations } from 'next-intl';
-import { useAuth } from '@/lib/hooks/useAuth';
-import { KpiCard } from '@/components/today/KpiCard';
-import { KpiCardSkeleton } from '@/components/today/TodaySkeleton';
-import { getEligibleTodayKpis, getVisibleTodayKpis } from '@/components/today/widget-registry';
-import type { TodaySummaryWidgets } from '@/types/today';
-
-interface TodayKpiGridProps {
-  widgets: TodaySummaryWidgets;
-  loading?: boolean;
-  isInitialLoad?: boolean;
-  hasError?: boolean;
-}
-
-export function TodayKpiGrid({
-  widgets,
-  loading = false,
-  isInitialLoad = false,
-  hasError = false,
-}: TodayKpiGridProps) {
-  const t = useTranslations('today');
-  const { currentOrganization } = useAuth();
-  const definitions = isInitialLoad
-    ? getEligibleTodayKpis(currentOrganization)
-    : getVisibleTodayKpis(currentOrganization, widgets);
-
-  if (hasError && !loading && definitions.length === 0) {
-    return null;
-  }
-
-  if (!loading && !hasError && definitions.length === 0) {
-    return (
-      <div className="rounded-[var(--radius-md)] border border-border/60 bg-background-secondary/30 px-4 py-6 text-center">
-        <p className="text-sm text-text-muted">{t('noWidgets')}</p>
-      </div>
-    );
-  }
-
-  if (isInitialLoad) {
-    const skeletonCount = Math.max(getEligibleTodayKpis(currentOrganization).length, 4);
-    return (
-      <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4">
-        {Array.from({ length: skeletonCount }, (_, index) => (
-          <KpiCardSkeleton key={index} />
-        ))}
-      </div>
-    );
-  }
-
-  return (
-    <div
-      className={`grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4 ${loading ? 'opacity-70 transition-opacity' : ''}`}
-    >
-      {definitions.map((definition) => {
-        const value = definition.formatValue(widgets) ?? '—';
-        const subtitleKey = definition.formatSubtitle?.(widgets);
-        const subtitle =
-          subtitleKey === 'unlimited'
-            ? t('seatsUnlimited')
-            : definition.formatSubtitle?.(widgets);
-
-        return (
-          <KpiCard
-            key={definition.key}
-            title={t(definition.titleKey)}
-            value={value}
-            subtitle={subtitle}
-            icon={definition.icon}
-            color={definition.color}
-            href={definition.href}
-          />
-        );
-      })}
-    </div>
-  );
-}
--- a/frontend/src/components/today/TodayRadialGaugeChart.tsx
+++ b/frontend/src/components/today/TodayRadialGaugeChart.tsx
@@ -1,6 +1,11 @@
 'use client';

-import { RadialBar, RadialBarChart, ResponsiveContainer } from 'recharts';
+import {
+  PolarAngleAxis,
+  RadialBar,
+  RadialBarChart,
+  ResponsiveContainer,
+} from 'recharts';

 import { TODAY_CHART_PRIMARY_COLOR } from '@/components/today/chart-theme';

@@ -10,6 +15,9 @@ interface TodayRadialGaugeChartProps {
  total: number;
  percentLabel: string;
  tasksLabel: string;
+  size?: 'sm' | 'md';
+  fillColor?: string;
+  showRatio?: boolean;
 }

 export function TodayRadialGaugeChart({
@@ -18,35 +26,48 @@ export function TodayRadialGaugeChart({
  total,
  percentLabel,
  tasksLabel,
+  size = 'md',
+  fillColor = TODAY_CHART_PRIMARY_COLOR,
+  showRatio = true,
 }: TodayRadialGaugeChartProps) {
+  const isCompact = size === 'sm';
  const clamped = Math.max(0, Math.min(100, percent));
-  const data = [{ name: 'completion', value: clamped, fill: TODAY_CHART_PRIMARY_COLOR }];
+  const data = [{ name: 'progress', value: clamped, fill: fillColor }];

  return (
-    <div className="relative h-[240px] w-full">
+    <div className={`relative w-full ${isCompact ? 'h-[108px]' : 'h-full min-h-0 flex-1'}`}>
      <ResponsiveContainer width="100%" height="100%">
        <RadialBarChart
          cx="50%"
          cy="50%"
-          innerRadius="68%"
+          innerRadius={isCompact ? '62%' : '68%'}
          outerRadius="100%"
-          barSize={14}
+          barSize={isCompact ? 9 : 14}
          data={data}
          startAngle={90}
          endAngle={-270}
        >
+          <PolarAngleAxis type="number" domain={[0, 100]} tick={false} />
          <RadialBar
            background={{ fill: 'rgba(41, 69, 106, 0.55)' }}
            dataKey="value"
-            cornerRadius={8}
+            cornerRadius={isCompact ? 6 : 8}
          />
        </RadialBarChart>
      </ResponsiveContainer>
-      <div className="pointer-events-none absolute inset-0 flex flex-col items-center justify-center text-center">
-        <span className="text-3xl font-semibold text-text-primary">{percentLabel}</span>
-        <span className="mt-1 text-xs text-text-muted">{tasksLabel}</span>
-        {total > 0 ? (
-          <span className="mt-0.5 text-[11px] text-text-secondary">
+      <div className="pointer-events-none absolute inset-0 flex flex-col items-center justify-center text-center px-1">
+        <span
+          className={`font-semibold text-text-primary ${isCompact ? 'text-base leading-tight' : 'text-3xl'}`}
+        >
+          {percentLabel}
+        </span>
+        <span className={`text-text-muted ${isCompact ? 'mt-0.5 text-[10px]' : 'mt-1 text-xs'}`}>
+          {tasksLabel}
+        </span>
+        {showRatio && total > 0 ? (
+          <span
+            className={`text-text-secondary ${isCompact ? 'mt-0.5 text-[10px]' : 'mt-0.5 text-[11px]'}`}
+          >
            {completed}/{total}
          </span>
        ) : null}
--- a/frontend/src/components/today/TodaySkeleton.tsx
+++ b/frontend/src/components/today/TodaySkeleton.tsx
@@ -11,22 +11,24 @@ export function SkeletonBlock({ className = '' }: SkeletonBlockProps) {
  );
 }

-export function KpiCardSkeleton() {
+export function KpiCardSkeleton({ tall = false }: { tall?: boolean }) {
  return (
-    <div className="rounded-[var(--radius-lg)] border border-card-border bg-card p-4">
+    <div
+      className={`flex h-full min-h-0 flex-col rounded-[var(--radius-lg)] border border-card-border bg-card p-4 ${tall ? '' : ''}`}
+    >
      <SkeletonBlock className="h-4 w-2/3" />
-      <SkeletonBlock className="h-8 w-16 mt-3" />
-      <SkeletonBlock className="h-3 w-1/3 mt-2" />
+      <SkeletonBlock className={`${tall ? 'mt-4 flex-1' : 'h-8 w-16 mt-3'}`} />
+      {!tall ? <SkeletonBlock className="h-3 w-1/3 mt-2" /> : null}
    </div>
  );
 }

 export function ChartCardSkeleton() {
  return (
-    <div className="rounded-[var(--radius-lg)] border border-card-border bg-card p-4 min-h-[280px] flex flex-col">
+    <div className="flex h-full min-h-0 flex-col rounded-[var(--radius-lg)] border border-card-border bg-card p-4">
      <SkeletonBlock className="h-4 w-1/3" />
      <SkeletonBlock className="h-3 w-1/4 mt-2" />
-      <SkeletonBlock className="flex-1 min-h-[220px] mt-4" />
+      <SkeletonBlock className="min-h-0 flex-1 mt-4" />
    </div>
  );
 }
--- a/frontend/src/components/today/TodayStackedBarChart.tsx
+++ b/frontend/src/components/today/TodayStackedBarChart.tsx
@@ -10,6 +10,7 @@ import {
  XAxis,
  YAxis,
 } from 'recharts';
+import { TodayChartFrame } from '@/components/today/TodayChartFrame';
 import type { TodayStackedDayBucket } from '@/types/today';
 import {
  TODAY_CHART_AXIS_COLOR,
@@ -38,50 +39,53 @@ export function TodayStackedBarChart({
  }));

  return (
-    <ResponsiveContainer width="100%" height={240}>
-      <BarChart data={chartData} margin={{ top: 8, right: 8, left: -12, bottom: 0 }}>
-        <CartesianGrid stroke={TODAY_CHART_GRID_COLOR} vertical={false} />
-        <XAxis
-          dataKey="dayLabel"
-          tick={{ fill: TODAY_CHART_AXIS_COLOR, fontSize: 11 }}
-          axisLine={{ stroke: TODAY_CHART_GRID_COLOR }}
-          tickLine={false}
-        />
-        <YAxis
-          allowDecimals={false}
-          tick={{ fill: TODAY_CHART_AXIS_COLOR, fontSize: 11 }}
-          axisLine={false}
-          tickLine={false}
-          width={32}
-        />
-        <Tooltip
-          cursor={{ fill: 'rgba(0, 188, 255, 0.08)' }}
-          contentStyle={TODAY_CHART_TOOLTIP_STYLE}
-          labelFormatter={(_, payload) => {
-            const row = payload?.[0]?.payload as TodayStackedDayBucket | undefined;
-            return row ? formatDayLabel(row.code) : '';
-          }}
-        />
-        <Legend
-          wrapperStyle={{ fontSize: '12px', color: TODAY_CHART_AXIS_COLOR }}
-        />
-        <Bar
-          dataKey="completed"
-          name={completedLabel}
-          stackId="activity"
-          fill={TODAY_CHART_COMPLETED_COLOR}
-          radius={[0, 0, 0, 0]}
-          maxBarSize={48}
-        />
-        <Bar
-          dataKey="received"
-          name={receivedLabel}
-          stackId="activity"
-          fill={TODAY_CHART_RECEIVED_COLOR}
-          radius={[4, 4, 0, 0]}
-          maxBarSize={48}
-        />
-      </BarChart>
-    </ResponsiveContainer>
+    <TodayChartFrame>
+      <ResponsiveContainer width="100%" height="100%">
+        <BarChart data={chartData} margin={{ top: 8, right: 8, left: -12, bottom: 28 }}>
+          <CartesianGrid stroke={TODAY_CHART_GRID_COLOR} vertical={false} />
+          <XAxis
+            dataKey="dayLabel"
+            tick={{ fill: TODAY_CHART_AXIS_COLOR, fontSize: 11 }}
+            axisLine={{ stroke: TODAY_CHART_GRID_COLOR }}
+            tickLine={false}
+          />
+          <YAxis
+            allowDecimals={false}
+            tick={{ fill: TODAY_CHART_AXIS_COLOR, fontSize: 11 }}
+            axisLine={false}
+            tickLine={false}
+            width={32}
+          />
+          <Tooltip
+            cursor={{ fill: 'rgba(0, 188, 255, 0.08)' }}
+            contentStyle={TODAY_CHART_TOOLTIP_STYLE}
+            labelFormatter={(_, payload) => {
+              const row = payload?.[0]?.payload as TodayStackedDayBucket | undefined;
+              return row ? formatDayLabel(row.code) : '';
+            }}
+          />
+          <Legend
+            verticalAlign="bottom"
+            wrapperStyle={{ fontSize: '12px', color: TODAY_CHART_AXIS_COLOR, paddingTop: 8 }}
+          />
+          <Bar
+            dataKey="completed"
+            name={completedLabel}
+            stackId="activity"
+            fill={TODAY_CHART_COMPLETED_COLOR}
+            radius={[0, 0, 0, 0]}
+            maxBarSize={48}
+          />
+          <Bar
+            dataKey="received"
+            name={receivedLabel}
+            stackId="activity"
+            fill={TODAY_CHART_RECEIVED_COLOR}
+            radius={[4, 4, 0, 0]}
+            maxBarSize={48}
+          />
+        </BarChart>
+      </ResponsiveContainer>
+    </TodayChartFrame>
  );
 }
--- a/frontend/src/components/today/TodaySubscriptionKpiCard.tsx
+++ b/frontend/src/components/today/TodaySubscriptionKpiCard.tsx
@@ -0,0 +1,84 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+import { CreditCard } from 'lucide-react';
+import { Link } from '@/i18n/navigation';
+import { Card } from '@/components/ui/shared/Card';
+import { TodayRadialGaugeChart } from '@/components/today/TodayRadialGaugeChart';
+import type { TodaySubscriptionSnapshot } from '@/types/today';
+
+interface TodaySubscriptionKpiCardProps {
+  subscription: TodaySubscriptionSnapshot;
+}
+
+const PERIOD_GAUGE_COLOR = '#e1bc72';
+
+export function TodaySubscriptionKpiCard({ subscription }: TodaySubscriptionKpiCardProps) {
+  const t = useTranslations('today');
+
+  const seatsRatioTotal = subscription.seatsUnlimited
+    ? 0
+    : subscription.seatsLimit ?? 0;
+
+  const seatsPercentLabel =
+    subscription.seatsUnlimited || !subscription.hasActivePlan
+      ? String(subscription.seatsUsed)
+      : t('subscriptionSeatsPercent', { percent: subscription.seatsPercent });
+
+  const seatsTasksLabel = subscription.seatsUnlimited
+    ? t('subscriptionSeatsUnlimitedShort')
+    : t('subscriptionSeatsLabel');
+
+  const periodPercentLabel = subscription.hasActivePlan
+    ? t('subscriptionPeriodPercent', { percent: subscription.periodPercent })
+    : '—';
+
+  return (
+    <Link
+      href="/settings/subscriptions"
+      className="block h-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60 rounded-[var(--radius-lg)]"
+    >
+      <Card className="flex h-full min-h-0 flex-col transition-opacity hover:opacity-90">
+        <div className="flex items-start justify-between gap-3">
+          <div className="min-w-0">
+            <p className="text-sm font-medium">{t('widgetSubscription')}</p>
+            {subscription.planName ? (
+              <p className="mt-0.5 truncate text-xs capitalize text-text-muted">
+                {subscription.planName}
+              </p>
+            ) : (
+              <p className="mt-0.5 text-xs text-text-muted">{t('subscriptionNoPlan')}</p>
+            )}
+          </div>
+          <CreditCard className="h-4 w-4 shrink-0 !text-current" aria-hidden />
+        </div>
+
+        <div className="mt-2 grid min-h-0 flex-1 grid-cols-2 gap-1 content-center">
+          <TodayRadialGaugeChart
+            size="sm"
+            percent={
+              subscription.seatsUnlimited || !subscription.hasActivePlan
+                ? 0
+                : subscription.seatsPercent
+            }
+            completed={subscription.seatsUsed}
+            total={seatsRatioTotal}
+            percentLabel={seatsPercentLabel}
+            tasksLabel={seatsTasksLabel}
+            showRatio={!subscription.seatsUnlimited && seatsRatioTotal > 0}
+          />
+          <TodayRadialGaugeChart
+            size="sm"
+            percent={subscription.hasActivePlan ? subscription.periodPercent : 0}
+            completed={subscription.periodElapsedDays}
+            total={subscription.hasActivePlan ? subscription.periodTotalDays : 0}
+            percentLabel={periodPercentLabel}
+            tasksLabel={t('subscriptionPeriodLabel')}
+            fillColor={PERIOD_GAUGE_COLOR}
+            showRatio={subscription.hasActivePlan}
+          />
+        </div>
+      </Card>
+    </Link>
+  );
+}
--- a/frontend/src/components/today/TodayUpcomingAppointments.tsx
+++ b/frontend/src/components/today/TodayUpcomingAppointments.tsx
@@ -22,8 +22,6 @@ interface TodayUpcomingAppointmentsProps {
  isInitialLoad?: boolean;
 }

-const MAX_VISIBLE = 3;
-
 export function TodayUpcomingAppointments({
  actions,
  loading = false,
@@ -48,11 +46,11 @@ export function TodayUpcomingAppointments({
    return null;
  }

-  const appointments = (actions.upcomingAppointmentsToday ?? []).slice(0, MAX_VISIBLE);
+  const appointments = actions.upcomingAppointmentsToday ?? [];

  if (isInitialLoad) {
    return (
-      <Card className="min-h-[140px] p-3">
+      <Card className="flex h-full min-h-0 flex-col p-3">
        <div className="mb-2 space-y-1.5">
          <div className="h-3.5 w-32 animate-pulse rounded bg-background-secondary/60" />
          <div className="h-3 w-44 animate-pulse rounded bg-background-secondary/60" />
@@ -67,7 +65,7 @@ export function TodayUpcomingAppointments({
  }

  return (
-    <Card className="min-h-[140px] p-3">
+    <Card className="flex h-full min-h-0 flex-col p-3">
      <div className="mb-2 flex flex-col gap-1 sm:flex-row sm:items-start sm:justify-between">
        <div>
          <h2 className="text-sm font-semibold text-card-foreground">
@@ -88,44 +86,48 @@ export function TodayUpcomingAppointments({
          <p className="text-xs text-text-muted text-center">{t('noUpcomingAppointments')}</p>
        </div>
      ) : (
-        <ul className="divide-y divide-border/40">
-          {appointments.map((appointment) => {
-            const start = new Date(appointment.startAt);
-            const end = new Date(appointment.endAt);
-            const timeLabel = `${formatTimeForInput(start)} – ${formatTimeForInput(end)}`;
-            const purposeIndex = treatmentCatalog.findIndex((entry) => entry.code === appointment.purpose);
-            const purposeTextColor = treatmentTypeColor(
-              appointment.purpose,
-              purposeIndex < 0 ? 0 : purposeIndex,
-            );
-            const purposeDisplay = purposeLabel(appointment.purpose, treatmentCatalog);
+        <div className="min-h-0 flex-1 overflow-x-hidden overflow-y-auto">
+          <ul className="divide-y divide-border/40">
+            {appointments.map((appointment) => {
+              const start = new Date(appointment.startAt);
+              const end = new Date(appointment.endAt);
+              const timeLabel = `${formatTimeForInput(start)} – ${formatTimeForInput(end)}`;
+              const purposeIndex = treatmentCatalog.findIndex(
+                (entry) => entry.code === appointment.purpose,
+              );
+              const purposeTextColor = treatmentTypeColor(
+                appointment.purpose,
+                purposeIndex < 0 ? 0 : purposeIndex,
+              );
+              const purposeDisplay = purposeLabel(appointment.purpose, treatmentCatalog);

-            return (
-              <li key={appointment.id}>
-                <Link
-                  href={treatmentAppointmentHref(appointment.id)}
-                  className="group -mx-1 flex items-center justify-between gap-2 rounded-[var(--radius-md)] px-1 py-2 transition-colors hover:bg-background-secondary/45"
-                >
-                  <div className="min-w-0">
-                    <p className="truncate text-xs font-medium text-text-primary">
-                      {appointment.patientName}
-                    </p>
-                    <p className="mt-0.5 truncate text-[11px] text-text-muted">
-                      {timeLabel}
-                      {appointment.purpose ? (
-                        <span style={{ color: purposeTextColor }}> · {purposeDisplay}</span>
-                      ) : null}
-                    </p>
-                  </div>
-                  <ChevronRight
-                    className="h-3.5 w-3.5 shrink-0 text-text-muted opacity-0 transition-opacity group-hover:opacity-100"
-                    aria-hidden
-                  />
-                </Link>
-              </li>
-            );
-          })}
-        </ul>
+              return (
+                <li key={appointment.id}>
+                  <Link
+                    href={treatmentAppointmentHref(appointment.id)}
+                    className="group -mx-1 flex items-center justify-between gap-2 rounded-[var(--radius-md)] px-1 py-2 transition-colors hover:bg-background-secondary/45"
+                  >
+                    <div className="min-w-0">
+                      <p className="truncate text-xs font-medium text-text-primary">
+                        {appointment.patientName}
+                      </p>
+                      <p className="mt-0.5 truncate text-[11px] text-text-muted">
+                        {timeLabel}
+                        {appointment.purpose ? (
+                          <span style={{ color: purposeTextColor }}> · {purposeDisplay}</span>
+                        ) : null}
+                      </p>
+                    </div>
+                    <ChevronRight
+                      className="h-3.5 w-3.5 shrink-0 text-text-muted opacity-0 transition-opacity group-hover:opacity-100"
+                      aria-hidden
+                    />
+                  </Link>
+                </li>
+              );
+            })}
+          </ul>
+        </div>
      )}
    </Card>
  );
--- a/frontend/src/components/today/today-dashboard-layout.ts
+++ b/frontend/src/components/today/today-dashboard-layout.ts
@@ -0,0 +1,135 @@
+import type { ReactNode } from 'react';
+
+/** Dashboard grid is always 4 columns (at lg+). Widgets use fixed width/height units. */
+export type TodayDashboardWidth = 1 | 2;
+export type TodayDashboardHeight = 1 | 2 | 3;
+
+export interface TodayDashboardLayout {
+  width: TodayDashboardWidth;
+  height: TodayDashboardHeight;
+}
+
+/** Shared layout presets — assign when registering a dashboard widget. */
+export const TODAY_DASHBOARD_LAYOUT = {
+  kpi: { width: 1, height: 1 },
+  subscription: { width: 1, height: 2 },
+  upcoming: { width: 2, height: 3 },
+  /** Tall charts: area, stacked bar, pie with side legend */
+  chart: { width: 2, height: 3 },
+  /** Medium charts: horizontal bar, vertical bar, radial gauge */
+  chartMedium: { width: 2, height: 2 },
+} as const satisfies Record<string, TodayDashboardLayout>;
+
+export interface TodayDashboardCell {
+  id: string;
+  layout: TodayDashboardLayout;
+  content: ReactNode;
+}
+
+export interface PackedDashboardCell extends TodayDashboardCell {
+  gridColumn: string;
+  gridRow: string;
+}
+
+export function compareDashboardLayout(
+  a: TodayDashboardLayout,
+  b: TodayDashboardLayout,
+): number {
+  if (a.width !== b.width) return a.width - b.width;
+  return a.height - b.height;
+}
+
+export function sortDashboardCells<T extends { layout: TodayDashboardLayout; id: string }>(
+  cells: T[],
+): T[] {
+  return [...cells].sort((a, b) => {
+    const byLayout = compareDashboardLayout(a.layout, b.layout);
+    if (byLayout !== 0) return byLayout;
+    return a.id.localeCompare(b.id);
+  });
+}
+
+/** Wide widgets (width > 1) anchor to column pairs — never straddle the grid center. */
+export function allowedStartColumns(
+  width: number,
+  columns: number,
+): number[] {
+  if (width <= 1) {
+    return Array.from({ length: columns }, (_, index) => index);
+  }
+
+  if (width === 2 && columns === 4) {
+    return [0, 2];
+  }
+
+  return Array.from({ length: columns - width + 1 }, (_, index) => index);
+}
+
+/**
+ * First-fit placement in ascending layout order (top-left scan).
+ * Multi-column widgets may only start at aligned column pairs (1–2 or 3–4 on a 4-col grid).
+ */
+export function packDashboardCells(
+  cells: TodayDashboardCell[],
+  columns = 4,
+): PackedDashboardCell[] {
+  const sorted = sortDashboardCells(cells);
+  const occupied = new Set<string>();
+
+  function canPlace(row: number, col: number, width: number, height: number): boolean {
+    if (col + width > columns) return false;
+    for (let r = row; r < row + height; r += 1) {
+      for (let c = col; c < col + width; c += 1) {
+        if (occupied.has(`${r}-${c}`)) return false;
+      }
+    }
+    return true;
+  }
+
+  function mark(row: number, col: number, width: number, height: number) {
+    for (let r = row; r < row + height; r += 1) {
+      for (let c = col; c < col + width; c += 1) {
+        occupied.add(`${r}-${c}`);
+      }
+    }
+  }
+
+  const placed: PackedDashboardCell[] = [];
+
+  for (const cell of sorted) {
+    const { width, height } = cell.layout;
+    let found = false;
+    const startColumns = allowedStartColumns(width, columns);
+
+    for (let row = 0; !found; row += 1) {
+      for (const col of startColumns) {
+        if (!canPlace(row, col, width, height)) continue;
+        mark(row, col, width, height);
+        placed.push({
+          ...cell,
+          gridColumn: `${col + 1} / span ${width}`,
+          gridRow: `${row + 1} / span ${height}`,
+        });
+        found = true;
+        break;
+      }
+    }
+  }
+
+  return placed;
+}
+
+export function packedCellClassName(layout: TodayDashboardLayout): string {
+  const rowSpan =
+    layout.height === 3 ? 'row-span-3' : layout.height === 2 ? 'row-span-2' : 'row-span-1';
+
+  const colSpan =
+    layout.width === 2
+      ? 'col-span-2 max-sm:col-span-1'
+      : 'col-span-1';
+
+  return `${colSpan} ${rowSpan} min-h-0 min-w-0 overflow-hidden flex flex-col max-lg:${colSpan}`;
+}
+
+export const TODAY_DASHBOARD_GRID_CLASS =
+  'today-dashboard-grid grid grid-cols-4 max-lg:grid-cols-2 max-sm:grid-cols-1 gap-4';
--- a/frontend/src/components/today/widget-registry.ts
+++ b/frontend/src/components/today/widget-registry.ts
@@ -11,8 +11,8 @@ import {
 } from 'lucide-react';
 import type { Organization } from '@/types/organization';
 import {
-  canAccessAppointmentsSection,
  canEditStaff,
+  canViewAppointmentsTab,
  canViewCases,
  canViewStaff,
  canViewTasks,
@@ -67,7 +67,7 @@ export const TODAY_KPI_DEFINITIONS: TodayKpiDefinition[] = [
    color: 'blue',
    orgTypes: ['CLINIC'],
    href: '/appointments',
-    isVisible: (org) => canAccessAppointmentsSection(org),
+    isVisible: (org) => canViewAppointmentsTab(org),
    formatValue: (widgets) => {
      const count = countWidget(widgets, 'appointmentsToday');
      return count === null ? null : String(count);
@@ -80,7 +80,7 @@ export const TODAY_KPI_DEFINITIONS: TodayKpiDefinition[] = [
    color: 'green',
    orgTypes: ['CLINIC'],
    href: '/patients',
-    isVisible: (org) => canViewPatients(org) || canAccessAppointmentsSection(org),
+    isVisible: (org) => canViewPatients(org) || canViewAppointmentsTab(org),
    formatValue: (widgets) => {
      const count = countWidget(widgets, 'patientsToday');
      return count === null ? null : String(count);
@@ -203,26 +203,6 @@ export const TODAY_KPI_DEFINITIONS: TodayKpiDefinition[] = [
      return count === null ? null : String(count);
    },
  },
-  {
-    key: 'seats',
-    titleKey: 'widgetSeats',
-    icon: UserCog,
-    color: 'default',
-    orgTypes: ['CLINIC', 'LAB'],
-    href: '/staff',
-    isVisible: (org) => canViewStaff(org),
-    formatValue: (widgets) => {
-      const seats = widgets.seats;
-      if (!seats || !('used' in seats)) return null;
-      if (seats.unlimited) return String(seats.used);
-      return `${seats.used}/${seats.limit ?? 0}`;
-    },
-    formatSubtitle: (widgets) => {
-      const seats = widgets.seats;
-      if (!seats || !('used' in seats)) return null;
-      return seats.unlimited ? 'unlimited' : null;
-    },
-  },
  {
    key: 'pendingStaffInvites',
    titleKey: 'widgetPendingStaffInvites',
--- a/frontend/src/components/ui/appointments/AppointmentScheduleGrid.tsx
+++ b/frontend/src/components/ui/appointments/AppointmentScheduleGrid.tsx
@@ -160,6 +160,9 @@ export function AppointmentScheduleGrid({
      });
      return;
    }
+    if (!canBook) {
+      return;
+    }
    onAppointmentClick?.(apt);
  }

@@ -373,6 +376,10 @@ export function AppointmentScheduleGrid({
          treatmentCatalog={treatmentCatalog}
          anchorRect={overlapPopover.anchorRect}
          onSelect={(apt) => {
+            if (!canBook) {
+              setOverlapPopover(null);
+              return;
+            }
            const provider = providers.find((p) => p.userId === apt.providerUserId);
            if (
              provider &&
--- a/frontend/src/components/ui/shared/Sidebar.tsx
+++ b/frontend/src/components/ui/shared/Sidebar.tsx
@@ -18,7 +18,7 @@ import type { OrgTypeName } from '@/components/shared/permissions';
 import { useAuth } from '@/lib/hooks/useAuth';
 import { usePendingConnectionsCount } from '@/lib/hooks/usePendingConnectionsCount';
 import {
-  canAccessAppointmentsSection,
+  canViewAppointmentsTab,
  canViewCases,
  canViewTasks,
  canViewTab,
@@ -73,7 +73,7 @@ function Sidebar() {
          return false;
        }
        if (item.path === '/appointments') {
-          return canAccessAppointmentsSection(currentOrganization);
+          return canViewAppointmentsTab(currentOrganization);
        }
        if (item.path === '/cases') {
          return canViewCases(currentOrganization);
--- a/frontend/src/styles/globals.css
+++ b/frontend/src/styles/globals.css
@@ -121,7 +121,7 @@
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
-
+  --today-grid-unit: 5.75rem;
  --color-background-primary: #000c1c;
  --color-background-secondary: #0a1520;
  --color-background-card: #14253d;
@@ -272,6 +272,13 @@ select option {
  border-radius: var(--radius-lg);
 }

+@media (min-width: 1024px) {
+  .today-dashboard-grid .today-dashboard-cell {
+    grid-column: var(--today-gc);
+    grid-row: var(--today-gr);
+  }
+}
+
 :root[data-theme='dark'] .surface-card,
 :root:not([data-theme='light']) .surface-card {
  background: color-mix(in srgb, var(--color-card-background) 82%, var(--color-background-primary));
--- a/frontend/src/types/today.ts
+++ b/frontend/src/types/today.ts
@@ -36,6 +36,7 @@ export type TodaySummaryCharts = {
  appointmentsWeekMine?: TodayChartBucket[];
  labTaskActivityWeek?: TodayStackedDayBucket[];
  inProgressTasksByProsthesis?: TodayChartBucket[];
+  efficiencyReport?: TodayChartBucket[];
 };

 export type TodayWidgetKey =
@@ -49,10 +50,23 @@ export type TodayWidgetKey =
  | 'tasksInProgress'
  | 'importantTasks'
  | 'pendingConnections'
-  | 'seats'
  | 'pendingStaffInvites'
  | 'providersWithoutWorkingHours';

+export type TodaySubscriptionSnapshot = {
+  hasActivePlan: boolean;
+  planName: string | null;
+  seatsUsed: number;
+  seatsLimit: number | null;
+  seatsUnlimited: boolean;
+  seatsPercent: number;
+  periodStartAt: string;
+  periodEndAt: string | null;
+  periodTotalDays: number;
+  periodElapsedDays: number;
+  periodPercent: number;
+};
+
 export type TodaySummaryWidgets = Partial<
  Record<
    TodayWidgetKey,
@@ -68,6 +82,7 @@ export interface TodaySummaryData {
  widgets: TodaySummaryWidgets;
  charts: TodaySummaryCharts;
  actions: TodaySummaryActions;
+  subscription?: TodaySubscriptionSnapshot;
 }

 export interface TodaySummaryResponse {