Krow/krow_talent_app
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update Owliver language and suggestions

Browse Source
This commit is contained in:
Aravind
2026-10-07 19:15:44 +05:30
parent 8ac4e1ee88
commit 81e5979f8f
156 changed files with 7330 additions and 1755 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
src/pages/admin/Profile.tsx
View File

@@ -13,12 +13,14 @@ import { AdminPage } from '@/components/admin/PageShell';
import { endAdminSession } from '@/lib/admin/session';
import { PERMISSIONS } from '@/lib/admin/permissions';
import { SkillSurface } from '@/components/skills/SkillSurface';
import { useTranslation } from 'react-i18next';
/**
* Admin Profile — Premium enterprise account & security control center.
*/
export default function AdminProfile() {
const { t } = useTranslation();
const navigate = useNavigate();
const { data: user } = useCurrentUser();
const updateProfile = useUpdateProfile();
@@ -89,8 +91,8 @@ export default function AdminProfile() {
return (
<AdminPage
title="Admin Profile"
subtitle="Manage your platform credentials, system permissions and security governance."
title={t('profile.adminProfile')}
subtitle={t('profile.manageYourPlatformCredentialsSystemPermissions')}
/* Three buttons need 295px; a 320px phone has 273 after the page gutters,
so the row wraps instead of pushing Sign Out off the edge. */
actions={
@@ -101,21 +103,21 @@ export default function AdminProfile() {
>
<SkillSurface page="profile" placement="after-header" />
<SettingsIcon className="w-4 h-4 text-[#687386]" />
Settings
{t('profile.settings')}
</button>
<button
onClick={() => setEditOpen(true)}
className="inline-flex items-center gap-1.5 px-4 py-2 rounded-xl bg-[#0838E0] hover:bg-[#062BAF] text-white text-[13px] font-semibold transition-all shadow-md shadow-blue-500/20 hover:scale-[1.02]"
>
<Pencil className="w-4 h-4" />
Edit Profile
{t('profile.editProfile')}
</button>
<button
onClick={() => { endAdminSession(); base44.auth.logout('/admin/login'); }}
className="inline-flex items-center gap-1.5 px-3.5 py-2 rounded-xl bg-red-50 hover:bg-red-100 text-red-600 border border-red-200/60 text-[13px] font-semibold transition-all"
>
<LogOut className="w-4 h-4" />
Sign Out
{t('profile.signOut')}
</button>
</div>
}
@@ -150,7 +152,7 @@ export default function AdminProfile() {
<h1 className="text-2xl sm:text-3xl font-bold tracking-tight text-white">{fullName}</h1>
<span className="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full bg-white/20 backdrop-blur-md text-white text-[11px] font-semibold border border-white/30">
<ShieldCheck className="w-3.5 h-3.5 text-sky-300" />
Verified Admin
{t('profile.verifiedAdmin')}
</span>
</div>
<p className="text-[14px] text-blue-100 font-normal">{email}</p>
@@ -158,16 +160,16 @@ export default function AdminProfile() {
<div className="flex items-center gap-2 pt-1 flex-wrap">
<span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-lg bg-white/10 backdrop-blur-md text-white text-[12px] font-medium border border-white/20">
<Shield className="w-3.5 h-3.5 text-yellow-300" />
Platform Administrator
{t('profile.platformAdministrator')}
</span>
<span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-lg bg-[#16A765]/20 backdrop-blur-md text-emerald-200 text-[12px] font-semibold border border-[#16A765]/40">
<span className="w-2 h-2 rounded-full bg-[#16A765] animate-ping shrink-0" />
Active · Verified
{t('profile.activeVerified')}
</span>
{twoFactor && (
<span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-lg bg-purple-500/20 backdrop-blur-md text-purple-200 text-[12px] font-medium border border-purple-400/30">
<Zap className="w-3.5 h-3.5 text-purple-300" />
2FA Protected
{t('profile.2faProtected')}
</span>
)}
</div>
@@ -177,14 +179,14 @@ export default function AdminProfile() {
{/* Quick stats in Hero */}
<div className="flex flex-wrap items-center gap-3 border-t md:border-t-0 md:border-l md:flex-nowrap border-white/20 pt-4 md:pt-0 md:pl-6">
<div className="flex-1 md:flex-none 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">Scopes</p>
<p className="text-[11px] uppercase tracking-wider text-blue-200 font-semibold">{t('profile.scopes')}</p>
<p className="text-2xl font-bold text-white mt-0.5">{PERMISSIONS.length}</p>
<span className="text-[10px] text-blue-200">Full Control</span>
<span className="text-[10px] text-blue-200">{t('profile.fullControl')}</span>
</div>
<div className="flex-1 md:flex-none 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">Security Level</p>
<p className="text-2xl font-bold text-emerald-300 mt-0.5">Tier 1</p>
<span className="text-[10px] text-blue-200">Max Privileges</span>
<p className="text-[11px] uppercase tracking-wider text-blue-200 font-semibold">{t('profile.securityLevel')}</p>
<p className="text-2xl font-bold text-emerald-300 mt-0.5">{t('profile.tier1')}</p>
<span className="text-[10px] text-blue-200">{t('profile.maxPrivileges')}</span>
</div>
</div>
</div>
@@ -194,46 +196,46 @@ export default function AdminProfile() {
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
<div className="bg-white rounded-2xl border border-[#E0E4EA] p-4 shadow-xs hover:shadow-md transition-all group">
<div className="flex items-center justify-between mb-2">
<span className="text-[11px] font-bold uppercase tracking-wider text-[#687386]">System Role</span>
<span className="text-[11px] font-bold uppercase tracking-wider text-[#687386]">{t('profile.systemRole')}</span>
<div className="w-8 h-8 rounded-xl bg-blue-50 text-[#0838E0] flex items-center justify-center group-hover:scale-110 transition-transform">
<Shield className="w-4 h-4" />
</div>
</div>
<p className="text-[15px] font-bold text-[#101820]">Platform Administrator</p>
<p className="text-[12px] text-[#687386] mt-0.5">Full System Governance</p>
<p className="text-[15px] font-bold text-[#101820]">{t('profile.platformAdministrator')}</p>
<p className="text-[12px] text-[#687386] mt-0.5">{t('profile.fullSystemGovernance')}</p>
</div>
<div className="bg-white rounded-2xl border border-[#E0E4EA] p-4 shadow-xs hover:shadow-md transition-all group">
<div className="flex items-center justify-between mb-2">
<span className="text-[11px] font-bold uppercase tracking-wider text-[#687386]">Department</span>
<span className="text-[11px] font-bold uppercase tracking-wider text-[#687386]">{t('profile.department')}</span>
<div className="w-8 h-8 rounded-xl bg-indigo-50 text-indigo-600 flex items-center justify-center group-hover:scale-110 transition-transform">
<Building2 className="w-4 h-4" />
</div>
</div>
<p className="text-[15px] font-bold text-[#101820]">Workforce Operations</p>
<p className="text-[12px] text-[#687386] mt-0.5">Enterprise Management</p>
<p className="text-[15px] font-bold text-[#101820]">{t('profile.workforceOperations')}</p>
<p className="text-[12px] text-[#687386] mt-0.5">{t('profile.enterpriseManagement')}</p>
</div>
<div className="bg-white rounded-2xl border border-[#E0E4EA] p-4 shadow-xs hover:shadow-md transition-all group">
<div className="flex items-center justify-between mb-2">
<span className="text-[11px] font-bold uppercase tracking-wider text-[#687386]">Account Status</span>
<span className="text-[11px] font-bold uppercase tracking-wider text-[#687386]">{t('profile.accountStatus')}</span>
<div className="w-8 h-8 rounded-xl bg-emerald-50 text-[#16A765] flex items-center justify-center group-hover:scale-110 transition-transform">
<ShieldCheck className="w-4 h-4" />
</div>
</div>
<p className="text-[15px] font-bold text-[#101820]">Active · Verified</p>
<p className="text-[12px] text-[#16A765] font-medium mt-0.5">All services active</p>
<p className="text-[15px] font-bold text-[#101820]">{t('profile.activeVerified')}</p>
<p className="text-[12px] text-[#16A765] font-medium mt-0.5">{t('profile.allServicesActive')}</p>
</div>
<div className="bg-white rounded-2xl border border-[#E0E4EA] p-4 shadow-xs hover:shadow-md transition-all group">
<div className="flex items-center justify-between mb-2">
<span className="text-[11px] font-bold uppercase tracking-wider text-[#687386]">Member Since</span>
<span className="text-[11px] font-bold uppercase tracking-wider text-[#687386]">{t('profile.memberSince')}</span>
<div className="w-8 h-8 rounded-xl bg-violet-50 text-violet-600 flex items-center justify-center group-hover:scale-110 transition-transform">
<Clock className="w-4 h-4" />
</div>
</div>
<p className="text-[15px] font-bold text-[#101820]">{memberSince}</p>
<p className="text-[12px] text-[#687386] mt-0.5">Authenticated Account</p>
<p className="text-[12px] text-[#687386] mt-0.5">{t('profile.authenticatedAccount')}</p>
</div>
</div>
@@ -248,12 +250,12 @@ export default function AdminProfile() {
<div>
<h2 className="text-[16px] font-bold text-[#101820] flex items-center gap-2">
<Key className="w-4 h-4 text-[#0838E0]" />
Access & Scope Permissions
{t('profile.accessScopePermissions')}
</h2>
<p className="text-[13px] text-[#687386]">Operational scopes granted to your administrative account.</p>
<p className="text-[13px] text-[#687386]">{t('profile.operationalScopesGrantedToYourAdministrative')}</p>
</div>
<span className="px-3 py-1 rounded-full bg-blue-50 text-[#0838E0] text-[12px] font-semibold border border-blue-200/60">
{PERMISSIONS.length} Active Scopes
{PERMISSIONS.length} {t('profile.activeScopes')}
</span>
</div>
@@ -274,12 +276,12 @@ export default function AdminProfile() {
{isFull ? (
<span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-[#EAF8F0] text-[#16A765] text-[12px] font-bold border border-[#16A765]/30">
<CheckCircle2 className="w-3.5 h-3.5" />
Full Access
{t('profile.fullAccess')}
</span>
) : (
<span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-[#E8F0F8] text-[#0838E0] text-[12px] font-bold border border-[#0838E0]/20">
<Eye className="w-3.5 h-3.5" />
Read Only
{t('profile.readOnly')}
</span>
)}
</div>
@@ -295,12 +297,12 @@ export default function AdminProfile() {
<div>
<h2 className="text-[16px] font-bold text-[#101820] flex items-center gap-2">
<Activity className="w-4 h-4 text-[#0838E0]" />
Recent Account Activity
{t('profile.recentAccountActivity')}
</h2>
<p className="text-[13px] text-[#687386]">Audit log of administrative actions performed on your profile.</p>
<p className="text-[13px] text-[#687386]">{t('profile.auditLogOfAdministrativeActionsPerformed')}</p>
</div>
<span className="px-3 py-1 rounded-full bg-[#F8F8F8] text-[#687386] text-[12px] font-medium border border-[#E0E4EA]">
{myActivity.length} Events Logged
{myActivity.length} {t('profile.eventsLogged')}
</span>
</div>
@@ -326,7 +328,7 @@ export default function AdminProfile() {
) : (
<div className="text-center py-8 bg-[#F8F8F8] rounded-xl border border-dashed border-[#E0E4EA]">
<Activity className="w-8 h-8 text-[#8B94A5] mx-auto mb-2" />
<p className="text-[13px] text-[#687386]">No recent activity recorded for this account.</p>
<p className="text-[13px] text-[#687386]">{t('profile.noRecentActivityRecordedForThis')}</p>
</div>
)}
</div>
@@ -339,29 +341,29 @@ export default function AdminProfile() {
<div id="security" className="bg-white rounded-2xl border border-[#E0E4EA] p-6 shadow-xs space-y-5">
<div className="flex items-center gap-2 border-b border-[#E0E4EA] pb-3">
<ShieldCheck className="w-5 h-5 text-[#0838E0]" />
<h2 className="text-[16px] font-bold text-[#101820]">Security & 2FA</h2>
<h2 className="text-[16px] font-bold text-[#101820]">{t('profile.security2fa')}</h2>
</div>
{/* Last Sign-In */}
<div className="p-3.5 rounded-xl bg-[#F8F8F8] border border-[#E0E4EA]">
<div className="flex items-center justify-between">
<span className="text-[11px] font-bold uppercase tracking-wider text-[#687386]">Last Sign-in</span>
<span className="text-[11px] font-bold uppercase tracking-wider text-[#687386]">{t('profile.lastSignIn')}</span>
<span className="inline-flex items-center gap-1 text-[11px] font-medium text-[#16A765] bg-[#EAF8F0] px-2 py-0.5 rounded-full">
<span className="w-1.5 h-1.5 rounded-full bg-[#16A765]" />
Active Device
{t('profile.activeDevice')}
</span>
</div>
<p className="text-[14px] font-bold text-[#101820] mt-1">
{new Date().toLocaleString(undefined, { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' })}
</p>
<p className="text-[12px] text-[#687386] mt-0.5">IP: 10.24.11.86 · {deviceLabel}</p>
<p className="text-[12px] text-[#687386] mt-0.5">{t('profile.ip10241186')} {deviceLabel}</p>
</div>
{/* 2FA Toggle */}
<div className="p-3.5 rounded-xl border border-[#E0E4EA] bg-white">
<Toggle
label="Two-Factor Authentication"
description="Require code verification for all admin logins"
label={t('profile.twoFactorAuthentication')}
description={t('profile.requireCodeVerificationForAllAdmin')}
checked={twoFactor}
onCheckedChange={(v) => {
setTwoFactor(v);
@@ -377,14 +379,14 @@ export default function AdminProfile() {
className="w-full flex items-center justify-center gap-2 px-4 py-2.5 rounded-xl border border-[#E0E4EA] bg-white hover:bg-[#F8F8F8] text-[#101820] text-[13px] font-semibold transition-all shadow-xs"
>
<KeyRound className="w-4 h-4 text-[#0838E0]" />
Change Password
{t('profile.changePassword')}
</button>
<button
onClick={() => toast.info('Session management is active for this device.')}
className="w-full flex items-center justify-center gap-2 px-4 py-2.5 rounded-xl border border-[#E0E4EA] bg-white hover:bg-[#F8F8F8] text-[#101820] text-[13px] font-semibold transition-all shadow-xs"
>
<Smartphone className="w-4 h-4 text-[#687386]" />
Manage Active Sessions
{t('profile.manageActiveSessions')}
</button>
</div>
@@ -392,7 +394,7 @@ export default function AdminProfile() {
<div className="flex items-start gap-2.5 p-3 rounded-xl bg-amber-50/80 border border-amber-200/60 text-amber-900 text-[12px] leading-relaxed">
<AlertCircle className="w-4 h-4 text-amber-600 shrink-0 mt-0.5" />
<p>
Password last changed <strong>42 days ago</strong>. Administrator credentials expire every 90 days.
{t('profile.passwordLastChanged')} <strong>{t('profile.42DaysAgo')}</strong>{t('profile.administratorCredentialsExpireEvery90Days')}
</p>
</div>
</div>
@@ -401,33 +403,33 @@ export default function AdminProfile() {
<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">
<Laptop className="w-5 h-5 text-[#0838E0]" />
<h2 className="text-[16px] font-bold text-[#101820]">Current Active Session</h2>
<h2 className="text-[16px] font-bold text-[#101820]">{t('profile.currentActiveSession')}</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">Session Started</dt>
<dt className="text-[#687386] font-medium">{t('profile.sessionStarted')}</dt>
<dd className="font-semibold text-[#101820]">{sessionStarted}</dd>
</div>
<div className="flex justify-between items-center border-b border-[#F1F4F7] pb-2.5">
<dt className="text-[#687386] font-medium">Session Type</dt>
<dd className="font-semibold text-[#101820]">Browser Tab</dd>
<dt className="text-[#687386] font-medium">{t('profile.sessionType')}</dt>
<dd className="font-semibold text-[#101820]">{t('profile.browserTab')}</dd>
</div>
<div className="flex justify-between items-center border-b border-[#F1F4F7] pb-2.5">
<dt className="text-[#687386] font-medium">Platform / OS</dt>
<dt className="text-[#687386] font-medium">{t('profile.platformOs')}</dt>
<dd className="font-semibold text-[#101820]">{deviceLabel}</dd>
</div>
<div className="flex justify-between items-center">
<dt className="text-[#687386] font-medium">Token Security</dt>
<dt className="text-[#687386] font-medium">{t('profile.tokenSecurity')}</dt>
<dd className="font-semibold text-[#16A765] inline-flex items-center gap-1">
<Lock className="w-3.5 h-3.5" /> Encrypted
<Lock className="w-3.5 h-3.5" /> {t('profile.encrypted')}
</dd>
</div>
</dl>
<div className="pt-2">
<p className="text-[11px] text-[#8B94A5] leading-relaxed bg-[#F8F8F8] p-3 rounded-xl border border-[#E0E4EA]">
Administrator sessions expire automatically on browser close to enforce zero-trust security.
{t('profile.administratorSessionsExpireAutomaticallyOnBrowser')}
</p>
</div>
</div>
@@ -438,20 +440,20 @@ export default function AdminProfile() {
<Modal
open={editOpen}
onOpenChange={setEditOpen}
title="Edit Admin Profile"
description="Update your display name and administrative credentials."
title={t('profile.editAdminProfile')}
description={t('profile.updateYourDisplayNameAndAdministrative')}
icon={Pencil}
size="sm"
busy={saving}
footer={
<>
<Button variant="outline" onClick={() => setEditOpen(false)} disabled={saving}>Cancel</Button>
<Button onClick={save} loading={saving}>Save Changes</Button>
<Button variant="outline" onClick={() => setEditOpen(false)} disabled={saving}>{t('profile.cancel')}</Button>
<Button onClick={save} loading={saving}>{t('profile.saveChanges')}</Button>
</>
}
>
<div className="space-y-4">
<Field label="Full Name" required error={nameError}>
<Field label={t('profile.fullName')} required error={nameError}>
<Input
value={form.full_name}
onChange={(e) => {
@@ -460,7 +462,7 @@ export default function AdminProfile() {
}}
/>
</Field>
<Field label="Email Address" hint="Email changes require system verification.">
<Field label={t('profile.emailAddress')} hint={t('profile.emailChangesRequireSystemVerification')}>
<Input value={form.email} readOnly disabled />
</Field>
</div>
@@ -470,25 +472,25 @@ export default function AdminProfile() {
<Modal
open={passwordOpen}
onOpenChange={setPasswordOpen}
title="Change Password"
description="Update your administrator login password."
title={t('profile.changePassword')}
description={t('profile.updateYourAdministratorLoginPassword')}
icon={KeyRound}
size="sm"
footer={
<>
<Button variant="outline" onClick={() => setPasswordOpen(false)}>Cancel</Button>
<Button variant="outline" onClick={() => setPasswordOpen(false)}>{t('profile.cancel')}</Button>
<Button onClick={() => { setPasswordOpen(false); toast.success('Password updated'); }}>
Update Password
{t('profile.updatePassword')}
</Button>
</>
}
>
<div className="space-y-4">
<Field label="Current Password"><Input type="password" autoComplete="current-password" /></Field>
<Field label="New Password" hint="At least 12 characters, with numbers and symbols.">
<Field label={t('profile.currentPassword')}><Input type="password" autoComplete="current-password" /></Field>
<Field label={t('profile.newPassword')} hint={t('profile.atLeast12CharactersWithNumbers')}>
<Input type="password" autoComplete="new-password" />
</Field>
<Field label="Confirm New Password"><Input type="password" autoComplete="new-password" /></Field>
<Field label={t('profile.confirmNewPassword')}><Input type="password" autoComplete="new-password" /></Field>
</div>
</Modal>
</div>