initial work of the arcline tickets
This commit is contained in:
Blake Ridgway
310
ISSUES.md
310
ISSUES.md
@@ -1,310 +0,0 @@
|
||||
# Initial Ticket Backlog
|
||||
|
||||
Curated list of tickets to file in Gitea Issues. Copy each block into a new issue using the matching template.
|
||||
|
||||
---
|
||||
|
||||
## 🏗️ Project Foundation
|
||||
|
||||
### 1. Repository bootstrapping
|
||||
|
||||
> **Template:** 📋 Task / Epic
|
||||
> **Labels:** `task`
|
||||
> **Priority:** P0
|
||||
|
||||
**Title:** `[P0] [Task] Bootstrap repo structure and tooling`
|
||||
|
||||
- [ ] Add `.gitignore`, `.editorconfig`, `CONTRIBUTING.md`
|
||||
- [ ] Set up branch protection on `main`
|
||||
- [ ] Configure CI linting (shellcheck, markdownlint, yamllint)
|
||||
- [ ] Add pre-commit hooks
|
||||
|
||||
---
|
||||
|
||||
### 2. README & onboarding docs
|
||||
|
||||
> **Template:** 📋 Task / Epic
|
||||
> **Labels:** `documentation`
|
||||
> **Priority:** P0
|
||||
|
||||
**Title:** `[P0] [Task] Write project README and onboarding guide`
|
||||
|
||||
- [ ] High-level architecture overview
|
||||
- [ ] Local development setup instructions
|
||||
- [ ] Contribution workflow (branching, commits, reviews)
|
||||
- [ ] Link to this tickets repo
|
||||
|
||||
---
|
||||
|
||||
### 3. CI pipeline
|
||||
|
||||
> **Template:** 📋 Task / Epic
|
||||
> **Labels:** `task`
|
||||
> **Priority:** P0
|
||||
|
||||
**Title:** `[P0] [Task] Set up CI pipeline`
|
||||
|
||||
- [ ] Build step (compile / install deps)
|
||||
- [ ] Lint step (static analysis)
|
||||
- [ ] Test step (unit + integration)
|
||||
- [ ] Status badge in README
|
||||
|
||||
---
|
||||
|
||||
## 🧪 Testing
|
||||
|
||||
### 4. Unit-test scaffolding
|
||||
|
||||
> **Template:** 📋 Task / Epic
|
||||
> **Labels:** `task`
|
||||
> **Priority:** P1
|
||||
|
||||
**Title:** `[P1] [Task] Scaffold unit-test framework`
|
||||
|
||||
- [ ] Choose and wire up a test runner
|
||||
- [ ] Add a single passing smoke test
|
||||
- [ ] Document how to run tests locally
|
||||
|
||||
---
|
||||
|
||||
### 5. Integration tests
|
||||
|
||||
> **Template:** 📋 Task / Epic
|
||||
> **Labels:** `task`
|
||||
> **Priority:** P1
|
||||
|
||||
**Title:** `[P1] [Task] Add integration / end-to-end test harness`
|
||||
|
||||
- [ ] Spin up a local environment for tests
|
||||
- [ ] Write 2-3 critical-path integration tests
|
||||
- [ ] Wire into CI
|
||||
|
||||
---
|
||||
|
||||
### 6. Test coverage reporting
|
||||
|
||||
> **Template:** ✨ Feature Request
|
||||
> **Labels:** `enhancement`
|
||||
> **Priority:** P2
|
||||
|
||||
**Title:** `[P2] [Feature] Add test coverage reporting`
|
||||
|
||||
> **Problem:** No visibility into what code paths have tests.
|
||||
> **Solution:** Generate coverage reports in CI and block merges below a threshold (e.g. 80 %).
|
||||
|
||||
---
|
||||
|
||||
## 🔒 Security & Quality
|
||||
|
||||
### 7. Dependency scanning
|
||||
|
||||
> **Template:** ✨ Feature Request
|
||||
> **Labels:** `enhancement`
|
||||
> **Priority:** P1
|
||||
|
||||
**Title:** `[P1] [Feature] Automated dependency vulnerability scanning`
|
||||
|
||||
> **Problem:** Outdated or vulnerable dependencies slip through.
|
||||
> **Solution:** Add [Dependabot](https://github.com/dependabot) (or Renovate) + a SAST scanner in CI.
|
||||
|
||||
---
|
||||
|
||||
### 8. Secrets management
|
||||
|
||||
> **Template:** 📋 Task / Epic
|
||||
> **Labels:** `task`
|
||||
> **Priority:** P0
|
||||
|
||||
**Title:** `[P0] [Task] Audit and secure secrets management`
|
||||
|
||||
- [ ] Verify no secrets are committed to the repo
|
||||
- [ ] Set up `.env` conventions
|
||||
- [ ] Document how to inject secrets in dev and prod
|
||||
|
||||
---
|
||||
|
||||
### 9. Linting & formatting
|
||||
|
||||
> **Template:** 📋 Task / Epic
|
||||
> **Labels:** `task`
|
||||
> **Priority:** P1
|
||||
|
||||
**Title:** `[P1] [Task] Enforce consistent linting and formatting`
|
||||
|
||||
- [ ] Choose and configure formatters / linters for each language in the stack
|
||||
- [ ] Add pre-commit hook (or CI check) that blocks violations
|
||||
- [ ] Format the existing codebase
|
||||
|
||||
---
|
||||
|
||||
## 📖 Documentation
|
||||
|
||||
### 10. API / interface docs
|
||||
|
||||
> **Template:** 📋 Task / Epic
|
||||
> **Labels:** `documentation`
|
||||
> **Priority:** P1
|
||||
|
||||
**Title:** `[P1] [Task] Generate and publish API documentation`
|
||||
|
||||
- [ ] Select a doc generator (e.g. OpenAPI, Sphinx, JSDoc)
|
||||
- [ ] Add docstrings / annotations to public interfaces
|
||||
- [ ] Publish to a static site or docs host
|
||||
|
||||
---
|
||||
|
||||
### 11. Architecture Decision Records
|
||||
|
||||
> **Template:** ✨ Feature Request
|
||||
> **Labels:** `enhancement`, `documentation`
|
||||
> **Priority:** P2
|
||||
|
||||
**Title:** `[P2] [Feature] Adopt Architecture Decision Records (ADRs)`
|
||||
|
||||
> **Problem:** Design decisions are made in chat and forgotten.
|
||||
> **Solution:** Maintain a `docs/adr/` directory with lightweight decision records.
|
||||
|
||||
---
|
||||
|
||||
## 🐛 Placeholder Bugs (for testing the flow)
|
||||
|
||||
### 12. Template: Bug Report
|
||||
|
||||
> **Template:** 🐛 Bug Report
|
||||
> **Labels:** `bug`
|
||||
> **Priority:** P2
|
||||
|
||||
**Title:** `[P2] [Bug] Example bug — page title wraps on small viewports`
|
||||
|
||||
| Field | Value |
|
||||
|---|---|
|
||||
| **Steps** | Resize browser to 320 px wide, open the landing page. |
|
||||
| **Expected** | Title stays on one line or truncates gracefully. |
|
||||
| **Actual** | Title wraps and overlaps the nav bar. |
|
||||
|
||||
---
|
||||
|
||||
### 13. Template: Bug Report
|
||||
|
||||
> **Template:** 🐛 Bug Report
|
||||
> **Labels:** `bug`
|
||||
> **Priority:** P3
|
||||
|
||||
**Title:** `[P3] [Bug] Example bug — console warns about missing key prop`
|
||||
|
||||
| Field | Value |
|
||||
|---|---|
|
||||
| **Steps** | Open dev tools, navigate to the dashboard. |
|
||||
| **Expected** | No React key warnings. |
|
||||
| **Actual** | `Warning: Each child in a list should have a unique "key" prop.` |
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Features
|
||||
|
||||
### 14. Health-check endpoint
|
||||
|
||||
> **Template:** ✨ Feature Request
|
||||
> **Labels:** `enhancement`
|
||||
> **Priority:** P1
|
||||
|
||||
**Title:** `[P1] [Feature] Add health-check endpoint`
|
||||
|
||||
> **Problem:** No way for load balancers or monitoring to know if the service is alive.
|
||||
> **Solution:** Expose `GET /health` returning `{"status":"ok"}` and a quick DB ping.
|
||||
|
||||
---
|
||||
|
||||
### 15. Structured logging
|
||||
|
||||
> **Template:** ✨ Feature Request
|
||||
> **Labels:** `enhancement`
|
||||
> **Priority:** P1
|
||||
|
||||
**Title:** `[P1] [Feature] Switch to structured (JSON) logging`
|
||||
|
||||
> **Problem:** Logs are plain-text and hard to query.
|
||||
> **Solution:** Emit JSON log lines with consistent keys (`level`, `message`, `timestamp`, `trace_id`).
|
||||
|
||||
---
|
||||
|
||||
### 16. Feature flags
|
||||
|
||||
> **Template:** ✨ Feature Request
|
||||
> **Labels:** `enhancement`
|
||||
> **Priority:** P2
|
||||
|
||||
**Title:** `[P2] [Feature] Introduce feature-flag system`
|
||||
|
||||
> **Problem:** Can't safely ship partial or experimental features.
|
||||
> **Solution:** Use a simple flag provider (env vars initially) to gate features.
|
||||
|
||||
---
|
||||
|
||||
### 17. Observability / metrics
|
||||
|
||||
> **Template:** ✨ Feature Request
|
||||
> **Labels:** `enhancement`
|
||||
> **Priority:** P2
|
||||
|
||||
**Title:** `[P2] [Feature] Export app metrics for monitoring`
|
||||
|
||||
> **Problem:** Can't answer "is the system healthy?" without looking at logs.
|
||||
> **Solution:** Export request duration, error rate, and DB query metrics.
|
||||
|
||||
---
|
||||
|
||||
## 🤝 Community & Maintenance
|
||||
|
||||
### 18. CONTRIBUTING guide
|
||||
|
||||
> **Template:** 📋 Task / Epic
|
||||
> **Labels:** `documentation`, `good first issue`
|
||||
> **Priority:** P1
|
||||
|
||||
**Title:** `[P1] [Task] Write CONTRIBUTING.md`
|
||||
|
||||
- [ ] Code style and conventions
|
||||
- [ ] PR template and review expectations
|
||||
- [ ] Local development quick-start
|
||||
|
||||
---
|
||||
|
||||
### 19. Issue triage process
|
||||
|
||||
> **Template:** 📋 Task / Epic
|
||||
> **Labels:** `task`
|
||||
> **Priority:** P2
|
||||
|
||||
**Title:** `[P2] [Task] Define and document the issue triage process`
|
||||
|
||||
- [ ] Weekly triage meeting cadence
|
||||
- [ ] SLA for first response on new issues
|
||||
- [ ] How issues move from `triage` → `accepted`
|
||||
|
||||
---
|
||||
|
||||
### 20. Release checklist
|
||||
|
||||
> **Template:** 📋 Task / Epic
|
||||
> **Labels:** `task`
|
||||
> **Priority:** P2
|
||||
|
||||
**Title:** `[P2] [Task] Create a release checklist**
|
||||
|
||||
- [ ] Version bump convention
|
||||
- [ ] CHANGELOG update step
|
||||
- [ ] Tagging and release notes
|
||||
- [ ] Post-deploy smoke-test commands
|
||||
|
||||
---
|
||||
|
||||
## Filing Instructions
|
||||
|
||||
1. Open the **Issues** tab in this repo.
|
||||
2. Pick the template that matches the ticket above.
|
||||
3. Copy-paste the title, description, labels, and priority.
|
||||
4. Submit.
|
||||
|
||||
Repeat until the entire backlog has been filed. Triage and assign each ticket in a follow-up pass.
|
||||
|
||||
62
README.md
62
README.md
@@ -1,62 +0,0 @@
|
||||
# Tickets
|
||||
|
||||
Central issue tracker and ticket backlog for the **Arcline Project**.
|
||||
|
||||
All work is tracked as **Gitea Issues** in this repository. No external tooling required — just open an issue.
|
||||
|
||||
---
|
||||
|
||||
## Quick Start
|
||||
|
||||
### Creating a Ticket
|
||||
|
||||
1. Go to the **Issues** tab in this repo.
|
||||
2. Click **New Issue**.
|
||||
3. Pick a template:
|
||||
- 🐛 **Bug Report** — something is broken.
|
||||
- ✨ **Feature Request** — propose something new.
|
||||
- 📋 **Task / Epic** — a general task, spike, or umbrella issue.
|
||||
4. Fill in the fields, attach labels, and submit.
|
||||
|
||||
> The templates live in `.gitea/ISSUE_TEMPLATE/` if you want to tweak them.
|
||||
|
||||
### Labels
|
||||
|
||||
| Label | Purpose |
|
||||
|----------------|----------------------------------------------|
|
||||
| `bug` | Defect or unexpected behaviour |
|
||||
| `enhancement` | New capability or improvement |
|
||||
| `task` | General work item |
|
||||
| `epic` | Large body of work spanning multiple issues |
|
||||
| `triage` | Needs prioritisation / hasn't been reviewed |
|
||||
| `documentation`| Docs, READMEs, comments |
|
||||
| `good first issue` | Beginner-friendly starting point |
|
||||
| `blocked` | Waiting on something else |
|
||||
| `wontfix` | Acknowledged but not planned |
|
||||
|
||||
### Prioritisation
|
||||
|
||||
Prefix issue titles to signal urgency at a glance:
|
||||
|
||||
- `[P0]` — Drop everything. Critical / blocking.
|
||||
- `[P1]` — Important. Should be in the current iteration.
|
||||
- `[P2]` — Nice to have. Backlog.
|
||||
- `[P3]` — Someday / maybe.
|
||||
|
||||
Example: `[P1] [Bug] Login page returns 500 on `\n` in username`
|
||||
|
||||
---
|
||||
|
||||
## Workflow
|
||||
|
||||
1. **Open** an issue using a template.
|
||||
2. **Triage** — assign labels, priority, milestone, and an owner.
|
||||
3. **Work** — branch off `main`, reference the issue in commits (`#42`).
|
||||
4. **Close** — when the work lands, close the issue (or let a PR close it automatically with `Closes #42`).
|
||||
|
||||
---
|
||||
|
||||
## Backlog
|
||||
|
||||
See [`ISSUES.md`](./ISSUES.md) for the initial curated backlog of tickets ready to be filed.
|
||||
|
||||
150
app.py
Normal file
150
app.py
Normal file
@@ -0,0 +1,150 @@
|
||||
"""Flask-based ticketing system web application."""
|
||||
|
||||
from flask import Flask, redirect, render_template, request, url_for
|
||||
|
||||
from models import Ticket, TicketPriority, TicketStatus
|
||||
from store import get_store
|
||||
|
||||
app = Flask(__name__)
|
||||
|
||||
|
||||
# ── helper ───────────────────────────────────────────────────────
|
||||
|
||||
def _priorities() -> list[tuple[str, str]]:
|
||||
return [(p.value, p.name.replace("_", " ").title()) for p in TicketPriority]
|
||||
|
||||
|
||||
def _statuses() -> list[tuple[str, str]]:
|
||||
return [(s.value, s.name.replace("_", " ").title()) for s in TicketStatus]
|
||||
|
||||
|
||||
def _ticket_from_form() -> Ticket:
|
||||
return Ticket(
|
||||
title=request.form.get("title", "").strip(),
|
||||
description=request.form.get("description", "").strip(),
|
||||
priority=TicketPriority(request.form.get("priority", "medium")),
|
||||
status=TicketStatus(request.form.get("status", "open")),
|
||||
assignee=request.form.get("assignee", "").strip(),
|
||||
project=request.form.get("project", "").strip(),
|
||||
)
|
||||
|
||||
|
||||
# ── routes ───────────────────────────────────────────────────────
|
||||
|
||||
@app.route("/")
|
||||
def index() -> str:
|
||||
store = get_store()
|
||||
status_filter = request.args.get("status", "")
|
||||
priority_filter = request.args.get("priority", "")
|
||||
project_filter = request.args.get("project", "")
|
||||
search = request.args.get("search", "")
|
||||
|
||||
tickets = store.list_tickets(
|
||||
status=status_filter or None,
|
||||
priority=priority_filter or None,
|
||||
search=search or None,
|
||||
project=project_filter or None,
|
||||
)
|
||||
counts = store.count_by_status()
|
||||
projects = store.get_projects()
|
||||
|
||||
return render_template(
|
||||
"index.html",
|
||||
tickets=tickets,
|
||||
status_filter=status_filter,
|
||||
priority_filter=priority_filter,
|
||||
project_filter=project_filter,
|
||||
search=search,
|
||||
counts=counts,
|
||||
priorities=_priorities(),
|
||||
statuses=_statuses(),
|
||||
projects=projects,
|
||||
)
|
||||
|
||||
|
||||
@app.route("/tickets/new", methods=["GET", "POST"])
|
||||
def create_ticket() -> str:
|
||||
if request.method == "POST":
|
||||
ticket = _ticket_from_form()
|
||||
if not ticket.title:
|
||||
return render_template(
|
||||
"create.html",
|
||||
priorities=_priorities(),
|
||||
statuses=_statuses(),
|
||||
ticket=ticket,
|
||||
error="Title is required.",
|
||||
)
|
||||
store = get_store()
|
||||
store.create_ticket(ticket)
|
||||
return redirect(url_for("index"))
|
||||
|
||||
return render_template(
|
||||
"create.html",
|
||||
priorities=_priorities(),
|
||||
statuses=_statuses(),
|
||||
ticket=None,
|
||||
)
|
||||
|
||||
|
||||
@app.route("/tickets/<int:ticket_id>")
|
||||
def view_ticket(ticket_id: int) -> str:
|
||||
store = get_store()
|
||||
ticket = store.get_ticket(ticket_id)
|
||||
if ticket is None:
|
||||
return "Ticket not found", 404
|
||||
return render_template(
|
||||
"detail.html",
|
||||
ticket=ticket,
|
||||
priorities=_priorities(),
|
||||
statuses=_statuses(),
|
||||
)
|
||||
|
||||
|
||||
@app.route("/tickets/<int:ticket_id>/edit", methods=["GET", "POST"])
|
||||
def edit_ticket(ticket_id: int) -> str:
|
||||
store = get_store()
|
||||
ticket = store.get_ticket(ticket_id)
|
||||
if ticket is None:
|
||||
return "Ticket not found", 404
|
||||
|
||||
if request.method == "POST":
|
||||
title = request.form.get("title", "").strip()
|
||||
if not title:
|
||||
return render_template(
|
||||
"edit.html",
|
||||
ticket=ticket,
|
||||
priorities=_priorities(),
|
||||
statuses=_statuses(),
|
||||
error="Title is required.",
|
||||
)
|
||||
updates = {
|
||||
"title": title,
|
||||
"description": request.form.get("description", "").strip(),
|
||||
"priority": TicketPriority(request.form.get("priority", "medium")),
|
||||
"status": TicketStatus(request.form.get("status", "open")),
|
||||
"assignee": request.form.get("assignee", "").strip(),
|
||||
"project": request.form.get("project", "").strip(),
|
||||
}
|
||||
store.update_ticket(ticket_id, updates)
|
||||
return redirect(url_for("view_ticket", ticket_id=ticket_id))
|
||||
|
||||
return render_template(
|
||||
"edit.html",
|
||||
ticket=ticket,
|
||||
priorities=_priorities(),
|
||||
statuses=_statuses(),
|
||||
)
|
||||
|
||||
|
||||
@app.route("/tickets/<int:ticket_id>/delete", methods=["POST"])
|
||||
def delete_ticket(ticket_id: int) -> str:
|
||||
store = get_store()
|
||||
store.delete_ticket(ticket_id)
|
||||
return redirect(url_for("index"))
|
||||
|
||||
|
||||
# ── entrypoint ───────────────────────────────────────────────────
|
||||
|
||||
if __name__ == "__main__":
|
||||
app.run(debug=True, host="0.0.0.0", port=5000)
|
||||
|
||||
1
data/tickets.json
Normal file
1
data/tickets.json
Normal file
@@ -0,0 +1 @@
|
||||
[]
|
||||
54
models.py
Normal file
54
models.py
Normal file
@@ -0,0 +1,54 @@
|
||||
"""Ticket data model for the ticketing system."""
|
||||
|
||||
from dataclasses import dataclass, field, asdict
|
||||
from datetime import datetime, timezone
|
||||
from enum import Enum
|
||||
from typing import Optional
|
||||
|
||||
|
||||
class TicketStatus(str, Enum):
|
||||
OPEN = "open"
|
||||
IN_PROGRESS = "in_progress"
|
||||
RESOLVED = "resolved"
|
||||
CLOSED = "closed"
|
||||
|
||||
|
||||
class TicketPriority(str, Enum):
|
||||
LOW = "low"
|
||||
MEDIUM = "medium"
|
||||
HIGH = "high"
|
||||
CRITICAL = "critical"
|
||||
|
||||
|
||||
@dataclass
|
||||
class Ticket:
|
||||
title: str
|
||||
description: str
|
||||
priority: TicketPriority = TicketPriority.MEDIUM
|
||||
status: TicketStatus = TicketStatus.OPEN
|
||||
assignee: str = ""
|
||||
project: str = ""
|
||||
id: Optional[int] = None
|
||||
created_at: str = ""
|
||||
updated_at: str = ""
|
||||
|
||||
def __post_init__(self) -> None:
|
||||
now = datetime.now(timezone.utc).isoformat()
|
||||
if not self.created_at:
|
||||
self.created_at = now
|
||||
if not self.updated_at:
|
||||
self.updated_at = now
|
||||
|
||||
def to_dict(self) -> dict:
|
||||
data = asdict(self)
|
||||
data["priority"] = self.priority.value
|
||||
data["status"] = self.status.value
|
||||
return data
|
||||
|
||||
@classmethod
|
||||
def from_dict(cls, data: dict) -> "Ticket":
|
||||
data = dict(data) # shallow copy
|
||||
data["priority"] = TicketPriority(data["priority"])
|
||||
data["status"] = TicketStatus(data["status"])
|
||||
return cls(**data)
|
||||
|
||||
3
requirements.txt
Normal file
3
requirements.txt
Normal file
@@ -0,0 +1,3 @@
|
||||
flask>=3.0
|
||||
jinja2>=3.1
|
||||
|
||||
534
static/style.css
Normal file
534
static/style.css
Normal file
@@ -0,0 +1,534 @@
|
||||
/* ── Reset & Base ──────────────────────────────────────── */
|
||||
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
:root {
|
||||
/* Arcline brand palette — dark theme */
|
||||
--clr-bg: #0a0a10;
|
||||
--clr-surface: #0f0f19;
|
||||
--clr-surface-raised: #161626;
|
||||
--clr-text: #e2e8f0;
|
||||
--clr-heading: #f1f5f9;
|
||||
--clr-muted: #7c8ba0;
|
||||
--clr-border: #1c2030;
|
||||
--clr-accent: #2dd4bf;
|
||||
--clr-accent-hover: #14b8a6;
|
||||
--clr-accent-dim: rgba(45, 212, 191, 0.10);
|
||||
--clr-accent-glow: rgba(45, 212, 191, 0.18);
|
||||
--clr-danger: #ef4444;
|
||||
--clr-danger-hover: #dc2626;
|
||||
--clr-danger-bg: rgba(239, 68, 68, 0.10);
|
||||
--clr-open: #2dd4bf;
|
||||
--clr-in-progress: #f59e0b;
|
||||
--clr-resolved: #22c55e;
|
||||
--clr-closed: #64748b;
|
||||
--clr-low: #22c55e;
|
||||
--clr-medium: #f59e0b;
|
||||
--clr-high: #f97316;
|
||||
--clr-critical: #ef4444;
|
||||
--radius: 8px;
|
||||
--radius-lg: 12px;
|
||||
--radius-xl: 16px;
|
||||
--shadow-sm: 0 1px 3px rgba(0,0,0,.45);
|
||||
--shadow: 0 4px 24px rgba(0,0,0,.5);
|
||||
--shadow-lg: 0 8px 40px rgba(0,0,0,.6);
|
||||
--max-width: 960px;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
||||
Oxygen, Ubuntu, Cantarell, sans-serif;
|
||||
background: var(--clr-bg);
|
||||
background-image:
|
||||
radial-gradient(circle at 50% 0%, rgba(45, 212, 191, 0.03) 0%, transparent 50%),
|
||||
linear-gradient(rgba(45, 212, 191, 0.015) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(45, 212, 191, 0.015) 1px, transparent 1px);
|
||||
background-size: 100% 100%, 60px 60px, 60px 60px;
|
||||
color: var(--clr-text);
|
||||
line-height: 1.65;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
a { color: var(--clr-accent); text-decoration: none; transition: color 0.18s, opacity 0.18s; }
|
||||
a:hover { color: var(--clr-accent-hover); text-decoration: none; }
|
||||
|
||||
/* ── Layout ────────────────────────────────────────────── */
|
||||
|
||||
.container {
|
||||
max-width: var(--max-width);
|
||||
margin: 0 auto;
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
|
||||
main.container {
|
||||
flex: 1;
|
||||
padding-top: 2.5rem;
|
||||
padding-bottom: 5rem;
|
||||
}
|
||||
|
||||
/* ── Header ────────────────────────────────────────────── */
|
||||
|
||||
.site-header {
|
||||
background: var(--clr-surface);
|
||||
border-bottom: 1px solid var(--clr-border);
|
||||
padding: 0.9rem 0;
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
}
|
||||
.site-header .container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.logo {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
color: var(--clr-heading);
|
||||
letter-spacing: -0.4px;
|
||||
}
|
||||
.logo .accent { color: var(--clr-accent); }
|
||||
.logo:hover { color: var(--clr-heading); text-decoration: none; }
|
||||
.logo:hover .accent { color: var(--clr-accent-hover); }
|
||||
.site-header nav { display: flex; align-items: center; gap: 1rem; }
|
||||
.site-header nav a {
|
||||
color: var(--clr-muted);
|
||||
font-size: 0.88rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.1px;
|
||||
}
|
||||
.site-header nav a:hover { color: var(--clr-text); }
|
||||
|
||||
/* ── Footer ────────────────────────────────────────────── */
|
||||
|
||||
.site-footer {
|
||||
background: var(--clr-surface);
|
||||
border-top: 1px solid var(--clr-border);
|
||||
padding: 1.5rem 0;
|
||||
text-align: center;
|
||||
font-size: 0.8rem;
|
||||
color: var(--clr-muted);
|
||||
margin-top: auto;
|
||||
letter-spacing: -0.1px;
|
||||
}
|
||||
|
||||
/* ── Buttons ───────────────────────────────────────────── */
|
||||
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
padding: 0.55rem 1.1rem;
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius);
|
||||
font-size: 0.88rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background 0.18s, color 0.18s, border-color 0.18s, box-shadow 0.18s, transform 0.12s;
|
||||
font-family: inherit;
|
||||
letter-spacing: -0.15px;
|
||||
}
|
||||
.btn:hover { text-decoration: none; }
|
||||
.btn:active { transform: scale(0.985); }
|
||||
|
||||
.btn-primary {
|
||||
background: var(--clr-accent);
|
||||
color: #0a0a10;
|
||||
border-color: var(--clr-accent);
|
||||
font-weight: 600;
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background: var(--clr-accent-hover);
|
||||
border-color: var(--clr-accent-hover);
|
||||
color: #0a0a10;
|
||||
box-shadow: 0 0 28px rgba(45, 212, 191, 0.3);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: var(--clr-surface-raised);
|
||||
border-color: var(--clr-border);
|
||||
color: var(--clr-text);
|
||||
}
|
||||
.btn-secondary:hover {
|
||||
background: var(--clr-border);
|
||||
border-color: rgba(45, 212, 191, 0.25);
|
||||
box-shadow: 0 0 16px rgba(45, 212, 191, 0.06);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: var(--clr-danger);
|
||||
color: #fff;
|
||||
border-color: var(--clr-danger);
|
||||
}
|
||||
.btn-danger:hover {
|
||||
background: var(--clr-danger-hover);
|
||||
border-color: var(--clr-danger-hover);
|
||||
box-shadow: 0 0 28px rgba(239, 68, 68, 0.25);
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
background: transparent;
|
||||
color: var(--clr-muted);
|
||||
border-color: transparent;
|
||||
}
|
||||
.btn-ghost:hover {
|
||||
color: var(--clr-text);
|
||||
background: var(--clr-surface-raised);
|
||||
border-color: var(--clr-border);
|
||||
}
|
||||
|
||||
.btn-sm { padding: 0.3rem 0.7rem; font-size: 0.8rem; }
|
||||
|
||||
/* ── Inputs ────────────────────────────────────────────── */
|
||||
|
||||
.input {
|
||||
width: 100%;
|
||||
padding: 0.6rem 0.85rem;
|
||||
border: 1px solid var(--clr-border);
|
||||
border-radius: var(--radius);
|
||||
font-size: 0.9rem;
|
||||
font-family: inherit;
|
||||
background: var(--clr-surface);
|
||||
color: var(--clr-text);
|
||||
transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
|
||||
letter-spacing: -0.1px;
|
||||
}
|
||||
.input::placeholder { color: var(--clr-muted); opacity: 0.55; }
|
||||
.input:focus {
|
||||
outline: none;
|
||||
border-color: var(--clr-accent);
|
||||
box-shadow: 0 0 0 3px var(--clr-accent-dim), 0 0 20px rgba(45, 212, 191, 0.08);
|
||||
background: var(--clr-surface-raised);
|
||||
}
|
||||
.search-input { max-width: 320px; }
|
||||
.filter-select { max-width: 180px; }
|
||||
textarea.input { resize: vertical; }
|
||||
select.input {
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 0.75rem center;
|
||||
padding-right: 2.25rem;
|
||||
}
|
||||
select.input option {
|
||||
background: var(--clr-surface-raised);
|
||||
color: var(--clr-text);
|
||||
}
|
||||
|
||||
/* ── Forms ─────────────────────────────────────────────── */
|
||||
|
||||
.form-container {
|
||||
background: var(--clr-surface);
|
||||
border: 1px solid var(--clr-border);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 2.25rem;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
.form-group { margin-bottom: 1.35rem; }
|
||||
.form-group label {
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
font-size: 0.84rem;
|
||||
margin-bottom: 0.4rem;
|
||||
color: var(--clr-muted);
|
||||
letter-spacing: -0.1px;
|
||||
}
|
||||
.required { color: var(--clr-danger); }
|
||||
.form-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }
|
||||
.form-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.75rem;
|
||||
margin-top: 1.75rem;
|
||||
padding-top: 1.35rem;
|
||||
border-top: 1px solid var(--clr-border);
|
||||
}
|
||||
|
||||
/* ── Alerts ────────────────────────────────────────────── */
|
||||
|
||||
.alert {
|
||||
padding: 0.85rem 1.1rem;
|
||||
border-radius: var(--radius);
|
||||
margin-bottom: 1.5rem;
|
||||
font-size: 0.85rem;
|
||||
letter-spacing: -0.1px;
|
||||
}
|
||||
.alert-error {
|
||||
background: rgba(245, 158, 11, 0.10);
|
||||
border: 1px solid rgba(245, 158, 11, 0.25);
|
||||
color: #fbbf24;
|
||||
}
|
||||
|
||||
/* ── Page Header ───────────────────────────────────────── */
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 2rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
.page-header h1 {
|
||||
font-size: 1.6rem;
|
||||
color: var(--clr-heading);
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
.action-buttons { display: flex; gap: 0.5rem; align-items: center; }
|
||||
.back-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
font-size: 0.82rem;
|
||||
color: var(--clr-muted);
|
||||
margin-bottom: 0.35rem;
|
||||
letter-spacing: -0.1px;
|
||||
}
|
||||
.back-link:hover { color: var(--clr-accent); }
|
||||
|
||||
/* ── Stats Bar ─────────────────────────────────────────── */
|
||||
|
||||
.stats-bar {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.stat {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 0.7rem 1.35rem;
|
||||
background: var(--clr-surface);
|
||||
border: 1px solid var(--clr-border);
|
||||
border-radius: var(--radius);
|
||||
transition: background 0.18s, border-color 0.18s, box-shadow 0.18s;
|
||||
min-width: 82px;
|
||||
}
|
||||
.stat:hover {
|
||||
text-decoration: none;
|
||||
border-color: rgba(45, 212, 191, 0.35);
|
||||
background: var(--clr-surface-raised);
|
||||
box-shadow: 0 0 20px rgba(45, 212, 191, 0.06);
|
||||
}
|
||||
.stat.active {
|
||||
border-color: var(--clr-accent);
|
||||
background: var(--clr-accent-dim);
|
||||
box-shadow: 0 0 24px rgba(45, 212, 191, 0.10);
|
||||
}
|
||||
.stat-num {
|
||||
font-size: 1.35rem;
|
||||
font-weight: 800;
|
||||
color: var(--clr-heading);
|
||||
letter-spacing: -0.8px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.stat.active .stat-num { color: var(--clr-accent); }
|
||||
.stat-label {
|
||||
font-size: 0.7rem;
|
||||
color: var(--clr-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.6px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ── Filters ───────────────────────────────────────────── */
|
||||
|
||||
.filters {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* ── Ticket List ───────────────────────────────────────── */
|
||||
|
||||
.ticket-list { display: flex; flex-direction: column; gap: 0.75rem; }
|
||||
|
||||
.ticket-card {
|
||||
display: block;
|
||||
background: var(--clr-surface);
|
||||
border: 1px solid var(--clr-border);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 1.35rem;
|
||||
transition: border-color 0.2s, box-shadow 0.2s, background 0.2s, transform 0.15s;
|
||||
color: var(--clr-text);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
.ticket-card:hover {
|
||||
text-decoration: none;
|
||||
border-color: rgba(45, 212, 191, 0.4);
|
||||
box-shadow: 0 0 36px rgba(45, 212, 191, 0.12), var(--shadow);
|
||||
background: var(--clr-surface-raised);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.ticket-card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 0.55rem;
|
||||
}
|
||||
.ticket-id {
|
||||
font-size: 0.76rem;
|
||||
color: var(--clr-accent);
|
||||
font-weight: 600;
|
||||
font-family: "SF Mono", "Fira Code", "JetBrains Mono", "Cascadia Code", monospace;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
.ticket-card-title {
|
||||
font-size: 1.12rem;
|
||||
margin-bottom: 0.4rem;
|
||||
color: var(--clr-heading);
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.3px;
|
||||
}
|
||||
.ticket-card-desc {
|
||||
font-size: 0.88rem;
|
||||
color: var(--clr-muted);
|
||||
margin-bottom: 0.85rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.ticket-card-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.85rem;
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
.assignee { color: var(--clr-muted); }
|
||||
.date { color: var(--clr-muted); }
|
||||
|
||||
/* ── Badges ────────────────────────────────────────────── */
|
||||
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0.22rem 0.65rem;
|
||||
border-radius: 999px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
text-transform: capitalize;
|
||||
letter-spacing: -0.1px;
|
||||
}
|
||||
|
||||
/* status badges */
|
||||
.badge-open { background: rgba(45, 212, 191, 0.14); color: var(--clr-open); }
|
||||
.badge-in_progress { background: rgba(245, 158, 11, 0.14); color: var(--clr-in-progress); }
|
||||
.badge-resolved { background: rgba(34, 197, 94, 0.14); color: var(--clr-resolved); }
|
||||
.badge-closed { background: rgba(100, 116, 139, 0.14); color: var(--clr-closed); }
|
||||
|
||||
/* priority badges */
|
||||
.badge-priority { text-transform: uppercase; letter-spacing: 0.6px; font-size: 0.66rem; }
|
||||
.badge-p-low { background: rgba(34, 197, 94, 0.14); color: var(--clr-low); }
|
||||
.badge-p-medium { background: rgba(245, 158, 11, 0.14); color: var(--clr-medium); }
|
||||
.badge-p-high { background: rgba(249, 115, 22, 0.14); color: var(--clr-high); }
|
||||
.badge-p-critical { background: rgba(239, 68, 68, 0.14); color: var(--clr-critical); }
|
||||
|
||||
/* project badge */
|
||||
.badge-project { background: rgba(99, 102, 241, 0.14); color: #a5b4fc; }
|
||||
|
||||
/* ── Ticket Detail ─────────────────────────────────────── */
|
||||
|
||||
.ticket-detail-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 280px;
|
||||
gap: 1.5rem;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.ticket-main {
|
||||
background: var(--clr-surface);
|
||||
border: 1px solid var(--clr-border);
|
||||
border-radius: var(--radius-xl);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.ticket-section { padding: 1.65rem; }
|
||||
.ticket-section + .ticket-section {
|
||||
border-top: 1px solid var(--clr-border);
|
||||
}
|
||||
.ticket-section h3 {
|
||||
font-size: 0.78rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.7px;
|
||||
color: var(--clr-muted);
|
||||
margin-bottom: 0.85rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.ticket-description {
|
||||
line-height: 1.85;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
color: var(--clr-text);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
/* ── Sidebar ───────────────────────────────────────────── */
|
||||
|
||||
.ticket-sidebar {
|
||||
position: sticky;
|
||||
top: 1.5rem;
|
||||
}
|
||||
|
||||
.ticket-meta-card {
|
||||
background: var(--clr-surface);
|
||||
border: 1px solid var(--clr-border);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 1.35rem;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.meta-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.6rem 0;
|
||||
font-size: 0.88rem;
|
||||
}
|
||||
|
||||
.meta-label {
|
||||
font-weight: 600;
|
||||
color: var(--clr-muted);
|
||||
font-size: 0.76rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.4px;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: none;
|
||||
border-top: 1px solid var(--clr-border);
|
||||
margin: 0.55rem 0;
|
||||
}
|
||||
|
||||
/* ── Empty State ───────────────────────────────────────── */
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 5rem 1rem;
|
||||
color: var(--clr-muted);
|
||||
}
|
||||
.empty-state p {
|
||||
margin-bottom: 1.25rem;
|
||||
font-size: 1.05rem;
|
||||
color: var(--clr-muted);
|
||||
letter-spacing: -0.2px;
|
||||
}
|
||||
|
||||
/* ── Utility ───────────────────────────────────────────── */
|
||||
|
||||
.muted { color: var(--clr-muted); }
|
||||
|
||||
/* ── Responsive ────────────────────────────────────────── */
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.ticket-detail-grid { grid-template-columns: 1fr; }
|
||||
.form-row { grid-template-columns: 1fr; }
|
||||
.page-header { flex-direction: column; }
|
||||
.stats-bar { justify-content: center; }
|
||||
}
|
||||
|
||||
134
store.py
Normal file
134
store.py
Normal file
@@ -0,0 +1,134 @@
|
||||
"""JSON-based data store for ticket persistence."""
|
||||
|
||||
import json
|
||||
import os
|
||||
import threading
|
||||
from pathlib import Path
|
||||
from typing import Optional
|
||||
|
||||
from models import Ticket
|
||||
|
||||
DATA_DIR = Path(__file__).parent / "data"
|
||||
DATA_FILE = DATA_DIR / "tickets.json"
|
||||
|
||||
|
||||
class TicketStore:
|
||||
"""Thread-safe JSON-backed ticket store."""
|
||||
|
||||
def __init__(self, filepath: Path = DATA_FILE) -> None:
|
||||
self._filepath = filepath
|
||||
self._lock = threading.Lock()
|
||||
self._next_id = 1
|
||||
self._tickets: dict[int, Ticket] = {}
|
||||
self._load()
|
||||
|
||||
# ── persistence ──────────────────────────────────────────────
|
||||
|
||||
def _load(self) -> None:
|
||||
if not self._filepath.exists():
|
||||
self._save()
|
||||
return
|
||||
with open(self._filepath) as fh:
|
||||
raw: list[dict] = json.load(fh)
|
||||
|
||||
self._tickets.clear()
|
||||
max_id = 0
|
||||
for item in raw:
|
||||
ticket = Ticket.from_dict(item)
|
||||
self._tickets[ticket.id] = ticket
|
||||
if ticket.id and ticket.id > max_id:
|
||||
max_id = ticket.id
|
||||
self._next_id = max_id + 1
|
||||
|
||||
def _save(self) -> None:
|
||||
self._filepath.parent.mkdir(parents=True, exist_ok=True)
|
||||
data = [t.to_dict() for t in sorted(self._tickets.values(), key=lambda t: t.id or 0)]
|
||||
with open(self._filepath, "w") as fh:
|
||||
json.dump(data, fh, indent=2)
|
||||
|
||||
# ── CRUD ─────────────────────────────────────────────────────
|
||||
|
||||
def list_tickets(
|
||||
self,
|
||||
status: Optional[str] = None,
|
||||
priority: Optional[str] = None,
|
||||
search: Optional[str] = None,
|
||||
project: Optional[str] = None,
|
||||
) -> list[Ticket]:
|
||||
tickets = list(self._tickets.values())
|
||||
|
||||
if status:
|
||||
tickets = [t for t in tickets if t.status.value == status]
|
||||
if priority:
|
||||
tickets = [t for t in tickets if t.priority.value == priority]
|
||||
if project:
|
||||
tickets = [t for t in tickets if t.project.lower() == project.lower()]
|
||||
if search:
|
||||
q = search.lower()
|
||||
tickets = [
|
||||
t
|
||||
for t in tickets
|
||||
if q in t.title.lower()
|
||||
or q in t.description.lower()
|
||||
or q in t.assignee.lower()
|
||||
or q in t.project.lower()
|
||||
]
|
||||
|
||||
return sorted(tickets, key=lambda t: t.id or 0, reverse=True)
|
||||
|
||||
def get_ticket(self, ticket_id: int) -> Optional[Ticket]:
|
||||
return self._tickets.get(ticket_id)
|
||||
|
||||
def create_ticket(self, ticket: Ticket) -> Ticket:
|
||||
with self._lock:
|
||||
ticket.id = self._next_id
|
||||
self._next_id += 1
|
||||
self._tickets[ticket.id] = ticket
|
||||
self._save()
|
||||
return ticket
|
||||
|
||||
def update_ticket(self, ticket_id: int, updates: dict) -> Optional[Ticket]:
|
||||
ticket = self._tickets.get(ticket_id)
|
||||
if ticket is None:
|
||||
return None
|
||||
|
||||
with self._lock:
|
||||
for key, value in updates.items():
|
||||
if hasattr(ticket, key):
|
||||
setattr(ticket, key, value)
|
||||
from datetime import datetime, timezone
|
||||
|
||||
ticket.updated_at = datetime.now(timezone.utc).isoformat()
|
||||
self._save()
|
||||
return ticket
|
||||
|
||||
def delete_ticket(self, ticket_id: int) -> bool:
|
||||
with self._lock:
|
||||
if ticket_id in self._tickets:
|
||||
del self._tickets[ticket_id]
|
||||
self._save()
|
||||
return True
|
||||
return False
|
||||
|
||||
def count_by_status(self) -> dict[str, int]:
|
||||
counts: dict[str, int] = {}
|
||||
for t in self._tickets.values():
|
||||
counts[t.status.value] = counts.get(t.status.value, 0) + 1
|
||||
return counts
|
||||
|
||||
def get_projects(self) -> list[str]:
|
||||
"""Return a sorted list of unique, non-empty project names."""
|
||||
projects = {t.project.strip() for t in self._tickets.values() if t.project.strip()}
|
||||
return sorted(projects)
|
||||
|
||||
|
||||
# Global singleton store
|
||||
_store: Optional[TicketStore] = None
|
||||
|
||||
|
||||
def get_store() -> TicketStore:
|
||||
global _store
|
||||
if _store is None:
|
||||
_store = TicketStore()
|
||||
return _store
|
||||
|
||||
31
templates/base.html
Normal file
31
templates/base.html
Normal file
@@ -0,0 +1,31 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{% block title %}Arcline Tickets{% endblock %}</title>
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
|
||||
</head>
|
||||
<body>
|
||||
<header class="site-header">
|
||||
<div class="container">
|
||||
<a href="{{ url_for('index') }}" class="logo">Arcline <span class="accent">Tickets</span></a>
|
||||
<nav>
|
||||
<a href="{{ url_for('index') }}">All Tickets</a>
|
||||
<a href="{{ url_for('create_ticket') }}" class="btn btn-primary btn-sm">+ New Ticket</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="container">
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="container">
|
||||
<p>Arcline Tickets — Built with Python, Flask & Jinja2</p>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
73
templates/create.html
Normal file
73
templates/create.html
Normal file
@@ -0,0 +1,73 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}New Ticket{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="page-header">
|
||||
<h1>Create New Ticket</h1>
|
||||
</div>
|
||||
|
||||
<div class="form-container">
|
||||
{% if error %}
|
||||
<div class="alert alert-error">{{ error }}</div>
|
||||
{% endif %}
|
||||
|
||||
<form method="post" class="ticket-form">
|
||||
<div class="form-group">
|
||||
<label for="title">Title <span class="required">*</span></label>
|
||||
<input type="text" id="title" name="title" class="input"
|
||||
value="{{ ticket.title if ticket else '' }}" required autofocus
|
||||
placeholder="Brief summary of the issue">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="description">Description</label>
|
||||
<textarea id="description" name="description" class="input" rows="6"
|
||||
placeholder="Detailed description of the issue...">{{ ticket.description if ticket else '' }}</textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="priority">Priority</label>
|
||||
<select id="priority" name="priority" class="input">
|
||||
{% for val, label in priorities %}
|
||||
<option value="{{ val }}" {% if ticket and ticket.priority.value == val %}selected{% endif %}>
|
||||
{{ label }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="status">Status</label>
|
||||
<select id="status" name="status" class="input">
|
||||
{% for val, label in statuses %}
|
||||
<option value="{{ val }}" {% if ticket and ticket.status.value == val %}selected{% elif val == 'open' %}selected{% endif %}>
|
||||
{{ label }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="assignee">Assignee</label>
|
||||
<input type="text" id="assignee" name="assignee" class="input"
|
||||
value="{{ ticket.assignee if ticket else '' }}"
|
||||
placeholder="Who is responsible?">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="project">Project / Tool</label>
|
||||
<input type="text" id="project" name="project" class="input"
|
||||
value="{{ ticket.project if ticket else '' }}"
|
||||
placeholder="e.g. CLI, Web, API">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<a href="{{ url_for('index') }}" class="btn btn-ghost">Cancel</a>
|
||||
<button type="submit" class="btn btn-primary">Create Ticket</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
66
templates/detail.html
Normal file
66
templates/detail.html
Normal file
@@ -0,0 +1,66 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Ticket #{{ ticket.id }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<a href="{{ url_for('index') }}" class="back-link">← Back to tickets</a>
|
||||
<h1>#{{ ticket.id }} — {{ ticket.title }}</h1>
|
||||
</div>
|
||||
<div class="action-buttons">
|
||||
<a href="{{ url_for('edit_ticket', ticket_id=ticket.id) }}" class="btn btn-secondary">Edit</a>
|
||||
<form method="post" action="{{ url_for('delete_ticket', ticket_id=ticket.id) }}"
|
||||
onsubmit="return confirm('Delete this ticket?');" style="display:inline;">
|
||||
<button type="submit" class="btn btn-danger">Delete</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ticket-detail-grid">
|
||||
<div class="ticket-main">
|
||||
<div class="ticket-section">
|
||||
<h3>Description</h3>
|
||||
<div class="ticket-description">
|
||||
{% if ticket.description %}
|
||||
<p>{{ ticket.description }}</p>
|
||||
{% else %}
|
||||
<p class="muted">No description provided.</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside class="ticket-sidebar">
|
||||
<div class="ticket-meta-card">
|
||||
<div class="meta-row">
|
||||
<span class="meta-label">Status</span>
|
||||
<span class="badge badge-{{ ticket.status.value }}">{{ ticket.status.value.replace('_', ' ') | title }}</span>
|
||||
</div>
|
||||
<div class="meta-row">
|
||||
<span class="meta-label">Priority</span>
|
||||
<span class="badge badge-priority badge-p-{{ ticket.priority.value }}">{{ ticket.priority.value | upper }}</span>
|
||||
</div>
|
||||
<div class="meta-row">
|
||||
<span class="meta-label">Assignee</span>
|
||||
<span>{% if ticket.assignee %}{{ ticket.assignee }}{% else %}<span class="muted">Unassigned</span>{% endif %}</span>
|
||||
</div>
|
||||
{% if ticket.project %}
|
||||
<div class="meta-row">
|
||||
<span class="meta-label">Project</span>
|
||||
<span class="badge badge-project">{{ ticket.project }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
<hr>
|
||||
<div class="meta-row">
|
||||
<span class="meta-label">Created</span>
|
||||
<span class="date">{{ ticket.created_at[:19] }}</span>
|
||||
</div>
|
||||
<div class="meta-row">
|
||||
<span class="meta-label">Updated</span>
|
||||
<span class="date">{{ ticket.updated_at[:19] }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
73
templates/edit.html
Normal file
73
templates/edit.html
Normal file
@@ -0,0 +1,73 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Edit Ticket #{{ ticket.id }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="page-header">
|
||||
<h1>Edit Ticket #{{ ticket.id }}</h1>
|
||||
</div>
|
||||
|
||||
<div class="form-container">
|
||||
{% if error %}
|
||||
<div class="alert alert-error">{{ error }}</div>
|
||||
{% endif %}
|
||||
|
||||
<form method="post" class="ticket-form">
|
||||
<div class="form-group">
|
||||
<label for="title">Title <span class="required">*</span></label>
|
||||
<input type="text" id="title" name="title" class="input"
|
||||
value="{{ ticket.title }}" required autofocus
|
||||
placeholder="Brief summary of the issue">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="description">Description</label>
|
||||
<textarea id="description" name="description" class="input" rows="6"
|
||||
placeholder="Detailed description of the issue...">{{ ticket.description }}</textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="priority">Priority</label>
|
||||
<select id="priority" name="priority" class="input">
|
||||
{% for val, label in priorities %}
|
||||
<option value="{{ val }}" {% if ticket.priority.value == val %}selected{% endif %}>
|
||||
{{ label }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="status">Status</label>
|
||||
<select id="status" name="status" class="input">
|
||||
{% for val, label in statuses %}
|
||||
<option value="{{ val }}" {% if ticket.status.value == val %}selected{% endif %}>
|
||||
{{ label }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="assignee">Assignee</label>
|
||||
<input type="text" id="assignee" name="assignee" class="input"
|
||||
value="{{ ticket.assignee }}"
|
||||
placeholder="Who is responsible?">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="project">Project / Tool</label>
|
||||
<input type="text" id="project" name="project" class="input"
|
||||
value="{{ ticket.project }}"
|
||||
placeholder="e.g. CLI, Web, API">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<a href="{{ url_for('view_ticket', ticket_id=ticket.id) }}" class="btn btn-ghost">Cancel</a>
|
||||
<button type="submit" class="btn btn-primary">Save Changes</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
80
templates/index.html
Normal file
80
templates/index.html
Normal file
@@ -0,0 +1,80 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Tickets{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="page-header">
|
||||
<h1>Tickets</h1>
|
||||
<a href="{{ url_for('create_ticket') }}" class="btn btn-primary">+ New Ticket</a>
|
||||
</div>
|
||||
|
||||
{# ── stats bar ── #}
|
||||
<div class="stats-bar">
|
||||
<a href="{{ url_for('index') }}" class="stat {% if not status_filter %}active{% endif %}">
|
||||
<span class="stat-num">{{ tickets|length }}</span>
|
||||
<span class="stat-label">Total</span>
|
||||
</a>
|
||||
{% for val, label in statuses %}
|
||||
<a href="{{ url_for('index', status=val, priority=priority_filter, search=search, project=project_filter) }}"
|
||||
class="stat stat-{{ val }} {% if status_filter == val %}active{% endif %}">
|
||||
<span class="stat-num">{{ counts.get(val, 0) }}</span>
|
||||
<span class="stat-label">{{ label }}</span>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{# ── filters ── #}
|
||||
<form method="get" class="filters">
|
||||
<input type="text" name="search" placeholder="Search tickets..." value="{{ search }}"
|
||||
class="input search-input">
|
||||
<select name="priority" class="input">
|
||||
<option value="">All Priorities</option>
|
||||
{% for val, label in priorities %}
|
||||
<option value="{{ val }}" {% if priority_filter == val %}selected{% endif %}>{{ label }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
{% if projects %}
|
||||
<select name="project" class="input">
|
||||
<option value="">All Projects</option>
|
||||
{% for p in projects %}
|
||||
<option value="{{ p }}" {% if project_filter == p %}selected{% endif %}>{{ p }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
{% endif %}
|
||||
<button type="submit" class="btn btn-secondary">Filter</button>
|
||||
{% if status_filter or priority_filter or search or project_filter %}
|
||||
<a href="{{ url_for('index') }}" class="btn btn-ghost">Clear</a>
|
||||
{% endif %}
|
||||
</form>
|
||||
|
||||
{# ── ticket list ── #}
|
||||
{% if tickets %}
|
||||
<div class="ticket-list">
|
||||
{% for ticket in tickets %}
|
||||
<a href="{{ url_for('view_ticket', ticket_id=ticket.id) }}" class="ticket-card">
|
||||
<div class="ticket-card-header">
|
||||
<span class="ticket-id">#{{ ticket.id }}</span>
|
||||
<span class="badge badge-{{ ticket.status.value }}">{{ ticket.status.value.replace('_', ' ') | title }}</span>
|
||||
</div>
|
||||
<h3 class="ticket-card-title">{{ ticket.title }}</h3>
|
||||
<p class="ticket-card-desc">{{ ticket.description[:120] }}{% if ticket.description|length > 120 %}...{% endif %}</p>
|
||||
<div class="ticket-card-meta">
|
||||
<span class="badge badge-priority badge-p-{{ ticket.priority.value }}">{{ ticket.priority.value | upper }}</span>
|
||||
{% if ticket.project %}
|
||||
<span class="badge badge-project">{{ ticket.project }}</span>
|
||||
{% endif %}
|
||||
{% if ticket.assignee %}
|
||||
<span class="assignee">👤 {{ ticket.assignee }}</span>
|
||||
{% endif %}
|
||||
<span class="date">{{ ticket.created_at[:10] }}</span>
|
||||
</div>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="empty-state">
|
||||
<p>No tickets found.</p>
|
||||
<a href="{{ url_for('create_ticket') }}" class="btn btn-primary">Create the first ticket</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user