import { useState } from 'react';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { cn } from '@/lib/utils';
import { ArrowRight, ChevronDown, ChevronUp, Menu } from 'lucide-react';
import {
AlertCircle,
BarChart3,
CreditCard,
Globe,
HardDrive,
Info,
LineChart,
RefreshCw,
Server,
Shield,
Users,
Zap,
} from 'lucide-react';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
interface CompactMetric {
id: string;
icon: React.ReactNode;
name: string;
value: string;
previousValue?: string;
changePercentage?: number;
status?: 'positive' | 'negative' | 'neutral' | 'warning';
category: string;
info?: string;
}
export default function CompactMetricList() {
const [activeTab, setActiveTab] = useState('all');
const metrics: CompactMetric[] = [
// Performance Metrics - Reduced to 3
{
id: 'response-time',
icon: <Zap className="h-4 w-4" />,
name: 'Response Time',
value: '32ms',
previousValue: '39ms',
changePercentage: -18,
status: 'positive',
category: 'performance',
info: 'Average API response time across all endpoints',
},
{
id: 'uptime',
icon: <Server className="h-4 w-4" />,
name: 'System Uptime',
value: '99.99%',
previousValue: '99.97%',
changePercentage: 0.02,
status: 'positive',
category: 'performance',
info: 'Service availability over the past 30 days',
},
{
id: 'requests',
icon: <RefreshCw className="h-4 w-4" />,
name: 'Requests/Sec',
value: '45K',
previousValue: '34K',
changePercentage: 32,
status: 'neutral',
category: 'performance',
info: 'Peak request rate during high traffic periods',
},
// Security Metrics - Reduced to 2
{
id: 'blocked-threats',
icon: <Shield className="h-4 w-4" />,
name: 'Threats Blocked',
value: '1.2M+',
previousValue: '970K',
changePercentage: 24,
status: 'positive',
category: 'security',
info: 'Malicious requests blocked monthly',
},
{
id: '2fa-adoption',
icon: <AlertCircle className="h-4 w-4" />,
name: '2FA Adoption',
value: '78%',
previousValue: '65%',
changePercentage: 20,
status: 'positive',
category: 'security',
info: 'Percentage of users with 2FA enabled',
},
// User Metrics - Reduced to 2
{
id: 'active-users',
icon: <Users className="h-4 w-4" />,
name: 'Active Users',
value: '2.4M',
previousValue: '2.05M',
changePercentage: 17,
status: 'positive',
category: 'users',
info: 'Monthly active users',
},
{
id: 'retention',
icon: <BarChart3 className="h-4 w-4" />,
name: '30d Retention',
value: '84%',
previousValue: '79%',
changePercentage: 6.3,
status: 'positive',
category: 'users',
info: 'User retention rate after 30 days',
},
// Infrastructure Metrics - Reduced to 2
{
id: 'data-processed',
icon: <HardDrive className="h-4 w-4" />,
name: 'Data Processed',
value: '8.7 PB',
previousValue: '6.1 PB',
changePercentage: 42,
status: 'neutral',
category: 'infrastructure',
info: 'Total data processed monthly',
},
{
id: 'bandwidth',
icon: <Globe className="h-4 w-4" />,
name: 'Bandwidth Usage',
value: '240 TB',
previousValue: '190 TB',
changePercentage: 26,
status: 'warning',
category: 'infrastructure',
info: 'Total bandwidth consumption this month',
},
// Business Metrics - Reduced to 2
{
id: 'transactions',
icon: <CreditCard className="h-4 w-4" />,
name: 'Transactions',
value: '$740M',
previousValue: '$578M',
changePercentage: 28,
status: 'positive',
category: 'business',
info: 'Total transaction volume processed',
},
{
id: 'mrr',
icon: <LineChart className="h-4 w-4" />,
name: 'MRR',
value: '$4.2M',
previousValue: '$3.6M',
changePercentage: 16.7,
status: 'positive',
category: 'business',
info: 'Monthly recurring revenue',
},
];
// Filter metrics based on active tab
const filteredMetrics =
activeTab === 'all'
? metrics
: metrics.filter((metric) => metric.category === activeTab);
// Function to handle tab change via dropdown
const handleTabChange = (value: string) => {
setActiveTab(value);
};
return (
<section className="bg-background w-full py-12 md:py-24">
<div className="container mx-auto px-4 md:px-6 2xl:max-w-[1400px]">
<div className="mb-8 flex flex-col items-center justify-center space-y-4 text-center">
<Badge className="px-3.5 py-1.5">System Metrics</Badge>
<h2 className="text-3xl font-bold tracking-tighter sm:text-4xl">
Platform Health & Performance
</h2>
<p className="text-muted-foreground max-w-[700px] md:text-lg">
Key metrics across our infrastructure, security, and business
operations.
</p>
</div>
<Card className="border p-0 shadow-sm">
<CardContent className="p-0">
<Tabs
defaultValue="all"
value={activeTab}
onValueChange={setActiveTab}
className="w-full gap-0"
>
{/* Mobile view: Dropdown for categories */}
<div className="border-b p-3 md:hidden">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
variant="outline"
className="w-full justify-between"
>
<span>
{activeTab === 'all'
? 'All Metrics'
: activeTab.charAt(0).toUpperCase() +
activeTab.slice(1)}
</span>
<Menu className="ml-2 h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="start" className="w-[200px]">
<DropdownMenuItem onClick={() => handleTabChange('all')}>
All Metrics
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => handleTabChange('performance')}
>
Performance
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => handleTabChange('security')}
>
Security
</DropdownMenuItem>
<DropdownMenuItem onClick={() => handleTabChange('users')}>
Users
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => handleTabChange('infrastructure')}
>
Infrastructure
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => handleTabChange('business')}
>
Business
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
{/* Desktop view: Horizontal tabs */}
<div className="hidden border-b px-4 md:block">
<TabsList className="h-12 bg-transparent">
<TabsTrigger
value="all"
className="data-[state=active]:bg-muted rounded-none data-[state=active]:shadow-none"
>
All Metrics
</TabsTrigger>
<TabsTrigger
value="performance"
className="data-[state=active]:bg-muted rounded-none data-[state=active]:shadow-none"
>
Performance
</TabsTrigger>
<TabsTrigger
value="security"
className="data-[state=active]:bg-muted rounded-none data-[state=active]:shadow-none"
>
Security
</TabsTrigger>
<TabsTrigger
value="users"
className="data-[state=active]:bg-muted rounded-none data-[state=active]:shadow-none"
>
Users
</TabsTrigger>
<TabsTrigger
value="infrastructure"
className="data-[state=active]:bg-muted rounded-none data-[state=active]:shadow-none"
>
Infrastructure
</TabsTrigger>
<TabsTrigger
value="business"
className="data-[state=active]:bg-muted rounded-none data-[state=active]:shadow-none"
>
Business
</TabsTrigger>
</TabsList>
</div>
<TabsContent value={activeTab} className="mt-0 p-0">
<div className="grid grid-cols-1 divide-y">
{filteredMetrics.length === 0 ? (
<div className="text-muted-foreground py-8 text-center">
No metrics available for this category.
</div>
) : (
filteredMetrics.map((metric) => (
<div
key={metric.id}
className="hover:bg-muted/50 flex items-center justify-between px-4 py-4 transition-colors md:px-6"
>
<div className="flex items-center space-x-3 md:space-x-4">
<div
className={cn(
'flex h-8 w-8 items-center justify-center rounded-full',
metric.status === 'positive' &&
'bg-green-100 text-green-600',
metric.status === 'negative' &&
'bg-red-100 text-red-600',
metric.status === 'warning' &&
'bg-amber-100 text-amber-600',
metric.status === 'neutral' &&
'bg-blue-100 text-blue-600'
)}
>
{metric.icon}
</div>
<div className="flex flex-col">
<div className="flex items-center">
<span className="text-sm font-medium">
{metric.name}
</span>
{metric.info && (
<div className="group relative ml-1.5">
<Info className="text-muted-foreground h-3.5 w-3.5 cursor-help" />
<div className="bg-background invisible absolute bottom-full left-1/2 z-10 mb-2 w-48 -translate-x-1/2 transform rounded border p-2 text-xs opacity-0 shadow-md transition-all group-hover:visible group-hover:opacity-100">
{metric.info}
</div>
</div>
)}
</div>
<span className="text-muted-foreground text-xs capitalize">
{metric.category}
</span>
</div>
</div>
<div className="flex items-center space-x-2 md:space-x-4">
{metric.previousValue && (
<span className="text-muted-foreground hidden text-sm md:inline-block">
{metric.previousValue}
</span>
)}
<div className="flex flex-col items-end">
<span className="font-bold">{metric.value}</span>
{metric.changePercentage !== undefined && (
<div
className={cn(
'flex items-center text-xs',
metric.status === 'positive' &&
'text-green-600',
metric.status === 'negative' &&
'text-red-600',
metric.status === 'warning' &&
'text-amber-600',
metric.status === 'neutral' && 'text-blue-600'
)}
>
{metric.changePercentage > 0 ? (
<ChevronUp className="mr-0.5 h-3 w-3" />
) : metric.changePercentage < 0 ? (
<ChevronDown className="mr-0.5 h-3 w-3" />
) : null}
{Math.abs(metric.changePercentage)}%
</div>
)}
</div>
</div>
</div>
))
)}
</div>
</TabsContent>
</Tabs>
</CardContent>
</Card>
<div className="mt-8 flex flex-col items-center justify-between gap-4 sm:flex-row">
<div className="text-muted-foreground order-2 text-sm sm:order-1">
<span className="font-medium">Last updated:</span> Today at 15:42
UTC
</div>
<Button
variant="outline"
size="sm"
className="group order-1 sm:order-2"
asChild
>
<a href="#">
View complete dashboard
<ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
</a>
</Button>
</div>
</div>
</section>
);
}