Admin part is added and navbar context file is added
This commit is contained in:
173
components/dashboard/admin/Configuration/dynamicDashboard.tsx
Normal file
173
components/dashboard/admin/Configuration/dynamicDashboard.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
256
components/dashboard/admin/Configuration/language.tsx
Normal file
256
components/dashboard/admin/Configuration/language.tsx
Normal file
@@ -0,0 +1,256 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Plus, ChevronDown } from "lucide-react";
|
||||
|
||||
const initialLanguageValues = [
|
||||
{
|
||||
id: 1,
|
||||
app: "Web Console",
|
||||
menu: "Tenant",
|
||||
screen: "Tenant List",
|
||||
uiKey: "btn.add_tenant",
|
||||
code: "EN",
|
||||
value: "Add Tenant",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
app: "Web Console",
|
||||
menu: "Site",
|
||||
screen: "Site List",
|
||||
uiKey: "btn.add_site",
|
||||
code: "EN",
|
||||
value: "Add Site",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
app: "Mobile App",
|
||||
menu: "Inspections",
|
||||
screen: "QR Round",
|
||||
uiKey: "lbl.scan_qr",
|
||||
code: "EN",
|
||||
value: "Scan QR to begin round",
|
||||
},
|
||||
];
|
||||
|
||||
export default function LanguagePortal() {
|
||||
|
||||
|
||||
const [languageValues, setLanguageValues] = useState(initialLanguageValues);
|
||||
|
||||
|
||||
return (
|
||||
<div className="my-15 text-slate-100 font-sans ">
|
||||
{/* --- HEADER SECTION --- */}
|
||||
<div className="mb-6">
|
||||
<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>LANGUAGE</span>
|
||||
</div>
|
||||
<h1 className="text-3xl font-bold text-white tracking-tight">Language</h1>
|
||||
<p className="text-sm font-medium text-slate-400 mt-1 max-w-3xl leading-relaxed">
|
||||
Manage translation keys across apps, menus and screens — then resolve their values per tenant.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* --- FORM SECTION: LANGUAGE KEY MASTER --- */}
|
||||
<div className=" border border-slate-800/80 rounded-xl
|
||||
p-3 mb-6 shadow-xl backdrop-blur-sm">
|
||||
<div className="mb-5">
|
||||
<h2 className="text-base font-semibold text-white tracking-tight">
|
||||
Language key master
|
||||
</h2>
|
||||
<p className="text-xs font-mono text-slate-400 mt-0.5">
|
||||
Scope a translation key to an app, menu and screen
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form className="space-y-4">
|
||||
{/* Top Row Selects */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div>
|
||||
<label className="block text-[11px] font-mono tracking-wider text-slate-400 uppercase mb-1.5">
|
||||
APP
|
||||
</label>
|
||||
<div className="relative">
|
||||
<select
|
||||
|
||||
|
||||
className="w-full appearance-none bg-[#060B14] border border-slate-800 rounded-lg px-3.5 py-2 text-sm text-slate-200 focus:outline-none focus:border-teal-500/50 cursor-pointer"
|
||||
>
|
||||
<option value="Web Console">Web Console</option>
|
||||
<option value="Mobile App">Mobile App</option>
|
||||
</select>
|
||||
<ChevronDown className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 pointer-events-none" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-[11px] font-mono tracking-wider text-slate-400 uppercase mb-1.5">
|
||||
MENU
|
||||
</label>
|
||||
<div className="relative">
|
||||
<select
|
||||
|
||||
|
||||
className="w-full appearance-none bg-[#060B14] border border-slate-800 rounded-lg px-3.5 py-2 text-sm text-slate-200 focus:outline-none focus:border-teal-500/50 cursor-pointer"
|
||||
>
|
||||
<option value="Tenant">Tenant</option>
|
||||
<option value="Site">Site</option>
|
||||
<option value="Inspections">Inspections</option>
|
||||
</select>
|
||||
<ChevronDown className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 pointer-events-none" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-[11px] font-mono tracking-wider text-slate-400 uppercase mb-1.5">
|
||||
SCREEN
|
||||
</label>
|
||||
<div className="relative">
|
||||
<select
|
||||
|
||||
className="w-full appearance-none bg-[#060B14] border border-slate-800 rounded-lg px-3.5 py-2 text-sm text-slate-200 focus:outline-none focus:border-teal-500/50 cursor-pointer"
|
||||
>
|
||||
<option value="Tenant List">Tenant List</option>
|
||||
<option value="Site List">Site List</option>
|
||||
<option value="QR Round">QR Round</option>
|
||||
</select>
|
||||
<ChevronDown className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 pointer-events-none" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom Row Inputs & Action Button */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-12 gap-4 items-end">
|
||||
<div className="md:col-span-4">
|
||||
<label className="block text-[11px] font-mono tracking-wider text-slate-400 uppercase mb-1.5">
|
||||
UI KEY
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
|
||||
placeholder="e.g. btn.add_tenant"
|
||||
className="w-full bg-[#060B14] border border-slate-800 rounded-lg px-3.5 py-2 text-sm text-slate-200 font-mono focus:outline-none focus:border-teal-500/50 placeholder:text-slate-600"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="md:col-span-2">
|
||||
<label className="block text-[11px] font-mono tracking-wider text-slate-400 uppercase mb-1.5">
|
||||
CODE
|
||||
</label>
|
||||
<div className="relative">
|
||||
<select
|
||||
|
||||
className="w-full appearance-none bg-[#060B14] border border-slate-800 rounded-lg px-3.5 py-2 text-sm text-slate-200 focus:outline-none focus:border-teal-500/50 cursor-pointer"
|
||||
>
|
||||
<option value="en">en</option>
|
||||
<option value="es">es</option>
|
||||
<option value="fr">fr</option>
|
||||
</select>
|
||||
<ChevronDown className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 pointer-events-none" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="md:col-span-4">
|
||||
<label className="block text-[11px] font-mono tracking-wider text-slate-400 uppercase mb-1.5">
|
||||
VALUE
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
|
||||
placeholder="e.g. Add Tenant"
|
||||
className="w-full bg-[#060B14] border border-slate-800 rounded-lg px-3.5 py-2 text-sm text-slate-200 focus:outline-none focus:border-teal-500/50 placeholder:text-slate-600"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="md:col-span-2">
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full bg-[#1DE9B6] hover:bg-[#19d4a5] text-slate-950 font-semibold text-sm px-4 py-2 rounded-lg flex items-center justify-center gap-1.5 transition-colors shadow-lg shadow-teal-500/10 cursor-pointer"
|
||||
>
|
||||
<Plus className="w-4 h-4 stroke-[2.5]" />
|
||||
<span>Add</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{/* --- TABLE SECTION: LANGUAGE VALUES --- */}
|
||||
<div className=" border border-slate-800/80 rounded-xl p-3 shadow-xl
|
||||
backdrop-blur-sm">
|
||||
{/* Table Header Controls */}
|
||||
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-2">
|
||||
<div>
|
||||
<h2 className="text-base font-semibold text-white tracking-tight">
|
||||
Language values
|
||||
</h2>
|
||||
<p className="text-xs font-mono text-slate-400 mt-0.5">
|
||||
Resolved strings — filtered to the selected tenant's locales
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="relative min-w-[180px]">
|
||||
<select
|
||||
|
||||
className="w-full appearance-none bg-[#060B14] border border-slate-800 rounded-lg px-3.5 py-1.5 text-sm text-slate-200 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-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 pointer-events-none" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Locale Tag */}
|
||||
<div className="mb-4">
|
||||
<span className="inline-flex items-center gap-1.5 bg-[#0C243B] border border-sky-800/50 text-sky-400 text-xs px-2.5 py-0.5 rounded-full font-mono font-medium">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-sky-400"></span>
|
||||
EN
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Data Table */}
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr className="border-b border-slate-800 text-[10px] font-mono tracking-wider text-slate-400 uppercase">
|
||||
<th className="py-3 px-2 font-medium">APP</th>
|
||||
<th className="py-3 px-2 font-medium">MENU</th>
|
||||
<th className="py-3 px-2 font-medium">SCREEN</th>
|
||||
<th className="py-3 px-2 font-medium">UI KEY</th>
|
||||
<th className="py-3 px-2 font-medium">CODE</th>
|
||||
<th className="py-3 px-2 font-medium">VALUE</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-800/60 text-sm">
|
||||
{languageValues.map((row) => (
|
||||
<tr key={row.id} className="hover:bg-slate-800/20 transition-colors">
|
||||
<td className="py-3.5 px-2 font-medium text-slate-200">{row.app}</td>
|
||||
<td className="py-3.5 px-2 font-medium text-slate-200">{row.menu}</td>
|
||||
<td className="py-3.5 px-2 text-slate-300">{row.screen}</td>
|
||||
<td className="py-3.5 px-2">
|
||||
<span className="font-mono text-xs text-slate-300 bg-[#060B14] border border-slate-800/80 px-2 py-1 rounded">
|
||||
{row.uiKey}
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-3.5 px-2">
|
||||
<span className="inline-flex items-center gap-1.5 bg-[#0C243B] border border-sky-800/50 text-sky-400 text-xs px-2 py-0.5 rounded-full font-mono font-medium">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-sky-400"></span>
|
||||
{row.code}
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-3.5 px-2 font-semibold text-white">{row.value}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
45
components/dashboard/admin/Configuration/mobileFlows.tsx
Normal file
45
components/dashboard/admin/Configuration/mobileFlows.tsx
Normal file
@@ -0,0 +1,45 @@
|
||||
import { Smartphone } from "lucide-react";
|
||||
|
||||
export default function MobileFlowsPortal() {
|
||||
return (
|
||||
<div className="my-15 text-slate-100 font-sans">
|
||||
{/* --- HEADER SECTION --- */}
|
||||
<div className="flex flex-col md:flex-row md:items-end justify-between gap-4 mb-6">
|
||||
<div>
|
||||
{/* Breadcrumb */}
|
||||
<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>MOBILE</span>
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
<h1 className="text-2xl font-bold text-white tracking-tight">
|
||||
KAFM Field — mobile flows
|
||||
</h1>
|
||||
|
||||
{/* Subtitle / Description */}
|
||||
<p className="text-sm font-medium text-slate-400 mt-1 max-w-2xl leading-relaxed">
|
||||
The technician mobile app, embedded live: two flow variations (1a Field Deck · dark, 1b Day Runner · light), 17 screens each — jobs, checklists, QR, inventory, chat, incidents, reports. Every phone is fully interactive.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Action Button */}
|
||||
<div className="self-start md:self-auto shrink-0">
|
||||
<button className="flex items-center gap-2 bg-[#0A1628] hover:bg-slate-800 text-slate-200 border border-slate-700/80 px-4 py-2 rounded-lg text-xs font-semibold transition-colors shadow-sm cursor-pointer">
|
||||
<Smartphone className="w-4 h-4 text-slate-300" />
|
||||
<span>Open full screen</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* --- EMBEDDED PHONE DISPLAY AREA --- */}
|
||||
<div className="w-full bg-[#EAEFF4] rounded-2xl min-h-[500px] border border-slate-800 shadow-2xl p-6 flex items-center justify-center">
|
||||
{/* Mobile preview frame container goes here */}
|
||||
<p className="text-slate-500 font-mono text-xs">
|
||||
[ Live Mobile App Frames ]
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
219
components/dashboard/admin/Configuration/modules.tsx
Normal file
219
components/dashboard/admin/Configuration/modules.tsx
Normal file
@@ -0,0 +1,219 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import {
|
||||
LayoutGrid,
|
||||
CheckSquare,
|
||||
Crosshair,
|
||||
FileText,
|
||||
Box,
|
||||
Zap,
|
||||
ClipboardCheck,
|
||||
BarChart2,
|
||||
Pencil,
|
||||
Plus,
|
||||
Sparkles,
|
||||
} from "lucide-react";
|
||||
|
||||
// Mock Data matching the design
|
||||
const initialModules = [
|
||||
{
|
||||
id: "MOD-01",
|
||||
title: "Dashboard",
|
||||
description: "Operational overview & live KPIs",
|
||||
icon: LayoutGrid,
|
||||
menus: [], // Currently empty as per screenshot
|
||||
},
|
||||
{
|
||||
id: "MOD-02",
|
||||
title: "Helpdesk",
|
||||
description: "Tickets, requests & SLA tracking",
|
||||
icon: CheckSquare,
|
||||
menus: ["Tickets", "SLA Settings", "Queues"],
|
||||
},
|
||||
{
|
||||
id: "MOD-03",
|
||||
title: "Equipment",
|
||||
description: "Asset register & equipment groups",
|
||||
icon: Crosshair,
|
||||
menus: ["Asset Register", "Categories"],
|
||||
},
|
||||
{
|
||||
id: "MOD-04",
|
||||
title: "Request",
|
||||
description: "Service requests & approvals",
|
||||
icon: FileText,
|
||||
menus: ["My Requests", "Approvals"],
|
||||
},
|
||||
{
|
||||
id: "MOD-05",
|
||||
title: "Inventory",
|
||||
description: "Stock, spares & consumables",
|
||||
icon: Box,
|
||||
menus: ["Stock Levels", "Suppliers"],
|
||||
},
|
||||
{
|
||||
id: "MOD-06",
|
||||
title: "Energy",
|
||||
description: "Meters, consumption & analytics",
|
||||
icon: Zap,
|
||||
menus: ["Meters", "Analytics"],
|
||||
},
|
||||
{
|
||||
id: "MOD-07",
|
||||
title: "Inspections",
|
||||
description: "QR rounds & checklists",
|
||||
icon: ClipboardCheck,
|
||||
menus: ["Rounds", "Checklists"],
|
||||
},
|
||||
{
|
||||
id: "MOD-08",
|
||||
title: "Reports",
|
||||
description: "Analytics & export tools",
|
||||
icon: BarChart2,
|
||||
menus: ["Scheduled Reports", "Custom Builder"],
|
||||
},
|
||||
];
|
||||
|
||||
export default function ModulesPortal() {
|
||||
const [selectedModuleId, setSelectedModuleId] = useState("MOD-01");
|
||||
|
||||
const activeModule = initialModules.find((m) => m.id === selectedModuleId);
|
||||
|
||||
return (
|
||||
<div className="my-15 text-slate-100 font-saas">
|
||||
{/* Header Section */}
|
||||
<div className="mb-6">
|
||||
<div className="flex items-center gap-2 text-[10px] font-semibold tracking-wider text-slate-400 uppercase font-mono mb-1">
|
||||
<span>PLATFORM</span>
|
||||
<span>•</span>
|
||||
<span>MODULES</span>
|
||||
</div>
|
||||
<h1 className="text-3xl font-bold text-white tracking-tight">Modules</h1>
|
||||
<p className="text-sm text-slate-400 mt-1 max-w-2xl">
|
||||
The catalog of system modules and their menus. These are what you switch on per tenant under feature access.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Main Grid Container */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-6 items-start">
|
||||
{/* Left Column: Modules List */}
|
||||
<div className="lg:col-span-6 bg-[#0E1A2B]/60 border border-slate-800/80 rounded-xl p-5 backdrop-blur-sm">
|
||||
{/* Section Header */}
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div>
|
||||
<h2 className="text-base font-semibold text-white">Modules</h2>
|
||||
<span className="text-xs font-mono text-slate-400">
|
||||
{initialModules.length} available
|
||||
</span>
|
||||
</div>
|
||||
<button className="flex items-center gap-1.5 text-emerald-400 hover:text-emerald-300 text-xs font-semibold transition-colors">
|
||||
<Plus className="w-4 h-4" />
|
||||
<span>Add module</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Module Items */}
|
||||
<div className="space-y-2 max-h-[620px] overflow-y-auto pr-1 custom-scrollbar">
|
||||
{initialModules.map((module) => {
|
||||
const Icon = module.icon;
|
||||
const isSelected = module.id === selectedModuleId;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={module.id}
|
||||
onClick={() => setSelectedModuleId(module.id)}
|
||||
className={`group relative flex items-center justify-between p-3.5 rounded-lg border cursor-pointer transition-all ${
|
||||
isSelected
|
||||
? "bg-teal-950/30 border-teal-500/40"
|
||||
: "bg-[#09111E]/40 border-slate-800/60 hover:border-slate-700 hover:bg-[#0D1726]"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-3.5 min-w-0">
|
||||
<div
|
||||
className={`p-2.5 rounded-lg border shrink-0 ${
|
||||
isSelected
|
||||
? "bg-teal-500/10 border-teal-500/30 text-teal-400"
|
||||
: "bg-slate-900/80 border-slate-800 text-slate-400 group-hover:text-slate-200"
|
||||
}`}
|
||||
>
|
||||
<Icon className="w-4 h-4" />
|
||||
</div>
|
||||
<div className="truncate">
|
||||
<h3 className="text-sm font-semibold text-white truncate">
|
||||
{module.title}
|
||||
</h3>
|
||||
<p className="text-xs text-slate-400 truncate mt-0.5">
|
||||
{module.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 shrink-0 ml-3">
|
||||
<span className="text-[11px] font-mono bg-slate-900 border border-slate-800 text-slate-400 px-2 py-0.5 rounded">
|
||||
{module.id}
|
||||
</span>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
// Edit logic here
|
||||
}}
|
||||
className="p-1.5 text-slate-400 hover:text-white rounded-md hover:bg-slate-800 transition-colors"
|
||||
title="Edit module"
|
||||
>
|
||||
<Pencil className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Column: Menus Panel */}
|
||||
<div className="lg:col-span-6 bg-[#0E1A2B]/60 border border-slate-800/80 rounded-xl p-5 min-h-[500px] flex flex-col justify-between backdrop-blur-sm">
|
||||
<div>
|
||||
{/* Menus Header */}
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div>
|
||||
<h2 className="text-base font-semibold text-white">Menus</h2>
|
||||
<span className="text-xs font-mono text-slate-400">
|
||||
Under {activeModule?.title || "Module"}
|
||||
</span>
|
||||
</div>
|
||||
<button className="flex items-center gap-1.5 text-teal-400 hover:text-teal-300 text-xs font-semibold transition-colors">
|
||||
<Plus className="w-4 h-4" />
|
||||
<span>Add menu</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Empty State / Menus List */}
|
||||
{activeModule?.menus && activeModule.menus.length > 0 ? (
|
||||
<div className="space-y-2 mt-4">
|
||||
{activeModule.menus.map((menu, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="flex items-center justify-between p-3 rounded-lg bg-[#09111E]/40 border border-slate-800/60"
|
||||
>
|
||||
<span className="text-sm font-medium text-slate-200">{menu}</span>
|
||||
<button className="text-xs text-slate-400 hover:text-white">
|
||||
Edit
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center h-80 text-center">
|
||||
<p className="text-sm text-slate-400 font-medium">
|
||||
No menus under this module yet.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user