dataroom/pages/datarooms/index.tsx

import { useRouter } from "next/router";

import { useMemo, useState } from "react";

import { PlusIcon } from "lucide-react";
import { useQueryState } from "nuqs";

import useDatarooms from "@/lib/swr/use-datarooms";
import { useTags } from "@/lib/swr/use-tags";

import { AddDataroomModal } from "@/components/datarooms/add-dataroom-modal";
import DataroomCard from "@/components/datarooms/dataroom-card";
import { EmptyDataroom } from "@/components/datarooms/empty-dataroom";
import AppLayout from "@/components/layouts/app";
import { SearchBoxPersisted } from "@/components/search-box";
import { Button } from "@/components/ui/button";
import { MultiSelect } from "@/components/ui/multi-select-v2";
import { Separator } from "@/components/ui/separator";

export default function DataroomsPage() {
  const { datarooms, totalCount } = useDatarooms();
  const router = useRouter();

  const [tagsFilter, setTagsFilter] = useQueryState<string[]>("tags", {
    parse: (value: string) => value.split(",").filter(Boolean),
    serialize: (value: string[]) => value.join(","),
  });
  const [isTagsPopoverOpen, setIsTagsPopoverOpen] = useState(false);

  const { tags: availableTags } = useTags({
    query: {
      sortBy: "name",
      sortOrder: "asc",
    },
  });

  const totalDatarooms = totalCount ?? 0;

  const searchQuery = router.query.search as string | undefined;

  // Sort datarooms alphabetically by name
  const sortedDatarooms = datarooms?.slice().sort((a, b) => {
    return a.name.localeCompare(b.name);
  });

  // Filter out only dataroom tags
  const dataroomTags = useMemo(() => {
    if (!availableTags) return [];
    return availableTags;
  }, [availableTags]);

  const tagOptions = useMemo(() => {
    return (
      dataroomTags?.map((tag) => ({
        value: tag.name,
        label: tag.name,
        meta: { color: tag.color, description: tag.description },
      })) || []
    );
  }, [dataroomTags]);

  const selectedTagValues = useMemo(() => {
    return tagsFilter || [];
  }, [tagsFilter]);

  const hasActiveFilters = searchQuery || tagsFilter?.length;

  return (
    <AppLayout>
      <main className="p-4 sm:m-4 sm:px-4 sm:py-4">
        <section className="mb-4 flex items-center justify-between md:mb-8 lg:mb-12">
          <div className="space-y-1">
            <h2 className="text-xl font-semibold tracking-tight text-foreground sm:text-2xl">
              Datarooms
            </h2>
            <p className="text-xs text-muted-foreground sm:text-sm">
              Manage your datarooms
            </p>
          </div>
          <div className="flex items-center gap-x-1">
            <AddDataroomModal>
              <Button
                className="group flex flex-1 items-center justify-start gap-x-3 px-3 text-left"
                title="Create New Dataroom"
              >
                <PlusIcon className="h-5 w-5 shrink-0" aria-hidden="true" />
                <span>Create New Dataroom</span>
              </Button>
            </AddDataroomModal>
          </div>
        </section>
        {/* Search and Filters */}
        <div className="mb-4 flex justify-end gap-3">
          <div className="w-full sm:w-[280px]">
            <SearchBoxPersisted
              placeholder="Search datarooms..."
              inputClassName="h-10"
            />
          </div>

          <div className="w-full sm:w-[320px]">
            <MultiSelect
              options={tagOptions}
              value={selectedTagValues}
              onValueChange={(value) =>
                setTagsFilter(value.length > 0 ? value : null)
              }
              placeholder="Tags"
              maxCount={2}
              searchPlaceholder="Search tags..."
              isPopoverOpen={isTagsPopoverOpen}
              setIsPopoverOpen={setIsTagsPopoverOpen}
              popoverClassName="sm:w-[320px]"
            />
          </div>
        </div>

        {hasActiveFilters && (
          <div className="mb-4 flex items-center gap-2 text-sm text-muted-foreground">
            <span>
              Showing {sortedDatarooms?.length || 0} of {totalDatarooms}{" "}
              dataroom
              {totalDatarooms !== 1 ? "s" : ""}
            </span>
            <Button
              variant="link"
              size="sm"
              className="h-auto p-0 text-xs"
              onClick={() => {
                router.push(
                  {
                    pathname: router.pathname,
                    query: {},
                  },
                  undefined,
                  { shallow: true },
                );
              }}
            >
              Clear filters
            </Button>
          </div>
        )}

        <Separator className="mb-5 bg-gray-200 dark:bg-gray-800" />

        <div className="space-y-4">
          <ul className="grid grid-cols-1 gap-x-6 gap-y-8 lg:grid-cols-2 xl:grid-cols-3">
            {sortedDatarooms &&
              sortedDatarooms.map((dataroom) => (
                <li key={dataroom.id}>
                  <DataroomCard dataroom={dataroom} />
                </li>
              ))}
          </ul>

          {sortedDatarooms && sortedDatarooms.length === 0 && (
            <div className="flex items-center justify-center">
              <EmptyDataroom />
            </div>
          )}
        </div>
      </main>
    </AppLayout>
  );
}