Data Sources REST API Database AI-Generated Manual Input External / GitHub Plaid / Bank

Nav · Overview

Overview

/ (portal home) · missioncontrol.datastudios.ai

Cross-app dashboard — the portal home. Pulls KPIs in parallel from MC API (clients, invoices, hours), LG API (open jobs, win rate), and CW API (articles generated, topics in queue). New screen, Phase 1 of the consolidation.

OV-1 Planned — Phase 2

Portal Home

/ (portal root)

Unified cross-app dashboard. Top-level KPIs from all three apps, recent activity stream, and quick-links to each section. Entry point for the shared megamenu.

Data Points
  • Active clients & open invoices REST API (from MC)
  • Open leads this week REST API (from LG)
  • Content pieces generated this month REST API (from CW)
  • Active AI token spend (rolling 7d) REST API (from MC)
  • Cross-app activity feed Database
Components / Visualizations
  • 4-up app KPI cards (Agency / Leads / Content / AI)
  • SharedNav megamenu (all sections)
  • Cross-app activity timeline
  • Quick-link section cards (3 apps)

Nav · Agency

Agency

/agency/* · API: missioncontrol.datastudios.ai/api/ · Port 8900

Mission Control — client relationship management, developer time tracking, financial intelligence, and AI usage analytics for DataStudios operations.

(A1) Clients

Clients

Client accounts, time entries, and invoice management

A1a

Dashboard

/ (mc root)

Primary landing page for Mission Control. Aggregated KPIs across all clients — hours billed, revenue, AI token spend, and open alerts — with a weekly activity heatmap.

Data Points
  • Analytics dashboard summary REST API GET /api/analytics/dashboard
  • Total hours this period, billed vs unbilled Database
  • Revenue and expense totals Database
  • Open alerts / anomalies count Database
  • Weekly session activity heatmap Database
Components / Visualizations
  • KpiCard — 4-up summary row
  • ActivityGrid — weekly heatmap
  • Client revenue breakdown bar chart
  • DateRangePicker for period selection
  • Alerts / anomalies notification panel
A1b

Clients

/clients

Master list of all active clients with billing configuration, contract status, and per-client revenue summaries. Edit billing rates and toggle active status inline.

Data Points
  • Client list with billing config REST API GET /api/clients
  • Hourly rate, contract type per client Database
  • Month-to-date hours per client Database
  • Active / inactive status Database
Components / Visualizations
  • Sortable clients table
  • BillingConfigDialog — inline rate editor
  • InvoiceReminderModal — send payment reminders
  • Status badges (active/paused/archived)
A1c

Time Entries

/time-entries

Granular view of every Claude session logged as a time entry. Filter by developer, client, and date range. Export-ready for billing reconciliation.

Data Points
  • Session time entries (developer, client, duration) Database queryKey: time-entries
  • Summary totals per filter set Database queryKey: time-entries-summary
  • Developer list for filter dropdown Database queryKey: developers
  • Billable vs non-billable classification Database
Components / Visualizations
  • Filterable time entries table (pagination)
  • DateRangePicker for period selection
  • Developer & client filter dropdowns
  • Summary KPI bar (total hours, billed)
  • CSV export action
A1d

Invoices

/invoices

Invoice register for all clients. Filter by status (draft / sent / paid). Create, send, and mark invoices paid without leaving the page.

Data Points
  • Invoice list with status & amounts Database queryKey: invoices
  • Client filter list Database queryKey: clients
  • Total outstanding balance Database
  • Payment due dates Database
Components / Visualizations
  • Invoice table (client, amount, status, due date)
  • Status filter tabs (All / Draft / Sent / Paid)
  • Client filter dropdown
  • New invoice button → /invoices/new
  • InvoiceReminderModal for past-due invoices
A1e

Invoice Detail

/invoices/:id · /invoices/new

Full invoice editor. Build line items from time entries, preview the invoice, set payment terms, and send directly. Also used for creating new invoices.

Data Points
  • Invoice record with line items Database queryKey: invoices
  • Client billing config (rate, terms) Database
  • Time entries to attach as line items Database
Components / Visualizations
  • Invoice header (client, period, number)
  • Line items table (editable)
  • Totals summary (subtotal, tax, total)
  • Status workflow buttons (Send / Mark Paid)
  • Print / PDF preview

(A2) Team

Team

Developer productivity, utilization, and anomaly detection

A2a

Developers

/developers

Roster of all active developers with their current-period hours, primary client allocation, and role classification. Entry point to individual developer drill-downs.

Data Points
  • Developer list with hours & client REST API GET /api/developers
  • Current-period total hours per dev Database
  • Role and active status Database
Components / Visualizations
  • Developer cards grid (avatar, hours, role)
  • Hours progress bar (vs monthly target)
  • Quick-link to Developer Detail
  • SubNav: Developers / Utilization / Anomalies
A2b

Developer Detail

/developers/:id

Individual developer profile with session history, client breakdown, AI token spend, and productivity trends. Full history of Claude sessions attributed to this developer.

Data Points
  • Developer profile & stats REST API GET /api/developers/{devId}
  • Session history with summaries Database
  • Client allocation breakdown Database
  • AI token spend over time Database
Components / Visualizations
  • Developer profile header (name, role, total hours)
  • Client allocation pie chart
  • Session activity table (date, client, duration, summary)
  • AI token usage trend chart
  • ActivityGrid heatmap (this developer)
A2c

Utilization

/developers/utilization

Cross-developer utilization matrix. Compare hours worked vs capacity targets, identify over- and under-utilized team members, and spot allocation imbalances.

Data Points
  • Time entries summary across all devs Database queryKey: time-entries-summary
  • Monthly capacity targets per developer Database
  • Utilization % (actual / target) Database
Components / Visualizations
  • Utilization table (developer × period)
  • Color-coded utilization % cells
  • DateRangePicker (week / month / quarter)
  • Capacity vs actual grouped bar chart
A2d

Anomalies

/developers/anomalies

Auto-detected anomalies in developer activity — unusual session gaps, atypical hours, unexpected client switches. Surfaced by the alert system for management review.

Data Points
  • Active alerts list REST API GET /api/alerts
  • Alert severity & type classification Database
  • Affected developer & client context Database
Components / Visualizations
  • Anomaly cards (severity badge, description, timestamp)
  • Severity filter (critical / warning / info)
  • Dismiss / acknowledge actions
  • DataSourceBadge component on each card

(A3) Financials

Financials

Revenue, expenses, cash flow, and transaction management

A3a

Revenue

/financials/revenue

Client-level revenue analysis. Gross revenue vs costs per client, profitability margins, and period-over-period comparison. Drives billing strategy decisions.

Data Points
  • Client profitability data REST API GET /api/clients/profitability
  • Gross revenue, cost, and margin per client Database
  • Period comparison (MoM / QoQ) Database
Components / Visualizations
  • Revenue by client stacked bar chart
  • Profitability table (revenue, cost, margin %)
  • DateRangePicker for period selection
  • KPI cards (total revenue, avg margin)
A3b

Expenses

/financials/expenses

Expense breakdown by category. Synced from bank transactions via Plaid. Identify largest cost centers, track category spend over time, and review uncategorized items.

Data Points
  • Transaction summary by category REST API GET /api/transactions/summary
  • Category-level expense totals Database
  • Uncategorized transaction count Database
Components / Visualizations
  • Expense donut chart by category
  • Category breakdown table (amount, % of total)
  • Top 10 transactions list
  • DateRangePicker for period selection
A3c

Cash Flow

/financials/cash

Connected bank accounts via Plaid with real-time cash in/out tracking. Waterfall chart of cash movement over the period. Identify runway and payment timing.

Data Points
  • Bank accounts & balances Plaid / Bank GET /api/plaid/accounts
  • Transaction cash-in / cash-out REST API GET /api/transactions/summary
  • Account current balances Plaid / Bank
  • Pending transactions Plaid / Bank
Components / Visualizations
  • Account balance cards (per connected account)
  • Cash flow waterfall chart (in / out / net)
  • Bank connection status indicators
  • BankConnections settings panel (sidebar)
A3d

Trends

/financials/trends

Multi-period financial trend lines. Revenue and expense trajectories over rolling windows. Identify seasonality, spending spikes, and growth rates.

Data Points
  • Transaction trend time series REST API GET /api/transactions/summary/trend
  • Rolling revenue, expenses, net per period Database
  • YoY / MoM deltas Database
Components / Visualizations
  • Multi-line trend chart (revenue, expenses, net)
  • Period granularity toggle (daily / weekly / monthly)
  • DateRangePicker for custom range
  • Trend summary KPI cards
A3e

Transaction Browser

/financials/browse

Full searchable, filterable transaction ledger. Recategorize transactions inline, apply rules, and review imported bank data. Main tool for monthly reconciliation.

Data Points
  • All transactions (date, merchant, amount, category) Database
  • Category assignments Database
  • Rule-matched auto-categories Database
  • BoA import batch history Manual Input
Components / Visualizations
  • Transactions table (sortable, paginated)
  • RecategorizePopover — inline category editor
  • Full-text search bar
  • Category & date range filters
  • BoAImport — CSV upload modal

(A4) Intelligence

Intelligence

AI usage analytics, commit tracking, and Jira project visibility

A4a

AI Usage

/ai/usage

Token consumption by developer and client across hourly and daily windows. Identify heavy usage periods, cost outliers, and which clients drive the most AI spend.

Data Points
  • Hourly AI token usage Database queryKey: ai-hourly
  • Daily AI token usage Database queryKey: ai-daily
  • Developer list for filter Database queryKey: developers-list
  • Client list for filter Database queryKey: clients-list
  • Cost estimate (tokens × rate) Database
Components / Visualizations
  • Hourly token usage heatmap
  • Daily usage bar chart (stacked by developer)
  • Developer & client filter selects
  • DateRangePicker
  • Cost estimate KPI card
A4b

AI Compare

/ai/compare

Side-by-side comparison of AI token usage between selected developers. Identify efficiency differences and benchmark against team averages.

Data Points
  • Comparative token usage per developer Database queryKey: ai-compare
  • Developer list for multi-select Database queryKey: developers-list
  • Period-over-period delta Database
Components / Visualizations
  • Developer multi-select picker (up to 4)
  • Side-by-side usage line charts
  • Comparison table (total, daily avg, cost)
  • DateRangePicker
A4c

Commits

/commits

Cross-repo commit and pull request feed. Track developer output, review PR velocity, and correlate code activity with billed hours.

Data Points
  • Commit list (author, repo, message, timestamp) External / GitHub queryKey: commits
  • Commit summary stats External / GitHub queryKey: commits-summary
  • Pull requests list External / GitHub queryKey: pull-requests
  • Developer filter Database queryKey: developers
Components / Visualizations
  • Commit feed (chronological, paginated)
  • PR list tab (status, reviewer, merge status)
  • Developer filter dropdown
  • Repo filter dropdown
  • Commits summary KPI cards
A4d

Jira

/jira/epics

Jira project visibility — epics, stories, and issue status across all active projects. Filter by project and status. Quick-link to individual issues in Jira.

Data Points
  • Jira epics & summary External / Jira GET /api/jira/summary
  • Issue list with status External / Jira GET /api/jira/issues
  • Assignee & sprint data External / Jira
Components / Visualizations
  • Epic cards with progress bars
  • Issue table (key, summary, status, assignee)
  • Project filter dropdown
  • Status filter (To Do / In Progress / Done)
  • Open-in-Jira link per issue
A4e

Jira Client Report

/jira/client-report

Client-facing project progress report generated from Jira data. Formatted for sharing — summarizes epics, completion %, and next milestones per project key.

Data Points
  • Client report data by project External / Jira GET /api/jira/client-report/{projectKey}
  • Epic completion % External / Jira
  • Open vs closed issues counts External / Jira
Components / Visualizations
  • Project key selector
  • Client-ready report layout (print-optimized)
  • Epic progress bars
  • Milestone / next steps section
  • Export / print action
A4f Planned

Activity Feed

/activity (planned)

Unified chronological feed of all DataStudios activity — commits, Jira transitions, client interactions, and invoice events. File exists (ActivityFeed.tsx) but not yet routed.

Data Points (planned)
  • Activity events (all types) REST API GET /api/activities
  • Cross-source event stream Database
Components / Visualizations (planned)
  • Infinite-scroll activity timeline
  • Event type filter (commits / jira / invoices)
  • Developer & client filter

Nav · Leads

Leads

/leads/* · API: leadgenerator.datastudios.ai/api/ · Port 8600

Lead Generator — Upwork job discovery, AI-assisted proposal drafting, application pipeline management, and proposal profile configuration for DataStudios business development.

(L1) Feed

Feed

Job discovery — ingested leads and overview metrics

L1a

Dashboard

/ (LG root)

Lead Generator home. KPIs for total jobs ingested, applications submitted, win rate, and pipeline value. Summary of recent activity and quick access to top-scored leads.

Data Points
  • Analytics summary (totals, win rate, pipeline) REST API GET /api/analytics
  • Jobs list (for preview) REST API GET /api/jobs
  • Profiles for context REST API GET /api/profiles
  • Last ingestion timestamp Database
Components / Visualizations
  • KPI summary cards (jobs, applied, won, value)
  • Top-scored jobs preview list
  • Trigger ingestion button (usesTriggerIngestion)
  • Win rate trend mini-chart
L1b

Job Feed

/feed

Full list of all ingested job postings. Filter by status, score, and keywords. Click any job to open the slide-over detail panel with proposal draft and apply actions.

Data Points
  • All jobs with status & score REST API GET /api/jobs
  • AI relevance score per job AI-Generated
  • Job status (new / reviewing / applied / archived) Database
Components / Visualizations
  • Job list (title, client, score, budget, posted)
  • Status & score filter bar
  • Keyword search
  • Job score badge (color-coded)
  • JobDetailView slide-over panel
L1c

Job Detail

Slide-over panel (triggered from Feed or Pipeline)

Full job posting detail with scoring rationale and proposal draft. Update job status, switch the active proposal profile, and launch the Application Workspace from here.

Data Points
  • Full job record (description, budget, client) REST API GET /api/jobs
  • AI score with reasoning AI-Generated
  • Proposal draft (AI-generated) AI-Generated
  • Profiles for profile selector REST API
Components / Visualizations
  • Job description full text
  • Score badge with reasoning text
  • Profile selector dropdown
  • Status update controls (useUpdateJob)
  • "Open Workspace" → /applications/:id

(L2) Pipeline

Pipeline

Kanban workflow, application management, and proposal workspaces

L2a

Pipeline

/pipeline

Drag-and-drop kanban board. Jobs flow through columns: New → Reviewing → Drafted → Applied → Won / Lost. Drag cards to update status. Click to open detail panel.

Data Points
  • All jobs (status determines column) REST API GET /api/jobs · PATCH /api/jobs/{id}
  • Job count & value per column Database
Components / Visualizations
  • DnD Kit kanban (useDraggable, useDroppable)
  • Status column headers with counts
  • Job cards (title, score badge, budget)
  • Column pipeline value totals
  • useUpdateJob for drag-to-status updates
L2b

Applications

/applications

List of all created applications — each links a job to a proposal profile and tracks draft status. Open an application to enter the full workspace for drafting and submission.

Data Points
  • Applications list (job, profile, status, created) REST API GET /api/applications
  • Draft completion status Database
  • Submission timestamp Database
Components / Visualizations
  • Applications table (job title, profile, status, date)
  • Status filter (draft / submitted / won / lost)
  • New application button
  • Open Workspace link per row
L2c

Application Workspace

/applications/:id

Full-screen proposal drafting environment. Left panel: job details. Right panel: AI-generated draft with rich-text editor. Generate, refine, and submit — all in one view.

Data Points
  • Single application record REST API GET /api/applications/{id}
  • AI-generated proposal draft AI-Generated useGenerateApplicationDraft
  • Job posting details REST API
  • Selected profile context REST API
Components / Visualizations
  • Split-pane layout (job detail / draft editor)
  • AI draft generation button (useGenerateApplicationDraft)
  • Rich-text draft editor (editable)
  • Profile selector dropdown
  • Submit application action (useSubmitApplication)
  • Save draft action (useUpdateApplication)

(L3) Profiles

Profiles

Proposal profile templates — writing style, keywords, and context

L3a

Profiles

/profiles

Manage proposal writing profiles. Each profile defines a tone, length, keyword set, and background context injected into AI-generated proposals. Set one profile as the default.

Data Points
  • Profiles list (name, tone, length, keywords) REST API GET /api/profiles
  • Default profile flag Database
  • Profile context / background text Manual Input
Components / Visualizations
  • Profile cards grid (name, tone badge, keywords)
  • Add profile modal (create form)
  • Edit / delete actions per card
  • Default profile toggle
  • Keyword tag chips

(L4) Sources & Analytics

Sources & Analytics

Job source configuration and pipeline performance analytics

L4a

Sources

/sources

Configure job ingestion sources (Upwork RSS feeds, search queries). Enable/disable sources, view last-sync timestamps, manage the ingestion scheduler, and trigger manual syncs.

Data Points
  • Platform sources list REST API GET /api/sources
  • Scheduler status (running / paused) REST API GET /api/scheduler/status
  • Last ingestion per source Database
  • Jobs ingested per source (counts) Database
Components / Visualizations
  • Sources table (name, type, last sync, job count)
  • Enable / disable toggle per source (useUpdateSource)
  • Trigger ingestion per source (useTriggerSourceIngestion)
  • Scheduler pause / resume controls
  • Global trigger ingestion button (useTriggerIngestion)
L4b

Analytics

/analytics

Pipeline performance metrics. Job-to-application conversion rates, win rates by profile and client type, score distribution histograms, and revenue won over time.

Data Points
  • Full analytics dataset REST API GET /api/analytics
  • Jobs by status, score distribution Database
  • Win rate by profile type Database
  • Revenue won (submitted × hourly rate) Database
Components / Visualizations
  • Funnel chart (ingested → applied → won)
  • Score distribution histogram
  • Win rate by profile bar chart
  • Revenue won over time line chart
  • KPI summary cards (conversion %, win %, avg score)

Nav · Content

Content

/content/* · API: contentwriter.datastudios.ai/api/ · Port 8100

Content Writer — AI-powered content generation from curated source libraries. Organize topics, pull sources (web, YouTube, PDF, book), generate drafts, and manage the content library.

(C1) Library

Library

Content dashboard and the generated content archive

C1a

Dashboard

/ (CW root)

Content Writer home. Overview of active topics, source health, and content generation pipeline. Surfaces topics with pending candidates and sources due for a sync.

Data Points
  • Topics overview (active, pending, published) REST API GET /api/topics
  • Source health stats REST API GET /api/sources/stats
  • Recent generated content REST API GET /api/content
  • Pending sync count Database
Components / Visualizations
  • Topics status summary cards
  • Source health indicator bar
  • Recent content list (latest 5 pieces)
  • Quick-link to Generate page
C1b

Library

/content

Archive of all generated content pieces. Filter by topic, status, and date. Preview, edit, publish, or delete content. Each piece links back to its generating topic.

Data Points
  • Content list with metadata REST API GET /api/content
  • Individual content piece REST API GET /api/content/{id}
  • Status (draft / published / archived) Database
  • Topic association per piece Database
Components / Visualizations
  • Content table (title, topic, status, date)
  • Status filter tabs
  • Topic filter dropdown
  • Content preview modal
  • Delete / publish inline actions

(C2) Generate

Generate

AI content generation wizard — topic → template → output

C2a

Generate

/generate

Step-by-step content generation wizard. Select a topic → choose a template → optionally suggest additional sources → generate and preview the AI-drafted piece. Save to library when satisfied.

Data Points
  • Topics list for selection REST API GET /api/topics
  • Templates list REST API GET /api/content/templates
  • AI-generated content output AI-Generated POST /api/content/generate
  • Suggested source additions AI-Generated POST /api/content/suggest-sources
Components / Visualizations
  • Topic selector (step 1)
  • Template selector (step 2)
  • Source suggestion panel (optional)
  • Generate button with loading state
  • Generated content preview (rich text)
  • Save to library action

(C3) Topics

Topics

Content topics management and per-topic source workspaces

C3a

Topics

/topics

Manage all content topics. Each topic is a content category with associated sources and generation settings. Filter by status, search by name, create new topics.

Data Points
  • Topics list with status & counts REST API GET /api/topics
  • Source count per topic Database
  • Last generated date per topic Database
  • Topic status (active / paused / archived) Database
Components / Visualizations
  • Topics grid (name, status badge, source count)
  • Status filter & search bar
  • Create topic button + modal
  • Per-topic status toggle
C3b

Topic Detail

/topics/:id

Full topic workspace. Manage associated sources, review and promote source candidates, trigger extraction and embedding, and generate content directly from this topic.

Data Points
  • Topic record REST API GET /api/topics/{id}
  • Associated sources REST API GET /api/topics/{id}/sources
  • Source candidates REST API GET /api/topics/{id}/candidates
  • Topic-level generated content REST API
  • Embedding status per source AI-Generated
Components / Visualizations
  • Topic header (name, status, description)
  • Sources tab — list with embed/extract status
  • Candidates tab — review & promote sources
  • Generate from topic button
  • Trigger extract (POST /api/topics/{id}/extract)
  • Trigger embed (POST /api/topics/{id}/embed)
  • Add sources to topic action

(C4) Sources

Sources

Global source library — web articles, YouTube, PDFs, books

C4a

Sources

/sources

Global library of all ingested sources. Add new sources by URL (web article, YouTube), PDF upload, or book metadata. View content extracted from each source. Trigger re-sync.

Data Points
  • Sources list with type & status REST API GET /api/sources
  • Source health stats REST API GET /api/sources/stats
  • Source content (extracted text) REST API GET /api/sources/{id}/content
  • Feed sync status REST API POST /api/feeds/sync
  • Source metadata (title, author, date) External / Web
Components / Visualizations
  • Sources table (title, type, status, topic count)
  • SourceCard component — expandable per source
  • Add source modal (web article / YouTube / PDF / book)
  • Source type filter tabs
  • Content preview panel (extracted text)
  • Re-sync / re-extract actions per source
  • Source stats summary bar (total, by type)