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

feat: enhance login redirection and add loading state to tables

Browse Source
This commit is contained in:
Orace.A 2025-03-28 12:32:42 +01:00 committed by Ruben
parent 0420b37cc9
commit 14483200ea
10 changed files with 209 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/app/(auth)/login/page.tsx
View File

@ -4,10 +4,11 @@ import Form from "#/components/form/form"
import { loginSchema } from "#/schema"
import { useMutation } from "@tanstack/react-query"
import { signIn } from "next-auth/react"
import { useRouter } from "next/navigation";
import { useRouter, useSearchParams } from "next/navigation";
export default function LoginPage() {
const router = useRouter()
const params = useSearchParams().get("redirect_to");
const mutation = useMutation({
mutationKey: ['login'],
@ -25,9 +26,13 @@ export default function LoginPage() {
: result.error;
console.error(errorMessage)
throw new Error(result.error)
} else {
if (params) {
router.push(params);
} else {
router.push('/admin/home')
}
}
return result
} catch (error: any) {
if (error.message.includes("Network Error")) {
@ -47,7 +52,7 @@ export default function LoginPage() {
<div>
<Form
title="Connexion"
className="bg-white p-10 shadow-2xl w-3/4 lg:w-lg"
formClassName="bg-white p-10 shadow-2xl w-3/4 lg:w-lg"
fields={[
{
label: "Email",
@ -65,7 +70,7 @@ export default function LoginPage() {
]}
submit={mutation.mutate}
schema={loginSchema}
child={<button type="submit" className="btn-auth">Connexion</button>}
child={<button type="submit" className="btn-auth mt-4">Connexion</button>}
/>
</div>
)

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

@ -298,6 +298,7 @@ export default function Admins() {
columns={columns}
data={users || []}
pageSize={5}
isDataLoading={isLoading}
header={(table) => {
const selectedIds = table
.getRowModel()

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

@ -187,6 +187,7 @@ export default function HomePage () {
<Table
columns={columns}
isDataLoading={isLoading}
data={companies || []}
pageSize={5}
/>

17
src/app/admin/layout.tsx
View File

@ -1,9 +1,24 @@
import { ReactNode } from "react";
"use client"
import { ReactNode, useEffect } from "react";
import "../../assets/css/admin.css"
import Sidebar from "../../components/admin/sidebar";
import Header from "../../components/admin/adminHeader";
import { signOutFunc } from "#/lib/function";
import { usePathname } from "next/navigation";
import { useSession } from "next-auth/react";
export default function Dashboard({ children }: { children: ReactNode }) {
const { status, data } = useSession();
const path = usePathname();
useEffect(() => {
if (status !== "loading") {
if (status === "unauthenticated" || (data && !data.user.access_token)) {
signOutFunc();
}
}
}, [data, status, path]);
return (

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

@ -1,3 +1,4 @@
"use client";
import { useState } from "react";
import Image from "next/image";
@ -11,16 +12,14 @@ import { Modal } from "#/components/modal";
import Table from "#/components/table/table";
import Form from "#/components/form/form";
import { icons } from "#/assets/icons";
import { adminSchema, companySchema } from "#/schema";
import { companySchema } from "#/schema";
import { Admin, Company } from "#/types";
import Link from "next/link";
export default function Organizations() {
const { data: session, status } = useSession();
const [open, setOpen] = useState(false);
const [openModal, setOpenModal] = useState(false);
const [openDeleteModal, setOpenDeleteModal] = useState(false);
const [openEditModal, setOpenEditModal] = useState(false);
const [selectedAdminId, setSelectedAdminId] = useState<string | null>(null);
const queryClient = useQueryClient();
@ -105,34 +104,6 @@ export default function Organizations() {
},
});
const updateMutation = useMutation({
mutationFn: async (data: {
id: string;
last_name: string;
first_name: string;
email: string;
}) => {
try {
const response = await axios.put(
`https://private-docs-api.intside.co/companies/${data.id}/`,
data,
{ headers: { Authorization: `Bearer ${session?.user.access_token}` } }
);
if (response.status === 200 || response.status === 201) {
console.log("modification réussie !");
setOpenEditModal(false);
}
} catch (error) {
console.error("Erreur lors de la mise à jour", error);
}
},
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ["organizations"] });
refetch();
},
});
const deleteMutation = useMutation({
mutationFn: async (id: string) => {
try {
@ -268,14 +239,14 @@ export default function Organizations() {
<Image
alt="Supprimer"
src={icons.trash}
className="cursor-pointer"
className="cursor-pointer responsive-icon"
/>
</div>
}
title="Supprimer une organisation"
content={
<div>
<p>Voulez-vous vraiment supprimer cette organisation ?</p>
<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 rounded-full cursor-pointer"
@ -303,9 +274,141 @@ export default function Organizations() {
}
]
export default function Organizations (){
return (
<>
</>
)
<Table
columns={columns}
data={companies || []}
pageSize={5}
isDataLoading={isLoading}
header={(table) => {
const selectedIds = table
.getRowModel()
.rows.filter((row) => row.getIsSelected())
.map((row) => row.original.id);
return (
<div className="grid grid-cols-1 lg:grid-cols-2 w-full space-y-3">
<div className="flex items-center space-x-3">
<input
type="checkbox"
checked={
table.getIsAllPageRowsSelected() ||
(table.getIsSomePageRowsSelected() && undefined)
}
onChange={(e) =>
table.toggleAllPageRowsSelected(e.target.checked)
}
/>
<DropdownMenu.Root>
<DropdownMenu.Trigger asChild>
<p className="cursor-pointer rounded-full bg-gray-300 text-gray-500 p-2">
Sélectionner une action
</p>
</DropdownMenu.Trigger>
<DropdownMenu.Portal>
<DropdownMenu.Content
className="min-w-[150px] shadow-sm bg-white rounded-md p-1"
sideOffset={5}
>
<DropdownMenu.Item
onClick={() => bulkDeleteMutation.mutate(selectedIds)}
className="p-2 text-[14px] cursor-pointer hover:bg-blue-100 hover:text-blue-500 rounded-md"
>
Supprimer
</DropdownMenu.Item>
</DropdownMenu.Content>
</DropdownMenu.Portal>
</DropdownMenu.Root>
</div>
<div className="flex justify-between lg:justify-end space-x-3">
{/* Modal d'ajout */}
<Modal
title="Ajouter une organisation"
open={openModal}
onOpenChange={(isOpen) => {
if (!isOpen) {
setOpenModal(false);
}
}}
trigger={
<div
onClick={() => setOpenModal(true)}
className="cursor-pointer p-3 bg-blue-600 text-white rounded-full"
>
Ajouter une organisation
</div>
}
content={
<Form
fields={[
{
name: "name",
label: "Nom de l'organisation",
type: "text",
placeholder: "Entrer le nom de l'organisation",
},
{
name: "description",
label: "Description",
type: "textarea",
placeholder: "Entrer la description de l'organisation",
},
{
name: "status",
label: "Statut",
type: "select",
options: [
{ label: "Actif", value: "active" },
{ label: "Inactif", value: "inactive" },
{ label: "En attente", value: "pending" },
{ label: "Bloqué", value: "blocked" },
],
},
{
name: "owner",
label: "Administrateur",
type: "select",
options: users?.map((user: { id: string; name: string }) => ({
label: user.name,
value: user.id,
})) || [],
},
]}
submit={createMutation.mutate} // Le type est maintenant compatible
schema={companySchema}
child={
<button
type="submit"
disabled={createMutation.isPending}
className={`${createMutation.isPending ? "btn-auth-loading" : "btn-auth"} mt-4 cursor-pointer`}
>
{createMutation.isPending ? "En cours..." : "Créer l'organisation"}
</button>
}
/>
}
/>
<FloatingLabelInput
name="search"
placeholder="Effectuer une recherche"
type="search"
onChange={(value) => table.setGlobalFilter(value)}
button={
<Image
alt="Filtrer"
src={icons.filterIcon}
className="cursor-pointer"
/>
}
/>
</div>
</div>
);
}}
/>
);
}

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

@ -15,7 +15,7 @@ export default function AdminHeader() {
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 /> */}
@ -43,7 +43,7 @@ export default function AdminHeader() {
</Link>
</DropdownMenu.Item>
<DropdownMenu.Item className="DropdownMenuItem dropdown-item text-[14px]">
<Link href="/login" className="d-flex items-start r-danger ">
<Link href="#" className="d-flex items-start r-danger ">
<Image src={icons.logoutRed} alt="Deconnexion" />
Déconnexion
</Link>

9
src/components/form/form.tsx
View File

@ -10,7 +10,8 @@ export default function Form({
className,
child,
title,
schema
schema,
formClassName
} : FormProps) {
const [errors, setErrors] = useState<Record<string, string>>({});
@ -42,12 +43,12 @@ export default function Form({
}
return (
<form className={className} onSubmit={handleSubmit}>
<form onSubmit={handleSubmit} className={formClassName}>
<div className="flex justify-center text-black">
<p className="text-3xl font-bold">{title}</p>
</div>
<div className="flex flex-col gap-8 mt-2">
<div className={`space-y-8 my-2 ${className}`}>
{
fields.map((item, index) => (
@ -67,8 +68,8 @@ export default function Form({
</div>
))
}
{child}
</div>
{child}
</form>
)

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

@ -9,7 +9,7 @@ import {
getFilteredRowModel,
Table as TableType,
} from "@tanstack/react-table"
import { cloneElement, isValidElement, ReactNode, useEffect, useRef, useState } from "react";
import { ReactNode, useEffect, useRef, useState } from "react";
import { clsx, type ClassValue } from "clsx"
import Image from "next/image";
import { icons } from "#/assets/icons";
@ -18,14 +18,16 @@ import { icons } from "#/assets/icons";
columns: ColumnDef<TData, TValue>[]
data: TData[],
pageSize?: number,
header?: ReactNode | ((table: TableType<TData>) => ReactNode)
header?: ReactNode | ((table: TableType<TData>) => ReactNode),
isDataLoading?: boolean
}
export default function Table<TData, TValue>({
columns,
data,
pageSize = 10,
header
header,
isDataLoading = true
}: DataTableProps<TData, TValue>) {
const [rowSelection, setRowSelection] = useState({})
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>(
@ -101,6 +103,12 @@ export default function Table<TData, TValue>({
<thead className="h-10">
{table.getHeaderGroups().map((headerGroup) => (
<tr key={headerGroup.id} className="rounded-lg">
{header
?
<th className="bg-[#E9F0FF] p-3 text-start first:rounded-tl-lg">
</th>
:
<th className="bg-[#E9F0FF] p-3 text-start first:rounded-tl-lg">
<input
ref={headerCheckboxRef}
@ -109,6 +117,7 @@ export default function Table<TData, TValue>({
type="checkbox" name="" id=""
/>
</th>
}
{headerGroup.headers.map((header) => {
return(
<th key={header.id} className="bg-[#E9F0FF] p-3 text-start last:rounded-tr-lg">
@ -141,9 +150,17 @@ export default function Table<TData, TValue>({
</tr>
))
)
: isDataLoading ?
(
<tr>
<td colSpan={columns.length} className="h-20 text-center">
Chargement...
</td>
</tr>
)
: (
<tr>
<td colSpan={columns.length}>
<td colSpan={columns.length} className="h-20 text-center">
Aucun résultats
</td>
</tr>

11
src/lib/function.ts Normal file
View File

@ -0,0 +1,11 @@
import { signOut } from "next-auth/react";
export const signOutFunc = () => {
signOut({
callbackUrl: `/login?redirect_to=${
window.location.pathname === "/logout"
? "/home"
: window.location.pathname
}`,
});
};

3
src/types/index.ts
View File

@ -23,7 +23,8 @@ export interface FormProps {
submit: (param: any) => unknown,
className?: string,
child: ReactNode,
schema: ZodSchema
schema: ZodSchema,
formClassName?: string
}
export interface StatsType {