Changes done in ui screens

This commit is contained in:
2026-07-28 19:11:10 +05:30
parent b8e833dbb9
commit 7ce1f2705e
33 changed files with 1944 additions and 1248 deletions

View File

@@ -3,61 +3,9 @@
import React, { useState } from "react";
import { Check } from "lucide-react";
import Button from "@/components/common/button";
import { initialPermissions, rolesList } from "@/constants/constant";
// Initial roles state
const rolesList = [
{ id: "admin", label: "Admin", badge: "all" },
{ id: "helpdesk", label: "Helpdesk", badge: "scoped" },
{ id: "mne_supervisor", label: "M&E Supervisor", badge: "scoped" },
{ id: "technician", label: "Technician", badge: "scoped" },
{ id: "tenant", label: "Tenant", badge: "scoped" },
];
// Initial permissions table data
const initialPermissions = [
{
id: 1,
module: "Help Desk",
menu: "Daily Location Checklist",
permissions: { all: false, view: true, add: true, edit: true, delete: false, cancel: true, print: true },
},
{
id: 2,
module: "Equipment",
menu: "Site-Wise Equipment",
permissions: { all: false, view: true, add: true, edit: true, delete: false, cancel: true, print: true },
},
{
id: 3,
module: "Equipment",
menu: "AMC Schedule",
permissions: { all: false, view: true, add: true, edit: true, delete: false, cancel: true, print: true },
},
{
id: 4,
module: "Request",
menu: "TFM Request",
permissions: { all: false, view: true, add: true, edit: true, delete: false, cancel: true, print: true },
},
{
id: 5,
module: "Energy",
menu: "Meter Reading",
permissions: { all: false, view: true, add: true, edit: true, delete: false, cancel: true, print: true },
},
{
id: 6,
module: "Master",
menu: "Request Location",
permissions: { all: false, view: true, add: true, edit: true, delete: false, cancel: true, print: true },
},
{
id: 7,
module: "Security",
menu: "Users",
permissions: { all: false, view: true, add: true, edit: true, delete: false, cancel: true, print: true },
},
];
export default function RolesAccessPortal() {
const [activeTopTab, setActiveTopTab] = useState("Roles & Permissions");
@@ -68,16 +16,16 @@ export default function RolesAccessPortal() {
return (
<div className="my-15 text-slate-100 font-sans">
{/* --- BREADCRUMB --- */}
<div className="flex items-center gap-2 text-[10px] font-bold tracking-widest text-emerald-400 uppercase font-mono">
<div className="flex items-center gap-2 text-[12px] font-bold tracking-widest text-emerald-400 uppercase font-mono">
<span>APPLE ONE HQ TOWER</span>
<span className="text-slate-600"></span>
<span className="text-slate-500">CONFIGURE</span>
<span className="text-slate-400">CONFIGURE</span>
<span className="text-slate-600"></span>
<span className="text-slate-500">ROLES & ACCESS</span>
<span className="text-slate-400">ROLES & ACCESS</span>
</div>
{/* --- PAGE HEADER --- */}
<h1 className="text-3xl font-bold text-white tracking-tight mt-1">
<h1 className="text-2xl font-bold text-white tracking-tight mt-1">
Roles & access
</h1>
<p className="text-sm font-medium text-slate-400 mt-2 max-w-2xl leading-relaxed">
@@ -88,7 +36,7 @@ export default function RolesAccessPortal() {
{/* --- MAIN TABS --- */}
<div className="flex items-center gap-8 border-b border-slate-800/80 mt-8 text-sm font-semibold">
{["Roles & Permissions", "Tenant Access", "Escalation Matrix"].map((tab) => (
<button
<Button
key={tab}
onClick={() => setActiveTopTab(tab)}
className={`pb-3 relative transition-colors ${
@@ -101,7 +49,7 @@ export default function RolesAccessPortal() {
{activeTopTab === tab && (
<span className="absolute bottom-0 left-0 right-0 h-0.5 bg-emerald-400 rounded-full" />
)}
</button>
</Button>
))}
</div>
@@ -112,7 +60,7 @@ export default function RolesAccessPortal() {
{rolesList.map((role) => {
const isSelected = selectedRole === role.id;
return (
<button
<Button
key={role.id}
onClick={() => setSelectedRole(role.id)}
className={`w-full flex items-center justify-between px-5 py-4 text-left transition-all relative ${
@@ -136,7 +84,7 @@ export default function RolesAccessPortal() {
>
{role.badge}
</span>
</button>
</Button>
);
})}
</div>
@@ -176,8 +124,8 @@ export default function RolesAccessPortal() {
const isChecked = row.permissions[permKey];
return (
<td key={permKey} className="py-4 px-4 text-center">
<button
type="button"
<Button
className={`w-5 h-5 rounded flex items-center justify-center transition-all border mx-auto ${
isChecked
@@ -186,7 +134,7 @@ export default function RolesAccessPortal() {
}`}
>
{isChecked && <Check className="w-3.5 h-3.5 stroke-[3]" />}
</button>
</Button>
</td>
);
}