Refactored projects and milestones page
This commit is contained in:
@@ -0,0 +1,367 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { z } from 'zod';
|
||||
import {
|
||||
ShieldAlert,
|
||||
Plus,
|
||||
Edit2,
|
||||
AlertTriangle,
|
||||
X,
|
||||
RotateCcw,
|
||||
CheckCircle2,
|
||||
ShieldCheck,
|
||||
} from 'lucide-react';
|
||||
import { Modal } from '../ui/Modal';
|
||||
import { HelpTooltip } from '../ui/HelpTooltip';
|
||||
import { useToast } from '../ui/Toast';
|
||||
import {
|
||||
getProjectRisks,
|
||||
createRisk,
|
||||
updateRisk,
|
||||
} from '../../services/api';
|
||||
import { Project, Risk, RiskLikelihood, RiskImpact } from '../../types';
|
||||
import {
|
||||
RISK_LIKELIHOOD_OPTIONS,
|
||||
RISK_IMPACT_OPTIONS,
|
||||
getRiskScoreColor,
|
||||
} from '../../lib/formatters';
|
||||
|
||||
const riskSchema = z.object({
|
||||
name: z.string().min(5, 'Risk title required (min 5 chars)'),
|
||||
description: z.string().min(10, 'Risk description required (min 10 chars)'),
|
||||
likelihood: z.coerce.number().min(1).max(5),
|
||||
impact: z.coerce.number().min(1).max(5),
|
||||
});
|
||||
|
||||
type RiskFormValues = z.infer<typeof riskSchema>;
|
||||
|
||||
interface ProjectRisksModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
project: Project | null;
|
||||
}
|
||||
|
||||
export const ProjectRisksModal: React.FC<ProjectRisksModalProps> = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
project,
|
||||
}) => {
|
||||
const queryClient = useQueryClient();
|
||||
const { success, error: toastError } = useToast();
|
||||
|
||||
const [isFormOpen, setIsFormOpen] = useState(false);
|
||||
const [editingRisk, setEditingRisk] = useState<Risk | null>(null);
|
||||
|
||||
const projectId = project?.id;
|
||||
|
||||
const {
|
||||
data: risks = [],
|
||||
isLoading,
|
||||
refetch,
|
||||
} = useQuery({
|
||||
queryKey: ['risks', projectId],
|
||||
queryFn: () => (projectId ? getProjectRisks(projectId) : Promise.resolve([])),
|
||||
enabled: isOpen && !!projectId,
|
||||
});
|
||||
|
||||
const form = useForm<RiskFormValues>({
|
||||
resolver: zodResolver(riskSchema) as any,
|
||||
defaultValues: {
|
||||
name: '',
|
||||
description: '',
|
||||
likelihood: RiskLikelihood.Possible,
|
||||
impact: RiskImpact.Moderate,
|
||||
},
|
||||
});
|
||||
|
||||
const openCreateForm = () => {
|
||||
setEditingRisk(null);
|
||||
form.reset({
|
||||
name: '',
|
||||
description: '',
|
||||
likelihood: RiskLikelihood.Possible,
|
||||
impact: RiskImpact.Moderate,
|
||||
});
|
||||
setIsFormOpen(true);
|
||||
};
|
||||
|
||||
const openEditForm = (r: Risk) => {
|
||||
setEditingRisk(r);
|
||||
form.reset({
|
||||
name: r.name || '',
|
||||
description: r.description || '',
|
||||
likelihood: r.likelihood || RiskLikelihood.Possible,
|
||||
impact: r.impact || RiskImpact.Moderate,
|
||||
});
|
||||
setIsFormOpen(true);
|
||||
};
|
||||
|
||||
const mutation = useMutation({
|
||||
mutationFn: async (data: RiskFormValues): Promise<void> => {
|
||||
if (!projectId) return;
|
||||
if (editingRisk) {
|
||||
await updateRisk({
|
||||
riskId: editingRisk.id,
|
||||
name: data.name,
|
||||
description: data.description,
|
||||
likelihood: Number(data.likelihood),
|
||||
impact: Number(data.impact),
|
||||
});
|
||||
} else {
|
||||
await createRisk({
|
||||
projectId: projectId,
|
||||
name: data.name,
|
||||
description: data.description,
|
||||
likelihood: Number(data.likelihood),
|
||||
impact: Number(data.impact),
|
||||
});
|
||||
}
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['risks', projectId] });
|
||||
queryClient.invalidateQueries({ queryKey: ['risks'] });
|
||||
success(
|
||||
editingRisk ? 'Risk Updated' : 'Risk Registered',
|
||||
editingRisk ? 'Risk register item updated' : 'Risk registered to ISO 31000 risk matrix'
|
||||
);
|
||||
setIsFormOpen(false);
|
||||
setEditingRisk(null);
|
||||
form.reset();
|
||||
},
|
||||
onError: (err: unknown) => {
|
||||
toastError(editingRisk ? 'Failed to update risk' : 'Failed to register risk', err);
|
||||
},
|
||||
});
|
||||
|
||||
if (!project) return null;
|
||||
|
||||
const highRisksCount = risks.filter((r) => r.likelihood * r.impact >= 12).length;
|
||||
|
||||
return (
|
||||
<Modal
|
||||
isOpen={isOpen}
|
||||
onClose={() => {
|
||||
setIsFormOpen(false);
|
||||
setEditingRisk(null);
|
||||
onClose();
|
||||
}}
|
||||
title={`Risk Register: ${project.name}`}
|
||||
subtitle={`Project #${project.id} • ISO 31000 Risk & Mitigation Controls`}
|
||||
helpText="Assesses project operational, financial, and technical hazards by Likelihood (1-5) and Consequence/Impact (1-5), establishing proactive mitigation commitments."
|
||||
maxWidth="xl"
|
||||
>
|
||||
<div className="space-y-5">
|
||||
{/* KPI Summary Card */}
|
||||
<div className="bg-[#0b101c] p-4 rounded-xl border border-slate-800/90 flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
||||
<div className="space-y-1">
|
||||
<span className="text-[10px] uppercase font-bold text-slate-400 flex items-center gap-1.5">
|
||||
<ShieldAlert className="w-3.5 h-3.5 text-rose-400" />
|
||||
Project Risk Profile
|
||||
</span>
|
||||
<div className="flex items-baseline gap-2">
|
||||
<span className="text-2xl font-bold text-white">{risks.length}</span>
|
||||
<span className="text-xs text-slate-400">
|
||||
({highRisksCount} critical/high exposure items)
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
{!isFormOpen && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={openCreateForm}
|
||||
className="inline-flex items-center gap-1.5 px-3.5 py-2 text-xs font-semibold text-white bg-gradient-to-r from-rose-600 to-amber-600 hover:from-rose-500 hover:to-amber-500 rounded-xl shadow-md shadow-rose-600/20 transition cursor-pointer"
|
||||
>
|
||||
<Plus className="w-3.5 h-3.5" />
|
||||
Add Risk
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Create / Edit Risk Form */}
|
||||
{isFormOpen && (
|
||||
<div className="bg-[#0d121f] p-4 rounded-xl border border-rose-500/30 space-y-4 animate-in fade-in">
|
||||
<div className="flex items-center justify-between border-b border-slate-800 pb-2.5">
|
||||
<span className="text-xs font-bold text-rose-400 flex items-center gap-1.5">
|
||||
<ShieldAlert className="w-3.5 h-3.5" />
|
||||
{editingRisk ? `Edit Risk #${editingRisk.id}` : 'Log New Project Hazard & Risk'}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setIsFormOpen(false);
|
||||
setEditingRisk(null);
|
||||
}}
|
||||
className="text-slate-400 hover:text-slate-200 text-xs p-1"
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form onSubmit={form.handleSubmit((data) => mutation.mutate(data as any))} className="space-y-3">
|
||||
<div>
|
||||
<label className="block text-xs font-semibold text-slate-300 mb-1">Risk Hazard Title *</label>
|
||||
<input
|
||||
type="text"
|
||||
{...form.register('name')}
|
||||
className="w-full px-3 py-2 text-xs border border-slate-700/80 rounded-xl focus:outline-none focus:ring-1 focus:ring-rose-500 text-white bg-[#090d16]"
|
||||
placeholder="e.g. Critical Supply Chain Delay for Imported Telemetry Chips"
|
||||
/>
|
||||
{form.formState.errors.name && (
|
||||
<p className="text-[10px] text-rose-500 mt-1">{form.formState.errors.name.message}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className="block text-xs font-semibold text-slate-300 mb-1">Likelihood (1 - 5) *</label>
|
||||
<select
|
||||
{...form.register('likelihood')}
|
||||
className="w-full px-3 py-2 text-xs border border-slate-700/80 rounded-xl focus:outline-none focus:ring-1 focus:ring-rose-500 bg-[#090d16] text-white font-medium"
|
||||
>
|
||||
{RISK_LIKELIHOOD_OPTIONS.map((opt) => (
|
||||
<option key={opt.value} value={opt.value}>
|
||||
{opt.value} - {opt.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-xs font-semibold text-slate-300 mb-1">Consequence / Impact (1 - 5) *</label>
|
||||
<select
|
||||
{...form.register('impact')}
|
||||
className="w-full px-3 py-2 text-xs border border-slate-700/80 rounded-xl focus:outline-none focus:ring-1 focus:ring-rose-500 bg-[#090d16] text-white font-medium"
|
||||
>
|
||||
{RISK_IMPACT_OPTIONS.map((opt) => (
|
||||
<option key={opt.value} value={opt.value}>
|
||||
{opt.value} - {opt.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-xs font-semibold text-slate-300 mb-1">Description & Potential Impact *</label>
|
||||
<textarea
|
||||
rows={2}
|
||||
{...form.register('description')}
|
||||
className="w-full px-3 py-2 text-xs border border-slate-700/80 rounded-xl focus:outline-none focus:ring-1 focus:ring-rose-500 text-white bg-[#090d16]"
|
||||
placeholder="Identify root cause, exposure pathway, and operational consequences..."
|
||||
/>
|
||||
{form.formState.errors.description && (
|
||||
<p className="text-[10px] text-rose-500 mt-1">{form.formState.errors.description.message}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="pt-2 flex justify-end gap-2 border-t border-slate-800">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setIsFormOpen(false);
|
||||
setEditingRisk(null);
|
||||
}}
|
||||
className="px-3.5 py-1.5 text-xs font-semibold text-slate-300 bg-slate-800 hover:bg-slate-700 rounded-xl cursor-pointer"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={mutation.isPending}
|
||||
className="px-4 py-1.5 text-xs font-semibold text-white bg-gradient-to-r from-rose-600 to-amber-600 hover:from-rose-500 hover:to-amber-500 rounded-xl shadow-md shadow-rose-500/20 cursor-pointer"
|
||||
>
|
||||
{mutation.isPending ? 'Saving...' : editingRisk ? 'Save Changes' : 'Log Risk'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Risks List */}
|
||||
<div className="space-y-2.5">
|
||||
<div className="flex items-center justify-between text-xs font-semibold text-slate-400 px-1">
|
||||
<span>Risk Matrix Registry ({risks.length})</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => refetch()}
|
||||
className="text-[11px] text-slate-400 hover:text-white flex items-center gap-1 cursor-pointer"
|
||||
>
|
||||
<RotateCcw className="w-3 h-3" /> Refresh
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
<div className="p-8 text-center text-xs text-slate-400 bg-[#0b101c] rounded-xl border border-slate-800">
|
||||
Loading project risks...
|
||||
</div>
|
||||
) : risks.length === 0 ? (
|
||||
<div className="p-8 text-center bg-[#0b101c] rounded-xl border border-dashed border-slate-800 text-slate-400 space-y-2">
|
||||
<ShieldCheck className="w-8 h-8 text-emerald-500 mx-auto" />
|
||||
<p className="text-xs font-semibold text-slate-300">No project risks logged</p>
|
||||
<p className="text-[11px] text-slate-500">Log hazards to enforce compliance with ISO 31000 risk controls.</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={openCreateForm}
|
||||
className="mt-2 inline-flex items-center gap-1 text-xs font-semibold text-rose-400 hover:underline"
|
||||
>
|
||||
<Plus className="w-3.5 h-3.5" /> Log first risk
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2.5 max-h-[380px] overflow-y-auto pr-1">
|
||||
{risks.map((rk) => {
|
||||
const score = (rk.likelihood || 1) * (rk.impact || 1);
|
||||
const riskInfo = getRiskScoreColor(rk.likelihood || 1, rk.impact || 1);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={rk.id}
|
||||
className="p-4 rounded-xl border border-slate-800 bg-[#0d121f] hover:border-slate-700 transition space-y-2.5"
|
||||
>
|
||||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2">
|
||||
<div className="space-y-0.5">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<span className="text-xs font-bold text-white">{rk.name}</span>
|
||||
<span className={`text-[10px] px-2 py-0.5 rounded-md font-mono ${riskInfo.badge}`}>
|
||||
Score: {score} / 25 ({riskInfo.level})
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-[10px] text-slate-500 font-mono">
|
||||
Likelihood: {rk.likelihood}/5 • Impact: {rk.impact}/5 • Risk ID #{rk.id}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 self-end sm:self-center">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => openEditForm(rk)}
|
||||
className="p-1.5 rounded-lg text-slate-400 hover:text-rose-400 hover:bg-slate-800 transition cursor-pointer"
|
||||
title="Edit Risk"
|
||||
>
|
||||
<Edit2 className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-xs text-slate-400 leading-relaxed">{rk.description}</p>
|
||||
|
||||
{rk.mitigationAction && (
|
||||
<div className="text-[11px] text-emerald-400 bg-emerald-500/10 p-2.5 rounded-lg border border-emerald-500/20">
|
||||
<strong className="text-emerald-300">Mitigation Control:</strong> {rk.mitigationAction}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user