# SHIPS WMS - Streamlit V3 Design System

## Overview

This ASP.NET Core MVC application has been redesigned using a **compact, modern Streamlit-inspired visual language**. The design prioritizes minimal wasted space, professional aesthetics, and a dashboard-first user experience.

---

## Design Philosophy

### Core Principles
- **Compact Layout**: Streamlined sidebar (200px), minimal padding, efficient use of space
- **Data-Driven**: KPI cards displayed in a single horizontal row at top of each page
- **Professional Minimal**: Clean typography, subtle colors, clear information hierarchy
- **Responsive**: Works seamlessly on desktop, tablet, and mobile
- **Fast & Lightweight**: Minimal CSS, optimized performance

### Color System
- **Primary**: `#0052CC` (Professional Blue)
- **Primary Dark**: `#0041A8` (Hover state)
- **Primary Light**: `#E3F2FD` (Badges & highlights)
- **Success**: `#10B981` (Green, stock available)
- **Warning**: `#F59E0B` (Amber, low stock)
- **Danger**: `#EF4444` (Red, out of stock)
- **Neutral**: Gray scale from `#F8F9FA` (light) to `#1F2937` (dark)

---

## File Structure

### CSS
- **`wwwroot/css/site.streamlit.css`** (Main design system)
  - Variables & imports
  - Layout structure (wrapper, sidebar, navbar, content, footer)
  - KPI card styles
  - Dashboard grid utilities
  - Responsive design rules
  - Animations

- **`wwwroot/css/site.css`**
  - Imports `site.streamlit.css` (replaces previous `site.enterprise.css`)

### JavaScript
- **`wwwroot/js/streamlit-layout.js`** (Layout interactions)
  - Active menu detection
  - Notification button interactions
  - Responsive sidebar handling

### Views (Partials)
- **`Views/Shared/_Layout.cshtml`** (Master layout)
  - Sidebar wrapper structure
  - Navigation bar
  - Content container
  - Footer

- **`Views/Shared/_Sidebar.cshtml`** (Compact sidebar)
  - Logo header
  - Menu items with icons
  - Simple navigation structure

- **`Views/Shared/_TopNav.cshtml`** (Top navigation)
  - Brand / title
  - Search input
  - Notification bell
  - User profile menu

- **`Views/Shared/_Footer.cshtml`** (Minimal footer)
  - Copyright info

### Pages
- **`Views/Barang/Index.cshtml`** (Inventory master)
  - KPI cards in single row (Total, In Stock, Low Stock, Out of Stock)
  - Search & filter controls
  - Material inventory table

---

## Component Guidelines

### KPI Cards (`.kpi-container`)
Display key metrics in a horizontal row at the top of pages.

```html
<div class="kpi-container">
	<div class="kpi-card">
		<div class="kpi-label">Total Items</div>
		<div class="kpi-value">1,234</div>
	</div>
	<div class="kpi-card success">
		<div class="kpi-label">In Stock</div>
		<div class="kpi-value">1,100</div>
	</div>
	<div class="kpi-card warning">
		<div class="kpi-label">Low Stock</div>
		<div class="kpi-value">100</div>
	</div>
	<div class="kpi-card danger">
		<div class="kpi-label">Out of Stock</div>
		<div class="kpi-value">34</div>
	</div>
</div>
```

**Modifiers**: `.success`, `.warning`, `.danger`

### Dashboard Grid (`.dashboard-grid`)
Two-column layout for charts (left, 2.5fr) and alerts/stats (right, 1.5fr).

```html
<div class="dashboard-grid">
	<div class="card"><!-- Chart goes here --></div>
	<div class="card"><!-- Alerts go here --></div>
</div>
```

### Cards (`.card`)
Reusable card containers.

```html
<div class="card">
	<div class="card-header">
		<h5>Card Title</h5>
	</div>
	<div class="card-body">
		<!-- Content -->
	</div>
</div>
```

### Buttons (`.btn`)
Available sizes: `.btn-sm`, `.btn-lg`
Available styles: `.btn-primary`, `.btn-secondary`, `.btn-success`, `.btn-danger`

```html
<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-secondary">Secondary Button</button>
```

### Badges (`.badge`)
Available styles: `.badge-primary`, `.badge-success`, `.badge-warning`, `.badge-danger`

```html
<span class="badge badge-success">In Stock</span>
```

### Status Badges (`.status-badge`)
Available: `.status-aman` (green), `.status-menipis` (amber), `.status-kosong` (red)

```html
<span class="status-badge status-aman">
	<i class="fas fa-check-circle"></i> In Stock
</span>
```

### Alerts (`.alert`)
Available: `.alert-danger`, `.alert-warning`, `.alert-success`, `.alert-info`

```html
<div class="alert alert-warning">
	<strong>Warning:</strong> This is a warning message.
</div>
```

---

## Layout Structure

### Master Layout (`.ships-wrapper`)
```
.ships-wrapper
├── .ships-sidebar (200px width)
├── .ships-main
│   ├── .ships-navbar (60px height)
│   ├── .ships-content (flex: 1, scrollable)
│   └── .ships-footer
```

