70 lines
2.2 KiB
TypeScript
70 lines
2.2 KiB
TypeScript
"use client";
|
|
|
|
import { useMemo, useState } from "react";
|
|
import type { Campaign, Mission } from "@/payload-types";
|
|
import { MissionCard } from "@/components/frontend/intelligence/MissionCard";
|
|
import { MissionFilters } from "@/components/frontend/intelligence/MissionFilters";
|
|
|
|
interface MissionsListProps {
|
|
missions: Mission[];
|
|
campaigns: Campaign[];
|
|
}
|
|
|
|
export function MissionsList({ missions, campaigns }: MissionsListProps) {
|
|
const [filters, setFilters] = useState<{
|
|
campaignId: number | null;
|
|
operationType: string | null;
|
|
status: string | null;
|
|
}>({ campaignId: null, operationType: null, status: null });
|
|
|
|
const filtered = useMemo(() => {
|
|
return missions.filter((m) => {
|
|
if (filters.campaignId) {
|
|
const campaignId =
|
|
typeof m.classification.campaign === "object"
|
|
? (m.classification.campaign as Campaign).id
|
|
: m.classification.campaign;
|
|
if (campaignId !== filters.campaignId) return false;
|
|
}
|
|
if (filters.operationType && m.operationType !== filters.operationType) {
|
|
return false;
|
|
}
|
|
if (filters.status && m.ownershipAndStatus.status !== filters.status) {
|
|
return false;
|
|
}
|
|
return true;
|
|
});
|
|
}, [missions, filters]);
|
|
|
|
return (
|
|
<div className="flex flex-col gap-4">
|
|
<MissionFilters campaigns={campaigns} onFilterChange={setFilters} />
|
|
|
|
{filtered.length === 0 ? (
|
|
<div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
|
|
<p className="text-sm">No missions found.</p>
|
|
{filters.campaignId || filters.operationType || filters.status ? (
|
|
<button
|
|
onClick={() =>
|
|
setFilters({
|
|
campaignId: null,
|
|
operationType: null,
|
|
status: null,
|
|
})
|
|
}
|
|
className="text-sm text-primary hover:underline mt-1"
|
|
>
|
|
Clear filters
|
|
</button>
|
|
) : null}
|
|
</div>
|
|
) : (
|
|
<div className="flex flex-col gap-2">
|
|
{filtered.map((mission) => (
|
|
<MissionCard key={mission.id} mission={mission} />
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|