feat: enhance UI components and add vibrant theme support

- Updated layout and styling for various dashboard pages including stock adjustments, counts, transfers, wastage, and vendors to improve responsiveness and visual consistency.
- Introduced a vibrant theme option in the theme toggle component, allowing users to switch between light, dark, and vibrant themes.
- Refactored button styles across login and forgot password pages for better accessibility and visual feedback.
- Improved sidebar navigation with expanded functionality for items without dedicated pages.
- Enhanced data table styling for better readability and user interaction.
- Added new background images to support the vibrant theme.

Frontend/erp-system/components/ui/data-table.tsx

@@ -143,12 +143,11 @@ export function DataTable<T>({
 
       <Table>
         <TableHeader>
-          <TableRow className="bg-indigo-50 hover:bg-indigo-50">
+          <TableRow className="border-b-0 hover:bg-primary/5">
             {columns.map((column, index) => (
               <TableHead
                 key={column.key}
                 className={cn(
-                  "text-indigo-700",
                   index === 0 && "rounded-l-lg pl-3",
                   index === columns.length - 1 && !actions && "rounded-r-lg pr-3",
                   column.headerClassName
@@ -158,7 +157,7 @@ export function DataTable<T>({
               </TableHead>
             ))}
             {actions && (
-              <TableHead className="rounded-r-lg pr-3 text-right text-indigo-700">
+              <TableHead className="rounded-r-lg pr-3 text-right">
                 Actions
               </TableHead>
             )}

Frontend/erp-system/components/ui/table.tsx

@@ -23,7 +23,7 @@ function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
   return (
     <thead
       data-slot="table-header"
-      className={cn("[&_tr]:border-b", className)}
+      className={cn("bg-primary/5 [&_tr]:border-b [&_tr]:hover:bg-primary/5", className)}
       {...props}
     />
   )
@@ -70,7 +70,7 @@ function TableHead({ className, ...props }: React.ComponentProps<"th">) {
     <th
       data-slot="table-head"
       className={cn(
-        "h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0",
+        "h-10 px-2 text-left align-middle font-semibold whitespace-nowrap text-primary [&:has([role=checkbox])]:pr-0",
         className
       )}
       {...props}