### Sidebar (`.ships-sidebar`)
- Width: 200px (desktop), 70px (mini on mobile)
- Background: Dark navy (#1F2937)
- Menu items with icons and labels
- Active state highlighting

### Navbar (`.ships-navbar`)
- Height: 60px
- Flexbox: Brand (left) | Actions (right)
- Search input integrated
- Notification bell with badge
- User profile dropdown

### Content (`.ships-content`)
- Padding: 16px
- Background: Light gray (#F8F9FA)
- Scrollable when needed

---

## Responsive Design

### Breakpoints
- **Desktop (> 1200px)**: Full sidebar, dashboard-grid 2-column
- **Tablet (768px - 1200px)**: Reduced padding, dashboard-grid becomes 1-column
- **Mobile (< 768px)**: Mini sidebar (70px), single column, optimized touch targets

### Mobile Sidebar
On screens < 768px:
- Sidebar width: 70px
- Menu labels hidden
- Icons centered
- Menu items stack vertically

---

## Colors & Utilities

### Text Colors
- `.text-primary` → `#0052CC`
- `.text-success` → `#10B981`
- `.text-warning` → `#F59E0B`
- `.text-danger` → `#EF4444`
- `.text-muted` → `#9CA3AF`

### Spacing Utilities
- `.mt-1`, `.mt-2`, `.mt-3`, `.mt-4` (margin-top)
- `.mb-1`, `.mb-2`, `.mb-3`, `.mb-4` (margin-bottom)
- `.p-2`, `.p-3`, `.p-4` (padding)
- `.gap-2`, `.gap-3`, `.gap-4` (flex gap)

### Grid Utilities
- `.grid` → `display: grid; gap: 16px;`
- `.grid-2` → `grid-template-columns: repeat(2, 1fr);`
- `.grid-3` → `grid-template-columns: repeat(3, 1fr);`
- `.grid-4` → `grid-template-columns: repeat(4, 1fr);`
- `.grid-auto` → Auto-fit with 280px min

---

## Typography

### Headings
- `<h1>` → 28px, 700 weight
- `<h2>` → 24px, 700 weight
- `<h3>` → 20px, 700 weight
- `<h4>` → 16px, 700 weight
- `<h5>` → 15px, 700 weight
- `<h6>` → 13px, 700 weight

### Text
- Base: 14px, 1.5 line-height
- `<small>` → 12px
- `.text-muted` → Grayed out

---

## JavaScript Integration

### StreamlitLayout API
Global object: `window.StreamlitLayout`

#### Methods
- `StreamlitLayout.init()` — Initializes layout on page load
- `StreamlitLayout.setupSidebarMenuActive()` — Highlights active menu
- `StreamlitLayout.setupNotificationButton()` — Notification popover
- `StreamlitLayout.toggleSidebar()` — Toggle sidebar on mobile

### Usage Example
```javascript
// Automatically called on page load
// Manual call:
StreamlitLayout.init();

// Toggle sidebar programmatically
StreamlitLayout.toggleSidebar();
```

---

## Migration Notes

### From Enterprise Theme
1. ✅ Replaced `site.enterprise.css` with `site.streamlit.css`
2. ✅ Updated `_Layout.cshtml` to use `.ships-*` classes
3. ✅ Refactored `_Sidebar.cshtml` for compact design
4. ✅ Simplified `_TopNav.cshtml`
5. ✅ Created `streamlit-layout.js` (modern, lightweight)
6. ✅ Updated `Barang/Index.cshtml` with KPI row

### Controllers & Database
**No changes** — All controllers, routes, and database logic remain unchanged.

---

## Performance

- **CSS**: ~25KB (single, optimized stylesheet)
- **JS**: ~4KB (streamlit-layout.js)
- **Fonts**: Google Fonts (Plus Jakarta Sans, cached)
- **Icons**: Font Awesome 6 (CDN)

---

## Testing Checklist

- [ ] Desktop (1920x1080): Sidebar visible, full layout
- [ ] Tablet (768x1024): Responsive grid, readable layout
- [ ] Mobile (375x667): Mini sidebar, single column
- [ ] Menu: Active state highlights correctly
- [ ] Notifications: Bell popover shows on click
- [ ] Search: Form submits correctly
- [ ] KPI Cards: Responsive grid adapts to screen size
- [ ] Table: Sortable, responsive on all screens

---

## Future Enhancements

1. **Dark Mode Toggle**: Add `.dark-mode` variant to stylesheet
2. **Animations**: Enhance transitions and page load effects
3. **Charts**: Integrate Chart.js or similar for KPI visualizations
4. **Mobile App**: Consider responsive web app (PWA) features
5. **Theming**: CSS variables for easy brand customization

---

## Support

For questions or issues, refer to:
- ASP.NET Core MVC documentation
- Bootstrap 5 docs: https://getbootstrap.com/docs/5.0/
- Font Awesome: https://fontawesome.com/
- Original Streamlit: https://streamlit.io/

---

**Version**: 1.0  
**Last Updated**: 2024  
**Designed for**: .NET 10, ASP.NET Core MVC, Bootstrap 5
