Tau.Acuvim/portal/frontend/src/pages/AdminCustomerDetailPage.tsx

import { Card, Descriptions, Tabs, Table, Tag, Typography, Button, Space, Spin, Result } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { ArrowLeftOutlined } from '@ant-design/icons';
import { useQuery } from '@tanstack/react-query';
import { useNavigate, useParams } from 'react-router-dom';
import {
  fetchFleetCustomerDetail, type FleetSite, type FleetDevice,
  type FleetRecentMeasurement, type FleetIngestEvent,
} from '../api/fleet';

const { Text } = Typography;

export function AdminCustomerDetailPage() {
  const { id = '' } = useParams<{ id: string }>();
  const navigate = useNavigate();
  const { data, isLoading, error } = useQuery({
    queryKey: ['fleet-customer', id],
    queryFn: () => fetchFleetCustomerDetail(id),
    refetchInterval: 30_000,
  });

  if (isLoading) return <div style={{ textAlign: 'center', padding: 64 }}><Spin size="large" /></div>;
  if (error || !data) {
    return <Result status="404" title="Customer not found" extra={<Button onClick={() => navigate('/admin/customers')}>Back</Button>} />;
  }

  const siteCols: ColumnsType<FleetSite> = [
    { title: 'Name', dataIndex: 'name', key: 'name' },
    { title: 'Address', dataIndex: 'address', key: 'addr', render: v => v ?? <Text type="secondary">—</Text> },
    { title: 'Active', dataIndex: 'isActive', key: 'a', render: (v: boolean) => v ? <Tag color="green">Active</Tag> : <Tag>Inactive</Tag> },
  ];

  const deviceCols: ColumnsType<FleetDevice> = [
    { title: 'Name', dataIndex: 'name', key: 'name' },
    { title: 'External ID', dataIndex: 'externalId', key: 'ext', render: v => <Text code>{v}</Text> },
    { title: 'Description', dataIndex: 'description', key: 'desc', render: v => v ?? <Text type="secondary">—</Text> },
    { title: 'Active', dataIndex: 'isActive', key: 'a', render: (v: boolean) => v ? <Tag color="green">Active</Tag> : <Tag>Inactive</Tag> },
  ];

  const measCols: ColumnsType<FleetRecentMeasurement> = [
    { title: 'Time (UTC)', dataIndex: 'time', key: 't', render: (v: string) => new Date(v).toISOString().replace('T', ' ').slice(0, 19) },
    { title: 'Device', dataIndex: 'deviceName', key: 'd' },
    { title: 'Active power (kW)', dataIndex: 'activePowerKw', key: 'p', render: (v: number) => v.toFixed(3) },
    { title: 'kWh imported (cumulative)', dataIndex: 'energyImportedKwh', key: 'e', render: (v: number | null) => v == null ? '—' : v.toFixed(2) },
  ];

  const eventCols: ColumnsType<FleetIngestEvent> = [
    { title: 'Received (UTC)', dataIndex: 'receivedAt', key: 'r', render: (v: string) => new Date(v).toISOString().replace('T', ' ').slice(0, 19) },
    { title: 'Type', dataIndex: 'batchType', key: 'bt' },
    { title: 'Accepted', dataIndex: 'rowsAccepted', key: 'a' },
    { title: 'Rejected', dataIndex: 'rowsRejected', key: 'rj', render: (v: number) => v > 0 ? <Tag color="orange">{v}</Tag> : v },
    { title: 'Bytes', dataIndex: 'batchBytes', key: 'b' },
    { title: 'Time spread', dataIndex: 'timeSpread', key: 'ts', render: (v: string | null) => v ?? '—' },
    { title: 'Error', dataIndex: 'error', key: 'e', render: (v: string | null) => v ? <Tag color="red">{v}</Tag> : '—' },
  ];

  return (
    <Space direction="vertical" size="middle" style={{ width: '100%' }}>
      <Space>
        <Button icon={<ArrowLeftOutlined />} onClick={() => navigate('/admin/customers')}>Customers</Button>
        <Text strong style={{ fontSize: 20 }}>{data.code} · {data.name}</Text>
        {data.isActive ? <Tag color="green">Active</Tag> : <Tag color="red">Disabled</Tag>}
      </Space>

      <Card size="small">
        <Descriptions column={3} size="small">
          <Descriptions.Item label="Customer ID">{data.id}</Descriptions.Item>
          <Descriptions.Item label="Created">{new Date(data.createdAt).toLocaleString()}</Descriptions.Item>
          <Descriptions.Item label="First seen">{data.firstSeenAt ? new Date(data.firstSeenAt).toLocaleString() : <Text type="secondary">Never</Text>}</Descriptions.Item>
          <Descriptions.Item label="Last seen" span={3}>{data.lastSeenAt ? new Date(data.lastSeenAt).toLocaleString() : <Text type="secondary">Never</Text>}</Descriptions.Item>
        </Descriptions>
      </Card>

      <Card>
        <Tabs
          defaultActiveKey="ingest"
          items={[
            {
              key: 'ingest',
              label: `Recent ingest (${data.recentIngestEvents.length})`,
              children: <Table<FleetIngestEvent> rowKey="receivedAt" columns={eventCols} dataSource={data.recentIngestEvents} pagination={false} size="small" />,
            },
            {
              key: 'measurements',
              label: `Recent measurements (${data.recentMeasurements.length})`,
              children: <Table<FleetRecentMeasurement> rowKey={(r) => `${r.time}-${r.deviceId}`} columns={measCols} dataSource={data.recentMeasurements} pagination={false} size="small" />,
            },
            {
              key: 'sites',
              label: `Sites (${data.sites.length})`,
              children: <Table<FleetSite> rowKey="id" columns={siteCols} dataSource={data.sites} pagination={false} size="small" />,
            },
            {
              key: 'devices',
              label: `Devices (${data.devices.length})`,
              children: <Table<FleetDevice> rowKey="id" columns={deviceCols} dataSource={data.devices} pagination={false} size="small" />,
            },
          ]}
        />
      </Card>
    </Space>
  );
}