AgentIQ_Frontend/src/pages/dashboard.tsx

/**
 * Dashboard Page Component
 * @description Main dashboard page with metrics and agent cards
 */

import { useState } from 'react';
import { MetricCard } from '@/components/dashboard/metric-card';
import { AgentCard } from '@/components/dashboard/agent-card';
import { Button } from '@/components/ui/button';
import { Search, Plus } from 'lucide-react';

/**
 * Dashboard component
 * @description Main dashboard page with all sections
 * @returns Dashboard element
 */
export function Dashboard() {
    const [activeTab, setActiveTab] = useState<'all' | 'my'>('all');

    const agents = [
        {
            title: 'Customer Support Agent',
            tags: ['GPT-4', 'Chat Interface'],
            description: 'Automates customer service inquiries with intelligent escalation and context preservation.',
        },
        {
            title: 'Document Analyst',
            tags: ['Claude-3', 'PDF Processing', 'Knowledge Graph'],
            description: 'Analyzes documents to extract insights and generate comprehensive reports automatically.',
        },
        {
            title: 'Sales Qualifier',
            tags: ['Lead Scoring', 'CRM Integration', 'Email Autom...'],
            description: 'Qualifies prospects, schedules meetings, and manages follow-up communications with tracking.',
        },
        {
            title: 'Customer Support Agent',
            tags: ['GPT-4', 'Chat Interface'],
            description: 'Automates customer service inquiries with intelligent escalation and context preservation.',
        },
        {
            title: 'Document Analyst',
            tags: ['Claude-3', 'PDF Processing', 'Knowledge Graph'],
            description: 'Analyzes documents to extract insights and generate comprehensive reports automatically.',
        },
        {
            title: 'Sales Qualifier',
            tags: ['Lead Scoring', 'CRM Integration', 'Email Autom...'],
            description: 'Qualifies prospects, schedules meetings, and manages follow-up communications with tracking.',
        },
    ];

    return (
        <div className="px-4 sm:px-6 md:px-8 pt-4 sm:pt-6 md:pt-8">
                    {/* Content Header: Welcome + Search/Create */}
                    <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-6 md:mb-8">
                        <div>
                            <h1 className="text-xl sm:text-[22px] font-semibold text-gray-900 mb-2">
                                Welcome, Vijay! 👋
                            </h1>
                            <p className="text-gray-500 max-w-2xl text-sm sm:text-base md:text-[16px]">
                                Monitor and manage your intelligent agents, knowledge bases, and automated workflows from a centralized dashboard
                            </p>
                        </div>

                        <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-3 w-full sm:w-auto">
                            <div className="relative group flex-1 sm:flex-initial">
                                <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 group-focus-within:text-blue-500 transition-colors" />
                                <input
                                    type="text"
                                    placeholder="Search"
                                    className="pl-10 pr-4 py-2.5 bg-white border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 w-full sm:w-64 shadow-sm transition-all min-h-[44px]"
                                />
                            </div>
                            <Button className="bg-[#0033FF] hover:bg-[#0042CC] text-white px-4 sm:px-6 py-2.5 rounded-xl font-semibold flex items-center justify-center gap-2 shadow-lg shadow-blue-500/20 active:scale-95 transition-all h-auto min-h-[44px] w-full sm:w-auto">
                                <Plus className="w-5 h-5" />
                                <span className="hidden sm:inline">Create Agent</span>
                                <span className="sm:hidden">Create</span>
                            </Button>
                        </div>
                    </div>

                    {/* Metrics Grid */}
                    <div className="bg-[#F3F8FF]/80 backdrop-blur-sm rounded-2xl md:rounded-[32px] p-4 sm:p-6 md:p-6 mb-6 md:mb-8 border border-white/40 shadow-sm">
                        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-4 gap-4">
                            <MetricCard
                                title="ACTIVE AGENTS"
                                subtitle="Agents"
                                value="03"
                                gradient="blue-teal"
                            />
                            <MetricCard
                                title="KNOWLEDGE BASES"
                                subtitle="Knowledge Bases"
                                value="02"
                                gradient="pink-purple"
                            />
                            <MetricCard
                                title="ACTIVE WORKFLOWS"
                                subtitle="Workflows"
                                value="01"
                                gradient="orange-yellow"
                            />
                            <MetricCard
                                title="CONNECTED TOOLS"
                                subtitle="Tools"
                                value="01"
                                gradient="blue-purple"
                            />
                        </div>
                    </div>

                    {/* Agents Section */}
                    <div className="bg-white rounded-xl md:rounded-2xl shadow-sm border border-gray-200 p-4 sm:p-6">
                        {/* Tabs */}
                        <div className="flex gap-2 sm:gap-4 mb-4 sm:mb-6 overflow-x-auto">
                            <button
                                onClick={() => setActiveTab('all')}
                                className={`px-4 sm:px-6 py-2 rounded-lg text-sm sm:text-base font-medium transition-colors whitespace-nowrap min-h-[44px] ${activeTab === 'all'
                                    ? 'bg-black text-white'
                                    : 'bg-white text-gray-600 border border-gray-300 hover:bg-gray-50'
                                    }`}
                            >
                                All Agents
                            </button>
                            <button
                                onClick={() => setActiveTab('my')}
                                className={`px-4 sm:px-6 py-2 rounded-lg text-sm sm:text-base font-medium transition-colors whitespace-nowrap min-h-[44px] ${activeTab === 'my'
                                    ? 'bg-black text-white'
                                    : 'bg-white text-gray-600 border border-gray-300 hover:bg-gray-50'
                                    }`}
                            >
                                My Agents
                            </button>
                        </div>

                        {/* Agent Cards Grid */}
                        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-4 md:gap-6">
                            {agents.map((agent, index) => (
                                <AgentCard
                                    key={index}
                                    title={agent.title}
                                    tags={agent.tags}
                                    description={agent.description}
                                />
                            ))}
                        </div>
                    </div>
        </div>
    );
}