Merge pull request #9 from glenmiracle18/majorFix

majorFIx: new major changes

app/@types/index.d.ts

@@ -1,6 +1,42 @@
+import { LucideIcon } from "lucide-react";
+
 interface NavItemProps {
-    label: string;
-    icon: React.FC;
-    href: string;
-    children?: NavItemProps[];
+  label: string;
+  icon: LucideIcon;
+  href: string;
+  children?: NavItemProps[];
+}
+
+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

@@ -3,10 +3,10 @@ import {
   CollapsibleContent,
   CollapsibleTrigger,
 } from "@/components/ui/collapsible";
-import { Link } from "@remix-run/react";
+import { NavLink } from "@remix-run/react";
 import { ChevronsUpDown, Pencil } from "lucide-react";
-import { LucideIcon } from "lucide-react";
-import { ReactChildren, ReactNode } from "react";
+import type { LucideIcon } from "lucide-react";
+import type {  ReactNode } from "react";
 
 interface CollapsibleItemProps {
   label: string;
@@ -28,7 +28,7 @@ export const CollapsibleItem = ({
       </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>
@@ -46,11 +46,15 @@ export const CollapsibleChild: React.FC<CollapsibleChildProps> = ({
   href,
 }) => {
   return (
-    <Link
+    <NavLink
       to={href}
-      className="rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary"
+      className={({ isActive }) =>
+        isActive
+          ? "rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-black bg-slate-100"
+          : "rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-black"
+      }
     >
       {childLabel}
-    </Link>
+    </NavLink>
   );
 };

app/components/atoms/contributors/attendee-heat-map.tsx

@@ -0,0 +1,20 @@
+import { ContributorsDetails } from "./detail";
+import { ProgressBarPrototype } from "./progress-bar";
+
+export const AttendeeHeatMap = () => {
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="flex ws-full h-[60px] gap-2 items-end">
+        <h1 className="font-[500] text-[48px] leading-[48px] ">1.894</h1>
+        <p className="font-light text-[16px] leading-[24px]">Contributors</p>
+      </div>
+      <ProgressBarPrototype />
+      <div className="w-full">
+        {/* row one */}
+        <div className="w-full h-[98px] py-4 gap-4 flex border-[#F5F5F5] ">
+          <ContributorsDetails />
+        </div>
+      </div>
+    </div>
+  );
+};

app/components/atoms/contributors/contributor-dropdown.tsx

@@ -0,0 +1,39 @@
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { ChevronDownIcon } from "lucide-react";
+import { useState } from "react";
+
+export const ContributorDropdown = () => {
+  const [position, setPosition] = useState("bottom");
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="outline"
+          className="border-[1px] gap-2 rounded-[4px] p-[16px] font-ligh"
+        >
+          Contributor Type
+          <ChevronDownIcon className="size-[20px]" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-56">
+        <DropdownMenuLabel>Panel Position</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuRadioGroup value={position} onValueChange={setPosition}>
+          <DropdownMenuRadioItem value="top">Dependent</DropdownMenuRadioItem>
+          <DropdownMenuRadioItem value="bottom">Student</DropdownMenuRadioItem>
+          <DropdownMenuRadioItem value="right">Couple</DropdownMenuRadioItem>
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};

app/components/atoms/contributors/contributor-summary-card.tsx

@@ -0,0 +1,20 @@
+import { Card } from "@/components/ui/card";
+import { AttendeeHeatMap } from "./attendee-heat-map";
+import { ContributorDropdown } from "./contributor-dropdown";
+
+export const ContributorSummaryCard = () => {
+  return (
+    <Card className="shadow-none">
+      <div className="border h-[376px] p-4 rounded-md">
+        <div className="w-full h-[56px] gap-[16px]  flex justify-between">
+          <h1 className="leading-[28px] text-[18px] font-[500px] ">
+            Total Contributors
+          </h1>
+          <ContributorDropdown />
+        </div>
+        {/* Attendance heat map */}
+        <AttendeeHeatMap />
+      </div>
+    </Card>
+  );
+};

app/components/atoms/contributors/detail.tsx

@@ -0,0 +1,28 @@
+import { ContributorsSummaryData } from "@/data/contributors";
+
+export const ContributorsDetails = () => {
+  return (
+    <div className="grid grid-cols-2 gap-8 mt-2">
+      {ContributorsSummaryData.map((item) => (
+        <div key={item.color} className="w-[301px] gap-[4px] flex flex-col">
+          <div className="gap-2 flex items-center">
+            <div
+              className={`w-[14px] rounded-[999px] bg-${item.color}-600 h-2`}
+            />
+            <h1 className="leading-[24px] text-[16px] font-light text-[#595959] capitalize">
+              {item.title}
+            </h1>
+          </div>
+          <span className="flex items-end gap-2">
+            <h1 className="font-light text-[30px] leading-[38px] ">
+              {item.value}
+            </h1>
+            <p className="font-light text-[16px] leading-[24px]">
+              Contributors
+            </p>
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+};

app/components/atoms/contributors/progress-bar.tsx

@@ -0,0 +1,10 @@
+export const ProgressBarPrototype = () => {
+  return (
+    <div className="flex gap-2 h-2">
+      <span className="w-[368px] rounded-[2px] bg-blue-600 h-full" />
+      <span className="w-[81px] rounded-[2px] bg-green-600 h-full" />
+      <span className="w-[117px] rounded-[2px] bg-red-600 h-full" />
+      <span className="w-[40px] rounded-[2px] bg-orange-600 h-full" />
+    </div>
+  );
+};

app/components/atoms/contributors/table-render.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+// import { getTasks } from "./_lib/queries"
+// import { searchParamsSchema } from "./_lib/validations"
+import { TasksTableProvider } from "./table/task-table-provider";
+import { Skeleton } from "@/components/ui/skeleton";
+import { DateRangePicker } from "@/components/blocks/date-range-picker";
+import { DataTableSkeleton } from "./table/data-table-skeleton";
+import { TasksTable } from "./table/task-table";
+import { Shell } from "@/components/shell";
+import { SearchParams } from "@/@types";
+import { searchParamsSchema } from "@/lib/validations";
+import { getTasks } from "@/lib/queries";
+
+export interface IndexPageProps {
+  searchParams: SearchParams;
+}
+
+export const TableRender = ({ searchParams }: IndexPageProps) => {
+  const search = searchParamsSchema.parse(searchParams);
+  const tasksPromise = getTasks(search);
+  return (
+    <Shell className="gap-2">
+      {/**
+       * The `TasksTableProvider` is use to enable some feature flags for the `TasksTable` component.
+       * Feel free to remove this, as it's not required for the `TasksTable` component to work.
+       */}
+      <TasksTableProvider>
+        {/**
+         * The `DateRangePicker` component is used to render the date range picker UI.
+         * It is used to filter the tasks based on the selected date range it was created at.
+         * The business logic for filtering the tasks based on the selected date range is handled inside the component.
+         */}
+        <React.Suspense fallback={<Skeleton className="h-7 w-52" />}>
+          <DateRangePicker
+            triggerSize="sm"
+            triggerClassName="ml-auto w-56 sm:w-60"
+            align="end"
+          />
+        </React.Suspense>
+        <React.Suspense
+          fallback={
+            <DataTableSkeleton
+              columnCount={5}
+              searchableColumnCount={1}
+              filterableColumnCount={2}
+              cellWidths={["10rem", "40rem", "12rem", "12rem", "8rem"]}
+              shrinkZero
+            />
+          }
+        >
+          {/**
+           * Passing promises and consuming them using React.use for triggering the suspense fallback.
+           * @see https://react.dev/reference/react/use
+           */}
+          <TasksTable tasksPromise={tasksPromise} />
+        </React.Suspense>
+      </TasksTableProvider>
+    </Shell>
+  );
+};