122 lines
4 KiB
TypeScript
122 lines
4 KiB
TypeScript
import { usePage } from "@inertiajs/react";
|
|
import { AlertCircleIcon, SquareArrowOutUpRightIcon } from "lucide-react";
|
|
|
|
import logoUwilReportDark from "&/images/logos/uwil-report-dark.svg";
|
|
import logoUwilReportLight from "&/images/logos/uwil-report-light.svg";
|
|
import logoUwilSupportDark from "&/images/logos/uwil-support-dark.svg";
|
|
import logoUwilSupportLight from "&/images/logos/uwil-support-light.svg";
|
|
import BtnOptionnalLinkWithTooltip from "@/back/Components/BtnOptionnalLinkWithTooltip";
|
|
import AuthenticatedLayout from "@/back/Layouts/AuthenticatedLayout";
|
|
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
} from "@/components/ui/card";
|
|
import useTrans from "@/hooks/use-translations";
|
|
|
|
export default function Dashboard() {
|
|
const appEnv = usePage().props.appEnv as AppEnv;
|
|
const defaultTheme = "light";
|
|
const theme =
|
|
typeof localStorage !== "undefined"
|
|
? localStorage.getItem("vite-ui-theme")
|
|
: defaultTheme;
|
|
const tools = [
|
|
{
|
|
image: theme === defaultTheme ? logoUwilReportDark : logoUwilReportLight,
|
|
description: useTrans("uwil-backend::back.uwil_report_desc"),
|
|
label: "UWIL Report",
|
|
link: "https://report.uwil.fr",
|
|
},
|
|
{
|
|
image:
|
|
theme === defaultTheme ? logoUwilSupportDark : logoUwilSupportLight,
|
|
description: useTrans("uwil-backend::back.uwil_support_desc"),
|
|
label: "UWIL Support",
|
|
link: "https://support.uwil.fr",
|
|
},
|
|
];
|
|
const productionTitle = useTrans("uwil-backend::back.warning");
|
|
const productionDescription = useTrans(
|
|
"uwil-backend::back.warning_production",
|
|
);
|
|
const uwilTooltip = useTrans("uwil-backend::back.uwil_util_tooltip");
|
|
|
|
return (
|
|
<AuthenticatedLayout title={useTrans("uwil-backend::back.dashboard")}>
|
|
{appEnv.mode === "production" && (
|
|
<Alert variant="destructive" className="mb-4">
|
|
<AlertCircleIcon className="h-4 w-4" />
|
|
<AlertTitle className="font-bold">{productionTitle}</AlertTitle>
|
|
<AlertDescription
|
|
dangerouslySetInnerHTML={{
|
|
__html: productionDescription,
|
|
}}
|
|
/>
|
|
</Alert>
|
|
)}
|
|
<p
|
|
className="leading-7"
|
|
dangerouslySetInnerHTML={{
|
|
__html: useTrans("uwil-backend::back.dashboard_paragraph_1", {
|
|
params: { appName: appEnv.name },
|
|
}),
|
|
}}
|
|
/>
|
|
<p className="leading-7 mb-4">
|
|
{useTrans("uwil-backend::back.dashboard_paragraph_2")}
|
|
</p>
|
|
<p
|
|
className="leading-7 mb-4"
|
|
dangerouslySetInnerHTML={{
|
|
__html: useTrans("uwil-backend::back.dashboard_paragraph_3", {
|
|
params: { appName: appEnv.name },
|
|
}),
|
|
}}
|
|
/>
|
|
<p
|
|
className="leading-7 mb-4"
|
|
dangerouslySetInnerHTML={{
|
|
__html: useTrans("uwil-backend::back.dashboard_paragraph_4", {
|
|
params: { appName: appEnv.name },
|
|
}),
|
|
}}
|
|
/>
|
|
<div className="flex flex-col md:flex-row justify-start items-stretch gap-2">
|
|
{tools.map((tool) => (
|
|
<Card
|
|
key={tool.link}
|
|
className="flex flex-col justify-between text-center w-full md:w-[20rem]"
|
|
>
|
|
<CardHeader>
|
|
<img
|
|
src={tool.image}
|
|
alt={`${tool.label} logo`}
|
|
className="w-fit h-[4rem] mx-auto"
|
|
/>
|
|
<CardDescription className="pt-4">
|
|
{tool.description}
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<BtnOptionnalLinkWithTooltip
|
|
link={tool.link}
|
|
content={
|
|
<>
|
|
{tool.label}
|
|
<SquareArrowOutUpRightIcon />
|
|
</>
|
|
}
|
|
tooltipContent={<p>{uwilTooltip}</p>}
|
|
size="default"
|
|
externalLink
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</AuthenticatedLayout>
|
|
);
|
|
}
|