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

// * Packages
import { ArrowLeftIcon, UserIcon } from "lucide-react";
import { usePage } from "@inertiajs/react";
import { route } from "ziggy-js";
// * Components shadcn
import { Badge } from "@/components/ui/badge";
// * Other
import AuthenticatedLayout from "@/back/Layouts/AuthenticatedLayout";
import DetailsTable from "@/back/Components/Table/DetailsTable";
import ModelActions from "@/back/Components/ModelActions";
import BtnOptionnalLinkWithTooltip from "@/back/Components/BtnOptionnalLinkWithTooltip";
import { AuthProp, SingleResource } from "@/back/types/global";
import { ActivityLogModel } from "@/back/types/activity-logs";
import str from "@/hooks/use-string";
import useTrans from "@/hooks/use-translations";
import { GetFormatedDate, GetTranslation } from "@/lib/utils";

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

type ActivityLogsShowProps = {
    data: SingleResource;
    activityLogsEventEnum: ActivityLogsEventEnumProps;
};

const getColumns = (
    activityLogModel: ActivityLogModel,
    activityLogsEventEnum: ActivityLogsEventEnumProps,
) => {
    return [
        {
            accessorKey: "event",
            header: str(GetTranslation("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(GetTranslation(currentEvent[0].label))
                                .ucFirst()
                                .value()}
                        </Badge>
                    ) : (
                        GetTranslation("activity-logs.event_not_match")
                    );
                }
                return (
                    <span className="text-sm italic text-muted-foreground">
                        {GetTranslation("back.table_not_known")}
                    </span>
                );
            },
        },
        {
            accessorKey: "user_id",
            header: str(GetTranslation("activity-logs.attributes.user_id"))
                .ucFirst()
                .value(),
            cell: ({ value }: { value: number }) => {
                if (value && activityLogModel.user)
                    return (
                        <BtnOptionnalLinkWithTooltip
                            link={route("back.users.show", { user: value })}
                            content={
                                <>
                                    <UserIcon />
                                    {`${activityLogModel.user.first_name} ${activityLogModel.user.last_name}`}
                                </>
                            }
                            tooltipContent={
                                <p>
                                    {GetTranslation(
                                        "activity-logs.access_model",
                                        {
                                            params: {
                                                model: GetTranslation(
                                                    "models.classes.user",
                                                ),
                                            },
                                        },
                                    )}
                                </p>
                            }
                            size="sm"
                            variant="secondary"
                        />
                    );
                if (activityLogModel.is_console)
                    return GetTranslation("activity-logs.user_in_console");
                if (activityLogModel.is_anonymous)
                    return GetTranslation("activity-logs.user_anonym");
                return GetTranslation("activity-logs.user_deleted");
            },
        },
        {
            accessorKey: "model_class",
            header: str(GetTranslation("activity-logs.attributes.model_class"))
                .ucFirst()
                .value(),
            cell: ({ value }: { value: string }) => {
                const modelSplit = value.split("\\");
                const modelName = modelSplit[modelSplit.length - 1];
                const model = str(modelName).kebabCase().plural().value();
                return activityLogModel.event !==
                    activityLogsEventEnum.deleted.value ? (
                    <BtnOptionnalLinkWithTooltip
                        link={route(
                            `back.${model}.show`,
                            activityLogModel.model_id,
                        )}
                        content={
                            <>
                                <UserIcon />
                                {value}
                            </>
                        }
                        tooltipContent={
                            <p>
                                {GetTranslation("activity-logs.access_model", {
                                    params: {
                                        model: GetTranslation(
                                            "activity-logs.attributes.model_class",
                                        ),
                                    },
                                })}
                            </p>
                        }
                        size="sm"
                        variant="secondary"
                    />
                ) : (
                    <code>{value}</code>
                );
            },
        },
        {
            accessorKey: "modifications",
            header: str(
                GetTranslation("activity-logs.attributes.modifications"),
            )
                .ucFirst()
                .value(),
            cell: ({ value }: { value: object }) => {
                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">
                        {GetTranslation("activity-logs.no_changes")}
                    </span>
                );
            },
        },
        {
            accessorKey: "created_at",
            header: str(GetTranslation("validation.attributes.created_at"))
                .ucFirst()
                .value(),
            cell: ({ value }: { value: string }) => (
                <Badge variant="secondary">{GetFormatedDate(value)}</Badge>
            ),
        },
    ];
};

export default function Show({
    data,
    activityLogsEventEnum,
}: ActivityLogsShowProps) {
    const { auth } = usePage().props as unknown as {
        auth: AuthProp;
    };
    const { viewAny } = auth.policies.activityLogs;
    const activityLogModel = data.data as ActivityLogModel;
    const columns = getColumns(activityLogModel, activityLogsEventEnum);
    const transBackToList = useTrans("back.crud_back_to_list");
    const beforeNode = () => {
        return (
            viewAny && (
                <div className="flex justify-end items-center gap-x-1.5">
                    <BtnOptionnalLinkWithTooltip
                        link={route("back.activity-logs.index")}
                        content={<ArrowLeftIcon />}
                        tooltipContent={<p>{transBackToList}</p>}
                    />
                </div>
            )
        );
    };

    return (
        <AuthenticatedLayout
            title={useTrans("crud.helpers.visualization_model", {
                params: { model: useTrans("models.classes.activity-log") },
            })}
            beforeNode={beforeNode()}
        >
            <ModelActions
                modelRoute="activity-logs"
                model={activityLogModel}
                modelUpdatedAt={activityLogModel.created_at.toString()}
                message={useTrans("activity-logs.get_data_message")}
            />
            <DetailsTable
                columns={columns}
                model={activityLogModel}
                forceRenderValue
            />
        </AuthenticatedLayout>
    );
}