259 lines
7.3 KiB
TypeScript
259 lines
7.3 KiB
TypeScript
|
import { useContext, type ReactNode } from "react";
|
||
|
|
import { BannerFactory } from "~/components/banners";
|
||
|
|
import { Footer, MiniFooter } from "~/components/footer";
|
||
|
|
import { SiteHeader } from "~/components/navbar/site-header";
|
||
|
|
import { useTranslation } from "~/providers/I18nProvider";
|
||
|
|
import { UserViewContext, UserViewProvider } from "~/lib/userViewContext";
|
||
|
|
import Head from "next/head";
|
||
|
|
import Link from "next/link";
|
||
|
|
import {
|
||
|
|
ExternalLink,
|
||
|
|
Mail,
|
||
|
|
MessagesSquare,
|
||
|
|
Paperclip,
|
||
|
|
Search,
|
||
|
|
ShoppingBag,
|
||
|
|
Tickets,
|
||
|
|
UserCog,
|
||
|
|
} from "lucide-react";
|
||
|
|
import { Button } from "~/components/ui/button";
|
||
|
|
import { Separator } from "~/components/ui/separator";
|
||
|
|
import { usePathname } from "next/navigation";
|
||
|
|
import { api } from "~/utils/api";
|
||
|
|
import { Sidebar } from "~/components/area-riservata/sidebar";
|
||
|
|
import type { UsersId } from "~/schemas/public/Users";
|
||
|
|
import toast from "react-hot-toast";
|
||
|
|
import { useRouter } from "next/router";
|
||
|
|
import { useSession } from "~/providers/SessionProvider";
|
||
|
|
import { WhatsAppIcon } from "~/components/svgs";
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
children: ReactNode;
|
||
|
|
noFooter?: boolean;
|
||
|
|
}
|
||
|
|
export const Layout = ({ children, noFooter }: Props) => {
|
||
|
|
const { data: bannerData } = api.settings.getBannerData.useQuery({
|
||
|
|
area_riservata: false,
|
||
|
|
});
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="flex min-h-screen w-full flex-col">
|
||
|
|
<SiteHeader />
|
||
|
|
{bannerData?.map((banner) => (
|
||
|
|
<div key={`banner-elem-${banner.idbanner}`}>
|
||
|
|
{BannerFactory(banner)}
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
<main className="h-full flex-1 grow">{children}</main>
|
||
|
|
|
||
|
|
{!noFooter && <Footer />}
|
||
|
|
{/* <CookieConsent /> */}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export const AreaRiservataLayout = ({
|
||
|
|
children,
|
||
|
|
noSidebar,
|
||
|
|
noFooter,
|
||
|
|
}: {
|
||
|
|
children: ReactNode;
|
||
|
|
noSidebar?: boolean;
|
||
|
|
noFooter?: boolean;
|
||
|
|
}) => {
|
||
|
|
const { data: bannerData } = api.settings.getBannerData.useQuery({
|
||
|
|
area_riservata: true,
|
||
|
|
});
|
||
|
|
const session = useSession();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="flex h-full min-h-screen flex-col text-clip">
|
||
|
|
<SiteHeader />
|
||
|
|
{bannerData?.map((banner) => (
|
||
|
|
<div key={`banner-elem-${banner.idbanner}`}>
|
||
|
|
{BannerFactory(banner)}
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
<main className="flex h-full flex-1 overflow-auto">
|
||
|
|
<div className="flex h-auto w-full flex-col md:flex-row">
|
||
|
|
{noSidebar ? null : (
|
||
|
|
<Sidebar isAdmin={session.user?.isAdmin || false} />
|
||
|
|
)}
|
||
|
|
{children}
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
{!noFooter && <MiniFooter />}
|
||
|
|
|
||
|
|
{/* <CookieConsent /> */}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export const AreaRiservataLayoutUserView = ({
|
||
|
|
children,
|
||
|
|
}: {
|
||
|
|
children: ReactNode & { props: { userId: UsersId } };
|
||
|
|
}) => {
|
||
|
|
const { t } = useTranslation();
|
||
|
|
|
||
|
|
const props = children.props as { userId: UsersId };
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="flex h-full min-h-screen flex-col bg-white">
|
||
|
|
<SiteHeader />
|
||
|
|
<main className="flex h-full flex-1 overflow-auto">
|
||
|
|
<UserViewProvider userId={props.userId}>
|
||
|
|
<Head>
|
||
|
|
<title>{t.heads.area_riservata_titolo}</title>
|
||
|
|
<meta
|
||
|
|
name="description"
|
||
|
|
content={t.heads.area_riservata_description}
|
||
|
|
/>
|
||
|
|
</Head>
|
||
|
|
<div className="flex h-auto w-full flex-col md:flex-row">
|
||
|
|
<Sidebar isAdmin />
|
||
|
|
|
||
|
|
<div className="mx-4 my-3 flex-1 overflow-auto">
|
||
|
|
<UserViewHeader />
|
||
|
|
|
||
|
|
{children}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</UserViewProvider>
|
||
|
|
</main>
|
||
|
|
|
||
|
|
<MiniFooter />
|
||
|
|
|
||
|
|
{/* <CookieConsent /> */}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
const UserViewHeader = () => {
|
||
|
|
const data = useContext(UserViewContext);
|
||
|
|
const pathname = usePathname();
|
||
|
|
const router = useRouter();
|
||
|
|
const { mutate: swap } = api.auth.swapUser.useMutation({
|
||
|
|
onSuccess: async () => {
|
||
|
|
toast.success("Utente cambiato con successo");
|
||
|
|
await router.push("/area-riservata/dashboard");
|
||
|
|
router.reload();
|
||
|
|
},
|
||
|
|
});
|
||
|
|
if (!data) return <div>Errore</div>;
|
||
|
|
return (
|
||
|
|
<div className="mb-5 flex flex-col space-y-5">
|
||
|
|
<div className="flex flex-row flex-wrap items-baseline gap-3">
|
||
|
|
<div className="text-3xl">{data.username}</div>
|
||
|
|
<div className="text-muted-foreground text-sm">
|
||
|
|
{data.email} | {data.telefono}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<Link href={`https://wa.me/${data.telefono}`} target="_blank">
|
||
|
|
<Button
|
||
|
|
className="flex items-center gap-2"
|
||
|
|
variant="success"
|
||
|
|
size="sm"
|
||
|
|
>
|
||
|
|
<WhatsAppIcon className="size-4 fill-white" />
|
||
|
|
WhatsApp
|
||
|
|
</Button>
|
||
|
|
</Link>
|
||
|
|
</div>
|
||
|
|
<div className="flex flex-row flex-wrap gap-2">
|
||
|
|
<Link href={`/area-riservata/admin/user-view/edit-user/${data.id}`}>
|
||
|
|
<Button
|
||
|
|
className="flex items-center gap-2 border"
|
||
|
|
variant={pathname.includes("edit-user") ? "secondary" : "outline"}
|
||
|
|
size="sm"
|
||
|
|
>
|
||
|
|
<UserCog /> Profilo
|
||
|
|
</Button>
|
||
|
|
</Link>
|
||
|
|
<Link href={`/area-riservata/admin/user-view/servizio/${data.id}`}>
|
||
|
|
<Button
|
||
|
|
className="flex items-center gap-2 border"
|
||
|
|
variant={pathname.includes("servizio") ? "secondary" : "outline"}
|
||
|
|
size="sm"
|
||
|
|
>
|
||
|
|
<Tickets /> Servizi
|
||
|
|
</Button>
|
||
|
|
</Link>
|
||
|
|
|
||
|
|
<Link href={`/area-riservata/admin/user-view/ricerca/${data.id}`}>
|
||
|
|
<Button
|
||
|
|
className="flex items-center gap-2 border"
|
||
|
|
variant={pathname.includes("ricerca") ? "secondary" : "outline"}
|
||
|
|
size="sm"
|
||
|
|
>
|
||
|
|
<Search /> Ricerca
|
||
|
|
</Button>
|
||
|
|
</Link>
|
||
|
|
<Link href={`/area-riservata/admin/user-view/comunicazioni/${data.id}`}>
|
||
|
|
<Button
|
||
|
|
className="flex items-center gap-2 border"
|
||
|
|
variant={
|
||
|
|
pathname.includes("comunicazioni") ? "secondary" : "outline"
|
||
|
|
}
|
||
|
|
size="sm"
|
||
|
|
>
|
||
|
|
<Mail /> Comunicazioni
|
||
|
|
</Button>
|
||
|
|
</Link>
|
||
|
|
|
||
|
|
<Link href={`/area-riservata/admin/user-view/ordini/${data.id}`}>
|
||
|
|
<Button
|
||
|
|
className="flex items-center gap-2 border"
|
||
|
|
variant={pathname.includes("ordini") ? "secondary" : "outline"}
|
||
|
|
size="sm"
|
||
|
|
>
|
||
|
|
<ShoppingBag /> Ordini
|
||
|
|
</Button>
|
||
|
|
</Link>
|
||
|
|
<Link href={`/area-riservata/admin/user-view/allegati/${data.id}`}>
|
||
|
|
<Button
|
||
|
|
className="flex items-center gap-2 border"
|
||
|
|
variant={pathname.includes("allegati") ? "secondary" : "outline"}
|
||
|
|
size="sm"
|
||
|
|
>
|
||
|
|
<Paperclip /> Allegati
|
||
|
|
</Button>
|
||
|
|
</Link>
|
||
|
|
|
||
|
|
<Link
|
||
|
|
href={
|
||
|
|
data.chatid
|
||
|
|
? {
|
||
|
|
pathname: "/area-riservata/admin/chats",
|
||
|
|
query: { chatid: data.chatid },
|
||
|
|
}
|
||
|
|
: "/area-riservata/admin/chats"
|
||
|
|
}
|
||
|
|
target="_blank"
|
||
|
|
>
|
||
|
|
<Button
|
||
|
|
className="flex items-center gap-2 border"
|
||
|
|
variant={!data.chatid ? "ghost" : "outline"}
|
||
|
|
size="sm"
|
||
|
|
>
|
||
|
|
<MessagesSquare /> Chat
|
||
|
|
</Button>
|
||
|
|
</Link>
|
||
|
|
|
||
|
|
<Button
|
||
|
|
size="sm"
|
||
|
|
className="flex gap-2"
|
||
|
|
onClick={() =>
|
||
|
|
swap({
|
||
|
|
id: data.id,
|
||
|
|
})
|
||
|
|
}
|
||
|
|
>
|
||
|
|
<ExternalLink /> Login
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
<Separator />
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|