Enhance organizations dashboard with new components and styling impro…

…vements (#18)

* add data-table

apps/nextjs/src/app/organizations/page.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 
 import type { Tournament } from "~/lib/api";
+import OrganizationsTable from "~/components/organizations/organizations-table";
 import PartneredOrganizations from "~/components/organizations/partnered-organizations";
 import { getOrganizations } from "../server-actions/organizations/actions";
 
@@ -19,15 +20,8 @@ export default async function OrganizationsPage() {
       <div className="mt-4">
         <PartneredOrganizations />
       </div>
-
-      <div>
-        <h2>TODO: Organizations Table</h2>
-        {orgs.map((org) => (
-          <div key={org.id}>
-            <h3>{org.name}</h3>
-            <p>{org.description}</p>
-          </div>
-        ))}
+      <div className="mt-4">
+        <OrganizationsTable orgs={orgs} />
       </div>
     </>
   );

apps/nextjs/src/components/organizations/organizations-table/data-table-demo.tsx → apps/nextjs/src/components/data-table.tsx

@@ -1,17 +1,12 @@
 "use client";
 
 import type {
+  ColumnDef,
   ColumnFiltersState,
   SortingState,
   VisibilityState,
 } from "@tanstack/react-table";
-import React from "react";
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuTrigger,
-} from "@radix-ui/react-dropdown-menu";
+import * as React from "react";
 import {
   flexRender,
   getCoreRowModel,
@@ -24,6 +19,10 @@ import { ChevronDown } from "lucide-react";
 
 import {
   Button,
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
   Input,
   Table,
   TableBody,
@@ -33,10 +32,12 @@ import {
   TableRow,
 } from "@battle-stadium/ui";
 
-import { columns } from "./columns";
-import { data } from "./data";
+interface DataTableProps<T> {
+  data: T[];
+  columns: ColumnDef<T>[];
+}
 
-export function DataTableDemo() {
+export default function DataTable<T>({ data, columns }: DataTableProps<T>) {
   const [sorting, setSorting] = React.useState<SortingState>([]);
   const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
     [],
@@ -69,7 +70,7 @@ export function DataTableDemo() {
       <div className="flex items-center py-4">
         <Input
           placeholder="Filter emails..."
-          value={table.getColumn("email")?.getFilterValue()?.toString() ?? ""}
+          value={table.getColumn("email")?.getFilterValue() as string}
           onChange={(event) =>
             table.getColumn("email")?.setFilterValue(event.target.value)
           }

apps/nextjs/src/components/organizations/organizations-table/columns.tsx → apps/nextjs/src/components/organizations/organizations-table.tsx

@@ -1,9 +1,9 @@
 "use client";
 
 import type { ColumnDef } from "@tanstack/react-table";
-import * as React from "react";
 import { ArrowUpDown, MoreHorizontal } from "lucide-react";
 
+import type { Organization } from "@battle-stadium/db/schema";
 import {
   Button,
   Checkbox,
@@ -15,9 +15,17 @@ import {
   DropdownMenuTrigger,
 } from "@battle-stadium/ui";
 
-import type { Payment } from "./types";
+import DataTable from "~/components/data-table";
 
-export const columns: ColumnDef<Payment>[] = [
+interface OrganizationTableProps {
+  orgs: Organization[];
+}
+
+export default function OrganizationsTable({ orgs }: OrganizationTableProps) {
+  return <DataTable<Organization> data={orgs} columns={columns} />;
+}
+
+export const columns: ColumnDef<Organization>[] = [
   {
     id: "select",
     header: ({ table }) => (
@@ -81,7 +89,7 @@ export const columns: ColumnDef<Payment>[] = [
     id: "actions",
     enableHiding: false,
     cell: ({ row }) => {
-      const payment = row.original;
+      const organization = row.original;
 
       return (
         <DropdownMenu>
@@ -94,7 +102,9 @@ export const columns: ColumnDef<Payment>[] = [
           <DropdownMenuContent align="end">
             <DropdownMenuLabel>Actions</DropdownMenuLabel>
             <DropdownMenuItem
-              onClick={() => navigator.clipboard.writeText(payment.id)}
+              onClick={() =>
+                navigator.clipboard.writeText(`${organization.id}`)
+              }
             >
               Copy payment ID
             </DropdownMenuItem>