Customization

This page covers how to customize the admin panel's appearance and behavior.

Theme Customization

The admin panel supports both light and dark themes. The theme can be toggled using the theme toggle button in the top right corner of the application. The theme preference is stored in the browser's local storage, so it persists across sessions.

Theme Implementation

The themes are defined in the application's styling system and can be customized by modifying the theme objects. The light and dark themes use a theming system that allows for comprehensive customization of colors, typography, spacing, and more.

CSS variables are used for custom styling in the application's CSS files, which ensures that custom styles also respect the selected theme.

Dark Mode Support

The admin panel includes built-in support for dark mode, which can be toggled by the user. The dark mode implementation includes:

• A theme toggle button in the top navigation bar
• Automatic detection of the user's system preference for dark mode
• Persistent theme preference storage in localStorage
• Smooth transition animations between themes
• Proper contrast ratios for accessibility

All components in the admin panel are designed to work well in both light and dark modes, with appropriate contrast ratios and color choices.

Custom Field Components

The admin panel includes several custom field components to improve the user experience:

ArrayOfPrimitivesField

This component properly displays arrays of primitive values (like roles) as chips, making them more readable than the default comma-separated string.

ClientListField

This specialized component fetches client data and displays client names instead of just IDs, making it easier to understand which clients a user has access to.

Custom Relationship Fields

The admin panel includes custom field components for displaying relationships between resources:

• ClientListField: Displays clients as clickable chips
• ClientBrandsField: Displays brands as clickable chips
• BrandProductionRunsField: Displays production runs as clickable chips
• ProductionRunTrackersField: Displays tracker counts as clickable links

These components enhance the user experience by providing visual representations of relationships and enabling easy navigation between related resources.

Layout Customization

The admin panel's layout can be customized by modifying the layout components:

Main Layout

The main layout component defines the overall structure of the application, including:

• Top navigation bar
• Sidebar menu
• Content area
• Footer

Dashboard Layout

The dashboard layout component defines the structure of the dashboard page, including:

• Statistics cards
• Recent activity list
• Quick access buttons
• Maps and charts

List Layouts

The list layout components define the structure of resource list pages, including:

• Filter sidebar
• Data table
• Pagination controls
• Bulk action buttons

Detail Layouts

The detail layout components define the structure of resource detail pages, including:

• Header with actions
• Tabs for different sections
• Related resources
• Edit and delete buttons

Custom Styling

The admin panel uses a utility-first CSS framework (Tailwind CSS) for styling, which allows for easy customization of component styles without writing custom CSS.

Global Styles

Global styles are defined in the index.css file, which includes:

• Base styles for HTML elements
• Utility classes for common styling needs
• CSS variables for theme colors and other design tokens

Component-Specific Styles

Component-specific styles are defined using utility classes directly in the component JSX. This approach allows for:

• Easy customization of individual components
• Consistent styling across the application
• Reduced CSS bundle size
• Better performance

Responsive Design

The admin panel is designed to be responsive, with appropriate layouts for different screen sizes:

• Mobile: Single-column layout with collapsible sidebar
• Tablet: Two-column layout with compact sidebar
• Desktop: Three-column layout with full sidebar

The responsive design is implemented using responsive utility classes and media queries.

Custom Components

The admin panel can be extended with custom components to add new functionality or modify existing behavior.

Creating Custom Components

To create a custom component:

1. Create a new file in the src/components directory
2. Define your component using React and TypeScript
3. Import and use the component in the appropriate place

Example: Custom Field Component

import React from "react";

interface CustomFieldProps {
  value: any;
  record: Record<string, any>;
}

export const CustomField: React.FC<CustomFieldProps> = ({ value, record }) => {
  return (
    <div className="custom-field">
      <span className="custom-field-label">Custom:</span>
      <span className="custom-field-value">{value}</span>
    </div>
  );
};

Example: Custom Action Button

import React from "react";
import { useNotify } from "react-admin";

interface CustomActionButtonProps {
  record: Record<string, any>;
}

export const CustomActionButton: React.FC<CustomActionButtonProps> = ({
  record,
}) => {
  const notify = useNotify();

  const handleClick = () => {
    // Perform custom action
    notify("Custom action performed", { type: "success" });
  };

  return (
    <button
      onClick={handleClick}
      className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
    >
      Custom Action
    </button>
  );
};