Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 921007ae13 |
@ -23,7 +23,7 @@ export default function Admins() {
|
||||
const [selectedAdminId, setSelectedAdminId] = useState<string | null>(null);
|
||||
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
|
||||
const {
|
||||
data: users,
|
||||
refetch,
|
||||
@ -47,6 +47,7 @@ export default function Admins() {
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
const createMutation = useMutation({
|
||||
mutationFn: async (data: {
|
||||
last_name: string;
|
||||
@ -226,18 +227,14 @@ export default function Admins() {
|
||||
submit={updateMutation.mutate}
|
||||
schema={adminSchema}
|
||||
child={
|
||||
<div className="flex justify-center">
|
||||
<div className="flex justify-center">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={updateMutation.isPending}
|
||||
className={`${
|
||||
updateMutation.isPending
|
||||
? "btn-auth-loading"
|
||||
: "btn-auth"
|
||||
} cta modal-cta mt-4 cursor-pointer`}
|
||||
>
|
||||
{updateMutation.isPending ? "En cours..." : "Modifier"}
|
||||
</button>
|
||||
type="submit"
|
||||
disabled={updateMutation.isPending}
|
||||
className={`${updateMutation.isPending ? "btn-auth-loading" : "btn-auth"} cta modal-cta mt-4 cursor-pointer`}
|
||||
>
|
||||
{updateMutation.isPending ? "En cours..." : "Modifier"}
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
@ -270,9 +267,7 @@ 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"
|
||||
@ -361,7 +356,10 @@ export default function Admins() {
|
||||
}
|
||||
}}
|
||||
trigger={
|
||||
<div onClick={() => setOpenModal(true)} className="cta">
|
||||
<div
|
||||
onClick={() => setOpenModal(true)}
|
||||
className="cta"
|
||||
>
|
||||
Ajouter un admin
|
||||
</div>
|
||||
}
|
||||
@ -391,19 +389,13 @@ export default function Admins() {
|
||||
schema={adminSchema}
|
||||
child={
|
||||
<div className="flex justify-center">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={createMutation.isPending}
|
||||
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"}
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={createMutation.isPending}
|
||||
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"}
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
|
||||
@ -1,224 +1,209 @@
|
||||
"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();
|
||||
export default function HomePage () {
|
||||
|
||||
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",
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${session?.user.access_token}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
try {
|
||||
const response = await axios.get(
|
||||
'https://private-docs-api.intside.co/companies', {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${session?.user.access_token}`
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
if (response.data) {
|
||||
return response.data.data as Company[];
|
||||
if(response.data) {
|
||||
return response.data.data as Company[]
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
}
|
||||
} catch (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);
|
||||
if(response.status === 200 || response.status === 201) {
|
||||
console.log('Suppresion réussie !')
|
||||
setOpen(false)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
console.error(error)
|
||||
}
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["companies"] });
|
||||
queryClient.invalidateQueries({ queryKey: ["companies"] })
|
||||
|
||||
refetch()
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
refetch();
|
||||
},
|
||||
});
|
||||
|
||||
const columns: ColumnDef<Company>[] = [
|
||||
{
|
||||
accessorKey: "name",
|
||||
header: "Organisations",
|
||||
},
|
||||
{
|
||||
accessorKey: "total_users",
|
||||
header: "Utilisateurs",
|
||||
},
|
||||
{
|
||||
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]);
|
||||
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>
|
||||
{
|
||||
accessorKey: "name",
|
||||
header: "Organisations",
|
||||
},
|
||||
{
|
||||
accessorKey: "total_users",
|
||||
header: "Utilisateurs",
|
||||
},
|
||||
{
|
||||
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])
|
||||
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>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: "owner.email",
|
||||
header: "Adresse e-mail",
|
||||
},
|
||||
{
|
||||
accessorKey: "status",
|
||||
header: "Statut",
|
||||
cell: ({ cell }) => {
|
||||
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]"
|
||||
: ""
|
||||
<p>{value}</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
},
|
||||
{
|
||||
accessorKey: "owner.email",
|
||||
header: "Adresse e-mail"
|
||||
},
|
||||
{
|
||||
accessorKey: "status",
|
||||
header: "Statut",
|
||||
cell: ({ cell }) => {
|
||||
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"
|
||||
? "Actif"
|
||||
: status === "inactive"
|
||||
? "Inactif"
|
||||
: status === "pending"
|
||||
? "En attente"
|
||||
: status === "blocked"
|
||||
? "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>
|
||||
>
|
||||
{
|
||||
status === "active" ? "Actif" :
|
||||
status === "inactive" ? "Inactif" :
|
||||
status === "pending" ? "En attente" :
|
||||
status === "blocked" ? "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);
|
||||
}
|
||||
title={
|
||||
<p className="font-bold text-3xl">
|
||||
Supprimer cette organisation
|
||||
}}
|
||||
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>
|
||||
}
|
||||
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={() => {
|
||||
setSelectedId(null);
|
||||
}}
|
||||
>
|
||||
Annuler
|
||||
</button>
|
||||
<button
|
||||
className="cta modal-cta danger"
|
||||
onClick={() => {
|
||||
mutate(id);
|
||||
setSelectedId(null);
|
||||
}}
|
||||
>
|
||||
Supprimer
|
||||
</button>
|
||||
</div>
|
||||
<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>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
];
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
return(
|
||||
<div className="space-y-10">
|
||||
<Statistics />
|
||||
|
||||
<p className="font-bold text-xl">Dernières organisations actives</p>
|
||||
|
||||
<Table
|
||||
columns={columns}
|
||||
<Table
|
||||
columns={columns}
|
||||
isDataLoading={isLoading}
|
||||
data={companies || []}
|
||||
data={companies || []}
|
||||
pageSize={5}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
)
|
||||
}
|
||||
@ -33,26 +33,3 @@ export default function Dashboard({ children }: { children: ReactNode }) {
|
||||
</div >
|
||||
)
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
<div className="sidebar r-m-0 d-flex flex-column pt-[16px] max-w-[90px] h-[100vh] relative ">
|
||||
<div className="logo r-flex-center pt-[13px] px-[20px] ">
|
||||
<icons.Logo aria-label="Logo" className="scale-95" />
|
||||
</div>
|
||||
<div className="nav-menu r-column-center h-max pt-[160px] r-gap-40 ">
|
||||
<Link href="#" className="nav-item r-flex-center ">
|
||||
<icons.HomeIcon aria-label="Home" className="nav-home scale-100" />
|
||||
</Link>
|
||||
<Link href="#" className="nav-item border-none r-flex-center ">
|
||||
<icons.CompaniesIcon aria-label="Companies" className="scale-100 " width={24} height={24} />
|
||||
</Link>
|
||||
<Link href="#" className="nav-item r-flex-center ">
|
||||
<icons.UserGroup aria-label="Admins" className="scale-100" width={24} height={24} />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="logout absolute bottom-[60px] left-[22px]">
|
||||
<icons.Logout aria-label="Logout" />
|
||||
</div>
|
||||
*/
|
||||
@ -1,47 +1,41 @@
|
||||
"use client";
|
||||
|
||||
"use client"
|
||||
import { icons } from "#/assets/icons"
|
||||
import Image from "next/image"
|
||||
import axios from "axios";
|
||||
import { useSession } from "next-auth/react";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { Admin, Company, CompanyById } from "#/types";
|
||||
import { Company, CompanyById } from "#/types";
|
||||
import FloatingLabelInput from "#/components/floatingLabelInput";
|
||||
import { usePathname } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import Form from "#/components/form/form";
|
||||
import { adminUpdateSchema } from "#/schema/loginSchema";
|
||||
import { Modal } from "#/components/modal";
|
||||
import { useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { adminSchema } from "#/schema/loginSchema";
|
||||
|
||||
export default function Update() {
|
||||
|
||||
const pathname = usePathname();
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const segments = pathname.split("/");
|
||||
const uid = segments[segments.length - 2];
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
|
||||
const { data: session, status } = useSession();
|
||||
const [openResetModal, setOpenResetModal] = useState(false);
|
||||
const [openBlockModal, setOpenBlockModal] = useState(false);
|
||||
|
||||
const {
|
||||
data: companyInfos,
|
||||
isLoading: companyLoading,
|
||||
refetch,
|
||||
} = useQuery({
|
||||
enabled: status === "authenticated",
|
||||
queryKey: ["company"],
|
||||
const { data: companyInfos, refetch, isLoading } = useQuery({
|
||||
enabled: status === 'authenticated',
|
||||
queryKey: ["companyStats", session?.user.access_token],
|
||||
queryFn: async () => {
|
||||
try {
|
||||
const response = await axios.get(
|
||||
`https://private-docs-api.intside.co/companies/${uid}`,
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${session?.user.access_token}`,
|
||||
},
|
||||
params: {
|
||||
details: true,
|
||||
},
|
||||
`https://private-docs-api.intside.co/users/${uid}`, {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${session?.user.access_token}`
|
||||
},
|
||||
params: {
|
||||
details: true
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
if (response.data) {
|
||||
@ -50,300 +44,82 @@ export default function Update() {
|
||||
} catch (error: any) {
|
||||
console.error(error);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const { data: users } = useQuery({
|
||||
enabled: status === "authenticated",
|
||||
queryKey: ["organizations"],
|
||||
queryFn: async () => {
|
||||
try {
|
||||
const response = await axios.get(
|
||||
"https://private-docs-api.intside.co/users",
|
||||
{
|
||||
headers: { Authorization: `Bearer ${session?.user.access_token}` },
|
||||
}
|
||||
);
|
||||
return response.data.data.map((user: Admin) => ({
|
||||
id: user.id,
|
||||
name: `${user.first_name} ${user.last_name}`,
|
||||
}));
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
return [];
|
||||
}
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
const { mutate, isPending } = useMutation({
|
||||
mutationFn: async (data: { id: string }) => {
|
||||
mutationFn: async (id: string) => {
|
||||
try {
|
||||
const response = await axios.put(
|
||||
`https://private-docs-api.intside.co/companies/${data.id}/`,
|
||||
data,
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${session?.user.access_token}`,
|
||||
},
|
||||
const response = await axios.delete(
|
||||
`https://private-docs-api.intside.co/companies/${id}/`, {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${session?.user.access_token}`
|
||||
}
|
||||
);
|
||||
}
|
||||
)
|
||||
|
||||
if (response.status === 200 || response.status === 201) {
|
||||
console.log("Modif réussie !");
|
||||
toast.success("Modification réussie !");
|
||||
console.log('Suppresion réussie !')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
console.error(error)
|
||||
}
|
||||
},
|
||||
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["company"] });
|
||||
refetch();
|
||||
},
|
||||
});
|
||||
queryClient.invalidateQueries({ queryKey: ["companies"] })
|
||||
|
||||
const blockMutation = useMutation({
|
||||
mutationFn: async (data: { id: string; name: string; status: string }) => {
|
||||
try {
|
||||
const response = await axios.put(
|
||||
`https://private-docs-api.intside.co/companies/${data.id}/`,
|
||||
data,
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${session?.user.access_token}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
refetch()
|
||||
}
|
||||
})
|
||||
|
||||
if (response.status === 200 || response.status === 201) {
|
||||
console.log("Statut modifié !");
|
||||
setOpenBlockModal(false);
|
||||
toast.success("Organisation bloquée !");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
},
|
||||
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["company"] });
|
||||
refetch();
|
||||
},
|
||||
});
|
||||
|
||||
const resetMutation = useMutation({
|
||||
mutationFn: async (email: string) => {
|
||||
try {
|
||||
const response = await axios.post(
|
||||
`https://private-docs-api.intside.co/users/reset_password/`,
|
||||
{
|
||||
email: email,
|
||||
},
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${session?.user.access_token}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
if (response.status === 200 || response.status === 201) {
|
||||
console.log("Reset réussie !");
|
||||
setOpenResetModal(false);
|
||||
toast.success("Email de réinitialisation envoyé !");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
if (status === "loading" && companyLoading) {
|
||||
return <div>Chargement...</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* { company.map() } */}
|
||||
|
||||
|
||||
{/* <Form
|
||||
title="Connexion"
|
||||
className="grid grid-cols-2"
|
||||
fields={[
|
||||
{
|
||||
label: "Nom de l’organisation",
|
||||
name: "company",
|
||||
type: "text",
|
||||
placeholder: "Nom de l'organisation",
|
||||
defaultValue: companyInfos?.name
|
||||
},
|
||||
{
|
||||
label: "Nom de l’admin",
|
||||
name: "last_name",
|
||||
type: "text",
|
||||
placeholder: "Nom de l'admin",
|
||||
defaultValue: companyInfos?.owner.last_name
|
||||
},
|
||||
{
|
||||
label: "Prénom de l’admin",
|
||||
name: "first_name",
|
||||
type: "text",
|
||||
placeholder: "Prénom de l'admin",
|
||||
defaultValue: companyInfos?.owner.first_name
|
||||
}
|
||||
]}
|
||||
submit={mutate}
|
||||
schema={adminSchema}
|
||||
child={<button type="submit" className="btn-auth">Connexion</button>}
|
||||
/> */}
|
||||
|
||||
|
||||
<div className="p-container ">
|
||||
<div className="r-flex-column">
|
||||
<div className="r-flex-between items-center bg-bluegray p-[24px] m-0 ">
|
||||
<div className=""></div>
|
||||
<h2 className="admin-name text-[20px]">
|
||||
{companyInfos?.name || "Pentatonic"}
|
||||
</h2>
|
||||
<Link
|
||||
href={`/admin/organizations/${uid}/`}
|
||||
type="Link"
|
||||
className="cta cancel"
|
||||
>
|
||||
<h2 className="admin-name text-[20px]" >{companyInfos?.name || "Pentatonic"}</h2>
|
||||
<Link href={`http://localhost:3000/admin/organizations/${uid}/`} type="Link" className="cta cancel">
|
||||
Annuler
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="p-4">
|
||||
<Form
|
||||
className="grid grid-cols-2 gap-x-10"
|
||||
fields={[
|
||||
{
|
||||
label: "Nom de l'organisation",
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Nom de l'admin",
|
||||
defaultValue: companyInfos?.name,
|
||||
},
|
||||
{
|
||||
label: "Description",
|
||||
name: "description",
|
||||
type: "text",
|
||||
placeholder: "Description de l'organisation",
|
||||
defaultValue: companyInfos?.description,
|
||||
},
|
||||
{
|
||||
name: "status",
|
||||
label: "Statut",
|
||||
type: "select",
|
||||
defaultValue: companyInfos?.status,
|
||||
options: [
|
||||
{ label: "Actif", value: "active" },
|
||||
{ label: "Inactif", value: "inactive" },
|
||||
{ label: "En attente", value: "pending" },
|
||||
{ label: "Bloqué", value: "blocked" },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "owner",
|
||||
label: "Administrateur",
|
||||
type: "select",
|
||||
defaultValue: companyInfos?.owner.id,
|
||||
options:
|
||||
users?.map((user: { id: string; name: string }) => ({
|
||||
label: user.name,
|
||||
value: user.id,
|
||||
})) || [],
|
||||
},
|
||||
{
|
||||
name: "id",
|
||||
type: "hidden",
|
||||
defaultValue: companyInfos?.id,
|
||||
},
|
||||
]}
|
||||
submit={mutate}
|
||||
schema={adminUpdateSchema}
|
||||
child={
|
||||
<div className="ctas flex gap-4 mt-5">
|
||||
<button type="submit" className="cta" disabled={isPending}>
|
||||
{isPending ? "Modifications en cours..." : "Modifier"}
|
||||
</button>
|
||||
|
||||
<Modal
|
||||
title="Réinitialiser le mot de passe"
|
||||
open={openResetModal}
|
||||
onOpenChange={setOpenResetModal}
|
||||
trigger={
|
||||
<button type="button" className="cta info">
|
||||
Mot de passe
|
||||
</button>
|
||||
}
|
||||
content={
|
||||
<div>
|
||||
<p className="text-center">
|
||||
Voulez-vous envoyer à{" "}
|
||||
<span className="font-bold">
|
||||
{companyInfos?.owner.last_name +
|
||||
" " +
|
||||
companyInfos?.owner.first_name +
|
||||
" "}
|
||||
</span>
|
||||
un lien de réinitialisation de mot de passe à son
|
||||
adresse email ?
|
||||
</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"
|
||||
onClick={() => {
|
||||
setOpenResetModal(false);
|
||||
}}
|
||||
>
|
||||
Annuler
|
||||
</button>
|
||||
<button
|
||||
className="bg-red-500 text-white py-2 px-4 rounded-full hover:bg-red-600 cursor-pointer"
|
||||
onClick={() => {
|
||||
if (companyInfos?.owner.email) {
|
||||
resetMutation.mutate(companyInfos.owner.email);
|
||||
}
|
||||
}}
|
||||
disabled={resetMutation.isPending}
|
||||
>
|
||||
{resetMutation.isPending
|
||||
? "Envoi en cours..."
|
||||
: "Envoyer"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
|
||||
<Modal
|
||||
title="Bloquer une organisation"
|
||||
open={openBlockModal}
|
||||
onOpenChange={setOpenBlockModal}
|
||||
trigger={
|
||||
<button type="button" className="cta danger">
|
||||
{blockMutation.isPending
|
||||
? "En cours..."
|
||||
: companyInfos?.status === "blocked"
|
||||
? "Supprimer"
|
||||
: "Bloquer"}
|
||||
</button>
|
||||
}
|
||||
content={
|
||||
<div>
|
||||
<p className="text-center">
|
||||
Voulez-vous bloquer l'organisation{" "}
|
||||
<span className="font-bold">
|
||||
{companyInfos?.name + " "}
|
||||
</span>{" "}
|
||||
?
|
||||
</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"
|
||||
onClick={() => {
|
||||
setOpenBlockModal(false);
|
||||
}}
|
||||
>
|
||||
Annuler
|
||||
</button>
|
||||
<button
|
||||
className="bg-red-500 text-white py-2 px-4 rounded-full hover:bg-red-600 cursor-pointer"
|
||||
onClick={() => {
|
||||
if (companyInfos) {
|
||||
blockMutation.mutate({
|
||||
id: companyInfos.id,
|
||||
name: companyInfos.name,
|
||||
status: "blocked",
|
||||
});
|
||||
}
|
||||
}}
|
||||
disabled={blockMutation.isPending}
|
||||
>
|
||||
{blockMutation.isPending
|
||||
? "En cours..."
|
||||
: companyInfos?.status === "blocked"
|
||||
? "Supprimer"
|
||||
: "Bloquer"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* <div className="r-flex-column p-[32px] r-gap-24">
|
||||
<div className="r-flex-column p-[32px] r-gap-24">
|
||||
<div className="labels-container ">
|
||||
<div className="label-container">
|
||||
<FloatingLabelInput label="Nom de l’organisation" name="org-name" type="text" placeholder="Intside" defaultValue={companyInfos?.name} />
|
||||
@ -363,9 +139,9 @@ export default function Update() {
|
||||
<button type="button" className="cta info">Mot de passe</button>
|
||||
<button type="button" className="cta danger">Bloquer</button>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
)
|
||||
}
|
||||
@ -16,6 +16,7 @@ import { companySchema } from "#/schema";
|
||||
import { Admin, Company } from "#/types";
|
||||
import Link from "next/link";
|
||||
|
||||
|
||||
export default function Organizations() {
|
||||
const { data: session, status } = useSession();
|
||||
const [openModal, setOpenModal] = useState(false);
|
||||
@ -51,7 +52,9 @@ export default function Organizations() {
|
||||
},
|
||||
});
|
||||
|
||||
const { data: users } = useQuery({
|
||||
const {
|
||||
data: users,
|
||||
} = useQuery({
|
||||
enabled: status === "authenticated",
|
||||
queryKey: ["organizations"],
|
||||
queryFn: async () => {
|
||||
@ -165,127 +168,115 @@ 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]);
|
||||
return (
|
||||
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">
|
||||
{initials}
|
||||
</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"
|
||||
? "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" ? "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"
|
||||
// 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>
|
||||
return (
|
||||
<div className="flex justify-end p-2 space-x-2"
|
||||
// onClick={() => { mutate(id) }}
|
||||
>
|
||||
|
||||
<div className="flex justify-between w-full pt-6 r-gap-24">
|
||||
<button
|
||||
className="cta modal-cta cancel"
|
||||
{/* Modal de suppression */}
|
||||
<Modal
|
||||
open={openDeleteModal && selectedAdminId === company.id}
|
||||
onOpenChange={(isOpen) => {
|
||||
if (!isOpen) {
|
||||
setSelectedAdminId(null);
|
||||
setOpenDeleteModal(false);
|
||||
}
|
||||
}}
|
||||
trigger={
|
||||
<div
|
||||
onClick={() => {
|
||||
setOpenDeleteModal(false);
|
||||
setSelectedAdminId(company.id);
|
||||
setOpenDeleteModal(true);
|
||||
}}
|
||||
>
|
||||
Annuler
|
||||
</button>
|
||||
<button
|
||||
className="cta modal-cta danger"
|
||||
onClick={() => {
|
||||
deleteMutation.mutate(company.id);
|
||||
}}
|
||||
>
|
||||
Supprimer
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</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={() => {
|
||||
setOpenDeleteModal(false);
|
||||
}}
|
||||
>
|
||||
Annuler
|
||||
</button>
|
||||
<button
|
||||
className="cta modal-cta danger"
|
||||
onClick={() => {
|
||||
deleteMutation.mutate(company.id);
|
||||
}}
|
||||
>
|
||||
Supprimer
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
return (
|
||||
<Table
|
||||
@ -324,9 +315,7 @@ export default function Organizations() {
|
||||
<DropdownMenu.Portal>
|
||||
<DropdownMenu.Content
|
||||
className="min-w-[150px] shadow-sm bg-white rounded-md p-1 w-full"
|
||||
sideOffset={0}
|
||||
side="bottom"
|
||||
align="end"
|
||||
sideOffset={0} side="bottom" align="end"
|
||||
>
|
||||
<DropdownMenu.Item
|
||||
onClick={() => bulkDeleteMutation.mutate(selectedIds)}
|
||||
@ -350,7 +339,10 @@ export default function Organizations() {
|
||||
}
|
||||
}}
|
||||
trigger={
|
||||
<div onClick={() => setOpenModal(true)} className="cta">
|
||||
<div
|
||||
onClick={() => setOpenModal(true)}
|
||||
className="cta"
|
||||
>
|
||||
Ajouter une organisation
|
||||
</div>
|
||||
}
|
||||
@ -384,30 +376,23 @@ export default function Organizations() {
|
||||
name: "owner",
|
||||
label: "Administrateur",
|
||||
type: "select",
|
||||
options:
|
||||
users?.map((user: { id: string; name: string }) => ({
|
||||
label: user.name,
|
||||
value: user.id,
|
||||
})) || [],
|
||||
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={
|
||||
<div className="flex justify-center">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={createMutation.isPending}
|
||||
className={`${
|
||||
createMutation.isPending
|
||||
? "btn-auth-loading"
|
||||
: "btn-auth"
|
||||
} cta modal-cta mt-4 cursor-pointer`}
|
||||
>
|
||||
{createMutation.isPending
|
||||
? "En cours..."
|
||||
: "Ajouter une organisation"}
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={createMutation.isPending}
|
||||
className={`${createMutation.isPending ? "btn-auth-loading" : "btn-auth"} cta modal-cta mt-4 cursor-pointer`}
|
||||
>
|
||||
{createMutation.isPending ? "En cours..." : "Ajouter une organisation"}
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
|
||||
@ -25,9 +25,11 @@
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--foreground: #04060F;
|
||||
--foreground: #2a2a2a;
|
||||
--background: #ffffff;
|
||||
}
|
||||
--cinder: #999;
|
||||
--bluegray: --primary;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
|
||||
@ -1,10 +1,9 @@
|
||||
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";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Private Docs",
|
||||
@ -16,6 +15,7 @@ export default function RootLayout({
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
|
||||
return (
|
||||
<html lang="en">
|
||||
<head>
|
||||
@ -25,9 +25,8 @@ export default function RootLayout({
|
||||
<body>
|
||||
<AuthProvider>
|
||||
<QueryClientProvide>
|
||||
<NextTopLoader color="#246BFD" shadow="0" />
|
||||
<NextTopLoader color="#246BFD" shadow="0" />
|
||||
{children}
|
||||
<ToastClient richColors />
|
||||
</QueryClientProvide>
|
||||
</AuthProvider>
|
||||
</body>
|
||||
|
||||
@ -95,14 +95,50 @@
|
||||
width: 284px;
|
||||
}
|
||||
|
||||
.header-desktop{
|
||||
display: flex!important;
|
||||
}
|
||||
.mobile{
|
||||
display: none!important;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.admin-infos {
|
||||
/* justify-content: space-between; */
|
||||
/* gap: 30px; */
|
||||
.header, .main{
|
||||
padding-left: 22px;
|
||||
padding-right: 22px;
|
||||
}
|
||||
.admin-card {
|
||||
/* max-width: 100%; */
|
||||
.header-desktop{
|
||||
display: none!important;
|
||||
}
|
||||
.mobile{
|
||||
display: flex!important;
|
||||
}
|
||||
.mobile-flex{
|
||||
display: flex;
|
||||
}
|
||||
.mobile-none{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header .name{
|
||||
padding-left: 44px;
|
||||
}
|
||||
|
||||
.sidebar{
|
||||
transition: all ease-in-out .4s;
|
||||
}
|
||||
.hamburger{
|
||||
position: absolute;
|
||||
top: 43px;
|
||||
left: 22px;
|
||||
transform: scale(2);
|
||||
}
|
||||
.hamburger.shifted{
|
||||
left: 100px;
|
||||
}
|
||||
.hamburger-icon{
|
||||
color: var(--primary);
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
@ -1,64 +1,55 @@
|
||||
"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";
|
||||
import Theme from "./theme";
|
||||
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] ">
|
||||
<p className="name text-[26px]">
|
||||
Bienvenue, <span>Ken B.</span>{" "}
|
||||
</p>
|
||||
<nav className="header r-flex-between items-center px-[44px] py-[20px] ">
|
||||
<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 /> */}
|
||||
|
||||
<button type="button" className="icon-border">
|
||||
<div className="header-desktop">
|
||||
<Theme />
|
||||
</div>
|
||||
<button type="button" className="icon-border header-desktop">
|
||||
<Image src={icons.notificationsIcon} alt="Notifications" />
|
||||
</button>
|
||||
<div className="relative">
|
||||
<DropdownMenu.Root open={open} onOpenChange={setOpen}>
|
||||
<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">
|
||||
<button type="button" className="icon-borderd mobile scale-120" >
|
||||
<Image src={icons.arrowLeft} alt="options" className={`transition-transform duration-300 ${open ? "scale-x-[-1]" : ""}`} />
|
||||
</button>
|
||||
<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]" : ""
|
||||
}`}
|
||||
/>
|
||||
<button className="IconButton header-desktop" aria-label="Customise options">
|
||||
<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.Item className="DropdownMenuItem dropdown-item text-[14px] outline-none hover:bg-blue-100 rounded-md">
|
||||
<DropdownMenu.Content className="DropdownMenuContent dropdown-menu r-flex-column r-secondary" sideOffset={0} side="bottom" align="end" >
|
||||
<DropdownMenu.Item className="DropdownMenuItem dropdown-item text-[14px]">
|
||||
<Link href="#" className="d-flex items-start ">
|
||||
<Image src={icons.userIcon} alt="Profil" />
|
||||
Profil
|
||||
</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 "
|
||||
>
|
||||
{/* <DropdownMenu.Item className="DropdownMenuItem dropdown-item flex items-center content-center text-[14px] mobile">
|
||||
<Theme />
|
||||
</DropdownMenu.Item> */}
|
||||
<DropdownMenu.Item className="DropdownMenuItem dropdown-item text-[14px]">
|
||||
<Link href="#" className="d-flex items-start r-danger ">
|
||||
<Image src={icons.logoutRed} alt="Deconnexion" />
|
||||
Déconnexion
|
||||
</Link>
|
||||
@ -70,5 +61,5 @@ export default function AdminHeader() {
|
||||
</div>
|
||||
</nav>
|
||||
</>
|
||||
);
|
||||
}
|
||||
)
|
||||
}
|
||||
@ -4,15 +4,22 @@ import { icons } from "#/assets/icons"
|
||||
import NavItem from "./navItem";
|
||||
import { usePathname } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import { useState } from "react";
|
||||
|
||||
|
||||
export default function Sidebar() {
|
||||
|
||||
const pathname = usePathname();
|
||||
|
||||
const [mobileVisible, setmobileVisible] = useState(false)
|
||||
|
||||
const handleMobileVisible = ()=> {
|
||||
setmobileVisible(!mobileVisible)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="sidebar-holder min-w-[78px] max-w-[90px] h-[100vh] ">
|
||||
<div className={` ${ mobileVisible? "mobile-flex" : "mobile-none" } sidebar-holder min-w-[78px] max-w-[90px] h-[100vh] relative `}>
|
||||
<div className="sidebar r-m-0 d-flex flex-column pt-[25px] max-w-[90px] h-[100vh] ">
|
||||
<div className="logo r-flex-center px-[19px] ">
|
||||
<Image src={icons.logo} alt="Logo" className="scale-95" />
|
||||
@ -29,6 +36,12 @@ export default function Sidebar() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div onClick={() => handleMobileVisible()} className={`${mobileVisible ? "shifted" : ""} hamburger mobile`}>
|
||||
{/* <Image src={icons.logo} alt="Logo" className="scale-95" /> */}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-list hamburger-icon" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5"/>
|
||||
</svg>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -1,14 +1,14 @@
|
||||
"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,
|
||||
placeholder,
|
||||
type,
|
||||
export default function FloatingLabelInput({
|
||||
label,
|
||||
placeholder,
|
||||
type,
|
||||
options,
|
||||
button,
|
||||
showPasswordToggle = false,
|
||||
@ -17,44 +17,34 @@ export default function FloatingLabelInput({
|
||||
onChange,
|
||||
}: FloatingLabelInputProps) {
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
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") {
|
||||
setSelectedValue(value);
|
||||
}
|
||||
|
||||
if (onChange) {
|
||||
onChange(value);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const renderInput = () => {
|
||||
switch (type) {
|
||||
case "select":
|
||||
switch(type) {
|
||||
case 'select':
|
||||
return (
|
||||
<div className="relative w-full">
|
||||
<select
|
||||
<select
|
||||
className="input-form modal-input focus:ring-2 focus:ring-blue-500 outline-none"
|
||||
name={name}
|
||||
value={selectedValue}
|
||||
onChange={handleChange}
|
||||
defaultValue={defaultValue}
|
||||
>
|
||||
{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
|
||||
@ -63,6 +53,7 @@ export default function FloatingLabelInput({
|
||||
placeholder={placeholder}
|
||||
className="input-form focus:ring-2 focus:ring-blue-500 pr-10 outline-none"
|
||||
defaultValue={defaultValue}
|
||||
|
||||
/>
|
||||
{showPasswordToggle && (
|
||||
<button
|
||||
@ -71,38 +62,44 @@ export default function FloatingLabelInput({
|
||||
className="btn-floating-right text-gray-500 hover:text-gray-700 focus:outline-none"
|
||||
>
|
||||
{showPassword ? (
|
||||
<Image
|
||||
<Image
|
||||
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":
|
||||
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-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:
|
||||
return (
|
||||
<div className="relative w-full">
|
||||
@ -122,10 +119,13 @@ 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()}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,6 +1,6 @@
|
||||
import * as Dialog from "@radix-ui/react-dialog";
|
||||
import { ReactNode } from "react";
|
||||
import { icons } from "#/assets/icons";
|
||||
import { icons } from "#/assets/icons"
|
||||
import Image from "next/image";
|
||||
|
||||
export function Modal({
|
||||
@ -8,7 +8,7 @@ export function Modal({
|
||||
title,
|
||||
content,
|
||||
open,
|
||||
onOpenChange,
|
||||
onOpenChange
|
||||
}: {
|
||||
trigger: ReactNode;
|
||||
title?: string | ReactNode;
|
||||
@ -18,29 +18,29 @@ 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-max flex flex-col gap-10 bg-white rounded-lg shadow-xl z-50 px-16 py-12"
|
||||
<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 text-[30px] ">
|
||||
{title}
|
||||
</Dialog.Title>
|
||||
|
||||
<div className="flex gap-5 justify-center">{content}</div>
|
||||
|
||||
<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 className="flex gap-5 justify-center">
|
||||
{content}
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</Dialog.Content>
|
||||
</Dialog.Portal>
|
||||
</Dialog.Root>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,20 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { ComponentProps } from "react";
|
||||
import { Toaster as Sonner } from "sonner";
|
||||
|
||||
type ToasterProps = ComponentProps<typeof Sonner>;
|
||||
|
||||
const ToastClient = ({ ...props }: ToasterProps) => {
|
||||
|
||||
return (
|
||||
<Sonner
|
||||
style={{
|
||||
right: "50px",
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export { ToastClient };
|
||||
@ -18,4 +18,4 @@ export const companySchema = z.object({
|
||||
description: z.string(),
|
||||
status: z.string(),
|
||||
owner: z.string()
|
||||
})
|
||||
})
|
||||
|
||||
@ -1,22 +0,0 @@
|
||||
import { Description } from "@radix-ui/react-dialog";
|
||||
import { z } from "zod";
|
||||
|
||||
export const loginSchema = z.object({
|
||||
email: z.string().email("Email invalide"),
|
||||
password: z.string().min(8, "Le mot de passe doit contenir au moins 8 caractères")
|
||||
});
|
||||
|
||||
export const adminSchema = z.object({
|
||||
id: z.string().optional(),
|
||||
last_name: z.string(),
|
||||
first_name: z.string(),
|
||||
email: z.string().min(1, "L'email est requis").email("Email invalide"),
|
||||
});
|
||||
|
||||
export const adminUpdateSchema = z.object({
|
||||
id: z.string().optional(),
|
||||
name: z.string(),
|
||||
description: z.string(),
|
||||
status: z.string(),
|
||||
owner: z.string(),
|
||||
});
|
||||
@ -59,19 +59,11 @@ export interface Owner {
|
||||
last_name: string
|
||||
}
|
||||
|
||||
export interface Admin {
|
||||
id: string
|
||||
email: string
|
||||
first_name: string
|
||||
last_name: string
|
||||
profile: string
|
||||
}
|
||||
export interface CompanyById {
|
||||
id: string
|
||||
name: string
|
||||
is_premium: boolean
|
||||
status: string
|
||||
description: string
|
||||
owner: Owner
|
||||
total_users: number
|
||||
total_documents: number
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user