position ui and owliver update
This commit is contained in:
306
src/pages/admin/Settings.jsx
Normal file
306
src/pages/admin/Settings.jsx
Normal file
@@ -0,0 +1,306 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user