Fix Tampilan User & Admin Menu Inovasi & Lingkungan

src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/_lib/layoutTabs.tsx

@@ -2,8 +2,9 @@
 'use client'
 import { usePathname, useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
-import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
+import { ScrollArea, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
 import { IconTrash, IconRecycle } from '@tabler/icons-react';
+import colors from '@/con/colors';
 
 function LayoutTabsPengelolaanSampahBankSampah({ children }: { children: React.ReactNode }) {
   const router = useRouter();
@@ -45,49 +46,75 @@ function LayoutTabsPengelolaanSampahBankSampah({ children }: { children: React.R
   }, [pathname]);
 
   return (
-    <Stack gap="md">
-      <Title order={3} mb="sm">Pengelolaan Sampah Bank Sampah</Title>
-      <Tabs 
-        value={activeTab} 
-        onChange={handleTabChange}
+    <Stack gap="lg">
+      <Title order={2} fw={700} style={{ color: "#1A1B1E" }}>
+        Pengelolaan Sampah Bank Sampah
+      </Title>
+
+      <Tabs
+        color={colors["blue-button"]}
         variant="pills"
-        radius="md"
+        value={activeTab}
+        onChange={handleTabChange}
+        radius="lg"
+        keepMounted={false}
       >
-        <TabsList>
-          {tabs.map((tab) => (
-            <Tooltip
-              key={tab.value}
-              label={tab.tooltip}
-              position="top"
-              withArrow
-              transitionProps={{ transition: 'pop', duration: 300 }}
-            >
-              <TabsTab 
-                value={tab.value}
-                leftSection={tab.icon}
-                style={{
-                  padding: '10px 20px',
-                  height: 'auto',
-                  minHeight: 44,
-                }}
+        {/* ✅ Scroll horizontal wrapper */}
+        <ScrollArea type="auto" offsetScrollbars>
+          <TabsList
+            p="sm"
+            style={{
+              background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
+              borderRadius: "1rem",
+              boxShadow: "inset 0 0 10px rgba(0,0,0,0.05)",
+              display: "flex",
+              flexWrap: "nowrap",
+              gap: "0.5rem",
+              paddingInline: "0.5rem",
+            }}
+          >
+            {tabs.map((tab, i) => (
+              <Tooltip
+                key={i}
+                label={tab.tooltip}
+                position="bottom"
+                withArrow
+                transitionProps={{ transition: 'pop', duration: 200 }}
               >
-                {tab.label}
-              </TabsTab>
-            </Tooltip>
-          ))}
-        </TabsList>
-        <TabsPanel 
-          value={activeTab || ''} 
-          pt="lg"
-          style={{
-            minHeight: '60vh',
-          }}
-        >
-          {children}
-        </TabsPanel>
+                <TabsTab
+                  value={tab.value}
+                  leftSection={tab.icon}
+                  style={{
+                    fontWeight: 600,
+                    fontSize: "0.9rem",
+                    transition: "all 0.2s ease",
+                  }}
+                >
+                  {tab.label}
+                </TabsTab>
+              </Tooltip>
+            ))}
+          </TabsList>
+        </ScrollArea>
+
+        {tabs.map((tab, i) => (
+          <TabsPanel
+            key={i}
+            value={tab.value}
+            style={{
+              padding: "1.5rem",
+              background: "linear-gradient(180deg, #ffffff, #f5f6fa)",
+              borderRadius: "1rem",
+              boxShadow: "0 4px 16px rgba(0,0,0,0.05)",
+              minHeight: "60vh",
+            }}
+          >
+            {children}
+          </TabsPanel>
+        ))}
       </Tabs>
     </Stack>
   );
 }
 
-export default LayoutTabsPengelolaanSampahBankSampah;
+export default LayoutTabsPengelolaanSampahBankSampah;