flowbroker wip
This commit is contained in:
timurgordon
File diff suppressed because it is too large
Load Diff
411
actix_mvc_app/src/views/flows/index copy.html
Normal file
411
actix_mvc_app/src/views/flows/index copy.html
Normal file
@@ -0,0 +1,411 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Flows Dashboard{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<!-- Navigation Tabs -->
|
||||
<div class="row mb-3">
|
||||
<div class="col-12">
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="/flows">Dashboard</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/flows/list">All Workflows</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/flows/my-flows">My Workflows</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/flows/create">Create Workflow</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Info Alert -->
|
||||
<div class="row mb-3">
|
||||
<div class="col-12">
|
||||
<div class="alert alert-info alert-dismissible fade show">
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
||||
<h5><i class="bi bi-info-circle"></i> About Workflows</h5>
|
||||
<p>The workflow system helps you track and manage business processes across your organization. Create new workflows, monitor progress, and collaborate with team members to ensure smooth operations.</p>
|
||||
<div class="mt-2">
|
||||
<a href="/flows/documentation" class="btn btn-sm btn-outline-primary"><i class="bi bi-book"></i> Read Documentation</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dashboard Main Content -->
|
||||
<div class="row mb-4">
|
||||
<!-- Workflows with Pending Actions -->
|
||||
<div class="col-lg-9 mb-4">
|
||||
<div class="card h-100">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<h5 class="mb-0">Workflows with Pending Actions</h5>
|
||||
<div>
|
||||
<a href="/flows/pending" class="btn btn-sm btn-outline-primary">View All Pending</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{% if flows and flows|length > 0 %}
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover align-middle">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Workflow</th>
|
||||
<th>Type</th>
|
||||
<th>Current Step</th>
|
||||
<th>Last Updated</th>
|
||||
<th>Owner</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for flow in flows %}
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-shrink-0 me-2">
|
||||
<div class="avatar bg-light text-primary rounded p-2">
|
||||
<i class="bi bi-diagram-3"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<a href="/flows/{{ flow.id }}" class="text-decoration-none fw-medium">{{ flow.name }}</a>
|
||||
<div class="small text-muted">ID: {{ flow.id }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge bg-info">{{ flow.flow_type }}</span></td>
|
||||
<td>
|
||||
{% if flow.current_step %}
|
||||
<span class="text-warning fw-medium">{{ flow.current_step.name }}</span>
|
||||
<div class="small text-muted">{{ flow.current_step.description }}</div>
|
||||
{% else %}
|
||||
<span class="text-muted">No pending step</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
<span>{{ flow.updated_at | date(format="%Y-%m-%d") }}</span>
|
||||
{% if flow.status == 'Stuck' %}
|
||||
<div class="small text-danger">May need attention</div>
|
||||
{% else %}
|
||||
<div class="small text-muted">Last updated</div>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-shrink-0 me-2">
|
||||
<div class="avatar avatar-sm">
|
||||
<img src="{{ flow.owner_avatar or '/static/img/avatar-placeholder.png' }}" alt="{{ flow.owner_name }}" class="rounded-circle" onerror="this.src='/static/img/avatar-placeholder.png'; this.onerror='';">
|
||||
</div>
|
||||
</div>
|
||||
<div>{{ flow.owner_name }}</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="d-flex gap-2">
|
||||
<a href="/flows/{{ flow.id }}#take-action" class="btn btn-sm btn-primary">Take Action</a>
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<i class="bi bi-three-dots"></i>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="/flows/{{ flow.id }}">View Details</a></li>
|
||||
<li><a class="dropdown-item" href="/flows/{{ flow.id }}/reassign">Reassign</a></li>
|
||||
<li><a class="dropdown-item" href="/flows/{{ flow.id }}/extend">Extend Deadline</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="text-center py-5">
|
||||
<i class="bi bi-check-circle-fill fs-1 text-success mb-3"></i>
|
||||
<h5>No Pending Actions</h5>
|
||||
<p class="text-muted">There are no workflows that require your immediate attention.</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Timeline of Recent Flow Steps -->
|
||||
<div class="col-lg-3 mb-4">
|
||||
<div class="card h-100">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<h5 class="mb-0">Recent Activity</h5>
|
||||
<a href="/flows/activity" class="btn btn-sm btn-outline-primary">View All</a>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
{% if flows and flows|length > 0 %}
|
||||
<div class="list-group list-group-flush">
|
||||
{% set count = 0 %}
|
||||
{% for flow in flows %}
|
||||
{% if count < 8 %}
|
||||
{% set count = count + 1 %}
|
||||
<div class="list-group-item border-start-0 border-end-0 py-3">
|
||||
<div class="d-flex">
|
||||
<div class="me-3">
|
||||
<div class="timeline-icon bg-light text-{% if flow.status == 'Completed' %}success{% elif flow.status == 'Stuck' %}danger{% else %}primary{% endif %} rounded-circle p-2">
|
||||
<i class="bi bi-{% if flow.status == 'Completed' %}check-circle{% elif flow.status == 'Stuck' %}exclamation-triangle{% else %}arrow-right-circle{% endif %} fs-5"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-fill">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div class="fw-medium">
|
||||
{% if flow.status == 'In Progress' %}Working on{% elif flow.status == 'Completed' %}Completed{% elif flow.status == 'Stuck' %}Stuck at{% else %}Updated{% endif %}
|
||||
{% if flow.current_step %} {{ flow.current_step.name }}{% endif %}
|
||||
</div>
|
||||
<div class="text-muted small">{{ flow.updated_at | date(format="%H:%M") }}</div>
|
||||
</div>
|
||||
<div>in <a href="/flows/{{ flow.id }}" class="text-decoration-none">{{ flow.name }}</a></div>
|
||||
<div class="text-muted small mt-1">by {{ flow.owner_name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="card-footer text-center">
|
||||
<a href="/flows/activity" class="btn btn-sm btn-outline-secondary">View Full Activity Log</a>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="list-group list-group-flush">
|
||||
<div class="list-group-item border-start-0 border-end-0 py-5 text-center">
|
||||
<i class="bi bi-hourglass fs-1 text-muted mb-3"></i>
|
||||
<h6>No Recent Activity</h6>
|
||||
<p class="text-muted small mb-0">Activity will appear here as workflows progress.</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Compact Filter Controls -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<h5 class="mb-0">Workflow Filters</h5>
|
||||
<button class="btn btn-sm btn-outline-primary" type="button" data-bs-toggle="collapse" data-bs-target="#filterCollapse" aria-expanded="false" aria-controls="filterCollapse">
|
||||
<i class="bi bi-funnel"></i> Show/Hide Filters
|
||||
</button>
|
||||
</div>
|
||||
<div class="collapse show" id="filterCollapse">
|
||||
<div class="card-body">
|
||||
<form class="row g-3" action="/flows" method="get">
|
||||
<div class="col-md-3">
|
||||
<label for="status" class="form-label">Status</label>
|
||||
<select class="form-select" id="status" name="status">
|
||||
<option value="all" selected>All</option>
|
||||
<option value="in_progress">In Progress</option>
|
||||
<option value="completed">Completed</option>
|
||||
<option value="stuck">Stuck</option>
|
||||
<option value="cancelled">Cancelled</option>
|
||||
</select>
|
||||
</div>
|
||||
<!-- Freezone filter - for UI demonstration only -->
|
||||
<div class="col-md-3">
|
||||
<label for="freezone" class="form-label">Freezone</label>
|
||||
<select class="form-select" id="freezone" name="freezone" disabled>
|
||||
<option value="all" selected>All Freezones</option>
|
||||
<option value="dubai_multi_commodities_centre">DMCC</option>
|
||||
<option value="dubai_international_financial_centre">DIFC</option>
|
||||
<option value="jebel_ali_free_zone">JAFZA</option>
|
||||
<option value="dubai_silicon_oasis">DSO</option>
|
||||
<option value="dubai_internet_city">DIC</option>
|
||||
<option value="dubai_media_city">DMC</option>
|
||||
<option value="abu_dhabi_global_market">ADGM</option>
|
||||
</select>
|
||||
<div class="form-text">Coming soon</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label for="type" class="form-label">Workflow Type</label>
|
||||
<select class="form-select" id="type" name="type">
|
||||
<option value="all" selected>All</option>
|
||||
<option value="company_registration">Company Incorporation</option>
|
||||
<option value="user_onboarding">KYC Verification</option>
|
||||
<option value="service_activation">License Activation</option>
|
||||
<option value="payment_processing">Payment Processing</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label for="search" class="form-label">Search</label>
|
||||
<input type="text" class="form-control" id="search" name="search" placeholder="Search workflows...">
|
||||
</div>
|
||||
<div class="col-12 text-end">
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="bi bi-filter me-1"></i> Apply Filters
|
||||
</button>
|
||||
<a href="/flows" class="btn btn-outline-secondary">
|
||||
<i class="bi bi-x-circle me-1"></i> Clear Filters
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Recent Active Workflows Section -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<h5 class="mb-0">Active Workflows (Recent Updates)</h5>
|
||||
<a href="/flows/list" class="btn btn-sm btn-outline-primary">View All</a>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
{% set count = 0 %}
|
||||
{% for flow in flows %}
|
||||
{% if count < 3 and flow.status == 'In Progress' %}
|
||||
<div class="col-md-4 mb-3">
|
||||
<div class="card h-100">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">{{ flow.name }}</h5>
|
||||
<h6 class="card-subtitle mb-2 text-muted">Owner: {{ flow.owner_name }}</h6>
|
||||
<div class="mb-3">
|
||||
<span class="badge bg-primary">{{ flow.flow_type }}</span>
|
||||
</div>
|
||||
<p class="mb-2">Current stage:
|
||||
{% set current = flow.current_step %}
|
||||
{% if current %}
|
||||
{{ current.name }}
|
||||
{% else %}
|
||||
<span class="text-muted">No active stage</span>
|
||||
{% endif %}
|
||||
</p>
|
||||
<div class="progress mb-2" style="height: 20px;">
|
||||
<div class="progress-bar bg-primary" role="progressbar"
|
||||
style="width: {{ flow.progress_percentage }}%;"
|
||||
aria-valuenow="{{ flow.progress_percentage }}"
|
||||
aria-valuemin="0" aria-valuemax="100">{{ flow.progress_percentage }}%</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between align-items-center mt-3">
|
||||
<small class="text-muted">Updated: {{ flow.updated_at | date(format="%Y-%m-%d") }}</small>
|
||||
<a href="/flows/{{ flow.id }}" class="btn btn-sm btn-outline-primary">View Details</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% set count = count + 1 %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% if count == 0 %}
|
||||
<div class="col-12 text-center py-4">
|
||||
<i class="bi bi-clipboard-check fs-1 text-muted mb-3"></i>
|
||||
<h5>No active workflows</h5>
|
||||
<p class="text-muted">All workflows are either completed or not yet started.</p>
|
||||
<a href="/flows/create" class="btn btn-primary mt-3">Create New Workflow</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Flows Table (Simplified) -->
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<h5 class="mb-0">Recent Workflows</h5>
|
||||
<a href="/flows/list" class="btn btn-sm btn-outline-primary">View All Workflows</a>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{% if flows|length > 0 %}
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Workflow Name</th>
|
||||
<th>Type</th>
|
||||
<th>Status</th>
|
||||
<th>Assignee</th>
|
||||
<th>Progress</th>
|
||||
<th>Initiated</th>
|
||||
<th>Last Updated</th>
|
||||
<th>Current Stage</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for flow in flows %}
|
||||
<tr>
|
||||
<td>
|
||||
<a href="/flows/{{ flow.id }}">{{ flow.name }}</a>
|
||||
</td>
|
||||
<td>{{ flow.flow_type }}</td>
|
||||
<td>
|
||||
<span
|
||||
class="badge {% if flow.status == 'In Progress' %}bg-primary{% elif flow.status == 'Completed' %}bg-success{% elif flow.status == 'Stuck' %}bg-danger{% else %}bg-secondary{% endif %}">
|
||||
{{ flow.status }}
|
||||
</span>
|
||||
</td>
|
||||
<td>{{ flow.owner_name }}</td>
|
||||
<td>
|
||||
<div class="progress mb-2" style="height: 20px;">
|
||||
<div class="progress-bar {% if flow.status == 'Completed' %}bg-success{% elif flow.status == 'Stuck' %}bg-danger{% else %}bg-primary{% endif %}"
|
||||
role="progressbar" style="width: {{ flow.progress_percentage }}%;"
|
||||
aria-valuenow="{{ flow.progress_percentage }}" aria-valuemin="0"
|
||||
aria-valuemax="100">{{ flow.progress_percentage }}%</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>{{ flow.created_at | date(format="%Y-%m-%d") }}</td>
|
||||
<td>{{ flow.updated_at | date(format="%Y-%m-%d") }}</td>
|
||||
<td>
|
||||
{% set current = flow.current_step %}
|
||||
{% if current %}
|
||||
{{ current.name }}
|
||||
{% else %}
|
||||
{% if flow.status == 'Completed' %}
|
||||
<span class="text-success">All stages completed</span>
|
||||
{% elif flow.status == 'Cancelled' %}
|
||||
<span class="text-secondary">Workflow cancelled</span>
|
||||
{% else %}
|
||||
<span class="text-muted">No active stage</span>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
<div class="btn-group">
|
||||
<a href="/flows/{{ flow.id }}" class="btn btn-sm btn-primary" title="View Details">
|
||||
<i class="bi bi-eye"></i>
|
||||
</a>
|
||||
{% if flow.status == 'In Progress' %}
|
||||
<a href="/flows/{{ flow.id }}#advance" class="btn btn-sm btn-success" title="Advance to Next Stage">
|
||||
<i class="bi bi-arrow-right"></i>
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="text-center py-4">
|
||||
<i class="bi bi-search display-1 text-muted"></i>
|
||||
<p class="lead mt-3">No workflows found matching your criteria.</p>
|
||||
<p class="text-muted">Try adjusting your filters or create a new workflow.</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
@@ -3,122 +3,188 @@
|
||||
{% block title %}Flows Dashboard{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="row mb-4">
|
||||
<div class="col-md-8">
|
||||
<h1 class="display-5 mb-4">Flows Dashboard</h1>
|
||||
<p class="lead">Track and manage workflow processes across the organization.</p>
|
||||
</div>
|
||||
<div class="col-md-4 text-md-end">
|
||||
<a href="/flows/create" class="btn btn-primary">
|
||||
<i class="bi bi-plus-circle me-1"></i> Create New Workflow
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Statistics Cards -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-md-3 mb-3">
|
||||
<div class="card text-white bg-primary h-100">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Total Flows</h5>
|
||||
<p class="display-4">{{ stats.total_flows }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 mb-3">
|
||||
<div class="card text-white bg-success h-100">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">In Progress</h5>
|
||||
<p class="display-4">{{ stats.in_progress_flows }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 mb-3">
|
||||
<div class="card text-white bg-danger h-100">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Stuck</h5>
|
||||
<p class="display-4">{{ stats.stuck_flows }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 mb-3">
|
||||
<div class="card text-white bg-info h-100">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Completed</h5>
|
||||
<p class="display-4">{{ stats.completed_flows }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filter Controls -->
|
||||
<div class="row mb-4">
|
||||
<!-- Navigation Tabs -->
|
||||
<div class="row mb-3">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">Filter Workflows</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form class="row g-3" action="/flows" method="get">
|
||||
<div class="col-md-3">
|
||||
<label for="status" class="form-label">Status</label>
|
||||
<select class="form-select" id="status" name="status">
|
||||
<option value="all" selected>All</option>
|
||||
<option value="in_progress">In Progress</option>
|
||||
<option value="completed">Completed</option>
|
||||
<option value="stuck">Stuck</option>
|
||||
<option value="cancelled">Cancelled</option>
|
||||
</select>
|
||||
</div>
|
||||
<!-- Freezone filter - for UI demonstration only -->
|
||||
<div class="col-md-3">
|
||||
<label for="freezone" class="form-label">Freezone</label>
|
||||
<select class="form-select" id="freezone" name="freezone" disabled>
|
||||
<option value="all" selected>All Freezones</option>
|
||||
<option value="dubai_multi_commodities_centre">DMCC</option>
|
||||
<option value="dubai_international_financial_centre">DIFC</option>
|
||||
<option value="jebel_ali_free_zone">JAFZA</option>
|
||||
<option value="dubai_silicon_oasis">DSO</option>
|
||||
<option value="dubai_internet_city">DIC</option>
|
||||
<option value="dubai_media_city">DMC</option>
|
||||
<option value="abu_dhabi_global_market">ADGM</option>
|
||||
</select>
|
||||
<div class="form-text">Coming soon</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label for="type" class="form-label">Workflow Type</label>
|
||||
<select class="form-select" id="type" name="type">
|
||||
<option value="all" selected>All</option>
|
||||
<option value="company_registration">Company Incorporation</option>
|
||||
<option value="user_onboarding">KYC Verification</option>
|
||||
<option value="service_activation">License Activation</option>
|
||||
<option value="payment_processing">Payment Processing</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label for="search" class="form-label">Search</label>
|
||||
<input type="text" class="form-control" id="search" name="search" placeholder="Search workflows...">
|
||||
</div>
|
||||
<div class="col-12 text-end">
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="bi bi-filter me-1"></i> Apply Filters
|
||||
</button>
|
||||
<a href="/flows" class="btn btn-outline-secondary">
|
||||
<i class="bi bi-x-circle me-1"></i> Clear Filters
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="/flows">Dashboard</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/flows/list">All Workflows</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/flows/my-flows">My Workflows</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/flows/create">Create Workflow</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Info Alert -->
|
||||
<div class="row mb-3">
|
||||
<div class="col-12">
|
||||
<div class="alert alert-info alert-dismissible fade show">
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
||||
<h5><i class="bi bi-info-circle"></i> About Workflows</h5>
|
||||
<p>The workflow system helps you track and manage business processes across your organization. Create new workflows, monitor progress, and collaborate with team members to ensure smooth operations.</p>
|
||||
<div class="mt-2">
|
||||
<a href="/flows/documentation" class="btn btn-sm btn-outline-primary"><i class="bi bi-book"></i> Read Documentation</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Flows Table -->
|
||||
<!-- Dashboard Main Content -->
|
||||
<div class="row mb-4">
|
||||
<!-- Workflows with Pending Actions -->
|
||||
<div class="col-lg-9 mb-4">
|
||||
<div class="card h-100">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<h5 class="mb-0">Workflows with Pending Actions</h5>
|
||||
<div>
|
||||
<a href="/flows/pending" class="btn btn-sm btn-outline-primary">View All Pending</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{% if flows and flows|length > 0 %}
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover align-middle">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Workflow</th>
|
||||
<th>Type</th>
|
||||
<th>Current Step</th>
|
||||
<th>Last Updated</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for flow in flows %}
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-shrink-0 me-2">
|
||||
<div class="avatar bg-light text-primary rounded p-2">
|
||||
<i class="bi bi-diagram-3"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<a href="/flows/{{ flow.id }}" class="text-decoration-none fw-medium">{{ flow.name }}</a>
|
||||
<div class="small text-muted">ID: {{ flow.id }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge bg-info">{{ flow.flow_type }}</span></td>
|
||||
<td>
|
||||
{% if flow.current_step %}
|
||||
<span class="text-warning fw-medium">{{ flow.current_step.name }}</span>
|
||||
<div class="small text-muted">{{ flow.current_step.description }}</div>
|
||||
{% else %}
|
||||
<span class="text-muted">No pending step</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
<span>{{ flow.updated_at | date(format="%Y-%m-%d") }}</span>
|
||||
{% if flow.status == 'Stuck' %}
|
||||
<div class="small text-danger">May need attention</div>
|
||||
{% else %}
|
||||
<div class="small text-muted">Last updated</div>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
<div class="d-flex gap-2">
|
||||
<a href="/flows/{{ flow.id }}#take-action" class="btn btn-sm btn-primary">Take Action</a>
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<i class="bi bi-three-dots"></i>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="/flows/{{ flow.id }}">View Details</a></li>
|
||||
<li><a class="dropdown-item" href="/flows/{{ flow.id }}/reassign">Reassign</a></li>
|
||||
<li><a class="dropdown-item" href="/flows/{{ flow.id }}/extend">Extend Deadline</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="text-center py-5">
|
||||
<i class="bi bi-check-circle-fill fs-1 text-success mb-3"></i>
|
||||
<h5>No Pending Actions</h5>
|
||||
<p class="text-muted">There are no workflows that require your immediate attention.</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Timeline of Recent Flow Steps -->
|
||||
<div class="col-lg-3 mb-4">
|
||||
<div class="card h-100">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<h5 class="mb-0">Recent Activity</h5>
|
||||
<a href="/flows/activity" class="btn btn-sm btn-outline-primary">View All</a>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
{% if flows and flows|length > 0 %}
|
||||
<div class="list-group list-group-flush">
|
||||
{% set count = 0 %}
|
||||
{% for flow in flows %}
|
||||
{% if count < 8 %}
|
||||
{% set count = count + 1 %}
|
||||
<div class="list-group-item border-start-0 border-end-0 py-3">
|
||||
<div class="d-flex">
|
||||
<div class="me-3">
|
||||
<div class="timeline-icon bg-light text-{% if flow.status == 'Completed' %}success{% elif flow.status == 'Stuck' %}danger{% else %}primary{% endif %} rounded-circle p-2">
|
||||
<i class="bi bi-{% if flow.status == 'Completed' %}check-circle{% elif flow.status == 'Stuck' %}exclamation-triangle{% else %}arrow-right-circle{% endif %} fs-5"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-fill">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div class="fw-medium">
|
||||
{% if flow.status == 'In Progress' %}Working on{% elif flow.status == 'Completed' %}Completed{% elif flow.status == 'Stuck' %}Stuck at{% else %}Updated{% endif %}
|
||||
{% if flow.current_step %} {{ flow.current_step.name }}{% endif %}
|
||||
</div>
|
||||
<div class="text-muted small">{{ flow.updated_at | date(format="%H:%M") }}</div>
|
||||
</div>
|
||||
<div>in <a href="/flows/{{ flow.id }}" class="text-decoration-none">{{ flow.name }}</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="card-footer text-center">
|
||||
<a href="/flows/activity" class="btn btn-sm btn-outline-secondary">View Full Activity Log</a>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="list-group list-group-flush">
|
||||
<div class="list-group-item border-start-0 border-end-0 py-5 text-center">
|
||||
<i class="bi bi-hourglass fs-1 text-muted mb-3"></i>
|
||||
<h6>No Recent Activity</h6>
|
||||
<p class="text-muted small mb-0">Activity will appear here as workflows progress.</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Flows Table (Simplified) -->
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">All Workflows</h5>
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<h5 class="mb-0">Recent Workflows</h5>
|
||||
<a href="/flows/list" class="btn btn-sm btn-outline-primary">View All Workflows</a>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{% if flows|length > 0 %}
|
||||
@@ -129,7 +195,6 @@
|
||||
<th>Workflow Name</th>
|
||||
<th>Type</th>
|
||||
<th>Status</th>
|
||||
<th>Assignee</th>
|
||||
<th>Progress</th>
|
||||
<th>Initiated</th>
|
||||
<th>Last Updated</th>
|
||||
@@ -150,7 +215,6 @@
|
||||
{{ flow.status }}
|
||||
</span>
|
||||
</td>
|
||||
<td>{{ flow.owner_name }}</td>
|
||||
<td>
|
||||
<div class="progress mb-2" style="height: 20px;">
|
||||
<div class="progress-bar {% if flow.status == 'Completed' %}bg-success{% elif flow.status == 'Stuck' %}bg-danger{% else %}bg-primary{% endif %}"
|
||||
|
||||
Reference in New Issue
Block a user