917 lines
41 KiB
HTML
917 lines
41 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static %}
|
|
|
|
{% block title %}Inventory Reports - {{ block.super }}{% endblock %}
|
|
|
|
{% block css %}
|
|
<style>
|
|
.reports-header {
|
|
background: linear-gradient(135deg, #6f42c1 0%, #e83e8c 100%);
|
|
color: white;
|
|
border-radius: 10px;
|
|
padding: 30px;
|
|
margin-bottom: 30px;
|
|
}
|
|
.report-card {
|
|
background: white;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
margin: 15px 0;
|
|
border: 1px solid #dee2e6;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
transition: all 0.3s ease;
|
|
cursor: pointer;
|
|
}
|
|
.report-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
|
|
border-color: #007bff;
|
|
}
|
|
.report-icon {
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.5rem;
|
|
margin-right: 20px;
|
|
}
|
|
.icon-stock { background: #e3f2fd; color: #1976d2; }
|
|
.icon-valuation { background: #f3e5f5; color: #7b1fa2; }
|
|
.icon-movement { background: #e8f5e8; color: #388e3c; }
|
|
.icon-expiry { background: #fff3e0; color: #f57c00; }
|
|
.icon-supplier { background: #fce4ec; color: #c2185b; }
|
|
.icon-usage { background: #e0f2f1; color: #00796b; }
|
|
.icon-abc { background: #fff8e1; color: #f9a825; }
|
|
.icon-reorder { background: #ffebee; color: #d32f2f; }
|
|
.report-title {
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin-bottom: 10px;
|
|
}
|
|
.report-description {
|
|
color: #6c757d;
|
|
font-size: 0.9rem;
|
|
margin-bottom: 15px;
|
|
}
|
|
.report-stats {
|
|
display: flex;
|
|
gap: 15px;
|
|
margin-bottom: 15px;
|
|
}
|
|
.stat-item {
|
|
text-align: center;
|
|
}
|
|
.stat-value {
|
|
font-weight: bold;
|
|
color: #007bff;
|
|
font-size: 1.1rem;
|
|
}
|
|
.stat-label {
|
|
color: #6c757d;
|
|
font-size: 0.8rem;
|
|
}
|
|
.report-actions {
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
.filter-panel {
|
|
background: white;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
.quick-reports {
|
|
background: #f8f9fa;
|
|
border-radius: 8px;
|
|
padding: 15px;
|
|
margin: 20px 0;
|
|
}
|
|
.quick-report-btn {
|
|
margin: 5px;
|
|
border-radius: 20px;
|
|
}
|
|
.report-preview {
|
|
background: white;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
margin: 20px 0;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
.chart-container {
|
|
height: 300px;
|
|
margin: 20px 0;
|
|
background: #f8f9fa;
|
|
border-radius: 6px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #6c757d;
|
|
}
|
|
.data-table {
|
|
margin: 20px 0;
|
|
}
|
|
.data-table table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
.data-table th,
|
|
.data-table td {
|
|
padding: 12px;
|
|
text-align: left;
|
|
border-bottom: 1px solid #dee2e6;
|
|
}
|
|
.data-table th {
|
|
background: #f8f9fa;
|
|
font-weight: bold;
|
|
color: #495057;
|
|
}
|
|
.data-table tr:hover {
|
|
background: #f8f9fa;
|
|
}
|
|
.export-options {
|
|
background: white;
|
|
border-radius: 8px;
|
|
padding: 15px;
|
|
margin: 15px 0;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
.schedule-options {
|
|
background: #e3f2fd;
|
|
border: 1px solid #bbdefb;
|
|
border-radius: 6px;
|
|
padding: 15px;
|
|
margin: 15px 0;
|
|
}
|
|
.report-frequency {
|
|
display: flex;
|
|
gap: 15px;
|
|
margin: 10px 0;
|
|
}
|
|
.frequency-option {
|
|
flex: 1;
|
|
text-align: center;
|
|
padding: 10px;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
.frequency-option:hover,
|
|
.frequency-option.active {
|
|
background: #007bff;
|
|
color: white;
|
|
border-color: #007bff;
|
|
}
|
|
.report-category {
|
|
margin: 30px 0;
|
|
}
|
|
.category-title {
|
|
font-size: 1.2rem;
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin-bottom: 20px;
|
|
padding-bottom: 10px;
|
|
border-bottom: 2px solid #007bff;
|
|
}
|
|
.recent-reports {
|
|
background: white;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
margin: 20px 0;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
.recent-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 10px 0;
|
|
border-bottom: 1px solid #dee2e6;
|
|
}
|
|
.recent-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
.recent-info {
|
|
flex: 1;
|
|
}
|
|
.recent-name {
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
.recent-date {
|
|
color: #6c757d;
|
|
font-size: 0.9rem;
|
|
}
|
|
.recent-actions {
|
|
display: flex;
|
|
gap: 5px;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="content">
|
|
<div class="container-fluid">
|
|
<!-- Page Header -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="page-header">
|
|
<div class="page-title">
|
|
<h4><i class="fas fa-chart-bar"></i> Inventory Reports</h4>
|
|
<h6>Generate comprehensive inventory reports and analytics</h6>
|
|
</div>
|
|
<div class="page-btn">
|
|
<button class="btn btn-info me-2" data-bs-toggle="modal" data-bs-target="#customReportModal">
|
|
<i class="fas fa-plus"></i> Custom Report
|
|
</button>
|
|
<button class="btn btn-success me-2" id="scheduleReport">
|
|
<i class="fas fa-clock"></i> Schedule Report
|
|
</button>
|
|
<button class="btn btn-primary" id="viewHistory">
|
|
<i class="fas fa-history"></i> Report History
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Reports Header -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="reports-header">
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<h5><i class="fas fa-analytics"></i> Inventory Analytics Dashboard</h5>
|
|
<p>Generate detailed reports on stock levels, valuations, movements, and performance metrics</p>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="text-end">
|
|
<h6>Total Items: <span class="badge bg-light text-dark">2,847</span></h6>
|
|
<h6>Total Value: <span class="badge bg-light text-dark">$1,234,567</span></h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Reports -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="quick-reports">
|
|
<h6><i class="fas fa-bolt"></i> Quick Reports</h6>
|
|
<div class="d-flex flex-wrap">
|
|
<button class="btn btn-sm btn-outline-primary quick-report-btn" data-report="daily-summary">
|
|
<i class="fas fa-calendar-day"></i> Daily Summary
|
|
</button>
|
|
<button class="btn btn-sm btn-outline-success quick-report-btn" data-report="low-stock">
|
|
<i class="fas fa-exclamation-triangle"></i> Low Stock Alert
|
|
</button>
|
|
<button class="btn btn-sm btn-outline-warning quick-report-btn" data-report="expiring-items">
|
|
<i class="fas fa-clock"></i> Expiring Items
|
|
</button>
|
|
<button class="btn btn-sm btn-outline-info quick-report-btn" data-report="top-movers">
|
|
<i class="fas fa-arrow-up"></i> Top Moving Items
|
|
</button>
|
|
<button class="btn btn-sm btn-outline-secondary quick-report-btn" data-report="dead-stock">
|
|
<i class="fas fa-pause"></i> Dead Stock
|
|
</button>
|
|
<button class="btn btn-sm btn-outline-danger quick-report-btn" data-report="variance">
|
|
<i class="fas fa-balance-scale"></i> Stock Variance
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<!-- Report Categories -->
|
|
<div class="col-md-8">
|
|
<!-- Stock Reports -->
|
|
<div class="report-category">
|
|
<div class="category-title">
|
|
<i class="fas fa-boxes"></i> Stock Reports
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="report-card" data-report="stock-levels">
|
|
<div class="d-flex">
|
|
<div class="report-icon icon-stock">
|
|
<i class="fas fa-layer-group"></i>
|
|
</div>
|
|
<div class="flex-grow-1">
|
|
<div class="report-title">Current Stock Levels</div>
|
|
<div class="report-description">
|
|
Comprehensive overview of current inventory levels across all locations
|
|
</div>
|
|
<div class="report-stats">
|
|
<div class="stat-item">
|
|
<div class="stat-value">2,847</div>
|
|
<div class="stat-label">Total Items</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value">156</div>
|
|
<div class="stat-label">Low Stock</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value">23</div>
|
|
<div class="stat-label">Critical</div>
|
|
</div>
|
|
</div>
|
|
<div class="report-actions">
|
|
<button class="btn btn-sm btn-primary">Generate</button>
|
|
<button class="btn btn-sm btn-outline-secondary">Preview</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="report-card" data-report="stock-valuation">
|
|
<div class="d-flex">
|
|
<div class="report-icon icon-valuation">
|
|
<i class="fas fa-dollar-sign"></i>
|
|
</div>
|
|
<div class="flex-grow-1">
|
|
<div class="report-title">Stock Valuation Report</div>
|
|
<div class="report-description">
|
|
Financial valuation of inventory using FIFO, LIFO, or weighted average methods
|
|
</div>
|
|
<div class="report-stats">
|
|
<div class="stat-item">
|
|
<div class="stat-value">$1.2M</div>
|
|
<div class="stat-label">Total Value</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value">$45K</div>
|
|
<div class="stat-label">This Month</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value">+5.2%</div>
|
|
<div class="stat-label">Growth</div>
|
|
</div>
|
|
</div>
|
|
<div class="report-actions">
|
|
<button class="btn btn-sm btn-primary">Generate</button>
|
|
<button class="btn btn-sm btn-outline-secondary">Preview</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Movement Reports -->
|
|
<div class="report-category">
|
|
<div class="category-title">
|
|
<i class="fas fa-exchange-alt"></i> Movement Reports
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="report-card" data-report="stock-movement">
|
|
<div class="d-flex">
|
|
<div class="report-icon icon-movement">
|
|
<i class="fas fa-arrows-alt"></i>
|
|
</div>
|
|
<div class="flex-grow-1">
|
|
<div class="report-title">Stock Movement Analysis</div>
|
|
<div class="report-description">
|
|
Track inventory movements, receipts, issues, and transfers
|
|
</div>
|
|
<div class="report-stats">
|
|
<div class="stat-item">
|
|
<div class="stat-value">1,234</div>
|
|
<div class="stat-label">Transactions</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value">567</div>
|
|
<div class="stat-label">Issues</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value">89</div>
|
|
<div class="stat-label">Receipts</div>
|
|
</div>
|
|
</div>
|
|
<div class="report-actions">
|
|
<button class="btn btn-sm btn-primary">Generate</button>
|
|
<button class="btn btn-sm btn-outline-secondary">Preview</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="report-card" data-report="usage-analysis">
|
|
<div class="d-flex">
|
|
<div class="report-icon icon-usage">
|
|
<i class="fas fa-chart-line"></i>
|
|
</div>
|
|
<div class="flex-grow-1">
|
|
<div class="report-title">Usage Pattern Analysis</div>
|
|
<div class="report-description">
|
|
Analyze consumption patterns and forecast future requirements
|
|
</div>
|
|
<div class="report-stats">
|
|
<div class="stat-item">
|
|
<div class="stat-value">78%</div>
|
|
<div class="stat-label">Accuracy</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value">456</div>
|
|
<div class="stat-label">Fast Movers</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value">123</div>
|
|
<div class="stat-label">Slow Movers</div>
|
|
</div>
|
|
</div>
|
|
<div class="report-actions">
|
|
<button class="btn btn-sm btn-primary">Generate</button>
|
|
<button class="btn btn-sm btn-outline-secondary">Preview</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Compliance Reports -->
|
|
<div class="report-category">
|
|
<div class="category-title">
|
|
<i class="fas fa-shield-alt"></i> Compliance Reports
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="report-card" data-report="expiry-tracking">
|
|
<div class="d-flex">
|
|
<div class="report-icon icon-expiry">
|
|
<i class="fas fa-calendar-times"></i>
|
|
</div>
|
|
<div class="flex-grow-1">
|
|
<div class="report-title">Expiry Tracking Report</div>
|
|
<div class="report-description">
|
|
Monitor expiration dates and manage product lifecycle
|
|
</div>
|
|
<div class="report-stats">
|
|
<div class="stat-item">
|
|
<div class="stat-value">45</div>
|
|
<div class="stat-label">Expiring</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value">12</div>
|
|
<div class="stat-label">Expired</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value">$8.5K</div>
|
|
<div class="stat-label">At Risk</div>
|
|
</div>
|
|
</div>
|
|
<div class="report-actions">
|
|
<button class="btn btn-sm btn-primary">Generate</button>
|
|
<button class="btn btn-sm btn-outline-secondary">Preview</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="report-card" data-report="abc-analysis">
|
|
<div class="d-flex">
|
|
<div class="report-icon icon-abc">
|
|
<i class="fas fa-sort-alpha-down"></i>
|
|
</div>
|
|
<div class="flex-grow-1">
|
|
<div class="report-title">ABC Analysis Report</div>
|
|
<div class="report-description">
|
|
Categorize inventory based on value and importance
|
|
</div>
|
|
<div class="report-stats">
|
|
<div class="stat-item">
|
|
<div class="stat-value">285</div>
|
|
<div class="stat-label">Class A</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value">854</div>
|
|
<div class="stat-label">Class B</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value">1,708</div>
|
|
<div class="stat-label">Class C</div>
|
|
</div>
|
|
</div>
|
|
<div class="report-actions">
|
|
<button class="btn btn-sm btn-primary">Generate</button>
|
|
<button class="btn btn-sm btn-outline-secondary">Preview</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Supplier Reports -->
|
|
<div class="report-category">
|
|
<div class="category-title">
|
|
<i class="fas fa-handshake"></i> Supplier Reports
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="report-card" data-report="supplier-performance">
|
|
<div class="d-flex">
|
|
<div class="report-icon icon-supplier">
|
|
<i class="fas fa-building"></i>
|
|
</div>
|
|
<div class="flex-grow-1">
|
|
<div class="report-title">Supplier Performance</div>
|
|
<div class="report-description">
|
|
Evaluate supplier delivery times, quality, and reliability
|
|
</div>
|
|
<div class="report-stats">
|
|
<div class="stat-item">
|
|
<div class="stat-value">24</div>
|
|
<div class="stat-label">Suppliers</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value">92%</div>
|
|
<div class="stat-label">On-Time</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value">4.2</div>
|
|
<div class="stat-label">Avg Rating</div>
|
|
</div>
|
|
</div>
|
|
<div class="report-actions">
|
|
<button class="btn btn-sm btn-primary">Generate</button>
|
|
<button class="btn btn-sm btn-outline-secondary">Preview</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="report-card" data-report="reorder-points">
|
|
<div class="d-flex">
|
|
<div class="report-icon icon-reorder">
|
|
<i class="fas fa-redo"></i>
|
|
</div>
|
|
<div class="flex-grow-1">
|
|
<div class="report-title">Reorder Point Analysis</div>
|
|
<div class="report-description">
|
|
Optimize reorder points and safety stock levels
|
|
</div>
|
|
<div class="report-stats">
|
|
<div class="stat-item">
|
|
<div class="stat-value">156</div>
|
|
<div class="stat-label">Need Reorder</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value">23</div>
|
|
<div class="stat-label">Critical</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value">$45K</div>
|
|
<div class="stat-label">Order Value</div>
|
|
</div>
|
|
</div>
|
|
<div class="report-actions">
|
|
<button class="btn btn-sm btn-primary">Generate</button>
|
|
<button class="btn btn-sm btn-outline-secondary">Preview</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sidebar -->
|
|
<div class="col-md-4">
|
|
<!-- Export Options -->
|
|
<div class="export-options">
|
|
<h6><i class="fas fa-download"></i> Export Options</h6>
|
|
<div class="d-grid gap-2">
|
|
<button class="btn btn-sm btn-outline-success">
|
|
<i class="fas fa-file-excel"></i> Export to Excel
|
|
</button>
|
|
<button class="btn btn-sm btn-outline-danger">
|
|
<i class="fas fa-file-pdf"></i> Export to PDF
|
|
</button>
|
|
<button class="btn btn-sm btn-outline-info">
|
|
<i class="fas fa-file-csv"></i> Export to CSV
|
|
</button>
|
|
<button class="btn btn-sm btn-outline-secondary">
|
|
<i class="fas fa-print"></i> Print Report
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Schedule Options -->
|
|
<div class="schedule-options">
|
|
<h6><i class="fas fa-clock"></i> Schedule Reports</h6>
|
|
<p>Automatically generate and email reports</p>
|
|
<div class="report-frequency">
|
|
<div class="frequency-option active">Daily</div>
|
|
<div class="frequency-option">Weekly</div>
|
|
<div class="frequency-option">Monthly</div>
|
|
</div>
|
|
<div class="form-group mb-3">
|
|
<label>Email Recipients</label>
|
|
<input type="email" class="form-control" placeholder="Enter email addresses">
|
|
</div>
|
|
<button class="btn btn-sm btn-primary w-100">
|
|
<i class="fas fa-calendar-plus"></i> Schedule Report
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Recent Reports -->
|
|
<div class="recent-reports">
|
|
<h6><i class="fas fa-history"></i> Recent Reports</h6>
|
|
<div class="recent-item">
|
|
<div class="recent-info">
|
|
<div class="recent-name">Stock Levels Report</div>
|
|
<div class="recent-date">Generated 2 hours ago</div>
|
|
</div>
|
|
<div class="recent-actions">
|
|
<button class="btn btn-sm btn-outline-primary">
|
|
<i class="fas fa-eye"></i>
|
|
</button>
|
|
<button class="btn btn-sm btn-outline-success">
|
|
<i class="fas fa-download"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="recent-item">
|
|
<div class="recent-info">
|
|
<div class="recent-name">Expiry Tracking</div>
|
|
<div class="recent-date">Generated yesterday</div>
|
|
</div>
|
|
<div class="recent-actions">
|
|
<button class="btn btn-sm btn-outline-primary">
|
|
<i class="fas fa-eye"></i>
|
|
</button>
|
|
<button class="btn btn-sm btn-outline-success">
|
|
<i class="fas fa-download"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="recent-item">
|
|
<div class="recent-info">
|
|
<div class="recent-name">ABC Analysis</div>
|
|
<div class="recent-date">Generated 3 days ago</div>
|
|
</div>
|
|
<div class="recent-actions">
|
|
<button class="btn btn-sm btn-outline-primary">
|
|
<i class="fas fa-eye"></i>
|
|
</button>
|
|
<button class="btn btn-sm btn-outline-success">
|
|
<i class="fas fa-download"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="recent-item">
|
|
<div class="recent-info">
|
|
<div class="recent-name">Supplier Performance</div>
|
|
<div class="recent-date">Generated 1 week ago</div>
|
|
</div>
|
|
<div class="recent-actions">
|
|
<button class="btn btn-sm btn-outline-primary">
|
|
<i class="fas fa-eye"></i>
|
|
</button>
|
|
<button class="btn btn-sm btn-outline-success">
|
|
<i class="fas fa-download"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Report Preview -->
|
|
<div class="report-preview" style="display: none;">
|
|
<h6><i class="fas fa-eye"></i> Report Preview</h6>
|
|
<div class="chart-container">
|
|
<i class="fas fa-chart-bar fa-3x"></i><br>
|
|
Chart Preview Area
|
|
</div>
|
|
<div class="data-table">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Item</th>
|
|
<th>Stock</th>
|
|
<th>Value</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Sample Item 1</td>
|
|
<td>150</td>
|
|
<td>$1,500</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Sample Item 2</td>
|
|
<td>75</td>
|
|
<td>$750</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Custom Report Modal -->
|
|
<div class="modal fade" id="customReportModal" tabindex="-1">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title"><i class="fas fa-plus"></i> Create Custom Report</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-group mb-3">
|
|
<label>Report Name</label>
|
|
<input type="text" class="form-control" placeholder="Enter report name">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group mb-3">
|
|
<label>Report Type</label>
|
|
<select class="form-control">
|
|
<option>Stock Analysis</option>
|
|
<option>Financial Report</option>
|
|
<option>Movement Analysis</option>
|
|
<option>Compliance Report</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-group mb-3">
|
|
<label>Date Range</label>
|
|
<select class="form-control">
|
|
<option>Last 7 days</option>
|
|
<option>Last 30 days</option>
|
|
<option>Last 3 months</option>
|
|
<option>Custom range</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group mb-3">
|
|
<label>Location Filter</label>
|
|
<select class="form-control" multiple>
|
|
<option>Main Warehouse</option>
|
|
<option>Pharmacy</option>
|
|
<option>Emergency Department</option>
|
|
<option>ICU</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group mb-3">
|
|
<label>Include Fields</label>
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="includeStock" checked>
|
|
<label class="form-check-label" for="includeStock">Stock Levels</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="includeValue" checked>
|
|
<label class="form-check-label" for="includeValue">Valuation</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="includeMovement">
|
|
<label class="form-check-label" for="includeMovement">Movement Data</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="includeExpiry">
|
|
<label class="form-check-label" for="includeExpiry">Expiry Dates</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="includeSupplier">
|
|
<label class="form-check-label" for="includeSupplier">Supplier Info</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="includeCategory">
|
|
<label class="form-check-label" for="includeCategory">Categories</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-info">Preview Report</button>
|
|
<button type="button" class="btn btn-primary">Generate Report</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block js %}
|
|
<script>
|
|
$(document).ready(function() {
|
|
// Report card clicks
|
|
$('.report-card').click(function() {
|
|
var reportType = $(this).data('report');
|
|
$('.report-preview').show();
|
|
console.log('Generating report:', reportType);
|
|
});
|
|
|
|
// Quick report buttons
|
|
$('.quick-report-btn').click(function() {
|
|
var reportType = $(this).data('report');
|
|
alert('Generating ' + reportType + ' report...');
|
|
});
|
|
|
|
// Generate buttons
|
|
$('.report-actions .btn-primary').click(function(e) {
|
|
e.stopPropagation();
|
|
var reportCard = $(this).closest('.report-card');
|
|
var reportType = reportCard.data('report');
|
|
alert('Generating ' + reportType + ' report...');
|
|
});
|
|
|
|
// Preview buttons
|
|
$('.report-actions .btn-outline-secondary').click(function(e) {
|
|
e.stopPropagation();
|
|
$('.report-preview').show();
|
|
});
|
|
|
|
// Export buttons
|
|
$('.export-options .btn').click(function() {
|
|
var format = $(this).text().trim();
|
|
alert('Exporting report as ' + format + '...');
|
|
});
|
|
|
|
// Frequency selection
|
|
$('.frequency-option').click(function() {
|
|
$('.frequency-option').removeClass('active');
|
|
$(this).addClass('active');
|
|
});
|
|
|
|
// Schedule report
|
|
$('#scheduleReport, .schedule-options .btn-primary').click(function() {
|
|
var frequency = $('.frequency-option.active').text();
|
|
var email = $('.schedule-options input[type="email"]').val();
|
|
|
|
if (!email) {
|
|
alert('Please enter email address for scheduled reports');
|
|
return;
|
|
}
|
|
|
|
alert('Report scheduled for ' + frequency.toLowerCase() + ' delivery to ' + email);
|
|
});
|
|
|
|
// View history
|
|
$('#viewHistory').click(function() {
|
|
alert('Opening report history...');
|
|
});
|
|
|
|
// Recent report actions
|
|
$('.recent-actions .btn-outline-primary').click(function() {
|
|
alert('Opening report preview...');
|
|
});
|
|
|
|
$('.recent-actions .btn-outline-success').click(function() {
|
|
alert('Downloading report...');
|
|
});
|
|
|
|
// Custom report modal
|
|
$('#customReportModal .btn-info').click(function() {
|
|
alert('Generating custom report preview...');
|
|
});
|
|
|
|
$('#customReportModal .btn-primary').click(function() {
|
|
var reportName = $('#customReportModal input[type="text"]').val();
|
|
if (!reportName) {
|
|
alert('Please enter a report name');
|
|
return;
|
|
}
|
|
|
|
alert('Generating custom report: ' + reportName);
|
|
$('#customReportModal').modal('hide');
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %}
|
|
|