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

Compare commits

base: ristoo:fed5a3987e6905574f3541597ea7f1be9b07fdd9
Branches Tags
ristoo:main
ristoo:bootstrap-version
ristoo:bootstrap
ristoo:ruben
ristoo:dev
..
compare: ristoo:01e27dff666ca79279f023afe0f46c1086147832
Branches Tags
ristoo:bootstrap-version
ristoo:bootstrap
ristoo:ruben
ristoo:dev
ristoo:main

No commits in common. "fed5a3987e6905574f3541597ea7f1be9b07fdd9" and "01e27dff666ca79279f023afe0f46c1086147832" have entirely different histories.
fed5a3987e ... 01e27dff66

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

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

@ -1,224 +1,209 @@
"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 queryClient = useQueryClient(); const {data: session, status} = useSession()
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 { const { data: companies, refetch, isLoading} = useQuery({
data: companies, enabled: status === 'authenticated',
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: {
headers: { 'Authorization': `Bearer ${session?.user.access_token}`
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 = const value = String(row.original.owner.first_name) + " " + String(row.original.owner.last_name)
String(row.original.owner.first_name) + const initials = String(row.original.owner.first_name[0]) + String(row.original.owner.last_name[0])
" " + return(
String(row.original.owner.last_name); <div className="flex space-x-2 items-center">
const initials = <div className="flex items-center justify-center bg-[#DCDCFE] text-[#246BFD] w-10 h-10 rounded-full">
String(row.original.owner.first_name[0]) + {initials}
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", {
cell: ({ cell }) => { accessorKey: "status",
const status = String(cell.getValue()); header: "Statut",
return ( cell: ({ cell }) => {
<p const status = String(cell.getValue())
className={`rounded-full px-2 py-1 font-medium text-sm w-20 h-6 text-center return (
${ <p
status === "active" className={`rounded-full px-2 py-1 font-medium text-sm w-20 h-6 text-center
? "bg-[#ECF9E8] text-[#49C91E]" ${
: status === "inactive" status === "active" ? "bg-[#ECF9E8] text-[#49C91E]" :
? "bg-[#E7EBF3] text-[#9FA8BC]" status === "inactive" ? "bg-[#E7EBF3] text-[#9FA8BC]" :
: status === "pending" status === "pending" ? "bg-[#EAF7FC] text-[#30B2EA]" :
? "bg-[#EAF7FC] text-[#30B2EA]" status === "blocked" ? "bg-[#FDEBE8] text-[#F33F19]" :
: status === "blocked" ""
? "bg-[#FDEBE8] text-[#F33F19]"
: ""
} }
`} `}
> >
{status === "active" {
? "Actif" status === "active" ? "Actif" :
: status === "inactive" status === "inactive" ? "Inactif" :
? "Inactif" status === "pending" ? "En attente" :
: status === "pending" status === "blocked" ? "Bloquée" :
? "En attente" ""
: status === "blocked" }
? "Bloquée" </p>
: ""} )
</p> }
); },
}, {
}, id: "delete",
{ cell: ({ row }) => {
id: "delete", const id = String(row.original.id);
cell: ({ row }) => { return (
const id = String(row.original.id); <div className="relative p-2 cursor-pointer">
return ( <Modal
<div className="relative p-2 cursor-pointer"> open={selectedId === id}
<Modal onOpenChange={(isOpen) => {
open={selectedId === id} if (!isOpen) {
onOpenChange={(isOpen) => { setSelectedId(null);
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"> trigger={
Supprimer cette organisation <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> </p>
}
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"> <div className="grid grid-cols-2 gap-3 mt-3">
<button <button
className="cta modal-cta cancel" className="bg-blue-100 text-blue-600 py-2 px-4 text-lg rounded-full text-center hover:bg-blue-200"
onClick={() => { onClick={() => {
setSelectedId(null); setSelectedId(null);
}} }}
> >
Annuler Annuler
</button> </button>
<button <button
className="cta modal-cta danger" className="bg-red-500 text-white py-2 px-4 text-lg rounded-full text-center hover:bg-red-600"
onClick={() => { onClick={() => {
mutate(id); mutate(id);
setSelectedId(null); setSelectedId(null);
}} }}
> >
Supprimer Supprimer
</button> </button>
</div>
</div> </div>
} </div>
/> }
</div> />
); </div>
}, );
}, },
]; },
]
return ( 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 justifyy-center lg:justifyy-start "> <div className="admin-infos r-flex flex-wrap justifyc-center lg:justifyc-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,11 +290,7 @@ export default function Update() {
onOpenChange={setOpenBlockModal} onOpenChange={setOpenBlockModal}
trigger={ trigger={
<button type="button" className="cta danger"> <button type="button" className="cta danger">
{blockMutation.isPending Bloquer
? "En cours..."
: companyInfos?.status === "blocked"
? "Supprimer"
: "Bloquer"}
</button> </button>
} }
content={ content={

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

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

@ -1,3 +0,0 @@
<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

Before

Width:  |  Height:  |  Size: 207 B

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

@ -42,7 +42,6 @@ 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 = {
@ -89,9 +88,7 @@ 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,12 +10,11 @@ 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] ">
<p className="name text-[26px]"> <h1 className="name text-[26px]">Bienvenue, <span>Ken B.</span> </h1>
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 /> */}
@ -24,29 +23,18 @@ 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 <Image src={icons.arrowUp} alt="arrowUp" className={`transition-transform duration-300 ${open ? "scale-y-[-1]" : ""}`}/>
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 <DropdownMenu.Content className="DropdownMenuContent dropdown-menu r-flex-column r-secondary p-2" sideOffset={0} side="bottom" align="end" >
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" />
@ -54,11 +42,7 @@ 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 <Link href="#" onClick={() => signOutFunc()} className="d-flex items-start r-danger ">
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>
@ -70,5 +54,5 @@ export default function AdminHeader() {
</div> </div>
</nav> </nav>
</> </>
); )
} }

102
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,44 +17,34 @@ export default function FloatingLabelInput({
onChange, onChange,
}: FloatingLabelInputProps) { }: FloatingLabelInputProps) {
const [showPassword, setShowPassword] = useState(false); const [showPassword, setShowPassword] = useState(false);
const [selectedValue, setSelectedValue] = useState(defaultValue || "");
const handleChange = ( const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>
) => {
const value = e.target.value; const value = e.target.value;
if (type === "select") {
setSelectedValue(value);
}
if (onChange) { if (onChange) {
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 modal-input focus:ring-2 focus:ring-blue-500 outline-none" className="input-form focus:ring-2 focus:ring-blue-500 outline-none"
name={name} name={name}
value={selectedValue} value={defaultValue}
onChange={handleChange}
> >
{options?.map((option, index) => ( {options?.map((option, index) => (
<option key={index} value={option.value}> <option key={index} value={option.value}>{option.label}</option>
{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
@ -63,6 +53,7 @@ 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
@ -71,45 +62,51 @@ 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 src={icons.eyeIcon} width={20} height={20} alt="" /> <Image
src={icons.eyeIcon}
width={20}
height={20}
alt=''
/>
)} )}
</button> </button>
)} )}
</div> </div>
); );
case "search":
return (
<div className="relative w-full">
<div className="btn-floating-left">
<Image alt="" src={icons.searchIcon} />
</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>
);
case 'search':
return (
<div className="relative w-full">
<div className='btn-floating-left'>
<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>
);
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 modal-input focus:ring-2 focus:ring-blue-500 outline-none" className="input-form focus:ring-2 focus:ring-blue-500 outline-none"
name={name} name={name}
defaultValue={defaultValue} defaultValue={defaultValue}
onChange={handleChange} onChange={handleChange}
@ -122,10 +119,13 @@ export default function FloatingLabelInput({
return ( return (
<div className="relative"> <div className="relative">
<label htmlFor={name} className="input-label text-gray-400 text-sm"> <label
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,14 +1,12 @@
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;
@ -18,29 +16,29 @@ export function Modal({
}) { }) {
return ( return (
<Dialog.Root open={open} onOpenChange={onOpenChange}> <Dialog.Root open={open} onOpenChange={onOpenChange}>
<Dialog.Trigger asChild>{trigger}</Dialog.Trigger> <Dialog.Trigger asChild>
{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 <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"
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 text-[30px] "> <Dialog.Title className="text-xl font-bold text-center my-4">
{title} {title}
</Dialog.Title> </Dialog.Title>
<div className="flex gap-5 justify-center">{content}</div> <div className=" justify-center">
{content}
<div
className="absolute top-5 right-5 text-gray-500 hover:text-gray-700 cursor-pointer"
onClick={() => {
onOpenChange?.(false);
}}
>
<Image src={icons.crossIcon} alt="fermer" />
</div> </div>
<div className="absolute top-4 right-4 text-gray-500 hover:text-gray-700 cursor-pointer"
onClick={() => {onOpenChange?.(false)}}
>
X
</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="hover:bg-gray-300 cursor-pointer px-3 py-1 rounded w-9 h-9" className="bg-gray-100 shadow-xs hover:bg-gray-300 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"
: "hover:bg-gray-300 cursor-pointer" : "bg-gray-100 hover:bg-gray-300"
)} )}
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 hover:bg-gray-300 cursor-pointer hover:text-black px-3 py-1 rounded" className="w-9 h-9 bg-gray-100 shadow-xs hover:bg-gray-300 hover:text-black px-3 py-1 rounded"
onClick={() => table.nextPage()} onClick={() => table.nextPage()}
disabled={!table.getCanNextPage()} disabled={!table.getCanNextPage()}
> >