ristoo/privatedocs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: merge

Browse Source
This commit is contained in:
Orace.A 2025-03-28 19:24:49 +01:00
commit fed5a3987e
13 changed files with 490 additions and 376 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
src/app/admin/admins/page.tsx
View File

@ -23,7 +23,7 @@ export default function Admins() {
const [selectedAdminId, setSelectedAdminId] = useState<string | null>(null); const [selectedAdminId, setSelectedAdminId] = useState<string | null>(null);
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const { const {
data: users, data: users,
refetch, refetch,
@ -47,7 +47,6 @@ export default function Admins() {
}, },
}); });
const createMutation = useMutation({ const createMutation = useMutation({
mutationFn: async (data: { mutationFn: async (data: {
last_name: string; last_name: string;
@ -193,7 +192,7 @@ export default function Admins() {
width={24} width={24}
height={24} height={24}
src={icons.editIcon} src={icons.editIcon}
className="cursor-pointer responsive-icon" className="cursor-pointer responsive-icon mr-1"
/> />
</div> </div>
} }
@ -227,13 +226,19 @@ export default function Admins() {
submit={updateMutation.mutate} submit={updateMutation.mutate}
schema={adminSchema} schema={adminSchema}
child={ child={
<button <div className="flex justify-center">
type="submit" <button
disabled={updateMutation.isPending} type="submit"
className={`${updateMutation.isPending ? "btn-auth-loading" : "btn-auth"} mt-4 cursor-pointer`} disabled={updateMutation.isPending}
> className={`${
{updateMutation.isPending ? "En cours..." : "Modifier"} updateMutation.isPending
</button> ? "btn-auth-loading"
: "btn-auth"
} cta modal-cta mt-4 cursor-pointer`}
>
{updateMutation.isPending ? "En cours..." : "Modifier"}
</button>
</div>
} }
/> />
} }
@ -265,7 +270,9 @@ export default function Admins() {
title="Supprimer un admin" title="Supprimer un admin"
content={ content={
<div> <div>
<p className="text-center">Voulez-vous vraiment supprimer cet admin ?</p> <p className="text-center">
Voulez-vous vraiment supprimer cet admin ?
</p>
<div className="grid grid-cols-2 gap-3 mt-3"> <div className="grid grid-cols-2 gap-3 mt-3">
<button <button
className="bg-blue-100 text-blue-600 py-2 px-4 rounded-full cursor-pointer" className="bg-blue-100 text-blue-600 py-2 px-4 rounded-full cursor-pointer"
@ -321,8 +328,9 @@ export default function Admins() {
<DropdownMenu.Root> <DropdownMenu.Root>
<DropdownMenu.Trigger asChild> <DropdownMenu.Trigger asChild>
<p className="cursor-pointer rounded-full bg-gray-300 text-gray-500 p-2"> <p className="cta cancel flex gap-2">
Sélectionner une action Sélectionner une action
<Image src={icons.arrowDown} alt="arrow down" />
</p> </p>
</DropdownMenu.Trigger> </DropdownMenu.Trigger>
@ -353,10 +361,7 @@ export default function Admins() {
} }
}} }}
trigger={ trigger={
<div <div onClick={() => setOpenModal(true)} className="cta">
onClick={() => setOpenModal(true)}
className="cursor-pointer p-3 bg-blue-600 text-white rounded-full"
>
Ajouter un admin Ajouter un admin
</div> </div>
} }
@ -385,13 +390,21 @@ export default function Admins() {
submit={createMutation.mutate} submit={createMutation.mutate}
schema={adminSchema} schema={adminSchema}
child={ child={
<button <div className="flex justify-center">
type="submit" <button
disabled={createMutation.isPending} type="submit"
className={`${createMutation.isPending ? "btn-auth-loading" : "btn-auth"} mt-4 cursor-pointer`} disabled={createMutation.isPending}
> className={`${
{createMutation.isPending ? "Création de l'admin..." : "Créer le compte"} createMutation.isPending
</button> ? "btn-auth-loading"
: "btn-auth"
} cta modal-cta mt-4 cursor-pointer`}
>
{createMutation.isPending
? "Création de l'admin..."
: "Créer le compte"}
</button>
</div>
} }
/> />
} }

355
src/app/admin/home/page.tsx
View File

@ -1,209 +1,224 @@
"use client" "use client";
import { icons } from "#/assets/icons" import { icons } from "#/assets/icons";
import Statistics from "#/components/stats" import Statistics from "#/components/stats";
import Table from "#/components/table/table" import Table from "#/components/table/table";
import { Company } from "#/types" import { Company } from "#/types";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query" import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { ColumnDef } from "@tanstack/react-table" import { ColumnDef } from "@tanstack/react-table";
import axios from "axios" import axios from "axios";
import { useSession } from "next-auth/react" import { useSession } from "next-auth/react";
import Image from "next/image" import Image from "next/image";
import { Modal } from "#/components/modal" import { Modal } from "#/components/modal";
import { useState } from "react" import { useState } from "react";
export default function HomePage () { export default function HomePage() {
const { data: session, status } = useSession();
const {data: session, status} = useSession() const queryClient = useQueryClient();
const queryClient = useQueryClient()
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const [selectedId, setSelectedId] = useState<string | null>(null); const [selectedId, setSelectedId] = useState<string | null>(null);
console.log("Session = ", session) console.log("Session = ", session);
const { data: companies, refetch, isLoading} = useQuery({ const {
enabled: status === 'authenticated', data: companies,
refetch,
isLoading,
} = useQuery({
enabled: status === "authenticated",
queryKey: ["companies"], queryKey: ["companies"],
queryFn: async () => { queryFn: async () => {
try { try {
const response = await axios.get( const response = await axios.get(
'https://private-docs-api.intside.co/companies', { "https://private-docs-api.intside.co/companies",
headers: { {
'Authorization': `Bearer ${session?.user.access_token}` headers: {
} Authorization: `Bearer ${session?.user.access_token}`,
} },
) }
);
if(response.data) { if (response.data) {
return response.data.data as Company[] return response.data.data as Company[];
}
} catch (error) {
console.error(error)
} }
} } catch (error) {
}) console.error(error);
}
},
});
const { mutate } = useMutation({ const { mutate } = useMutation({
mutationFn: async (id: string) => { mutationFn: async (id: string) => {
try { try {
const response = await axios.delete( const response = await axios.delete(
`https://private-docs-api.intside.co/companies/${id}/`, { `https://private-docs-api.intside.co/companies/${id}/`,
{
headers: { headers: {
'Authorization': `Bearer ${session?.user.access_token}` Authorization: `Bearer ${session?.user.access_token}`,
} },
} }
) );
if(response.status === 200 || response.status === 201) { if (response.status === 200 || response.status === 201) {
console.log('Suppresion réussie !') console.log("Suppresion réussie !");
setOpen(false) setOpen(false);
} }
} catch (error) { } catch (error) {
console.error(error) console.error(error);
} }
}, },
onSuccess: () => { onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ["companies"] }) queryClient.invalidateQueries({ queryKey: ["companies"] });
refetch()
}
})
refetch();
},
});
const columns: ColumnDef<Company>[] = [ const columns: ColumnDef<Company>[] = [
{ {
accessorKey: "name", accessorKey: "name",
header: "Organisations", header: "Organisations",
}, },
{ {
accessorKey: "total_users", accessorKey: "total_users",
header: "Utilisateurs", header: "Utilisateurs",
}, },
{ {
header: "Administrateurs", header: "Administrateurs",
cell: ({ row }) => { cell: ({ row }) => {
const value = String(row.original.owner.first_name) + " " + String(row.original.owner.last_name) const value =
const initials = String(row.original.owner.first_name[0]) + String(row.original.owner.last_name[0]) String(row.original.owner.first_name) +
return( " " +
<div className="flex space-x-2 items-center"> String(row.original.owner.last_name);
<div className="flex items-center justify-center bg-[#DCDCFE] text-[#246BFD] w-10 h-10 rounded-full"> const initials =
{initials} String(row.original.owner.first_name[0]) +
String(row.original.owner.last_name[0]);
return (
<div className="flex space-x-2 items-center">
<div className="flex items-center justify-center bg-[#DCDCFE] text-[#246BFD] w-10 h-10 rounded-full">
{initials}
</div>
<p>{value}</p>
</div> </div>
<p>{value}</p> );
</div> },
) },
} {
}, accessorKey: "owner.email",
{ header: "Adresse e-mail",
accessorKey: "owner.email", },
header: "Adresse e-mail" {
}, accessorKey: "status",
{ header: "Statut",
accessorKey: "status", cell: ({ cell }) => {
header: "Statut", const status = String(cell.getValue());
cell: ({ cell }) => { return (
const status = String(cell.getValue()) <p
return ( className={`rounded-full px-2 py-1 font-medium text-sm w-20 h-6 text-center
<p ${
className={`rounded-full px-2 py-1 font-medium text-sm w-20 h-6 text-center status === "active"
${ ? "bg-[#ECF9E8] text-[#49C91E]"
status === "active" ? "bg-[#ECF9E8] text-[#49C91E]" : : status === "inactive"
status === "inactive" ? "bg-[#E7EBF3] text-[#9FA8BC]" : ? "bg-[#E7EBF3] text-[#9FA8BC]"
status === "pending" ? "bg-[#EAF7FC] text-[#30B2EA]" : : status === "pending"
status === "blocked" ? "bg-[#FDEBE8] text-[#F33F19]" : ? "bg-[#EAF7FC] text-[#30B2EA]"
"" : status === "blocked"
? "bg-[#FDEBE8] text-[#F33F19]"
: ""
} }
`} `}
> >
{ {status === "active"
status === "active" ? "Actif" : ? "Actif"
status === "inactive" ? "Inactif" : : status === "inactive"
status === "pending" ? "En attente" : ? "Inactif"
status === "blocked" ? "Bloquée" : : status === "pending"
"" ? "En attente"
} : status === "blocked"
</p> ? "Bloquée"
) : ""}
} </p>
}, );
{ },
id: "delete",
cell: ({ row }) => {
const id = String(row.original.id);
return (
<div className="relative p-2 cursor-pointer">
<Modal
open={selectedId === id}
onOpenChange={(isOpen) => {
if (!isOpen) {
setSelectedId(null);
}
}}
trigger={
<div
onClick={() => {
setSelectedId(id);
}}
>
<Image
alt=""
src={icons.trash}
className="cursor-pointer responsive-icon"
/>
</div>
}
title={
<p className="font-bold text-3xl">
Supprimer cette organisation
</p>
}
content={
<div>
<p className="text-center">
Voulez-vous vraiment supprimer cette organisation ?
</p>
<div className="grid grid-cols-2 gap-3 mt-3">
<button
className="bg-blue-100 text-blue-600 py-2 px-4 text-lg rounded-full text-center hover:bg-blue-200"
onClick={() => {
setSelectedId(null);
}}
>
Annuler
</button>
<button
className="bg-red-500 text-white py-2 px-4 text-lg rounded-full text-center hover:bg-red-600"
onClick={() => {
mutate(id);
setSelectedId(null);
}}
>
Supprimer
</button>
</div>
</div>
}
/>
</div>
);
}, },
}, {
] id: "delete",
cell: ({ row }) => {
const id = String(row.original.id);
return (
<div className="relative p-2 cursor-pointer">
<Modal
open={selectedId === id}
onOpenChange={(isOpen) => {
if (!isOpen) {
setSelectedId(null);
}
}}
trigger={
<div
onClick={() => {
setSelectedId(id);
}}
>
<Image
alt=""
src={icons.trash}
className="cursor-pointer responsive-icon"
/>
</div>
}
title={
<p className="font-bold text-3xl">
Supprimer cette organisation
</p>
}
content={
<div>
<p className="text-center">
Voulez-vous vraiment supprimer l'organisation{" "}
<span className="font-bold">{row.original.name}</span> ?
</p>
return( <div className="flex justify-between w-full pt-6 r-gap-24">
<button
className="cta modal-cta cancel"
onClick={() => {
setSelectedId(null);
}}
>
Annuler
</button>
<button
className="cta modal-cta danger"
onClick={() => {
mutate(id);
setSelectedId(null);
}}
>
Supprimer
</button>
</div>
</div>
}
/>
</div>
);
},
},
];
return (
<div className="space-y-10"> <div className="space-y-10">
<Statistics /> <Statistics />
<p className="font-bold text-xl">Dernières organisations actives</p> <p className="font-bold text-xl">Dernières organisations actives</p>
<Table <Table
columns={columns} columns={columns}
isDataLoading={isLoading} isDataLoading={isLoading}
data={companies || []} data={companies || []}
pageSize={5} pageSize={5}
/> />
</div> </div>
) );
} }

