Changes done in ui screens
This commit is contained in:
@@ -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>
|
||||
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user