- Add permissions logic for status options in corrective actions. - Create tests for permissions functionality. - Implement queries for user authentication and actions management. - Develop Actions page to display and manage corrective actions. - Create authentication pages for login, setup, and password reset. - Add IncidentDetail page to view incident details and associated actions. - Implement Settings page for user management and password changes.
26 lines
966 B
TypeScript
26 lines
966 B
TypeScript
import { AlertTriangle, Loader2 } from 'lucide-react'
|
|
import type { ReactNode } from 'react'
|
|
import { errorMessage } from '../lib/api'
|
|
|
|
export function Loading({ label = 'Loading…' }: { label?: string }) {
|
|
return (
|
|
<div className="flex items-center justify-center gap-2 p-10 text-xs text-muted" role="status">
|
|
<Loader2 size={16} className="animate-spin" /> {label}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export function ErrorMessage({ error, className = '' }: { error: unknown; className?: string }) {
|
|
if (!error) return null
|
|
return (
|
|
<div role="alert" className={`flex items-start gap-2 rounded-[5px] border border-coral-soft bg-[#fff6f3] px-3 py-2.5 text-xs text-coral-strong ${className}`}>
|
|
<AlertTriangle size={15} className="mt-px flex-none" />
|
|
<span>{errorMessage(error)}</span>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export function Empty({ children }: { children: ReactNode }) {
|
|
return <div className="px-6 py-10 text-center text-xs text-muted">{children}</div>
|
|
}
|