Admin Panel Library

Libreria React TypeScript per pannelli di amministrazione con componenti riutilizzabili, layout professionale e integrazione completa con Material-UI.

🚀 Caratteristiche

• Layout Professionale: Sidebar responsiva, topbar con user info, area contenuto dinamica
• Pagine Predefinite: Utenti, Gruppi e Ruoli già implementati
• Routing Dinamico: Sistema di navigazione configurabile
• Espandibilità: Aggiungi facilmente pagine personalizzate
• Material-UI: Design system moderno e accessibile
• TypeScript: Tipizzazione completa per una migliore developer experience
• Responsive: Ottimizzato per desktop, tablet e mobile

📦 Installazione

npm install admin-panel-lib
# oppure
pnpm add admin-panel-lib
# oppure
yarn add admin-panel-lib

Dipendenze peer

Assicurati di avere installato anche le dipendenze peer:

npm install react react-dom @mui/material @emotion/react @emotion/styled @mui/icons-material

🎯 Utilizzo Base

import React from "react";
import { AdminApp } from "admin-panel-lib";

function App() {
  return (
    <AdminApp
      appTitle="Il Mio Admin Panel"
      userInfo={{
        name: "Mario Rossi",
        email: "[email protected]",
      }}
    />
  );
}

export default App;

🔧 Configurazione Avanzata

Aggiungere Pagine Personalizzate

import React from "react";
import { AdminApp, RouteConfig, DashboardIcon } from "admin-panel-lib";
import { Box, Typography } from "@mui/material";

// Componente personalizzato
const MiaDashboard: React.FC = () => {
  return (
    <Box>
      <Typography variant="h4">La Mia Dashboard</Typography>
      <Typography>Contenuto personalizzato qui...</Typography>
    </Box>
  );
};

// Configurazione route personalizzate
const customRoutes: RouteConfig[] = [
  {
    path: "/dashboard",
    label: "Dashboard",
    icon: <DashboardIcon />,
    component: MiaDashboard,
  },
];

function App() {
  return (
    <AdminApp
      appTitle="Admin Panel Personalizzato"
      customRoutes={customRoutes}
      userInfo={{
        name: "Mario Rossi",
        email: "[email protected]",
        avatar: "https://example.com/avatar.jpg",
      }}
    />
  );
}

Personalizzazione con Logo

import { AdminApp } from "admin-panel-lib";
import { Avatar } from "@mui/material";

function App() {
  return (
    <AdminApp
      appTitle="La Mia Azienda"
      logo={<Avatar src="/logo.png" />}
      userInfo={{
        name: "Mario Rossi",
        email: "[email protected]",
      }}
    />
  );
}

📋 API Reference

AdminApp Props

| Prop | Tipo | Default | Descrizione | | -------------- | --------------- | ------------- | --------------------------------------------- | | appTitle | string | Richiesto | Titolo dell'applicazione | | customRoutes | RouteConfig[] | [] | Route personalizzate aggiuntive | | logo | ReactNode | undefined | Logo da mostrare nella sidebar | | userInfo | UserInfo | undefined | Informazioni utente per topbar | | children | ReactNode | undefined | Contenuto personalizzato al posto del routing |

RouteConfig

interface RouteConfig {
  path: string; // Path della route (es. '/dashboard')
  label: string; // Etichetta mostrata nella sidebar
  icon: ReactNode; // Icona della voce di menu
  component: ComponentType<any>; // Componente React da renderizzare
}

UserInfo

interface UserInfo {
  name: string; // Nome dell'utente
  email?: string; // Email (opzionale)
  avatar?: string; // URL avatar (opzionale)
}

🎨 Icone Disponibili

La libreria re-esporta le icone più comuni di Material-UI:

import {
  PeopleIcon,
  GroupIcon,
  SecurityIcon,
  DashboardIcon,
  SettingsIcon,
  AnalyticsIcon,
  NotificationsIcon,
  HelpIcon,
} from "admin-panel-lib";

📄 Pagine Predefinite

La libreria include tre pagine predefinite:

👥 Pagina Utenti

• Lista utenti con avatar, nome, email e ruolo
• Statistiche utenti per ruolo
• Design responsive con cards

👨‍👩‍👧‍👦 Pagina Gruppi

• Grid di gruppi con descrizione e conteggio membri
• Cards interattive con hover effects
• Statistiche aggregate

🔐 Pagina Ruoli

• Accordion espandibili per ogni ruolo
• Visualizzazione permessi con icone colorate
• Sistema di categorizzazione permessi

🎯 Esempi Completi

Dashboard con Statistiche

import React from "react";
import { AdminApp, RouteConfig, DashboardIcon } from "admin-panel-lib";
import { Box, Typography, Card, CardContent, Grid } from "@mui/material";

const Dashboard: React.FC = () => {
  return (
    <Box>
      <Typography variant="h4" gutterBottom>
        Dashboard Aziendale
      </Typography>

      <Grid container spacing={3}>
        <Grid item xs={12} sm={6} md={3}>
          <Card>
            <CardContent>
              <Typography variant="h6">Vendite Oggi</Typography>
              <Typography variant="h3" color="primary">
                €12,500
              </Typography>
            </CardContent>
          </Card>
        </Grid>
        {/* Altri cards... */}
      </Grid>
    </Box>
  );
};

const routes: RouteConfig[] = [
  {
    path: "/dashboard",
    label: "Dashboard",
    icon: <DashboardIcon />,
    component: Dashboard,
  },
];

function App() {
  return (
    <AdminApp
      appTitle="Admin Aziendale"
      customRoutes={routes}
      userInfo={{
        name: "CEO Mario Rossi",
        email: "[email protected]",
      }}
    />
  );
}

🛠️ Sviluppo e Testing

Eseguire la Demo

# Clona il repository
git clone <repo-url>
cd admin-panel-lib

# Installa dipendenze
pnpm install

# Builda la libreria
pnpm run build

# Vai nell'example e installa dipendenze
cd example
pnpm install

# Avvia la demo
pnpm run dev

Build della Libreria

# Build della libreria
pnpm run build

# Watch mode durante sviluppo
pnpm run dev

# Type checking
pnpm run typecheck

📂 Struttura del Progetto

admin-panel-lib/
├── src/
│   ├── components/
│   │   ├── AdminApp.tsx      # Componente principale
│   │   └── AppShell.tsx      # Layout shell
│   ├── pages/
│   │   ├── UsersPage.tsx     # Pagina utenti
│   │   ├── GroupsPage.tsx    # Pagina gruppi
│   │   └── RolesPage.tsx     # Pagina ruoli
│   ├── types/
│   │   └── index.ts          # Tipi TypeScript
│   └── index.ts              # Entry point libreria
├── example/
│   └── src/
│       └── App.tsx           # Demo applicazione
├── dist/                     # Build output
└── README.md

🤝 Contribuire

1. Fork del repository
2. Crea un branch per la feature (git checkout -b feature/AmazingFeature)
3. Commit delle modifiche (git commit -m 'Add some AmazingFeature')
4. Push del branch (git push origin feature/AmazingFeature)
5. Apri una Pull Request

📝 Licenza

MIT License - vedi il file LICENSE per i dettagli.

🐛 Bug Reports

Hai trovato un bug? Apri una issue con:

• Descrizione del problema
• Passi per riprodurlo
• Comportamento atteso vs attuale
• Screenshots se applicabili
• Versione della libreria

💡 Feature Requests

Hai un'idea per una nuova feature? Apri una discussion per discuterne!

Fatto con ❤️ per sviluppatori che vogliono creare admin panel professionali velocemente.