updates to mock content and contract view implementation
This commit is contained in:
Timur Gordon
@@ -24,302 +24,309 @@
|
||||
</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 Tabs -->
|
||||
<ul class="nav nav-tabs mb-4" id="contractTabs" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link active" id="document-tab" data-bs-toggle="tab" data-bs-target="#document" type="button" role="tab" aria-controls="document" aria-selected="true">
|
||||
<i class="bi bi-file-text me-1"></i> Document
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" id="details-tab" data-bs-toggle="tab" data-bs-target="#details" type="button" role="tab" aria-controls="details" aria-selected="false">
|
||||
<i class="bi bi-info-circle me-1"></i> Details
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" id="activity-tab" data-bs-toggle="tab" data-bs-target="#activity" type="button" role="tab" aria-controls="activity" aria-selected="false">
|
||||
<i class="bi bi-clock-history me-1"></i> Activity
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- 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>
|
||||
<div class="tab-content" id="contractTabsContent">
|
||||
<!-- Document Tab -->
|
||||
<div class="tab-pane fade show active" id="document" role="tabpanel" aria-labelledby="document-tab">
|
||||
<div class="row">
|
||||
<div class="col-md-9">
|
||||
<!-- Document View -->
|
||||
<div class="card mb-4">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<h5 class="mb-0">Contract Document</h5>
|
||||
{% if contract.status == 'Signed' %}
|
||||
<span class="badge bg-success">SIGNED</span>
|
||||
{% elif contract.status == 'Active' %}
|
||||
<span class="badge bg-success">ACTIVE</span>
|
||||
{% elif contract.status == 'PendingSignatures' %}
|
||||
<span class="badge bg-warning text-dark">PENDING</span>
|
||||
{% elif contract.status == 'Draft' %}
|
||||
<span class="badge bg-secondary">DRAFT</span>
|
||||
{% 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>
|
||||
<div class="card-body bg-light">
|
||||
{% if contract.revisions|length > 0 %}
|
||||
{% set latest_revision = contract.latest_revision %}
|
||||
<div class="bg-white p-4 border rounded">
|
||||
{{ latest_revision.content|safe }}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="text-center py-5 text-muted">
|
||||
<p>No content has been added to this contract yet.</p>
|
||||
</div>
|
||||
{% 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>
|
||||
</div>
|
||||
|
||||
<!-- Signature Areas -->
|
||||
<div class="card mb-4">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">Signatures</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
{% 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>
|
||||
<div class="col-md-6 mb-4">
|
||||
<div class="card h-100 {% if signer.status == 'Signed' %}border-success{% elif signer.status == 'Rejected' %}border-danger{% else %}border-warning{% endif %}">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<h6 class="mb-0">{{ signer.name }}</h6>
|
||||
<span class="badge {% if signer.status == 'Signed' %}bg-success{% elif signer.status == 'Rejected' %}bg-danger{% else %}bg-warning text-dark{% endif %}">
|
||||
{{ signer.status }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="text-muted mb-2">{{ signer.email }}</p>
|
||||
|
||||
{% if signer.status == 'Signed' %}
|
||||
<div class="text-center border-top pt-3">
|
||||
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Signature_of_John_Hancock.svg/1280px-Signature_of_John_Hancock.svg.png" alt="Signature" class="img-fluid" style="max-height: 60px;">
|
||||
<div class="small text-muted mt-2">Signed on {{ signer.signed_at }}</div>
|
||||
</div>
|
||||
{% elif signer.status == 'Rejected' %}
|
||||
<div class="alert alert-danger mt-3">
|
||||
<i class="bi bi-x-circle me-2"></i> Rejected on {{ signer.signed_at }}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="text-center mt-3">
|
||||
<p class="text-muted mb-2">Waiting for signature...</p>
|
||||
{% if not user_has_signed %}
|
||||
<button class="btn btn-primary btn-sm btn-sign" data-signer-id="{{ signer.id }}">
|
||||
<i class="bi bi-pen me-1"></i> Sign Here
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if signer.comments %}
|
||||
<div class="mt-3">
|
||||
<p class="small text-muted mb-1">Comments:</p>
|
||||
<p class="small">{{ signer.comments }}</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
<div class="col-md-3">
|
||||
<div class="card mb-4">
|
||||
<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' or contract.status == 'Active' %}
|
||||
<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 class="card mb-4">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">Signers Status</h5>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<ul class="list-group list-group-flush">
|
||||
{% for signer in contract.signers %}
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<div>{{ signer.name }}</div>
|
||||
<small class="text-muted">{{ signer.email }}</small>
|
||||
</div>
|
||||
<span class="badge {% if signer.status == 'Signed' %}bg-success{% elif signer.status == 'Rejected' %}bg-danger{% else %}bg-warning text-dark{% endif %}">
|
||||
{{ signer.status }}
|
||||
</span>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<div class="d-flex justify-content-between">
|
||||
<span>Total: {{ contract.signers|length }}</span>
|
||||
<span>Signed: {{ signed_signers }} / Pending: {{ pending_signers }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card mb-4">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">Contract Info</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p><strong>Status:</strong>
|
||||
<span class="badge {% if contract.status == 'Signed' or contract.status == 'Active' %}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>
|
||||
</p>
|
||||
<p><strong>Type:</strong> {{ contract.contract_type }}</p>
|
||||
<p><strong>Created:</strong> {{ contract.created_at }}</p>
|
||||
<p><strong>Version:</strong> {{ contract.current_version }}</p>
|
||||
{% if contract.effective_date %}
|
||||
<p><strong>Effective:</strong> {{ contract.effective_date }}</p>
|
||||
{% endif %}
|
||||
{% if contract.expiration_date %}
|
||||
<p><strong>Expires:</strong> {{ contract.expiration_date }}</p>
|
||||
{% endif %}
|
||||
{% if contract.organization %}
|
||||
<p><strong>Organization:</strong> {{ contract.organization }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</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>
|
||||
|
||||
<!-- Details Tab -->
|
||||
<div class="tab-pane fade" id="details" role="tabpanel" aria-labelledby="details-tab">
|
||||
<div class="row">
|
||||
<div class="col-md-8">
|
||||
<div class="card mb-4">
|
||||
<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' or contract.status == 'Active' %}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 mb-4">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">Organization</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{% if contract.organization %}
|
||||
<p><strong>{{ contract.organization }}</strong></p>
|
||||
<p class="text-muted">
|
||||
<i class="bi bi-building me-1"></i> Registered in Zanzibar Autonomous Zone
|
||||
</p>
|
||||
{% else %}
|
||||
<p class="text-muted">No organization specified</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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">
|
||||
|
||||
<!-- Contract Revisions -->
|
||||
<div class="card mb-4">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">Revision History</h5>
|
||||
<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 class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Version</th>
|
||||
<th>Date</th>
|
||||
<th>Created By</th>
|
||||
<th>Created Date</th>
|
||||
<th>Comments</th>
|
||||
<th>Notes</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for revision in contract.revisions|reverse %}
|
||||
{% for revision in contract.revisions %}
|
||||
<tr>
|
||||
<td>{{ revision.version }}</td>
|
||||
<td>{{ revision.created_by }}</td>
|
||||
<td>{{ revision.created_at }}</td>
|
||||
<td>{{ revision.created_by }}</td>
|
||||
<td>{{ revision.notes }}</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 href="/contracts/{{ contract.id }}?version={{ revision.version }}" class="btn btn-sm btn-primary">
|
||||
<i class="bi bi-eye"></i> View
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
@@ -328,13 +335,213 @@
|
||||
</table>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="text-center py-3 text-muted">
|
||||
<p>No revisions have been made to this contract yet.</p>
|
||||
</div>
|
||||
<p class="text-muted">No revisions available.</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Activity Tab -->
|
||||
<div class="tab-pane fade" id="activity" role="tabpanel" aria-labelledby="activity-tab">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">Activity Timeline</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item border-start border-4 border-primary">
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h6 class="mb-1">Contract Created</h6>
|
||||
<small>{{ contract.created_at }}</small>
|
||||
</div>
|
||||
<p class="mb-1">{{ contract.created_by }} created this contract</p>
|
||||
</li>
|
||||
|
||||
{% for revision in contract.revisions %}
|
||||
{% if revision.version > 1 %}
|
||||
<li class="list-group-item border-start border-4 border-info">
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h6 class="mb-1">Contract Updated to Version {{ revision.version }}</h6>
|
||||
<small>{{ revision.created_at }}</small>
|
||||
</div>
|
||||
<p class="mb-1">{{ revision.created_by }} updated the contract</p>
|
||||
{% if revision.notes %}
|
||||
<p class="mb-0 text-muted fst-italic">{{ revision.notes }}</p>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% for signer in contract.signers %}
|
||||
{% if signer.status == 'Signed' %}
|
||||
<li class="list-group-item border-start border-4 border-success">
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h6 class="mb-1">Contract Signed</h6>
|
||||
<small>{{ signer.signed_at }}</small>
|
||||
</div>
|
||||
<p class="mb-1">{{ signer.name }} signed the contract</p>
|
||||
{% if signer.comments %}
|
||||
<p class="mb-0 text-muted fst-italic">{{ signer.comments }}</p>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% if contract.status == 'Active' %}
|
||||
<li class="list-group-item border-start border-4 border-success">
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h6 class="mb-1">Contract Activated</h6>
|
||||
<small>{{ contract.updated_at }}</small>
|
||||
</div>
|
||||
<p class="mb-1">Contract became active after all parties signed</p>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Signature Modal -->
|
||||
<div class="modal fade" id="signatureModal" tabindex="-1" aria-labelledby="signatureModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="signatureModalLabel">Sign Contract</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="mb-3">
|
||||
<label for="signatureCanvas" class="form-label">Draw your signature below:</label>
|
||||
<div class="border p-2">
|
||||
<canvas id="signatureCanvas" width="450" height="150" style="border: 1px solid #ddd; width: 100%;"></canvas>
|
||||
</div>
|
||||
<div class="mt-2 text-end">
|
||||
<button class="btn btn-sm btn-outline-secondary" id="clearSignature">Clear</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="signatureComments" class="form-label">Comments (optional):</label>
|
||||
<textarea class="form-control" id="signatureComments" rows="3"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="button" class="btn btn-primary" id="submitSignature">Sign Contract</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Signature canvas functionality
|
||||
const canvas = document.getElementById('signatureCanvas');
|
||||
const ctx = canvas.getContext('2d');
|
||||
let isDrawing = false;
|
||||
let lastX = 0;
|
||||
let lastY = 0;
|
||||
|
||||
// Set up canvas
|
||||
ctx.lineWidth = 2;
|
||||
ctx.lineCap = 'round';
|
||||
ctx.lineJoin = 'round';
|
||||
ctx.strokeStyle = '#000';
|
||||
|
||||
// Drawing functions
|
||||
function startDrawing(e) {
|
||||
isDrawing = true;
|
||||
[lastX, lastY] = [e.offsetX, e.offsetY];
|
||||
}
|
||||
|
||||
function draw(e) {
|
||||
if (!isDrawing) return;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(lastX, lastY);
|
||||
ctx.lineTo(e.offsetX, e.offsetY);
|
||||
ctx.stroke();
|
||||
[lastX, lastY] = [e.offsetX, e.offsetY];
|
||||
}
|
||||
|
||||
function stopDrawing() {
|
||||
isDrawing = false;
|
||||
}
|
||||
|
||||
// Event listeners for canvas
|
||||
canvas.addEventListener('mousedown', startDrawing);
|
||||
canvas.addEventListener('mousemove', draw);
|
||||
canvas.addEventListener('mouseup', stopDrawing);
|
||||
canvas.addEventListener('mouseout', stopDrawing);
|
||||
|
||||
// Touch support
|
||||
canvas.addEventListener('touchstart', function(e) {
|
||||
e.preventDefault();
|
||||
const touch = e.touches[0];
|
||||
const mouseEvent = new MouseEvent('mousedown', {
|
||||
clientX: touch.clientX,
|
||||
clientY: touch.clientY
|
||||
});
|
||||
canvas.dispatchEvent(mouseEvent);
|
||||
});
|
||||
|
||||
canvas.addEventListener('touchmove', function(e) {
|
||||
e.preventDefault();
|
||||
const touch = e.touches[0];
|
||||
const mouseEvent = new MouseEvent('mousemove', {
|
||||
clientX: touch.clientX,
|
||||
clientY: touch.clientY
|
||||
});
|
||||
canvas.dispatchEvent(mouseEvent);
|
||||
});
|
||||
|
||||
canvas.addEventListener('touchend', function(e) {
|
||||
e.preventDefault();
|
||||
const mouseEvent = new MouseEvent('mouseup', {});
|
||||
canvas.dispatchEvent(mouseEvent);
|
||||
});
|
||||
|
||||
// Clear signature
|
||||
document.getElementById('clearSignature').addEventListener('click', function() {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
});
|
||||
|
||||
// Sign buttons
|
||||
const signButtons = document.querySelectorAll('.btn-sign');
|
||||
let currentSignerId = null;
|
||||
|
||||
signButtons.forEach(button => {
|
||||
button.addEventListener('click', function() {
|
||||
currentSignerId = this.dataset.signerId;
|
||||
const signatureModal = new bootstrap.Modal(document.getElementById('signatureModal'));
|
||||
signatureModal.show();
|
||||
});
|
||||
});
|
||||
|
||||
// Submit signature
|
||||
document.getElementById('submitSignature').addEventListener('click', function() {
|
||||
// In a real app, we would send the signature to the server
|
||||
// For demo, we'll just simulate a successful signature
|
||||
|
||||
// Get the signature image
|
||||
const signatureImage = canvas.toDataURL();
|
||||
const comments = document.getElementById('signatureComments').value;
|
||||
|
||||
// Close the modal
|
||||
const signatureModal = bootstrap.Modal.getInstance(document.getElementById('signatureModal'));
|
||||
signatureModal.hide();
|
||||
|
||||
// Show success message
|
||||
alert('Contract signed successfully!');
|
||||
|
||||
// Reload the page to show the updated contract
|
||||
// In a real app, we would update the UI without reloading
|
||||
setTimeout(() => {
|
||||
window.location.reload();
|
||||
}, 1000);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user