DashWind Admin Dashboard Template

DashWind is a free admin dashboard template built with React JS and Daisy UI. It provides a fully customizable and themable CSS environment powered by Tailwind CSS.

Key features include:

• Theming: Light/dark mode toggle.
• Authentication: Token-based user authentication.
• Navigation: Sidebar with submenu support, right and left sidebars.
• State Management: Store management using Redux Toolkit.
• UI Components: Daisy UI components, universal loader, notifications, global modal, and calendar.
• Data Visualization: Integration with Chart.js 2.

To set up the DashWind admin dashboard template locally, ensure you have Node.js installed. Navigate to the project directory and execute the following commands to install dependencies and start the development server.

  npm install
  npm start

The Transactions component manages its own internal state for the displayed list of transactions (trans). It provides three primary interaction methods via its internal TopSideButtons sub-component:

1. Search: When a user types in the SearchBar, the applySearch function filters the original RECENT_TRANSACTIONS list by checking if the transaction's email includes the search string (case-insensitive).
2. Filter: Users can select a location from a dropdown menu. The applyFilter function filters the list to only include transactions matching that specific location.
3. Remove: Users can clear both the active search text and the active location filter to restore the full list of transactions.

The CalendarView component limits the number of events displayed directly on the calendar grid to prevent UI clutter.

• If a specific day has 2 or fewer events, all events are rendered normally.
• If a day has more than 2 events, the component renders the first two events and then adds a special placeholder event with the title {originalLength - 2} more and a theme of "MORE".
• Clicking this "more" placeholder triggers the openDayDetail prop, passing the full list of events for that day.

The leads slice manages the following state shape:

• isLoading (boolean): Indicates if a lead-related asynchronous operation (like getLeadsContent) is currently in progress.
• leads (Array): An array containing the lead data objects.

The application performs two main initialization steps upon startup:

1. Library Initialization: initializeApp() is called to set up core libraries.
2. Theme Management: The themeChange(false) function from the theme-change library is called inside a useEffect hook to initialize DaisyUI theme switching capabilities.
3. Authentication Check: checkAuth() is called to retrieve the authentication token, which determines the initial redirect behavior.

// Library initialization
initializeApp();

// Auth check
const token = checkAuth();

// Inside the App component
useEffect(() => {
  themeChange(false);
}, []);

The application uses a central routes array to map URL paths to React components. This array is exported as the default export from src/routes/index.js.

Each route object in the array must contain:

• path: A string representing the URL segment.
• component: The React component to be rendered when the path matches.

To optimize performance, components are loaded using React.lazy(), which enables code-splitting for each route.

const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
  },
  {
    path: '/leads',
    component: Leads,
  },
  // ... other routes
]

export default routes

DashWind is built upon the following technology stack:

• React JS v18.2.0
• React Router v6.4.3
• Tailwind CSS v3.3.6
• Daisy UI v4.4.19
• HeroIcons
• Redux toolkit v1.9
• React ChartJS 2 v5

The DashboardTopBar component within the Dashboard feature accepts an updateDashboardPeriod prop. This callback is triggered when a user selects a new time range.

When the period changes, the callback receives a newRange object containing startDate and endDate. You can use this to dispatch actions or trigger API calls to refresh the dashboard data.

Example implementation pattern:

const updateDashboardPeriod = (newRange) => {
    // newRange contains { startDate, endDate }
    // Implement logic to refresh your dashboard data here
    console.log(`Updating data from ${newRange.startDate} to ${newRange.endDate}`);
};

The leadsSlice provides two synchronous actions to modify the local leads state:

• addNewLead: Adds a new lead object to the existing list. Expects a payload with the shape { newLeadObj: { ... } }.
• deleteLead: Removes a lead from the list by its index. Expects a payload with the shape { index: number }.

import { addNewLead, deleteLead } from './path/to/leadSlice';
import { useDispatch } from 'react-redux';

const dispatch = useDispatch();

// To add a lead:
dispatch(addNewLead({ newLeadObj: { name: 'John Doe', email: 'john@example.com' } }));

// To delete a lead at a specific index:
dispatch(deleteLead({ index: 0 }));

The Dashboard component is the main entry point for the dashboard feature. It provides a layout containing a top bar for period selection, statistical cards, various charts (Line, Bar, Doughnut), and data tables (User Channels, Amount Stats, Page Stats).

To integrate the dashboard and handle period changes, you should implement an updateDashboardPeriod function that reacts to the newRange object provided by the DashboardTopBar component. This function typically triggers data fetching or state updates to refresh the dashboard values.

import Dashboard from './features/dashboard';

function App() {
  return (
    <Dashboard />
  );
}