Project structure changes ad new files added in dashboard folders
This commit is contained in:
218
components/dashboard/workplace/workspace.tsx
Normal file
218
components/dashboard/workplace/workspace.tsx
Normal file
@@ -0,0 +1,218 @@
|
||||
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 { workspaceTabs, zoneUtilizationData } from "@/constants/constant";
|
||||
import StatCard from "@/components/common/dashStatCard";
|
||||
import { Card } from '@/components/common/cardWrapper';
|
||||
import { CardHeader } from '@/components/common/cardHeader';
|
||||
|
||||
export default function WorkSpacePortal() {
|
||||
const [activeTab, setActiveTab] = useState<string>("Desk Booking");
|
||||
|
||||
// Grid state matching the UI: 4 rows x 12 columns (48 seats)
|
||||
// Types: 'occupied' (red/purple outline), 'free' (teal), 'reserved' (amber)
|
||||
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-[10px] font-bold tracking-widest text-slate-500 uppercase font-mono">
|
||||
<span className="text-teal-400">Apple One — HQ Tower</span>
|
||||
<span>•</span>
|
||||
<span>WORKPLACE</span>
|
||||
<span>•</span>
|
||||
<span>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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user