Mantine Analytics Dashboard

Mantine Analytics Dashboard is a professional admin and dashboard template built on Mantine v7. It provides a comprehensive set of UI components, forms, tables, charts, and pages designed for building analytics interfaces.

Key Features

• Customizable: The codebase is designed to be readable and well-documented for easy customization.
• Fully Responsive: Supports mobile, tablet, and desktop layouts across all browsers.
• Cross-Browser Support: Optimized for Chrome, Firefox, Opera, and Edge.
• Clean Code: Follows established design guidelines to ensure easy integration.
• Regular Updates: Periodic updates include new components, improvements, and bug fixes.

The template uses a multi-layered mock API system to allow development without a real backend.

1. Data Layer: Raw JSON data files are stored in public/mocks/ (e.g., Invoices.json, Projects.json).
2. Route Layer: Next.js API routes located in src/app/api/ serve this mock data, mimicking real backend endpoints.
3. Consumption Layer: Components fetch data using standard hooks, making it easy to swap the mock routes for real production endpoints later.

This architecture provides a realistic development experience with full type safety and zero backend requirement.

public/mocks/          # Mock JSON data files
src/app/api/           # Next.js API routes

The project provides different branches depending on your preferred Next.js version and router:

• Next.js 16 (Main Branch): The latest version using Next.js 16, Mantine 7, and the App Router.
• Next.js 14 (Branch: next-14): For users requiring Next.js 14 with App Router, Mantine 7, and React 18.
• Next.js 13 (Branch: v1): Legacy version supporting Next.js 13 with the Pages Router and Mantine 6.

The RBAC system is a comprehensive authorization framework that controls both API access and UI rendering. It uses a hierarchy of roles (Admin at level 100 and User at level 10) and a set of type-safe permissions.

Permissions are categorized into four main areas:

1. Admin Permissions: System-wide settings and user management.
2. Team Permissions: Collaborative access to projects, orders, kanban tasks, and analytics.
3. Personal Permissions: Owner-only access to profiles, invoices, files, and chats.
4. User Directory: Basic visibility of other users.

The system is designed to be used via React hooks for logic, React components for conditional rendering, and utility functions for server-side validation.

/* Role Hierarchy Example */
// Admin (Level 100)
// User (Level 10)

The template is built using the following core technologies:

• Next.js: For the application framework.
• Mantine v7: For the UI component library and styling.
• Apex Charts: For data visualization and analytics charts.
• Tabler Icons: For the icon set used throughout the dashboard.

You can extend the mock data system by following these three steps:

1. Add a JSON file: Place your data in public/mocks/YourData.json.
2. Create an API route: Define a new route in src/app/api/your-endpoint/route.ts to read the JSON file and return it as a JSON response.
3. Consume the data: Use useFetch('/api/your-endpoint') in your components.

API Route Implementation Example

import { NextRequest, NextResponse } from 'next/server';
import fs from 'fs';
import path from 'path';

export async function GET(request: NextRequest) {
  const filePath = path.join(process.cwd(), 'public', 'mocks', 'YourData.json');
  const data = JSON.parse(fs.readFileSync(filePath, 'utf8'));

  return NextResponse.json({
    succeeded: true,
    data,
    errors: [],
    message: 'Data retrieved successfully'
  });
}

Follow these steps to iterate on data and features:

1. Modify Mock Data: Edit the JSON files located in public/mocks/ to change the content.
2. Create API Routes: If you need new endpoints, add them in src/app/api/.
3. Use in Components: Fetch the new data using useFetch from @mantine/hooks.
4. Customize Theme: Use the built-in theme customizer within the application to adjust visual styles.

You can use the usePermissions hook to retrieve the current user's permissions and render them in a debug UI. This is useful for verifying that the RBAC system is correctly identifying the user's access levels during development.

import { usePermissions } from '@/lib/api/permissions';

function PermissionDebugger() {
  const permissions = usePermissions();

  return (
    <details>
      <summary>Debug Permissions</summary>
      <pre>{JSON.stringify(permissions, null, 2)}</pre>
    </details>
  );
}

Every component directory must contain an index.ts file for barrel exports.

Export Rules

• Primary Component: Use a default export for the main component.
• Secondary Exports: Use named exports for types, helper components, utilities, and constants.
• Barrel Exports: Use components/index.ts to provide a single entry point for all components in the project.

Example Patterns

• Single Export: export { default } from './ComponentName'; export * from './types';
• Multiple Exports: export { default as ActionButton } from './ActionButton'; export * from './types';

// components/index.ts
export { default as Logo } from './Logo';
export { default as StatsCard } from './StatsCard';

// Export types
export * from './StatsCard/types';

The project recommends three main styling strategies:

1. CSS Modules (Recommended): Use for complex components. Create a ComponentName.module.css file and import it as classes.
2. Mantine Props: Use for simple, quick styling (e.g., <Text size="sm" fw={700} />).
3. CSS Custom Properties: Use Mantine's CSS variables for themeable values (e.g., var(--mantine-color-body)).

Avoid inline styles unless absolutely necessary and keep global styles restricted to the theme/ directory.

// StatsCard.tsx
import classes from './StatsCard.module.css';
import { Text } from '@mantine/core';

const StatsCard = ({ data }: Props) => (
  <div className={classes.container}>
    <Text className={classes.title}>{data.title}</Text>
    <Text size="xl" fw={700}>{data.value}</Text>
  </div>
);

To manually verify if a specific permission string is correctly evaluated against a set of user permissions, use the checkPermission function. This allows you to test permission logic in your console or within logic blocks without relying on UI components.

import { checkPermission } from '@/lib/api/permissions';

// Debug specific permission
const result = checkPermission(userPermissions, 'Permissions.Team.Projects');
console.log('Permission check:', result);