307 lines
17 KiB
JavaScript
307 lines
17 KiB
JavaScript
import React, { useMemo } from 'react';
|
|
import { useNavigate, Link } from 'react-router-dom';
|
|
import {
|
|
Activity, Bell, Building2, KeyRound, Shield, User as UserIcon, Users,
|
|
ChevronRight, Sliders,
|
|
ShieldCheck, Server
|
|
} from 'lucide-react';
|
|
import { Toggle, toast } from '@/components/ds';
|
|
import { useAssistantPanel } from '@/components/ai-assistant';
|
|
import {
|
|
useJobPostings, usePreferences, useStaff, useUpdatePreferences,
|
|
} from '@/lib/krowHooks';
|
|
import { AdminPage } from '@/pages/admin/_shell';
|
|
|
|
/**
|
|
* Admin Settings — Full-width platform configuration control center.
|
|
*/
|
|
|
|
export default function AdminSettings() {
|
|
const navigate = useNavigate();
|
|
const preferences = usePreferences();
|
|
const updatePreferences = useUpdatePreferences();
|
|
const panel = useAssistantPanel();
|
|
|
|
const { data: postings = [] } = useJobPostings();
|
|
const { data: staff = [] } = useStaff();
|
|
|
|
const clientCount = useMemo(
|
|
() => new Set(postings.map((p) => p.company).filter(Boolean)).size,
|
|
[postings]
|
|
);
|
|
|
|
const setPreference = (key, value, message) => {
|
|
updatePreferences.mutate({ [key]: value });
|
|
toast.success(message);
|
|
};
|
|
|
|
return (
|
|
<AdminPage
|
|
title="Settings"
|
|
subtitle="Manage your account, organization and system configuration."
|
|
>
|
|
<div className="space-y-6 w-full">
|
|
{/* ── 1. Hero Banner (Full Width) ───────────────────────────────── */}
|
|
<div className="relative overflow-hidden rounded-3xl bg-gradient-to-r from-[#0838E0] via-[#1E40AF] to-[#0284C7] p-6 sm:p-8 text-white shadow-xl w-full">
|
|
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-white/15 via-transparent to-transparent pointer-events-none" />
|
|
<div className="relative z-10 flex flex-col md:flex-row md:items-center justify-between gap-6">
|
|
<div className="space-y-2">
|
|
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/20 backdrop-blur-md text-white text-[12px] font-semibold border border-white/30">
|
|
<Sliders className="w-3.5 h-3.5 text-sky-300" />
|
|
Workspace Control Center
|
|
</div>
|
|
<h1 className="text-2xl sm:text-3xl font-bold tracking-tight text-white">System Settings & Governance</h1>
|
|
<p className="text-[14px] text-blue-100 font-normal max-w-2xl">
|
|
Configure account credentials, access security policies, organizational workforce units, and system automation behavior.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-3 shrink-0">
|
|
<div className="bg-white/10 backdrop-blur-md rounded-2xl p-4 border border-white/15 min-w-[130px] text-center">
|
|
<p className="text-[11px] uppercase tracking-wider text-blue-200 font-semibold">Active Staff</p>
|
|
<p className="text-2xl font-bold text-white mt-0.5">{staff.length}</p>
|
|
<span className="text-[10px] text-blue-200">On Platform</span>
|
|
</div>
|
|
<div className="bg-white/10 backdrop-blur-md rounded-2xl p-4 border border-white/15 min-w-[130px] text-center">
|
|
<p className="text-[11px] uppercase tracking-wider text-blue-200 font-semibold">Positions</p>
|
|
<p className="text-2xl font-bold text-emerald-300 mt-0.5">{postings.length}</p>
|
|
<span className="text-[10px] text-blue-200">Active Roles</span>
|
|
</div>
|
|
<div className="bg-white/10 backdrop-blur-md rounded-2xl p-4 border border-white/15 min-w-[130px] text-center">
|
|
<p className="text-[11px] uppercase tracking-wider text-blue-200 font-semibold">Clients</p>
|
|
<p className="text-2xl font-bold text-sky-300 mt-0.5">{clientCount}</p>
|
|
<span className="text-[10px] text-blue-200">Organizations</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* ── 2. Two-Column Full Width Grid ─────────────────────────────── */}
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 w-full">
|
|
{/* ── Left Column: Account & Organization ─────────────────────── */}
|
|
<div className="space-y-6">
|
|
{/* Account & Security Card */}
|
|
<div className="bg-white rounded-2xl border border-[#E0E4EA] p-6 shadow-xs space-y-4">
|
|
<div className="flex items-center justify-between border-b border-[#E0E4EA] pb-3">
|
|
<div className="flex items-center gap-2">
|
|
<UserIcon className="w-5 h-5 text-[#0838E0]" />
|
|
<h2 className="text-[16px] font-bold text-[#101820]">Account & Security</h2>
|
|
</div>
|
|
<span className="text-[12px] font-semibold text-[#0838E0] bg-blue-50 px-2.5 py-0.5 rounded-full border border-blue-200/60">
|
|
Personal Credentials
|
|
</span>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
<Link
|
|
to="/admin/profile"
|
|
className="group p-4 rounded-xl border border-[#E0E4EA] bg-white hover:bg-[#F8F8F8] hover:border-[#0838E0]/40 hover:shadow-xs transition-all flex items-start gap-3.5"
|
|
>
|
|
<div className="w-10 h-10 rounded-xl bg-blue-50 text-[#0838E0] flex items-center justify-center shrink-0 group-hover:scale-105 transition-transform">
|
|
<UserIcon className="w-5 h-5" />
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center justify-between">
|
|
<p className="text-[14px] font-bold text-[#101820] group-hover:text-[#0838E0] transition-colors">Profile Details</p>
|
|
<ChevronRight className="w-4 h-4 text-[#8B94A5] group-hover:text-[#0838E0] group-hover:translate-x-0.5 transition-all" />
|
|
</div>
|
|
<p className="text-[12px] text-[#687386] mt-1 leading-relaxed">Your name, email address, and platform identity information.</p>
|
|
</div>
|
|
</Link>
|
|
|
|
<Link
|
|
to="/admin/profile#security"
|
|
className="group p-4 rounded-xl border border-[#E0E4EA] bg-white hover:bg-[#F8F8F8] hover:border-purple-300 hover:shadow-xs transition-all flex items-start gap-3.5"
|
|
>
|
|
<div className="w-10 h-10 rounded-xl bg-purple-50 text-purple-600 flex items-center justify-center shrink-0 group-hover:scale-105 transition-transform">
|
|
<KeyRound className="w-5 h-5" />
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center justify-between">
|
|
<p className="text-[14px] font-bold text-[#101820] group-hover:text-purple-600 transition-colors">Security & 2FA</p>
|
|
<ChevronRight className="w-4 h-4 text-[#8B94A5] group-hover:text-purple-600 group-hover:translate-x-0.5 transition-all" />
|
|
</div>
|
|
<p className="text-[12px] text-[#687386] mt-1 leading-relaxed">Password management, two-factor authentication and active sessions.</p>
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Organization Management Card */}
|
|
<div className="bg-white rounded-2xl border border-[#E0E4EA] p-6 shadow-xs space-y-4">
|
|
<div className="flex items-center justify-between border-b border-[#E0E4EA] pb-3">
|
|
<div className="flex items-center gap-2">
|
|
<Building2 className="w-5 h-5 text-indigo-600" />
|
|
<h2 className="text-[16px] font-bold text-[#101820]">Organization Structure</h2>
|
|
</div>
|
|
<span className="text-[12px] font-semibold text-indigo-600 bg-indigo-50 px-2.5 py-0.5 rounded-full border border-indigo-200/60">
|
|
Workforce Operations
|
|
</span>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
<Link
|
|
to="/admin/positions"
|
|
className="group p-4 rounded-xl border border-[#E0E4EA] bg-white hover:bg-[#F8F8F8] hover:border-indigo-300 hover:shadow-xs transition-all flex items-start gap-3.5"
|
|
>
|
|
<div className="w-10 h-10 rounded-xl bg-indigo-50 text-indigo-600 flex items-center justify-center shrink-0 group-hover:scale-105 transition-transform">
|
|
<Building2 className="w-5 h-5" />
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center justify-between">
|
|
<p className="text-[14px] font-bold text-[#101820] group-hover:text-indigo-600 transition-colors">Clients & Positions</p>
|
|
<ChevronRight className="w-4 h-4 text-[#8B94A5] group-hover:text-indigo-600 group-hover:translate-x-0.5 transition-all" />
|
|
</div>
|
|
<p className="text-[12px] text-[#687386] mt-1 leading-relaxed">Companies and active positions currently being staffed.</p>
|
|
<div className="mt-2.5">
|
|
<span className="inline-flex items-center gap-1 text-[11px] font-semibold text-indigo-700 bg-indigo-50 px-2.5 py-0.5 rounded-md">
|
|
{clientCount} clients · {postings.length} positions
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
|
|
<Link
|
|
to="/admin/profile#perms"
|
|
className="group p-4 rounded-xl border border-[#E0E4EA] bg-white hover:bg-[#F8F8F8] hover:border-emerald-300 hover:shadow-xs transition-all flex items-start gap-3.5"
|
|
>
|
|
<div className="w-10 h-10 rounded-xl bg-emerald-50 text-[#16A765] flex items-center justify-center shrink-0 group-hover:scale-105 transition-transform">
|
|
<Users className="w-5 h-5" />
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center justify-between">
|
|
<p className="text-[14px] font-bold text-[#101820] group-hover:text-[#16A765] transition-colors">Users & Permissions</p>
|
|
<ChevronRight className="w-4 h-4 text-[#8B94A5] group-hover:text-[#16A765] group-hover:translate-x-0.5 transition-all" />
|
|
</div>
|
|
<p className="text-[12px] text-[#687386] mt-1 leading-relaxed">Platform user roles and administrative permission scopes.</p>
|
|
<div className="mt-2.5">
|
|
<span className="inline-flex items-center gap-1 text-[11px] font-semibold text-emerald-700 bg-emerald-50 px-2.5 py-0.5 rounded-md">
|
|
{staff.length} on staff
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Audit Log Banner */}
|
|
<Link
|
|
to="/admin/activity"
|
|
className="group p-5 rounded-2xl border border-[#E0E4EA] bg-white hover:bg-[#F8F8F8] hover:border-amber-300 hover:shadow-xs transition-all flex items-center justify-between gap-4"
|
|
>
|
|
<div className="flex items-center gap-4">
|
|
<div className="w-12 h-12 rounded-xl bg-amber-50 text-amber-600 flex items-center justify-center shrink-0 group-hover:scale-105 transition-transform">
|
|
<Activity className="w-6 h-6" />
|
|
</div>
|
|
<div>
|
|
<p className="text-[15px] font-bold text-[#101820] group-hover:text-amber-600 transition-colors">Audit & System Activity Log</p>
|
|
<p className="text-[12px] text-[#687386] mt-0.5">Review all platform administrative actions, login events and security logs.</p>
|
|
</div>
|
|
</div>
|
|
<ChevronRight className="w-5 h-5 text-[#8B94A5] group-hover:text-amber-600 group-hover:translate-x-0.5 transition-all" />
|
|
</Link>
|
|
</div>
|
|
|
|
{/* ── Right Column: System Preferences & Governance ──────────────── */}
|
|
<div className="space-y-6">
|
|
{/* System Preferences Card */}
|
|
<div className="bg-white rounded-2xl border border-[#E0E4EA] p-6 shadow-xs space-y-5">
|
|
<div className="flex items-center justify-between border-b border-[#E0E4EA] pb-3">
|
|
<div className="flex items-center gap-2">
|
|
<Sliders className="w-5 h-5 text-amber-600" />
|
|
<h2 className="text-[16px] font-bold text-[#101820]">Workspace Preferences</h2>
|
|
</div>
|
|
<span className="text-[12px] font-semibold text-amber-700 bg-amber-50 px-2.5 py-0.5 rounded-full border border-amber-200/60">
|
|
Automation Controls
|
|
</span>
|
|
</div>
|
|
|
|
<div className="p-5 rounded-xl border border-[#E0E4EA] bg-[#F8F8F8]/50 space-y-4">
|
|
<div className="flex items-center gap-2 pb-1">
|
|
<Bell className="w-4 h-4 text-[#0838E0]" />
|
|
<p className="text-[13px] font-bold text-[#101820]">Account Behaviors & Notifications</p>
|
|
</div>
|
|
|
|
<div className="space-y-4 divide-y divide-[#E0E4EA] pt-1">
|
|
<div className="pt-3 first:pt-0">
|
|
<Toggle
|
|
label="Owliver Workspace Assistant"
|
|
description="Open the AI contextual panel by default on supported admin pages"
|
|
checked={preferences.owliverDefault}
|
|
onCheckedChange={(v) => {
|
|
if (v) panel.open(); else panel.close();
|
|
setPreference(
|
|
'owliverDefault', v,
|
|
v ? 'Owliver opens by default' : 'Owliver stays collapsed'
|
|
);
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div className="pt-3">
|
|
<Toggle
|
|
label="Compact UI Density"
|
|
description="Tighter table row spacing for high-density monitoring"
|
|
checked={preferences.compactDensity}
|
|
onCheckedChange={(v) => setPreference(
|
|
'compactDensity', v,
|
|
v ? 'Compact density on' : 'Standard density restored'
|
|
)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="pt-3">
|
|
<Toggle
|
|
label="Daily Executive Email Digest"
|
|
description="Automated daily summary of platform applications and actions"
|
|
checked={preferences.emailDigest}
|
|
onCheckedChange={(v) => setPreference(
|
|
'emailDigest', v,
|
|
v ? 'Daily digest on' : 'Daily digest off'
|
|
)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Governance & Environment Note Card */}
|
|
<div className="bg-white rounded-2xl border border-[#E0E4EA] p-6 shadow-xs space-y-4">
|
|
<div className="flex items-center gap-2 border-b border-[#E0E4EA] pb-3">
|
|
<Server className="w-5 h-5 text-[#0838E0]" />
|
|
<h2 className="text-[16px] font-bold text-[#101820]">Environment & Compliance</h2>
|
|
</div>
|
|
|
|
<dl className="space-y-3 text-[13px]">
|
|
<div className="flex justify-between items-center border-b border-[#F1F4F7] pb-2.5">
|
|
<dt className="text-[#687386] font-medium">Environment</dt>
|
|
<dd className="font-semibold text-[#101820] flex items-center gap-1.5">
|
|
<span className="w-2 h-2 rounded-full bg-[#16A765]" /> Production (Live)
|
|
</dd>
|
|
</div>
|
|
<div className="flex justify-between items-center border-b border-[#F1F4F7] pb-2.5">
|
|
<dt className="text-[#687386] font-medium">Workspace Isolation</dt>
|
|
<dd className="font-semibold text-[#101820]">Enterprise Tenant #1042</dd>
|
|
</div>
|
|
<div className="flex justify-between items-center">
|
|
<dt className="text-[#687386] font-medium">Security Standard</dt>
|
|
<dd className="font-semibold text-[#16A765] inline-flex items-center gap-1">
|
|
<ShieldCheck className="w-3.5 h-3.5" /> SOC-2 Type II
|
|
</dd>
|
|
</div>
|
|
</dl>
|
|
|
|
<div className="pt-1">
|
|
<div className="flex items-center gap-2 p-3.5 rounded-xl bg-blue-50/60 border border-blue-200/50 text-[#0838E0] text-[12px] font-medium leading-relaxed">
|
|
<Shield className="w-4 h-4 shrink-0 text-[#0838E0]" />
|
|
<span>Administrator configurations apply across this entire workspace environment.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</AdminPage>
|
|
);
|
|
}
|