86 lines
2.3 KiB
TypeScript
86 lines
2.3 KiB
TypeScript
import React from "react";
|
|
import type { RecentIncident } from "../DashboardTypes";
|
|
import { CustomTable, CustomStatus } from "../../../components/custom";
|
|
import type { Column } from "../../../components/custom/CustomTable";
|
|
|
|
interface RecentIncidentsTableProps {
|
|
incidents: RecentIncident[];
|
|
}
|
|
|
|
export const RecentIncidentsTable: React.FC<RecentIncidentsTableProps> = ({ incidents }) => {
|
|
const columns: Column<RecentIncident>[] = [
|
|
{
|
|
header: "Recovery ID",
|
|
accessor: (row) => (
|
|
<span className="text-[13px] font-bold text-gray-900 font-mono">
|
|
{row.recoveryId}
|
|
</span>
|
|
),
|
|
},
|
|
{
|
|
header: "Passenger / PNR",
|
|
accessor: (row) => (
|
|
<span className="text-[13px] font-bold text-gray-900">
|
|
{row.passengerName}
|
|
</span>
|
|
),
|
|
},
|
|
{
|
|
header: "Flight",
|
|
accessor: (row) => (
|
|
<span className="text-[13px] font-bold text-gray-900">
|
|
{row.flightNumber}
|
|
</span>
|
|
),
|
|
},
|
|
{
|
|
header: "Category",
|
|
accessor: (row) => (
|
|
<span className="inline-flex items-center px-3 py-1 rounded-full text-[11px] font-semibold bg-[#EFEFEF] text-gray-600">
|
|
{row.category}
|
|
</span>
|
|
),
|
|
},
|
|
{
|
|
header: "Status",
|
|
accessor: (row) => <CustomStatus status={row.status} />,
|
|
},
|
|
{
|
|
header: "Value",
|
|
accessor: (row) => (
|
|
<span className="text-[13px] font-bold text-gray-900">
|
|
{row.value}
|
|
</span>
|
|
),
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div className="bg-white rounded-[16px] border border-gray-100 p-6 shadow-[0_2px_4px_rgba(0,0,0,0.02)] flex flex-col gap-5">
|
|
{/* Table Header Section */}
|
|
<div>
|
|
<h2 className="text-[17px] font-bold text-gray-900 leading-snug">
|
|
Recent Recovery Incidents
|
|
</h2>
|
|
<p className="text-[12px] text-gray-400 font-normal mt-0.5">
|
|
Real-time assessment log of refund and compensation cases.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Custom Table Component */}
|
|
<CustomTable<RecentIncident>
|
|
columns={columns}
|
|
data={incidents}
|
|
itemName="incidents"
|
|
totalItems={incidents.length}
|
|
startIndex={incidents.length > 0 ? 1 : 0}
|
|
endIndex={incidents.length}
|
|
totalPages={1}
|
|
currentPage={1}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default RecentIncidentsTable;
|