Create a complete admin dashboard UI with the following features:
- A sidebar with navigation links for:
- Dashboard
- Inventory Management
- Staff Management
- Settings
- Logout
- A login and registration page
- Login form with email and password
- Registration form with name, email, password, confirm password
- Minimal but professional styling
- The dashboard layout should include:
- A topbar with user info (name, avatar, logout)
- A main content area
- Responsive layout for desktop and mobile
- The Inventory Management section should have:
- A table of products (name, quantity, price, category)
- Button to add a new product (opens a modal or form)
- The Staff Management section should have:
- A table of staff members (name, role, contact)
- Button to add a new staff member (opens a modal or form)
- Use modern UI components (like cards, tables, buttons, inputs)
- Use Tailwind CSS or ShadCN for styling
283d ago
I'll create a complete admin dashboard UI with all the features you requested using the new shadcn sidebar components and modern UI patterns.
I've created a complete admin dashboard UI with all the features you requested! Here's what's included:
Authentication System
- Login Form: Clean email/password login with professional styling
- Registration Form: Complete signup with name, email, password, and confirmation
- Form Validation: Password matching, required fields, and error handling
️ Dashboard Layout
- Modern Sidebar: Using the new shadcn sidebar components1 with collapsible navigation
- Responsive Design: Works seamlessly on desktop and mobile devices
- Top Navigation: User info, avatar, and logout functionality
- Clean Layout: Professional spacing and typography
Dashboard Features
Navigation Sidebar
- Dashboard Overview
- Inventory Management
- Staff Management
- Settings
- User profile with logout
Dashboard Overview
- Key Metrics Cards: Revenue, products, staff, orders with color-coded stats
- Recent Activity Feed: Real-time business updates
- Quick Actions: Shortcuts to common tasks
Inventory Management
- Product Table: Name, category, quantity, price with color-coded stock levels
- Search Functionality: Filter products by name or category
- Add Product Modal: Complete form with category selection
- Actions: Edit and delete products with confirmation
Staff Management
- Staff Table: Name, role, contact info, and status
- Contact Details: Email and phone with icons
- Add Staff Modal: Role selection and contact information
- Status Management: Active/inactive toggle with visual badges
Settings Page
- Profile Management: Avatar, personal info, company details
- Notification Preferences: Email, push, reports, marketing toggles
- Security Settings: 2FA, session timeout, password change
- Appearance Options: Theme and language selection
Modern UI Components
- shadcn/ui Components: Cards, tables, buttons, inputs, dialogs, badges
- Responsive Tables: Mobile-friendly with proper spacing
- Professional Styling: Consistent color scheme and typography
- Interactive Elements: Hover states, loading states, and smooth transitions
The dashboard uses mock data and state management - in a real application, you'd connect these to your backend API for authentication, data fetching, and CRUD operations.
Sources
283d ago