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

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

@ -47,7 +47,6 @@ export default function Admins() {
},
});
const createMutation = useMutation({
mutationFn: async (data: {
last_name: string;
@ -193,7 +192,7 @@ export default function Admins() {
width={24}
height={24}
src={icons.editIcon}
className="cursor-pointer responsive-icon"
className="cursor-pointer responsive-icon mr-1"
/>
</div>
}
@ -227,13 +226,19 @@ export default function Admins() {
submit={updateMutation.mutate}
schema={adminSchema}
child={
<div className="flex justify-center">
<button
type="submit"
disabled={updateMutation.isPending}
className={`${updateMutation.isPending ? "btn-auth-loading" : "btn-auth"} mt-4 cursor-pointer`}
className={`${
updateMutation.isPending
? "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"
content={
<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">
<button
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.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
<Image src={icons.arrowDown} alt="arrow down" />
</p>
</DropdownMenu.Trigger>
@ -353,10 +361,7 @@ export default function Admins() {
}
}}
trigger={
<div
onClick={() => setOpenModal(true)}
className="cursor-pointer p-3 bg-blue-600 text-white rounded-full"
>
<div onClick={() => setOpenModal(true)} className="cta">
Ajouter un admin
</div>
}
@ -385,13 +390,21 @@ export default function Admins() {
submit={createMutation.mutate}
schema={adminSchema}
child={
<div className="flex justify-center">
<button
type="submit"
disabled={createMutation.isPending}
className={`${createMutation.isPending ? "btn-auth-loading" : "btn-auth"} mt-4 cursor-pointer`}
className={`${
createMutation.isPending
? "btn-auth-loading"
: "btn-auth"
} cta modal-cta mt-4 cursor-pointer`}
>
{createMutation.isPending ? "Création de l'admin..." : "Créer le compte"}
{createMutation.isPending
? "Création de l'admin..."
: "Créer le compte"}
</button>
</div>
}
/>
}

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

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

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

@ -118,7 +118,7 @@ export default function Profile() {
</div>
<hr />
<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="icon-rounded">
<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}
trigger={
<button type="button" className="cta danger">
Bloquer
{blockMutation.isPending
? "En cours..."
: companyInfos?.status === "blocked"
? "Supprimer"
: "Bloquer"}
</button>
}
content={

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

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

44
src/app/globals.css
View File

@ -102,6 +102,8 @@ body {
.cta{
padding: 10px 24px;
width: max-content;
height: max-content;
color: white;
background-color: var(--primary);
font-size: 14px;
@ -109,6 +111,12 @@ body {
border: 1px solid var(--primary);
border-radius: 100px;
cursor: pointer;
text-wrap: nowrap;
}
.cta.modal-cta{
width: 240px;
height: 40px;
}
.cta.cancel{
@ -138,6 +146,42 @@ hr{
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 */

3
src/app/layout.tsx
View File

@ -1,7 +1,7 @@
import type { Metadata } from "next";
import "./globals.css";
import NextTopLoader from "nextjs-toploader";
import "../assets/css/ruben-ui.css"
import "../assets/css/ruben-ui.css";
import { AuthProvider } from "#/components/provider/authProvider";
import { QueryClientProvide } from "#/components/provider/queryClient";
import { ToastClient } from "#/components/provider/toastClient";
@ -16,7 +16,6 @@ export default function RootLayout({
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<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 mailIcon from "./sms.svg"
import personalCard from "./personalcard.svg"
import arrowDown from "#/assets/icons/chevron-down.svg"
export const icons = {
@ -88,7 +89,9 @@ export const icons = {
moonIcon,
trash,
mailIcon,
personalCard
personalCard,
arrowDown
}

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

@ -1,6 +1,6 @@
"use client"
"use client";
import Image from "next/image";
import { icons } from "#/assets/icons"
import { icons } from "#/assets/icons";
import * as React from "react";
import { DropdownMenu } from "radix-ui";
import Link from "next/link";
@ -10,11 +10,12 @@ import { signOutFunc } from "#/lib/function";
export default function AdminHeader() {
const [open, setOpen] = React.useState(false);
return (
<>
<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">
<Theme />
{/* <ProfilePicture /> */}
@ -28,13 +29,24 @@ export default function AdminHeader() {
<div className="r-flex-between justify-center items-center r-gap-12 cursor-pointer ">
<Image src={icons.profilePicture} alt="ProfilePicture" />
<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>
</div>
</DropdownMenu.Trigger>
<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">
<Link href="#" className="d-flex items-start ">
<Image src={icons.userIcon} alt="Profil" />
@ -42,7 +54,11 @@ export default function AdminHeader() {
</Link>
</DropdownMenu.Item>
<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" />
Déconnexion
</Link>
@ -54,5 +70,5 @@ export default function AdminHeader() {
</div>
</nav>
</>
)
);
}

55
src/components/floatingLabelInput.tsx
View File

@ -1,9 +1,9 @@
"use client";
import { FloatingLabelInputProps } from '#/types';
import React, { useState } from 'react';
import Image from 'next/image';
import { icons } from '#/assets/icons';
import { FloatingLabelInputProps } from "#/types";
import React, { useState } from "react";
import Image from "next/image";
import { icons } from "#/assets/icons";
export default function FloatingLabelInput({
label,
@ -17,12 +17,14 @@ export default function FloatingLabelInput({
onChange,
}: FloatingLabelInputProps) {
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;
if (type === 'select') {
if (type === "select") {
setSelectedValue(value);
}
@ -31,27 +33,28 @@ export default function FloatingLabelInput({
}
};
const renderInput = () => {
switch (type) {
case 'select':
case "select":
return (
<div className="relative w-full">
<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}
value={selectedValue}
onChange={handleChange}
>
{options?.map((option, index) => (
<option key={index} value={option.value}>{option.label}</option>
<option key={index} value={option.value}>
{option.label}
</option>
))}
</select>
{button && <div className="btn-floating-right">{button}</div>}
</div>
);
case 'password':
case "password":
return (
<div className="relative w-full">
<input
@ -60,7 +63,6 @@ export default function FloatingLabelInput({
placeholder={placeholder}
className="input-form focus:ring-2 focus:ring-blue-500 pr-10 outline-none"
defaultValue={defaultValue}
/>
{showPasswordToggle && (
<button
@ -73,37 +75,31 @@ export default function FloatingLabelInput({
src={icons.eyeSlashIcon}
width={20}
height={20}
alt=''
alt=""
/>
) : (
<Image
src={icons.eyeIcon}
width={20}
height={20}
alt=''
/>
<Image src={icons.eyeIcon} width={20} height={20} alt="" />
)}
</button>
)}
</div>
);
case 'search':
case "search":
return (
<div className="relative w-full">
<div className='btn-floating-left'>
<Image alt='' src={icons.searchIcon} />
<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"
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">{button}</div>}
{button && <div className="btn-floating-right mr-1 ">{button}</div>}
</div>
);
@ -113,7 +109,7 @@ export default function FloatingLabelInput({
<input
type={type}
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}
defaultValue={defaultValue}
onChange={handleChange}
@ -126,10 +122,7 @@ export default function FloatingLabelInput({
return (
<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>
{renderInput()}

26
src/components/modal.tsx
View File

@ -1,12 +1,14 @@
import * as Dialog from "@radix-ui/react-dialog";
import { ReactNode } from "react";
import { icons } from "#/assets/icons";
import Image from "next/image";
export function Modal({
trigger,
title,
content,
open,
onOpenChange
onOpenChange,
}: {
trigger: ReactNode;
title?: string | ReactNode;
@ -16,26 +18,26 @@ export function Modal({
}) {
return (
<Dialog.Root open={open} onOpenChange={onOpenChange}>
<Dialog.Trigger asChild>
{trigger}
</Dialog.Trigger>
<Dialog.Trigger asChild>{trigger}</Dialog.Trigger>
<Dialog.Portal>
<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()}
>
<Dialog.Title className="text-xl font-bold text-center my-4">
<Dialog.Title className="text-xl font-bold text-center text-[30px] ">
{title}
</Dialog.Title>
<div className=" justify-center">
{content}
</div>
<div className="flex gap-5 justify-center">{content}</div>
<div className="absolute top-4 right-4 text-gray-500 hover:text-gray-700 cursor-pointer"
onClick={() => {onOpenChange?.(false)}}
<div
className="absolute top-5 right-5 text-gray-500 hover:text-gray-700 cursor-pointer"
onClick={() => {
onOpenChange?.(false);
}}
>
X
<Image src={icons.crossIcon} alt="fermer" />
</div>
</Dialog.Content>
</Dialog.Portal>

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">
<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()}
disabled={!table.getCanPreviousPage()}
>
@ -192,7 +192,7 @@ export default function Table<TData, TValue>({
"px-3 py-1 rounded w-9 h-9",
pageNumber === currentPage
? "bg-[#E9F0FF] text-blue-400"
: "bg-gray-100 hover:bg-gray-300"
: "hover:bg-gray-300 cursor-pointer"
)}
onClick={() => table.setPageIndex(pageNumber - 1)}
>
@ -202,7 +202,7 @@ export default function Table<TData, TValue>({
</div>
<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()}
disabled={!table.getCanNextPage()}
>