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

import { usePage } from "@inertiajs/react";
import { ArrowLeftIcon, UserIcon } from "lucide-react";
import { type ReactNode } from "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 type {
  ActivityLogModel,
  AuthProp,
  ConfigBackend,
  DefaultModel,
  SingleResource,
} 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";

interface DetailsTableColumn {
  accessorKey: keyof DefaultModel;
  header: string;
  cell?: (params: { value: unknown }) => ReactNode;
}

type ActivityLogsEventEnumProps = Record<
  string,
  { value: number; name: string; label: string; tailwindclass: string }
>;

interface ActivityLogsShowProps {
  data: SingleResource;
  activityLogsEventEnum: ActivityLogsEventEnumProps;
}

const getColumns = (
  routeName: string,
  activityLogModel: ActivityLogModel,
  activityLogsEventEnum: ActivityLogsEventEnumProps,
) => {
  return [
    {
      accessorKey: "event",
      header: str(trans(`uwil-backend::back.activity_logs.attributes.event`))
        .ucFirst()
        .value(),
      cell: ({ value }: { value: number }) => {
        if (value) {
          const currentEvent = Object.values(activityLogsEventEnum).filter(
            (index) => index.value === value,
          );
          const bgClass = `bg-${currentEvent[0].tailwindclass}`;
          const hoverClass = `hover:bg-${currentEvent[0].tailwindclass}/90`;
          const textClass = `text-${currentEvent[0].tailwindclass}-foreground`;
          return currentEvent[0] ? (
            <Badge className={`${textClass} ${bgClass} ${hoverClass}`}>
              {str(trans(currentEvent[0].label)).ucFirst().value()}
            </Badge>
          ) : (
            trans(`uwil-backend::back.activity_logs.event_not_match`)
          );
        }
        return (
          <span className="text-sm italic text-muted-foreground">
            {trans("uwil-backend::back.table_not_known")}
          </span>
        );
      },
    },
    {
      accessorKey: "user_id",
      header: str(trans(`uwil-backend::back.activity_logs.attributes.user_id`))
        .ucFirst()
        .value(),
      cell: ({ value }: { value: number }) => {
        if (value && activityLogModel.user)
          return (
            <BtnOptionnalLinkWithTooltip
              link={route(`${routeName}users.show`, { user: value })}
              content={
                <>
                  <UserIcon />
                  {`${activityLogModel.user.first_name} ${activityLogModel.user.last_name}`}
                </>
              }
              tooltipContent={
                <p>
                  {trans(`uwil-backend::back.activity_logs.access_model`, {
                    params: {
                      model: trans("uwil-backend::models.classes.users", {
                        choice: 1,
                      }),
                    },
                  })}
                </p>
              }
              size="sm"
              variant="secondary"
            />
          );
        if (activityLogModel.is_console)
          return trans(`uwil-backend::back.activity_logs.user_in_console`);
        if (activityLogModel.is_anonymous)
          return trans(`uwil-backend::back.activity_logs.user_anonym`);
        return trans(`uwil-backend::back.activity_logs.user_deleted`);
      },
    },
    {
      accessorKey: "model_class",
      header: str(
        trans(`uwil-backend::back.activity_logs.attributes.model_class`),
      )
        .ucFirst()
        .value(),
      cell: ({ value }: { value: string }) => {
        const modelSplit = value.split("\\");
        const modelTargetName = modelSplit[modelSplit.length - 1];
        const model = str(modelTargetName).kebabCase().plural().value();
        const targetRoute = `${routeName}${model}.show`;

        return activityLogModel.event !== activityLogsEventEnum.deleted.value &&
          route().has(targetRoute) ? (
          <BtnOptionnalLinkWithTooltip
            link={route(targetRoute, activityLogModel.model_id)}
            content={
              <>
                <UserIcon />
                {value}
              </>
            }
            tooltipContent={
              <p>
                {trans(`uwil-backend::back.activity_logs.access_model`, {
                  params: {
                    model: trans(
                      `uwil-backend::back.activity_logs.attributes.model_class`,
                    ),
                  },
                })}
              </p>
            }
            size="sm"
            variant="secondary"
          />
        ) : (
          <code>{value}</code>
        );
      },
    },
    {
      accessorKey: "modifications",
      header: str(
        trans(`uwil-backend::back.activity_logs.attributes.modifications`),
      )
        .ucFirst()
        .value(),
      cell: ({ value }: { value: object | null }) => {
        return value && Object.entries(value).length ? (
          <ul className="list-disc ps-4">
            {Object.entries(value).map(([val, text]) => {
              return (
                <li key={val}>
                  {val} <span className="text-muted-foreground">({text})</span>
                </li>
              );
            })}
          </ul>
        ) : (
          <span className="text-sm italic text-muted-foreground">
            {trans(`uwil-backend::back.activity_logs.no_changes`)}
          </span>
        );
      },
    },
    {
      accessorKey: "created_at",
      header: str(
        trans(`uwil-backend::back.activity_logs.attributes.created_at`),
      )
        .ucFirst()
        .value(),
      cell: ({ value }: { value: string }) => (
        <Badge variant="secondary">{formatDate(value)}</Badge>
      ),
    },
  ];
};

export default function Show({
  data,
  activityLogsEventEnum,
}: Readonly<ActivityLogsShowProps>) {
  const { auth, configBackend } = usePage().props as unknown as {
    auth: AuthProp;
    configBackend: ConfigBackend;
  };
  const { viewAny } = auth.policies.activityLogs;
  const modelName = usePage().props.modelName as string;
  const activityLogModel = data.data as unknown as ActivityLogModel;
  const columns = getColumns(
    configBackend.routes.name,
    activityLogModel,
    activityLogsEventEnum,
  );
  const transBackToList = 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>{transBackToList}</p>}
          />
        </div>
      )
    );
  };

  return (
    <AuthenticatedLayout
      title={trans("uwil-backend::crud.helpers.visualization_model", {
        params: {
          model: trans(`uwil-backend::models.classes.${modelName}`, {
            choice: 1,
          }),
        },
      })}
      beforeNode={beforeNode()}
    >
      <ModelActions
        modelRoute={modelName}
        model={activityLogModel as unknown as DefaultModel}
        modelUpdatedAt={activityLogModel.created_at.toString()}
        message={trans(`uwil-backend::back.activity_logs.get_data_message`)}
      />
      <DetailsTable
        columns={columns as unknown as DetailsTableColumn[]}
        model={activityLogModel as unknown as DefaultModel}
        forceRenderValue
      />
    </AuthenticatedLayout>
  );
}