Admin part is added and navbar context file is added
This commit is contained in:
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user