zen/core
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

refactor(admin): simplify AdminHeader component by removing inline logic

Browse Source
This commit is contained in:
Hyko
2026-04-22 15:36:48 -04:00
parent e70499fa36
commit fe4ca228cc
10 changed files with 241 additions and 243 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/admin/pages/DashboardPage.client.js
+2 -4
View File
@@ -1,6 +1,7 @@
'use client';
import { getWidgets } from '../registry.js';
import AdminHeader from '../components/AdminHeader.js';
export default function DashboardPage({ stats }) {
const loading = stats === null || stats === undefined;
@@ -8,10 +9,7 @@ export default function DashboardPage({ stats }) {
return (
<div className="flex flex-col gap-4 sm:gap-6 lg:gap-8">
<div>
<h1 className="text-lg sm:text-xl font-semibold text-neutral-900 dark:text-white">Tableau de bord</h1>
<p className="mt-1 text-[13px] text-neutral-500 dark:text-neutral-400">Vue d'ensemble de votre application</p>
</div>
<AdminHeader title="Tableau de bord" description="Vue d'ensemble de votre application" />
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-4 sm:gap-6">
{widgets.map(({ id, Component }) => (
<Component key={id} data={loading ? null : (stats[id] ?? null)} loading={loading} />
src/features/admin/pages/ProfilePage.client.js
+2 -11
View File
@@ -3,6 +3,7 @@
import React, { useState, useEffect, useRef } from 'react';
import { Card, Input, Button } from '@zen/core/shared/components';
import { useToast } from '@zen/core/toast';
import AdminHeader from '../components/AdminHeader.js';
const ProfilePage = ({ user: initialUser }) => {
const toast = useToast();
@@ -181,17 +182,7 @@ const ProfilePage = ({ user: initialUser }) => {
return (
<div className="flex flex-col gap-4 sm:gap-6 lg:gap-8">
{/* Header */}
<div className="flex items-center justify-between">
<div>
<h1 className="text-lg sm:text-xl font-semibold text-neutral-900 dark:text-white">
Mon profil
</h1>
<p className="mt-1 text-[13px] text-neutral-500 dark:text-neutral-400">
Gérez les informations de votre compte
</p>
</div>
</div>
<AdminHeader title="Mon profil" description="Gérez les informations de votre compte" />
{/* Content */}
<div className="flex flex-col gap-6">
src/features/admin/pages/RoleEditPage.client.js
+6 -11
View File
@@ -5,6 +5,7 @@ import { useRouter } from 'next/navigation';
import { Card, Button, Input, Textarea, Switch } from '@zen/core/shared/components';
import { useToast } from '@zen/core/toast';
import { getPermissionGroups } from '@zen/core/users/constants';
import AdminHeader from '../components/AdminHeader.js';
const PERMISSION_GROUPS = getPermissionGroups();
@@ -115,17 +116,11 @@ const RoleEditPage = ({ roleId }) => {
return (
<div className="flex flex-col gap-4 sm:gap-6 lg:gap-8">
<div className="flex items-center gap-3">
<Button variant="secondary" size="sm" onClick={() => router.push('/admin/roles')}>
← Retour
</Button>
<div>
<h1 className="text-lg sm:text-xl font-semibold text-neutral-900 dark:text-white">{title}</h1>
{isSystem && (
<p className="mt-1 text-[13px] text-neutral-500 dark:text-neutral-400">Rôle système — le nom ne peut pas être modifié</p>
)}
</div>
</div>
<AdminHeader
title={title}
description={isSystem ? 'Rôle système — le nom ne peut pas être modifié' : undefined}
backHref="/admin/roles"
/>
<form onSubmit={handleSubmit} className="flex flex-col gap-6">
<Card variant="default" padding="md">
src/features/admin/pages/RolesPage.client.js
+10 -15
View File
@@ -5,6 +5,7 @@ import { useRouter } from 'next/navigation';
import { Card, Table, Button, Badge } from '@zen/core/shared/components';
import { PencilEdit01Icon, Cancel01Icon } from '@zen/core/shared/icons';
import { useToast } from '@zen/core/toast';
import AdminHeader from '../components/AdminHeader.js';
const RolesPageClient = () => {
const router = useRouter();
@@ -146,21 +147,15 @@ const RolesPage = () => {
return (
<div className="flex flex-col gap-4 sm:gap-6 lg:gap-8">
<div className="flex items-center justify-between">
<div>
<h1 className="text-lg sm:text-xl font-semibold text-neutral-900 dark:text-white">Rôles</h1>
<p className="mt-1 text-[13px] text-neutral-500 dark:text-neutral-400">
Gérez les rôles et leurs permissions
</p>
</div>
<Button
variant="primary"
size="sm"
onClick={() => router.push('/admin/roles/new')}
>
Nouveau rôle
</Button>
</div>
<AdminHeader
title="Rôles"
description="Gérez les rôles et leurs permissions"
action={
<Button variant="primary" size="sm" onClick={() => router.push('/admin/roles/new')}>
Nouveau rôle
</Button>
}
/>
<RolesPageClient />
</div>
);
src/features/admin/pages/UserEditPage.client.js
+13 -18
View File
@@ -4,6 +4,7 @@ import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { Button, Card, Input, Select, Loading, TagInput } from '@zen/core/shared/components';
import { useToast } from '@zen/core/toast';
import AdminHeader from '../components/AdminHeader.js';
const UserEditPage = ({ userId }) => {
const router = useRouter();
@@ -158,15 +159,12 @@ const UserEditPage = ({ userId }) => {
if (!userData) {
return (
<div className="flex flex-col gap-4 sm:gap-6 lg:gap-8">
<div className="flex items-center justify-between">
<div>
<h1 className="text-lg sm:text-xl font-semibold text-neutral-900 dark:text-white">Modifier l'utilisateur</h1>
<p className="mt-1 text-xs text-neutral-400">Utilisateur introuvable</p>
</div>
<Button variant="secondary" size="sm" onClick={() => router.push('/admin/users')}>
← Retour aux utilisateurs
</Button>
</div>
<AdminHeader
title="Modifier l'utilisateur"
description="Utilisateur introuvable"
backHref="/admin/users"
backLabel="← Retour aux utilisateurs"
/>
<Card>
<div className="bg-red-500/10 border border-red-500/20 text-red-400 px-4 py-3 rounded-lg">
<p className="font-medium">Utilisateur introuvable</p>
@@ -179,15 +177,12 @@ const UserEditPage = ({ userId }) => {
return (
<div className="flex flex-col gap-4 sm:gap-6 lg:gap-8">
<div className="flex items-center justify-between">
<div>
<h1 className="text-lg sm:text-xl font-semibold text-neutral-900 dark:text-white">Modifier l'utilisateur</h1>
<p className="mt-1 text-[13px] text-neutral-500 dark:text-neutral-400">{userData.email}</p>
</div>
<Button variant="secondary" size="sm" onClick={() => router.push('/admin/users')}>
← Retour aux utilisateurs
</Button>
</div>
<AdminHeader
title="Modifier l'utilisateur"
description={userData.email}
backHref="/admin/users"
backLabel="← Retour aux utilisateurs"
/>
<form onSubmit={handleSubmit} className="flex flex-col gap-6">
<Card variant="default" padding="md">
src/features/admin/pages/UsersPage.client.js
+2 -8
View File
@@ -5,6 +5,7 @@ import { useRouter } from 'next/navigation';
import { Card, Table, Badge, StatusBadge, Button, UserAvatar } from '@zen/core/shared/components';
import { PencilEdit01Icon } from '@zen/core/shared/icons';
import { useToast } from '@zen/core/toast';
import AdminHeader from '../components/AdminHeader.js';
const UsersPageClient = () => {
const router = useRouter();
@@ -211,14 +212,7 @@ const UsersPageClient = () => {
const UsersPage = () => {
return (
<div className="flex flex-col gap-4 sm:gap-6 lg:gap-8">
<div className="flex items-center justify-between">
<div>
<h1 className="text-lg sm:text-xl font-semibold text-neutral-900 dark:text-white">Utilisateurs</h1>
<p className="mt-1 text-[13px] text-neutral-500 dark:text-neutral-400">
Gérez les comptes utilisateurs
</p>
</div>
</div>
<AdminHeader title="Utilisateurs" description="Gérez les comptes utilisateurs" />
<UsersPageClient />
</div>
);