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

feat: implemented organization profile

Browse Source
This commit is contained in:
Ruben 2025-03-28 15:48:25 +01:00
parent 3e1cf17b2d
commit 98ba95dc01
7 changed files with 241 additions and 148 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -16,55 +16,64 @@ export default function Profile() {
const segments = pathname.split("/"); const segments = pathname.split("/");
const uid = segments[segments.length - 1]; const uid = segments[segments.length - 1];
const { data: session, status } = useSession(); const { data: session, status } = useSession();
const { data: companyInfos, isLoading } = useQuery({ const { data: companyInfos, isLoading } = useQuery({
enabled: status === 'authenticated', enabled: status === 'authenticated',
queryKey: ["stats", session?.user.access_token], queryKey: ["companyStats", session?.user.access_token],
queryFn: async () => { queryFn: async () => {
try { try {
const response = await axios.get( const response = await axios.get(
`https://private-docs-api.intside.co/companies/${uid}`, { `https://private-docs-api.intside.co/companies/${uid}`, {
headers: { headers: {
'Authorization': `Bearer ${session?.user.access_token}` 'Authorization': `Bearer ${session?.user.access_token}`
},
params: {
details: true
} }
} }
) );
if (response.data) { if (response.data) {
return response.data as CompanyById return response.data as CompanyById;
} }
} catch (error: any) { } catch (error: any) {
console.error(error) console.error(error);
} }
} }
}) });
const adminId = companyInfos?.owner
/*
const adminId = companyInfos?.owner;
console.log('will run the admin request');
const { data: adminInfos } = useQuery({ const { data: adminInfos } = useQuery({
enabled: status === 'authenticated', enabled: !!adminId && status === 'authenticated', // Only run when adminId is available
queryKey: ["stats", session?.user.access_token], queryKey: ["admin", adminId], // Ensure adminId is used in the query key
queryFn: async () => { queryFn: async () => {
console.log('running the admin request');
//console.log('url :', `https://private-docs-api.intside.co/users/${adminId}`);
try { try {
const response = await axios.get( const response = await axios.get(
`https://private-docs-api.intside.co/users/${companyInfos}`, { `https://private-docs-api.intside.co/users/${adminId}`, { // Use adminId instead of companyInfos
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 Owner return response.data as Owner;
} }
} catch (error: any) { } catch (error) {
console.error(error) console.error(error);
} }
} }
})
console.log(`https://private-docs-api.intside.co/users/${companyInfos}`);
});
*/
return ( return (
<> <>
@ -74,76 +83,76 @@ export default function Profile() {
<div className="r-flex-between items-center bg-bluegray p-[24px] m-0 "> <div className="r-flex-between items-center bg-bluegray p-[24px] m-0 ">
<div className=""></div> <div className=""></div>
<h2 className="admin-name text-[20px]" >{companyInfos?.name || "Pentatonic"}</h2> <h2 className="admin-name text-[20px]" >{companyInfos?.name || "Pentatonic"}</h2>
<button type="button" className="update-profile-name cta"> <Link href={`http://localhost:3000/admin/organizations/${uid}/update`} type="Link" className="update-profile-name cta">
Modifier Modifier
</button> </Link>
</div> </div>
<div className="r-flex-column p-[32px] r-gap-24"> <div className="r-flex-column p-[32px] r-gap-24 items-center lg:items-start ">
<h3 className="font-semibold">Détails de l'admin</h3> <h3 className="font-semibold">Détails de l'admin</h3>
<div className="r-flex gap-[60px]"> <div className="r-flex flex-wrap r-r-gap-12 gap-[12px]">
<div className="r-flex-between items-center rr-gap-12 w-max"> <div className="r-flex-between items-center w-max">
<div className="icon-rounded"> <div className="icon-rounded">
<Image src={icons.mailIcon} alt="E-mail" /> <Image src={icons.mailIcon} alt="E-mail" />
</div> </div>
<div className="r-flex-column p-[14px] r-gap-2"> <div className="r-flex-column p-[14px] admin-card r-gap-2">
<h4 className="email-label font-semibold">Adresse e-mail</h4> <h4 className="email-label font-semibold">Adresse e-mail</h4>
<p className="email">{adminInfos?.email || "email"}</p> <p className="email">{companyInfos?.owner?.email || "email"}</p>
</div> </div>
</div> </div>
<div className="r-flex-between items-center rr-gap-12 w-max"> <div className="r-flex-between items-center w-max">
<div className="icon-rounded"> <div className="icon-rounded">
<Image src={icons.personalCard} alt="E-mail" /> <Image src={icons.personalCard} alt="E-mail" />
</div> </div>
<div className="r-flex gap-[60px]"> <div className="r-flex gap-[12px] admin-card">
<div className="r-flex-column p-[14px] r-gap-2"> <div className="r-flex-column p-[14px] r-gap-2">
<h4 className="surname-label font-semibold">Prénom</h4> <h4 className="surname-label font-semibold">Prénom</h4>
<p className="surname">{adminInfos?.first_name || "nom"}</p> <p className="surname">{companyInfos?.owner?.first_name || "nom"}</p>
</div> </div>
<div className="r-flex-column p-[14px] r-gap-2"> <div className="r-flex-column p-[14px] r-gap-2">
<h4 className="name-label font-semibold">Nom</h4> <h4 className="name-label font-semibold">Nom</h4>
<p className="name">{adminInfos?.last_name || "nom"}</p> <p className="name">{companyInfos?.owner?.last_name || "nom"}</p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<hr /> <hr />
<div className="r-flex-column p-[32px] r-gap-24"> <div className="r-flex p-[32px] r-gap-24">
<div className="r-flex-between gap-[84px]"> <div className="admin-infos r-flex flex-wrap justifyc-center lg:justifyc-start ">
<div className="r-flex-between items-center rr-gap-12 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" />
</div> </div>
<div className="r-flex-column p-[14px] r-gap-2"> <div className="r-flex-column p-[14px] admin-card r-gap-2">
<h4 className="users-label font-semibold">Documents</h4> <h4 className="users-label font-semibold">Documents</h4>
<p className="r-secondary users">123</p> <p className="r-secondary users">{companyInfos?.total_documents || "0"}</p>
</div> </div>
</div> </div>
<div className="r-flex-between items-center rr-gap-12 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" />
</div> </div>
<div className="r-flex-column p-[14px] r-gap-2"> <div className="r-flex-column p-[14px] admin-card r-gap-2">
<h4 className="users-label font-semibold">Utilisateurs</h4> <h4 className="users-label font-semibold">Utilisateurs</h4>
<p className="r-secondary users">24</p> <p className="r-secondary users">{companyInfos?.total_users || "0"}</p>
</div> </div>
</div> </div>
<div className="r-flex-between items-center rr-gap-12 w-max"> <div className="r-flex-between items-center w-max">
<div className="icon-rounded"> <div className="icon-rounded">
<Image src={icons.maximizeIcon} alt="Fichiers" /> <Image src={icons.maximizeIcon} alt="Fichiers" />
</div> </div>
<div className="r-flex-column p-[14px] r-gap-2"> <div className="r-flex-column p-[14px] admin-card r-gap-2">
<h4 className="files-size-label font-semibold">Taille des fichiers</h4> <h4 className="files-size-label font-semibold">Taille des fichiers</h4>
<p className="r-secondary files-size">3.41GB</p> <p className="r-secondary files-size">{companyInfos?.total_documents_sizes + " "}GB</p>
</div> </div>
</div> </div>
<div className="r-flex-between items-center rr-gap-12 w-max"> <div className="r-flex-between items-center w-max">
<div className="icon-rounded"> <div className="icon-rounded">
<Image src={icons.timerIcon} alt="Horlorge" /> <Image src={icons.timerIcon} alt="Horlorge" />
</div> </div>
<div className="r-flex-column p-[14px] r-gap-2"> <div className="r-flex-column p-[14px] admin-card r-gap-2">
<h4 className="last-connexion-label font-semibold">Dernière utilisation</h4> <h4 className="last-connexion-label font-semibold">Dernière utilisation</h4>
<p className="r-secondary last-connexion">26 Jan 2024 - 14h15</p> <p className="r-secondary last-connexion">{companyInfos?.last_use || "-"}</p>
</div> </div>
</div> </div>
</div> </div>

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

@ -3,57 +3,72 @@ import { icons } from "#/assets/icons"
import Image from "next/image" import Image from "next/image"
import axios from "axios"; import axios from "axios";
import { useSession } from "next-auth/react"; import { useSession } from "next-auth/react";
import { useQuery } from "@tanstack/react-query"; import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { Company } from "#/types"; import { Company, CompanyById } from "#/types";
import FloatingLabelInput from "#/components/floatingLabelInput"; import FloatingLabelInput from "#/components/floatingLabelInput";
import { usePathname } from "next/navigation";
import Link from "next/link";
import Form from "#/components/form/form";
import { adminSchema } from "#/schema/loginSchema";
export default function Update() { export default function Update() {
const pathname = usePathname();
const segments = pathname.split("/");
const uid = segments[segments.length - 2];
const queryClient = useQueryClient()
const { data: session, status } = useSession(); const { data: session, status } = useSession();
const { data: company, isLoading } = useQuery({ const { data: companyInfos, refetch, isLoading } = useQuery({
enabled: status === 'authenticated', enabled: status === 'authenticated',
queryKey: ["stats", session?.user.access_token], queryKey: ["companyStats", session?.user.access_token],
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/users/${uid}`, {
headers: {
'Authorization': `Bearer ${session?.user.access_token}`
},
params: {
details: true
}
}
);
if (response.data) {
return response.data as CompanyById;
}
} catch (error: any) {
console.error(error);
}
}
});
const { mutate, isPending } = useMutation({
mutationFn: async (id: string) => {
try {
const response = await axios.delete(
`https://private-docs-api.intside.co/companies/${id}/`, {
headers: { headers: {
'Authorization': `Bearer ${session?.user.access_token}` 'Authorization': `Bearer ${session?.user.access_token}`
} }
} }
) )
if (response.data) { if (response.status === 200 || response.status === 201) {
return response.data.data as Company console.log('Suppresion réussie !')
} }
} catch (error: any) { } catch (error) {
console.error(error) console.error(error)
} }
} },
}) onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ["companies"] })
const { data: adminOrganization } = useQuery({ refetch()
enabled: status === 'authenticated',
queryKey: ["stats", session?.user.access_token],
queryFn: async () => {
try {
const response = await axios.get(
'https://private-docs-api.intside.co/users/me', {
headers: {
'Authorization': `Bearer ${session?.user.access_token}`
}
}
)
if (response.data) {
return response.data as Company
}
} catch (error: any) {
console.error(error)
}
} }
}) })
@ -62,28 +77,61 @@ export default function Update() {
<> <>
{/* { company.map() } */} {/* { 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="p-container ">
<div className="r-flex-column"> <div className="r-flex-column">
<div className="r-flex-between items-center bg-bluegray p-[24px] m-0 "> <div className="r-flex-between items-center bg-bluegray p-[24px] m-0 ">
<div className=""></div> <div className=""></div>
<h2 className="admin-name text-[20px]" >Pentatonic</h2> <h2 className="admin-name text-[20px]" >{companyInfos?.name || "Pentatonic"}</h2>
<button type="button" className="update-profile-name cta cancel"> <Link href={`http://localhost:3000/admin/organizations/${uid}/`} type="Link" className="cta cancel">
Annuler Annuler
</button> </Link>
</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="labels-container ">
<div className="label-container"> <div className="label-container">
<FloatingLabelInput label="Nom de l’organisation" name="org-name" type="text" placeholder="Intside" defaultValue="" /> <FloatingLabelInput label="Nom de l’organisation" name="org-name" type="text" placeholder="Intside" defaultValue={companyInfos?.name} />
</div> </div>
<div className="label-container"> <div className="label-container">
<FloatingLabelInput label="Adresse e-mail de l’admin" name="email" type="text" placeholder="contact@intside.com" defaultValue={company?.owner.email} /> <FloatingLabelInput label="Adresse e-mail de l’admin" name="email" type="text" placeholder="contact@intside.com" defaultValue={companyInfos?.owner.email} />
</div> </div>
<div className="label-container"> <div className="label-container">
<FloatingLabelInput label="Nom de l’admin" name="admin-name" type="text" placeholder="Company" defaultValue={company?.owner.last_name} /> <FloatingLabelInput label="Nom de l’admin" name="admin-name" type="text" placeholder="Company" defaultValue={companyInfos?.owner.last_name} />
</div> </div>
<div className="label-container"> <div className="label-container">
<FloatingLabelInput label="Prénom de l’admin" name="admin-surname" type="text" placeholder="Intside" defaultValue={company?.owner.last_name} /> <FloatingLabelInput label="Prénom de l’admin" name="admin-surname" type="text" placeholder="Intside" defaultValue={companyInfos?.owner.last_name} />
</div> </div>
</div> </div>
<div className="ctas flex gap-12 "> <div className="ctas flex gap-12 ">

22
src/assets/css/admin.css
View File

@ -72,15 +72,37 @@
background-color: var(--bluegray); background-color: var(--bluegray);
border-radius: 100px; border-radius: 100px;
} }
.labels-container { .labels-container {
min-width: 100%; min-width: 100%;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 24px; gap: 24px;
} }
.labels-container .label-container { .labels-container .label-container {
width: 40%; width: 40%;
} }
.labels-container .floating-label div.relative { .labels-container .floating-label div.relative {
width: 100%; width: 100%;
} }
.admin-infos {
gap: 12px;
}
.admin-card {
width: 284px;
}
@media (max-width: 1024px) {
.admin-infos {
/* justify-content: space-between; */
/* gap: 30px; */
}
.admin-card {
/* max-width: 100%; */
}
}

3
src/assets/css/ruben-ui.css
View File

@ -119,6 +119,9 @@
.r-gap-70{ .r-gap-70{
gap: 70px; gap: 70px;
} }
.r-r-gap-12{
row-gap: 12px;
}
/* Small (SM) */ /* Small (SM) */
@media (min-width: 640px) { @media (min-width: 640px) {
/* Styles for small devices and up */ /* Styles for small devices and up */

8
src/schema/loginSchema.ts
View File

@ -4,3 +4,11 @@ export const loginSchema = z.object({
email: z.string().email("Email invalide"), email: z.string().email("Email invalide"),
password: z.string().min(8, "Le mot de passe doit contenir au moins 8 caractères") 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"),
organization: z.string().optional(),
});

7
src/types/index.ts
View File

@ -56,6 +56,9 @@ export interface CompanyById {
name: string name: string
is_premium: boolean is_premium: boolean
status: string status: string
owner: string owner: Owner
description: string total_users: number
total_documents: number
total_documents_sizes: number
last_use: any
} }