shaily/KAFM-Project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Admin part is added and navbar context file is added

Browse Source
This commit is contained in:
Shaily Mishra
2026-07-27 19:05:11 +05:30
parent cdb52e717e
commit 954de712a7
23 changed files with 2525 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

173
components/dashboard/admin/Configuration/dynamicDashboard.tsx Normal file
View File

@@ -0,0 +1,173 @@
import { ChevronDown, Trash2, X, Plus, Sparkles } from "lucide-react";
const initialRows = [
// Row 1 (2 cards)
{
id: "row-1",
widgets: [
{ id: "w1", title: "TFM Requests · Monthly", type: "report.widget" },
{ id: "w2", title: "Recent Activity", type: "report.widget" },
],
},
// Row 2 (2 cards)
{
id: "row-2",
widgets: [
{ id: "w3", title: "Schedule Performance", type: "report.widget" },
{ id: "w4", title: "Energy · Today", type: "report.widget" },
],
},
// Row 3 (3 cards)
{
id: "row-3",
widgets: [
{ id: "w5", title: "Top 5 Requester", type: "report.widget" },
{ id: "w6", title: "Asset Register", type: "report.widget" },
{ id: "w7", title: "PM Plan vs Started", type: "report.widget" },
],
},
];
// Note the 'export default' keyword here:
export default function DynamicDashboardPortal() {
return (
<div className="my-15 text-slate-100 font-sans">
{/* --- HEADER SECTION --- */}
<div className="flex flex-col md:flex-row md:items-start justify-between gap-4 mb-6">
<div>
<div className="flex items-center gap-2 text-[10px] font-bold tracking-widest uppercase font-mono text-slate-400 mb-1">
<span>PLATFORM</span>
<span>•</span>
<span>DYNAMIC DASHBOARD</span>
</div>
<h1 className="text-2xl font-bold text-white tracking-tight">
Dynamic dashboard
</h1>
<p className="text-sm font-medium text-slate-400 mt-1 max-w-2xl leading-relaxed">
Design the dashboard each tenant's users land on in Operations. Arrange rows,
drop in report widgets, then publish.
</p>
</div>
{/* Action Buttons */}
<div className="flex items-center gap-3 self-start md:self-auto">
<span className="inline-flex items-center gap-1.5 bg-[#0C243B] border border-sky-800/50 text-sky-400 text-xs px-3 py-1.5 rounded-full font-mono font-medium">
<span className="w-1.5 h-1.5 rounded-full bg-sky-400"></span>
PUBLISHED
</span>
<button className="bg-[#0E1A2B] hover:bg-slate-800 text-slate-200 border border-slate-800 px-4 py-2 rounded-lg text-xs font-semibold transition-colors">
Save draft
</button>
<button className="bg-[#1DE9B6] hover:bg-[#19d4a5] text-slate-950 font-semibold text-xs px-4 py-2 rounded-lg transition-colors shadow-lg shadow-teal-500/10">
Publish
</button>
</div>
</div>
{/* --- CONTROL BAR: DESIGNING FOR TENANT --- */}
<div className=" border border-slate-800/80 rounded-xl p-2 mb-2 flex flex-col sm:flex-row sm:items-center justify-between gap-4 backdrop-blur-sm">
<div className="flex items-center gap-3">
<span className="text-xs font-medium text-slate-300 shrink-0">
Designing for
</span>
<div className="relative min-w-[200px]">
<select
defaultValue="Apple One"
className="w-full appearance-none bg-[#060B14] border border-slate-800 rounded-lg pl-3.5 pr-8 py-1.5 text-xs text-slate-200 font-medium focus:outline-none focus:border-teal-500/50 cursor-pointer"
>
<option value="Apple One">Apple One</option>
<option value="Tenant Two">Tenant Two</option>
</select>
<ChevronDown className="absolute right-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-slate-400 pointer-events-none" />
</div>
</div>
<div className="text-xs font-mono text-slate-400 bg-[#060B14] border border-slate-800 px-3 py-1.5 rounded-lg shrink-0">
3 rows · 7 widgets
</div>
</div>
{/* --- CANVAS GRID AREA --- */}
<div className="border border-slate-800/80 rounded-2xl p-4 sm:p-6 mb-8 space-y-6 bg-[radial-gradient(#1e293b_1px,transparent_1px)] [background-size:16px_16px]">
{initialRows.map((row) => (
<div key={row.id} className="relative group/row">
{/* Delete Row Button */}
<button
className="absolute -top-3 -right-2 z-10 p-1.5 text-slate-500 hover:text-rose-400 bg-[#060B14] border border-slate-800 rounded-md transition-colors opacity-80 group-hover/row:opacity-100"
title="Delete row"
>
<Trash2 className="w-3.5 h-3.5" />
</button>
{/* Row Widgets Layout */}
<div
className={`grid gap-4 ${
row.widgets.length === 1
? "grid-cols-1"
: row.widgets.length === 2
? "grid-cols-1 md:grid-cols-2"
: "grid-cols-1 md:grid-cols-3"
}`}
>
{row.widgets.map((widget) => (
<div
key={widget.id}
className="bg-[#0B132B]/80 border border-slate-800/90 rounded-xl p-4 backdrop-blur-sm flex flex-col justify-between h-36 relative group/widget hover:border-slate-700/80 transition-all"
>
{/* Widget Top Header */}
<div className="flex items-start justify-between gap-2">
<div>
<h3 className="text-sm font-semibold text-white tracking-tight">
{widget.title}
</h3>
<p className="text-[11px] font-mono text-slate-400 mt-0.5">
{widget.type}
</p>
</div>
<button
className="p-1 rounded bg-slate-800/40 hover:bg-slate-700 text-slate-400 hover:text-white transition-colors"
title="Remove widget"
>
<X className="w-3.5 h-3.5" />
</button>
</div>
{/* Widget Placeholder Bar Chart */}
<div className="flex items-end justify-between gap-1.5 h-12 pt-2 px-1">
<div className="w-full bg-[#0E2433] rounded-t-sm h-[30%] border-t border-teal-500/50"></div>
<div className="w-full bg-[#0E2433] rounded-t-sm h-[45%] border-t border-teal-500/50"></div>
<div className="w-full bg-[#0E2433] rounded-t-sm h-[85%] border-t border-teal-500/50"></div>
<div className="w-full bg-[#0E2433] rounded-t-sm h-[60%] border-t border-teal-500/50"></div>
<div className="w-full bg-[#0E2433] rounded-t-sm h-[75%] border-t border-teal-500/50"></div>
</div>
</div>
))}
</div>
</div>
))}
</div>
{/* --- BOTTOM ADD ROW CONTROLS --- */}
<div className="flex flex-wrap items-center gap-3">
<span className="text-xs font-mono text-slate-400 uppercase tracking-wider">
Add row:
</span>
<button className="flex items-center gap-1.5 hover:bg-slate-800 border border-slate-800/80 text-slate-200 text-xs px-3 py-1.5 rounded-lg transition-colors font-medium">
<Plus className="w-3.5 h-3.5 text-teal-400" />
<span>1 card</span>
</button>
<button className="flex items-center gap-1.5 hover:bg-slate-800 border border-slate-800/80 text-slate-200 text-xs px-3 py-1.5 rounded-lg transition-colors font-medium">
<Plus className="w-3.5 h-3.5 text-teal-400" />
<span>2 cards</span>
</button>
<button className="flex items-center gap-1.5 hover:bg-slate-800 border border-slate-800/80 text-slate-200 text-xs px-3 py-1.5 rounded-lg transition-colors font-medium">
<Plus className="w-3.5 h-3.5 text-teal-400" />
<span>3 cards</span>
</button>
</div>
</div>
);
}