# SHIPS WMS - Streamlit V3 Edition

Professional Warehouse Management System for PT Pertamina (Persero)

## Quick Start

### Build
```bash
dotnet build
```

### Run
```bash
dotnet run
```

### Browse
```
https://localhost:5001/
```

---

## 📖 Documentation

Start here to understand the design system and implementation:

1. **`STREAMLIT_DESIGN_GUIDE.md`** ← Start here!
   - Complete design system reference
   - Component guidelines
   - Color palette and typography
   - Responsive design rules
   - Utilities and spacing

2. **`IMPLEMENTATION_SUMMARY_V3.md`**
   - What was delivered
   - Design specifications
   - File structure
   - How to use and customize

3. **`VISUAL_REFERENCE_GUIDE.md`**
   - Layout diagrams
   - Responsive breakpoints
   - Color visualizations
   - Component sizes and spacing

4. **`PROJECT_COMPLETION_CHECKLIST.md`**
   - Verification checklist
   - Quality assurance
   - Testing results

---

## 🎨 Design System

### Color Palette
- **Primary**: #0052CC (Professional Blue)
- **Success**: #10B981 (Green - In Stock)
- **Warning**: #F59E0B (Amber - Low Stock)
- **Danger**: #EF4444 (Red - Out of Stock)

### Layout
- **Sidebar**: 200px (desktop), 70px (mobile)
- **Navbar**: 60px fixed
- **Content**: Full width, responsive
- **Footer**: Minimal

### Components
- KPI cards (4-column responsive grid)
- Dashboard grid (2.5fr / 1.5fr)
- Professional card system
- Status badges
- Responsive tables

---

## 📁 Key Files

### Styles
- `wwwroot/css/site.streamlit.css` — Main design system
- `wwwroot/css/site.css` — CSS imports

### Scripts
- `wwwroot/js/streamlit-layout.js` — Layout handler

### Layout Templates
- `Views/Shared/_Layout.cshtml` — Master layout
- `Views/Shared/_Sidebar.cshtml` — Navigation sidebar
- `Views/Shared/_TopNav.cshtml` — Top navigation
- `Views/Shared/_Footer.cshtml` — Footer

### Pages
- `Views/Barang/Index.cshtml` — Inventory page (example)

---

## 🚀 Features

✅ **Compact Layout**
- Streamlined sidebar (200px)
- Minimal navbar (60px)
- Efficient use of space

✅ **Dashboard-First**
- KPI cards on every page
- 4-column responsive grid
- Color-coded status (green/amber/red)

✅ **Professional Design**
- Modern color palette
- Clean typography (Plus Jakarta Sans)
- Subtle shadows and animations

✅ **Responsive Design**
- Desktop (1920+)
- Tablet (768-1200)
- Mobile (<768)

✅ **Performance**
- Single optimized CSS (~25KB)
- Lightweight JavaScript (~4KB)
- Fast page loads

---

## 🛠️ Technology Stack

- **.NET 10**
- **ASP.NET Core MVC** (Razor Pages)
- **Entity Framework Core**
- **Bootstrap 5**
- **Font Awesome 6**
- **Plus Jakarta Sans** (Google Fonts)

---

## 📊 Project Status

✅ **Build**: Successful (no errors)  
✅ **Implementation**: 100% Complete  
✅ **Documentation**: Comprehensive  
✅ **Ready for**: Testing & Deployment  

---

## 📝 Creating New Pages

1. Create new view file: `Views/[Controller]/[Action].cshtml`
2. Use the master layout (auto-inherited from _Layout.cshtml)
3. Add KPI cards if page shows metrics:
```html
<div class="kpi-container">
	<div class="kpi-card">
		<div class="kpi-label">LABEL</div>
		<div class="kpi-value">VALUE</div>
	</div>
	<!-- More cards... -->
</div>
```
4. Use `.card` for content containers
5. Apply `.dashboard-grid` for chart + alerts layout
6. Follow color conventions for status indicators

---

## 🎓 Best Practices

- Use CSS classes instead of inline styles
- Test on mobile, tablet, and desktop
- Follow semantic HTML
- Use Bootstrap utilities for spacing
- Refer to `STREAMLIT_DESIGN_GUIDE.md` for components
- Keep navigation menu < 10 items
- Use color system for consistency

---

## 📞 Support

### Documentation Files
- Design Guide: `STREAMLIT_DESIGN_GUIDE.md`
- Implementation: `IMPLEMENTATION_SUMMARY_V3.md`
- Visual Reference: `VISUAL_REFERENCE_GUIDE.md`
- Completion Checklist: `PROJECT_COMPLETION_CHECKLIST.md`

### External Resources
- Bootstrap 5: https://getbootstrap.com/
- Font Awesome: https://fontawesome.com/
- ASP.NET Core: https://docs.microsoft.com/aspnet/

---

## 🔄 Version History

### v1.0 - Streamlit V3 Edition (Current)
- ✅ Complete Streamlit-inspired redesign
- ✅ Compact layout system
- ✅ KPI dashboard cards
- ✅ Responsive design
- ✅ Comprehensive documentation

---

**Version**: 1.0  
**Status**: ✅ Production Ready  
**Organization**: PT Pertamina (Persero)  
**Last Updated**: 2024
