mirror of
https://github.com/Tria-plc/edr-platform.git
synced 2026-08-28 11:21:18 +00:00
87 lines
2.9 KiB
TypeScript
87 lines
2.9 KiB
TypeScript
import { useEffect, useState } from "react";
|
||
import { useQuery } from "@tanstack/react-query";
|
||
import {
|
||
fetchRequirementSatisfied,
|
||
AdminSetupAlertResponse,
|
||
} from "@/record-management/services/api/alertService";
|
||
import { X } from "lucide-react";
|
||
|
||
export default function AdminSetupAlert({
|
||
unitId: propUnitId,
|
||
}: {
|
||
unitId?: string;
|
||
}) {
|
||
const [unitId, setUnitId] = useState<string>(propUnitId || "");
|
||
const [visible, setVisible] = useState(true);
|
||
|
||
// Listen for unitChanged events from Content Management.
|
||
useEffect(() => {
|
||
const handler = (e: Event) => {
|
||
const detail = (e as CustomEvent<string>).detail;
|
||
queueMicrotask(() => setUnitId(detail));
|
||
};
|
||
window.addEventListener("unitChanged", handler);
|
||
return () => window.removeEventListener("unitChanged", handler);
|
||
}, []);
|
||
|
||
// TanStack Query for fetching requirements
|
||
const { data, isLoading, refetch } = useQuery<AdminSetupAlertResponse>({
|
||
queryKey: ["admin-setup-requirements", unitId],
|
||
queryFn: () => fetchRequirementSatisfied(unitId),
|
||
enabled: !!unitId,
|
||
});
|
||
|
||
const requirements = data?.requirements;
|
||
|
||
// Optional: refetch automatically on unit change (real-time trigger)
|
||
useEffect(() => {
|
||
if (unitId) {
|
||
refetch();
|
||
}
|
||
}, [unitId, refetch]);
|
||
|
||
// Hide if no requirements or all are satisfied
|
||
if (!requirements || Object.values(requirements).every(Boolean)) return null;
|
||
|
||
if (!visible) return null; // hide after dismiss
|
||
|
||
return (
|
||
<div className="relative flex items-center gap-6 p-2 border rounded bg-amber-50 shadow-2xl top-10 left-1/2 -translate-x-1/2 z-[1000] w-full">
|
||
{/* Title */}
|
||
<h3 className="font-semibold text-amber-700 whitespace-nowrap">
|
||
Finish site setup
|
||
</h3>
|
||
|
||
{/* Messages inline */}
|
||
{isLoading ? (
|
||
<p className="text-sm text-slate-600">Loading requirements...</p>
|
||
) : (
|
||
<div className="flex flex-wrap gap-6 text-sm text-slate-600">
|
||
{!requirements.hasFooter && <span>⚠️ Missing Footer</span>}
|
||
{!requirements.hasSeal && <span>⚠️ Missing Seal</span>}
|
||
{!requirements.hasHeader && <span>⚠️ Missing Header</span>}
|
||
{!requirements.internalPrefix && (
|
||
<span>⚠️ Missing Internal Prefix</span>
|
||
)}
|
||
{!requirements.externalPrefix && (
|
||
<span>⚠️ Missing External Prefix</span>
|
||
)}
|
||
{!requirements.internalSuffix && (
|
||
<span>⚠️ Missing Internal Suffix</span>
|
||
)}
|
||
{!requirements.externalSuffix && (
|
||
<span>⚠️ Missing External Suffix</span>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* Close button */}
|
||
<button
|
||
onClick={() => setVisible(false)}
|
||
className="absolute top-2 right-2 text-amber-700 hover:text-red-600">
|
||
<X size={16} />
|
||
</button>
|
||
</div>
|
||
);
|
||
}
|