2
src/app/admin/organizations/[id]/page.tsx
View File

@ -118,7 +118,7 @@ export default function Profile() {
</div> </div>
<hr /> <hr />
<div className="r-flex p-[32px] r-gap-24"> <div className="r-flex p-[32px] r-gap-24">
<div className="admin-infos r-flex flex-wrap justifyc-center lg:justifyc-start "> <div className="admin-infos r-flex flex-wrap justifyy-center lg:justifyy-start ">
<div className="r-flex-between items-center w-max"> <div className="r-flex-between items-center w-max">
<div className="icon-rounded"> <div className="icon-rounded">
<Image src={icons.userGroupBlue} alt="Documents" /> <Image src={icons.userGroupBlue} alt="Documents" />

6
src/app/admin/organizations/[id]/update/page.tsx
View File

@ -290,7 +290,11 @@ export default function Update() {
onOpenChange={setOpenBlockModal} onOpenChange={setOpenBlockModal}
trigger={ trigger={
<button type="button" className="cta danger"> <button type="button" className="cta danger">
Bloquer {blockMutation.isPending
? "En cours..."
: companyInfos?.status === "blocked"
? "Supprimer"
: "Bloquer"}
</button> </button>
} }
content={ content={

216
src/app/admin/organizations/page.tsx
View File

@ -51,9 +51,7 @@ export default function Organizations() {
}, },
}); });
const { const { data: users } = useQuery({
data: users,
} = useQuery({
enabled: status === "authenticated", enabled: status === "authenticated",
queryKey: ["organizations"], queryKey: ["organizations"],
queryFn: async () => { queryFn: async () => {
@ -167,112 +165,127 @@ export default function Organizations() {
{ {
header: "Administrateurs", header: "Administrateurs",
cell: ({ row }) => { cell: ({ row }) => {
const value = String(row.original.owner.first_name) + " " + String(row.original.owner.last_name) const value =
const initials = String(row.original.owner.first_name[0]) + String(row.original.owner.last_name[0]) String(row.original.owner.first_name) +
return( " " +
String(row.original.owner.last_name);
const initials =
String(row.original.owner.first_name[0]) +
String(row.original.owner.last_name[0]);
return (
<div className="flex space-x-2 items-center"> <div className="flex space-x-2 items-center">
<div className="flex items-center justify-center bg-[#DCDCFE] text-[#246BFD] w-10 h-10 rounded-full"> <div className="flex items-center justify-center bg-[#DCDCFE] text-[#246BFD] w-10 h-10 rounded-full">
{initials} {initials}
</div> </div>
<p>{value}</p> <p>{value}</p>
</div> </div>
) );
} },
}, },
{ {
accessorKey: "owner.email", accessorKey: "owner.email",
header: "Adresse e-mail" header: "Adresse e-mail",
}, },
{ {
accessorKey: "status", accessorKey: "status",
header: "Statut", header: "Statut",
cell: ({ cell }) => { cell: ({ cell }) => {
const status = String(cell.getValue()) const status = String(cell.getValue());
return ( return (
<p <p
className={`rounded-full px-2 py-1 font-medium text-sm w-20 h-6 text-center className={`rounded-full px-2 py-1 font-medium text-sm w-20 h-6 text-center
${ ${
status === "active" ? "bg-[#ECF9E8] text-[#49C91E]" : status === "active"
status === "inactive" ? "bg-[#E7EBF3] text-[#9FA8BC]" : ? "font-medium w-[80px] h-[24px] bg-[#ECF9E8] text-[#49C91E]"
status === "pending" ? "bg-[#EAF7FC] text-[#30B2EA]" : : status === "inactive"
status === "blocked" ? "bg-[#FDEBE8] text-[#F33F19]" : ? "font-medium w-[80px] h-[24px] bg-[#E7EBF3] text-[#9FA8BC]"
"" : status === "pending"
? "font-medium w-[80px] h-[24px] bg-[#EAF7FC] text-[#30B2EA]"
: status === "blocked"
? "font-medium w-[80px] h-[24px] bg-[#FDEBE8] text-[#F33F19]"
: ""
} }
`} `}
> >
{ {status === "active"
status === "active" ? "Actif" : ? "Actif"
status === "inactive" ? "Inactif" : : status === "inactive"
status === "pending" ? "En attente" : ? "Inactif"
status === "blocked" ? "Bloquée" : : status === "pending"
"" ? "En attente"
} : status === "blocked"
? "Bloquée"
: ""}
</p> </p>
) );
} },
}, },
{ {
id: "delete", id: "delete",
cell: ({ row }) => { cell: ({ row }) => {
const company = row.original; const company = row.original;
return ( return (
<div className="flex justify-end p-2 space-x-2" <div
// onClick={() => { mutate(id) }} className="flex justify-end p-2 space-x-2"
> // onClick={() => { mutate(id) }}
>
{/* Modal de suppression */} {/* Modal de suppression */}
<Modal <Modal
open={openDeleteModal && selectedAdminId === company.id} open={openDeleteModal && selectedAdminId === company.id}
onOpenChange={(isOpen) => { onOpenChange={(isOpen) => {
if (!isOpen) { if (!isOpen) {
setSelectedAdminId(null); setSelectedAdminId(null);
setOpenDeleteModal(false); setOpenDeleteModal(false);
} }
}}
trigger={
<div
onClick={() => {
setSelectedAdminId(company.id);
setOpenDeleteModal(true);
}} }}
trigger={ >
<div <Image
alt="Supprimer"
src={icons.trash}
className="cursor-pointer responsive-icon"
/>
</div>
}
title="Supprimer une organisation"
content={
<div>
<p className="text-center">
Voulez-vous vraiment supprimer l'organisation{" "}
<span className="font-bold">{row.original.name}</span> ?
</p>
<div className="flex justify-between w-full pt-6 r-gap-24">
<button
className="cta modal-cta cancel"
onClick={() => { onClick={() => {
setSelectedAdminId(company.id); setOpenDeleteModal(false);
setOpenDeleteModal(true);
}} }}
> >
<Image Annuler
alt="Supprimer" </button>
src={icons.trash} <button
className="cursor-pointer responsive-icon" className="cta modal-cta danger"
/> onClick={() => {
</div> deleteMutation.mutate(company.id);
} }}
title="Supprimer une organisation" >
content={ Supprimer
<div> </button>
<p className="text-center">Voulez-vous vraiment supprimer cette organisation ?</p> </div>
<div className="grid grid-cols-2 gap-3 mt-3"> </div>
<button }
className="bg-blue-100 text-blue-600 py-2 px-4 rounded-full cursor-pointer" />
onClick={() => { </div>
setOpenDeleteModal(false); );
}} },
> },
Annuler ];
</button>
<button
className="bg-red-500 text-white py-2 px-4 rounded-full hover:bg-red-600 cursor-pointer"
onClick={() => {
deleteMutation.mutate(company.id);
}}
>
Supprimer
</button>
</div>
</div>
}
/>
</div>
)
}
}
]
return ( return (
<Table <Table
@ -302,15 +315,18 @@ export default function Organizations() {
<DropdownMenu.Root> <DropdownMenu.Root>
<DropdownMenu.Trigger asChild> <DropdownMenu.Trigger asChild>
<p className="cursor-pointer rounded-full bg-gray-300 text-gray-500 p-2"> <p className="cta cancel flex gap-2">
Sélectionner une action Sélectionner une action
<Image src={icons.arrowDown} alt="arrow down" />
</p> </p>
</DropdownMenu.Trigger> </DropdownMenu.Trigger>
<DropdownMenu.Portal> <DropdownMenu.Portal>
<DropdownMenu.Content <DropdownMenu.Content
className="min-w-[150px] shadow-sm bg-white rounded-md p-1" className="min-w-[150px] shadow-sm bg-white rounded-md p-1 w-full"
sideOffset={5} sideOffset={0}
side="bottom"
align="end"
> >
<DropdownMenu.Item <DropdownMenu.Item
onClick={() => bulkDeleteMutation.mutate(selectedIds)} onClick={() => bulkDeleteMutation.mutate(selectedIds)}
@ -334,10 +350,7 @@ export default function Organizations() {
} }
}} }}
trigger={ trigger={
<div <div onClick={() => setOpenModal(true)} className="cta">
onClick={() => setOpenModal(true)}
className="cursor-pointer p-3 bg-blue-600 text-white rounded-full"
>
Ajouter une organisation Ajouter une organisation
</div> </div>
} }
@ -371,22 +384,31 @@ export default function Organizations() {
name: "owner", name: "owner",
label: "Administrateur", label: "Administrateur",
type: "select", type: "select",
options: users?.map((user: { id: string; name: string }) => ({ options:
label: user.name, users?.map((user: { id: string; name: string }) => ({
value: user.id, label: user.name,
})) || [], value: user.id,
})) || [],
}, },
]} ]}
submit={createMutation.mutate} // Le type est maintenant compatible submit={createMutation.mutate} // Le type est maintenant compatible
schema={companySchema} schema={companySchema}
child={ child={
<button <div className="flex justify-center">
type="submit" <button
disabled={createMutation.isPending} type="submit"
className={`${createMutation.isPending ? "btn-auth-loading" : "btn-auth"} mt-4 cursor-pointer`} disabled={createMutation.isPending}
> className={`${
{createMutation.isPending ? "En cours..." : "Créer l'organisation"} createMutation.isPending
</button> ? "btn-auth-loading"
: "btn-auth"
} cta modal-cta mt-4 cursor-pointer`}
>
{createMutation.isPending
? "En cours..."
: "Ajouter une organisation"}
</button>
</div>
} }
/> />
} }

