overview table

client/src/app/(projects)/constants.ts

@@ -12,7 +12,7 @@ export const COST_VALUES = ["total", "npv"] as const;
 
 export const FILTER_KEYS = [
   "keyword",
-  "projectSize",
-  "carbonPricingType",
-  "cost",
+  "projectSizeFilter",
+  "priceType",
+  "totalCost",
 ] as const;

client/src/app/(projects)/page.tsx

@@ -11,14 +11,14 @@ import { projectsUIState } from "@/app/(projects)/store";
 import ProjectsFilters from "@/containers/projects/filters";
 import ProjectsHeader from "@/containers/projects/header";
 import ProjectsMap from "@/containers/projects/map";
-import ProjectsTable from "@/containers/projects/table-visualization";
 
 import {
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,
 } from "@/components/ui/resizable";
 import { useSidebar } from "@/components/ui/sidebar";
+import ProjectsTable from "src/containers/projects/table";
 
 const PANEL_MIN_SIZE = 25;
 
@@ -67,13 +67,15 @@ export default function Projects() {
             className="flex flex-1 flex-col"
             minSize={PANEL_MIN_SIZE}
             onResize={onResizeMapPanel}
+            defaultSize={100}
           >
             <ProjectsMap />
           </ResizablePanel>
           <ResizableHandle withHandle className="my-3" />
           <ResizablePanel
             className="flex flex-1 flex-col"
             minSize={PANEL_MIN_SIZE}
+            defaultSize={100}
           >
             <ProjectsTable />
           </ResizablePanel>

client/src/app/(projects)/url-store.ts

@@ -13,7 +13,7 @@ import {
   FILTER_KEYS,
 } from "@/app/(projects)/constants";
 
-import { TABLE_MODES } from "@/containers/projects/table-visualization/toolbar/table-selector";
+import { TABLE_VIEWS } from "@/containers/projects/table/toolbar/table-selector";
 
 export const filtersSchema = z.object({
   [FILTER_KEYS[0]]: z.string().optional(),
@@ -27,9 +27,9 @@ export function useGlobalFilters() {
     "filters",
     parseAsJson(filtersSchema.parse).withDefault({
       keyword: "",
-      projectSize: "medium",
-      carbonPricingType: "market_price",
-      cost: "npv",
+      projectSizeFilter: "medium",
+      priceType: "market_price",
+      totalCost: "npv",
     }),
   );
 }
@@ -38,9 +38,9 @@ export function useSyncCountry() {
   return useQueryState("country", parseAsString.withDefault(""));
 }
 
-export function useTableMode() {
+export function useTableView() {
   return useQueryState(
     "table",
-    parseAsStringLiteral(TABLE_MODES).withDefault("overview"),
+    parseAsStringLiteral(TABLE_VIEWS).withDefault("overview"),
   );
 }

client/src/components/ui/pagination.tsx

@@ -1,10 +1,7 @@
 import * as React from "react";
 
-import {
-  ChevronLeftIcon,
-  ChevronRightIcon,
-  DotsHorizontalIcon,
-} from "@radix-ui/react-icons";
+import { ChevronLeftIcon, ChevronRightIcon } from "@radix-ui/react-icons";
+import { ChevronFirstIcon, ChevronLastIcon } from "lucide-react";
 
 import { cn } from "@/lib/utils";
 
@@ -40,18 +37,18 @@ const PaginationItem = React.forwardRef<
 ));
 PaginationItem.displayName = "PaginationItem";
 
-type PaginationLinkProps = {
+type PaginationButtonProps = {
   isActive?: boolean;
-} & Pick<ButtonProps, "size"> &
-  React.ComponentProps<"a">;
+} & ButtonProps;
 
-const PaginationLink = ({
+const PaginationButton = ({
   className,
   isActive,
   size = "icon",
   ...props
-}: PaginationLinkProps) => (
-  <a
+}: PaginationButtonProps) => (
+  <button
+    type="button"
     aria-current={isActive ? "page" : undefined}
     className={cn(
       buttonVariants({
@@ -63,61 +60,66 @@ const PaginationLink = ({
     {...props}
   />
 );
-PaginationLink.displayName = "PaginationLink";
+PaginationButton.displayName = "PaginationButton";
 
-const PaginationPrevious = ({
-  className,
-  ...props
-}: React.ComponentProps<typeof PaginationLink>) => (
-  <PaginationLink
+const PaginationFirst = ({ className, ...props }: ButtonProps) => (
+  <PaginationButton
+    aria-label="Go to first page"
+    size="default"
+    className={cn("gap-1 pl-2.5", className)}
+    {...props}
+  >
+    <ChevronFirstIcon className="h-4 w-4" />
+  </PaginationButton>
+);
+PaginationFirst.displayName = "PaginationFirst";
+
+const PaginationPrevious = ({ className, ...props }: ButtonProps) => (
+  <PaginationButton
     aria-label="Go to previous page"
     size="default"
     className={cn("gap-1 pl-2.5", className)}
     {...props}
   >
     <ChevronLeftIcon className="h-4 w-4" />
-    <span>Previous</span>
-  </PaginationLink>
+  </PaginationButton>
 );
 PaginationPrevious.displayName = "PaginationPrevious";
 
 const PaginationNext = ({
   className,
   ...props
-}: React.ComponentProps<typeof PaginationLink>) => (
-  <PaginationLink
+}: React.ComponentProps<typeof PaginationButton>) => (
+  <PaginationButton
     aria-label="Go to next page"
     size="default"
     className={cn("gap-1 pr-2.5", className)}
     {...props}
   >
-    <span>Next</span>
     <ChevronRightIcon className="h-4 w-4" />
-  </PaginationLink>
+  </PaginationButton>
 );
 PaginationNext.displayName = "PaginationNext";
 
-const PaginationEllipsis = ({
-  className,
-  ...props
-}: React.ComponentProps<"span">) => (
-  <span
-    aria-hidden
-    className={cn("flex h-9 w-9 items-center justify-center", className)}
+const PaginationLast = ({ className, ...props }: ButtonProps) => (
+  <PaginationButton
+    aria-label="Go to first page"
+    size="default"
+    className={cn("gap-1 pl-2.5", className)}
     {...props}
   >
-    <DotsHorizontalIcon className="h-4 w-4" />
-    <span className="sr-only">More pages</span>
-  </span>
+    <ChevronLastIcon className="h-4 w-4" />
+  </PaginationButton>
 );
-PaginationEllipsis.displayName = "PaginationEllipsis";
+PaginationLast.displayName = "PaginationLast";
 
 export {
   Pagination,
   PaginationContent,
-  PaginationLink,
+  PaginationButton,
   PaginationItem,
+  PaginationFirst,
   PaginationPrevious,
   PaginationNext,
-  PaginationEllipsis,
+  PaginationLast,
 };

client/src/components/ui/table.tsx

@@ -6,7 +6,7 @@ const Table = React.forwardRef<
   HTMLTableElement,
   React.HTMLAttributes<HTMLTableElement>
 >(({ className, ...props }, ref) => (
-  <div className="relative w-full overflow-auto">
+  <div className="relative h-full w-full overflow-auto">
     <table
       ref={ref}
       className={cn("w-full caption-bottom text-sm", className)}