🚀 Adminix

Build a full Admin Panel & Analytics Dashboard from your API in 30 seconds.

Adminix is a zero-config React library that generates production-ready management dashboards and interactive analytics from your REST API instantly. Point to any endpoint, and it auto-detects fields, types, and labels to render a full-featured CRUD interface with integrated data visualization.

📺 Live Demo

(Zero-Config inference, Live Schema Editing, and Dashboard Designer in action)

✨ Features

• Zero Config — Point to any REST endpoint. Adminix infers the schema and renders a full CRUD interface.
• Reporting & Analytics — Built-in dashboard system with Line, Bar, Pie, Area charts and KPI widgets.
• Dashboard Designer — Drag-and-drop interface for users and developers to build custom analytics views.
• Resource Analytics — Every resource automatically gets an "Analytics" tab for context-specific data visualization.
• Schema Driven — Define fields with types, validation, and custom renderers. Full TypeScript autocomplete.
• Authentication & RBAC — Built-in JWT/Custom authentication, role-based access control, and route protection.
• Plugin System — Extend the UI with custom widgets, field types, and mutation hooks.
• Export to ZIP — Generate a clean, production-ready React project from any schema.
• Dark Mode — Beautiful, consistent theming with automatic dark mode support.

📦 Installation

npm install adminix

🚀 Quick Start

Zero-Config Mode

import { Adminix } from 'adminix';
import 'adminix/style.css'; // Don't forget the styles!

export default function App() {
  return <Adminix endpoint="/api/products" />;
}

Analytics & Reporting Mode

Enable the built-in reporting engine with a single prop. This adds a global "Reports" section and an "Analytics" tab to each of your resources.

import { Adminix } from 'adminix';

const resources = [
  {
    name: 'sales',
    endpoint: '/api/analytics/sales',
    label: 'Global Sales',
    fields: [
      { name: 'date', type: 'string', sortable: true },
      { name: 'amount', type: 'number', sortable: true },
      { name: 'region', type: 'select', options: [...] }
    ]
  }
];

export default function App() {
  return (
    <Adminix 
      resources={resources} 
      enableReports={true} 
      title="Adminix Analytics" 
    />
  );
}

🔒 Authentication & Permissions

Enable authentication to instantly protect your dashboard with a login screen, JWT session management, and Role-Based Access Control (RBAC).

import { Adminix } from 'adminix';

export default function App() {
  return (
    <Adminix 
      endpoint="/api/products" 
      enableAuth={true}
      auth={{
        loginEndpoint: "/api/auth/login",
        userEndpoint: "/api/auth/me",
        tokenField: "token" // automatically injected into API requests
      }}
      globalPermissions={{
        products: {
          create: ["admin"],
          edit: ["admin", "editor"],
          delete: ["admin"],
          view: ["admin", "editor", "viewer"]
        }
      }}
    />
  );
}

UI elements (buttons, actions, routes) will automatically show/hide based on the authenticated user's roles.

📊 Dashboard Designer

Adminix includes a powerful Dashboard Designer that allows you to:

• Create global dashboards for cross-resource overview.
• Add resource-specific charts directly from the resource's "Analytics" tab.
• Choose from multiple chart types: Line, Bar, Area, Pie, KPI, and Table.
• Use the Drag-and-Drop grid to organize your layout.

🧩 Plugin System

import { chartsPlugin, analyticsPlugin } from 'adminix/plugins';

<Adminix
  resources={resources}
  plugins={[chartsPlugin(), analyticsPlugin()]}
/>

📖 Project Structure

src/
├── components/      # UI components (Adminix, DataTable, Reports, etc.)
├── core/            # Store, i18n, schema engine, theme context
├── hooks/           # React hooks (useResource, useFilters, etc.)
├── plugins/         # Extensibility system and builtin plugins
├── types/           # TypeScript type definitions (Report types, Resource types)
├── ui/              # Primitive UI components (Button, Card, Dropdown, etc.)
└── index.ts         # Public API exports

🛠 Geliştirme (Development)

git clone https://github.com/burcineren/adminix.git
cd adminix
npm install
npm run dev

📄 License

MIT — see LICENSE for details.

🤝 Contributing

Contributions are welcome! Please check the issues page or open a PR. (Created with ❤️ by Burçin Eren)