218 lines
8.3 KiB
TypeScript
218 lines
8.3 KiB
TypeScript
import {
|
|
Activity,
|
|
Monitor,
|
|
Clock,
|
|
ShieldCheck,
|
|
Pencil,
|
|
Trash2,
|
|
Sparkles,
|
|
Plus
|
|
} from "lucide-react";
|
|
|
|
import InfoBanner from "@/components/common/infoBanner";
|
|
import Button from "@/components/common/button";
|
|
import NavigationTabs from "@/components/common/tabs";
|
|
|
|
import { useState } from "react";
|
|
import { zoneUtilizationData } from "@/constants/constant";
|
|
import StatCard from "@/components/common/dashStatCard";
|
|
import { Card } from '@/components/common/cardWrapper';
|
|
import { CardHeader } from '@/components/common/cardHeader';
|
|
import { workspaceTabs } from '@/constants/tabConstant';
|
|
|
|
export default function WorkSpacePortal() {
|
|
const [activeTab, setActiveTab] = useState<string>("Desk Booking");
|
|
|
|
|
|
const deskGrid = Array.from({ length: 48 }).map((_, index) => {
|
|
if (index === 42) return "reserved"; // 1 Reserved desk
|
|
if (index >= 36) return "free"; // Free desks on the bottom row
|
|
return "occupied"; // Occupied desks
|
|
});
|
|
|
|
return (
|
|
<div className="my-15 text-slate-100 font-sans">
|
|
{/* --- HEADER SECTION WITH BUTTONS --- */}
|
|
<div className="flex flex-col md:flex-row md:items-start md:justify-between gap-4 mb-6">
|
|
<div>
|
|
<div className="flex items-center gap-2 text-[12px] font-bold tracking-widest text-slate-500 uppercase font-mono">
|
|
<span className="text-teal-400">Apple One — HQ Tower</span>
|
|
<span className="text-gray-600">•</span>
|
|
<span className="text-gray-400">WORKPLACE</span>
|
|
<span className="text-gray-600">•</span>
|
|
<span className="text-gray-400">WORKSPACE</span>
|
|
</div>
|
|
|
|
<h1 className="text-2xl font-bold text-white tracking-tight mt-2">
|
|
Workspace management
|
|
</h1>
|
|
|
|
<p className="text-sm font-medium text-slate-400 mt-2 max-w-xl leading-relaxed">
|
|
Desk booking, live floor plans and shift timetable — unified, all reading the Block → Floor → Zone master.
|
|
</p>
|
|
</div>
|
|
|
|
{/* --- ACTION BUTTONS --- */}
|
|
<div className="flex items-center gap-2.5 self-start mt-10">
|
|
<Button className="bg-[#0b1727] hover:bg-slate-800/60 text-slate-200 border border-slate-800 text-xs px-3.5 py-2 rounded-lg flex items-center gap-2 font-semibold transition-colors">
|
|
<Sparkles className="w-4 h-4 text-slate-300" />
|
|
<span>Policies</span>
|
|
</Button>
|
|
|
|
<Button className="bg-[#0b1727] hover:bg-slate-800/60 text-slate-200 border border-slate-800 text-xs px-3.5 py-2 rounded-lg flex items-center gap-2 font-semibold transition-colors">
|
|
<Plus className="w-4 h-4 text-slate-300" />
|
|
<span>Add zone</span>
|
|
</Button>
|
|
|
|
<Button className="bg-teal-400 hover:bg-teal-300 text-slate-950 font-bold text-xs px-4 py-2 rounded-lg flex items-center gap-1.5 transition-colors">
|
|
<Plus className="w-4 h-4 stroke-[3]" />
|
|
<span>Book desk</span>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Navigation Tabs */}
|
|
<NavigationTabs
|
|
tabs={workspaceTabs}
|
|
activeTab={activeTab}
|
|
onTabChange={setActiveTab}
|
|
className="mb-6"
|
|
/>
|
|
|
|
{/* --- STAT CARDS --- */}
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
|
|
{/* Total desks */}
|
|
<StatCard
|
|
variant="icon"
|
|
title="Total desks"
|
|
value="162"
|
|
icon={Monitor}
|
|
badgeText="4 zones"
|
|
badgeClassName="text-slate-400 lowercase font-mono"
|
|
iconContainerClassName="bg-blue-950/40 border-blue-800/30 text-blue-400"
|
|
/>
|
|
|
|
{/* Available */}
|
|
<StatCard
|
|
variant="icon"
|
|
title="Available"
|
|
value="39"
|
|
icon={ShieldCheck}
|
|
badgeText="free now"
|
|
badgeClassName="text-emerald-400 lowercase font-mono"
|
|
iconContainerClassName="bg-emerald-950/40 border-emerald-800/30 text-emerald-400"
|
|
/>
|
|
|
|
{/* Occupied */}
|
|
<StatCard
|
|
variant="icon"
|
|
title="Occupied"
|
|
value="123"
|
|
icon={Clock}
|
|
badgeText="checked in"
|
|
badgeClassName="text-rose-400 lowercase font-mono"
|
|
iconContainerClassName="bg-rose-950/40 border-rose-900/30 text-rose-400"
|
|
/>
|
|
|
|
{/* Utilization */}
|
|
<StatCard
|
|
variant="icon"
|
|
title="Utilization"
|
|
value="76%"
|
|
icon={Activity}
|
|
badgeText="today"
|
|
badgeClassName="text-slate-400 lowercase font-mono"
|
|
iconContainerClassName="bg-amber-950/40 border-amber-800/30 text-amber-400"
|
|
/>
|
|
</div>
|
|
|
|
{/* --- OCCUPANCY & ZONE UTILIZATION SECTION --- */}
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
|
|
{/* Live Occupancy Grid (Left 2 Columns) */}
|
|
<Card className="lg:col-span-2 justify-start">
|
|
<CardHeader
|
|
title="Live occupancy · North Wing L8"
|
|
subtitle="39 / 48 occupied"
|
|
/>
|
|
|
|
{/* Desk Layout Grid */}
|
|
<div className="grid grid-cols-6 sm:grid-cols-12 gap-2 my-4">
|
|
{deskGrid.map((type, i) => (
|
|
<div
|
|
key={i}
|
|
className={`h-10 rounded-lg border transition-all ${
|
|
type === "occupied"
|
|
? "bg-[#181828]/50 border-rose-500/30"
|
|
: type === "free"
|
|
? "bg-teal-950/30 border-teal-500/50"
|
|
: "bg-slate-900/60 border-amber-500/50"
|
|
}`}
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
{/* Map Legend */}
|
|
<div className="flex items-center gap-6 mt-2 pt-2 text-xs text-slate-400">
|
|
<div className="flex items-center gap-2">
|
|
<span className="w-3 h-3 rounded border border-teal-500/50 bg-teal-950/30" />
|
|
<span>Free</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<span className="w-3 h-3 rounded border border-amber-500/50 bg-slate-900/60" />
|
|
<span>Reserved</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<span className="w-3 h-3 rounded border border-rose-500/30 bg-[#181828]/50" />
|
|
<span>Occupied</span>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Zone Utilization Bars (Right 1 Column) */}
|
|
<Card className="justify-start">
|
|
<CardHeader title="Zone utilization" />
|
|
|
|
<div className="space-y-5 mt-3">
|
|
{zoneUtilizationData.map((zone, idx) => {
|
|
const percentage = Math.round((zone.current / zone.max) * 100);
|
|
return (
|
|
<div key={idx} className="flex items-center justify-between gap-3">
|
|
<span className="text-xs font-medium text-slate-300 w-32 truncate">
|
|
{zone.name}
|
|
</span>
|
|
|
|
{/* Progress Bar Container */}
|
|
<div className="flex-1 bg-[#12233a] h-2 rounded-full overflow-hidden">
|
|
<div
|
|
className={`h-full ${zone.barColor} transition-all duration-300`}
|
|
style={{ width: `${percentage}%` }}
|
|
/>
|
|
</div>
|
|
|
|
{/* Value & Actions */}
|
|
<div className="flex items-center gap-2 font-mono text-xs text-slate-200">
|
|
<span className="font-bold">{zone.current}/{zone.max}</span>
|
|
<Button className="bg-[#12233a] hover:bg-[#1a3252] border border-[#1d3554] text-slate-400 hover:text-slate-200 p-1 rounded transition-colors">
|
|
<Pencil className="w-3 h-3" />
|
|
</Button>
|
|
<Button className="bg-[#12233a] hover:bg-[#1a3252] border border-[#1d3554] text-slate-400 hover:text-rose-400 p-1 rounded transition-colors">
|
|
<Trash2 className="w-3 h-3" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Info Banner */}
|
|
<div className="my-8">
|
|
<InfoBanner
|
|
boldText="Policy:"
|
|
normalText="hot desks auto-release after a 15-min no-show; fixed desks are role-assigned; collaboration zones are first-come via QR check-in."
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |