Refactored projects page, fixed security user modal

This commit is contained in:
2026-10-22 07:39:33 +02:00
parent c24e809b88
commit ccc49df720
7 changed files with 288 additions and 337 deletions
@@ -124,12 +124,12 @@ export const ProjectTimelineGantt: React.FC<ProjectTimelineGanttProps> = ({
<div className="bg-[#0b101c] rounded-2xl border border-slate-800/80 p-5 space-y-5 overflow-hidden shadow-inner">
{/* Timeline Header & Key Stats */}
<div className="flex flex-wrap items-center justify-between gap-3 pb-4 border-b border-slate-800/80">
<div className="flex items-center gap-2.5">
<div className="h-8 w-8 rounded-xl bg-blue-500/10 border border-blue-500/30 flex items-center justify-center text-blue-400">
<div className="flex items-center gap-2.5 min-w-0 flex-1">
<div className="h-8 w-8 rounded-xl bg-blue-500/10 border border-blue-500/30 flex items-center justify-center text-blue-400 shrink-0">
<Calendar className="w-4 h-4" />
</div>
<div>
<h4 className="text-xs font-bold text-white uppercase tracking-wider flex items-center gap-2">
<div className="min-w-0">
<h4 className="text-xs font-bold text-white uppercase tracking-wider flex items-center gap-2 flex-wrap">
Implementation Schedule & Timeline
<span className="text-[10px] normal-case font-normal text-slate-400">
({timelineData.totalDurationDays} Days Span)
@@ -142,17 +142,17 @@ export const ProjectTimelineGantt: React.FC<ProjectTimelineGanttProps> = ({
</div>
{/* Quick Legend & Actions */}
<div className="flex items-center gap-3 text-[11px] flex-wrap">
<div className="flex items-center gap-3 px-3 py-1 bg-slate-900/80 rounded-xl border border-slate-800 text-slate-400">
<span className="flex items-center gap-1.5">
<div className="flex items-center gap-2 text-[11px] flex-wrap shrink-0">
<div className="flex items-center gap-3 px-3 py-1 bg-slate-900/80 rounded-xl border border-slate-800 text-slate-400 flex-wrap">
<span className="flex items-center gap-1.5 whitespace-nowrap">
<span className="w-2.5 h-2.5 rounded-full bg-emerald-500 inline-block shadow-sm shadow-emerald-500/50" />
Verified Deliverable
</span>
<span className="flex items-center gap-1.5">
<span className="flex items-center gap-1.5 whitespace-nowrap">
<span className="w-2.5 h-2.5 rounded-full bg-amber-500 inline-block shadow-sm shadow-amber-500/50" />
Pending / Review
</span>
<span className="flex items-center gap-1.5">
<span className="flex items-center gap-1.5 whitespace-nowrap">
<span className="w-2.5 h-2.5 rounded-sm bg-blue-500 inline-block shadow-sm shadow-blue-500/50" />
Work Activity
</span>
@@ -206,7 +206,7 @@ export const ProjectTimelineGantt: React.FC<ProjectTimelineGanttProps> = ({
{/* Layer 1: Milestones Track */}
<div className="relative z-10 mb-6 space-y-2">
<div className="flex items-center justify-between text-[11px] font-semibold text-slate-300 px-1">
<div className="flex items-center justify-between text-[11px] font-semibold text-slate-300 px-1 gap-2 flex-wrap">
<span className="flex items-center gap-1.5 text-blue-400">
<Flag className="w-3.5 h-3.5" />
Contractual Deliverables & Milestones ({milestones.length})
@@ -214,7 +214,7 @@ export const ProjectTimelineGantt: React.FC<ProjectTimelineGanttProps> = ({
<button
type="button"
onClick={onManageMilestones}
className="text-[10px] text-blue-400 hover:text-blue-300 hover:underline cursor-pointer flex items-center gap-1 font-medium"
className="text-[10px] text-blue-400 hover:text-blue-300 hover:underline cursor-pointer flex items-center gap-1 font-medium whitespace-nowrap shrink-0"
>
<Plus className="w-3 h-3" /> Add / Manage Milestones
</button>
@@ -295,7 +295,7 @@ export const ProjectTimelineGantt: React.FC<ProjectTimelineGanttProps> = ({
{/* Layer 2: Activities Track */}
<div className="relative z-10 space-y-2">
<div className="flex items-center justify-between text-[11px] font-semibold text-slate-300 px-1">
<div className="flex items-center justify-between text-[11px] font-semibold text-slate-300 px-1 gap-2 flex-wrap">
<span className="flex items-center gap-1.5 text-cyan-400">
<Briefcase className="w-3.5 h-3.5" />
Work Breakdown Activities ({activities.length})
@@ -303,7 +303,7 @@ export const ProjectTimelineGantt: React.FC<ProjectTimelineGanttProps> = ({
<button
type="button"
onClick={onManageActivities}
className="text-[10px] text-cyan-400 hover:text-cyan-300 hover:underline cursor-pointer flex items-center gap-1 font-medium"
className="text-[10px] text-cyan-400 hover:text-cyan-300 hover:underline cursor-pointer flex items-center gap-1 font-medium whitespace-nowrap shrink-0"
>
<Plus className="w-3 h-3" /> Add / Manage Activities
</button>
@@ -366,7 +366,7 @@ export const ProjectTimelineGantt: React.FC<ProjectTimelineGanttProps> = ({
</div>
{/* Bottom Summary KPI Bar */}
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3 pt-2">
<div className="grid grid-cols-2 sm:grid-cols-3 xl:grid-cols-5 gap-3 pt-2">
<div className="p-3 bg-[#090d16] rounded-xl border border-slate-800">
<span className="text-[10px] uppercase font-bold text-slate-500 block">Project Duration</span>
<span className="text-sm font-bold text-white mt-0.5 block">