14 KiB
14 KiB
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)
<!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)
<!-- 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)
<!-- 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)
<!-- 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)
<!-- 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)
<!-- 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)
{% 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)
<!-- 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)
<!-- 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)
<!-- 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)
{% 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)
<!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
<!-- 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
<!-- 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)
/* 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.