@umituz/web-dashboard 3.1.6 → 3.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/web-dashboard",
-  "version": "3.1.6",
+  "version": "3.1.8",
   "description": "Dashboard Layout System - Comprehensive analytics, calendar, customizable layouts, and config-based architecture",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/domains/analytics/components/AnalyticsChart.tsx

@@ -145,7 +145,7 @@ export const AnalyticsChart = ({ config, className, height }: AnalyticsChartProp
               innerRadius={config.type === "donut" ? 40 : 0}
               dataKey="value"
             >
-              {config.data.map((entry, index: number) => (
+              {config.data.map((entry: any, index: number) => (
                 <Cell key={`cell-${index}`} fill={colors[index % colors.length]} />
               ))}
             </Pie>

package/src/domains/analytics/hooks/useAnalytics.ts

@@ -2,10 +2,9 @@
  * useAnalytics Hook
  *
  * Core analytics hook for fetching and managing analytics data
- * Enhanced with config support and advanced analytics services
  */
 
-import { useState, useCallback, useEffect, useMemo } from "react";
+import { useState, useCallback, useEffect } from "react";
 import type {
   KPIs,
   TimeSeriesData,
@@ -14,8 +13,6 @@ import type {
   AnalyticsExportOptions,
 } from "../types/analytics";
 import { createKPI } from "../utils/analytics";
-import { analyticsEngineService, performanceService } from "../services";
-import type { DashboardConfig } from "../../../domain/config";
 
 interface UseAnalyticsOptions {
   /** Analytics API base URL */
@@ -24,10 +21,6 @@ interface UseAnalyticsOptions {
   initialDateRange?: DateRangeValue;
   /** Auto-refresh interval in ms (0 to disable) */
   refreshInterval?: number;
-  /** Dashboard configuration */
-  config?: DashboardConfig;
-  /** Error callback */
-  onError?: (error: Error) => void;
 }
 
 interface AnalyticsData {
@@ -50,19 +43,7 @@ interface AnalyticsData {
  * @returns Analytics data and actions
  */
 export function useAnalytics(options: UseAnalyticsOptions = {}) {
-  const {
-    apiUrl = "/api/analytics",
-    initialDateRange,
-    refreshInterval = 0,
-    config,
-    onError,
-  } = options;
-
-  // Apply config defaults
-  const effectiveRefreshInterval = useMemo(
-    () => refreshInterval || config?.data?.refreshInterval || 0,
-    [refreshInterval, config]
-  );
+  const { apiUrl = "/api/analytics", initialDateRange, refreshInterval = 0 } = options;
 
   // State
   const [dateRange, setDateRange] = useState<DateRangeValue>(
@@ -181,81 +162,11 @@ export function useAnalytics(options: UseAnalyticsOptions = {}) {
 
   // Auto-refresh
   useEffect(() => {
-    if (effectiveRefreshInterval > 0) {
-      const interval = setInterval(fetchAnalytics, effectiveRefreshInterval);
+    if (refreshInterval > 0) {
+      const interval = setInterval(fetchAnalytics, refreshInterval);
       return () => clearInterval(interval);
     }
-  }, [fetchAnalytics, effectiveRefreshInterval]);
-
-  // Advanced analytics methods
-  const calculateRetention = useCallback(
-    (userData: import("../services/AnalyticsEngineService").UserData[]) => {
-      try {
-        return analyticsEngineService.calculateRetention(userData);
-      } catch (err) {
-        onError?.(err as Error);
-        return [];
-      }
-    },
-    [onError]
-  );
-
-  const calculateFunnel = useCallback(
-    (data: import("../services/AnalyticsEngineService").FunnelItem[], steps: string[]) => {
-      try {
-        return analyticsEngineService.calculateFunnel(data, steps);
-      } catch (err) {
-        onError?.(err as Error);
-        return null;
-      }
-    },
-    [onError]
-  );
-
-  const segmentUsers = useCallback(
-    (userData: import("../services/AnalyticsEngineService").UserData[]) => {
-      try {
-        return analyticsEngineService.segmentUsers(userData);
-      } catch (err) {
-        onError?.(err as Error);
-        return [];
-      }
-    },
-    [onError]
-  );
-
-  const predictUserBehavior = useCallback(
-    (user: Record<string, unknown>, historicalData: import("../services/AnalyticsEngineService").UserData[]) => {
-      try {
-        return analyticsEngineService.predictUserBehavior(user, historicalData);
-      } catch (err) {
-        onError?.(err as Error);
-        return null;
-      }
-    },
-    [onError]
-  );
-
-  const getPerformanceMetrics = useCallback(() => {
-    try {
-      return performanceService.getDashboardMetrics();
-    } catch (err) {
-      onError?.(err as Error);
-      return null;
-    }
-  }, [onError]);
-
-  const getRealtimeMetrics = useCallback(
-    (previous?: import("../services/PerformanceService").RealtimeMetrics) => {
-      try {
-        return performanceService.simulateRealtimeMetrics(previous);
-      } catch (err) {
-        onError?.(err as Error);
-        return null;
-      }
-    },
-    [onError]
-  );
+  }, [fetchAnalytics, refreshInterval]);
 
   return {
     ...data,
@@ -263,12 +174,5 @@ export function useAnalytics(options: UseAnalyticsOptions = {}) {
     updateDateRange,
     refresh,
     exportData,
-    // Advanced analytics
-    calculateRetention,
-    calculateFunnel,
-    segmentUsers,
-    predictUserBehavior,
-    getPerformanceMetrics,
-    getRealtimeMetrics,
   };
 }

package/src/domains/analytics/index.ts

@@ -17,26 +17,6 @@ export {
   useAnalytics,
 } from "./hooks";
 
-// Services
-export {
-  AnalyticsEngineService,
-  analyticsEngineService,
-  PerformanceService,
-  performanceService,
-} from "./services";
-export type {
-  ConversionPath,
-  HeatmapData,
-  UserBehaviorPrediction,
-  UserData,
-  ConversionData,
-  FunnelItem,
-  ActivityItem,
-  PerformanceMetric,
-  DashboardMetrics,
-  RealtimeMetrics,
-} from "./services";
-
 // Utils
 export {
   formatNumber,

package/src/domains/analytics/utils/analytics.ts

@@ -219,7 +219,7 @@ export function getDateRangePresets(): DateRangePreset[] {
 export function aggregateByPeriod(
   data: Array<{ date: string; [key: string]: number | string }>,
   period: "day" | "week" | "month" = "day"
-): Array<{ date: string; [key: string]: string | number }> {
+): Array<{ date: string; [key: string]: number }> {
   const grouped = new Map<string, Array<typeof data[0]>>();
 
   data.forEach((item) => {
@@ -244,14 +244,13 @@ export function aggregateByPeriod(
   });
 
   return Array.from(grouped.entries()).map(([date, items]) => {
-    const aggregated: { date: string; [key: string]: string | number } = { date };
+    const aggregated: any = { date };
 
     // Sum all numeric fields
     items.forEach((item) => {
       Object.entries(item).forEach(([key, value]) => {
         if (key !== "date" && typeof value === "number") {
-          const currentValue = aggregated[key];
-          aggregated[key] = typeof currentValue === "number" ? currentValue + value : value;
+          aggregated[key] = (aggregated[key] || 0) + value;
         }
       });
     });

package/src/domains/auth/components/LoginForm.tsx

@@ -19,6 +19,7 @@ export const LoginForm = ({
   showForgotPassword = true,
   showRegisterLink = true,
   showSocialLogin,
+  onLoginAttempt,
   onLoginSuccess,
   onLoginError,
   onGoogleLogin,
@@ -47,20 +48,26 @@ export const LoginForm = ({
     setIsLoading(true);
 
     try {
-      // In production, call your auth API
-      // const user = await login({ email, password });
+      let user: { id: string; email: string; name?: string };
 
-      // Simulate API call
-      await new Promise((resolve) => setTimeout(resolve, 1000));
+      // Use custom login handler if provided (real auth), otherwise use mock auth
+      if (onLoginAttempt) {
+        // Real authentication flow
+        user = await onLoginAttempt({ email, password });
+      } else {
+        // Mock authentication flow (for development/demo)
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+        user = {
+          id: "1",
+          email,
+          name: email.split("@")[0],
+        };
+      }
 
-      // Success
-      const mockUser = {
-        id: "1",
-        email,
-        name: email.split("@")[0],
-      };
+      // Call success callback
+      await onLoginSuccess?.(user);
 
-      await onLoginSuccess?.(mockUser);
+      // Navigate to after-login route
       navigate(config.afterLoginRoute);
     } catch (err) {
       const errorMessage = err instanceof Error ? err.message : "Login failed";

package/src/domains/auth/components/RegisterForm.tsx

@@ -19,6 +19,7 @@ export const RegisterForm = ({
   showLoginLink = true,
   requirePasswordConfirm = true,
   showSocialLogin,
+  onRegisterAttempt,
   onRegisterSuccess,
   onRegisterError,
   onGoogleLogin,
@@ -61,20 +62,26 @@ export const RegisterForm = ({
     setIsLoading(true);
 
     try {
-      // In production, call your auth API
-      // const user = await register({ email, password, name, metadata });
+      let user: { id: string; email: string; name?: string };
 
-      // Simulate API call
-      await new Promise((resolve) => setTimeout(resolve, 1000));
+      // Use custom register handler if provided (real auth), otherwise use mock auth
+      if (onRegisterAttempt) {
+        // Real authentication flow
+        user = await onRegisterAttempt({ email, password, name });
+      } else {
+        // Mock authentication flow (for development/demo)
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+        user = {
+          id: "1",
+          email,
+          name: name || email.split("@")[0],
+        };
+      }
 
-      // Success
-      const mockUser = {
-        id: "1",
-        email,
-        name: name || email.split("@")[0],
-      };
+      // Call success callback
+      await onRegisterSuccess?.(user);
 
-      await onRegisterSuccess?.(mockUser);
+      // Navigate to after-login route
       navigate(config.afterLoginRoute);
     } catch (err) {
       const errorMessage = err instanceof Error ? err.message : "Registration failed";

package/src/domains/auth/types/auth.ts

@@ -24,8 +24,6 @@ export interface RegisterData {
   email: string;
   /** Password */
   password: string;
-  /** Password confirmation */
-  confirmPassword?: string;
   /** Full name */
   name?: string;
   /** Additional user data */
@@ -93,9 +91,9 @@ export interface User {
  */
 export interface AuthActions {
   /** Login with email/password */
-  login: (credentials: LoginCredentials) => Promise<User>;
+  login: (credentials: LoginCredentials) => Promise<void>;
   /** Register new account */
-  register: (data: RegisterData) => Promise<User>;
+  register: (data: RegisterData) => Promise<void>;
   /** Logout current user */
   logout: () => Promise<void>;
   /** Send password reset email */
@@ -105,7 +103,7 @@ export interface AuthActions {
   /** Update user profile */
   updateProfile: (data: Partial<User>) => Promise<void>;
   /** Refresh authentication session */
-  refresh: () => Promise<User | null>;
+  refresh: () => Promise<void>;
 }
 
 /**
@@ -214,7 +212,9 @@ export interface LoginFormProps {
   showRegisterLink?: boolean;
   /** Show social login buttons */
   showSocialLogin?: boolean;
-  /** On successful login */
+  /** Custom login handler (receives credentials, returns user) - overrides mock auth */
+  onLoginAttempt?: (credentials: LoginCredentials) => Promise<User>;
+  /** On successful login (called after onLoginAttempt or mock auth succeeds) */
   onLoginSuccess?: (user: User) => void | Promise<void>;
   /** On login error */
   onLoginError?: (error: string) => void;
@@ -240,7 +240,9 @@ export interface RegisterFormProps {
   requirePasswordConfirm?: boolean;
   /** Show social login buttons */
   showSocialLogin?: boolean;
-  /** On successful registration */
+  /** Custom register handler (receives register data, returns user) - overrides mock auth */
+  onRegisterAttempt?: (data: RegisterData) => Promise<User>;
+  /** On successful registration (called after onRegisterAttempt or mock auth succeeds) */
   onRegisterSuccess?: (user: User) => void | Promise<void>;
   /** On registration error */
   onRegisterError?: (error: string) => void;

package/src/domains/auth/utils/auth.ts

@@ -195,7 +195,7 @@ export function isEmailVerified(user: User | null): boolean {
  * @returns Formatted date string or empty string
  */
 export function formatUserCreatedAt(user: User | null, locale: string = "en-US"): string {
-  if (!user || !user.createdAt) return "";
+  if (!user.createdAt) return "";
   return new Date(user.createdAt).toLocaleDateString(locale, {
     year: "numeric",
     month: "long",

package/src/domains/billing/components/BillingPortal.tsx

@@ -11,7 +11,7 @@ import type { BillingPortalProps } from "../types/billing";
 import { UsageCard } from "./UsageCard";
 import { PaymentMethodsList } from "./PaymentMethodsList";
 import { InvoiceCard } from "./InvoiceCard";
-import { getDaysRemaining, getStatusColor, getStatusLabel, formatPrice, getPlanPrice } from "../utils/billing";
+import { getDaysRemaining, getStatusColor, getStatusLabel, formatPrice } from "../utils/billing";
 
 export const BillingPortal = ({
   billing,

package/src/domains/billing/hooks/useBilling.ts

@@ -22,14 +22,6 @@ interface UseBillingOptions {
   initialData?: BillingSummary;
 }
 
-interface CardDetails {
-  last4: string;
-  brand: string;
-  expiryMonth: number;
-  expiryYear: number;
-  name?: string;
-}
-
 interface BillingActions {
   /** Load billing summary */
   loadBilling: () => Promise<void>;
@@ -40,7 +32,7 @@ interface BillingActions {
   /** Update billing cycle */
   updateCycle: (cycle: BillingCycle) => Promise<void>;
   /** Add payment method */
-  addPaymentMethod: (paymentMethodDetails: CardDetails) => Promise<PaymentMethod>;
+  addPaymentMethod: (paymentMethodDetails: any) => Promise<PaymentMethod>;
   /** Remove payment method */
   removePaymentMethod: (methodId: string) => Promise<void>;
   /** Set default payment method */
@@ -264,7 +256,7 @@ export function useBilling(options: UseBillingOptions = {}) {
   }, [apiUrl]);
 
   // Add payment method
-  const addPaymentMethod = useCallback(async (paymentMethodDetails: CardDetails) => {
+  const addPaymentMethod = useCallback(async (paymentMethodDetails: any) => {
     setIsLoading(true);
     setError(null);
 

package/src/domains/billing/utils/billing.ts

@@ -9,33 +9,12 @@ import type {
   Currency,
   PlanTier,
   Subscription,
-  SubscriptionStatus,
   PaymentMethod,
   Invoice,
   InvoiceStatus,
   UsageMetric,
 } from "../types/billing";
 
-/**
- * Format number with K/M/B suffixes
- *
- * @param num - Number to format
- * @param decimals - Number of decimal places (default: 1)
- * @returns Formatted string
- */
-export function formatNumber(num: number, decimals: number = 1): string {
-  if (num >= 1_000_000_000) {
-    return (num / 1_000_000_000).toFixed(decimals) + "B";
-  }
-  if (num >= 1_000_000) {
-    return (num / 1_000_000).toFixed(decimals) + "M";
-  }
-  if (num >= 1_000) {
-    return (num / 1_000).toFixed(decimals) + "K";
-  }
-  return num.toFixed(decimals);
-}
-
 /**
  * Format price with currency
  *
@@ -135,7 +114,6 @@ export function getStatusColor(status: SubscriptionStatus): string {
     canceled: "text-gray-600 dark:text-gray-500",
     unpaid: "text-red-600 dark:text-red-500",
     incomplete: "text-yellow-600 dark:text-yellow-500",
-    revoked: "text-purple-600 dark:text-purple-500",
   };
 
   return colorMap[status] || "text-gray-600";
@@ -155,7 +133,6 @@ export function getStatusLabel(status: SubscriptionStatus): string {
     canceled: "Canceled",
     unpaid: "Unpaid",
     incomplete: "Incomplete",
-    revoked: "Revoked",
   };
 
   return labelMap[status] || status;
@@ -174,7 +151,6 @@ export function getInvoiceStatusColor(status: InvoiceStatus): string {
     paid: "text-green-600 dark:text-green-500",
     void: "text-gray-600 dark:text-gray-500",
     uncollectible: "text-red-600 dark:text-red-500",
-    refunded: "text-blue-600 dark:text-blue-500",
   };
 
   return colorMap[status] || "text-gray-600";
@@ -193,7 +169,6 @@ export function getInvoiceStatusLabel(status: InvoiceStatus): string {
     paid: "Paid",
     void: "Void",
     uncollectible: "Uncollectible",
-    refunded: "Refunded",
   };
 
   return labelMap[status] || status;

package/src/domains/layouts/components/BrandLogo.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { cn } from "@umituz/web-design-system/utils";
 
 interface BrandLogoProps {

package/src/domains/layouts/components/DashboardLayout.tsx

@@ -1,6 +1,5 @@
 import { useState, useEffect } from "react";
 import { useLocation, Outlet, Navigate } from "react-router-dom";
-import { useTranslation } from "react-i18next";
 import { Skeleton } from "@umituz/web-design-system/atoms";
 import { DashboardSidebar } from "./DashboardSidebar";
 import { DashboardHeader } from "./DashboardHeader";
@@ -27,8 +26,6 @@ interface DashboardLayoutProps {
   onDismissNotification?: (id: string) => void;
   /** Login route for redirect */
   loginRoute?: string;
-  /** Children for routing */
-  children?: React.ReactNode;
 }
 
 /**
@@ -56,10 +53,8 @@ export const DashboardLayout = ({
   onMarkAllRead,
   onDismissNotification,
   loginRoute = "/login",
-  children,
 }: DashboardLayoutProps) => {
   const location = useLocation();
-  const { t } = useTranslation();
   const [collapsed, setCollapsed] = useState(false);
   const [mobileOpen, setMobileOpen] = useState(false);
   const [loading, setLoading] = useState(true);
@@ -82,15 +77,8 @@ export const DashboardLayout = ({
     .find((i) => i.path === location.pathname);
 
   const getTitle = () => {
-    // Check extra title map first (for dynamic routes)
-    if (config.extraTitleMap?.[location.pathname]) {
-      return config.extraTitleMap[location.pathname];
-    }
-    // Use translated label from active item
-    if (activeItem) {
-      return t(activeItem.label);
-    }
-    return "Dashboard";
+    if (!activeItem) return config.extraTitleMap?.[location.pathname] || "Dashboard";
+    return activeItem.label; // Note: In real app, this would be translated
   };
 
   const currentTitle = getTitle();
@@ -156,7 +144,7 @@ export const DashboardLayout = ({
               <Skeleton className="h-64 rounded-[32px]" />
             </div>
           ) : (
-            children || <Outlet />
+            <Outlet />
           )}
         </main>
       </div>

package/src/domains/layouts/components/DashboardSidebar.tsx

@@ -54,12 +54,12 @@ export const DashboardSidebar = ({
   return (
     <div className="flex h-full flex-col">
       {/* Brand Section */}
-      <div className="flex h-16 items-center gap-3 border-b border-sidebar-border/60 px-4 transition-all duration-300">
+      <div className="flex h-16 items-center gap-3 border-b border-sidebar-border px-4 transition-all duration-300">
         <BrandLogo size={32} />
         {!collapsed && (
-          <div className="flex flex-col">
-            <span className="text-xl font-bold text-sidebar-foreground tracking-tight leading-none">{brandName}</span>
-            <span className="text-[10px] font-medium text-primary/80 lowercase tracking-wide mt-0.5 select-none">
+          <div className="flex flex-col -gap-1">
+            <span className="text-2xl font-black text-sidebar-foreground tracking-tighter leading-none">{brandName}</span>
+            <span className="text-[11px] font-bold text-primary/70 lowercase tracking-tight mt-2 ml-1 select-none underline decoration-primary/40 underline-offset-[6px] decoration-2">
               {brandTagline}
             </span>
           </div>
@@ -67,24 +67,24 @@ export const DashboardSidebar = ({
       </div>
 
       {/* Create Button */}
-      <div className="px-3 py-4 border-b border-sidebar-border/60">
+      <div className="px-3 py-4 border-b border-sidebar-border/50">
         <Link to={createPostRoute}>
           <Button
             variant="default"
-            className={`w-full gap-3 shadow-glow transition-all active:scale-95 group overflow-hidden rounded-lg ${
-              collapsed ? "px-0 justify-center h-10 w-10 mx-auto" : "justify-start px-4 h-10"
+            className={`w-full gap-3 shadow-glow transition-all active:scale-95 group overflow-hidden rounded-xl ${
+              collapsed ? "px-0 justify-center h-10 w-10 mx-auto" : "justify-start px-4 h-11"
             }`}
             title={collapsed ? t('sidebar.createPost') : undefined}
           >
             <PenTool className={`shrink-0 transition-transform duration-300 ${collapsed ? "h-5 w-5" : "h-4 w-4 group-hover:scale-110"}`} />
-            {!collapsed && <span className="font-semibold tracking-tight">{t('sidebar.createPost')}</span>}
+            {!collapsed && <span className="font-bold tracking-tight">{t('sidebar.createPost')}</span>}
           </Button>
         </Link>
       </div>
 
       {/* Navigation */}
-      <nav className="flex-1 overflow-y-auto px-2 py-4 scrollbar-hide">
-        <div className="space-y-5">
+      <nav className="flex-1 overflow-y-auto px-2 py-3 scrollbar-hide">
+        <div className="space-y-6">
           {sidebarGroups.map((group) => {
             const filteredItems = filterSidebarItems(group.items, user);
 
@@ -97,16 +97,16 @@ export const DashboardSidebar = ({
                 {!collapsed && (
                   <button
                     onClick={() => toggleGroup(group.title)}
-                    className="w-full flex items-center justify-between px-3 py-1.5 mb-1.5 rounded-md hover:bg-sidebar-accent/15 transition-all duration-200 group/header"
+                    className="w-full flex items-center justify-between px-3 py-2 mb-1 rounded-lg hover:bg-sidebar-accent/30 transition-all duration-200 group/header"
                   >
-                    <span className="text-[10px] font-semibold uppercase tracking-wider text-sidebar-foreground/50 group-hover/header:text-sidebar-foreground transition-colors">
+                    <span className="text-[10px] font-bold uppercase tracking-widest text-sidebar-foreground/40 group-hover/header:text-sidebar-foreground/70 transition-colors">
                       {group.title === "sidebar.ai" ? `${brandName} AI` : t(group.title)}
                     </span>
                     <div className="flex-shrink-0">
                       {isGroupCollapsed ? (
-                        <ChevronRight className="h-3.5 w-3.5 text-sidebar-foreground/40 transition-transform duration-200 group-hover/header:text-sidebar-foreground/60" />
+                        <ChevronRight className="h-3.5 w-3.5 text-sidebar-foreground/30 transition-transform duration-200 group-hover/header:text-sidebar-foreground/50" />
                       ) : (
-                        <ChevronDown className="h-3.5 w-3.5 text-sidebar-foreground/40 transition-transform duration-200 group-hover/header:text-sidebar-foreground/60" />
+                        <ChevronDown className="h-3.5 w-3.5 text-sidebar-foreground/30 transition-transform duration-200 group-hover/header:text-sidebar-foreground/50" />
                       )}
                     </div>
                   </button>
@@ -118,10 +118,10 @@ export const DashboardSidebar = ({
                     <Link
                       key={item.path}
                       to={item.path}
-                      className={`flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-all duration-200 ${
+                      className={`flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-all duration-200 ${
                         active
                           ? "bg-sidebar-accent text-sidebar-accent-foreground shadow-sm"
-                          : "text-sidebar-foreground/75 hover:bg-sidebar-accent/12 hover:text-sidebar-foreground"
+                          : "text-sidebar-foreground/70 hover:bg-sidebar-accent/40 hover:text-sidebar-foreground"
                       } ${collapsed ? "justify-center" : ""}`}
                       title={collapsed ? t(item.label) : undefined}
                     >
@@ -137,14 +137,14 @@ export const DashboardSidebar = ({
       </nav>
 
       {/* Collapse Toggle */}
-      <div className="border-t border-sidebar-border/60 p-3">
+      <div className="border-t border-sidebar-border p-3">
         <div className={`flex items-center ${collapsed ? "justify-center" : "justify-between"}`}>
           {!collapsed && (
-            <p className="text-[10px] uppercase tracking-wider text-sidebar-foreground/50 font-semibold px-2">
+            <p className="text-[10px] uppercase tracking-wider text-sidebar-foreground/40 font-bold px-2">
               {t('sidebar.system')}
             </p>
           )}
-          <Button variant="ghost" size="icon" onClick={() => setCollapsed(!collapsed)} className="text-sidebar-foreground/60 hover:text-sidebar-foreground hover:bg-sidebar-accent/15">
+          <Button variant="ghost" size="icon" onClick={() => setCollapsed(!collapsed)} className="text-sidebar-foreground/70">
             {collapsed ? <Menu className="h-4 w-4" /> : <ChevronLeft className="h-4 w-4" />}
           </Button>
         </div>