dyolink/frontend/src/app/(dashboard)/today/page.tsx

'use client';

import Link from 'next/link';
import { useAuth } from '@/lib/hooks/useAuth';

export default function TodayPage() {
  const { currentOrganization } = useAuth();
  const showNoSubscriptionNotice =
    Boolean(currentOrganization?.isOwner) && !currentOrganization?.plan;

  return (
    <div>
      <h1 className="text-2xl font-semibold mb-6">
        Welcome back Babak !!
      </h1>

      {showNoSubscriptionNotice && (
        <div className="mb-6 rounded-[var(--radius-md)] border border-amber-500/30 bg-amber-500/10 p-4">
          <p className="text-sm text-amber-200">
            This organization does not have an active subscription yet.{' '}
            <Link href="/settings/subscriptions" className="font-medium underline underline-offset-2">
              Choose a plan
            </Link>{' '}
            to start the purchase process.
          </p>
        </div>
      )}

      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4">
        <Card title="Today's Appointments" value="12" sub="Monday 2/5/2026" />
        <Card title="Active Patients" value="675" />
        <Card title="New Lab Case" value="5" sub="35 ↑" />
        <Card title="Today invoices" value="1200$" sub="21,300 $" />
      </div>
    </div>
  );
}

function Card({
  title,
  value,
  sub,
}: {
  title: string;
  value: string;
  sub?: string;
}) {
  return (
    <div className="surface-card p-4">
      <p className="text-sm text-text-secondary">{title}</p>
      <p className="text-2xl font-semibold mt-2">{value}</p>
      {sub && <p className="text-xs text-text-muted mt-1">{sub}</p>}
    </div>
  );
}