149 lines
7.2 KiB
TypeScript
149 lines
7.2 KiB
TypeScript
import Button from "@/components/common/button";
|
|
import { initialRows } from "@/constants/constant";
|
|
import { ChevronDown, Trash2, X, Plus, } from "lucide-react";
|
|
|
|
|
|
|
|
// 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-[12px] font-bold tracking-widest uppercase font-mono text-slate-400 mb-1">
|
|
<span className="text-gray-400">PLATFORM</span>
|
|
<span className="text-gray-600">•</span>
|
|
<span className="text-gray-400">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>
|
|
);
|
|
} |