486 lines
14 KiB
Markdown
486 lines
14 KiB
Markdown
# Base Templates and Navigation Plan for Django Manufacturing App
|
|
|
|
## Overview
|
|
This document outlines the base template structure and navigation design for the manufacturing application, ensuring a consistent and user-friendly interface across all modules.
|
|
|
|
## Base Template Structure
|
|
|
|
### 1. Main Base Template (templates/base.html)
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{% block title %}Manufacturing App{% endblock %}</title>
|
|
|
|
<!-- Bootstrap CSS -->
|
|
{% load bootstrap5 %}
|
|
{% bootstrap_css %}
|
|
{% bootstrap_javascript %}
|
|
|
|
<!-- Custom CSS -->
|
|
<link rel="stylesheet" href="{% static 'css/custom.css' %}">
|
|
|
|
{% block extra_css %}{% endblock %}
|
|
</head>
|
|
<body>
|
|
<!-- Navigation Bar -->
|
|
{% include 'includes/navbar.html' %}
|
|
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<!-- Sidebar -->
|
|
{% include 'includes/sidebar.html' %}
|
|
|
|
<!-- Main Content -->
|
|
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
|
|
<!-- Breadcrumb -->
|
|
{% include 'includes/breadcrumb.html' %}
|
|
|
|
<!-- Messages -->
|
|
{% include 'includes/messages.html' %}
|
|
|
|
<!-- Page Content -->
|
|
{% block content %}
|
|
{% endblock %}
|
|
</main>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
{% include 'includes/footer.html' %}
|
|
|
|
<!-- Scripts -->
|
|
<script src="{% static 'js/custom.js' %}"></script>
|
|
{% block extra_js %}{% endblock %}
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
### 2. Navigation Bar (templates/includes/navbar.html)
|
|
```html
|
|
<!-- Navigation Bar -->
|
|
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
|
|
<div class="container-fluid">
|
|
<a class="navbar-brand" href="{% url 'dashboard:home' %}">
|
|
<i class="fas fa-industry"></i> Manufacturing App
|
|
</a>
|
|
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
|
|
<div class="collapse navbar-collapse" id="navbarNav">
|
|
<ul class="navbar-nav me-auto">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="{% url 'dashboard:home' %}">Dashboard</a>
|
|
</li>
|
|
<!-- Other top-level navigation items -->
|
|
</ul>
|
|
|
|
<ul class="navbar-nav">
|
|
{% if user.is_authenticated %}
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button"
|
|
data-bs-toggle="dropdown">
|
|
<i class="fas fa-user"></i> {{ user.get_full_name|default:user.username }}
|
|
</a>
|
|
<ul class="dropdown-menu dropdown-menu-end">
|
|
<li><a class="dropdown-item" href="{% url 'accounts:profile' %}">Profile</a></li>
|
|
<li><hr class="dropdown-divider"></li>
|
|
<li><a class="dropdown-item" href="{% url 'accounts:logout' %}">Logout</a></li>
|
|
</ul>
|
|
</li>
|
|
{% else %}
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="{% url 'accounts:login' %}">Login</a>
|
|
</li>
|
|
{% endif %}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
```
|
|
|
|
### 3. Sidebar Navigation (templates/includes/sidebar.html)
|
|
```html
|
|
<!-- Sidebar -->
|
|
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
|
|
<div class="position-sticky pt-3">
|
|
<ul class="nav flex-column">
|
|
<!-- Dashboard -->
|
|
<li class="nav-item">
|
|
<a class="nav-link {% if request.resolver_match.app_name == 'dashboard' %}active{% endif %}"
|
|
href="{% url 'dashboard:home' %}">
|
|
<i class="fas fa-home"></i>
|
|
Dashboard
|
|
</a>
|
|
</li>
|
|
|
|
<!-- User Management (Only for users with permission) -->
|
|
{% if perms.accounts.view_user %}
|
|
<li class="nav-item">
|
|
<a class="nav-link {% if request.resolver_match.app_name == 'accounts' %}active{% endif %}"
|
|
href="{% url 'accounts:user_list' %}">
|
|
<i class="fas fa-users"></i>
|
|
User Management
|
|
</a>
|
|
</li>
|
|
{% endif %}
|
|
|
|
<!-- Inventory Management -->
|
|
{% if perms.inventory.view_product %}
|
|
<li class="nav-item">
|
|
<a class="nav-link {% if request.resolver_match.app_name == 'inventory' %}active{% endif %}"
|
|
href="{% url 'inventory:dashboard' %}">
|
|
<i class="fas fa-boxes"></i>
|
|
Inventory
|
|
</a>
|
|
</li>
|
|
{% endif %}
|
|
|
|
<!-- Purchasing -->
|
|
{% if perms.purchasing.view_purchaseorder %}
|
|
<li class="nav-item">
|
|
<a class="nav-link {% if request.resolver_match.app_name == 'purchasing' %}active{% endif %}"
|
|
href="{% url 'purchasing:dashboard' %}">
|
|
<i class="fas fa-shopping-cart"></i>
|
|
Purchasing
|
|
</a>
|
|
</li>
|
|
{% endif %}
|
|
|
|
<!-- Sales -->
|
|
{% if perms.sales.view_salesorder %}
|
|
<li class="nav-item">
|
|
<a class="nav-link {% if request.resolver_match.app_name == 'sales' %}active{% endif %}"
|
|
href="{% url 'sales:dashboard' %}">
|
|
<i class="fas fa-dollar-sign"></i>
|
|
Sales
|
|
</a>
|
|
</li>
|
|
{% endif %}
|
|
|
|
<!-- Manufacturing -->
|
|
{% if perms.manufacturing.view_manufacturingorder %}
|
|
<li class="nav-item">
|
|
<a class="nav-link {% if request.resolver_match.app_name == 'manufacturing' %}active{% endif %}"
|
|
href="{% url 'manufacturing:dashboard' %}">
|
|
<i class="fas fa-cogs"></i>
|
|
Manufacturing
|
|
</a>
|
|
</li>
|
|
{% endif %}
|
|
|
|
<!-- Reports -->
|
|
{% if perms.reports.view_report %}
|
|
<li class="nav-item">
|
|
<a class="nav-link {% if request.resolver_match.app_name == 'reports' %}active{% endif %}"
|
|
href="{% url 'reports:dashboard' %}">
|
|
<i class="fas fa-chart-bar"></i>
|
|
Reports
|
|
</a>
|
|
</li>
|
|
{% endif %}
|
|
|
|
<!-- Database Management (Superuser only) -->
|
|
{% if user.is_superuser %}
|
|
<li class="nav-item">
|
|
<a class="nav-link {% if request.resolver_match.app_name == 'database_management' %}active{% endif %}"
|
|
href="{% url 'database_management:dashboard' %}">
|
|
<i class="fas fa-database"></i>
|
|
Database
|
|
</a>
|
|
</li>
|
|
{% endif %}
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
```
|
|
|
|
### 4. Breadcrumb Navigation (templates/includes/breadcrumb.html)
|
|
```html
|
|
<!-- Breadcrumb -->
|
|
<nav aria-label="breadcrumb" class="mb-3">
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item">
|
|
<a href="{% url 'dashboard:home' %}">Home</a>
|
|
</li>
|
|
{% block breadcrumbs %}
|
|
<!-- Breadcrumbs will be added by individual pages -->
|
|
{% endblock %}
|
|
</ol>
|
|
</nav>
|
|
```
|
|
|
|
### 5. Messages Template (templates/includes/messages.html)
|
|
```html
|
|
<!-- Messages -->
|
|
{% if messages %}
|
|
<div class="container">
|
|
{% for message in messages %}
|
|
<div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
|
|
{{ message }}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
```
|
|
|
|
### 6. Footer Template (templates/includes/footer.html)
|
|
```html
|
|
<!-- Footer -->
|
|
<footer class="footer mt-auto py-3 bg-light">
|
|
<div class="container">
|
|
<span class="text-muted">
|
|
© {% now "Y" %} Manufacturing App. All rights reserved.
|
|
</span>
|
|
</div>
|
|
</footer>
|
|
```
|
|
|
|
## Module-specific Base Templates
|
|
|
|
### 7. Module Dashboard Template (templates/module_base.html)
|
|
```html
|
|
{% extends 'base.html' %}
|
|
|
|
{% block title %}{{ module_title }} - Manufacturing App{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
|
|
<h1 class="h2">{{ module_title }}</h1>
|
|
<div class="btn-toolbar mb-2 mb-md-0">
|
|
{% block module_actions %}
|
|
<!-- Module-specific actions will be added here -->
|
|
{% endblock %}
|
|
</div>
|
|
</div>
|
|
|
|
{% block module_content %}
|
|
<!-- Module-specific content will be added here -->
|
|
{% endblock %}
|
|
|
|
{% endblock %}
|
|
```
|
|
|
|
## Common UI Components
|
|
|
|
### 8. Table Component (templates/components/table.html)
|
|
```html
|
|
<!-- Reusable Table Component -->
|
|
<div class="table-responsive">
|
|
<table class="table table-striped table-hover">
|
|
<thead class="table-dark">
|
|
<tr>
|
|
{% for header in headers %}
|
|
<th>{{ header }}</th>
|
|
{% endfor %}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for row in rows %}
|
|
<tr>
|
|
{% for cell in row %}
|
|
<td>{{ cell }}</td>
|
|
{% endfor %}
|
|
</tr>
|
|
{% empty %}
|
|
<tr>
|
|
<td colspan="{{ headers|length }}" class="text-center">No data available</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
```
|
|
|
|
### 9. Form Component (templates/components/form.html)
|
|
```html
|
|
<!-- Reusable Form Component -->
|
|
<form method="post" {% if form_action %}action="{{ form_action }}"{% endif %}
|
|
{% if form_enctype %}enctype="{{ form_enctype }}"{% endif %}>
|
|
{% csrf_token %}
|
|
|
|
{% if form.non_field_errors %}
|
|
<div class="alert alert-danger">
|
|
{{ form.non_field_errors }}
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% for field in form %}
|
|
<div class="mb-3">
|
|
{{ field.label_tag }}
|
|
{{ field }}
|
|
{% if field.help_text %}
|
|
<div class="form-text">{{ field.help_text }}</div>
|
|
{% endif %}
|
|
{% if field.errors %}
|
|
<div class="text-danger">{{ field.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
|
|
<div class="mb-3">
|
|
<button type="submit" class="btn btn-primary">{{ submit_button_text|default:"Submit" }}</button>
|
|
<a href="{{ cancel_url|default:"#" }}" class="btn btn-secondary">Cancel</a>
|
|
</div>
|
|
</form>
|
|
```
|
|
|
|
### 10. Card Component (templates/components/card.html)
|
|
```html
|
|
<!-- Reusable Card Component -->
|
|
<div class="card">
|
|
{% if card_header %}
|
|
<div class="card-header">
|
|
<h5 class="card-title mb-0">{{ card_header }}</h5>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="card-body">
|
|
{% if card_title %}
|
|
<h5 class="card-title">{{ card_title }}</h5>
|
|
{% endif %}
|
|
|
|
{% if card_subtitle %}
|
|
<h6 class="card-subtitle mb-2 text-muted">{{ card_subtitle }}</h6>
|
|
{% endif %}
|
|
|
|
{% block card_content %}
|
|
{{ card_content }}
|
|
{% endblock %}
|
|
</div>
|
|
|
|
{% if card_footer %}
|
|
<div class="card-footer">
|
|
{{ card_footer }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
```
|
|
|
|
## Print-friendly Templates
|
|
|
|
### 11. Printable Dashboard Template (templates/dashboard/print.html)
|
|
```html
|
|
{% extends 'base_print.html' %}
|
|
|
|
{% block title %}Dashboard - Manufacturing App{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="print-header">
|
|
<h1>Manufacturing Dashboard</h1>
|
|
<p>Printed on: {% now "d M Y H:i" %}</p>
|
|
</div>
|
|
|
|
<div class="dashboard-widgets">
|
|
{% for widget in widgets %}
|
|
<div class="widget-print">
|
|
<h3>{{ widget.title }}</h3>
|
|
<!-- Widget content for printing -->
|
|
{{ widget.content|safe }}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<div class="print-footer">
|
|
<p>Manufacturing App - Confidential</p>
|
|
</div>
|
|
{% endblock %}
|
|
```
|
|
|
|
### 12. Print Base Template (templates/base_print.html)
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{% block title %}Manufacturing App{% endblock %}</title>
|
|
|
|
<!-- Print-specific CSS -->
|
|
<link rel="stylesheet" href="{% static 'css/print.css' %}" media="print">
|
|
<link rel="stylesheet" href="{% static 'css/print-screen.css' %}" media="screen">
|
|
</head>
|
|
<body>
|
|
{% block content %}
|
|
{% endblock %}
|
|
|
|
<script>
|
|
// Auto-print when page loads
|
|
window.onload = function() {
|
|
window.print();
|
|
};
|
|
</script>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
## Responsive Design Considerations
|
|
|
|
### 13. Mobile Navigation
|
|
```html
|
|
<!-- Mobile-friendly navigation adjustments -->
|
|
<!-- In sidebar.html, we already use Bootstrap's responsive classes -->
|
|
<!-- Additional mobile-specific adjustments can be made in custom CSS -->
|
|
```
|
|
|
|
## Accessibility Features
|
|
|
|
### 14. ARIA Labels and Semantic HTML
|
|
```html
|
|
<!-- Example of accessibility improvements -->
|
|
<nav aria-label="Main navigation" id="sidebarMenu">
|
|
<!-- Navigation content -->
|
|
</nav>
|
|
|
|
<main aria-label="Main content" class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
|
|
<!-- Main content -->
|
|
</main>
|
|
```
|
|
|
|
## Custom CSS Structure
|
|
|
|
### 15. Custom CSS File (static/css/custom.css)
|
|
```css
|
|
/* Custom styles for the manufacturing app */
|
|
|
|
/* Sidebar styling */
|
|
.sidebar {
|
|
min-height: calc(100vh - 56px);
|
|
}
|
|
|
|
/* Dashboard widgets */
|
|
.dashboard-widget {
|
|
min-height: 200px;
|
|
}
|
|
|
|
/* Print styles */
|
|
@media print {
|
|
.no-print {
|
|
display: none !important;
|
|
}
|
|
|
|
.sidebar {
|
|
display: none;
|
|
}
|
|
|
|
main {
|
|
width: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
/* Responsive adjustments */
|
|
@media (max-width: 768px) {
|
|
.sidebar {
|
|
min-height: auto;
|
|
}
|
|
}
|
|
```
|
|
|
|
This base template structure provides a consistent, responsive, and accessible UI framework for the manufacturing application. It includes all necessary components for navigation, content display, and user interaction while maintaining a professional appearance. |