Dashboard

The Dashboard provides an interface for managing various aspects of the user's account and activities within the application. It includes multiple pages for different functionalities, such as viewing account details, managing orders, and accessing custom boilerplates and templates.

Features

🔒 Protected Access: Ensures that only authenticated users can access the dashboard, with role-based controls to restrict access to certain areas.

🧩 Modular Layout: A modular and reusable layout that includes a header, sidebar, and content area, making it easy to navigate through different sections of the dashboard.

📊 Dynamic Content Management: Integrates user-specific data, such as account details, orders, and templates, and provides dynamic rendering based on the user's information.

⚡ Server-Side Rendering: Utilizes server-side rendering to fetch user data and ensure that the dashboard displays the most up-to-date information.

🎨 SCSS: SCSS is used to apply custom styles to form elements, including labels, inputs, errors, and more.

Screenshots

What's Included

< DashboardLayout />

The DashboardLayout component is the primary layout for the dashboard. It includes a header and a sidebar for navigation and wraps the main content area where individual pages are rendered.

`DashboardLayout` Props

Name	Type	Description
`children`	`ReactNode`	The main content to be displayed within the dashboard layout.

< Header />

The Header component provides the top navigation for the dashboard, including a logo, user dropdown, and notification dropdown.

`Header` Props

Name	Type	Description
`name`	`string`	The name of the dashboard menu being displayed.

< Sidebar />

The Sidebar component displays the navigation links for different sections of the dashboard, such as account details, orders, templates, and more.

Dashboard Pages

These are the main pages accessible through the dashboard, each wrapped in the Page component for consistent styling and layout.

`AccountPage`

Displays user account details, including profile information and settings.

`OrdersPage`

Displays a list of orders placed by the user.

< DashboardNotFound />

Displays a 404 error page when a user tries to access a non-existent page within the dashboard.

< UserDropdownContent />

Provides dropdown menu items for the user, including options to change the theme and log out.

`UserDropdownContent` Props

Name	Type	Description
`theme`	`string`	The current theme being used.
`openModal`	`function`	Function to open the theme manager modal.

Utility Components

< Page />
A common wrapper component that ensures consistent layout and styling across all dashboard pages.
< UserDetails />
Displays detailed information about the user's account.
< Logo />
Displays the logo in the header.
< NotificationDropdown />
Displays notifications for the user.
< UserDropdown />
Displays user-specific options in the header.

Setup Component's Needs

To ensure your dashboard functions correctly with Supabase, follow these steps:

Sign Up or Log In to Supabase
- Go to Supabase and sign up or log in.
Create a New Supabase Project
- In the Supabase dashboard, create a new project. You'll receive an API URL and an API Key for your project.
Configure Environment Variables
- In the root of your Next.js project, create or update your .env.local file. Add the following environment variables and replace the placeholders with your actual Supabase details:
```
 NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
 NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key
```
Set Up Row Level Security (RLS)
- Use Supabase's Row Level Security (RLS) policies to restrict access to certain data based on user roles. This can be configured directly in the Supabase dashboard under your project's settings. RLS ensures that only users with appropriate roles (like admin) can access or modify specific data.