Polish Today dashboard loading, errors, and layout (Phase 4).

Add section error boundaries, retry banner with stale-while-revalidate, shared skeletons, responsive action layout, and org-switch refetching.

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/src/components/today/TodayChartsSection.tsx

@@ -8,14 +8,22 @@ import {
 } from '@/components/shared/permissions';
 import { ChartCard } from '@/components/today/ChartCard';
 import { TodayBarChart } from '@/components/today/TodayBarChart';
+import { ChartCardSkeleton } from '@/components/today/TodaySkeleton';
 import type { TodaySummaryCharts } from '@/types/today';
 
 interface TodayChartsSectionProps {
   charts: TodaySummaryCharts;
   loading?: boolean;
+  isInitialLoad?: boolean;
+  className?: string;
 }
 
-export function TodayChartsSection({ charts, loading = false }: TodayChartsSectionProps) {
+export function TodayChartsSection({
+  charts,
+  loading = false,
+  isInitialLoad = false,
+  className = '',
+}: TodayChartsSectionProps) {
   const t = useTranslations('today');
   const { currentOrganization } = useAuth();
   const orgType = currentOrganization?.type;
@@ -32,14 +40,26 @@ export function TodayChartsSection({ charts, loading = false }: TodayChartsSecti
   const treatmentData = charts.treatmentMixWeek ?? [];
   const tasksData = charts.tasksByWorkflowStep ?? [];
 
+  if (isInitialLoad) {
+    return (
+      <div className={`grid grid-cols-1 gap-4 ${className}`}>
+        {showTreatmentMix ? <ChartCardSkeleton /> : null}
+        {showTasksByStep ? <ChartCardSkeleton /> : null}
+      </div>
+    );
+  }
+
+  const chartCount = (showTreatmentMix ? 1 : 0) + (showTasksByStep ? 1 : 0);
+
   return (
-    <div className="grid grid-cols-1 xl:grid-cols-2 gap-4">
+    <div
+      className={`grid grid-cols-1 ${chartCount > 1 ? 'lg:grid-cols-2' : ''} gap-4 ${loading ? 'opacity-70 transition-opacity' : ''} ${className}`}
+    >
       {showTreatmentMix ? (
         <ChartCard
           title={t('chartTreatmentMixTitle')}
           subtitle={t('chartTreatmentMixSubtitle')}
-          loading={loading}
-          isEmpty={!loading && treatmentData.length === 0}
+          isEmpty={treatmentData.length === 0}
           emptyMessage={t('chartEmpty')}
         >
           <TodayBarChart data={treatmentData} />
@@ -50,8 +70,7 @@ export function TodayChartsSection({ charts, loading = false }: TodayChartsSecti
         <ChartCard
           title={t('chartTasksByStepTitle')}
           subtitle={t('chartTasksByStepSubtitle')}
-          loading={loading}
-          isEmpty={!loading && tasksData.length === 0}
+          isEmpty={tasksData.length === 0}
           emptyMessage={t('chartEmpty')}
         >
           <TodayBarChart data={tasksData} />