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

// * Packages
import { CheckIcon, MailIcon, PlusIcon, XIcon } from "lucide-react";
import { route } from "ziggy-js";
import { Row } from "@tanstack/react-table";
// * Components shadcn
import { usePage } from "@inertiajs/react";
import { Badge } from "@/components/ui/badge";
// * Other
import AuthenticatedLayout from "@/back/Layouts/AuthenticatedLayout";
import DataTable from "@/back/Components/Table/DataTable";
import DataTableSearch from "@/back/Components/Table/DataTableSearch";
import DataTableFilterButton from "@/back/Components/Table/DataTableFilterButton";
import BtnOptionnalLinkWithTooltip from "@/back/Components/BtnOptionnalLinkWithTooltip";
import { GetFormatedDate, GetTranslation, Views } from "@/lib/utils";
import {
    AuthProp,
    LaravelEnum,
    Resource,
    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: ({ column }: { column: { id: string } }) => (
                <DataTableFilterButton
                    label={str(
                        GetTranslation(`validation.attributes.${column.id}`),
                    )
                        .ucFirst()
                        .value()}
                    field={column.id}
                />
            ),
        },
        {
            accessorKey: "last_name",
            header: ({ column }: { column: { id: string } }) => (
                <DataTableFilterButton
                    label={str(
                        GetTranslation(`validation.attributes.${column.id}`),
                    )
                        .ucFirst()
                        .value()}
                    field={column.id}
                />
            ),
        },
        {
            accessorKey: "email",
            header: ({ column }: { column: { id: string } }) => (
                <DataTableFilterButton
                    label={str(
                        GetTranslation(`validation.attributes.${column.id}`),
                    )
                        .ucFirst()
                        .value()}
                    field={column.id}
                />
            ),
            cell: ({ row }: { row: Row<UserModel> }) => (
                <a
                    href={`mailto:${row.getValue("email")}`}
                    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 />
                    {row.getValue("email")}
                </a>
            ),
        },
        {
            accessorKey: "role",
            header: ({ column }: { column: { id: string } }) => (
                <DataTableFilterButton
                    label={str(
                        GetTranslation(`validation.attributes.${column.id}`),
                    )
                        .ucFirst()
                        .value()}
                    field={column.id}
                />
            ),
            cell: ({ row }: { row: Row<UserModel> }) => (
                <Badge variant="outline">
                    {str(
                        String(
                            Object.values(enumUserRole).find(
                                (role) => role.value === row.getValue("role"),
                            )?.label,
                        ),
                    )
                        .ucFirst()
                        .value()}
                </Badge>
            ),
        },
        {
            accessorKey: "published",
            header: ({ column }: { column: { id: string } }) => (
                <DataTableFilterButton
                    label={str(GetTranslation(`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(
                        GetTranslation(
                            row.getValue("published") ? "back.yes" : "back.no",
                        ),
                    )
                        .ucFirst()
                        .value()}
                </Badge>
            ),
        },
        {
            accessorKey: "updated_at",
            header: ({ column }: { column: { id: string } }) => (
                <DataTableFilterButton
                    label={str(
                        GetTranslation(`validation.attributes.${column.id}`),
                    )
                        .ucFirst()
                        .value()}
                    field={column.id}
                />
            ),
            cell: ({ row }: { row: Row<UserModel> }) => (
                <Badge variant="secondary">
                    {GetFormatedDate(row.getValue("updated_at"))}
                </Badge>
            ),
        },
    ];
};

export default function Index({
    userModels,
    searchFields,
}: {
    userModels: Resource;
    searchFields: string;
}) {
    const { auth, enumUserRole } = usePage().props as unknown as {
        auth: AuthProp;
        enumUserRole: LaravelEnum;
    };
    const { create } = auth.policies.users;
    const actionModels = [
        Views.VISUALIZATION,
        Views.EDITION,
        Views.DUPLICATION,
        Views.DELETION,
    ];

    const columns = getColumns(enumUserRole);
    const transCrudAddEntry = useTrans("back.crud_add_entry");
    const afterNode = () => {
        return (
            create && (
                <BtnOptionnalLinkWithTooltip
                    link={route("back.users.create")}
                    content={<PlusIcon />}
                    tooltipContent={<p>{transCrudAddEntry}</p>}
                />
            )
        );
    };

    return (
        <AuthenticatedLayout
            title={str(useTrans("models.classes.user", { choice: 1 }))
                .ucFirst()
                .plural()
                .value()}
            afterNode={afterNode()}
        >
            <DataTableSearch modelRoute="users" searchFields={searchFields} />
            <DataTable
                columns={columns}
                modelRoute="users"
                modelsPaginate={userModels}
                actions={actionModels}
            />
        </AuthenticatedLayout>
    );
}