feat: Morning NOC Summary adaptive card for Teams

- Add MorningSummaryService with Zabbix aggregation and adaptive card builder
- Add webhook delivery system with Teams incoming webhooks
- Add admin UI at /admin/morning-summary for webhook/config management
- Add API routes: /send, /test, /webhooks, /webhooks/[id], /config, /history
- Register morning-summary cron job in SyncScheduler (Mon-Fri 6:30 AM)
- Add outages_only filter (Unavailable triggers only)
- Fix host resolution: use getTriggerEnabledHosts to exclude disabled hosts
- Fix resolved events: event.get value:1 scoped to window with r_eventid filter
- Remove emojis from fact rows and section headers in card
- Remove Open Zabbix button (duplicate of View Problems)
- Add migrations: morning_summary_config + morning_summaries tables
- Add outages_only column to morning_summary_config

app/engagement/profile/page.tsx

@@ -0,0 +1,648 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Skeleton } from '@/components/ui/skeleton';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  ResponsiveContainer,
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  Tooltip,
+  Legend,
+  CartesianGrid,
+  RadarChart,
+  PolarGrid,
+  PolarAngleAxis,
+  PolarRadiusAxis,
+  Radar,
+} from 'recharts';
+import { Users, RefreshCw } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+
+interface UserOption {
+  graphUserId: string;
+  displayName: string;
+  email: string;
+  jobTitle: string | null;
+  department: string | null;
+}
+
+interface DayData {
+  date: string;
+  hoursWorked: number;
+  billableHours: number;
+}
+
+interface MonthData {
+  month: string;
+  hoursWorked: number;
+  billableHours: number;
+  daysWorked: number;
+  teamsMessages: number;
+  teamsPrivateMessages: number;
+  teamsCalls: number;
+  meetingsAttended: number;
+  meetingsOrganized: number;
+  emailsSent: number;
+  emailsReceived: number;
+  totalMeetings: number;
+  clientMeetings: number;
+  meetingDurationMinutes: number;
+  zoomCalls: number;
+  zoomClientCalls: number;
+}
+
+interface HistoryData {
+  user: {
+    id: string;
+    displayName: string;
+    email: string;
+    jobTitle: string | null;
+    department: string | null;
+    autotaskResourceId: number | null;
+  };
+  daily: DayData[];
+  monthly: MonthData[];
+}
+
+// Heat level class names — must be full strings for Tailwind to include them
+const HEAT_CLASSES = [
+  'bg-muted/50',
+  'bg-emerald-100 dark:bg-emerald-950',
+  'bg-emerald-300 dark:bg-emerald-800',
+  'bg-emerald-500 dark:bg-emerald-600',
+  'bg-emerald-700 dark:bg-emerald-400',
+];
+
+function hoursLevel(h: number): number {
+  if (h <= 0) return 0;
+  if (h < 2) return 1;
+  if (h < 5) return 2;
+  if (h < 7) return 3;
+  return 4;
+}
+
+function ActivityHeatmap({ daily }: { daily: DayData[] }) {
+  const dailyMap: Record<string, DayData> = {};
+  for (const d of daily) dailyMap[d.date] = d;
+
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+
+  // Start from 52 weeks ago, padded back to Monday
+  const startDate = new Date(today);
+  startDate.setDate(startDate.getDate() - 363);
+  const dow = (startDate.getDay() + 6) % 7; // Mon=0 … Sun=6
+  startDate.setDate(startDate.getDate() - dow);
+
+  const yearAgo = new Date(today);
+  yearAgo.setFullYear(yearAgo.getFullYear() - 1);
+
+  // Build weeks
+  const weeks: Array<Array<{ date: string; inRange: boolean }>> = [];
+  const cursor = new Date(startDate);
+  while (cursor <= today) {
+    const week: Array<{ date: string; inRange: boolean }> = [];
+    for (let i = 0; i < 7; i++) {
+      const key = cursor.toISOString().slice(0, 10);
+      week.push({ date: key, inRange: cursor >= yearAgo && cursor <= today });
+      cursor.setDate(cursor.getDate() + 1);
+    }
+    weeks.push(week);
+  }
+
+  // Month label: track where each month starts
+  const monthLabels: Array<{ weekIndex: number; label: string }> = [];
+  let lastMonth = -1;
+  weeks.forEach((week, wi) => {
+    const d = new Date(week[0].date + 'T00:00:00');
+    const m = d.getMonth();
+    if (m !== lastMonth) {
+      monthLabels.push({
+        weekIndex: wi,
+        label: d.toLocaleDateString('en-US', { month: 'short' }),
+      });
+      lastMonth = m;
+    }
+  });
+
+  const DAY_LABELS = ['Mon', '', 'Wed', '', 'Fri', '', 'Sun'];
+
+  return (
+    <div className="overflow-x-auto pb-2">
+      <div className="inline-flex gap-2 min-w-0">
+        {/* Day labels */}
+        <div className="flex flex-col gap-[3px] pt-5 shrink-0">
+          {DAY_LABELS.map((label, i) => (
+            <div key={i} className="h-[13px] flex items-center">
+              <span className="text-[10px] text-muted-foreground w-6 text-right pr-1 leading-none">{label}</span>
+            </div>
+          ))}
+        </div>
+
+        {/* Grid */}
+        <div className="flex flex-col">
+          {/* Month labels */}
+          <div className="flex mb-1 h-4 relative">
+            {weeks.map((_, wi) => {
+              const ml = monthLabels.find(m => m.weekIndex === wi);
+              return (
+                <div key={wi} className="w-[13px] shrink-0 relative">
+                  {ml && (
+                    <span className="absolute text-[10px] text-muted-foreground whitespace-nowrap leading-none">
+                      {ml.label}
+                    </span>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+
+          {/* Cells */}
+          <div className="flex gap-[3px]">
+            {weeks.map((week, wi) => (
+              <div key={wi} className="flex flex-col gap-[3px]">
+                {week.map((cell, di) => {
+                  const data = dailyMap[cell.date];
+                  const hours = data?.hoursWorked ?? 0;
+                  const level = cell.inRange ? hoursLevel(hours) : 0;
+                  const isFuture = cell.date > today.toISOString().slice(0, 10);
+                  return (
+                    <div
+                      key={di}
+                      className={cn(
+                        'w-[13px] h-[13px] rounded-[2px]',
+                        isFuture ? 'opacity-0' : HEAT_CLASSES[level]
+                      )}
+                      title={
+                        cell.inRange && !isFuture
+                          ? `${cell.date}: ${hours.toFixed(1)}h (${(data?.billableHours ?? 0).toFixed(1)}h billable)`
+                          : cell.date
+                      }
+                    />
+                  );
+                })}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Legend */}
+      <div className="flex items-center gap-1.5 mt-3 ml-8">
+        <span className="text-[10px] text-muted-foreground">Less</span>
+        {HEAT_CLASSES.map((cls, i) => (
+          <div key={i} className={cn('w-[13px] h-[13px] rounded-[2px]', cls)} />
+        ))}
+        <span className="text-[10px] text-muted-foreground">More</span>
+      </div>
+    </div>
+  );
+}
+
+function buildRadarData(monthly: MonthData[]) {
+  const active = monthly.filter(m => m.hoursWorked > 0 || m.teamsMessages > 0 || m.emailsSent > 0);
+  if (active.length === 0) return [];
+
+  const avg = (fn: (m: MonthData) => number) =>
+    active.reduce((s, m) => s + fn(m), 0) / active.length;
+
+  const avgHours = avg(m => m.hoursWorked);
+  const avgBillable = avg(m => m.billableHours);
+  const avgMeetings = avg(m => m.totalMeetings);
+  const avgComms = avg(m => m.teamsMessages + m.emailsSent);
+  const avgCalls = avg(m => m.zoomClientCalls + m.teamsCalls);
+
+  return [
+    {
+      subject: 'Utilization',
+      value: Math.min(100, Math.round((avgHours / 160) * 100)),
+      fullMark: 100,
+    },
+    {
+      subject: 'Billable %',
+      value: avgHours > 0 ? Math.round((avgBillable / avgHours) * 100) : 0,
+      fullMark: 100,
+    },
+    {
+      subject: 'Meetings',
+      value: Math.min(100, Math.round((avgMeetings / 25) * 100)),
+      fullMark: 100,
+    },
+    {
+      subject: 'Comms',
+      value: Math.min(100, Math.round((avgComms / 400) * 100)),
+      fullMark: 100,
+    },
+    {
+      subject: 'Client Calls',
+      value: Math.min(100, Math.round((avgCalls / 15) * 100)),
+      fullMark: 100,
+    },
+  ];
+}
+
+function monthLabel(m: string) {
+  return new Date(m + '-02').toLocaleDateString('en-US', { month: 'short', year: 'numeric' });
+}
+
+interface BackfillStatus {
+  running: boolean;
+  started: string | null;
+  processed: number;
+  total: number;
+  currentUser: string | null;
+  errors: number;
+  done: boolean;
+  log: string[];
+}
+
+export default function EngagementProfilePage() {
+  const [users, setUsers] = useState<UserOption[]>([]);
+  const [usersLoading, setUsersLoading] = useState(true);
+  const [selectedUserId, setSelectedUserId] = useState<string>('');
+  const [history, setHistory] = useState<HistoryData | null>(null);
+  const [historyLoading, setHistoryLoading] = useState(false);
+  const [backfill, setBackfill] = useState<BackfillStatus | null>(null);
+  const [backfillStarting, setBackfillStarting] = useState(false);
+
+  useEffect(() => {
+    (async () => {
+      try {
+        const res = await fetch('/api/engagement/users?period=D30&sort=display_name&order=asc');
+        const data = await res.json();
+        setUsers(data.users ?? []);
+      } catch {}
+      setUsersLoading(false);
+    })();
+  }, []);
+
+  const loadHistory = useCallback(async (userId: string) => {
+    setHistoryLoading(true);
+    setHistory(null);
+    try {
+      const res = await fetch(`/api/engagement/user/${userId}/history`);
+      const data = await res.json();
+      setHistory(data);
+    } catch {}
+    setHistoryLoading(false);
+  }, []);
+
+  const handleSelect = (userId: string) => {
+    setSelectedUserId(userId);
+    loadHistory(userId);
+  };
+
+  const startBackfill = async () => {
+    setBackfillStarting(true);
+    try {
+      await fetch('/api/engagement/backfill-meetings', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ monthsBack: 12 }),
+      });
+      pollBackfill();
+    } catch {}
+    setBackfillStarting(false);
+  };
+
+  const pollBackfill = useCallback(async () => {
+    const res = await fetch('/api/engagement/backfill-meetings').catch(() => null);
+    if (!res) return;
+    const data: BackfillStatus = await res.json();
+    setBackfill(data);
+    if (data.running) setTimeout(pollBackfill, 2000);
+    else if (data.done && selectedUserId) loadHistory(selectedUserId);
+  }, [selectedUserId, loadHistory]);
+
+  useEffect(() => {
+    fetch('/api/engagement/backfill-meetings').then(r => r.json()).then((d: BackfillStatus) => {
+      setBackfill(d);
+      if (d.running) setTimeout(pollBackfill, 2000);
+    }).catch(() => {});
+  }, [pollBackfill]);
+
+  const monthly = history?.monthly ?? [];
+  const radarData = buildRadarData(monthly);
+
+  const totalHours = monthly.reduce((s, m) => s + m.hoursWorked, 0);
+  const totalBillable = monthly.reduce((s, m) => s + m.billableHours, 0);
+  const billablePct = totalHours > 0 ? Math.round((totalBillable / totalHours) * 100) : 0;
+  const activeMonths = monthly.filter(m => m.hoursWorked > 0).length;
+  const peakMonth = monthly.reduce(
+    (best, m) => (m.hoursWorked > (best?.hoursWorked ?? 0) ? m : best),
+    null as MonthData | null
+  );
+
+  const barData = monthly.map(m => ({
+    name: m.month.slice(5),
+    billable: parseFloat(m.billableHours.toFixed(1)),
+    nonBillable: parseFloat((m.hoursWorked - m.billableHours).toFixed(1)),
+  }));
+
+  return (
+    <div className="container mx-auto px-6 py-8 space-y-6">
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+        <div>
+          <h1 className="text-2xl font-bold">Employee Profile</h1>
+          <p className="text-muted-foreground text-sm mt-1">12-month activity overview</p>
+        </div>
+
+        <Select value={selectedUserId} onValueChange={handleSelect} disabled={usersLoading}>
+          <SelectTrigger className="w-64">
+            <SelectValue placeholder={usersLoading ? 'Loading…' : 'Select employee…'} />
+          </SelectTrigger>
+          <SelectContent>
+            {users.map(u => (
+              <SelectItem key={u.graphUserId} value={u.graphUserId}>
+                <div className="flex flex-col items-start">
+                  <span>{u.displayName}</span>
+                  {u.jobTitle && (
+                    <span className="text-xs text-muted-foreground">{u.jobTitle}</span>
+                  )}
+                </div>
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* Backfill panel */}
+      {backfill && (backfill.running || backfill.done) ? (
+        <Card className={cn('border', backfill.running ? 'border-blue-400' : backfill.errors > 0 ? 'border-yellow-400' : 'border-green-400')}>
+          <CardContent className="py-3 px-4 space-y-2">
+            <div className="flex items-center justify-between gap-4">
+              <div className="flex items-center gap-2 text-sm font-medium">
+                {backfill.running && <RefreshCw className="h-4 w-4 animate-spin text-blue-500" />}
+                {backfill.running
+                  ? `Backfilling meetings… ${backfill.processed}/${backfill.total} users`
+                  : `Backfill complete — ${backfill.processed} users, ${backfill.errors} errors`}
+              </div>
+              {backfill.running && backfill.currentUser && (
+                <span className="text-xs text-muted-foreground truncate">{backfill.currentUser}</span>
+              )}
+            </div>
+            {backfill.running && backfill.total > 0 && (
+              <div className="w-full bg-muted rounded-full h-1.5">
+                <div
+                  className="bg-blue-500 h-1.5 rounded-full transition-all"
+                  style={{ width: `${Math.round((backfill.processed / backfill.total) * 100)}%` }}
+                />
+              </div>
+            )}
+            {backfill.log.length > 0 && (
+              <pre className="text-[10px] text-muted-foreground max-h-24 overflow-y-auto bg-muted/30 rounded p-2">
+                {backfill.log.slice(-20).join('\n')}
+              </pre>
+            )}
+          </CardContent>
+        </Card>
+      ) : (
+        <div className="flex justify-end">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={startBackfill}
+            disabled={backfillStarting}
+            className="gap-2"
+          >
+            <RefreshCw className={cn('h-3.5 w-3.5', backfillStarting && 'animate-spin')} />
+            Backfill 12 months of meetings
+          </Button>
+        </div>
+      )}
+
+      {!selectedUserId && (
+        <Card className="border-dashed">
+          <CardContent className="flex flex-col items-center justify-center py-20 text-center">
+            <Users className="h-10 w-10 text-muted-foreground mb-4" />
+            <p className="font-medium">Select an employee</p>
+            <p className="text-sm text-muted-foreground mt-1">
+              Choose an employee above to see their 12-month activity profile
+            </p>
+          </CardContent>
+        </Card>
+      )}
+
+      {selectedUserId && historyLoading && (
+        <div className="space-y-4">
+          {[...Array(4)].map((_, i) => (
+            <Skeleton key={i} className="h-48" />
+          ))}
+        </div>
+      )}
+
+      {selectedUserId && !historyLoading && history && (
+        <>
+          {/* User header */}
+          <div>
+            <h2 className="text-xl font-semibold">{history.user.displayName}</h2>
+            <div className="flex flex-wrap items-center gap-x-2 gap-y-0.5 mt-0.5 text-sm text-muted-foreground">
+              {history.user.jobTitle && <span>{history.user.jobTitle}</span>}
+              {history.user.jobTitle && history.user.department && <span>·</span>}
+              {history.user.department && <span>{history.user.department}</span>}
+              {(history.user.jobTitle || history.user.department) && <span>·</span>}
+              <span>{history.user.email}</span>
+            </div>
+          </div>
+
+          {/* Year stats */}
+          <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
+            <Card>
+              <CardContent className="pt-4 pb-4">
+                <p className="text-xs text-muted-foreground uppercase tracking-wide mb-1">Total Hours</p>
+                <p className="text-2xl font-bold tabular-nums">{totalHours.toFixed(0)}</p>
+                <p className="text-xs text-muted-foreground">over 12 months</p>
+              </CardContent>
+            </Card>
+            <Card>
+              <CardContent className="pt-4 pb-4">
+                <p className="text-xs text-muted-foreground uppercase tracking-wide mb-1">Billable Rate</p>
+                <p className="text-2xl font-bold tabular-nums">{billablePct}%</p>
+                <p className="text-xs text-muted-foreground">{totalBillable.toFixed(0)}h billable</p>
+              </CardContent>
+            </Card>
+            <Card>
+              <CardContent className="pt-4 pb-4">
+                <p className="text-xs text-muted-foreground uppercase tracking-wide mb-1">Avg hrs / month</p>
+                <p className="text-2xl font-bold tabular-nums">
+                  {activeMonths > 0 ? (totalHours / activeMonths).toFixed(0) : '—'}
+                </p>
+                <p className="text-xs text-muted-foreground">{activeMonths} active months</p>
+              </CardContent>
+            </Card>
+            <Card>
+              <CardContent className="pt-4 pb-4">
+                <p className="text-xs text-muted-foreground uppercase tracking-wide mb-1">Peak Month</p>
+                <p className="text-2xl font-bold tabular-nums">
+                  {peakMonth ? peakMonth.hoursWorked.toFixed(0) + 'h' : '—'}
+                </p>
+                <p className="text-xs text-muted-foreground">
+                  {peakMonth ? monthLabel(peakMonth.month) : ''}
+                </p>
+              </CardContent>
+            </Card>
+          </div>
+
+          {/* Activity heatmap */}
+          <Card>
+            <CardHeader className="pb-3">
+              <CardTitle className="text-sm font-medium">Activity Calendar</CardTitle>
+              <p className="text-xs text-muted-foreground">Daily hours worked — last 12 months</p>
+            </CardHeader>
+            <CardContent>
+              {history.daily.length > 0 ? (
+                <ActivityHeatmap daily={history.daily} />
+              ) : (
+                <p className="text-sm text-muted-foreground py-6 text-center">
+                  No time entry data available
+                </p>
+              )}
+            </CardContent>
+          </Card>
+
+          {/* Monthly bar chart + radar */}
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
+            <Card className="lg:col-span-2">
+              <CardHeader className="pb-3">
+                <CardTitle className="text-sm font-medium">Monthly Hours</CardTitle>
+                <p className="text-xs text-muted-foreground">Billable vs non-billable</p>
+              </CardHeader>
+              <CardContent>
+                <ResponsiveContainer width="100%" height={220}>
+                  <BarChart data={barData} margin={{ top: 5, right: 10, left: -20, bottom: 5 }}>
+                    <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
+                    <XAxis dataKey="name" tick={{ fontSize: 11 }} />
+                    <YAxis tick={{ fontSize: 11 }} />
+                    <Tooltip
+                      formatter={(value, name) => [
+                        `${value}h`,
+                        name === 'billable' ? 'Billable' : 'Non-billable',
+                      ]}
+                      contentStyle={{ fontSize: 12 }}
+                    />
+                    <Legend
+                      formatter={v => (v === 'billable' ? 'Billable' : 'Non-billable')}
+                      wrapperStyle={{ fontSize: 11 }}
+                    />
+                    <Bar dataKey="billable" stackId="a" fill="#10b981" name="billable" />
+                    <Bar dataKey="nonBillable" stackId="a" fill="#94a3b8" name="nonBillable" radius={[2, 2, 0, 0]} />
+                  </BarChart>
+                </ResponsiveContainer>
+              </CardContent>
+            </Card>
+
+            <Card>
+              <CardHeader className="pb-3">
+                <CardTitle className="text-sm font-medium">Activity Signature</CardTitle>
+                <p className="text-xs text-muted-foreground">12-month average profile</p>
+              </CardHeader>
+              <CardContent className="flex items-center justify-center pt-0">
+                {radarData.length > 0 ? (
+                  <RadarChart width={240} height={220} data={radarData}>
+                    <PolarGrid />
+                    <PolarAngleAxis dataKey="subject" tick={{ fontSize: 10 }} />
+                    <PolarRadiusAxis
+                      angle={90}
+                      domain={[0, 100]}
+                      tick={false}
+                      axisLine={false}
+                    />
+                    <Radar
+                      name="Profile"
+                      dataKey="value"
+                      stroke="#10b981"
+                      fill="#10b981"
+                      fillOpacity={0.3}
+                    />
+                  </RadarChart>
+                ) : (
+                  <p className="text-sm text-muted-foreground text-center py-8">No data</p>
+                )}
+              </CardContent>
+            </Card>
+          </div>
+
+          {/* Monthly breakdown table */}
+          <Card>
+            <CardHeader className="pb-3">
+              <CardTitle className="text-sm font-medium">Monthly Breakdown</CardTitle>
+            </CardHeader>
+            <CardContent className="p-0">
+              <div className="overflow-x-auto">
+                <table className="w-full text-sm">
+                  <thead>
+                    <tr className="border-b text-xs text-muted-foreground uppercase tracking-wide">
+                      <th className="text-left px-4 py-2.5 font-medium">Month</th>
+                      <th className="text-right px-3 py-2.5 font-medium">Hours</th>
+                      <th className="text-right px-3 py-2.5 font-medium">Billable</th>
+                      <th className="text-right px-3 py-2.5 font-medium">Bill %</th>
+                      <th className="text-right px-3 py-2.5 font-medium hidden sm:table-cell">Days</th>
+                      <th className="text-right px-3 py-2.5 font-medium hidden md:table-cell">Meetings</th>
+                      <th className="text-right px-3 py-2.5 font-medium hidden md:table-cell">Messages</th>
+                      <th className="text-right px-3 py-2.5 font-medium hidden lg:table-cell">Emails</th>
+                      <th className="text-right px-3 py-2.5 font-medium hidden lg:table-cell">Calls</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {[...monthly].reverse().map(m => {
+                      const pct = m.hoursWorked > 0 ? Math.round((m.billableHours / m.hoursWorked) * 100) : 0;
+                      const isEmpty =
+                        m.hoursWorked === 0 && m.teamsMessages === 0 && m.emailsSent === 0;
+                      const totalCalls = m.zoomClientCalls + m.teamsCalls;
+                      return (
+                        <tr
+                          key={m.month}
+                          className={cn(
+                            'border-b last:border-0 hover:bg-muted/30 transition-colors',
+                            isEmpty && 'opacity-40'
+                          )}
+                        >
+                          <td className="px-4 py-2 font-medium">{monthLabel(m.month)}</td>
+                          <td className="px-3 py-2 text-right tabular-nums">
+                            {m.hoursWorked > 0 ? m.hoursWorked.toFixed(1) : '—'}
+                          </td>
+                          <td className="px-3 py-2 text-right tabular-nums text-emerald-600 dark:text-emerald-400">
+                            {m.billableHours > 0 ? m.billableHours.toFixed(1) : '—'}
+                          </td>
+                          <td className="px-3 py-2 text-right tabular-nums">
+                            {m.hoursWorked > 0 ? `${pct}%` : '—'}
+                          </td>
+                          <td className="px-3 py-2 text-right tabular-nums hidden sm:table-cell">
+                            {m.daysWorked > 0 ? m.daysWorked : '—'}
+                          </td>
+                          <td className="px-3 py-2 text-right tabular-nums hidden md:table-cell">
+                            {m.totalMeetings > 0 ? m.totalMeetings : '—'}
+                          </td>
+                          <td className="px-3 py-2 text-right tabular-nums hidden md:table-cell">
+                            {m.teamsMessages > 0 ? m.teamsMessages : '—'}
+                          </td>
+                          <td className="px-3 py-2 text-right tabular-nums hidden lg:table-cell">
+                            {m.emailsSent > 0 ? m.emailsSent : '—'}
+                          </td>
+                          <td className="px-3 py-2 text-right tabular-nums hidden lg:table-cell">
+                            {totalCalls > 0 ? totalCalls : '—'}
+                          </td>
+                        </tr>
+                      );
+                    })}
+                  </tbody>
+                </table>
+              </div>
+            </CardContent>
+          </Card>
+        </>
+      )}
+    </div>
+  );
+}