🔥 React Admin Materio - Professional Admin Dashboard

A modern, feature-rich admin dashboard built with React, Vite, and Material UI with a beautiful Materio design aesthetic.

✨ Features

🔐 Authentication System

• Dummy Authentication with localStorage
• Role-based Access Control (Admin vs User)
• Route Protection per user role
• Session Management with automatic logout

🎨 Modern UI/UX

• Material UI v7 components with Materio styling
• Light/Dark Theme toggle with persistence
• Responsive Design for desktop and mobile
• Fixed Sidebar & Topbar layout
• Beautiful Animations and smooth transitions

🌍 Multi-Language Support

• Indonesian (Primary) - Bahasa Indonesia sebagai default
• English (Secondary) - English language support
• Real-time Language Switching with i18next
• Complete Translation for all interface elements

📱 Core Pages

• Dashboard - Statistics cards, recent activities, project progress
• Users Management - Complete CRUD for user accounts (Admin only)
• Settings - Profile management, notifications, security settings
• Login - Professional authentication interface

🔒 Role System

• Admin Role → Full access to all features including user management
• User Role → Limited access to dashboard and settings only

🚀 Quick Start

Prerequisites

• Node.js 16+
• Yarn package manager

Installation

# Install dependencies
yarn install

# Start development server
yarn dev
# or
yarn start

The application will be available at http://localhost:3000

🔑 Demo Credentials

Admin Account

• Username: admin
• Password: admin123
• Access: Full system access including user management

User Account

• Username: user
• Password: user123
• Access: Dashboard and settings only

🛠 Technology Stack

• Frontend Framework: React 19
• Build Tool: Vite 7
• UI Framework: Material UI v7
• Routing: React Router Dom v7
• Internationalization: i18next + react-i18next
• State Management: React Context API
• Styling: Material UI theming system
• Icons: Material UI Icons