Tab Constant is added

This commit is contained in:
2026-07-29 14:39:55 +05:30
parent 7ce1f2705e
commit f9c3e7968b
28 changed files with 1299 additions and 1093 deletions

View File

@@ -1,32 +1,8 @@
import { ChevronDown, Trash2, X, Plus, Sparkles } from "lucide-react";
import Button from "@/components/common/button";
import { initialRows } from "@/constants/constant";
import { ChevronDown, Trash2, X, Plus, } 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() {
@@ -35,10 +11,10 @@ export default function DynamicDashboardPortal() {
{/* --- 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 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
@@ -55,12 +31,12 @@ export default function DynamicDashboardPortal() {
<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">
<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">
</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>
</Button>
</div>
</div>
@@ -152,18 +128,18 @@ export default function DynamicDashboardPortal() {
<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">
<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">
</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">
</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>
</Button>
</div>

View File

@@ -2,36 +2,7 @@
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",
},
];
import { initialLanguageValues } from "@/constants/constant";
export default function LanguagePortal() {
@@ -43,12 +14,12 @@ export default function LanguagePortal() {
<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 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">LANGUAGE</span>
</div>
<h1 className="text-3xl font-bold text-white tracking-tight">Language</h1>
<h1 className="text-2xl 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>

View File

@@ -1,3 +1,4 @@
import Button from "@/components/common/button";
import { Smartphone } from "lucide-react";
export default function MobileFlowsPortal() {
@@ -7,10 +8,10 @@ export default function MobileFlowsPortal() {
<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 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">MOBILE</span>
</div>
{/* Title */}
@@ -26,10 +27,10 @@ export default function MobileFlowsPortal() {
{/* 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">
<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>
</Button>
</div>
</div>

View File

@@ -2,78 +2,14 @@
import { useState } from "react";
import {
LayoutGrid,
CheckSquare,
Crosshair,
FileText,
Box,
Zap,
ClipboardCheck,
BarChart2,
Pencil,
Plus,
Sparkles,
} from "lucide-react";
import { initialModules } from "@/constants/constant";
import Button from "@/components/common/button";
// 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");
@@ -84,12 +20,12 @@ export default function ModulesPortal() {
<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 className="flex items-center gap-2 text-[12px] font-semibold tracking-wider text-slate-400 uppercase font-mono mb-1">
<span className="text-gray-400">PLATFORM</span>
<span className="text-gray-600"></span>
<span className="text-gray-400">MODULES</span>
</div>
<h1 className="text-3xl font-bold text-white tracking-tight">Modules</h1>
<h1 className="text-2xl 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>
@@ -107,10 +43,10 @@ export default function ModulesPortal() {
{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">
<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>
</Button>
</div>
{/* Module Items */}
@@ -181,10 +117,10 @@ export default function ModulesPortal() {
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">
<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>
</Button>
</div>
{/* Empty State / Menus List */}