88 lines
4.2 KiB
TypeScript
88 lines
4.2 KiB
TypeScript
/**
|
|
* Dashboard Page Component
|
|
* @description Main dashboard page with metrics and agent cards
|
|
*/
|
|
|
|
import { MetricCard } from '@/components/dashboard/metric-card';
|
|
import { AgentsSection } from '@/components/dashboard/agents-section';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Search, Plus } from 'lucide-react';
|
|
import { MOCK_AGENTS } from '@/constants/agents';
|
|
|
|
/**
|
|
* Dashboard component
|
|
* @description Main dashboard page with all sections
|
|
* @returns {JSX.Element} Dashboard element
|
|
*/
|
|
export function Dashboard(): JSX.Element {
|
|
return (
|
|
<div className="px-4 py-4 md:px-6 lg:px-10 lg:pt-6 lg:pb-10">
|
|
{/* Content Header: Welcome + Search/Create */}
|
|
<div className="mb-4 md:mb-6 flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
|
|
<div className="space-y-2">
|
|
<h1 className="text-[1.75rem] md:text-[2rem] lg:text-[2.5rem] font-semibold text-[#1A1A1A] leading-tight">
|
|
Welcome, Vijay! 👋🏻
|
|
</h1>
|
|
<p className="max-w-2xl text-[0.875rem] md:text-[0.9375rem] lg:text-[1rem] text-[#5B6170]">
|
|
Manage Agents, Workflows, Tools and Knowledge Base
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex flex-col md:flex-row items-stretch md:items-center gap-3 w-full md:w-auto">
|
|
<div className="relative flex-1 md:flex-initial">
|
|
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[#9AA1B5]" />
|
|
<input
|
|
type="text"
|
|
placeholder="Search"
|
|
className="h-11 w-full md:w-[300px] lg:w-[340px] rounded-lg border border-[#E1E4EF] bg-white pl-10 pr-4 text-[0.875rem] md:text-[0.9375rem] lg:text-[1rem] text-[#4A4F5C] outline-none transition focus:border-[#0033FF] focus:ring-2 focus:ring-[#0033FF]/15 min-h-[44px]"
|
|
/>
|
|
</div>
|
|
<Button className="flex h-11 items-center justify-center gap-2 rounded-lg border border-[#0033FF] bg-white px-4 md:px-5 text-[0.875rem] md:text-[0.9375rem] lg:text-[1rem] font-medium text-[#0033FF] shadow-[0_0_2px_rgba(0,51,255,0.25),0_3px_8px_rgba(0,51,255,0.12)] transition hover:bg-[#F5F8FF] min-h-[44px]">
|
|
<Plus className="h-4 w-4" />
|
|
Create Agent
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Metrics Grid */}
|
|
<div className="mb-4 md:mb-7 h-full bg-[rgba(247,248,255,0.82)] border border-solid border-white content-stretch flex flex-col items-start justify-center p-4 md:p-6 relative rounded-xl md:rounded-2xl lg:rounded-3xl">
|
|
<div className="content-stretch grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6 items-stretch relative shrink-0 w-full">
|
|
<MetricCard
|
|
title="ACTIVE AGENTS"
|
|
subtitle="Agents"
|
|
value="03"
|
|
gradient="blue-teal"
|
|
imageUrl="/Dashboard/Card1.svg"
|
|
/>
|
|
<MetricCard
|
|
title="KNOWLEDGE BASES"
|
|
subtitle="Knowledge Bases"
|
|
value="02"
|
|
gradient="pink-purple"
|
|
imageUrl="/Dashboard/Card2.svg"
|
|
/>
|
|
<MetricCard
|
|
title="ACTIVE WORKFLOWS"
|
|
subtitle="Workflows"
|
|
value="01"
|
|
gradient="orange-yellow"
|
|
imageUrl="/Dashboard/Card3.svg"
|
|
/>
|
|
<MetricCard
|
|
title="CONNECTED TOOLS"
|
|
subtitle="Tools"
|
|
value="01"
|
|
gradient="blue-purple"
|
|
imageUrl="/Dashboard/Card4.svg"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Agents Section */}
|
|
<div className="mt-4 md:mt-6">
|
|
<AgentsSection agents={MOCK_AGENTS} />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|