Refactored projects page, fixed security user modal
This commit is contained in:
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user