Skip to content

[Feature Request]: Add Application Status Kanban Board — Replace Flat Status Filter with Visual Pipeline View #175

Description

@divyanshim27

Summary

Arachnode tracks three job statuses: new, applied, and ignored. The current dashboard displays these as a filtered table view accessible via status query parameters. For a tool designed to manage active job hunt pipelines, a flat table with status filters is significantly less usable than a visual Kanban board where jobs can be dragged between columns. The current index.html dashboard uses vanilla JS and Chart.js — adding a lightweight drag-and-drop Kanban is achievable without a framework rewrite.

Problem

  • The flat table view requires users to mentally track which jobs are in which stage — there is no visual pipeline representation.
  • Moving a job from new to applied currently requires an API call (PATCH /api/jobs/:id) with no visual affordance in the dashboard — the user must either use the CLI or know the API.
  • The dashboard shows aggregate counts at the top (total jobs, applied jobs, discovered contacts, drafted emails) but provides no per-job workflow management capability.
  • For a student approaching placement season (the stated use case), managing 50-100 job applications in a flat table is cognitively expensive.

Impact

  • The primary daily-driver use case — checking pipeline status and updating job progress — is more cumbersome than it should be.
  • Users revert to external tools (Notion, spreadsheets) for pipeline tracking, defeating Arachnode's dashboard purpose.

Proposed Solution

I would like to add a Kanban board view to gateway/dashboard.html using the lightweight SortableJS library:

HTML structure:

<div class="kanban-board">
  <div class="kanban-column" id="col-new" data-status="new">
    <h3>🆕 New <span class="count" id="count-new"></span></h3>
    <div class="kanban-cards" id="cards-new"></div>
  </div>
  <div class="kanban-column" id="col-applied" data-status="applied">
    <h3>✅ Applied <span class="count" id="count-applied"></span></h3>
    <div class="kanban-cards" id="cards-applied"></div>
  </div>
  <div class="kanban-column" id="col-ignored" data-status="ignored">
    <h3>❌ Ignored <span class="count" id="count-ignored"></span></h3>
    <div class="kanban-cards" id="cards-ignored"></div>
  </div>
</div>

JavaScript drag handler:

import Sortable from 'https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/+esm';

['new', 'applied', 'ignored'].forEach(status => {
  Sortable.create(document.getElementById(`cards-${status}`), {
    group: 'jobs',
    animation: 150,
    onEnd: async (evt) => {
      const jobId = evt.item.dataset.jobId;
      const newStatus = evt.to.closest('.kanban-column').dataset.status;
      await fetch(`/api/jobs/${jobId}/status`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ status: newStatus })
      });
    }
  });
});

New backend route:

@app.patch("/api/jobs/{job_id}/status")
async def update_job_status(job_id: str, body: StatusUpdate):
    await db.execute(
        "UPDATE jobs SET status = $1 WHERE id = $2",
        body.status, job_id
    )
    return {"status": "updated"}

Job card design:

<div class="job-card" data-job-id="{id}">
  <span class="company">{company}</span>
  <span class="role">{role}</span>
  <span class="source badge">{source}</span>
  <div class="actions">
    <button onclick="triggerApplyWorkflow('{id}')">⚡ Apply Workflow</button>
  </div>
</div>

Deliverables

  • Kanban board section added to gateway/dashboard.html.
  • PATCH /api/jobs/:id/status route in aggregator-service/main.py.
  • gateway/proxy.py proxy mapping for the status update endpoint.
  • Toggle button in dashboard to switch between "Table View" and "Kanban View".
  • Responsive CSS for the Kanban layout (3-column on desktop, stacked on mobile).

Labels: enhancement, feature, frontend, UX, GSSoC 2026

Could you assign this issue to me?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions