dyolink/frontend/src/components/today/TodayChartsSection.tsx

'use client';

import { useTranslations } from 'next-intl';
import { useAuth } from '@/lib/hooks/useAuth';
import {
  canViewTasks,
  canViewTreatment,
} from '@/components/shared/permissions';
import { ChartCard } from '@/components/today/ChartCard';
import { TodayBarChart } from '@/components/today/TodayBarChart';
import type { TodaySummaryCharts } from '@/types/today';

interface TodayChartsSectionProps {
  charts: TodaySummaryCharts;
  loading?: boolean;
}

export function TodayChartsSection({ charts, loading = false }: TodayChartsSectionProps) {
  const t = useTranslations('today');
  const { currentOrganization } = useAuth();
  const orgType = currentOrganization?.type;

  const showTreatmentMix =
    orgType === 'CLINIC' && canViewTreatment(currentOrganization);
  const showTasksByStep =
    orgType === 'LAB' && canViewTasks(currentOrganization);

  if (!showTreatmentMix && !showTasksByStep) {
    return null;
  }

  const treatmentData = charts.treatmentMixWeek ?? [];
  const tasksData = charts.tasksByWorkflowStep ?? [];

  return (
    <div className="grid grid-cols-1 xl:grid-cols-2 gap-4">
      {showTreatmentMix ? (
        <ChartCard
          title={t('chartTreatmentMixTitle')}
          subtitle={t('chartTreatmentMixSubtitle')}
          loading={loading}
          isEmpty={!loading && treatmentData.length === 0}
          emptyMessage={t('chartEmpty')}
        >
          <TodayBarChart data={treatmentData} />
        </ChartCard>
      ) : null}

      {showTasksByStep ? (
        <ChartCard
          title={t('chartTasksByStepTitle')}
          subtitle={t('chartTasksByStepSubtitle')}
          loading={loading}
          isEmpty={!loading && tasksData.length === 0}
          emptyMessage={t('chartEmpty')}
        >
          <TodayBarChart data={tasksData} />
        </ChartCard>
      ) : null}
    </div>
  );
}