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

// * Packages
import { ArrowLeftIcon, CheckIcon, MailIcon, XIcon } 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 { GetFormatedDate, GetTranslation, Views } from "@/lib/utils";
import {
    AuthProp,
    LaravelEnum,
    SingleResource,
    UserModel,
} from "@/back/types/global";
import str from "@/hooks/use-string";
import useTrans from "@/hooks/use-translations";

const getColumns = (enumUserRole: LaravelEnum) => {
    return [
        {
            accessorKey: "first_name",
            header: str(GetTranslation("validation.attributes.first_name"))
                .ucFirst()
                .value(),
        },
        {
            accessorKey: "last_name",
            header: str(GetTranslation("validation.attributes.last_name"))
                .ucFirst()
                .value(),
        },
        {
            accessorKey: "email",
            header: str(GetTranslation("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-none 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(GetTranslation(`validation.attributes.role`))
                .ucFirst()
                .value(),
            cell: ({ value }: { value: number }) => (
                <Badge variant="outline">
                    {str(
                        String(
                            Object.values(enumUserRole).find(
                                (role) => role.value === value,
                            )?.label,
                        ),
                    )
                        .ucFirst()
                        .value()}
                </Badge>
            ),
        },
        {
            accessorKey: "published",
            header: str(GetTranslation("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(GetTranslation(value ? "back.yes" : "back.no"))
                        .ucFirst()
                        .value()}
                </Badge>
            ),
        },
        {
            accessorKey: "published_at",
            header: str(GetTranslation("validation.custom.published_at"))
                .ucFirst()
                .value(),
            cell: ({ value }: { value: string }) => (
                <Badge variant="secondary">{GetFormatedDate(value)}</Badge>
            ),
        },
        {
            accessorKey: "created_at",
            header: str(GetTranslation("validation.attributes.created_at"))
                .ucFirst()
                .value(),
            cell: ({ value }: { value: string }) => (
                <Badge variant="secondary">{GetFormatedDate(value)}</Badge>
            ),
        },
        {
            accessorKey: "updated_at",
            header: str(GetTranslation("validation.attributes.updated_at"))
                .ucFirst()
                .value(),
            cell: ({ value }: { value: string }) => (
                <Badge variant="secondary">{GetFormatedDate(value)}</Badge>
            ),
        },
    ];
};

export default function Show({ data }: { data: SingleResource }) {
    const { auth, enumUserRole } = usePage().props as unknown as {
        auth: AuthProp;
        enumUserRole: LaravelEnum;
    };
    const { viewAny } = auth.policies.users;
    const userModel = data.data as UserModel;
    const actionModels = [Views.EDITION, Views.DUPLICATION, Views.DELETION];

    const columns = getColumns(enumUserRole);

    const transCrudBackList = 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.users.index")}
                        content={<ArrowLeftIcon />}
                        tooltipContent={<p>{transCrudBackList}</p>}
                    />
                </div>
            )
        );
    };

    return (
        <AuthenticatedLayout
            title={useTrans("crud.helpers.visualization_model", {
                params: { model: useTrans("models.classes.user") },
            })}
            beforeNode={beforeNode()}
        >
            <ModelActions
                actions={actionModels}
                modelRoute="users"
                model={userModel}
                modelUpdatedAt={userModel.updated_at.toString()}
            />
            {/* @ts-expect-error Weird error type on cell. */}
            <DetailsTable columns={columns} model={userModel} />
        </AuthenticatedLayout>
    );
}