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

@@ -1,25 +1,24 @@
"use client";
import React, { useState } from "react";
import { Plus, QrCode, Sparkles } from "lucide-react";
import { useState } from "react";
import { Plus, } from "lucide-react";
import Button from "@/components/common/button";
import { blocks, floors, zones } from "@/constants/constant";
export default function MasterDataPortal() {
const [activeTab, setActiveTab] = useState("Block / Floor / Zone");
// Sample data for the hierarchy cards
const blocks = ["Block 1", "Block 2", "Tower A"];
const floors = ["Ground", "Floor 1", "Floor 2"];
const zones = ["Zone N", "Zone Z1", "Zone Z2"];
return (
<div className=" text-slate-100 font-sans my-15">
{/* --- 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">MASTER DATA</span>
<span className="text-slate-400">MASTER DATA</span>
</div>
{/* --- PAGE HEADER --- */}
@@ -40,7 +39,7 @@ export default function MasterDataPortal() {
<span className="text-[10px] uppercase font-mono tracking-wider text-slate-500 font-bold">
SITE & LOCATION
</span>
<button
<Button
onClick={() => setActiveTab("Block / Floor / Zone")}
className={`px-3 py-1.5 rounded-lg border text-xs font-semibold transition-all ${
activeTab === "Block / Floor / Zone"
@@ -49,7 +48,7 @@ export default function MasterDataPortal() {
}`}
>
Block / Floor / Zone
</button>
</Button>
</div>
{/* ASSETS */}
@@ -59,7 +58,7 @@ export default function MasterDataPortal() {
</span>
<div className="flex flex-wrap gap-2">
{["Manufacturer", "Service Provider", "Criticality"].map((item) => (
<button
<Button
key={item}
onClick={() => setActiveTab(item)}
className={`px-3 py-1.5 rounded-lg border text-xs transition-all ${
@@ -69,7 +68,7 @@ export default function MasterDataPortal() {
}`}
>
{item}
</button>
</Button>
))}
</div>
</div>
@@ -81,7 +80,7 @@ export default function MasterDataPortal() {
</span>
<div className="flex flex-wrap gap-2">
{["Service Type", "Unit", "Store", "Partners"].map((item) => (
<button
<Button
key={item}
onClick={() => setActiveTab(item)}
className={`px-3 py-1.5 rounded-lg border text-xs transition-all ${
@@ -91,7 +90,7 @@ export default function MasterDataPortal() {
}`}
>
{item}
</button>
</Button>
))}
</div>
</div>
@@ -103,7 +102,7 @@ export default function MasterDataPortal() {
</span>
<div className="flex flex-wrap gap-2">
{["Budget Category", "Budget Type"].map((item) => (
<button
<Button
key={item}
onClick={() => setActiveTab(item)}
className={`px-3 py-1.5 rounded-lg border text-xs transition-all ${
@@ -113,7 +112,7 @@ export default function MasterDataPortal() {
}`}
>
{item}
</button>
</Button>
))}
</div>
</div>
@@ -125,7 +124,7 @@ export default function MasterDataPortal() {
PEOPLE
</span>
<div>
<button
<Button
onClick={() => setActiveTab("Course")}
className={`px-3 py-1.5 rounded-lg border text-xs font-semibold transition-all ${
activeTab === "Course"
@@ -134,7 +133,7 @@ export default function MasterDataPortal() {
}`}
>
Course
</button>
</Button>
</div>
</div>
</div>
@@ -200,18 +199,18 @@ export default function MasterDataPortal() {
<span className="flex items-center gap-1 text-[10px] font-mono font-bold text-emerald-400 uppercase tracking-wider">
<span className="w-1.5 h-1.5 rounded-full bg-emerald-400"></span> ACTIVE
</span>
<button className="text-[11px] text-slate-400 border border-slate-800 bg-slate-900/60 hover:bg-slate-800 px-2.5 py-1 rounded-md transition-colors">
<Button className="text-[11px] text-slate-400 border border-slate-800 bg-slate-900/60 hover:bg-slate-800 px-2.5 py-1 rounded-md transition-colors">
Remove
</button>
</Button>
</div>
</div>
))}
</div>
</div>
<button className="mt-6 flex items-center gap-1.5 text-xs font-bold text-emerald-400 hover:text-emerald-300 transition-colors w-fit">
<Button className="mt-6 flex items-center gap-1.5 text-xs font-bold text-emerald-400 hover:text-emerald-300 transition-colors w-fit">
<Plus className="w-3.5 h-3.5 stroke-[3]" />
<span>Add floor</span>
</button>
</Button>
</div>
{/* Zone Column */}
@@ -229,22 +228,23 @@ export default function MasterDataPortal() {
<span className="flex items-center gap-1 text-[10px] font-mono font-bold text-emerald-400 uppercase tracking-wider">
<span className="w-1.5 h-1.5 rounded-full bg-emerald-400"></span> ACTIVE
</span>
<button className="text-[11px] text-slate-400 border border-slate-800 bg-slate-900/60 hover:bg-slate-800 px-2.5 py-1 rounded-md transition-colors">
<Button className="text-[11px] text-slate-400 border border-slate-800 bg-slate-900/60 hover:bg-slate-800 px-2.5 py-1 rounded-md transition-colors">
Remove
</button>
</Button>
</div>
</div>
))}
</div>
</div>
<button className="mt-6 flex items-center gap-1.5 text-xs font-bold text-emerald-400 hover:text-emerald-300 transition-colors w-fit">
<Button className="mt-6 flex items-center gap-1.5 text-xs font-bold text-emerald-400 hover:text-emerald-300 transition-colors w-fit">
<Plus className="w-3.5 h-3.5 stroke-[3]" />
<span>Add zone</span>
</button>
</Button>
</div>
</div>
</div>
);
}