Sankofa/portal/src/app/dashboard/business/page.tsx

'use client';

import { useSession } from 'next-auth/react';
import { signIn } from 'next-auth/react';

import { BillingTile } from '@/components/dashboard/BillingTile';
import { ComplianceStatusTile } from '@/components/dashboard/ComplianceStatusTile';
import { CostForecastingTile } from '@/components/dashboard/CostForecastingTile';
import { CostOverviewTile } from '@/components/dashboard/CostOverviewTile';
import { QuickActionsPanel } from '@/components/dashboard/QuickActionsPanel';
import { ResourceUsageTile } from '@/components/dashboard/ResourceUsageTile';
import { ServiceAdoptionTile } from '@/components/dashboard/ServiceAdoptionTile';

export default function BusinessDashboardPage() {
  const { status } = useSession();

  if (status === 'loading') {
    return (
      <div className="flex min-h-screen items-center justify-center bg-gray-900">
        <div className="text-center">
          <div className="mb-4 h-8 w-8 animate-spin rounded-full border-4 border-gray-300 border-t-blue-600 mx-auto"></div>
          <p className="text-gray-400">Loading...</p>
        </div>
      </div>
    );
  }

  if (status === 'unauthenticated') {
    return (
      <div className="flex min-h-screen items-center justify-center bg-gray-900">
        <div className="text-center max-w-md mx-auto p-8">
          <h1 className="text-2xl font-bold text-white mb-4">Welcome to Nexus Console</h1>
          <p className="text-gray-400 mb-6">Please sign in to continue</p>
          <button
            onClick={() => signIn()}
            className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
          >
            Sign In
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="container mx-auto px-4 py-8">
      <div className="mb-6">
        <h1 className="text-3xl font-bold text-white">Business Owner Dashboard</h1>
        <p className="text-gray-400 mt-2">Cost, usage, billing, and compliance overview</p>
      </div>
      
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
        <CostOverviewTile />
        <CostForecastingTile />
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
        <ResourceUsageTile />
        <BillingTile />
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
        <BillingTile />
        <ServiceAdoptionTile />
        <ComplianceStatusTile />
      </div>

      <QuickActionsPanel 
        actions={[
          { label: 'View Reports', href: '/reports', icon: 'FileText' },
          { label: 'Manage Billing', href: '/admin/billing', icon: 'CreditCard' },
          { label: 'Contact Support', href: '/support', icon: 'HelpCircle' },
          { label: 'Export Data', href: '/reports/export', icon: 'Download' },
        ]}
      />
    </div>
  );
}