120 lines
4.5 KiB
TypeScript
120 lines
4.5 KiB
TypeScript
|
import Head from "next/head";
|
||
|
|
import { LoadingPage } from "~/components/loading";
|
||
|
|
import { useTranslation } from "~/providers/I18nProvider";
|
||
|
|
import { AreaRiservataLayout } from "~/components/Layout";
|
||
|
|
import type { NextPageWithLayout } from "~/pages/_app";
|
||
|
|
import { api } from "~/utils/api";
|
||
|
|
import { ChangePasswordForm } from "~/forms/FormChangePassword";
|
||
|
|
import { Status500 } from "~/components/status-page";
|
||
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs";
|
||
|
|
import { ProfileFormAccount } from "~/forms/FormProfilo_Account";
|
||
|
|
import { ProfileFormAnagrafica } from "~/forms/FormProfilo_Anagrafica";
|
||
|
|
import { useSession } from "~/providers/SessionProvider";
|
||
|
|
import {
|
||
|
|
Card,
|
||
|
|
CardContent,
|
||
|
|
CardDescription,
|
||
|
|
CardHeader,
|
||
|
|
CardTitle,
|
||
|
|
} from "~/components/ui/card";
|
||
|
|
import { UserAvatar } from "~/components/user_avatar";
|
||
|
|
|
||
|
|
const Dashboard: NextPageWithLayout = () => {
|
||
|
|
const { t } = useTranslation();
|
||
|
|
const { data: userData, isLoading } = api.users.getClientProfilo.useQuery({
|
||
|
|
id: undefined,
|
||
|
|
});
|
||
|
|
const session = useSession();
|
||
|
|
if (isLoading) return <LoadingPage />;
|
||
|
|
if (!userData || !session.user) return <Status500 />;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<Head>
|
||
|
|
<title>{t.heads.area_riservata_titolo}</title>
|
||
|
|
<meta name="description" content={t.heads.area_riservata_description} />
|
||
|
|
</Head>
|
||
|
|
|
||
|
|
<div className="mx-auto w-full max-w-5xl grow p-4">
|
||
|
|
<div className="flex p-1 py-2">
|
||
|
|
<UserAvatar
|
||
|
|
username={session.user.username}
|
||
|
|
userId={session.user.id}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<div className="flex flex-col items-start justify-center pl-4">
|
||
|
|
<h1 className="text-primary text-2xl font-bold">Profilo Utente</h1>
|
||
|
|
<p className="text-muted-foreground text-sm">
|
||
|
|
Gestisci le tue informazioni personali e le preferenze di account.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="space-y-4 pt-4">
|
||
|
|
<div className="flex flex-col-reverse gap-4 sm:flex-row">
|
||
|
|
<div className="w-full pb-10">
|
||
|
|
<Tabs defaultValue="account" className="w-full">
|
||
|
|
<TabsList className="mb-2">
|
||
|
|
<TabsTrigger value="account">Account</TabsTrigger>
|
||
|
|
<TabsTrigger value="anagrafica">Anagrafica</TabsTrigger>
|
||
|
|
</TabsList>
|
||
|
|
<TabsContent value="account" className="flex flex-col gap-8">
|
||
|
|
<Card>
|
||
|
|
<CardHeader>
|
||
|
|
<CardTitle>Dati Account</CardTitle>
|
||
|
|
<CardDescription className="sr-only">
|
||
|
|
Card Description
|
||
|
|
</CardDescription>
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent>
|
||
|
|
<ProfileFormAccount
|
||
|
|
id={userData.id}
|
||
|
|
nome={userData.nome}
|
||
|
|
cognome={userData.cognome}
|
||
|
|
email={userData.email}
|
||
|
|
telefono={userData.telefono}
|
||
|
|
/>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
<Card>
|
||
|
|
<CardHeader>
|
||
|
|
<CardTitle>Cambia Password</CardTitle>
|
||
|
|
<CardDescription className="sr-only">
|
||
|
|
Card Description
|
||
|
|
</CardDescription>
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent>
|
||
|
|
<ChangePasswordForm />
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
<div className="flex flex-col gap-2 p-2">
|
||
|
|
<h4 className="font-medium">Ti sei registrato il:</h4>
|
||
|
|
<p>{userData.created_at?.toLocaleString()}</p>
|
||
|
|
</div>
|
||
|
|
</TabsContent>
|
||
|
|
<TabsContent value="anagrafica" className="h-full space-y-6">
|
||
|
|
<Card>
|
||
|
|
<CardHeader>
|
||
|
|
<CardTitle>Dati Anagrafici</CardTitle>
|
||
|
|
<CardDescription className="sr-only">
|
||
|
|
Card Description
|
||
|
|
</CardDescription>
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent>
|
||
|
|
<ProfileFormAnagrafica userData={userData} />
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
</TabsContent>
|
||
|
|
</Tabs>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
export default Dashboard;
|
||
|
|
|
||
|
|
Dashboard.getLayout = function getLayout(page) {
|
||
|
|
return <AreaRiservataLayout>{page}</AreaRiservataLayout>;
|
||
|
|
};
|