354 lines
15 KiB
TypeScript
354 lines
15 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState } from "react";
|
|
|
|
export default function SettingsPortal() {
|
|
// App Settings State
|
|
const [appSettings, setAppSettings] = useState({
|
|
defaultTenant: "Apple One",
|
|
timeZone: "Asia/Kolkata (IST)",
|
|
dateFormat: "dd-mm-yyyy",
|
|
currency: "₹ INR",
|
|
language: "English",
|
|
appearance: "Light",
|
|
});
|
|
|
|
// Notifications State
|
|
const [notifications, setNotifications] = useState({
|
|
emailAlerts: true,
|
|
pushNotifications: true,
|
|
slaBreachAlerts: true,
|
|
workPermitAlerts: true,
|
|
dailyDigest: false,
|
|
});
|
|
|
|
|
|
return (
|
|
<div className="my-15 text-slate-200 font-sans">
|
|
{/* Top Header & Breadcrumb */}
|
|
<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-400">CONFIGURE</span>
|
|
<span className="text-slate-600">•</span>
|
|
<span className="text-slate-400">SETTINGS</span>
|
|
</div>
|
|
|
|
{/* --- PAGE HEADER --- */}
|
|
<h1 className="text-2xl font-bold text-white tracking-tight mt-1">
|
|
Settings
|
|
</h1>
|
|
<p className="text-sm font-medium text-slate-400 mt-2 max-w-2xl leading-relaxed">
|
|
Personal and notification preferences for this tenant workspace.
|
|
</p>
|
|
|
|
|
|
{/* Main Grid Layout */}
|
|
<div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
|
|
{/* Left Column: App Settings */}
|
|
<div className="lg:col-span-7 border border-slate-800/80 rounded-xl overflow-hidden shadow-2xl backdrop-blur-sm">
|
|
<div className="flex items-center justify-between px-6 py-4 border-b border-slate-800/60 bg-[#0E1733]/40">
|
|
<h2 className="text-base font-semibold text-white">App settings</h2>
|
|
<span className="text-xs text-slate-400">Apple One</span>
|
|
</div>
|
|
|
|
<div className="divide-y divide-slate-800/50 px-6 text-sm">
|
|
{/* Default Tenant */}
|
|
<div className="py-4 flex flex-col sm:flex-row sm:items-center justify-between gap-2">
|
|
<div>
|
|
<p className="font-semibold text-slate-100">Default tenant</p>
|
|
<p className="text-xs text-slate-400">Workspace loaded on sign-in</p>
|
|
</div>
|
|
<select
|
|
|
|
|
|
className="bg-[#080E21] border border-slate-700/80 text-slate-200 text-xs rounded-lg px-3 py-2 w-full sm:w-48 focus:outline-none focus:border-[#2DD4BF] cursor-pointer"
|
|
>
|
|
<option value="Apple One">Apple One</option>
|
|
</select>
|
|
</div>
|
|
|
|
{/* Time Zone */}
|
|
<div className="py-4 flex flex-col sm:flex-row sm:items-center justify-between gap-2">
|
|
<div>
|
|
<p className="font-semibold text-slate-100">Time zone</p>
|
|
<p className="text-xs text-slate-400">
|
|
Used for timestamps & SLA clocks
|
|
</p>
|
|
</div>
|
|
<select
|
|
value={appSettings.timeZone}
|
|
|
|
className="bg-[#080E21] border border-slate-700/80 text-slate-200 text-xs rounded-lg px-3 py-2 w-full sm:w-48 focus:outline-none focus:border-[#2DD4BF] cursor-pointer"
|
|
>
|
|
<option value="Asia/Kolkata (IST)">Asia/Kolkata (IST)</option>
|
|
<option value="UTC">UTC</option>
|
|
</select>
|
|
</div>
|
|
|
|
{/* Date Format */}
|
|
<div className="py-4 flex flex-col sm:flex-row sm:items-center justify-between gap-2">
|
|
<div>
|
|
<p className="font-semibold text-slate-100">Date format</p>
|
|
<p className="text-xs text-slate-400">
|
|
Display format across the app
|
|
</p>
|
|
</div>
|
|
<select
|
|
value={appSettings.dateFormat}
|
|
|
|
className="bg-[#080E21] border border-slate-700/80 text-slate-200 text-xs rounded-lg px-3 py-2 w-full sm:w-48 focus:outline-none focus:border-[#2DD4BF] cursor-pointer"
|
|
>
|
|
<option value="dd-mm-yyyy">dd-mm-yyyy</option>
|
|
<option value="mm-dd-yyyy">mm-dd-yyyy</option>
|
|
</select>
|
|
</div>
|
|
|
|
{/* Currency */}
|
|
<div className="py-4 flex flex-col sm:flex-row sm:items-center justify-between gap-2">
|
|
<div>
|
|
<p className="font-semibold text-slate-100">Currency</p>
|
|
<p className="text-xs text-slate-400">Inventory, AMC & cost figures</p>
|
|
</div>
|
|
<select
|
|
value={appSettings.currency}
|
|
|
|
className="bg-[#080E21] border border-slate-700/80 text-slate-200 text-xs rounded-lg px-3 py-2 w-full sm:w-48 focus:outline-none focus:border-[#2DD4BF] cursor-pointer"
|
|
>
|
|
<option value="₹ INR">₹ INR</option>
|
|
<option value="$ USD">$ USD</option>
|
|
</select>
|
|
</div>
|
|
|
|
{/* Language */}
|
|
<div className="py-4 flex flex-col sm:flex-row sm:items-center justify-between gap-2">
|
|
<div>
|
|
<p className="font-semibold text-slate-100">Language</p>
|
|
<p className="text-xs text-slate-400">Interface language</p>
|
|
</div>
|
|
<select
|
|
value={appSettings.language}
|
|
|
|
className="bg-[#080E21] border border-slate-700/80 text-slate-200 text-xs rounded-lg px-3 py-2 w-full sm:w-48 focus:outline-none focus:border-[#2DD4BF] cursor-pointer"
|
|
>
|
|
<option value="English">English</option>
|
|
</select>
|
|
</div>
|
|
|
|
{/* Appearance */}
|
|
<div className="py-4 flex flex-col sm:flex-row sm:items-center justify-between gap-2">
|
|
<div>
|
|
<p className="font-semibold text-slate-100">Appearance</p>
|
|
<p className="text-xs text-slate-400">
|
|
Your personal light / dark preference
|
|
</p>
|
|
</div>
|
|
<select
|
|
value={appSettings.appearance}
|
|
|
|
className="bg-[#080E21] border border-slate-700/80 text-slate-200 text-xs rounded-lg px-3 py-2 w-full sm:w-48 focus:outline-none focus:border-[#2DD4BF] cursor-pointer"
|
|
>
|
|
<option value="Light">Light</option>
|
|
<option value="Dark">Dark</option>
|
|
</select>
|
|
</div>
|
|
|
|
{/* Brand Accent */}
|
|
<div className="py-4 flex flex-col sm:flex-row sm:items-center justify-between gap-2">
|
|
<div>
|
|
<p className="font-semibold text-slate-100">Brand accent</p>
|
|
<p className="text-xs text-slate-400">
|
|
Set per tenant in Administration → Preferences
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center space-x-2 text-xs font-mono text-slate-400">
|
|
<span className="w-5 h-5 rounded bg-[#2DD4BF] border border-slate-600 inline-block" />
|
|
<span>#2DD4BF</span>
|
|
<span>• inherited</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right Column: Notifications & Personal Settings */}
|
|
<div className="lg:col-span-5 space-y-6">
|
|
{/* Notifications Card */}
|
|
<div className="bg-[#0B132B]/80 border border-slate-800/80 rounded-xl overflow-hidden shadow-2xl backdrop-blur-sm">
|
|
<div className="px-6 py-4 border-b border-slate-800/60 bg-[#0E1733]/40">
|
|
<h2 className="text-base font-semibold text-white">Notifications</h2>
|
|
</div>
|
|
|
|
<div className="divide-y divide-slate-800/50 px-6 text-sm">
|
|
{/* Email Alerts */}
|
|
<div className="py-3.5 flex items-center justify-between">
|
|
<div>
|
|
<p className="font-semibold text-slate-100">Email alerts</p>
|
|
<p className="text-xs text-slate-400">
|
|
Request, approval & escalation emails
|
|
</p>
|
|
</div>
|
|
<button
|
|
|
|
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
|
|
notifications.emailAlerts ? "bg-[#2DD4BF]" : "bg-slate-700"
|
|
}`}
|
|
>
|
|
<span
|
|
className={`inline-block h-4 w-4 transform rounded-full bg-slate-900 transition-transform ${
|
|
notifications.emailAlerts ? "translate-x-6" : "translate-x-1"
|
|
}`}
|
|
/>
|
|
</button>
|
|
</div>
|
|
|
|
{/* Push Notifications */}
|
|
<div className="py-3.5 flex items-center justify-between">
|
|
<div>
|
|
<p className="font-semibold text-slate-100">Push notifications</p>
|
|
<p className="text-xs text-slate-400">
|
|
Mobile app push for assignments
|
|
</p>
|
|
</div>
|
|
<button
|
|
|
|
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
|
|
notifications.pushNotifications ? "bg-[#2DD4BF]" : "bg-slate-700"
|
|
}`}
|
|
>
|
|
<span
|
|
className={`inline-block h-4 w-4 transform rounded-full bg-slate-900 transition-transform ${
|
|
notifications.pushNotifications ? "translate-x-6" : "translate-x-1"
|
|
}`}
|
|
/>
|
|
</button>
|
|
</div>
|
|
|
|
{/* SLA Breach Alerts */}
|
|
<div className="py-3.5 flex items-center justify-between">
|
|
<div>
|
|
<p className="font-semibold text-slate-100">SLA breach alerts</p>
|
|
<p className="text-xs text-slate-400">
|
|
Notify when a request goes overdue
|
|
</p>
|
|
</div>
|
|
<button
|
|
|
|
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
|
|
notifications.slaBreachAlerts ? "bg-[#2DD4BF]" : "bg-slate-700"
|
|
}`}
|
|
>
|
|
<span
|
|
className={`inline-block h-4 w-4 transform rounded-full bg-slate-900 transition-transform ${
|
|
notifications.slaBreachAlerts ? "translate-x-6" : "translate-x-1"
|
|
}`}
|
|
/>
|
|
</button>
|
|
</div>
|
|
|
|
{/* Work-permit Alerts */}
|
|
<div className="py-3.5 flex items-center justify-between">
|
|
<div>
|
|
<p className="font-semibold text-slate-100">Work-permit alerts</p>
|
|
<p className="text-xs text-slate-400">
|
|
Notify on permit raise & approval
|
|
</p>
|
|
</div>
|
|
<button
|
|
|
|
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
|
|
notifications.workPermitAlerts ? "bg-[#2DD4BF]" : "bg-slate-700"
|
|
}`}
|
|
>
|
|
<span
|
|
className={`inline-block h-4 w-4 transform rounded-full bg-slate-900 transition-transform ${
|
|
notifications.workPermitAlerts ? "translate-x-6" : "translate-x-1"
|
|
}`}
|
|
/>
|
|
</button>
|
|
</div>
|
|
|
|
{/* Daily Digest */}
|
|
<div className="py-3.5 flex items-center justify-between">
|
|
<div>
|
|
<p className="font-semibold text-slate-100">Daily digest</p>
|
|
<p className="text-xs text-slate-400">
|
|
Morning summary of open items
|
|
</p>
|
|
</div>
|
|
<button
|
|
|
|
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
|
|
notifications.dailyDigest ? "bg-[#2DD4BF]" : "bg-slate-700"
|
|
}`}
|
|
>
|
|
<span
|
|
className={`inline-block h-4 w-4 transform rounded-full bg-slate-900 transition-transform ${
|
|
notifications.dailyDigest ? "translate-x-6" : "translate-x-1"
|
|
}`}
|
|
/>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Personal Settings Card */}
|
|
<div className="bg-[#0B132B]/80 border border-slate-800/80 rounded-xl overflow-hidden shadow-2xl backdrop-blur-sm">
|
|
<div className="px-6 py-4 border-b border-slate-800/60 bg-[#0E1733]/40">
|
|
<h2 className="text-base font-semibold text-white">Personal settings</h2>
|
|
</div>
|
|
|
|
<div className="p-6 space-y-4 text-xs font-mono">
|
|
<div className="flex items-center">
|
|
<span className="w-24 uppercase tracking-wider text-slate-400 font-sans text-[11px]">
|
|
NAME
|
|
</span>
|
|
<span className="text-slate-100 font-sans text-sm font-semibold">
|
|
Dhananjay T.
|
|
</span>
|
|
</div>
|
|
|
|
<div className="flex items-center">
|
|
<span className="w-24 uppercase tracking-wider text-slate-400 font-sans text-[11px]">
|
|
ROLE
|
|
</span>
|
|
<div className="flex items-center space-x-2">
|
|
<span className="text-slate-100 font-sans text-sm font-semibold">
|
|
Admin
|
|
</span>
|
|
<span className="inline-flex items-center space-x-1 px-2 py-0.5 rounded-full text-[10px] font-sans font-semibold bg-emerald-950/80 border border-emerald-800 text-emerald-400">
|
|
<span className="h-1.5 w-1.5 rounded-full bg-emerald-400" />
|
|
<span>COMPLETED</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center">
|
|
<span className="w-24 uppercase tracking-wider text-slate-400 font-sans text-[11px]">
|
|
EMAIL
|
|
</span>
|
|
<span className="text-slate-200">dhananjay@kafm.io</span>
|
|
</div>
|
|
|
|
<div className="flex items-center">
|
|
<span className="w-24 uppercase tracking-wider text-slate-400 font-sans text-[11px]">
|
|
MOBILE
|
|
</span>
|
|
<span className="text-slate-200">98•••••012</span>
|
|
</div>
|
|
|
|
{/* Action Buttons */}
|
|
<div className="pt-4 flex items-center space-x-4 font-sans">
|
|
<button className="px-4 py-2 bg-[#080E21] hover:bg-slate-800 border border-slate-700/80 rounded-lg text-slate-200 text-xs font-medium transition-colors">
|
|
Edit profile
|
|
</button>
|
|
<button className="text-slate-400 hover:text-slate-200 text-xs font-medium transition-colors">
|
|
Change password
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |