ensure the tabs are below the header in sms section

Author: slubwama

src/pages/system-admin/sms-settings/sms-settings-wrapper.component.tsx

@@ -13,6 +13,8 @@ import {
 } from '@carbon/react/icons';
 import SMSSettingsContent from './sms-settings.component';
 import SmsLogsContent from './sms-logs.component';
+import Illustration from './sms-settings-illustration.component';
+import { Header } from '../shared-components';
 import styles from './sms-settings.scss';
 
 interface SMSWrapperProps {
@@ -24,28 +26,34 @@ const SMSWrapper: React.FC<SMSWrapperProps> = () => {
   const [selectedIndex, setSelectedIndex] = useState(0);
 
   return (
-    <div className={styles.smsSettingsWrapper}>
-      <Tabs selectedIndex={selectedIndex} onChange={({ selectedIndex }) => setSelectedIndex(selectedIndex)}>
-        <TabList aria-label="SMS management tabs">
-          <Tab>
-            <Settings className={styles.tabIcon} />
-            {t('settings', 'Settings')}
-          </Tab>
-          <Tab>
-            <Document className={styles.tabIcon} />
-            {t('logs', 'Logs')}
-          </Tab>
-        </TabList>
-        <TabPanels>
-          <TabPanel>
-            <SMSSettingsContent />
-          </TabPanel>
-          <TabPanel>
-            {selectedIndex === 1 && <SmsLogsContent />}
-          </TabPanel>
-        </TabPanels>
-      </Tabs>
-    </div>
+    <>
+      <Header
+        illustrationComponent={<Illustration />}
+        title={t('sms', 'SMS')}
+      />
+      <div className={styles.smsSettingsWrapper}>
+        <Tabs selectedIndex={selectedIndex} onChange={({ selectedIndex }) => setSelectedIndex(selectedIndex)}>
+          <TabList aria-label="SMS management tabs">
+            <Tab>
+              <Settings className={styles.tabIcon} />
+              {t('settings', 'Settings')}
+            </Tab>
+            <Tab>
+              <Document className={styles.tabIcon} />
+              {t('logs', 'Logs')}
+            </Tab>
+          </TabList>
+          <TabPanels>
+            <TabPanel>
+              <SMSSettingsContent />
+            </TabPanel>
+            <TabPanel>
+              {selectedIndex === 1 && <SmsLogsContent />}
+            </TabPanel>
+          </TabPanels>
+        </Tabs>
+      </div>
+    </>
   );
 };
 

src/pages/system-admin/sms-settings/sms-settings.component.tsx

@@ -16,9 +16,6 @@ import {
   Save,
   Link,
   Information,
-  Checkmark,
-  Warning,
-  Time,
 } from '@carbon/react/icons';
 import {
   showNotification,
@@ -31,18 +28,9 @@ import {
   testSMSConnection,
 } from './sms-settings.resources';
 import { type SMSSettings } from './sms-settings.types';
-import Illustration from './sms-settings-illustration.component';
-import { Header } from '../shared-components';
 import styles from './sms-settings.scss';
 
-interface SMSSettingsContentProps {
-  backButton?: {
-    label: string;
-    onClick: () => void;
-  };
-}
-
-const SMSSettingsContent: React.FC<SMSSettingsContentProps> = ({ backButton }) => {
+const SMSSettingsContent: React.FC = () => {
   const { t } = useTranslation();
   const isTablet = useLayoutType() === 'tablet';
   const { smsSettings, isLoading, isError, mutate } = useSMSSettings();
@@ -133,15 +121,8 @@ const SMSSettingsContent: React.FC<SMSSettingsContentProps> = ({ backButton }) =
   }
 
   return (
-    <>
-      <Header
-        illustrationComponent={<Illustration />}
-        title={t('sms', 'SMS')}
-        backButton={backButton}
-      />
-      <div className={styles.smsSettingsContent}>
-        <div className={styles.settingsContainer}>
-        {/* Appointment Reminder Settings */}
+    <div className={styles.smsSettingsContent}>
+      <div className={styles.settingsContainer}>
         <Tile className={styles.settingsSection}>
           <div className={styles.sectionHeader}>
             <div>
@@ -213,7 +194,6 @@ const SMSSettingsContent: React.FC<SMSSettingsContentProps> = ({ backButton }) =
           </Layer>
         </Tile>
 
-        {/* SMS Server Configuration */}
         <Tile className={styles.settingsSection}>
           <div className={styles.sectionHeader}>
             <div>
@@ -295,7 +275,6 @@ const SMSSettingsContent: React.FC<SMSSettingsContentProps> = ({ backButton }) =
           </div>
         </Tile>
 
-        {/* Advanced Configuration */}
         <Tile className={styles.settingsSection}>
           <div className={styles.sectionHeader}>
             <div>
@@ -337,7 +316,6 @@ const SMSSettingsContent: React.FC<SMSSettingsContentProps> = ({ backButton }) =
           </Layer>
         </Tile>
 
-        {/* Save Actions */}
         <div className={styles.actionsBar}>
           <Button
             kind="primary"
@@ -348,9 +326,8 @@ const SMSSettingsContent: React.FC<SMSSettingsContentProps> = ({ backButton }) =
             {isSaving ? t('saving', 'Saving...') : t('saveSettings', 'Save Settings')}
           </Button>
         </div>
-        </div>
       </div>
-    </>
+    </div>
   );
 };
 

src/pages/system-admin/system-admin.component.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
 import {
   Connect,
   Settings,
@@ -15,63 +16,64 @@ import styles from './system-admin.scss';
 
 const SystemAdminDashboard: React.FC = () => {
   const { t } = useTranslation();
+  const navigate = useNavigate();
 
   const navItems = [
     {
       id: 'sync-profiles',
       label: t('syncProfiles', 'Sync Profiles'),
       description: t('syncProfilesDesc', 'Configure and manage FHIR sync profiles'),
       icon: Connect,
-      path: '/system-admin/sync-profiles',
+      path: '/sync-profiles',
     },
     {
       id: 'sync-task-types',
       label: t('syncTaskTypes', 'Sync Task Types'),
       description: t('syncTaskTypesDesc', 'Manage sync task types and view execution history'),
       icon: Settings,
-      path: '/system-admin/sync-task-types',
+      path: '/sync-task-types',
     },
     {
       id: 'schedule-tasks',
       label: t('scheduleTaskManager', 'Schedule Task Manager'),
       description: t('scheduleTaskManagerDesc', 'Schedule and automate recurring tasks'),
       icon: Calendar,
-      path: '/system-admin/schedule-tasks',
+      path: '/schedule-tasks',
     },
     {
       id: 'cohort-management',
       label: t('cohortManagement', 'Cohort Management'),
       description: t('cohortManagementDesc', 'Manage DSD refill groups and patient enrollment'),
       icon: Group,
-      path: '/system-admin/cohort-management',
+      path: '/cohort-management',
     },
     {
       id: 'viral-load-upload',
       label: t('viralLoadUpload', 'Viral Load Upload'),
       description: t('viralLoadUploadDesc', 'Upload viral load test results from CPHL'),
       icon: Upload,
-      path: '/system-admin/viral-load-upload',
+      path: '/viral-load-upload',
     },
     {
       id: 'sms-settings',
       label: t('sms', 'SMS'),
       description: t('smsDesc', 'Configure SMS gateway and view sent message logs'),
       icon: Mobile,
-      path: '/system-admin/sms-settings',
+      path: '/sms-settings',
     },
     {
       id: 'system-upgrades',
       label: t('systemUpgrades', 'System Updates & Upgrades'),
       description: t('systemUpgradesDesc', 'Execute system upgrades and update EMR components'),
       icon: Renew,
-      path: '/system-admin/system-upgrades',
+      path: '/system-upgrades',
     },
     {
       id: 'about-systems',
       label: t('aboutSystems', 'About Systems'),
       description: t('aboutSystemsDesc', 'View system information, version details, and facility code'),
       icon: Information,
-      path: '/system-admin/about-systems',
+      path: '/about-systems',
     },
   ];
 
@@ -85,18 +87,18 @@ const SystemAdminDashboard: React.FC = () => {
         {navItems.map((item) => {
           const Icon = item.icon;
           return (
-            <a
+            <button
               key={item.id}
               className={styles.dashboardCard}
-              href={item.path}
+              onClick={() => navigate(item.path)}
             >
               <div className={styles.cardIcon}>
                 <Icon size={32} />
               </div>
               <h3>{item.label}</h3>
               <p>{item.description}</p>
               <ChevronRight size={20} className={styles.cardArrow} />
-            </a>
+            </button>
           );
         })}
       </div>

src/pages/system-admin/system-admin.scss

@@ -28,8 +28,9 @@
   border: 1px solid #e0e0e0;
   border-radius: 8px;
   padding: 1.5rem;
-  text-decoration: none;
+  text-align: left;
   color: inherit;
+  cursor: pointer;
   transition: all 0.2s ease;
   position: relative;