♻️ refactor: Update component imports and improve code consistency

- Refactored sidebar component to include additional sheet elements and improved accessibility with SheetHeader, SheetTitle, and SheetDescription.
- Updated skeleton component for better readability and consistency in class names.
- Refined slider component by standardizing import statements and enhancing class name formatting.
- Enhanced sonner component with consistent import statements and improved class name formatting.
- Standardized switch component imports and class names for better readability.
- Improved table component structure and class name consistency across various elements.
- Refactored tabs component for better readability and consistent class name formatting.
- Updated textarea component for improved readability and consistency in class names.
- Fixed timeline component to safely access getBoundingClientRect.
- Refactored toggle group and toggle components for improved readability and consistency in class names.
- Updated tooltip component for better readability and consistent class name formatting.
- Enhanced enhanced-input component to support generic types for better type safety.
- Refactored use-mobile hook for improved readability and consistency.
- Updated countries utility to make certain properties optional for better flexibility.
- Refined tailwind configuration for improved readability and consistency in theme settings.

apps/admin/app/dashboard/log/traffic-details/page.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { UserDetail } from '@/app/dashboard/user/user-detail';
 import { ProTable } from '@/components/pro-table';
 import { filterTrafficLogDetails } from '@/services/admin/log';
 import { formatBytes, formatDate } from '@workspace/ui/utils';
@@ -22,7 +23,11 @@ export default function TrafficDetailsPage() {
       initialFilters={initialFilters}
       columns={[
         { accessorKey: 'server_id', header: t('column.serverId') },
-        { accessorKey: 'user_id', header: t('column.userId') },
+        {
+          accessorKey: 'user_id',
+          header: t('column.userId'),
+          cell: ({ row }) => <UserDetail id={Number(row.original.user_id)} />,
+        },
         { accessorKey: 'subscribe_id', header: t('column.subscribeId') },
         {
           accessorKey: 'upload',