62ec703f81
- Increased ticket number font from text-lg to text-2xl - Increased company name font from text-sm to text-lg - Increased ticket title font from text-xs to text-base - Increased padding on ticket cards for better spacing - Fixed company ID to name conversion in settings page - Ensure excluded_company_ids are parsed as numbers for proper lookup
76 lines
2.3 KiB
TypeScript
76 lines
2.3 KiB
TypeScript
'use client';
|
|
|
|
import { LucideIcon } from 'lucide-react';
|
|
|
|
interface TicketItem {
|
|
ticketNumber: string;
|
|
title: string;
|
|
companyName: string;
|
|
}
|
|
|
|
interface KpiCardProps {
|
|
title: string;
|
|
value: number | string;
|
|
icon: LucideIcon;
|
|
trend?: string;
|
|
color?: 'red' | 'yellow' | 'green' | 'blue' | 'purple';
|
|
suffix?: string;
|
|
tickets?: TicketItem[];
|
|
}
|
|
|
|
export function KpiCard({ title, value, icon: Icon, trend, color = 'blue', suffix = '', tickets = [] }: KpiCardProps) {
|
|
const colorClasses = {
|
|
red: 'text-red-500 border-red-500',
|
|
yellow: 'text-yellow-500 border-yellow-500',
|
|
green: 'text-green-500 border-green-500',
|
|
blue: 'text-blue-500 border-blue-500',
|
|
purple: 'text-purple-500 border-purple-500',
|
|
};
|
|
|
|
const bgClasses = {
|
|
red: 'bg-red-500/10',
|
|
yellow: 'bg-yellow-500/10',
|
|
green: 'bg-green-500/10',
|
|
blue: 'bg-blue-500/10',
|
|
purple: 'bg-purple-500/10',
|
|
};
|
|
|
|
return (
|
|
<div className={`flex flex-col items-center justify-center h-full w-full p-12 ${bgClasses[color]} border-4 ${colorClasses[color]} rounded-3xl`}>
|
|
<Icon className={`w-24 h-24 mb-6 ${colorClasses[color]}`} />
|
|
<div className={`text-8xl font-bold mb-3 ${colorClasses[color]}`}>
|
|
{value}{suffix}
|
|
</div>
|
|
<div className="text-3xl text-gray-300 text-center font-semibold mb-4">
|
|
{title}
|
|
</div>
|
|
{trend && (
|
|
<div className="text-xl text-gray-500 mb-6">
|
|
{trend}
|
|
</div>
|
|
)}
|
|
|
|
{tickets && tickets.length > 0 && (
|
|
<div className="w-full mt-4 space-y-3">
|
|
{tickets.map((ticket, index) => (
|
|
<div key={ticket.ticketNumber} className="bg-black/30 rounded-lg p-4 border border-gray-700">
|
|
<div className="flex items-start gap-3">
|
|
<span className={`text-2xl font-bold ${colorClasses[color]} flex-shrink-0`}>
|
|
#{ticket.ticketNumber}
|
|
</span>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="text-lg font-semibold text-gray-300 truncate">
|
|
{ticket.companyName}
|
|
</div>
|
|
<div className="text-base text-gray-400 line-clamp-2">
|
|
{ticket.title}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|