Locations added
This commit is contained in:
cdricms
89
frontend/app/(auth)/dashboard/locations/_locations.tsx
Normal file
89
frontend/app/(auth)/dashboard/locations/_locations.tsx
Normal file
@@ -0,0 +1,89 @@
|
||||
"use client";
|
||||
|
||||
import LocationDialog from "@/components/locations/location-dialog";
|
||||
import IUser from "@/interfaces/IUser";
|
||||
import hasPermissions from "@/lib/hasPermissions";
|
||||
import { useState } from "react";
|
||||
import { Location } from "@/types/types";
|
||||
import request from "@/lib/request";
|
||||
import { useApi } from "@/hooks/use-api";
|
||||
import { LocationCard } from "@/components/locations/location-card";
|
||||
|
||||
export default function LocationsPage({ user }: { user: IUser }) {
|
||||
const { locations: locationsPerm } = hasPermissions(user.roles, {
|
||||
locations: ["update", "insert", "delete"],
|
||||
} as const);
|
||||
|
||||
const locations = useApi<Location[]>("/locations/all");
|
||||
|
||||
const onUpdate = async (l: Location) => {
|
||||
try {
|
||||
const res = await request("/locations", {
|
||||
method: "PATCH",
|
||||
body: l,
|
||||
requiresAuth: true,
|
||||
});
|
||||
if (res.status === "Success") {
|
||||
locations.mutate();
|
||||
} else {
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
};
|
||||
|
||||
const onDelete = async (l: Location) => {
|
||||
try {
|
||||
const res = await request("/locations", {
|
||||
method: "DELETE",
|
||||
body: l,
|
||||
requiresAuth: true,
|
||||
});
|
||||
|
||||
if (res.status === "Success") locations.mutate();
|
||||
else {
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="p-4 flex flex-col gap-2">
|
||||
{locationsPerm.insert && (
|
||||
<div className="self-end">
|
||||
<LocationDialog
|
||||
onAdd={async (l) => {
|
||||
try {
|
||||
const res = await request("/locations/new", {
|
||||
body: l,
|
||||
method: "POST",
|
||||
requiresAuth: true,
|
||||
csrfToken: false,
|
||||
});
|
||||
if (res.status === "Success") {
|
||||
locations.mutate();
|
||||
} else {
|
||||
}
|
||||
} catch (e) {}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<section className="flex flex-wrap gap-2">
|
||||
{locations.data?.map((l) => {
|
||||
return (
|
||||
<LocationCard
|
||||
key={`${l.city}:${l.street}:${l.postalCode}`}
|
||||
location={l}
|
||||
onUpdate={onUpdate}
|
||||
onDelete={onDelete}
|
||||
canUpdate={locationsPerm.update}
|
||||
canDelete={locationsPerm.delete}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
21
frontend/app/(auth)/dashboard/locations/page.tsx
Normal file
21
frontend/app/(auth)/dashboard/locations/page.tsx
Normal file
@@ -0,0 +1,21 @@
|
||||
"use server";
|
||||
import getMe from "@/lib/getMe";
|
||||
import hasPermissions from "@/lib/hasPermissions";
|
||||
import { redirect } from "next/navigation";
|
||||
import LocationsPage from "./_locations";
|
||||
|
||||
export default async function Page() {
|
||||
const me = await getMe();
|
||||
if (
|
||||
!me ||
|
||||
me.status === "Error" ||
|
||||
!me.data ||
|
||||
!hasPermissions(me.data.roles, {
|
||||
locations: ["get"],
|
||||
} as const).all
|
||||
) {
|
||||
redirect("/dashboard");
|
||||
}
|
||||
|
||||
return <LocationsPage user={me.data} />;
|
||||
}
|
||||
@@ -1,6 +1,10 @@
|
||||
export const dynamic = "force-dynamic"; // Prevents static rendering
|
||||
|
||||
import { LocationCard } from "@/components/locations/location-card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
|
||||
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
|
||||
import { Info } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
@@ -12,197 +16,202 @@ import {
|
||||
} from "@/components/ui/card";
|
||||
import { SITE_NAME } from "@/lib/constants";
|
||||
import getShortcode from "@/lib/getShortcode";
|
||||
import request from "@/lib/request";
|
||||
import { Location } from "@/types/types";
|
||||
import { CheckIcon } from "lucide-react";
|
||||
|
||||
export default async function About() {
|
||||
const make_contact_div = (
|
||||
<a className="w-full" href="/contact">
|
||||
<Button className="w-full" variant={"outline"}>
|
||||
Prendre contact
|
||||
</Button>
|
||||
</a>
|
||||
);
|
||||
// Define props interface for PricingCard
|
||||
interface PricingCardProps {
|
||||
title: string;
|
||||
price: number;
|
||||
description: string;
|
||||
features: string[];
|
||||
isPopular?: boolean;
|
||||
ctaText?: string;
|
||||
ctaLink?: string;
|
||||
}
|
||||
|
||||
const UnderConstructionBanner = () => {
|
||||
return (
|
||||
<Alert variant="destructive" className="rounded-2xl shadow-md mb-4">
|
||||
<Info className="h-5 w-5 text-red-500 mr-2" />
|
||||
<div>
|
||||
<AlertTitle>Attention</AlertTitle>
|
||||
<AlertDescription>
|
||||
Cette page est encore en cours de construction et les
|
||||
informations listées peuvent ne pas être exactes pour le
|
||||
moment.
|
||||
</AlertDescription>
|
||||
</div>
|
||||
</Alert>
|
||||
);
|
||||
};
|
||||
|
||||
// Reusable Pricing Card Component
|
||||
const PricingCard: React.FC<PricingCardProps> = ({
|
||||
title,
|
||||
price,
|
||||
description,
|
||||
features,
|
||||
isPopular = false,
|
||||
ctaText = "Prendre contact",
|
||||
ctaLink = "/contact",
|
||||
}) => (
|
||||
<Card
|
||||
className={`border transition-all duration-300 hover:shadow-lg flex-1 max-w-md ${
|
||||
isPopular ? "border-primary shadow-lg" : "shadow-sm"
|
||||
}`}
|
||||
>
|
||||
<CardHeader className="text-center pb-2">
|
||||
{isPopular && (
|
||||
<Badge className="uppercase w-max self-center mb-3 bg-gradient-to-r from-indigo-500 to-purple-500">
|
||||
Le plus populaire
|
||||
</Badge>
|
||||
)}
|
||||
<CardTitle className="mb-4 text-2xl">{title}</CardTitle>
|
||||
<span className="font-bold text-4xl">{price}€</span>
|
||||
</CardHeader>
|
||||
<CardDescription className="text-center w-11/12 mx-auto">
|
||||
{description}
|
||||
</CardDescription>
|
||||
<CardContent>
|
||||
<ul className="mt-6 space-y-3 text-sm">
|
||||
{features.map((feature, index) => (
|
||||
<li key={index} className="flex space-x-2">
|
||||
<CheckIcon className="flex-shrink-0 mt-0.5 h-4 w-4 text-green-500" />
|
||||
<span className="text-muted-foreground">{feature}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
<a href={ctaLink} className="w-full">
|
||||
<Button
|
||||
className={`w-full transition-all duration-300 ${
|
||||
isPopular
|
||||
? "bg-gradient-to-r from-indigo-500 to-purple-500 hover:from-indigo-600 hover:to-purple-600"
|
||||
: "bg-gray-800 hover:bg-gray-900"
|
||||
}`}
|
||||
aria-label={`Contact us for ${title} plan`}
|
||||
>
|
||||
{ctaText}
|
||||
</Button>
|
||||
</a>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
);
|
||||
|
||||
export default async function About() {
|
||||
const profileImage = await getShortcode("profile_image");
|
||||
const locations = await request<Location[]>("/locations/all", {
|
||||
requiresAuth: false,
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-4 w-full p-12 items-stretch">
|
||||
{/* Text Section - Takes 2/3 on large screens */}
|
||||
<div className="lg:col-span-2 flex flex-col justify-center">
|
||||
<Card className="h-full">
|
||||
<CardHeader className="text-center p-4">
|
||||
<CardTitle className="text-5xl">
|
||||
Nicolas GORUK
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Président de l'association française de{" "}
|
||||
{SITE_NAME}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="px-8 sm:px-10 py-14">
|
||||
<div className="flex flex-col gap-4 justify-center">
|
||||
<h2 className="text-center text-xl font-semibold sm:text-3xl">
|
||||
Lorem ipsum, dolor sit amet
|
||||
</h2>
|
||||
<p className="text-muted-foreground">
|
||||
Lorem ipsum dolor sit amet consectetur
|
||||
adipisicing elit. Debitis accusamus
|
||||
illum, nam nemo quod delectus velit
|
||||
repellat odio dolorum sapiente soluta,
|
||||
aliquam atque praesentium ea placeat ad,
|
||||
neque eveniet adipisci?
|
||||
</p>
|
||||
<h2 className="text-center text-xl font-semibold sm:text-3xl">
|
||||
Lorem ipsum, dolor sit amet
|
||||
</h2>
|
||||
<p className="text-muted-foreground">
|
||||
Lorem ipsum dolor sit amet consectetur
|
||||
adipisicing elit. Debitis accusamus
|
||||
illum, nam nemo quod delectus velit
|
||||
repellat odio dolorum sapiente soluta,
|
||||
aliquam atque praesentium ea placeat ad,
|
||||
neque eveniet adipisci?
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Image Section - Takes 1/3 on large screens */}
|
||||
<div className="lg:col-span-1 flex items-center">
|
||||
<img
|
||||
className="w-full h-full object-cover rounded"
|
||||
src={
|
||||
profileImage?.media?.url ??
|
||||
"https://shadcnblocks.com/images/block/placeholder-dark-1.svg"
|
||||
}
|
||||
alt="president profile image"
|
||||
/>
|
||||
</div>
|
||||
<div className="min-h-screen bg-gradient-to-b from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800">
|
||||
{/* Hero Section */}
|
||||
<div className="px-6 py-12 lg:py-16 lg:px-12">
|
||||
<UnderConstructionBanner />
|
||||
</div>
|
||||
<section className="grid grid-cols-1 lg:grid-cols-3 gap-6 w-full px-6 py-12 lg:px-12 lg:py-16 items-stretch">
|
||||
{/* Text Section - Takes 2/3 on large screens */}
|
||||
<div className="lg:col-span-2 flex flex-col justify-center">
|
||||
<Card className="h-full shadow-md transition-all duration-300 hover:shadow-xl">
|
||||
<CardHeader className="text-center p-6">
|
||||
<CardTitle className="text-4xl lg:text-5xl font-bold">
|
||||
Nicolas GORUK
|
||||
</CardTitle>
|
||||
<CardDescription className="text-lg mt-2">
|
||||
Président de l'association française de{" "}
|
||||
{SITE_NAME}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="px-6 sm:px-10 py-12 space-y-6">
|
||||
<div className="flex flex-col gap-6 justify-center text-justify">
|
||||
<h2 className="text-center text-xl font-semibold sm:text-2xl">
|
||||
Notre mission
|
||||
</h2>
|
||||
<p className="text-muted-foreground text-base">
|
||||
Chez {SITE_NAME}, nous nous engageons à
|
||||
promouvoir l'excellence. Nous offrons un
|
||||
environnement dynamique pour tous nos
|
||||
membres, avec des événements réguliers et
|
||||
des opportunités uniques.
|
||||
</p>
|
||||
<h2 className="text-center text-xl font-semibold sm:text-2xl">
|
||||
Notre histoire
|
||||
</h2>
|
||||
<p className="text-muted-foreground text-base">
|
||||
Fondée en [année], notre association a
|
||||
grandi pour devenir un acteur clé dans
|
||||
[domaine]. Nous avons organisé [nombre]
|
||||
événements et touché plus de [nombre]
|
||||
personnes grâce à nos initiatives.
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<div className="max-w-2xl mx-auto text-center mb-10 lg:mb-14">
|
||||
<h2 className="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0">
|
||||
|
||||
{/* Image Section - Takes 1/3 on large screens */}
|
||||
<div className="lg:col-span-1 flex items-center">
|
||||
<img
|
||||
className="w-full h-full object-cover rounded-lg shadow-md transition-transform duration-300 hover:scale-105"
|
||||
src={
|
||||
profileImage?.media?.url ??
|
||||
"https://shadcnblocks.com/images/block/placeholder-dark-1.svg"
|
||||
}
|
||||
alt="Portrait de Nicolas GORUK, président de l'association"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Locations Section */}
|
||||
{locations.data && locations.data.length > 0 && (
|
||||
<section className="py-16 px-6 lg:px-12">
|
||||
<h2 className="scroll-m-20 border-b pb-3 text-3xl font-semibold tracking-tight text-center">
|
||||
Retrouvez-nous
|
||||
</h2>
|
||||
<div className="mt-12 flex flex-wrap gap-6 justify-center">
|
||||
{locations.data.map((l: Location) => (
|
||||
<LocationCard
|
||||
key={`${l.street}-${l.city}`}
|
||||
location={l}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* Pricing Section */}
|
||||
<section className="py-16 px-6 lg:px-12">
|
||||
<div className="max-w-3xl mx-auto text-center mb-12">
|
||||
<h2 className="scroll-m-20 border-b pb-3 text-3xl font-semibold tracking-tight">
|
||||
Tarifs
|
||||
</h2>
|
||||
<p className="mt-1 text-muted-foreground">
|
||||
License accessible à partir de 90€. Aide "une aide de
|
||||
l'état" possible.
|
||||
<p className="mt-3 text-muted-foreground text-base">
|
||||
Adhésion à partir de [prix]€.
|
||||
</p>
|
||||
<p className="mt-1 text-muted-foreground">
|
||||
equipement (gants, casque) pris en compte. Prévoir une
|
||||
tenue sportive adaptée.
|
||||
<p className="mt-2 text-muted-foreground text-base">
|
||||
Équipement (gants, casque) fourni. Prévoir une tenue
|
||||
sportive adaptée.
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-12 flex flex-col sm:flex-row px-12 justify-center gap-6 lg:items-center">
|
||||
<Card className="border-primary">
|
||||
<CardHeader className="text-center pb-2">
|
||||
<Badge className="uppercase w-max self-center mb-3">
|
||||
Most popular
|
||||
</Badge>
|
||||
<CardTitle className="!mb-7">Startup</CardTitle>
|
||||
<span className="font-bold text-5xl">£39</span>
|
||||
</CardHeader>
|
||||
<CardDescription className="text-center w-11/12 mx-auto">
|
||||
All the basics for starting a new business
|
||||
</CardDescription>
|
||||
<CardContent>
|
||||
<ul className="mt-7 space-y-2.5 text-sm">
|
||||
<li className="flex space-x-2">
|
||||
<CheckIcon className="flex-shrink-0 mt-0.5 h-4 w-4" />
|
||||
<span className="text-muted-foreground">
|
||||
2 user
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex space-x-2">
|
||||
<CheckIcon className="flex-shrink-0 mt-0.5 h-4 w-4" />
|
||||
<span className="text-muted-foreground">
|
||||
Plan features
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex space-x-2">
|
||||
<CheckIcon className="flex-shrink-0 mt-0.5 h-4 w-4" />
|
||||
<span className="text-muted-foreground">
|
||||
Product support
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
<a href="/contact" className="w-full">
|
||||
<Button className="w-full">
|
||||
Prendre contact
|
||||
</Button>
|
||||
</a>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader className="text-center pb-2">
|
||||
<CardTitle className="mb-7">Team</CardTitle>
|
||||
<span className="font-bold text-5xl">£89</span>
|
||||
</CardHeader>
|
||||
<CardDescription className="text-center w-11/12 mx-auto">
|
||||
Everything you need for a growing business
|
||||
</CardDescription>
|
||||
<CardContent>
|
||||
<ul className="mt-7 space-y-2.5 text-sm">
|
||||
<li className="flex space-x-2">
|
||||
<CheckIcon className="flex-shrink-0 mt-0.5 h-4 w-4" />
|
||||
<span className="text-muted-foreground">
|
||||
5 user
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex space-x-2">
|
||||
<CheckIcon className="flex-shrink-0 mt-0.5 h-4 w-4" />
|
||||
<span className="text-muted-foreground">
|
||||
Plan features
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex space-x-2">
|
||||
<CheckIcon className="flex-shrink-0 mt-0.5 h-4 w-4" />
|
||||
<span className="text-muted-foreground">
|
||||
Product support
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
<CardFooter>{make_contact_div}</CardFooter>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader className="text-center pb-2">
|
||||
<CardTitle className="mb-7">Enterprise</CardTitle>
|
||||
<span className="font-bold text-5xl">149</span>
|
||||
</CardHeader>
|
||||
<CardDescription className="text-center w-11/12 mx-auto">
|
||||
Advanced features for scaling your business
|
||||
</CardDescription>
|
||||
<CardContent>
|
||||
<ul className="mt-7 space-y-2.5 text-sm">
|
||||
<li className="flex space-x-2">
|
||||
<CheckIcon className="flex-shrink-0 mt-0.5 h-4 w-4" />
|
||||
<span className="text-muted-foreground">
|
||||
10 user
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex space-x-2">
|
||||
<CheckIcon className="flex-shrink-0 mt-0.5 h-4 w-4" />
|
||||
<span className="text-muted-foreground">
|
||||
Plan features
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex space-x-2">
|
||||
<CheckIcon className="flex-shrink-0 mt-0.5 h-4 w-4" />
|
||||
<span className="text-muted-foreground">
|
||||
Product support
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
<CardFooter>{make_contact_div}</CardFooter>
|
||||
</Card>
|
||||
<div className="mt-12 flex flex-col sm:flex-row justify-center gap-6 lg:items-center">
|
||||
<PricingCard
|
||||
title="Étudiant"
|
||||
price={125}
|
||||
description="Tarif d'une année pour un étudiant."
|
||||
features={[]}
|
||||
/>
|
||||
<PricingCard
|
||||
title="Normal"
|
||||
price={150}
|
||||
description="Tarif normal pour n'importe quel individu."
|
||||
features={[]}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user