fix: force dynamic for meeting page

components/status-badge.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import { cn } from '@/lib/utils';
+import { STATUS_COLORS } from '@/lib/constants';
+import type { ProjectStatus } from '@/types/database';
+
+interface StatusBadgeProps {
+  status: ProjectStatus;
+  size?: 'sm' | 'md' | 'lg';
+  showLabel?: boolean;
+}
+
+export function StatusBadge({ status, size = 'md', showLabel = true }: StatusBadgeProps) {
+  const colors = STATUS_COLORS[status];
+  const sizeClasses = {
+    sm: 'h-2 w-2',
+    md: 'h-3 w-3',
+    lg: 'h-4 w-4',
+  };
+
+  return (
+    <div className="flex items-center gap-1.5">
+      <div className={cn('rounded-full', sizeClasses[size], colors.bg, 'ring-2', colors.border.replace('border', 'ring'))} />
+      {showLabel && (
+        <span className={cn('text-sm font-medium', colors.text)}>
+          {colors.label}
+        </span>
+      )}
+    </div>
+  );
+}
+
+interface StatusDotProps {
+  status: ProjectStatus;
+  size?: 'sm' | 'md' | 'lg';
+  pulse?: boolean;
+}
+
+export function StatusDot({ status, size = 'md', pulse = false }: StatusDotProps) {
+  const colors = STATUS_COLORS[status];
+  const sizeClasses = {
+    sm: 'h-2 w-2',
+    md: 'h-3 w-3',
+    lg: 'h-4 w-4',
+  };
+
+  const bgColor = status === 'green' ? 'bg-emerald-500' : status === 'yellow' ? 'bg-amber-500' : 'bg-rose-500';
+
+  return (
+    <span className="relative flex">
+      {pulse && status !== 'green' && (
+        <span className={cn('animate-ping absolute inline-flex h-full w-full rounded-full opacity-75', bgColor)} />
+      )}
+      <span className={cn('relative inline-flex rounded-full', sizeClasses[size], bgColor)} />
+    </span>
+  );
+}