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

style: organizations and stuffs

Browse Source
This commit is contained in:
Ruben 2025-04-04 18:15:58 +01:00
parent b926019ab6
commit ee31eb5511
8 changed files with 125 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -192,7 +192,7 @@ export default function HomePage() {
] ]
return ( return (
<div className="r-p-m-0"> <div className="home home-table r-p-m-0">
<Statistics /> <Statistics />
<h3 className="fw-bold fs-5 pt-5 pb-4">Dernières organisations actives</h3> <h3 className="fw-bold fs-5 pt-5 pb-4">Dernières organisations actives</h3>

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

@ -170,12 +170,12 @@ export default function Organizations() {
cell: ({ row }) => { cell: ({ row }) => {
const value = String(row.original.owner.first_name) + " " + String(row.original.owner.last_name) 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]) const initials = String(row.original.owner.first_name[0]) + String(row.original.owner.last_name[0])
return( return (
<div className="flex space-x-2 items-center"> <div className="r-flex align-items-center r-gap-16">
<div className="flex items-center justify-center bg-[#DCDCFE] text-[#246BFD] w-10 h-10 rounded-full"> <div className="circled-badge">
{initials} {initials}
</div> </div>
<p>{value}</p> <p className="r-p-m-0" >{value}</p>
</div> </div>
) )
} }
@ -191,22 +191,21 @@ export default function Organizations() {
const status = String(cell.getValue()) const status = String(cell.getValue())
return ( return (
<p <p
className={`rounded-full px-2 py-1 font-medium text-sm w-20 h-6 text-center className={`custom-badge r-p-m-0 r-flex-center rounded-5
${ ${status === "active" ? "badge-active" :
status === "active" ? "font-medium w-[80px] h-[24px] bg-[#ECF9E8] text-[#49C91E]" : status === "inactive" ? "badge-inactive" :
status === "inactive" ? "font-medium w-[80px] h-[24px] bg-[#E7EBF3] text-[#9FA8BC]" : status === "pending" ? "badge-pending" :
status === "pending" ? "font-medium w-[80px] h-[24px] bg-[#EAF7FC] text-[#30B2EA]" : status === "blocked" ? "badge-blocked" :
status === "blocked" ? "font-medium w-[80px] h-[24px] bg-[#FDEBE8] text-[#F33F19]" : ""
""
} }
`} `}
> >
{ {
status === "active" ? "Actif" : status === "active" ? "Actif" :
status === "inactive" ? "Inactif" : status === "inactive" ? "Inactif" :
status === "pending" ? "En attente" : status === "pending" ? "En attente" :
status === "blocked" ? "Bloquée" : status === "blocked" ? "Bloquée" :
"" ""
} }
</p> </p>
) )
@ -216,64 +215,64 @@ export default function Organizations() {
id: "delete", id: "delete",
cell: ({ row }) => { cell: ({ row }) => {
const company = row.original; const company = row.original;
return ( return (
<div className="flex justify-end p-2 space-x-2" <div className="flex justify-end p-2 space-x-2"
// onClick={() => { mutate(id) }} // onClick={() => { mutate(id) }}
> >
{/* Modal de suppression */} {/* Modal de suppression */}
<Modal <Modal
open={openDeleteModal && selectedAdminId === company.id} open={openDeleteModal && selectedAdminId === company.id}
onOpenChange={(isOpen) => { onOpenChange={(isOpen) => {
if (!isOpen) { if (!isOpen) {
setSelectedAdminId(null); setSelectedAdminId(null);
setOpenDeleteModal(false); setOpenDeleteModal(false);
} }
}}
trigger={
<div
onClick={() => {
setSelectedAdminId(company.id);
setOpenDeleteModal(true);
}} }}
trigger={ >
<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={() => { onClick={() => {
setSelectedAdminId(company.id); setOpenDeleteModal(false);
setOpenDeleteModal(true);
}} }}
> >
<Image Annuler
alt="Supprimer" </button>
src={icons.trash} <button
className="cursor-pointer responsive-icon" className="cta modal-cta danger"
/> onClick={() => {
</div> deleteMutation.mutate(company.id);
} }}
title="Supprimer une organisation" >
content={ Supprimer
<div> </button>
<p className="text-center"> </div>
Voulez-vous vraiment supprimer l'organisation <span className="font-bold">{row.original.name}</span> ? </div>
</p> }
/>
<div className="flex justify-between w-full pt-6 r-gap-24"> </div>
<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>
)
} }
} }
] ]
@ -291,8 +290,8 @@ export default function Organizations() {
.map((row) => row.original.id); .map((row) => row.original.id);
return ( return (
<div className="grid grid-cols-1 lg:grid-cols-2 w-full space-y-3"> <div className="r-flex flex-wrap flex-lg-nowrap justify-content-between r-gap-16 w-100">
<div className="flex items-center space-x-3"> <div className="r-flex align-items-center items-center space-x-3 r-gap-16">
<input <input
type="checkbox" type="checkbox"
checked={ checked={
@ -306,10 +305,10 @@ export default function Organizations() {
<DropdownMenu.Root> <DropdownMenu.Root>
<DropdownMenu.Trigger asChild> <DropdownMenu.Trigger asChild>
<p className="cta cancel flex gap-2"> <button className="cta cancel flex gap-2">
Sélectionner une action Sélectionner une action
<Image src={icons.arrowDown} alt="arrow down" /> <Image src={icons.arrowDown} alt="arrow down" />
</p> </button >
</DropdownMenu.Trigger> </DropdownMenu.Trigger>
<DropdownMenu.Portal> <DropdownMenu.Portal>
@ -328,7 +327,7 @@ export default function Organizations() {
</DropdownMenu.Root> </DropdownMenu.Root>
</div> </div>
<div className="flex justify-between lg:justify-end space-x-3"> <div className="r-flex-between w-100 justify-content-lg-end r-gap-24">
{/* Modal d'ajout */} {/* Modal d'ajout */}
<Modal <Modal
title="Ajouter une organisation" title="Ajouter une organisation"
@ -386,13 +385,13 @@ export default function Organizations() {
schema={companySchema} schema={companySchema}
child={ child={
<div className="flex justify-center"> <div className="flex justify-center">
<button <button
type="submit" type="submit"
disabled={createMutation.isPending} disabled={createMutation.isPending}
className={`${createMutation.isPending ? "btn-auth-loading" : "btn-auth"} cta modal-cta mt-4 cursor-pointer`} className={`${createMutation.isPending ? "btn-auth-loading" : "btn-auth"} cta modal-cta mt-4 cursor-pointer`}
> >
{createMutation.isPending ? "En cours..." : "Ajouter une organisation"} {createMutation.isPending ? "En cours..." : "Ajouter une organisation"}
</button> </button>
</div> </div>
} }
/> />

17
src/app/globals.css
View File

@ -20,8 +20,9 @@
[ data-theme="dark"] { [ data-theme="dark"] {
--background: #11111a; --background: #11111a;
--foreground: #eeeeff; --foreground: #eeeeff;
--cinder: #999; /* --secondary: #000; */
--bluegray: #eeeeff; --cinder: #444;
--bluegray: #246BFD55;
} }
/* @media (prefers-color-scheme: dark) { /* @media (prefers-color-scheme: dark) {
@ -53,7 +54,8 @@ a{
padding: 12px; padding: 12px;
border: 1px solid #d1d5dc; border: 1px solid #d1d5dc;
border-radius: 9999px; border-radius: 9999px;
color: black; color: var(--foreground);
background-color: var(--background);
&:focus { &:focus {
outline-color: none; outline-color: none;
@ -84,6 +86,12 @@ a{
transform: translateY(-50%); transform: translateY(-50%);
} }
.btn-floating-right.select{
position: relative!important;
right: 0px!important;
}
.btn-floating-left { .btn-floating-left {
position: absolute; position: absolute;
left: 8px; left: 8px;
@ -221,7 +229,8 @@ input[type="checkbox"]:checked::before {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-color: var(--bluegray); color: #04060F;
background-color: #E9F0FF;
z-index: 99; z-index: 99;
} }
.splash-screen p{ .splash-screen p{

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

@ -181,11 +181,11 @@ th{
padding: 8px; padding: 8px;
height: 40px!important; height: 40px!important;
} }
th.bg-bluegray:first-of-type{ th:first-of-type{
border-top-left-radius: 8px!important; border-top-left-radius: 8px!important;
} }
th.bg-bluegray:last-of-type{ th:last-of-type{
border-top-right-radius: 8px!important; border-top-right-radius: 8px!important;
} }
@ -196,7 +196,7 @@ tbody tr {
border-bottom: 1px solid var(--bluegray)!important; border-bottom: 1px solid var(--bluegray)!important;
} }
tbody tr:hover{ tbody tr:hover{
background-color: var(--cinder); background-color: var(--bluegray);
} }
tbody tr td:first-child { tbody tr td:first-child {
padding-left: 16px; padding-left: 16px;
@ -249,6 +249,25 @@ a.disabled{
opacity: 40%; opacity: 40%;
} }
.home .pagination {
display: none!important;
}
.search-input{
padding: 10px 40px;
width: max-content;
width: 300px;
min-width: max-content;
border: 1px solid var(--secondary);
border-radius: 100px;
}
@media (max-width: 1070px) { @media (max-width: 1070px) {
.stats-container{ .stats-container{

2
src/components/admin/sidebar.tsx
View File

@ -39,7 +39,7 @@ export default function Sidebar() {
<div onClick={() => handleMobileVisible()} className={`${mobileVisible ? "shifted" : ""} hamburger mobile`}> <div onClick={() => handleMobileVisible()} className={`${mobileVisible ? "shifted" : ""} hamburger mobile`}>
{/* <Image src={icons.logo} alt="Logo" className="scale-95" /> */} {/* <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"> <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"/> <path fillRule="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> </svg>
</div> </div>
</> </>

6
src/components/admin/theme.tsx
View File

@ -8,7 +8,7 @@ export default function Theme() {
useEffect(() => { useEffect(() => {
if (typeof window !== "undefined") { if (typeof window !== "undefined") {
const savedTheme = localStorage.getItem("theme") || const savedTheme = localStorage.getItem("privateDocsTheme") ||
(window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"); (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
setTheme(savedTheme); setTheme(savedTheme);
@ -19,7 +19,7 @@ export default function Theme() {
const handleTheme = () => { const handleTheme = () => {
const newTheme = theme === "light" ? "dark" : "light"; const newTheme = theme === "light" ? "dark" : "light";
setTheme(newTheme); setTheme(newTheme);
localStorage.setItem("theme", newTheme); localStorage.setItem("privateDocsTheme", newTheme);
document.body.setAttribute("data-theme", newTheme); document.body.setAttribute("data-theme", newTheme);
}; };
@ -30,7 +30,7 @@ export default function Theme() {
const handleChange = (e: MediaQueryListEvent) => { const handleChange = (e: MediaQueryListEvent) => {
const newTheme = e.matches ? "dark" : "light"; const newTheme = e.matches ? "dark" : "light";
setTheme(newTheme); setTheme(newTheme);
localStorage.setItem("theme", newTheme); localStorage.setItem("privateDocsTheme", newTheme);
document.body.setAttribute("data-theme", newTheme); document.body.setAttribute("data-theme", newTheme);
}; };

4
src/components/floatingLabelInput.tsx
View File

@ -40,7 +40,7 @@ export default function FloatingLabelInput({
<option key={index} value={option.value}>{option.label}</option> <option key={index} value={option.value}>{option.label}</option>
))} ))}
</select> </select>
{button && <div className="btn-floating-right">{button}</div>} {button && <div className="btn-floating-right select">{button}</div>}
</div> </div>
); );
@ -91,7 +91,7 @@ export default function FloatingLabelInput({
<input <input
type="text" type="text"
placeholder={placeholder} 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" className="search-input focus:ring-2 focus:ring-blue-500 outline-none px-10 py-2 w-full ctext-black border border-[#d1d5dc] rounded-full"
name={name} name={name}
defaultValue={defaultValue} defaultValue={defaultValue}
onChange={handleChange} onChange={handleChange}

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

@ -102,7 +102,7 @@ export default function Table<TData, TValue>({
<div className="w-full"> <div className="w-full">
{render()} {render()}
<div className="home-table rounded-top"> <div className="rounded-top">
<div className="overflow-x-auto"> <div className="overflow-x-auto">
<table className="w-100 overflow-x-auto rounded-1c "> <table className="w-100 overflow-x-auto rounded-1c ">
<thead className="table-head bg-bluegray"> <thead className="table-head bg-bluegray">
@ -170,7 +170,7 @@ export default function Table<TData, TValue>({
</div> </div>
</div> </div>
<div className="r-flex-center justify-content-end r-gap-2 py-4"> <div className="pagination r-flex-center justify-content-end r-gap-2 py-4">
<button <button
className="hover:bg-gray-300 cursor-pointer px-3 py-1 rounded w-9 h-9" className="hover:bg-gray-300 cursor-pointer px-3 py-1 rounded w-9 h-9"
onClick={() => table.previousPage()} onClick={() => table.previousPage()}
@ -197,7 +197,7 @@ export default function Table<TData, TValue>({
</div> </div>
<button <button
className="w-9 h-9 hover:bg-gray-300 cursor-pointer hover:text-black px-3 py-1 rounded" className="w-9 h-9 px-3 py-1 rounded"
onClick={() => table.nextPage()} onClick={() => table.nextPage()}
disabled={!table.getCanNextPage()} disabled={!table.getCanNextPage()}
> >