implement contracts
This commit is contained in:
Timur Gordon
@@ -64,6 +64,11 @@
|
||||
<i class="bi bi-diagram-3 me-2"></i> Flows
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center ps-3 py-2 {% if active_page == 'contracts' %}active fw-bold border-start border-4 border-primary bg-light{% endif %}" href="/contracts">
|
||||
<i class="bi bi-file-earmark-text me-2"></i> Contracts
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center ps-3 py-2 {% if active_page == 'editor' %}active fw-bold border-start border-4 border-primary bg-light{% endif %}" href="/editor">
|
||||
<i class="bi bi-markdown me-2"></i> Markdown Editor
|
||||
|
||||
340
actix_mvc_app/src/views/contracts/contract_detail.html
Normal file
340
actix_mvc_app/src/views/contracts/contract_detail.html
Normal file
@@ -0,0 +1,340 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Contract Details{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container">
|
||||
<div class="row mb-4">
|
||||
<div class="col-12">
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="/contracts">Contracts Dashboard</a></li>
|
||||
<li class="breadcrumb-item"><a href="/contracts/list">All Contracts</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Contract Details</li>
|
||||
</ol>
|
||||
</nav>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<h1 class="display-5 mb-0">{{ contract.title }}</h1>
|
||||
<div class="btn-group">
|
||||
<a href="/contracts/list" class="btn btn-outline-secondary">
|
||||
<i class="bi bi-arrow-left me-1"></i> Back to List
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Contract Overview -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-md-8">
|
||||
<div class="card h-100">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">Contract Overview</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-3 fw-bold">Status:</div>
|
||||
<div class="col-md-9">
|
||||
<span class="badge {% if contract.status == 'Signed' %}bg-success{% elif contract.status == 'PendingSignatures' %}bg-warning text-dark{% elif contract.status == 'Draft' %}bg-secondary{% elif contract.status == 'Expired' %}bg-danger{% else %}bg-dark{% endif %}">
|
||||
{{ contract.status }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-3 fw-bold">Type:</div>
|
||||
<div class="col-md-9">{{ contract.contract_type }}</div>
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-3 fw-bold">Created By:</div>
|
||||
<div class="col-md-9">{{ contract.created_by }}</div>
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-3 fw-bold">Created:</div>
|
||||
<div class="col-md-9">{{ contract.created_at }}</div>
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-3 fw-bold">Last Updated:</div>
|
||||
<div class="col-md-9">{{ contract.updated_at }}</div>
|
||||
</div>
|
||||
{% if contract.effective_date %}
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-3 fw-bold">Effective Date:</div>
|
||||
<div class="col-md-9">{{ contract.effective_date }}</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if contract.expiration_date %}
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-3 fw-bold">Expiration Date:</div>
|
||||
<div class="col-md-9">{{ contract.expiration_date }}</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-3 fw-bold">Version:</div>
|
||||
<div class="col-md-9">{{ contract.current_version }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3 fw-bold">Description:</div>
|
||||
<div class="col-md-9">{{ contract.description }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card h-100">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">Actions</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="d-grid gap-2">
|
||||
{% if contract.status == 'Draft' %}
|
||||
<a href="/contracts/{{ contract.id }}/edit" class="btn btn-primary">
|
||||
<i class="bi bi-pencil me-1"></i> Edit Contract
|
||||
</a>
|
||||
<a href="/contracts/{{ contract.id }}/send" class="btn btn-success">
|
||||
<i class="bi bi-send me-1"></i> Send for Signatures
|
||||
</a>
|
||||
<button class="btn btn-danger">
|
||||
<i class="bi bi-trash me-1"></i> Delete Contract
|
||||
</button>
|
||||
{% elif contract.status == 'PendingSignatures' %}
|
||||
<button class="btn btn-success">
|
||||
<i class="bi bi-pen me-1"></i> Sign Contract
|
||||
</button>
|
||||
<button class="btn btn-warning">
|
||||
<i class="bi bi-x-circle me-1"></i> Reject Contract
|
||||
</button>
|
||||
<button class="btn btn-secondary">
|
||||
<i class="bi bi-send me-1"></i> Resend Invitations
|
||||
</button>
|
||||
{% elif contract.status == 'Signed' %}
|
||||
<button class="btn btn-primary">
|
||||
<i class="bi bi-download me-1"></i> Download Contract
|
||||
</button>
|
||||
<button class="btn btn-outline-secondary">
|
||||
<i class="bi bi-files me-1"></i> Clone Contract
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Contract Content -->
|
||||
<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">Contract Content</h5>
|
||||
{% if contract.revisions|length > 1 %}
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" id="versionDropdown" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Version {{ contract.current_version }}
|
||||
</button>
|
||||
<ul class="dropdown-menu" aria-labelledby="versionDropdown">
|
||||
{% for revision in contract.revisions %}
|
||||
<li><a class="dropdown-item" href="/contracts/{{ contract.id }}?version={{ revision.version }}">Version {{ revision.version }}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{% if contract.revisions|length > 0 %}
|
||||
{% set latest_revision = contract.latest_revision %}
|
||||
<div class="contract-content border p-3 bg-light">
|
||||
{{ latest_revision.content|safe }}
|
||||
</div>
|
||||
<div class="mt-3 text-muted small">
|
||||
<p>Last updated by {{ latest_revision.created_by }} on {{ latest_revision.created_at }}</p>
|
||||
{% if latest_revision.comments %}
|
||||
<p><strong>Comments:</strong> {{ latest_revision.comments }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="text-center py-3 text-muted">
|
||||
<p>No content has been added to this contract yet.</p>
|
||||
{% if contract.status == 'Draft' %}
|
||||
<a href="/contracts/{{ contract.id }}/edit" class="btn btn-sm btn-primary">
|
||||
<i class="bi bi-pencil me-1"></i> Add Content
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Signers -->
|
||||
<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">Signers</h5>
|
||||
{% if contract.status == 'Draft' %}
|
||||
<button class="btn btn-sm btn-primary">
|
||||
<i class="bi bi-plus me-1"></i> Add Signer
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{% if contract.signers|length > 0 %}
|
||||
<div class="table-responsive">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Email</th>
|
||||
<th>Status</th>
|
||||
<th>Signed Date</th>
|
||||
<th>Comments</th>
|
||||
{% if contract.status == 'Draft' %}
|
||||
<th>Actions</th>
|
||||
{% endif %}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for signer in contract.signers %}
|
||||
<tr>
|
||||
<td>{{ signer.name }}</td>
|
||||
<td>{{ signer.email }}</td>
|
||||
<td>
|
||||
<span class="badge {% if signer.status == 'Signed' %}bg-success{% elif signer.status == 'Rejected' %}bg-danger{% else %}bg-warning text-dark{% endif %}">
|
||||
{{ signer.status }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
{% if signer.signed_at %}
|
||||
{{ signer.signed_at }}
|
||||
{% else %}
|
||||
-
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
{% if signer.comments %}
|
||||
{{ signer.comments }}
|
||||
{% else %}
|
||||
-
|
||||
{% endif %}
|
||||
</td>
|
||||
{% if contract.status == 'Draft' %}
|
||||
<td>
|
||||
<button class="btn btn-sm btn-outline-danger">
|
||||
<i class="bi bi-trash"></i>
|
||||
</button>
|
||||
</td>
|
||||
{% endif %}
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="text-center py-3 text-muted">
|
||||
<p>No signers have been added to this contract yet.</p>
|
||||
{% if contract.status == 'Draft' %}
|
||||
<button class="btn btn-sm btn-primary">
|
||||
<i class="bi bi-plus me-1"></i> Add Signer
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Contract Revisions -->
|
||||
<div class="card mt-4">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">Contract Revisions</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{% if contract.revisions|length > 0 %}
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Version</th>
|
||||
<th>Date</th>
|
||||
<th>Notes</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for revision in contract.revisions %}
|
||||
<tr>
|
||||
<td>{{ revision.version }}</td>
|
||||
<td>{{ revision.created_at }}</td>
|
||||
<td>{{ revision.notes }}</td>
|
||||
<td>
|
||||
<a href="/contracts/{{ contract.id }}/revisions/{{ revision.version }}" class="btn btn-sm btn-primary">
|
||||
<i class="bi bi-eye"></i> View
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% else %}
|
||||
<p class="text-muted">No revisions available.</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Revision History -->
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">Revision History</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{% if contract.revisions|length > 0 %}
|
||||
<div class="table-responsive">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Version</th>
|
||||
<th>Created By</th>
|
||||
<th>Created Date</th>
|
||||
<th>Comments</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for revision in contract.revisions|reverse %}
|
||||
<tr>
|
||||
<td>{{ revision.version }}</td>
|
||||
<td>{{ revision.created_by }}</td>
|
||||
<td>{{ revision.created_at }}</td>
|
||||
<td>
|
||||
{% if revision.comments %}
|
||||
{{ revision.comments }}
|
||||
{% else %}
|
||||
-
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
<a href="/contracts/{{ contract.id }}?version={{ revision.version }}" class="btn btn-sm btn-outline-secondary">
|
||||
<i class="bi bi-eye"></i>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="text-center py-3 text-muted">
|
||||
<p>No revisions have been made to this contract yet.</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
140
actix_mvc_app/src/views/contracts/contracts.html
Normal file
140
actix_mvc_app/src/views/contracts/contracts.html
Normal file
@@ -0,0 +1,140 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}All Contracts{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container">
|
||||
<div class="row mb-4">
|
||||
<div class="col-12">
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="/contracts">Contracts Dashboard</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">All Contracts</li>
|
||||
</ol>
|
||||
</nav>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<h1 class="display-5 mb-0">All Contracts</h1>
|
||||
<div class="btn-group">
|
||||
<a href="/contracts/create" class="btn btn-primary">
|
||||
<i class="bi bi-plus-circle me-1"></i> Create New Contract
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filters -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">Filters</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form action="/contracts/list" method="get" class="row g-3">
|
||||
<div class="col-md-3">
|
||||
<label for="status" class="form-label">Status</label>
|
||||
<select class="form-select" id="status" name="status">
|
||||
<option value="">All Statuses</option>
|
||||
<option value="Draft">Draft</option>
|
||||
<option value="PendingSignatures">Pending Signatures</option>
|
||||
<option value="Signed">Signed</option>
|
||||
<option value="Expired">Expired</option>
|
||||
<option value="Cancelled">Cancelled</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label for="type" class="form-label">Contract Type</label>
|
||||
<select class="form-select" id="type" name="type">
|
||||
<option value="">All Types</option>
|
||||
<option value="Service">Service Agreement</option>
|
||||
<option value="Employment">Employment Contract</option>
|
||||
<option value="NDA">Non-Disclosure Agreement</option>
|
||||
<option value="SLA">Service Level Agreement</option>
|
||||
<option value="Other">Other</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 by title or description">
|
||||
</div>
|
||||
<div class="col-md-3 d-flex align-items-end">
|
||||
<button type="submit" class="btn btn-primary w-100">Apply Filters</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Contract List -->
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">Contracts</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{% if contracts and contracts | length > 0 %}
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Contract Title</th>
|
||||
<th>Type</th>
|
||||
<th>Status</th>
|
||||
<th>Created By</th>
|
||||
<th>Signers</th>
|
||||
<th>Created</th>
|
||||
<th>Updated</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for contract in contracts %}
|
||||
<tr>
|
||||
<td>
|
||||
<a href="/contracts/{{ contract.id }}">{{ contract.title }}</a>
|
||||
</td>
|
||||
<td>{{ contract.contract_type }}</td>
|
||||
<td>
|
||||
<span class="badge {% if contract.status == 'Signed' %}bg-success{% elif contract.status == 'PendingSignatures' %}bg-warning text-dark{% elif contract.status == 'Draft' %}bg-secondary{% elif contract.status == 'Expired' %}bg-danger{% else %}bg-dark{% endif %}">
|
||||
{{ contract.status }}
|
||||
</span>
|
||||
</td>
|
||||
<td>{{ contract.created_by }}</td>
|
||||
<td>{{ contract.signed_signers }}/{{ contract.signers|length }}</td>
|
||||
<td>{{ contract.created_at | date(format="%Y-%m-%d") }}</td>
|
||||
<td>{{ contract.updated_at | date(format="%Y-%m-%d") }}</td>
|
||||
<td>
|
||||
<div class="btn-group">
|
||||
<a href="/contracts/{{ contract.id }}" class="btn btn-sm btn-primary">
|
||||
<i class="bi bi-eye"></i>
|
||||
</a>
|
||||
{% if contract.status == 'Draft' %}
|
||||
<a href="/contracts/{{ contract.id }}/edit" class="btn btn-sm btn-outline-secondary">
|
||||
<i class="bi bi-pencil"></i>
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="text-center py-5">
|
||||
<i class="bi bi-file-earmark-text fs-1 text-muted"></i>
|
||||
<p class="mt-3 text-muted">No contracts found</p>
|
||||
<a href="/contracts/create" class="btn btn-primary mt-2">
|
||||
<i class="bi bi-plus-circle me-1"></i> Create New Contract
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
166
actix_mvc_app/src/views/contracts/create_contract.html
Normal file
166
actix_mvc_app/src/views/contracts/create_contract.html
Normal file
@@ -0,0 +1,166 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Create New Contract{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container">
|
||||
<div class="row mb-4">
|
||||
<div class="col-12">
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="/contracts">Contracts Dashboard</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Create New Contract</li>
|
||||
</ol>
|
||||
</nav>
|
||||
<h1 class="display-5 mb-3">Create New Contract</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-8">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">Contract Details</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form action="/contracts/create" method="post">
|
||||
<div class="mb-3">
|
||||
<label for="title" class="form-label">Contract Title <span class="text-danger">*</span></label>
|
||||
<input type="text" class="form-control" id="title" name="title" required>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="contract_type" class="form-label">Contract Type <span class="text-danger">*</span></label>
|
||||
<select class="form-select" id="contract_type" name="contract_type" required>
|
||||
<option value="" selected disabled>Select a contract type</option>
|
||||
{% for type in contract_types %}
|
||||
<option value="{{ type }}">{{ type }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="description" class="form-label">Description <span class="text-danger">*</span></label>
|
||||
<textarea class="form-control" id="description" name="description" rows="3" required></textarea>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="content" class="form-label">Contract Content</label>
|
||||
<textarea class="form-control" id="content" name="content" rows="10"></textarea>
|
||||
<div class="form-text">You can leave this blank and add content later.</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="effective_date" class="form-label">Effective Date</label>
|
||||
<input type="date" class="form-control" id="effective_date" name="effective_date">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="expiration_date" class="form-label">Expiration Date</label>
|
||||
<input type="date" class="form-control" id="expiration_date" name="expiration_date">
|
||||
</div>
|
||||
|
||||
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
|
||||
<a href="/contracts" class="btn btn-outline-secondary me-md-2">Cancel</a>
|
||||
<button type="submit" class="btn btn-primary">Create Contract</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4">
|
||||
<div class="card mb-4">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">Tips</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>Creating a new contract is just the first step. After creating the contract, you'll be able to:</p>
|
||||
<ul>
|
||||
<li>Add signers who need to approve the contract</li>
|
||||
<li>Edit the contract content</li>
|
||||
<li>Send the contract for signatures</li>
|
||||
<li>Track the signing progress</li>
|
||||
</ul>
|
||||
<p>The contract will be in <strong>Draft</strong> status until you send it for signatures.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">Contract Templates</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>You can use one of our pre-defined templates to get started quickly:</p>
|
||||
<div class="list-group">
|
||||
<button type="button" class="list-group-item list-group-item-action" onclick="loadTemplate('nda')">
|
||||
Non-Disclosure Agreement
|
||||
</button>
|
||||
<button type="button" class="list-group-item list-group-item-action" onclick="loadTemplate('service')">
|
||||
Service Agreement
|
||||
</button>
|
||||
<button type="button" class="list-group-item list-group-item-action" onclick="loadTemplate('employment')">
|
||||
Employment Contract
|
||||
</button>
|
||||
<button type="button" class="list-group-item list-group-item-action" onclick="loadTemplate('sla')">
|
||||
Service Level Agreement
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<script>
|
||||
function loadTemplate(type) {
|
||||
// In a real application, this would load template content from the server
|
||||
let title = '';
|
||||
let description = '';
|
||||
let content = '';
|
||||
let contractType = '';
|
||||
|
||||
switch(type) {
|
||||
case 'nda':
|
||||
title = 'Non-Disclosure Agreement';
|
||||
description = 'Standard NDA for protecting confidential information';
|
||||
contractType = 'Non-Disclosure Agreement';
|
||||
content = 'This Non-Disclosure Agreement (the "Agreement") is entered into as of [DATE] by and between [PARTY A] and [PARTY B].\n\n1. Definition of Confidential Information\n2. Obligations of Receiving Party\n3. Term\n...';
|
||||
break;
|
||||
case 'service':
|
||||
title = 'Service Agreement';
|
||||
description = 'Agreement for providing professional services';
|
||||
contractType = 'Service Agreement';
|
||||
content = 'This Service Agreement (the "Agreement") is made and entered into as of [DATE] by and between [SERVICE PROVIDER] and [CLIENT].\n\n1. Services to be Provided\n2. Compensation\n3. Term and Termination\n...';
|
||||
break;
|
||||
case 'employment':
|
||||
title = 'Employment Contract';
|
||||
description = 'Standard employment agreement';
|
||||
contractType = 'Employment Contract';
|
||||
content = 'This Employment Agreement (the "Agreement") is made and entered into as of [DATE] by and between [EMPLOYER] and [EMPLOYEE].\n\n1. Position and Duties\n2. Compensation and Benefits\n3. Term and Termination\n...';
|
||||
break;
|
||||
case 'sla':
|
||||
title = 'Service Level Agreement';
|
||||
description = 'Agreement defining service levels and metrics';
|
||||
contractType = 'Service Level Agreement';
|
||||
content = 'This Service Level Agreement (the "SLA") is made and entered into as of [DATE] by and between [SERVICE PROVIDER] and [CLIENT].\n\n1. Service Levels\n2. Performance Metrics\n3. Remedies for Failure\n...';
|
||||
break;
|
||||
}
|
||||
|
||||
document.getElementById('title').value = title;
|
||||
document.getElementById('description').value = description;
|
||||
document.getElementById('content').value = content;
|
||||
|
||||
// Set the select option
|
||||
const selectElement = document.getElementById('contract_type');
|
||||
for(let i = 0; i < selectElement.options.length; i++) {
|
||||
if(selectElement.options[i].text === contractType) {
|
||||
selectElement.selectedIndex = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
187
actix_mvc_app/src/views/contracts/index.html
Normal file
187
actix_mvc_app/src/views/contracts/index.html
Normal file
@@ -0,0 +1,187 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Contracts Dashboard{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container">
|
||||
<div class="row mb-4">
|
||||
<div class="col-12">
|
||||
<h1 class="display-5 mb-3">Contracts Dashboard</h1>
|
||||
<p class="lead">Manage legal agreements and contracts across your organization.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Statistics Cards -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-md-2 mb-3">
|
||||
<div class="card text-white bg-primary h-100">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Total</h5>
|
||||
<p class="display-4">{{ stats.total_contracts }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2 mb-3">
|
||||
<div class="card text-white bg-secondary h-100">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Draft</h5>
|
||||
<p class="display-4">{{ stats.draft_contracts }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2 mb-3">
|
||||
<div class="card text-white bg-warning h-100">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Pending</h5>
|
||||
<p class="display-4">{{ stats.pending_signature_contracts }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2 mb-3">
|
||||
<div class="card text-white bg-success h-100">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Signed</h5>
|
||||
<p class="display-4">{{ stats.signed_contracts }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2 mb-3">
|
||||
<div class="card text-white bg-danger h-100">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Expired</h5>
|
||||
<p class="display-4">{{ stats.expired_contracts }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2 mb-3">
|
||||
<div class="card text-white bg-dark h-100">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Cancelled</h5>
|
||||
<p class="display-4">{{ stats.cancelled_contracts }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Actions -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">Quick Actions</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<a href="/contracts/create" class="btn btn-primary">
|
||||
<i class="bi bi-plus-circle me-1"></i> Create New Contract
|
||||
</a>
|
||||
<a href="/contracts/list" class="btn btn-outline-secondary">
|
||||
<i class="bi bi-list me-1"></i> View All Contracts
|
||||
</a>
|
||||
<a href="/contracts/my-contracts" class="btn btn-outline-secondary">
|
||||
<i class="bi bi-person me-1"></i> My Contracts
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pending Signature Contracts -->
|
||||
{% if pending_signature_contracts and pending_signature_contracts | length > 0 %}
|
||||
<div class="row mb-4">
|
||||
<div class="col-12">
|
||||
<div class="card border-warning">
|
||||
<div class="card-header bg-warning text-dark">
|
||||
<h5 class="mb-0">Pending Signature ({{ pending_signature_contracts|length }})</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Contract Title</th>
|
||||
<th>Type</th>
|
||||
<th>Created By</th>
|
||||
<th>Pending Signers</th>
|
||||
<th>Created</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for contract in pending_signature_contracts %}
|
||||
<tr>
|
||||
<td>
|
||||
<a href="/contracts/{{ contract.id }}">{{ contract.title }}</a>
|
||||
</td>
|
||||
<td>{{ contract.contract_type }}</td>
|
||||
<td>{{ contract.created_by }}</td>
|
||||
<td>{{ contract.pending_signers }} of {{ contract.signers|length }}</td>
|
||||
<td>{{ contract.created_at | date(format="%Y-%m-%d") }}</td>
|
||||
<td>
|
||||
<a href="/contracts/{{ contract.id }}" class="btn btn-sm btn-primary">
|
||||
<i class="bi bi-eye"></i>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Draft Contracts -->
|
||||
{% if draft_contracts and draft_contracts | length > 0 %}
|
||||
<div class="row mb-4">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">Draft Contracts</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Contract Title</th>
|
||||
<th>Type</th>
|
||||
<th>Created By</th>
|
||||
<th>Created</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for contract in draft_contracts %}
|
||||
<tr>
|
||||
<td>
|
||||
<a href="/contracts/{{ contract.id }}">{{ contract.title }}</a>
|
||||
</td>
|
||||
<td>{{ contract.contract_type }}</td>
|
||||
<td>{{ contract.created_by }}</td>
|
||||
<td>{{ contract.created_at | date(format="%Y-%m-%d") }}</td>
|
||||
<td>
|
||||
<div class="btn-group">
|
||||
<a href="/contracts/{{ contract.id }}" class="btn btn-sm btn-primary">
|
||||
<i class="bi bi-eye"></i>
|
||||
</a>
|
||||
<a href="/contracts/{{ contract.id }}/edit" class="btn btn-sm btn-outline-secondary">
|
||||
<i class="bi bi-pencil"></i>
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
134
actix_mvc_app/src/views/contracts/my_contracts.html
Normal file
134
actix_mvc_app/src/views/contracts/my_contracts.html
Normal file
@@ -0,0 +1,134 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}My Contracts{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container">
|
||||
<div class="row mb-4">
|
||||
<div class="col-12">
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="/contracts">Contracts Dashboard</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">My Contracts</li>
|
||||
</ol>
|
||||
</nav>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<h1 class="display-5 mb-0">My Contracts</h1>
|
||||
<div class="btn-group">
|
||||
<a href="/contracts/create" class="btn btn-primary">
|
||||
<i class="bi bi-plus-circle me-1"></i> Create New Contract
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filters -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">Filters</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form action="/contracts/my-contracts" method="get" class="row g-3">
|
||||
<div class="col-md-4">
|
||||
<label for="status" class="form-label">Status</label>
|
||||
<select class="form-select" id="status" name="status">
|
||||
<option value="">All Statuses</option>
|
||||
<option value="Draft">Draft</option>
|
||||
<option value="PendingSignatures">Pending Signatures</option>
|
||||
<option value="Signed">Signed</option>
|
||||
<option value="Expired">Expired</option>
|
||||
<option value="Cancelled">Cancelled</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label for="type" class="form-label">Contract Type</label>
|
||||
<select class="form-select" id="type" name="type">
|
||||
<option value="">All Types</option>
|
||||
<option value="Service">Service Agreement</option>
|
||||
<option value="Employment">Employment Contract</option>
|
||||
<option value="NDA">Non-Disclosure Agreement</option>
|
||||
<option value="SLA">Service Level Agreement</option>
|
||||
<option value="Other">Other</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-4 d-flex align-items-end">
|
||||
<button type="submit" class="btn btn-primary w-100">Apply Filters</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Contract List -->
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">My Contracts</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{% if contracts and contracts | length > 0 %}
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Contract Title</th>
|
||||
<th>Type</th>
|
||||
<th>Status</th>
|
||||
<th>Signers</th>
|
||||
<th>Created</th>
|
||||
<th>Updated</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for contract in contracts %}
|
||||
<tr>
|
||||
<td>
|
||||
<a href="/contracts/{{ contract.id }}">{{ contract.title }}</a>
|
||||
</td>
|
||||
<td>{{ contract.contract_type }}</td>
|
||||
<td>
|
||||
<span class="badge {% if contract.status == 'Signed' %}bg-success{% elif contract.status == 'PendingSignatures' %}bg-warning text-dark{% elif contract.status == 'Draft' %}bg-secondary{% elif contract.status == 'Expired' %}bg-danger{% else %}bg-dark{% endif %}">
|
||||
{{ contract.status }}
|
||||
</span>
|
||||
</td>
|
||||
<td>{{ contract.signed_signers }}/{{ contract.signers|length }}</td>
|
||||
<td>{{ contract.created_at | date(format="%Y-%m-%d") }}</td>
|
||||
<td>{{ contract.updated_at | date(format="%Y-%m-%d") }}</td>
|
||||
<td>
|
||||
<div class="btn-group">
|
||||
<a href="/contracts/{{ contract.id }}" class="btn btn-sm btn-primary">
|
||||
<i class="bi bi-eye"></i>
|
||||
</a>
|
||||
{% if contract.status == 'Draft' %}
|
||||
<a href="/contracts/{{ contract.id }}/edit" class="btn btn-sm btn-outline-secondary">
|
||||
<i class="bi bi-pencil"></i>
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="text-center py-5">
|
||||
<i class="bi bi-file-earmark-text fs-1 text-muted"></i>
|
||||
<p class="mt-3 text-muted">You don't have any contracts yet</p>
|
||||
<a href="/contracts/create" class="btn btn-primary mt-2">
|
||||
<i class="bi bi-plus-circle me-1"></i> Create Your First Contract
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user