378 lines
10 KiB
Markdown
378 lines
10 KiB
Markdown
# Modern UI Implementation
|
|
|
|
## 🎨 UI Features Added
|
|
|
|
### 1. Modern Login Page (Home/Index.cshtml)
|
|
**Features:**
|
|
- Beautiful gradient background (purple/violet theme)
|
|
- Centered login card with modern design
|
|
- Demo credentials displayed prominently
|
|
- Feature highlights
|
|
- Responsive design
|
|
- Shows different content if user is already logged in
|
|
|
|
**Access:** Navigate to `/` or `https://localhost:7001`
|
|
|
|
### 2. Professional Dashboard Layout (_Layout.cshtml)
|
|
**Features:**
|
|
- **Dark Sidebar Navigation**
|
|
- Fixed position, modern dark theme
|
|
- Icon-based menu items with hover effects
|
|
- Organized sections (Operations, Inventory, Equipment, etc.)
|
|
- Auto-highlights current page
|
|
- Collapsible on mobile
|
|
|
|
- **Top Navigation Bar**
|
|
- Page title display
|
|
- User avatar with dropdown menu
|
|
- Profile and settings links
|
|
- Logout functionality
|
|
|
|
- **Main Content Area**
|
|
- Clean white background
|
|
- Responsive padding
|
|
- Card-based layout
|
|
- Modern typography (Inter font)
|
|
|
|
### 3. Modern Customers Page
|
|
**Features:**
|
|
- **Statistics Cards**
|
|
- Total customers
|
|
- Active count
|
|
- Commercial count
|
|
- Total balance
|
|
|
|
- **Customer Table**
|
|
- Clean, modern design
|
|
- Avatar circles with company initials
|
|
- Badge indicators for status and type
|
|
- Action buttons (View, Edit, Delete)
|
|
- Search functionality
|
|
- Responsive layout
|
|
|
|
- **Empty State**
|
|
- Helpful message when no customers exist
|
|
- Call-to-action button
|
|
|
|
## 🎨 Design System
|
|
|
|
### Color Palette
|
|
```css
|
|
Primary: #4f46e5 (Indigo)
|
|
Primary Hover: #4338ca
|
|
Sidebar: #1a1d29 (Dark)
|
|
Sidebar Hover: #252936
|
|
Background: #f8fafc (Light gray)
|
|
Text: #1f2937 (Dark gray)
|
|
Text Muted: #9ca3af
|
|
Border: #e5e7eb
|
|
```
|
|
|
|
### Typography
|
|
**Font Family:** Inter (Google Fonts)
|
|
**Weights:** 300, 400, 500, 600, 700, 800
|
|
|
|
### Components
|
|
- **Cards:** Rounded corners (0.75rem), subtle shadows
|
|
- **Buttons:** Rounded (0.5rem), gradient primary
|
|
- **Tables:** Hover effects, clean borders
|
|
- **Badges:** Rounded, opacity-based backgrounds
|
|
- **Alerts:** Rounded, color-coded, auto-dismiss
|
|
|
|
## 📱 Responsive Design
|
|
|
|
### Breakpoints
|
|
- **Mobile:** < 768px
|
|
- Sidebar becomes overlay (hidden by default)
|
|
- Main content full-width
|
|
- Stacked stats cards
|
|
|
|
- **Tablet:** 768px - 1024px
|
|
- Sidebar visible
|
|
- 2-column stats cards
|
|
|
|
- **Desktop:** > 1024px
|
|
- Full layout with sidebar
|
|
- 4-column stats cards
|
|
|
|
## 🎯 Navigation Structure
|
|
|
|
### Main Menu Sections
|
|
1. **Main Menu**
|
|
- Dashboard
|
|
|
|
2. **Operations**
|
|
- Customers ✅ (implemented)
|
|
- Jobs
|
|
- Quotes
|
|
|
|
3. **Inventory**
|
|
- Inventory
|
|
- Suppliers
|
|
|
|
4. **Equipment**
|
|
- Equipment
|
|
- Maintenance
|
|
|
|
5. **Shop Floor**
|
|
- Shop Display
|
|
|
|
6. **Reports**
|
|
- Analytics
|
|
|
|
7. **System** (Admin only)
|
|
- Users
|
|
- Settings
|
|
|
|
## 🔧 How to Customize
|
|
|
|
### Change Primary Color
|
|
Edit `_Layout.cshtml` and modify:
|
|
```css
|
|
--primary-color: #4f46e5; /* Change this to your brand color */
|
|
--primary-hover: #4338ca; /* Darker shade for hover */
|
|
```
|
|
|
|
### Change Sidebar Color
|
|
```css
|
|
--sidebar-bg: #1a1d29; /* Main sidebar background */
|
|
--sidebar-hover: #252936; /* Hover state */
|
|
```
|
|
|
|
### Change Logo
|
|
In `_Layout.cshtml`, find:
|
|
```html
|
|
<div class="sidebar-brand">
|
|
<i class="bi bi-lightning-charge-fill"></i>
|
|
<span>Powder Coating Pro</span>
|
|
</div>
|
|
```
|
|
Replace the icon or add an image.
|
|
|
|
### Add Menu Items
|
|
In `_Layout.cshtml`, add to the appropriate section:
|
|
```html
|
|
<a asp-controller="YourController" asp-action="Index" class="nav-link">
|
|
<i class="bi bi-your-icon"></i>
|
|
<span>Your Feature</span>
|
|
</a>
|
|
```
|
|
|
|
## 🎨 Using the Design System
|
|
|
|
### Creating a New Page
|
|
|
|
```html
|
|
@{
|
|
ViewData["Title"] = "Your Page Title";
|
|
}
|
|
|
|
<!-- Stats Cards (Optional) -->
|
|
<div class="row g-3 mb-4">
|
|
<div class="col-md-3">
|
|
<div class="card border-0 shadow-sm">
|
|
<div class="card-body">
|
|
<!-- Your stat content -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Content Card -->
|
|
<div class="card border-0 shadow-sm">
|
|
<div class="card-header bg-white border-0 py-3">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<h5 class="mb-0 fw-semibold">Section Title</h5>
|
|
<button class="btn btn-primary">
|
|
<i class="bi bi-plus-circle me-2"></i>Add New
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<!-- Your content here -->
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
### Using Badges
|
|
```html
|
|
<!-- Status badges -->
|
|
<span class="badge bg-success bg-opacity-10 text-success">Active</span>
|
|
<span class="badge bg-danger bg-opacity-10 text-danger">Inactive</span>
|
|
<span class="badge bg-primary bg-opacity-10 text-primary">Commercial</span>
|
|
<span class="badge bg-warning bg-opacity-10 text-warning">Pending</span>
|
|
```
|
|
|
|
### Using Icons
|
|
Uses Bootstrap Icons:
|
|
```html
|
|
<i class="bi bi-people"></i> <!-- People/Customers -->
|
|
<i class="bi bi-briefcase"></i> <!-- Jobs -->
|
|
<i class="bi bi-file-text"></i> <!-- Quotes -->
|
|
<i class="bi bi-box-seam"></i> <!-- Inventory -->
|
|
<i class="bi bi-gear"></i> <!-- Equipment -->
|
|
<i class="bi bi-tools"></i> <!-- Maintenance -->
|
|
```
|
|
|
|
[Full icon list](https://icons.getbootstrap.com/)
|
|
|
|
### Using Alerts
|
|
```html
|
|
@if (TempData["Success"] != null)
|
|
{
|
|
<div class="alert alert-success alert-dismissible fade show">
|
|
<i class="bi bi-check-circle me-2"></i>@TempData["Success"]
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
|
</div>
|
|
}
|
|
```
|
|
|
|
## 📋 What's Included
|
|
|
|
### Files Created
|
|
1. ✅ `Views/Shared/_Layout.cshtml` - Main layout with sidebar
|
|
2. ✅ `Views/Home/Index.cshtml` - Modern login page
|
|
3. ✅ `Views/Customers/Index.cshtml` - Sample dashboard page
|
|
4. ✅ `Views/_ViewStart.cshtml` - Sets default layout
|
|
5. ✅ `Views/_ViewImports.cshtml` - Common using statements
|
|
6. ✅ `Controllers/HomeController.cs` - Home controller with redirect logic
|
|
|
|
### External Resources (CDN)
|
|
- Bootstrap 5.3.2
|
|
- Bootstrap Icons 1.11.3
|
|
- Google Fonts (Inter)
|
|
|
|
## 🚀 Next Steps
|
|
|
|
### Implement More Pages
|
|
1. **Customers/Create.cshtml** - Add customer form
|
|
2. **Customers/Edit.cshtml** - Edit customer form
|
|
3. **Customers/Details.cshtml** - Customer details view
|
|
4. **Jobs/Index.cshtml** - Jobs list
|
|
5. **Quotes/Index.cshtml** - Quotes list
|
|
|
|
### Add More Features
|
|
1. **Dark Mode Toggle** - Add theme switcher
|
|
2. **Notifications** - Real-time notifications dropdown
|
|
3. **User Profile Page** - Edit profile, change password
|
|
4. **Settings Page** - Application settings
|
|
5. **Charts** - Add Chart.js for analytics
|
|
|
|
## 💡 Best Practices
|
|
|
|
### Consistent Spacing
|
|
- Use Bootstrap spacing utilities (`mb-3`, `mt-4`, `p-3`)
|
|
- Keep card padding consistent (`p-4` or `p-3`)
|
|
- Use gap utilities for flex layouts (`gap-2`, `gap-3`)
|
|
|
|
### Consistent Button Styles
|
|
```html
|
|
<button class="btn btn-primary">Primary Action</button>
|
|
<button class="btn btn-outline-secondary">Secondary Action</button>
|
|
<button class="btn btn-sm btn-outline-primary">Small Button</button>
|
|
```
|
|
|
|
### Consistent Card Headers
|
|
```html
|
|
<div class="card-header bg-white border-0 py-3">
|
|
<h5 class="mb-0 fw-semibold">Title</h5>
|
|
</div>
|
|
```
|
|
|
|
### Use Icons Consistently
|
|
Always pair icons with text using `me-2` (margin-end):
|
|
```html
|
|
<i class="bi bi-plus-circle me-2"></i>Add New
|
|
```
|
|
|
|
## 🎨 Example: Creating a Jobs Page
|
|
|
|
```html
|
|
@model List<JobListDto>
|
|
@{
|
|
ViewData["Title"] = "Jobs";
|
|
}
|
|
|
|
<!-- Stats Cards -->
|
|
<div class="row g-3 mb-4">
|
|
<div class="col-md-3">
|
|
<div class="card border-0 shadow-sm">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<p class="text-muted mb-1" style="font-size: 0.875rem;">Active Jobs</p>
|
|
<h3 class="mb-0 fw-bold">@Model.Count(j => j.Status != JobStatus.Completed)</h3>
|
|
</div>
|
|
<div class="rounded-circle p-3" style="background: #dbeafe;">
|
|
<i class="bi bi-briefcase text-primary" style="font-size: 1.5rem;"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Add more stat cards -->
|
|
</div>
|
|
|
|
<!-- Jobs Table -->
|
|
<div class="card border-0 shadow-sm">
|
|
<div class="card-header bg-white border-0 py-3">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<h5 class="mb-0 fw-semibold">All Jobs</h5>
|
|
<a asp-action="Create" class="btn btn-primary">
|
|
<i class="bi bi-plus-circle me-2"></i>Create Job
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="card-body p-0">
|
|
<div class="table-responsive">
|
|
<table class="table table-hover mb-0">
|
|
<thead>
|
|
<tr>
|
|
<th class="ps-4">Job #</th>
|
|
<th>Customer</th>
|
|
<th>Status</th>
|
|
<th>Priority</th>
|
|
<th>Due Date</th>
|
|
<th class="text-end pe-4">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach (var job in Model)
|
|
{
|
|
<tr>
|
|
<td class="ps-4">@job.JobNumber</td>
|
|
<td>@job.CustomerName</td>
|
|
<td>
|
|
<span class="badge bg-info bg-opacity-10 text-info">
|
|
@job.Status
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<span class="badge bg-warning bg-opacity-10 text-warning">
|
|
@job.Priority
|
|
</span>
|
|
</td>
|
|
<td>@job.DueDate?.ToString("MMM dd, yyyy")</td>
|
|
<td class="text-end pe-4">
|
|
<div class="btn-group btn-group-sm">
|
|
<a asp-action="Details" asp-route-id="@job.Id" class="btn btn-outline-primary">
|
|
<i class="bi bi-eye"></i>
|
|
</a>
|
|
<a asp-action="Edit" asp-route-id="@job.Id" class="btn btn-outline-warning">
|
|
<i class="bi bi-pencil"></i>
|
|
</a>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
---
|
|
|
|
**Your application now has a modern, professional UI! Start building features and they'll automatically look great.** 🎨✨
|