use IsActive props from sidebar component

sigap-website/app/(pages)/(admin)/_components/navigations/nav-main.tsx

@@ -52,7 +52,7 @@ function SubSubItemComponent({ item }: { item: SubSubItem }) {
         asChild
         className={
           isActive
-            ? "bg-primary/40 active text-primary"
+            ? "bg-muted active font-bold"
             : ""
         }
       >
@@ -75,11 +75,7 @@ function SubItemComponent({ item }: { item: SubItem }) {
       <SidebarMenuItem>
         <SidebarMenuButton
           asChild
-          className={
+          isActive={isActive}
-            isActive
-              ? "bg-primary/40 active text-primary"
-              : ""
-          }
         >
           <a href={formattedUrl}>
             {item.icon && (
@@ -97,11 +93,7 @@ function SubItemComponent({ item }: { item: SubItem }) {
       <SidebarMenuItem>
         <CollapsibleTrigger asChild>
           <SidebarMenuButton
-            className={
+            isActive={isActive}
-              isActive
-                ? "bg-primary/40 active text-primary"
-                : ""
-            }
           >
             {item.icon && (
               <item.icon />
@@ -136,11 +128,7 @@ function RecursiveNavItem({ item, index }: { item: NavItem; index: number }) {
         <SidebarMenuButton
           tooltip={item.title}
           asChild
-          className={
+          isActive={isActive}
-            isActive
-              ? "bg-primary/40 active text-primary"
-              : ""
-          }
         >
           <a href={formattedUrl}>
             {item.icon && (
@@ -164,11 +152,7 @@ function RecursiveNavItem({ item, index }: { item: NavItem; index: number }) {
         <CollapsibleTrigger asChild>
           <SidebarMenuButton
             tooltip={item.title}
-            className={
+            isActive={isActive}
-              isActive
-                ? "bg-primary/40 active text-primary"
-                : ""
-            }
           >
             {item.icon && (
               <item.icon />

sigap-website/app/(pages)/(admin)/dashboard/user-management/_components/users-table.tsx

@@ -317,7 +317,7 @@ export const createUserColumns = (
                                     /* handle delete */
                                 }}
                             >
-                                <Trash2 className="h-4 w-4 mr-2 text-red-500" />
+                                <Trash2 className="h-4 w-4 mr-2 text-destructive" />
                                 Delete
                             </DropdownMenuItem>
                             <DropdownMenuItem

sigap-website/app/_components/form-field.tsx

@@ -11,7 +11,7 @@ export function FormField({ label, input, error }: FormFieldProps) {
     <div className="space-y-2">
       <Label className="text-sm text-gray-300">{label}</Label>
       {input}
-      {error && <p className="text-red-500 text-xs mt-1">{error}</p>}
+      {error && <p className="text-destructive text-xs mt-1">{error}</p>}
     </div>
   );
 }

sigap-website/app/_components/react-hook-form-field.tsx

@@ -33,7 +33,7 @@ export function ReactHookFormField({
                     {...registration}
                     {...props}
                 />
-                {error && <p className="text-sm text-red-500">{error.message}</p>}
+                {error && <p className="text-sm text-destructive">{error.message}</p>}
             </div>
         </div>
     )

sigap-website/app/_components/ui/input.tsx

@@ -14,7 +14,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
         type={type}
         className={cn(
           "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-          error && "ring-2 ring-red-500 focus-visible:ring-red-500",
+          error && "ring-2 ring-destructive focus-visible:ring-destructive",
           className
         )}
         ref={ref}