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 (
<div className="r-p-m-0">
<div className="home home-table r-p-m-0">
<Statistics />
<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 }) => {
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">
return (
<div className="r-flex align-items-center r-gap-16">
<div className="circled-badge">
{initials}
</div>
<p>{value}</p>
<p className="r-p-m-0" >{value}</p>
</div>
)
}
@ -191,22 +191,21 @@ export default function Organizations() {
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]" :
""
className={`custom-badge r-p-m-0 r-flex-center rounded-5
${status === "active" ? "badge-active" :
status === "inactive" ? "badge-inactive" :
status === "pending" ? "badge-pending" :
status === "blocked" ? "badge-blocked" :
""
}
`}
>
{
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>
)
@ -216,64 +215,64 @@ export default function Organizations() {
id: "delete",
cell: ({ row }) => {
const company = row.original;
return (
<div className="flex justify-end p-2 space-x-2"
// onClick={() => { mutate(id) }}
>
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);
}
{/* 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);
}}
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={() => {
setSelectedAdminId(company.id);
setOpenDeleteModal(true);
setOpenDeleteModal(false);
}}
>
<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>
)
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);
return (
<div className="grid grid-cols-1 lg:grid-cols-2 w-full space-y-3">
<div className="flex items-center space-x-3">
<div className="r-flex flex-wrap flex-lg-nowrap justify-content-between r-gap-16 w-100">
<div className="r-flex align-items-center items-center space-x-3 r-gap-16">
<input
type="checkbox"
checked={
@ -306,10 +305,10 @@ export default function Organizations() {
<DropdownMenu.Root>
<DropdownMenu.Trigger asChild>
<p className="cta cancel flex gap-2">
<button className="cta cancel flex gap-2">
Sélectionner une action
<Image src={icons.arrowDown} alt="arrow down" />
</p>
</button >
</DropdownMenu.Trigger>
<DropdownMenu.Portal>
@ -328,7 +327,7 @@ export default function Organizations() {
</DropdownMenu.Root>
</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
title="Ajouter une organisation"
@ -386,13 +385,13 @@ export default function Organizations() {
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>
}
/>

17
src/app/globals.css
View File

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

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

@ -181,11 +181,11 @@ th{
padding: 8px;
height: 40px!important;
}
th.bg-bluegray:first-of-type{
th:first-of-type{
border-top-left-radius: 8px!important;
}
th.bg-bluegray:last-of-type{
th:last-of-type{
border-top-right-radius: 8px!important;
}
@ -196,7 +196,7 @@ tbody tr {
border-bottom: 1px solid var(--bluegray)!important;
}
tbody tr:hover{
background-color: var(--cinder);
background-color: var(--bluegray);
}
tbody tr td:first-child {
padding-left: 16px;
@ -249,6 +249,25 @@ a.disabled{
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) {
.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`}>
{/* <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"/>
<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>
</div>
</>

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

@ -8,7 +8,7 @@ export default function Theme() {
useEffect(() => {
if (typeof window !== "undefined") {
const savedTheme = localStorage.getItem("theme") ||
const savedTheme = localStorage.getItem("privateDocsTheme") ||
(window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
setTheme(savedTheme);
@ -19,7 +19,7 @@ export default function Theme() {
const handleTheme = () => {
const newTheme = theme === "light" ? "dark" : "light";
setTheme(newTheme);
localStorage.setItem("theme", newTheme);
localStorage.setItem("privateDocsTheme", newTheme);
document.body.setAttribute("data-theme", newTheme);
};
@ -30,7 +30,7 @@ export default function Theme() {
const handleChange = (e: MediaQueryListEvent) => {
const newTheme = e.matches ? "dark" : "light";
setTheme(newTheme);
localStorage.setItem("theme", newTheme);
localStorage.setItem("privateDocsTheme", 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>
))}
</select>
{button && <div className="btn-floating-right">{button}</div>}
{button && <div className="btn-floating-right select">{button}</div>}
</div>
);
@ -91,7 +91,7 @@ export default function FloatingLabelInput({
<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"
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}
defaultValue={defaultValue}
onChange={handleChange}

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

@ -102,7 +102,7 @@ export default function Table<TData, TValue>({
<div className="w-full">
{render()}
<div className="home-table rounded-top">
<div className="rounded-top">
<div className="overflow-x-auto">
<table className="w-100 overflow-x-auto rounded-1c ">
<thead className="table-head bg-bluegray">
@ -170,7 +170,7 @@ export default function Table<TData, TValue>({
</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
className="hover:bg-gray-300 cursor-pointer px-3 py-1 rounded w-9 h-9"
onClick={() => table.previousPage()}
@ -197,7 +197,7 @@ export default function Table<TData, TValue>({
</div>
<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()}
disabled={!table.getCanNextPage()}
>