# SHIPS WMS - Enterprise UI Component Guide

## Overview

This document provides a visual guide to the professional enterprise components implemented in the WarehouseAppSHIPS application. Use these HTML snippets and CSS classes to build new pages and features.

---

## Table of Contents

1. [Color System](#color-system)
2. [Typography](#typography)
3. [Components](#components)
4. [Examples](#examples)
5. [Best Practices](#best-practices)

---

## Color System

### CSS Variables (Available in `:root`)

```
--enterprise-primary: #0052cc          /* Enterprise Blue */
--enterprise-primary-dark: #0041a8     /* Darker Blue */
--enterprise-primary-light: #e3f2fd    /* Light Blue */

--enterprise-secondary: #1a237e        /* Dark Navy */
--enterprise-secondary-light: #3f51b5  /* Light Navy */

--enterprise-success: #10b981          /* Green */
--enterprise-warning: #f59e0b          /* Amber */
--enterprise-danger: #ef4444           /* Red */

--enterprise-neutral-50: #fafafa
--enterprise-neutral-100: #f3f4f6
--enterprise-neutral-200: #e5e7eb
--enterprise-neutral-300: #d1d5db
--enterprise-neutral-400: #9ca3af
--enterprise-neutral-500: #6b7280
--enterprise-neutral-600: #4b5563
--enterprise-neutral-700: #374151
--enterprise-neutral-800: #1f2937
--enterprise-neutral-900: #111827

--enterprise-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05)
--enterprise-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.08)
--enterprise-shadow-lg: 0 10px 25px 0 rgba(0, 0, 0, 0.1)
--enterprise-shadow-xl: 0 20px 40px 0 rgba(0, 0, 0, 0.12)
```

### Usage in CSS

```css
.my-component {
  background-color: var(--enterprise-primary);
  box-shadow: var(--enterprise-shadow);
}
```

---

## Typography

### Heading Hierarchy

```html
<h1>Page Title (2rem, 700 weight)</h1>
<h2>Section Heading (1.625rem, 700 weight)</h2>
<h3>Subsection (1.25rem, 600 weight)</h3>
<h4>Card Title (1.0625rem, 600 weight)</h4>
<h5>Label (0.9375rem, 600 weight)</h5>
<h6>Small Label (0.875rem, 600 weight)</h6>

<p>Body text (0.875rem, 400 weight, 1.6 line-height)</p>
<small>Small text (0.8125rem, 400 weight)</small>
```

### Font Weights

- **300:** Light (rarely used)
- **400:** Regular (body text, paragraphs)
- **500:** Medium (labels, badges)
- **600:** Semibold (headings, card titles)
- **700:** Bold (page titles, important text)
- **800:** Extra Bold (brand text, emphasis)

---

## Components

### 1. Cards

#### Standard Card

```html
<div class="card card-elevated">
  <div class="card-header">
	<h5 class="card-title mb-0">Card Title</h5>
  </div>
  <div class="card-body">
	<p class="card-text">Card content goes here...</p>
  </div>
  <div class="card-footer">
	Footer information
  </div>
</div>
```

#### KPI Card (Dashboard)

```html
<div class="enterprise-kpi-card">
  <div class="enterprise-kpi-icon icon-primary">
	<i class="fas fa-boxes"></i>
  </div>
  <div class="enterprise-kpi-label">Total Items</div>
  <div class="enterprise-kpi-value">1,234</div>
  <div class="enterprise-kpi-change positive">
	<i class="fas fa-arrow-up"></i> 12.5% this month
  </div>
</div>
```

**Icon Colors:** `icon-primary`, `icon-success`, `icon-warning`, `icon-danger`

---

### 2. Buttons

#### Primary Button

```html
<button class="btn btn-primary">
  <i class="fas fa-plus me-2"></i> Add New
</button>
```

#### Variants

```html
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-outline-primary">Outline</button>
```

#### Sizes

```html
<button class="btn btn-primary btn-lg">Large Button</button>
<button class="btn btn-primary">Normal Button</button>
<button class="btn btn-primary btn-sm">Small Button</button>
```

#### Button Group

```html
<div class="btn-group">
  <a href="#" class="btn btn-primary">
	<i class="fas fa-plus me-2"></i> Add
  </a>
  <a href="#" class="btn btn-secondary">
	<i class="fas fa-download me-2"></i> Export
  </a>
</div>
```

---

### 3. Tables

#### Standard Table

```html
<div class="card">
  <div class="card-header">
	<h5 class="card-title mb-0">Data Table</h5>
  </div>
  <div class="card-body p-0">
	<div class="table-responsive">
	  <table class="table table-hover table-striped mb-0">
		<thead>
		  <tr>
			<th>Column 1</th>
			<th>Column 2</th>
			<th class="text-center">Column 3</th>
		  </tr>
		</thead>
		<tbody>
		  <tr>
			<td>Data 1</td>
			<td>Data 2</td>
			<td class="text-center">
			  <span class="badge bg-primary">Active</span>
			</td>
		  </tr>
		</tbody>
	  </table>
	</div>
  </div>
</div>
```

---

### 4. Status Badges

#### Stock Status Examples

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

<!-- Low Stock -->
<span class="status-badge status-menipis">
  <i class="fas fa-exclamation-triangle"></i> Low Stock
</span>

<!-- Out of Stock -->
<span class="status-badge status-kosong">
  <i class="fas fa-circle-xmark"></i> Out of Stock
</span>
```

#### Generic Badges

```html
<span class="badge bg-primary">Primary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-warning">Warning</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-info">Info</span>
```

---

### 5. Forms

#### Form Group

```html
<div class="form-group">
  <label for="inputName" class="form-label">Item Name</label>
  <input type="text" class="form-control" id="inputName" placeholder="Enter item name">
</div>
```

#### Form Inputs

```html
<input type="text" class="form-control" placeholder="Text input">
<input type="email" class="form-control" placeholder="Email input">
<input type="number" class="form-control" placeholder="Number input">
<textarea class="form-control" rows="3"></textarea>
<select class="form-select">
  <option>Select an option</option>
  <option>Option 1</option>
</select>
```

#### Checkboxes

```html
<div class="form-check">
  <input class="form-check-input" type="checkbox" id="flexCheckDefault">
  <label class="form-check-label" for="flexCheckDefault">
	Agree to terms
  </label>
</div>
```

---

### 6. Alerts

```html
<div class="alert alert-primary" role="alert">
  <i class="fas fa-info-circle me-2"></i> This is an info message
</div>

<div class="alert alert-success" role="alert">
  <i class="fas fa-check-circle me-2"></i> Operation successful
</div>

<div class="alert alert-warning" role="alert">
  <i class="fas fa-exclamation-triangle me-2"></i> Warning message
</div>

<div class="alert alert-danger" role="alert">
  <i class="fas fa-times-circle me-2"></i> Error message
</div>
```

---

### 7. Notifications

#### Notification in Dropdown

```html
<a href="#" class="enterprise-notification-item">
  <div class="enterprise-notification-icon bg-warning">
	<i class="fas fa-exclamation-triangle"></i>
  </div>
  <div class="enterprise-notification-content">
	<div class="enterprise-notification-title">Low Stock Alert</div>
	<div class="enterprise-notification-text">Item XYZ is below minimum stock level</div>
	<small class="enterprise-notification-time">5 minutes ago</small>
  </div>
</a>
```

---

## Examples

### Example 1: Dashboard Page

```html
<!-- Page Title -->
<div class="row mb-4">
  <div class="col-12">
	<h1 class="enterprise-page-title">Dashboard</h1>
  </div>
</div>

<!-- KPI Cards Row -->
<div class="row mb-4">
  <div class="col-md-3 col-sm-6 mb-4">
	<div class="enterprise-kpi-card">
	  <div class="enterprise-kpi-icon icon-primary">
		<i class="fas fa-boxes"></i>
	  </div>
	  <div class="enterprise-kpi-label">Total Items</div>
	  <div class="enterprise-kpi-value">1,234</div>
	  <div class="enterprise-kpi-change positive">
		<i class="fas fa-arrow-up"></i> 5.2% last month
	  </div>
	</div>
  </div>
  <!-- Repeat for other KPIs -->
</div>

<!-- Data Table -->
<div class="row">
  <div class="col-12">
	<div class="card card-elevated">
	  <div class="card-header">
		<h5 class="card-title mb-0">Recent Transactions</h5>
	  </div>
	  <div class="card-body p-0">
		<div class="table-responsive">
		  <table class="table table-hover mb-0">
			<!-- Table content -->
		  </table>
		</div>
	  </div>
	</div>
  </div>
</div>
```

---

### Example 2: List Page with Search & Actions

```html
<!-- Search Section -->
<div class="row mb-4">
  <div class="col-12">
	<div class="card card-elevated">
	  <div class="card-body">
		<form class="d-flex gap-2">
		  <input type="text" class="form-control" placeholder="Search...">
		  <button type="submit" class="btn btn-primary">
			<i class="fas fa-search me-2"></i> Search
		  </button>
		  <a href="#" class="btn btn-secondary">
			<i class="fas fa-redo me-2"></i> Reset
		  </a>
		</form>
	  </div>
	</div>
  </div>
</div>

<!-- Action Buttons -->
<div class="row mb-4">
  <div class="col-12">
	<div class="btn-group">
	  <a href="#" class="btn btn-primary">
		<i class="fas fa-plus me-2"></i> Add New
	  </a>
	  <a href="#" class="btn btn-secondary">
		<i class="fas fa-download me-2"></i> Export
	  </a>
	</div>
  </div>
</div>

<!-- Data Table -->
<div class="row">
  <div class="col-12">
	<div class="card card-elevated">
	  <div class="card-header">
		<h5 class="card-title mb-0">Items</h5>
	  </div>
	  <div class="card-body p-0">
		<div class="table-responsive">
		  <table class="table table-hover table-striped mb-0">
			<thead>
			  <tr>
				<th><input type="checkbox" class="form-check-input"></th>
				<th>Name</th>
				<th>Category</th>
				<th class="text-center">Status</th>
				<th class="text-center">Actions</th>
			  </tr>
			</thead>
			<tbody>
			  <tr>
				<td><input type="checkbox" class="form-check-input"></td>
				<td>Item Name</td>
				<td><span class="badge bg-secondary">Category</span></td>
				<td class="text-center">
				  <span class="status-badge status-aman">
					<i class="fas fa-check-circle"></i> Active
				  </span>
				</td>
				<td class="text-center">
				  <div class="btn-group btn-group-sm">
					<a href="#" class="btn btn-outline-primary">
					  <i class="fas fa-eye"></i>
					</a>
					<a href="#" class="btn btn-outline-warning">
					  <i class="fas fa-edit"></i>
					</a>
					<a href="#" class="btn btn-outline-danger">
					  <i class="fas fa-trash"></i>
					</a>
				  </div>
				</td>
			  </tr>
			</tbody>
		  </table>
		</div>
	  </div>
	  <div class="card-footer text-muted">
		<small>Showing 1 of 100 items</small>
	  </div>
	</div>
  </div>
</div>
```

---

## Best Practices

### 1. Spacing

Use Bootstrap utilities for consistent spacing:

```html
<!-- Margin utilities -->
<div class="mb-4"><!-- margin-bottom: 1.5rem --></div>
<div class="mt-2"><!-- margin-top: 0.5rem --></div>
<div class="px-3"><!-- padding-left/right: 1rem --></div>

<!-- Gap utilities for flex -->
<div class="d-flex gap-2"><!-- gap: 0.5rem --></div>
<div class="d-flex gap-4"><!-- gap: 1.5rem --></div>
```

### 2. Responsive Grid

```html
<div class="row">
  <div class="col-12 col-md-6 col-lg-3">
	<!-- Full width on mobile, half on tablet, quarter on desktop -->
  </div>
</div>
```

### 3. Icons

Always use Font Awesome 6 with proper sizing:

```html
<i class="fas fa-plus"></i>              <!-- Default size -->
<i class="fas fa-plus fa-2x"></i>        <!-- 2x size -->
<i class="fas fa-plus fa-3x"></i>        <!-- 3x size -->

<!-- With margin utility -->
<i class="fas fa-search me-2"></i> Search  <!-- Right margin -->
```

### 4. Text Alignment

```html
<p class="text-start">Left aligned</p>
<p class="text-center">Center aligned</p>
<p class="text-end">Right aligned</p>
```

### 5. Text Colors

```html
<p class="text-primary">Primary color</p>
<p class="text-success">Success color</p>
<p class="text-warning">Warning color</p>
<p class="text-danger">Danger color</p>
<p class="text-muted">Muted color</p>
```

### 6. Flexbox Utilities

```html
<div class="d-flex justify-content-between align-items-center">
  <!-- Flex utilities for layout -->
</div>
```

### 7. Shadows

```html
<div class="shadow-sm"><!-- Light shadow --></div>
<div class="shadow"><!-- Normal shadow --></div>
<div class="shadow-lg"><!-- Large shadow --></div>
```

---

## JavaScript API

### EnterpriseLayout (layout.js)

```javascript
// Set active menu by controller/action
EnterpriseLayout.setActiveByRoute('Barang', 'Index');

// Programmatically open/close sidebar
EnterpriseLayout.openSidebar();
EnterpriseLayout.closeSidebar();
EnterpriseLayout.toggleSidebar();
```

### EnterpriseUI (enterprise-ui.js)

```javascript
// Show toast notification
EnterpriseUI.showToast('Item saved successfully', 'success');

// Validate form
EnterpriseUI.validateForm('myFormId');

// Format currency (Indonesian)
const formatted = EnterpriseUI.formatCurrency(1000000); // Rp1.000.000

// Format date (Indonesian)
const date = EnterpriseUI.formatDate(new Date()); // 1 Januari 2024 14:30

// Confirmation dialog
EnterpriseUI.confirm('Are you sure?', function() {
  // Action if confirmed
});

// State management
EnterpriseUI.setState('myKey', { data: 'value' });
const value = EnterpriseUI.getState('myKey');
EnterpriseUI.clearState('myKey');
```

---

## Troubleshooting

### Issue: Colors not appearing

**Solution:** Ensure CSS variables are declared in `:root`:
```css
:root {
  --enterprise-primary: #0052cc;
}
```

### Issue: Sidebar not responsive

**Solution:** Check that media query breakpoint is 992px (`lg` breakpoint).

### Issue: Buttons not styled

**Solution:** Use `.btn` base class + variant class (`.btn-primary`, etc.).

### Issue: Table truncated on mobile

**Solution:** Wrap table in `.table-responsive` div.

---

## Additional Resources

- **Bootstrap 5 Docs:** https://getbootstrap.com/docs/5.3/
- **Font Awesome 6:** https://fontawesome.com/
- **CSS Variables:** https://developer.mozilla.org/en-US/docs/Web/CSS/--*

---

**Document Version:** 1.0
**Last Updated:** 2024
**Status:** Production Ready