ga-commission-system/ga-frontend/src/pages/product/ContractList.tsx

import { useState } from 'react';
import { Table } from 'antd';
import { useQuery } from '@tanstack/react-query';
import PageContainer from '@/components/common/PageContainer';
import SearchForm from '@/components/common/SearchForm';
import CodeBadge from '@/components/common/CodeBadge';
import MoneyText from '@/components/common/MoneyText';
import { defaultPagination } from '@/utils/tablePagination';
import { contractApi, ContractResp, ContractSearchParam } from '@/api/contract';

export default function ContractList() {
  const [param, setParam] = useState<ContractSearchParam>({ pageNum: 1, pageSize: 20 });

  const { data, isLoading } = useQuery({
    queryKey: ['contract', 'list', param],
    queryFn: () => contractApi.list(param),
  });

  return (
    <PageContainer title="계약 관리">
      <SearchForm
        conditions={[
          { type: 'text', name: 'searchKeyword', label: '계약자/증권번호' },
          { type: 'code', name: 'insuranceType', label: '보험종류', groupCode: 'INSURANCE_TYPE' },
          { type: 'code', name: 'status', label: '상태', groupCode: 'CONTRACT_STATUS' },
          { type: 'dateRange', name: 'dateRange', label: '계약일' },
        ]}
        onSearch={(v) => setParam({ ...param, ...v, pageNum: 1 })}
        onReset={() => setParam({ pageNum: 1, pageSize: 20 })}
      />

      <Table<ContractResp>
        rowKey="contractId"
        loading={isLoading}
        dataSource={data?.list}
        pagination={{
          ...defaultPagination,
          current: param.pageNum, pageSize: param.pageSize, total: data?.total,
          onChange: (p, s) => setParam({ ...param, pageNum: p, pageSize: s }),
        }}
        columns={[
          { title: '증권번호',  dataIndex: 'policyNo',       width: 140 },
          { title: '계약자',    dataIndex: 'contractorName', width: 100 },
          { title: '설계사',    dataIndex: 'agentName',      width: 100 },
          { title: '보험사',    dataIndex: 'companyName',    width: 120 },
          { title: '상품',      dataIndex: 'productName',    width: 220 },
          {
            title: '보험종류', dataIndex: 'insuranceType',  width: 100,
            render: (v) => <CodeBadge groupCode="INSURANCE_TYPE" value={v} />,
          },
          {
            title: '보험료', dataIndex: 'premium', width: 120, align: 'right',
            render: (v) => <MoneyText value={v} />,
          },
          {
            title: '납입주기', dataIndex: 'payCycle', width: 90,
            render: (v) => <CodeBadge groupCode="PAY_CYCLE" value={v} />,
          },
          {
            title: '상태', dataIndex: 'status', width: 90,
            render: (v) => <CodeBadge groupCode="CONTRACT_STATUS" value={v} />,
          },
          { title: '계약일', dataIndex: 'contractDate', width: 110 },
        ]}
      />
    </PageContainer>
  );
}