wulf-pulse/components/kiosk/service-desk-card.tsx

'use client';

import { GaugeChart } from './gauge-chart';

interface IssueType {
  issueType: string;
  subIssueType: string;
  count: number;
}

interface ServiceDeskStats {
  managedCount: number;
  tmCount: number;
  vendorCount: number;
  topManagedIssueTypes?: IssueType[];
}

interface ServiceDeskCardProps {
  stats: ServiceDeskStats;
}

export function ServiceDeskCard({ stats }: ServiceDeskCardProps) {
  return (
    <div className="flex h-full w-full bg-blue-500/10 border-4 border-blue-500 rounded-3xl overflow-hidden">
      {/* Left side - Gauges */}
      <div className="w-1/2 flex flex-col items-center justify-center p-8 border-r border-blue-500/30">
        <div className="text-3xl font-bold text-blue-500 mb-6">
          Service Delivery | Service Desk
        </div>
        
        <div className="grid grid-cols-1 gap-6 w-full max-w-md">
          <GaugeChart
            value={stats.managedCount}
            max={125}
            label="Service Desk (Managed)"
            breakpoints={{
              green: 75,
              yellow: 100,
              red: 125,
            }}
          />

          <GaugeChart
            value={stats.tmCount}
            max={40}
            label="Service Desk (T&M)"
            breakpoints={{
              green: 25,
              yellow: 35,
              red: 40,
            }}
          />

          <GaugeChart
            value={stats.vendorCount}
            max={40}
            label="Vendor Service Desk (All)"
            breakpoints={{
              green: 25,
              yellow: 35,
              red: 40,
            }}
          />
        </div>
      </div>

      {/* Right side - Top Issue Types */}
      <div className="w-1/2 p-8 flex flex-col">
        <h3 className="text-2xl font-semibold text-blue-400 mb-4">Top Issue Types (Managed)</h3>
        {stats.topManagedIssueTypes && stats.topManagedIssueTypes.length > 0 ? (
          <div className="space-y-2 flex-1 overflow-y-auto">
            {stats.topManagedIssueTypes.map((item, index) => (
              <div key={index} className="bg-black/30 rounded-lg p-3 border border-blue-500/30">
                <div className="flex items-center justify-between">
                  <div className="flex-1 min-w-0">
                    <div className="text-base font-semibold text-gray-300 truncate">
                      {item.issueType}
                    </div>
                    <div className="text-sm text-gray-400 truncate">
                      {item.subIssueType}
                    </div>
                  </div>
                  <div className="ml-4 flex items-center gap-2">
                    <span className="text-2xl font-bold text-blue-400">
                      {item.count}
                    </span>
                    <span className="text-xs text-gray-500">tickets</span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        ) : (
          <div className="flex-1 flex items-center justify-center">
            <div className="text-gray-500 text-center">
              <div className="text-lg mb-2">No issue type data available</div>
              <div className="text-sm">Check back later for updates</div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}