Compare commits
12 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 8c1fa79126 | |||
| e8896df0b3 | |||
| 84d7b7e847 | |||
| a0a77648ca | |||
| 6cb35e82fe | |||
| b43cf6f036 | |||
| b573d20aab | |||
| b3d7e312c4 | |||
| 063f3ecc75 | |||
| 3db249f3e1 | |||
| fcc04895f3 | |||
| d037af11b6 |
@@ -1,7 +1,33 @@
|
||||
import { Card, CardContent, CardHeader } from '@/components/ui/Card';
|
||||
import type { Company } from '@/types/Company';
|
||||
import type { User } from '@/types/user';
|
||||
import { Loader } from '@/components/ui/Loader';
|
||||
import { Building } from "lucide-react";
|
||||
|
||||
export function InformationWidget() {
|
||||
interface InformationWidgetProps {
|
||||
user: User;
|
||||
company: Company;
|
||||
isLoading: boolean;
|
||||
error: string;
|
||||
}
|
||||
|
||||
function setVipBadge(vip_level: string | undefined) {
|
||||
switch (vip_level?.toLowerCase()) {
|
||||
case "platinum":
|
||||
return <span className="px-2 py-1 bg-amber-600 text-white text-xs font-bold rounded shadow-sm mr-2 tracking-wider">{vip_level?.toUpperCase()}</span>;
|
||||
case "premium":
|
||||
return <span className="px-2 py-1 bg-violet-600 text-white text-xs font-bold rounded shadow-sm mr-2 tracking-wider">{vip_level?.toUpperCase()}</span>;
|
||||
default:
|
||||
return <span className="px-2 py-1 bg-blue-600 text-white text-xs font-bold rounded shadow-sm mr-2 tracking-wider">{vip_level?.toUpperCase()}</span>;
|
||||
}
|
||||
}
|
||||
|
||||
export const InformationWidget: React.FC<InformationWidgetProps> = ({
|
||||
user,
|
||||
company,
|
||||
isLoading,
|
||||
error,
|
||||
}) => {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="p-6 border-slate-100">
|
||||
@@ -12,23 +38,27 @@ export function InformationWidget() {
|
||||
</CardHeader>
|
||||
|
||||
<CardContent>
|
||||
{isLoading && !error && <Loader />}
|
||||
{!isLoading && !error && (
|
||||
<dl className="space-y-4 text-sm">
|
||||
<div>
|
||||
<dt className="text-slate-500 font-medium">Entité Légale</dt>
|
||||
<dd className="mt-1 font-semibold text-slate-900">Cabinet Juridique Example & Associés</dd>
|
||||
<dd className="mt-1 font-semibold text-slate-900">{company?.name}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt className="text-slate-500 font-medium">Administrateur du compte</dt>
|
||||
<dd className="mt-1 text-slate-900">Direction Générale (direction@example.com)</dd>
|
||||
<dd className="mt-1 text-slate-900">{user?.role} {user?.name}</dd>
|
||||
<dd className="mt-1 text-slate-500">Email : {user?.emailVisibility && user?.email}{!user?.emailVisibility && "caché"}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt className="text-slate-500 font-medium">Niveau d'Infogérance (SLA)</dt>
|
||||
<dd className="mt-1 flex items-center">
|
||||
<span className="px-2 py-1 bg-blue-900 text-white text-xs font-bold rounded shadow-sm mr-2 tracking-wider">VIP PLATINUM</span>
|
||||
{setVipBadge(company?.vip_level)}
|
||||
<span className="text-slate-700 font-medium">Couverture 24/7 (99.99%)</span>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,30 @@
|
||||
import { pb } from "@/services/pocketbase";
|
||||
import type { Company } from "@/types/Company";
|
||||
import type { User } from "@/types/user";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
export const useUserInformations = () => {
|
||||
const [user, setUser] = useState<User | null>(null);
|
||||
const [company, setCompany] = useState<Company | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchInformations = async () => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const userRecords = await pb.collection('aegis_users').getFullList<User>();
|
||||
setUser(userRecords[0]);
|
||||
const companyRecords = await pb.collection('aegis_companies').getFullList<Company>();
|
||||
setCompany(companyRecords[0])
|
||||
} catch (err) {
|
||||
setError("Erreur lors de la récupération des infos utilisateur :"+err);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
fetchInformations();
|
||||
}, []);
|
||||
|
||||
return { user, company, isLoading, error };
|
||||
};
|
||||
@@ -1,29 +1,29 @@
|
||||
import PageHeader from "@/components/ui/PageHeader";
|
||||
import AccessWidget from "@/components/widgets/AccessWidget";
|
||||
import InformationWidget from "@/components/widgets/InformationWidget";
|
||||
import { useUserInformations } from "@/hooks/useUserInformations";
|
||||
|
||||
export default function AccountSettings() {
|
||||
const { user, company, isLoading, error } = useUserInformations();
|
||||
return (
|
||||
<div className="font-sans relative min-h-[calc(100vh-4rem)]">
|
||||
|
||||
|
||||
{/* Contenu Principal */}
|
||||
<main className="max-w-7xl mx-auto px-8 sm:px-8 space-y-6 m-4">
|
||||
{/* Header */}
|
||||
<PageHeader
|
||||
title="Paramètres du compte"
|
||||
description="Gestion de la sécurité et informations contractuelles" />
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
|
||||
{/* Colonne 1 : Sécurité */}
|
||||
<AccessWidget />
|
||||
|
||||
{/* Colonne 2 : Organisation & Contrat */}
|
||||
<InformationWidget/>
|
||||
|
||||
<InformationWidget
|
||||
user={user}
|
||||
company={company}
|
||||
isLoading={isLoading}
|
||||
error={error}
|
||||
/>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,8 @@
|
||||
export interface Company {
|
||||
id: string;
|
||||
name: string;
|
||||
no: string;
|
||||
vip_level: string;
|
||||
created: string;
|
||||
updated: string
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
export interface User {
|
||||
id: string;
|
||||
email: string;
|
||||
emailVisibility: boolean;
|
||||
verified: boolean;
|
||||
name: string;
|
||||
role: string;
|
||||
company: string;
|
||||
mfa_enabled: boolean;
|
||||
created: string;
|
||||
updated: string
|
||||
}
|
||||
Reference in New Issue
Block a user