Configure Completed is added
This commit is contained in:
360
components/dashboard/configure/settings.tsx
Normal file
360
components/dashboard/configure/settings.tsx
Normal file
@@ -0,0 +1,360 @@
|
||||
"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 flex-col md:flex-row md:items-center md:justify-between gap-4 mb-6">
|
||||
<div>
|
||||
<div className="text-xs uppercase tracking-wider text-slate-400 mb-2 font-medium">
|
||||
<span className="hover:text-slate-200 cursor-pointer">
|
||||
APPLE ONE — HQ TOWER
|
||||
</span>{" "}
|
||||
• <span className="hover:text-slate-200 cursor-pointer">CONFIGURE</span>{" "}
|
||||
• <span className="text-slate-300">SETTINGS</span>
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-white mb-1">Settings</h1>
|
||||
<p className="text-slate-400 text-sm">
|
||||
Personal and notification preferences for this tenant workspace.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Save Changes Button */}
|
||||
<div>
|
||||
<button className="bg-[#2DD4BF] hover:bg-[#26b8a5] text-[#070D19] font-semibold text-sm px-5 py-2.5 rounded-lg transition-colors shadow-sm">
|
||||
Save changes
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 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
|
||||
value={appSettings.defaultTenant}
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user