Files
platform/src/apps/officer-web/Screens/Dashboard/Settings/ProfileSettings/index.tsx
T
2026-02-22 00:05:29 +00:00

53 lines
1.8 KiB
TypeScript

import { useMemo } from 'react';
import { User, Lock, Globe, ListChecks } from 'lucide-react';
import type { LayoutNode, PanelComponents } from '@/components/Workspace';
import { WorkspaceLayout } from '@/components/Workspace';
import { createSettingsPanelComponents, type SettingsSection } from '../SettingsPanel';
import { UserData } from './UserData';
import { ChangePassword } from './ChangePassword';
import { Languages } from './Languages';
import { TaskDefaults } from './TaskDefaults';
const GLOBAL_KEY = 'PROFILE_SETTINGS_SELECTED';
const sections: SettingsSection[] = [
{ key: 'profile', icon: User, title: 'Profile', description: 'Avatar, name, and email', content: <UserData /> },
{ key: 'change-password', icon: Lock, title: 'Change Password', description: 'Update your password', content: <ChangePassword /> },
{ key: 'tasks', icon: ListChecks, title: 'Task Defaults', description: 'Default model for tasks', content: <TaskDefaults /> },
{ key: 'languages', icon: Globe, title: 'Languages', description: 'Spoken, default, and translation', content: <Languages /> },
];
const { Sidebar, Content } = createSettingsPanelComponents({
globalKey: GLOBAL_KEY,
sidebarIcon: User,
sidebarLabel: 'Profile',
sections,
});
const layout: LayoutNode = {
type: 'group',
id: 'profile-root',
direction: 'horizontal',
children: [
{ node: { type: 'panel', id: 'profile-left', appType: null }, size: 20 },
{ node: { type: 'panel', id: 'profile-right', appType: null }, size: 80 },
],
};
export const ProfileSettings = () => {
const panelComponents: PanelComponents = useMemo(
() => ({
'profile-left': Sidebar,
'profile-right': Content,
}),
[],
);
return (
<div className="h-full w-full pt-2">
<WorkspaceLayout layout={layout} onLayoutChange={() => {}} components={panelComponents} />
</div>
);
};