Current code level

app/@types/index.d.ts

@@ -7,36 +7,20 @@ interface NavItemProps {
   children?: NavItemProps[];
 }
 
+export interface TContributors {
+  id: string;
+  firstName: string;
+  lastName: string;
+  email: string;
+  gender: string;
+  dependent: boolean;
+  contributionAmount: number;
+  contributiionMethod: "monthly" | "annual";
+  dateJoined: Date;
+}
+
 interface ContributorsDetailsProps {
   title: string;
   value: string;
   color: string;
 }
-
-export interface SearchParams {
-  [key: string]: string | string[] | undefined;
-}
-
-export interface Option {
-  label: string;
-  value: string;
-  icon?: React.ComponentType<{ className?: string }>;
-  withCount?: boolean;
-}
-
-export interface DataTableFilterField<TData> {
-  label: string;
-  value: keyof TData;
-  placeholder?: string;
-  options?: Option[];
-}
-
-export interface DataTableFilterOption<TData> {
-  id: string;
-  label: string;
-  value: keyof TData;
-  options: Option[];
-  filterValues?: string[];
-  filterOperator?: string;
-  isMulti?: boolean;
-}

app/components/atoms/collapsible-item.tsx

@@ -6,33 +6,73 @@ import {
 import { NavLink } from "@remix-run/react";
 import { ChevronsUpDown, Pencil } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
-import type {  ReactNode } from "react";
+import type { ReactNode } from "react";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { buttonVariants } from "../ui/button";
+import { cn } from "@/lib/styles";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 
 interface CollapsibleItemProps {
   label: string;
   icon: LucideIcon;
   children: ReactNode[];
+  withMinimalSidebar: boolean | null;
 }
 
 export const CollapsibleItem = ({
   label,
   icon: Icon,
   children,
+  withMinimalSidebar,
 }: CollapsibleItemProps) => {
-  return (
+  return !withMinimalSidebar ? (
     <Collapsible>
-      <CollapsibleTrigger className="flex items-center gap-3 rounded-lg px-3 text-muted-foreground transition-all hover:text-primary">
-        <Icon className="size-4" />
+      <CollapsibleTrigger className="flex items-center gap-3 rounded-lg px-3 text-muted-foreground transition-all hover:text-primary ">
+        <Icon className="size-6" />
         {label}
         <ChevronsUpDown className="size-4" />
       </CollapsibleTrigger>
       <div className="flex flex-col ml-6 my-2 gap-4">
         {children &&
-          children?.map((child, index) => (
+          children.map((child, index) => (
             <CollapsibleContent key={index}>{child}</CollapsibleContent>
           ))}
       </div>
     </Collapsible>
+  ) : (
+    <Popover>
+      <TooltipProvider>
+        <Tooltip>
+          <PopoverTrigger className="flex items-center gap-3 rounded-lg px-3 text-muted-foreground transition-all hover:text-primary">
+            <TooltipTrigger>
+              <Icon className="size-6" />
+            </TooltipTrigger>
+            <TooltipContent className="w-auto bg-white z-999">
+              <p className="text-slate-700 text-md ">{label}</p>
+            </TooltipContent>
+          </PopoverTrigger>
+        </Tooltip>
+      </TooltipProvider>
+      <PopoverContent className="w-auto">
+        {children &&
+          children.map((child, index) => (
+            <div key={index} className="flex flex-col gap-2 items-start">
+              <div className={buttonVariants({ variant: "ghost" })}>
+                {child}
+              </div>
+            </div>
+          ))}
+      </PopoverContent>
+    </Popover>
   );
 };
 
@@ -41,6 +81,7 @@ interface CollapsibleChildProps {
   href: string;
 }
 
+//  {TODO: handle active state (glen)}
 export const CollapsibleChild: React.FC<CollapsibleChildProps> = ({
   childLabel,
   href,