ldc-ovoteam/resources/ts/back/Pages/Users/Index.tsx

import { usePage } from "@inertiajs/react";
import { type Row } from "@tanstack/react-table";
import {
  ArchiveIcon,
  ArrowLeftIcon,
  CheckIcon,
  MailIcon,
  PlusIcon,
  XIcon,
} from "lucide-react";

import BtnOptionnalLinkWithTooltip from "@/back/Components/BtnOptionnalLinkWithTooltip";
import SoftdeleteWarning from "@/back/Components/SoftdeleteWarning";
import DataTable from "@/back/Components/Table/DataTable";
import DataTableFilterButton from "@/back/Components/Table/DataTableFilterButton";
import DataTableSearch from "@/back/Components/Table/DataTableSearch";
import AuthenticatedLayout from "@/back/Layouts/AuthenticatedLayout";
import Views from "@/back/lib/actions";
import type {
  AuthProp,
  ConfigBackend,
  Resource,
  UserModel,
} from "@/back/types/global";
import { Badge } from "@/components/ui/badge";
import str from "@/hooks/use-string";
import trans from "@/hooks/use-translations";
import { formatDate } from "@/lib/utils";

const getColumns = () => {
  return [
    {
      accessorKey: "first_name",
      header: ({ column }: { column: { id: string } }) => (
        <DataTableFilterButton
          label={str(trans(`uwil-backend::validation.attributes.${column.id}`))
            .ucFirst()
            .value()}
          field={column.id}
        />
      ),
    },
    {
      accessorKey: "last_name",
      header: ({ column }: { column: { id: string } }) => (
        <DataTableFilterButton
          label={str(trans(`uwil-backend::validation.attributes.${column.id}`))
            .ucFirst()
            .value()}
          field={column.id}
        />
      ),
    },
    {
      accessorKey: "email",
      header: ({ column }: { column: { id: string } }) => (
        <DataTableFilterButton
          label={str(trans(`uwil-backend::validation.attributes.${column.id}`))
            .ucFirst()
            .value()}
          field={column.id}
        />
      ),
      cell: ({ row }: { row: Row<UserModel> }) => (
        <a
          href={`mailto:${row.getValue<UserModel["email"]>("email")}`}
          className="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-dark underline-offset-4 hover:underline"
        >
          <MailIcon />
          {row.getValue("email")}
        </a>
      ),
    },
    {
      accessorKey: "role",
      header: ({ column }: { column: { id: string } }) => (
        <DataTableFilterButton
          label={str(trans(`uwil-backend::validation.attributes.${column.id}`))
            .ucFirst()
            .value()}
          field={column.id}
        />
      ),
      cell: ({ row }: { row: Row<UserModel> }) => {
        const rowRole = row.getValue<UserModel["role"]>("role");
        return (
          <Badge variant="outline">
            {str(rowRole.label).ucFirst().value()}
          </Badge>
        );
      },
    },
    {
      accessorKey: "published",
      header: ({ column }: { column: { id: string } }) => (
        <DataTableFilterButton
          label={str(trans(`uwil-backend::validation.custom.${column.id}`))
            .ucFirst()
            .value()}
          field={column.id}
        />
      ),
      cell: ({ row }: { row: Row<UserModel> }) => (
        <Badge
          variant="outline"
          className={`border-0 ${
            row.getValue("published")
              ? "bg-green-200 dark:bg-green-900"
              : "bg-red-200 dark:bg-red-900"
          }`}
        >
          {row.getValue("published") ? (
            <CheckIcon size={15} className="mr-1" />
          ) : (
            <XIcon size={15} className="mr-1" />
          )}
          {str(
            trans(
              row.getValue("published")
                ? "uwil-backend::back.yes"
                : "uwil-backend::back.no",
            ),
          )
            .ucFirst()
            .value()}
        </Badge>
      ),
    },
    {
      accessorKey: "updated_at",
      header: ({ column }: { column: { id: string } }) => (
        <DataTableFilterButton
          label={str(trans(`uwil-backend::validation.attributes.${column.id}`))
            .ucFirst()
            .value()}
          field={column.id}
        />
      ),
      cell: ({ row }: { row: Row<UserModel> }) => (
        <Badge variant="secondary">
          {formatDate(row.getValue("updated_at"))}
        </Badge>
      ),
    },
  ];
};

export default function Index({
  userModels,
  searchFields,
  modelName,
}: {
  userModels: Resource;
  searchFields: string;
  modelName: string;
}) {
  const { auth, configBackend } = usePage().props as unknown as {
    auth: AuthProp;
    configBackend: ConfigBackend;
  };
  const { viewAny, viewTrash, create } = auth.policies.users;
  const routeName = configBackend.routes.name;
  const isArchiveRoute = route().current(`${routeName}${modelName}.trash`);
  const actionModels = isArchiveRoute
    ? [Views.RESTORATION, Views.FORCEDELETION]
    : [
        Views.VISUALIZATION,
        Views.EDITION,
        Views.DUPLICATION,
        Views.ARCHIVATION,
      ];
  const columns = getColumns();

  // Translations.
  const transModel = trans(`uwil-backend::models.classes.${modelName}`, {
    choice: 2,
  });
  const transArchiveTitle = trans("uwil-backend::crud.helpers.archives_model", {
    params: { model: transModel },
  });
  const transTitle = str(isArchiveRoute ? transArchiveTitle : transModel)
    .ucFirst()
    .value();
  const transCrudBackList = trans("uwil-backend::back.crud_back_to_list");
  const transCrudAddEntry = trans("uwil-backend::back.crud_add_entry");
  const transAccessTo = trans("uwil-backend::back.crud_access_to", {
    params: {
      target: trans("uwil-backend::back.archived_entries"),
    },
  });

  const beforeNode = () => {
    return (
      isArchiveRoute &&
      viewAny && (
        <div className="flex justify-end items-center gap-x-1.5">
          <BtnOptionnalLinkWithTooltip
            link={route(`${routeName}${modelName}.index`)}
            content={<ArrowLeftIcon />}
            tooltipContent={<p>{transCrudBackList}</p>}
          />
        </div>
      )
    );
  };

  const afterNode = () => {
    return (
      !isArchiveRoute && (
        <div className="flex justify-end items-center gap-x-1.5">
          {viewTrash && (
            <BtnOptionnalLinkWithTooltip
              link={route(`${routeName}${modelName}.trash`)}
              content={<ArchiveIcon />}
              tooltipContent={<p>{transAccessTo}</p>}
              variant="outline"
            />
          )}
          {create && (
            <BtnOptionnalLinkWithTooltip
              link={route(`${routeName}${modelName}.create`)}
              content={<PlusIcon />}
              tooltipContent={<p>{transCrudAddEntry}</p>}
            />
          )}
        </div>
      )
    );
  };

  return (
    <AuthenticatedLayout
      title={transTitle}
      beforeNode={beforeNode()}
      afterNode={afterNode()}
    >
      {isArchiveRoute && <SoftdeleteWarning />}
      <DataTableSearch
        modelRoute={modelName}
        prefixRoute={routeName}
        searchFields={searchFields}
        isArchiveRoute={isArchiveRoute}
      />
      <DataTable
        columns={columns}
        modelRoute={modelName}
        modelsPaginate={userModels}
        actions={actionModels}
      />
    </AuthenticatedLayout>
  );
}