Initial commit
This commit is contained in:
@@ -0,0 +1,377 @@
|
||||
# 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.** 🎨✨
|
||||
Reference in New Issue
Block a user