extracted terminal to a widget

src/apps/officer-web/Screens/Dashboard/Settings/ProfileSettings/index.tsx

@@ -3,12 +3,10 @@ import { Search, User, Lock, Globe, ListChecks, Palette } from 'lucide-react';
 import { Input } from '@/components/ui/input';
 import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@/components/ui/accordion';
 import { Card } from '@/components/Card';
-import { DashboardLayout } from '../../Layout';
 import { UserData } from './UserData';
 import { ChangePassword } from './ChangePassword';
 import { Languages } from './Languages';
 import { TaskDefaults } from './TaskDefaults';
-import { Appearance } from './Appearance';
 
 const sections = [
   {
@@ -19,11 +17,11 @@ const sections = [
     content: <UserData />,
   },
   {
-    key: 'appearance',
-    icon: Palette,
-    title: 'Appearance',
-    description: 'Color theme and light/dark mode.',
-    content: <Appearance />,
+    key: 'change-password',
+    icon: Lock,
+    title: 'Change Password',
+    description: 'Update your account password.',
+    content: <ChangePassword />,
   },
   {
     key: 'tasks',
@@ -39,13 +37,6 @@ const sections = [
     description: 'Set your spoken languages and translation preferences.',
     content: <Languages />,
   },
-  {
-    key: 'change-password',
-    icon: Lock,
-    title: 'Change Password',
-    description: 'Update your account password.',
-    content: <ChangePassword />,
-  },
 ];
 
 const allKeys = sections.map((s) => s.key);
@@ -71,42 +62,40 @@ export const ProfileSettings = () => {
   }, [search, matchingKeys]);
 
   return (
-    <DashboardLayout>
-      <div className="flex justify-center h-full px-4 py-8 overflow-y-auto">
-        <Card className="w-full max-w-2xl h-fit p-6">
-          <div className="relative mb-6">
-            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-duck-dark/40" />
-            <Input
-              placeholder="Search settings..."
-              value={search}
-              onChange={(ev) => setSearch(ev.target.value)}
-              className="pl-9"
-            />
-          </div>
+    <div className="flex justify-center h-full px-4 py-8 overflow-y-auto">
+      <Card className="w-full max-w-2xl h-fit p-6">
+        <div className="relative mb-6">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-duck-dark/40" />
+          <Input
+            placeholder="Search settings..."
+            value={search}
+            onChange={(ev) => setSearch(ev.target.value)}
+            className="pl-9"
+          />
+        </div>
 
-          <Accordion type="multiple" value={expanded} onValueChange={setExpanded}>
-            {sections.map((section) => (
-              <div
-                key={section.key}
-                ref={(el) => {
-                  sectionRefs.current[section.key] = el;
-                }}
-                className={search && !matchingKeys.includes(section.key) ? 'hidden' : ''}
-              >
-                <AccordionItem value={section.key}>
-                  <AccordionTrigger className="hover:no-underline">
-                    <div className="flex items-center gap-3">
-                      <section.icon className="h-5 w-5 text-duck-forest shrink-0" />
-                      <div className="text-base font-bold text-duck-dark">{section.title}</div>
-                    </div>
-                  </AccordionTrigger>
-                  <AccordionContent>{section.content}</AccordionContent>
-                </AccordionItem>
-              </div>
-            ))}
-          </Accordion>
-        </Card>
-      </div>
-    </DashboardLayout>
+        <Accordion type="multiple" value={expanded} onValueChange={setExpanded}>
+          {sections.map((section) => (
+            <div
+              key={section.key}
+              ref={(el) => {
+                sectionRefs.current[section.key] = el;
+              }}
+              className={search && !matchingKeys.includes(section.key) ? 'hidden' : ''}
+            >
+              <AccordionItem value={section.key}>
+                <AccordionTrigger className="hover:no-underline">
+                  <div className="flex items-center gap-3">
+                    <section.icon className="h-5 w-5 text-duck-forest shrink-0" />
+                    <div className="text-base font-bold text-duck-dark">{section.title}</div>
+                  </div>
+                </AccordionTrigger>
+                <AccordionContent>{section.content}</AccordionContent>
+              </AccordionItem>
+            </div>
+          ))}
+        </Accordion>
+      </Card>
+    </div>
   );
 };