44
src/app/globals.css
View File

@ -102,6 +102,8 @@ body {
.cta{ .cta{
padding: 10px 24px; padding: 10px 24px;
width: max-content;
height: max-content;
color: white; color: white;
background-color: var(--primary); background-color: var(--primary);
font-size: 14px; font-size: 14px;
@ -109,6 +111,12 @@ body {
border: 1px solid var(--primary); border: 1px solid var(--primary);
border-radius: 100px; border-radius: 100px;
cursor: pointer; cursor: pointer;
text-wrap: nowrap;
}
.cta.modal-cta{
width: 240px;
height: 40px;
} }
.cta.cancel{ .cta.cancel{
@ -138,6 +146,42 @@ hr{
color: var(--gray); color: var(--gray);
} }
input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
width: 24px;
height: 24px;
border: 1px solid var(--secondary) !important;
border-radius: 6px !important;
background-color: transparent;
cursor: pointer;
position: relative;
}
input[type="checkbox"]:checked {
background-color: var(--primary);
border-color: var(--primary);
}
input[type="checkbox"]:checked::before {
content: "✔";
font-size: 18px;
color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.modal-input{
width: 490px;
margin-left: auto;
margin-right: auto;
}
/* Scroll Bar */ /* Scroll Bar */

3
src/app/layout.tsx
View File

@ -1,7 +1,7 @@
import type { Metadata } from "next"; import type { Metadata } from "next";
import "./globals.css"; import "./globals.css";
import NextTopLoader from "nextjs-toploader"; import NextTopLoader from "nextjs-toploader";
import "../assets/css/ruben-ui.css" import "../assets/css/ruben-ui.css";
import { AuthProvider } from "#/components/provider/authProvider"; import { AuthProvider } from "#/components/provider/authProvider";
import { QueryClientProvide } from "#/components/provider/queryClient"; import { QueryClientProvide } from "#/components/provider/queryClient";
import { ToastClient } from "#/components/provider/toastClient"; import { ToastClient } from "#/components/provider/toastClient";
@ -16,7 +16,6 @@ export default function RootLayout({
}: Readonly<{ }: Readonly<{
children: React.ReactNode; children: React.ReactNode;
}>) { }>) {
return ( return (
<html lang="en"> <html lang="en">
<head> <head>

3
src/assets/icons/chevron-down.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 1L5 5L9 1" stroke="#9FA8BC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 207 B

5
src/assets/icons/index.ts
View File

@ -42,6 +42,7 @@ import moonIcon from "./moon.svg"
import trash from "./trash.svg" import trash from "./trash.svg"
import mailIcon from "./sms.svg" import mailIcon from "./sms.svg"
import personalCard from "./personalcard.svg" import personalCard from "./personalcard.svg"
import arrowDown from "#/assets/icons/chevron-down.svg"
export const icons = { export const icons = {
@ -88,7 +89,9 @@ export const icons = {
moonIcon, moonIcon,
trash, trash,
mailIcon, mailIcon,
personalCard personalCard,
arrowDown
} }

36
src/components/admin/adminHeader.tsx
View File

@ -1,6 +1,6 @@
"use client" "use client";
import Image from "next/image"; import Image from "next/image";
import { icons } from "#/assets/icons" import { icons } from "#/assets/icons";
import * as React from "react"; import * as React from "react";
import { DropdownMenu } from "radix-ui"; import { DropdownMenu } from "radix-ui";
import Link from "next/link"; import Link from "next/link";
@ -10,11 +10,12 @@ import { signOutFunc } from "#/lib/function";
export default function AdminHeader() { export default function AdminHeader() {
const [open, setOpen] = React.useState(false); const [open, setOpen] = React.useState(false);
return ( return (
<> <>
<nav className="header r-flex-between px-[44px] py-[20px] "> <nav className="header r-flex-between px-[44px] py-[20px] ">
<h1 className="name text-[26px]">Bienvenue, <span>Ken B.</span> </h1> <p className="name text-[26px]">
Bienvenue, <span>Ken B.</span>{" "}
</p>
<div className="r-flex-between justify-center items-center r-gap-12"> <div className="r-flex-between justify-center items-center r-gap-12">
<Theme /> <Theme />
{/* <ProfilePicture /> */} {/* <ProfilePicture /> */}
@ -23,18 +24,29 @@ export default function AdminHeader() {
<Image src={icons.notificationsIcon} alt="Notifications" /> <Image src={icons.notificationsIcon} alt="Notifications" />
</button> </button>
<div className="relative"> <div className="relative">
<DropdownMenu.Root open={open} onOpenChange={setOpen}> <DropdownMenu.Root open={open} onOpenChange={setOpen}>
<DropdownMenu.Trigger asChild> <DropdownMenu.Trigger asChild>
<div className="r-flex-between justify-center items-center r-gap-12 cursor-pointer "> <div className="r-flex-between justify-center items-center r-gap-12 cursor-pointer ">
<Image src={icons.profilePicture} alt="ProfilePicture" /> <Image src={icons.profilePicture} alt="ProfilePicture" />
<button className="IconButton" aria-label="Customise options"> <button className="IconButton" aria-label="Customise options">
<Image src={icons.arrowUp} alt="arrowUp" className={`transition-transform duration-300 ${open ? "scale-y-[-1]" : ""}`}/> <Image
src={icons.arrowUp}
alt="arrowUp"
className={`transition-transform duration-300 ${
open ? "scale-y-[-1]" : ""
}`}
/>
</button> </button>
</div> </div>
</DropdownMenu.Trigger> </DropdownMenu.Trigger>
<DropdownMenu.Portal> <DropdownMenu.Portal>
<DropdownMenu.Content className="DropdownMenuContent dropdown-menu r-flex-column r-secondary p-2" sideOffset={0} side="bottom" align="end" > <DropdownMenu.Content
className="DropdownMenuContent dropdown-menu r-flex-column r-secondary p-2"
sideOffset={0}
side="bottom"
align="end"
>
<DropdownMenu.Item className="DropdownMenuItem dropdown-item text-[14px] outline-none hover:bg-blue-100 rounded-md"> <DropdownMenu.Item className="DropdownMenuItem dropdown-item text-[14px] outline-none hover:bg-blue-100 rounded-md">
<Link href="#" className="d-flex items-start "> <Link href="#" className="d-flex items-start ">
<Image src={icons.userIcon} alt="Profil" /> <Image src={icons.userIcon} alt="Profil" />
@ -42,7 +54,11 @@ export default function AdminHeader() {
</Link> </Link>
</DropdownMenu.Item> </DropdownMenu.Item>
<DropdownMenu.Item className="DropdownMenuItem dropdown-item text-[14px] outline-none hover:bg-blue-100 rounded-md"> <DropdownMenu.Item className="DropdownMenuItem dropdown-item text-[14px] outline-none hover:bg-blue-100 rounded-md">
<Link href="#" onClick={() => signOutFunc()} className="d-flex items-start r-danger "> <Link
href="#"
onClick={() => signOutFunc()}
className="d-flex items-start r-danger "
>
<Image src={icons.logoutRed} alt="Deconnexion" /> <Image src={icons.logoutRed} alt="Deconnexion" />
Déconnexion Déconnexion
</Link> </Link>
@ -54,5 +70,5 @@ export default function AdminHeader() {
</div> </div>
</nav> </nav>
</> </>
) );
} }

97
src/components/floatingLabelInput.tsx
View File

@ -1,14 +1,14 @@
"use client"; "use client";
import { FloatingLabelInputProps } from '#/types'; import { FloatingLabelInputProps } from "#/types";
import React, { useState } from 'react'; import React, { useState } from "react";
import Image from 'next/image'; import Image from "next/image";
import { icons } from '#/assets/icons'; import { icons } from "#/assets/icons";
export default function FloatingLabelInput({ export default function FloatingLabelInput({
label, label,
placeholder, placeholder,
type, type,
options, options,
button, button,
showPasswordToggle = false, showPasswordToggle = false,
@ -17,12 +17,14 @@ export default function FloatingLabelInput({
onChange, onChange,
}: FloatingLabelInputProps) { }: FloatingLabelInputProps) {
const [showPassword, setShowPassword] = useState(false); const [showPassword, setShowPassword] = useState(false);
const [selectedValue, setSelectedValue] = useState(defaultValue || ''); const [selectedValue, setSelectedValue] = useState(defaultValue || "");
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => { const handleChange = (
e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>
) => {
const value = e.target.value; const value = e.target.value;
if (type === 'select') { if (type === "select") {
setSelectedValue(value); setSelectedValue(value);
} }
@ -30,28 +32,29 @@ export default function FloatingLabelInput({
onChange(value); onChange(value);
} }
}; };
const renderInput = () => { const renderInput = () => {
switch(type) { switch (type) {
case 'select': case "select":
return ( return (
<div className="relative w-full"> <div className="relative w-full">
<select <select
className="input-form focus:ring-2 focus:ring-blue-500 outline-none" className="input-form modal-input focus:ring-2 focus:ring-blue-500 outline-none"
name={name} name={name}
value={selectedValue} value={selectedValue}
onChange={handleChange} onChange={handleChange}
> >
{options?.map((option, index) => ( {options?.map((option, index) => (
<option key={index} value={option.value}>{option.label}</option> <option key={index} value={option.value}>
{option.label}
</option>
))} ))}
</select> </select>
{button && <div className="btn-floating-right">{button}</div>} {button && <div className="btn-floating-right">{button}</div>}
</div> </div>
); );
case 'password': case "password":
return ( return (
<div className="relative w-full"> <div className="relative w-full">
<input <input
@ -60,7 +63,6 @@ export default function FloatingLabelInput({
placeholder={placeholder} placeholder={placeholder}
className="input-form focus:ring-2 focus:ring-blue-500 pr-10 outline-none" className="input-form focus:ring-2 focus:ring-blue-500 pr-10 outline-none"
defaultValue={defaultValue} defaultValue={defaultValue}
/> />
{showPasswordToggle && ( {showPasswordToggle && (
<button <button
@ -69,51 +71,45 @@ export default function FloatingLabelInput({
className="btn-floating-right text-gray-500 hover:text-gray-700 focus:outline-none" className="btn-floating-right text-gray-500 hover:text-gray-700 focus:outline-none"
> >
{showPassword ? ( {showPassword ? (
<Image <Image
src={icons.eyeSlashIcon} src={icons.eyeSlashIcon}
width={20} width={20}
height={20} height={20}
alt='' alt=""
/> />
) : ( ) : (
<Image <Image src={icons.eyeIcon} width={20} height={20} alt="" />
src={icons.eyeIcon}
width={20}
height={20}
alt=''
/>
)} )}
</button> </button>
)} )}
</div> </div>
); );
case "search":
case 'search': return (
return ( <div className="relative w-full">
<div className="relative w-full"> <div className="btn-floating-left">
<div className='btn-floating-left'> <Image alt="" src={icons.searchIcon} />
<Image alt='' src={icons.searchIcon} />
</div>
<input
type="text"
placeholder={placeholder}
className="focus:ring-2 focus:ring-blue-500 outline-none px-10 py-3 w-full text-black border border-[#d1d5dc] rounded-full"
name={name}
defaultValue={defaultValue}
onChange={handleChange}
/>
{button && <div className="btn-floating-right">{button}</div>}
</div> </div>
); <input
type="text"
placeholder={placeholder}
className="focus:ring-2 focus:ring-blue-500 outline-none px-10 py-2 w-full text-black border border-[#d1d5dc] rounded-full"
name={name}
defaultValue={defaultValue}
onChange={handleChange}
/>
{button && <div className="btn-floating-right mr-1 ">{button}</div>}
</div>
);
default: default:
return ( return (
<div className="relative w-full"> <div className="relative w-full">
<input <input
type={type} type={type}
placeholder={placeholder} placeholder={placeholder}
className="input-form focus:ring-2 focus:ring-blue-500 outline-none" className="input-form modal-input focus:ring-2 focus:ring-blue-500 outline-none"
name={name} name={name}
defaultValue={defaultValue} defaultValue={defaultValue}
onChange={handleChange} onChange={handleChange}
@ -126,13 +122,10 @@ export default function FloatingLabelInput({
return ( return (
<div className="relative"> <div className="relative">
<label <label htmlFor={name} className="input-label text-gray-400 text-sm">
htmlFor={name}
className="input-label text-gray-400 text-sm"
>
{label} {label}
</label> </label>
{renderInput()} {renderInput()}
</div> </div>
); );
} }

34
src/components/modal.tsx
View File

@ -1,12 +1,14 @@
import * as Dialog from "@radix-ui/react-dialog"; import * as Dialog from "@radix-ui/react-dialog";
import { ReactNode } from "react"; import { ReactNode } from "react";
import { icons } from "#/assets/icons";
import Image from "next/image";
export function Modal({ export function Modal({
trigger, trigger,
title, title,
content, content,
open, open,
onOpenChange onOpenChange,
}: { }: {
trigger: ReactNode; trigger: ReactNode;
title?: string | ReactNode; title?: string | ReactNode;
@ -16,29 +18,29 @@ export function Modal({
}) { }) {
return ( return (
<Dialog.Root open={open} onOpenChange={onOpenChange}> <Dialog.Root open={open} onOpenChange={onOpenChange}>
<Dialog.Trigger asChild> <Dialog.Trigger asChild>{trigger}</Dialog.Trigger>
{trigger}
</Dialog.Trigger>
<Dialog.Portal> <Dialog.Portal>
<Dialog.Overlay className="fixed inset-0 bg-black/25 z-40" /> <Dialog.Overlay className="fixed inset-0 bg-black/25 z-40" />
<Dialog.Content className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-md bg-white rounded-lg shadow-xl z-50 p-6" <Dialog.Content
className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-max flex flex-col gap-10 bg-white rounded-lg shadow-xl z-50 px-16 py-12"
// onPointerDownOutside={(e) => e.preventDefault()} // onPointerDownOutside={(e) => e.preventDefault()}
> >
<Dialog.Title className="text-xl font-bold text-center my-4"> <Dialog.Title className="text-xl font-bold text-center text-[30px] ">
{title} {title}
</Dialog.Title> </Dialog.Title>
<div className=" justify-center">
{content}
</div>
<div className="absolute top-4 right-4 text-gray-500 hover:text-gray-700 cursor-pointer" <div className="flex gap-5 justify-center">{content}</div>
onClick={() => {onOpenChange?.(false)}}
> <div
X className="absolute top-5 right-5 text-gray-500 hover:text-gray-700 cursor-pointer"
</div> onClick={() => {
onOpenChange?.(false);
}}
>
<Image src={icons.crossIcon} alt="fermer" />
</div>
</Dialog.Content> </Dialog.Content>
</Dialog.Portal> </Dialog.Portal>
</Dialog.Root> </Dialog.Root>
); );
} }

6
src/components/table/table.tsx
View File

@ -177,7 +177,7 @@ export default function Table<TData, TValue>({
<div className="flex items-center justify-end space-x-2 py-4"> <div className="flex items-center justify-end space-x-2 py-4">
<button <button
className="bg-gray-100 shadow-xs hover:bg-gray-300 px-3 py-1 rounded w-9 h-9" className="hover:bg-gray-300 cursor-pointer px-3 py-1 rounded w-9 h-9"
onClick={() => table.previousPage()} onClick={() => table.previousPage()}
disabled={!table.getCanPreviousPage()} disabled={!table.getCanPreviousPage()}
> >
@ -192,7 +192,7 @@ export default function Table<TData, TValue>({
"px-3 py-1 rounded w-9 h-9", "px-3 py-1 rounded w-9 h-9",
pageNumber === currentPage pageNumber === currentPage
? "bg-[#E9F0FF] text-blue-400" ? "bg-[#E9F0FF] text-blue-400"
: "bg-gray-100 hover:bg-gray-300" : "hover:bg-gray-300 cursor-pointer"
)} )}
onClick={() => table.setPageIndex(pageNumber - 1)} onClick={() => table.setPageIndex(pageNumber - 1)}
> >
@ -202,7 +202,7 @@ export default function Table<TData, TValue>({
</div> </div>
<button <button
className="w-9 h-9 bg-gray-100 shadow-xs hover:bg-gray-300 hover:text-black px-3 py-1 rounded" className="w-9 h-9 hover:bg-gray-300 cursor-pointer hover:text-black px-3 py-1 rounded"
onClick={() => table.nextPage()} onClick={() => table.nextPage()}
disabled={!table.getCanNextPage()} disabled={!table.getCanNextPage()}
> >