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

import { usePage } from "@inertiajs/react";
import { ArrowLeftIcon, CheckIcon, MailIcon, XIcon } from "lucide-react";

import BtnOptionnalLinkWithTooltip from "@/back/Components/BtnOptionnalLinkWithTooltip";
import ModelActions from "@/back/Components/ModelActions";
import DetailsTable from "@/back/Components/Table/DetailsTable";
import AuthenticatedLayout from "@/back/Layouts/AuthenticatedLayout";
import Views from "@/back/lib/actions";
import type {
  AuthProp,
  ConfigBackend,
  SingleResource,
  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 = (enumUserRole: UserModel["role"][], model: UserModel) => {
  const getEnumRoleValue = (name: string) =>
    enumUserRole.find((role) => role.name === name)?.value;

  const isVisitor = model.role.value === getEnumRoleValue("visitor");
  const columns = [
    {
      accessorKey: "first_name",
      header: str(trans("uwil-backend::validation.attributes.first_name"))
        .ucFirst()
        .value(),
    },
    {
      accessorKey: "last_name",
      header: str(trans("uwil-backend::validation.attributes.last_name"))
        .ucFirst()
        .value(),
    },
    {
      accessorKey: "email",
      header: str(trans("uwil-backend::validation.attributes.email"))
        .ucFirst()
        .value(),
      cell: ({ value }: { value: string }) => (
        <a
          href={`mailto:${value}`}
          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 />
          {value}
        </a>
      ),
    },
    {
      accessorKey: "role",
      header: str(trans(`uwil-backend::validation.attributes.role`))
        .ucFirst()
        .value(),
      cell: ({ value }: { value: UserModel["role"] }) => (
        <Badge variant="outline">{str(value.label).ucFirst().value()}</Badge>
      ),
    },
    {
      accessorKey: "published",
      header: str(trans("uwil-backend::validation.custom.published"))
        .ucFirst()
        .value(),
      cell: ({ value }: { value: boolean }) => (
        <Badge
          variant="outline"
          className={`border-0 ${
            value
              ? "bg-green-200 dark:bg-green-900"
              : "bg-red-200 dark:bg-red-900"
          }`}
        >
          {value ? (
            <CheckIcon size={15} className="mr-1" />
          ) : (
            <XIcon size={15} className="mr-1" />
          )}
          {str(
            trans(value ? "uwil-backend::back.yes" : "uwil-backend::back.no"),
          )
            .ucFirst()
            .value()}
        </Badge>
      ),
    },
    {
      accessorKey: "published_at",
      header: str(trans("uwil-backend::validation.custom.published_at"))
        .ucFirst()
        .value(),
      cell: ({ value }: { value: string }) => (
        <Badge variant="secondary">{formatDate(value)}</Badge>
      ),
    },
    {
      accessorKey: "created_at",
      header: str(trans("uwil-backend::validation.attributes.created_at"))
        .ucFirst()
        .value(),
      cell: ({ value }: { value: string }) => (
        <Badge variant="secondary">{formatDate(value)}</Badge>
      ),
    },
    {
      accessorKey: "updated_at",
      header: str(trans("uwil-backend::validation.attributes.updated_at"))
        .ucFirst()
        .value(),
      cell: ({ value }: { value: string }) => (
        <Badge variant="secondary">{formatDate(value)}</Badge>
      ),
    },
  ];

  return columns.filter((column) => {
    if (column.accessorKey === "role" && isVisitor) return false;
    return true;
  });
};

export default function Show({
  data,
  modelName,
}: {
  data: SingleResource;
  modelName: string;
}) {
  const { auth, configBackend, enumUserRole } = usePage().props as unknown as {
    auth: AuthProp;
    configBackend: ConfigBackend;
    enumUserRole: UserModel["role"][];
  };
  const { viewAny } = auth.policies.users;
  const model = data.data as UserModel;
  const actionModels = [Views.EDITION, Views.DUPLICATION, Views.ARCHIVATION];
  const columns = getColumns(enumUserRole, model);

  // Translations.
  const transTitle = trans("uwil-backend::crud.helpers.visualization_model", {
    params: {
      model: trans(`uwil-backend::models.classes.${modelName}`, {
        choice: 1,
      }),
    },
  });
  const transCrudBackToList = trans("uwil-backend::back.crud_back_to_list");

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

  return (
    <AuthenticatedLayout title={transTitle} beforeNode={beforeNode()}>
      <ModelActions
        actions={actionModels}
        modelRoute={modelName}
        model={model}
        modelUpdatedAt={model.updated_at?.toString()}
      />
      {/* @ts-expect-error Weird error type on cell. */}
      <DetailsTable columns={columns} model={model} />
    </AuthenticatedLayout>
  );
}