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

feat: integrating profile and update APIs

Browse Source
This commit is contained in:
Ruben 2025-03-27 23:17:08 +01:00
parent a4970ac2cd
commit 3e1cf17b2d
7 changed files with 169 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/app/admin/organizations/profile/page.tsx → src/app/admin/organizations/[id]/page.tsx
View File

@ -4,18 +4,27 @@ import Image from "next/image"
import axios from "axios";
import { useSession } from "next-auth/react";
import { useQuery } from "@tanstack/react-query";
import { adminProfile } from "#/types";
import { Company, CompanyById, Owner } from "#/types";
import Link from "next/link";
import { usePathname } from "next/navigation";
export default function Profile() {
const pathname = usePathname();
const segments = pathname.split("/");
const uid = segments[segments.length - 1];
const { data: session, status } = useSession();
const { data: adminProfile, isLoading } = useQuery({
const { data: companyInfos, isLoading } = useQuery({
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', {
`https://private-docs-api.intside.co/companies/${uid}`, {
headers: {
'Authorization': `Bearer ${session?.user.access_token}`
}
@ -23,21 +32,23 @@ export default function Profile() {
)
if (response.data) {
return response.data as adminProfile
return response.data as CompanyById
}
} catch (error: any) {
console.error(error)
}
}
})
const adminId = companyInfos?.owner
const { data: adminOrganization } = useQuery({
const { data: adminInfos } = useQuery({
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', {
`https://private-docs-api.intside.co/users/${companyInfos}`, {
headers: {
'Authorization': `Bearer ${session?.user.access_token}`
}
@ -45,24 +56,24 @@ export default function Profile() {
)
if (response.data) {
return response.data as adminProfile
return response.data.data as Owner
}
} catch (error: any) {
console.error(error)
}
}
})
console.log(`https://private-docs-api.intside.co/users/${companyInfos}`);
return (
<>
{/* { adminProfile.map() } */}
{/* {companyInfos[0]?.id} */}
<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]" >Pentatonic</h2>
<h2 className="admin-name text-[20px]" >{companyInfos?.name || "Pentatonic"}</h2>
<button type="button" className="update-profile-name cta">
Modifier
</button>
@ -76,7 +87,7 @@ export default function Profile() {
</div>
<div className="r-flex-column p-[14px] r-gap-2">
<h4 className="email-label font-semibold">Adresse e-mail</h4>
<p className="email">{adminProfile?.email}</p>
<p className="email">{adminInfos?.email || "email"}</p>
</div>
</div>
<div className="r-flex-between items-center rr-gap-12 w-max">
@ -86,11 +97,11 @@ export default function Profile() {
<div className="r-flex gap-[60px]">
<div className="r-flex-column p-[14px] r-gap-2">
<h4 className="surname-label font-semibold">Prénom</h4>
<p className="surname">{adminProfile?.first_name}</p>
<p className="surname">{adminInfos?.first_name || "nom"}</p>
</div>
<div className="r-flex-column p-[14px] r-gap-2">
<h4 className="name-label font-semibold">Nom</h4>
<p className="name">{adminProfile?.last_name}</p>
<p className="name">{adminInfos?.last_name || "nom"}</p>
</div>
</div>
</div>

99
src/app/admin/organizations/[id]/update/page.tsx Normal file
View File

@ -0,0 +1,99 @@
"use client"
import { icons } from "#/assets/icons"
import Image from "next/image"
import axios from "axios";
import { useSession } from "next-auth/react";
import { useQuery } from "@tanstack/react-query";
import { Company } from "#/types";
import FloatingLabelInput from "#/components/floatingLabelInput";
export default function Update() {
const { data: session, status } = useSession();
const { data: company, isLoading } = useQuery({
enabled: status === 'authenticated',
queryKey: ["stats", session?.user.access_token],
queryFn: async () => {
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
}
} catch (error: any) {
console.error(error)
}
}
})
const { data: adminOrganization } = useQuery({
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)
}
}
})
return (
<>
{/* { company.map() } */}
<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]" >Pentatonic</h2>
<button type="button" className="update-profile-name cta cancel">
Annuler
</button>
</div>
<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="" />
</div>
<div className="label-container">
<FloatingLabelInput label="Adresse e-mail de l’admin" name="email" type="text" placeholder="contact@intside.com" defaultValue={company?.owner.email} />
</div>
<div className="label-container">
<FloatingLabelInput label="Nom de l’admin" name="admin-name" type="text" placeholder="Company" defaultValue={company?.owner.last_name} />
</div>
<div className="label-container">
<FloatingLabelInput label="Prénom de l’admin" name="admin-surname" type="text" placeholder="Intside" defaultValue={company?.owner.last_name} />
</div>
</div>
<div className="ctas flex gap-12 ">
<button type="button" className="cta">Modifier</button>
<button type="button" className="cta info">Mot de passe</button>
<button type="button" className="cta danger">Bloquer</button>
</div>
</div>
</div>
</div>
</>
)
}

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

@ -4,7 +4,7 @@ import Link from "next/link";
export default function Organizations (){
return (
<>
<Link href="/admin/organizations/profile">Organization Profile</Link>
<Link href="/admin/organizations/971ff270-6253-4424-b100-21b9ebf0ec7f">Organization Profile</Link>
</>
)
}

18
src/app/globals.css
View File

@ -83,7 +83,25 @@ body {
background-color: var(--primary);
font-size: 14px;
font-weight: 600;
border: 1px solid var(--primary);
border-radius: 100px;
cursor: pointer;
}
.cta.cancel{
color: var(--secondary);
border: 1px solid var(--gray);
background-color: var(--gray);
}
.cta.info{
color: var(--primary);
background-color: var(--background);
}
.cta.danger{
border: 1px solid var(--danger);
background-color: var(--danger);
}

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

@ -1,3 +1,5 @@
/* Sidebar */
.sidebar{
border-right: 1px solid var(--cinder);
position: fixed;
@ -28,6 +30,7 @@
margin-bottom: -11px;
}
/* Border */
.icon-border{
border: 1px solid var(--cinder);
padding: 8px;
@ -51,9 +54,12 @@
gap: 10px;
}
/* Main */
.p-container {
height: 100vh;
border: 1px solid var(--gray);
overflow: hidden;
}
.icon-rounded{
@ -65,4 +71,16 @@
align-items: center;
background-color: var(--bluegray);
border-radius: 100px;
}
.labels-container{
min-width: 100%;
display: flex;
flex-wrap: wrap;
gap: 24px;
}
.labels-container .label-container{
width: 40%;
}
.labels-container .floating-label div.relative{
width: 100%;
}

2
src/components/floatingLabelInput.tsx
View File

@ -79,7 +79,7 @@ export default function FloatingLabelInput({
<input
type={type}
placeholder={placeholder}
className="input-form focus:ring-2 focus:ring-blue-500"
className="floating-label input-form focus:ring-2 focus:ring-blue-500"
required
name={name}
defaultValue={defaultValue}

13
src/types/index.ts
View File

@ -51,10 +51,11 @@ export interface Owner {
last_name: string
}
export interface adminProfile {
export interface CompanyById {
id: string
email: string
first_name: string
last_name: string
profile: string
}
name: string
is_premium: boolean
status: string
owner: string
description: string
}