77 lines
2.2 KiB
TypeScript
77 lines
2.2 KiB
TypeScript
import { DataTable } from '@/components/ui/data-table';
|
|
import { TablePagination } from '@/components/ui/table-pagination';
|
|
import type { Partner } from '../types';
|
|
|
|
type PartnerTableProps = {
|
|
data: Partner[];
|
|
onRowClick: (part: Partner) => void;
|
|
page: number;
|
|
totalPages: number;
|
|
totalCount: number;
|
|
pageSize: number;
|
|
onPageChange: (page: number) => void;
|
|
};
|
|
|
|
export function PartnerTable({
|
|
data,
|
|
onRowClick,
|
|
page,
|
|
totalPages,
|
|
totalCount,
|
|
pageSize,
|
|
onPageChange,
|
|
}: PartnerTableProps) {
|
|
return (
|
|
<DataTable
|
|
data={data}
|
|
rowKey={(part) => part.supplier_id}
|
|
onRowClick={onRowClick}
|
|
empty="협약된 가용 B2B 파트너사가 존재하지 않습니다."
|
|
footer={
|
|
<TablePagination
|
|
page={page}
|
|
totalPages={totalPages}
|
|
totalCount={totalCount}
|
|
pageSize={pageSize}
|
|
onPageChange={onPageChange}
|
|
label="연동 파트너사"
|
|
unit="개사"
|
|
/>
|
|
}
|
|
columns={[
|
|
{
|
|
header: '협력사명',
|
|
align: 'left',
|
|
headClassName: 'w-2/5',
|
|
cell: (part) => <span className="font-bold text-sm text-foreground">{part.name}</span>,
|
|
},
|
|
{
|
|
header: '협력사코드',
|
|
align: 'left',
|
|
cellClassName: 'font-mono font-medium text-muted-foreground',
|
|
cell: (part) => part.code,
|
|
},
|
|
{
|
|
header: '담당자명 / 담당자 이메일 / 연락처',
|
|
align: 'left',
|
|
mobileBlock: true, // 여러 줄 블록 → 모바일 카드뷰에서 라벨 아래 풀폭
|
|
cell: (part) => (
|
|
<div className="space-y-0.5 font-mono text-xs">
|
|
<div className="text-foreground font-semibold">{part.manager_name}</div>
|
|
<div className="text-[10px] text-muted-foreground">
|
|
{part.manager_email} / {part.manager_contact_number}
|
|
</div>
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
header: '총매출액',
|
|
align: 'right',
|
|
cellClassName: 'font-mono text-muted-foreground',
|
|
cell: (part) => (part.total_revenue != null ? `₩${Number(part.total_revenue).toLocaleString()}` : '-'),
|
|
},
|
|
]}
|
|
/>
|
|
);
|
|
}
|