feat: add new color themes and styles for rose, violet, and yellow

- Introduced new CSS files for rose, violet, and yellow themes with custom color variables.
- Implemented dark mode styles for each theme.
- Created a color data structure to manage theme colors in the console settings.

feat: implement image cropper component

- Added an image cropper component for user profile picture editing.
- Integrated the image cropper into the user profile page.

feat: enhance console sidebar with user permissions

- Defined sidebar items with permission checks for admin and editor roles.
- Updated user center navigation to reflect user permissions.

feat: add user profile and security settings

- Developed user profile page with avatar upload and editing functionality.
- Implemented user security settings for password and email verification.

feat: create reusable dialog and OTP input components

- Built a dialog component for modal interactions.
- Developed an OTP input component for email verification.

fix: improve file handling utilities

- Added utility functions for file URI generation.
- Implemented permission checks for user roles in the common utilities.

web/src/components/console/nav-main.tsx

@@ -3,6 +3,7 @@
 import {
   SidebarGroup,
   SidebarGroupContent,
+  SidebarGroupLabel,
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
@@ -11,6 +12,8 @@ import Link from "next/link"
 import type { LucideProps } from "lucide-react";
 import { ComponentType, SVGProps } from "react"
 import { usePathname } from "next/navigation";
+import { User } from "@/models/user";
+import { useAuth } from "@/contexts/auth-context";
 
 export function NavMain({
   items,
@@ -19,19 +22,23 @@ export function NavMain({
     title: string
     url: string
     icon?: ComponentType<SVGProps<SVGSVGElement> & LucideProps>;
+    permission: ({ user }: { user: User }) => boolean
   }[]
 }) {
+  const { user } = useAuth();
   const pathname = usePathname() ?? "/"
-  console.log("pathname", pathname)
+
+  if (!user) return null;
 
   return (
     <SidebarGroup>
       <SidebarGroupContent className="flex flex-col gap-2">
+        <SidebarGroupLabel>General</SidebarGroupLabel>
         <SidebarMenu>
           {items.map((item) => (
-            <SidebarMenuItem key={item.title}>
+            item.permission({ user }) && <SidebarMenuItem key={item.title}>
               <Link href={item.url}>
-                <SidebarMenuButton tooltip={item.title} isActive={pathname===item.url}>
+                <SidebarMenuButton tooltip={item.title} isActive={pathname === item.url}>
                   {item.icon && <item.icon />}
                   <span>{item.title}</span>
                 </SidebarMenuButton>