Atlas Plan

Phase 1: Infrastructure

Purpose: Create the @config package and scaffold @services/slides with all monorepo integration points.

T-001 - Create @config workspace package

Define shared entity, unit, and brand type definitions in a new root @config package. Must be framework-agnostic (plain TypeScript).

Status: completed
Priority: P0
Dependencies: none

Acceptance

@config/package.json exists with name @config, type module
@config/entities.ts exports entity definitions (IONS, EPN)
@config/units.ts exports unit definitions per entity (WLC, TM)
@config/brands/index.ts exports brand resolver function
@config/types.ts exports Entity, Unit, Brand, Theme types
@config/index.ts re-exports all public API
@config/tsconfig.json extends @core/typescript
pnpm-workspace.yaml lists @config in packages

Notes

Keep framework-agnostic — no Vue or React imports
Brand assets (logos, SVGs) go in @config/brands/{entity}/assets/
Theme type should include: colors (primary, primaryDark, accent, background, tableHeader, tableAlt), unitOverrides map

Files

@config/package.json
@config/tsconfig.json
@config/index.ts
@config/entities.ts
@config/units.ts
@config/brands/index.ts
@config/brands/ions/theme.ts
@config/brands/epn/theme.ts
@config/types.ts
pnpm-workspace.yaml

T-002 - Scaffold @services/slides directory structure

Create the full directory tree for the Slidev service with both outer package.json (CLI) and inner @source/package.json (Slidev project).

Status: completed
Priority: P0
Dependencies: T-001

Acceptance

@services/slides/package.json exists (outer — CLI scripts)
@services/slides/@source/package.json exists (inner — Slidev project)
Directory structure created: components/, layouts/, templates/, styles/, lib/, setup/, reports/, public/
@services/slides/cli.ts stub exists
@services/slides/scripts/picker.ts stub exists
@services/slides/exports/ and @services/slides/dist/ in .gitignore
@services/slides/eslint.config.mjs extends @core/lint
@services/slides/tsconfig.json extends @core/typescript

Notes

Follow repo convention: source in @source/, outer package for CLI
Inner package.json should have scripts: dev, build, export
Outer package.json should have scripts: start (runs cli.ts via tsx)

Files

@services/slides/package.json
@services/slides/@source/package.json
@services/slides/cli.ts
@services/slides/scripts/picker.ts
@services/slides/eslint.config.mjs
@services/slides/tsconfig.json
@services/slides/.gitignore

T-003 - Configure Slidev project

Set up the Slidev Vite config, UnoCSS config, and app setup for the @source/ project.

Status: completed
Priority: P0
Dependencies: T-002

Acceptance

@source/vite.config.ts exists with Slidev type augmentation
@source/unocss.config.ts exists with base presets and brand color tokens
@source/setup/main.ts exists with defineAppSetup
@source/styles/index.ts imports base CSS
@source/styles/main.css exists with base slide styles
@source/styles/layout.css exists with layout overrides
A minimal @source/reports/IONS/2026-02/slides.md exists as test entry
slidev dev server starts without errors

Files

@services/slides/@source/vite.config.ts
@services/slides/@source/unocss.config.ts
@services/slides/@source/setup/main.ts
@services/slides/@source/styles/index.ts
@services/slides/@source/styles/main.css
@services/slides/@source/styles/layout.css
@services/slides/@source/reports/IONS/2026-02/slides.md

T-004 - Update monorepo configuration

Add slides service to all monorepo integration points: pnpm catalogs, NETWORK.yml, turbo.json, root package.json.

Status: completed
Priority: P0
Dependencies: T-002

Acceptance

pnpm-workspace.yaml has new slides catalog with Slidev dependencies
NETWORK.yml has slides service entry with port 15003 and domain slides.atlas.test
turbo.json includes @services/slides build/dev tasks
Root package.json has "slides" script
pnpm install succeeds with no resolution errors

Files

pnpm-workspace.yaml
NETWORK.yml
turbo.json
package.json

Phase 2: Layouts & Styles

Purpose: Create the visual foundation — custom Slidev layouts and base CSS styling for Atlas reports.

T-005 - Create custom layouts

Build three custom Slidev layouts: cover (entity-branded cover slide), report (standard data slide with header + content area), and section (section divider).

Status: completed
Priority: P0
Dependencies: T-003

Acceptance

layouts/cover.vue renders entity logo, report title, period, date
layouts/report.vue renders header bar with badge number + title, plus content slot
layouts/section.vue renders centered section title with optional subtitle
All layouts read frontmatter props and apply brand colors
Layouts render correctly in Slidev dev server

Files

@services/slides/@source/layouts/cover.vue
@services/slides/@source/layouts/report.vue
@services/slides/@source/layouts/section.vue

T-006 - Create base styles and lib utilities

Build the CSS foundation and shared utility functions (formatting, cn helper).

Status: completed
Priority: P0
Dependencies: T-003

Acceptance

styles/main.css has base slide typography, code block styling, transition overrides
styles/layout.css has per-layout CSS classes (.slidev-layout variants)
lib/utils.ts exports cn(), formatRupiah(), formatInteger(), formatPercent(), parsePeriod(), formatPeriodLabel()
Formatting functions match output of @services/present/@source/slides/common.ts

Notes

Port formatting logic from @services/present/@source/slides/common.ts — same Indonesian locale formatting
cn() uses clsx + tailwind-merge pattern

Files

@services/slides/@source/styles/main.css
@services/slides/@source/styles/layout.css
@services/slides/@source/lib/utils.ts

Phase 3: Data Components

Purpose: Build the Vue composables and data-rendering components that turn Report JSON into visual slides.

T-007 - Build useReportData() and useBrand() composables

Create Vue composables that load Report JSON and resolve entity/unit brand config for the current slide context.

Status: completed
Priority: P0
Dependencies: T-001, T-006

Acceptance

useReportData() loads data.json from the current report directory
useReportData() returns typed Report object matching @packages/pipeline types
useBrand() reads entity from frontmatter and resolves brand theme from @config
useBrand() supports unit-level color overrides (e.g., TM red within IONS entity)
Both composables are reactive and work with Slidev's slide context

Files

@services/slides/@source/lib/data.ts
@services/slides/@source/lib/brand.ts

T-008 - Create DataTable and StatusBadge components

Build the primary data display components used across most report slides.

Status: completed
Priority: P0
Dependencies: T-007

Acceptance

DataTable.vue renders tabular data with header row, alternating stripes, and configurable columns
DataTable.vue supports column alignment (left, center, right), formatting (currency, percent, integer), and color-coded cells
StatusBadge.vue renders status labels (Completed, On Track, Needs Attention) with appropriate colors
Components accept props matching Report JSON data shapes

Files

@services/slides/@source/components/DataTable.vue
@services/slides/@source/components/StatusBadge.vue

T-009 - Create BarChart and KpiCard components

Build chart and KPI display components for revenue comparison and summary slides.

Status: completed
Priority: P1
Dependencies: T-007

Acceptance

BarChart.vue renders horizontal or vertical bar charts from numeric data arrays
BarChart.vue supports labeled bars with value display and brand-colored fills
KpiCard.vue renders a single metric with label, value, comparison, and trend indicator
Components use brand colors from useBrand() composable

Files

@services/slides/@source/components/BarChart.vue
@services/slides/@source/components/KpiCard.vue

T-010 - Create BrandLogo component

Build a component that renders the correct entity logo based on slide context.

Status: completed
Priority: P1
Dependencies: T-007

Acceptance

BrandLogo.vue resolves entity from frontmatter and renders the corresponding logo
Supports light/dark variants based on slide layout scheme
Supports size prop (sm, md, lg)
Falls back to text-based entity name when logo asset is missing

Files

@services/slides/@source/components/BrandLogo.vue

Phase 4: Report Templates

Purpose: Port all 5 report slide types from @services/present as reusable Slidev markdown templates.

T-011 - Cover slide template

Create the cover slide template that renders entity branding, report title, and period.

Status: completed
Priority: P0
Dependencies: T-005, T-010

Acceptance

templates/cover.md uses layout: cover and renders via the cover layout
Displays entity logo, report title (e.g., "PLAN FEBRUARI 2026"), generation date
Renders branded background with entity primary colors
Works with both IONS and EPN entities

Files

@services/slides/@source/templates/cover.md

T-012 - Revenue comparison template

Create the revenue comparison slide with summary table and bar chart.

Status: completed
Priority: P0
Dependencies: T-008, T-009

Acceptance

templates/revenue-comparison.md uses layout: report with badge "1"
Renders summary table: previous month, previous year, highest, target, actual
Renders bar chart comparing the 5 revenue values
Actual cell is green (met target) or red (missed)
Loops per unit within entity

Files

@services/slides/@source/templates/revenue-comparison.md

T-013 - Key comparison template

Create the key metrics comparison table slide.

Status: completed
Priority: P0
Dependencies: T-008

Acceptance

templates/key-comparison.md uses layout: report with badge "2"
Renders table: Parameter, Previous Year Actual, Current Target, Current Actual, Gap %, Status
Rows: Total Revenue, Total Siswa Baru, Total Siswa Lanjut, Total Siswa Alumni
Status cells color-coded via StatusBadge

Files

@services/slides/@source/templates/key-comparison.md

T-014 - Program progress template

Create the program progress table slide.

Status: completed
Priority: P0
Dependencies: T-008

Acceptance

templates/program-progress.md uses layout: report with badge "3"
Renders table: Parameter, Previous Year Actual, Current Target, Current Actual, Status
Up to 12 program rows from unit.programs
Alternating row stripes

Files

@services/slides/@source/templates/program-progress.md

T-015 - School progress and channel marketing templates

Create the remaining two report slide templates.

Status: completed
Priority: P0
Dependencies: T-008

Acceptance

templates/school-progress.md uses layout: report with badge "4"
School progress renders organization matrix grouped by type (Perguruan Tinggi, SMA, SMP, SD)
templates/channel-marketing.md uses layout: report with badge "5"
Channel marketing stacks up to 2 unit tables per slide
Both templates handle variable-length data gracefully

Files

@services/slides/@source/templates/school-progress.md
@services/slides/@source/templates/channel-marketing.md

Phase 5: CLI & Picker

Purpose: Build the CLI tooling for creating, previewing, and exporting reports.

T-016 - Build CLI entry point

Create cli.ts with commands: new (scaffold report), dev (start dev server), export (PDF/PPTX), build (static web).

Status: completed
Priority: P0
Dependencies: T-003

Acceptance

cli.ts parses commands via citty: new, dev, export, build
new command scaffolds reports/{entity}/{period}/ with slides.md and data.json
dev command spawns slidev pointing at the correct report's slides.md
export command spawns slidev export with output to exports/
build command spawns slidev build with output to dist/
All commands accept --entity and --period flags
If flags not provided, delegates to picker

Notes

Use citty (already in catalog) for CLI parsing
Slidev is invoked via slidev <entry> [flags] where entry is the report's slides.md path

Files

@services/slides/cli.ts

T-017 - Build interactive picker

Create an interactive report selector (like studio's picker.ts) that scans reports/ and presents a selection prompt.

Status: completed
Priority: P1
Dependencies: T-016

Acceptance

Scans @source/reports/ for {entity}/{period}/slides.md patterns
Displays entity + period as selectable options (newest first)
Supports -y flag to auto-select newest report
Returns selected entity + period to CLI for dispatch

Notes

Use prompts or @clack/prompts for interactive selection
Pattern: fast-glob to scan, sort by period descending

Files

@services/slides/scripts/picker.ts

Phase 6: Brand System

Purpose: Implement per-entity brand themes and migrate shared constants from @services/present.

T-018 - Create IONS and EPN brand themes

Define complete brand themes in @config/brands/ with colors, font preferences, and logo assets.

Status: completed
Priority: P1
Dependencies: T-001

Acceptance

@config/brands/ions/theme.ts defines IONS brand colors, unit overrides (TM red), metadata
@config/brands/epn/theme.ts defines EPN brand colors and metadata
Logo SVG assets placed in @config/brands/{entity}/assets/
Brand resolver in @config/brands/index.ts returns correct theme for entity code
Default fallback theme exists for unknown entities

Files

@config/brands/ions/theme.ts
@config/brands/ions/assets/
@config/brands/epn/theme.ts
@config/brands/epn/assets/
@config/brands/index.ts

T-019 - Migrate @services/present color constants to @config

Refactor @services/present to import entity/unit colors from @config instead of local definitions.

Status: completed
Priority: P2
Dependencies: T-018

Acceptance

@services/present/@source/slides/common.ts imports colors from @config
resolveUnitTheme() and resolveUnitTitle() moved to or sourced from @config
@services/present still generates correct PPTX output (no regressions)
pnpm --filter @services/present start works

Notes

Ask first before modifying @services/present code
Run existing present workflow to verify no regressions

Files

@services/present/@source/slides/common.ts
@services/present/package.json (add @config dependency)

Phase 7: Export & Finalize

Purpose: Complete the export pipeline and update project documentation.

T-020 - PDF export via Playwright

Configure and test PDF export using Slidev's built-in Playwright integration.

Status: completed
Priority: P0
Dependencies: T-015, T-016

Acceptance

pnpm slides -- export --entity IONS --period 2026-02 produces a valid PDF in exports/
PDF contains all slide types with correct styling
Per-slide export option works (--per-slide)
Export handles missing data gracefully (skips empty units)

Files

@services/slides/exports/

T-021 - PPTX export via Slidev native exporter

Use Slidev's native export --format pptx path and evaluate output quality.

Status: completed
Priority: P1
Dependencies: T-020

Acceptance

Slidev native PPTX export path configured via CLI export --format pptx
pnpm slides -- export --entity IONS --period 2026-02 --format pptx produces a PPTX
Quality assessment documented (what works, what doesn't)
If quality is insufficient, document recommendation to keep @services/present for PPTX

Files

@services/slides/@source/package.json

T-022 - Update architecture documentation

Update @plan/architecture.md and @plan/state.md to reflect the new @config package and @services/slides service.

Status: completed
Priority: P1
Dependencies: T-020

Acceptance

@plan/architecture.md documents @config package and @services/slides service
@plan/architecture.md Mermaid diagrams updated to show slides in pipeline flow
@plan/state.md updated with slides service status, port, and plan reference
AGENTS.md regenerated via pnpm ai:sync if .ai/SYSTEM.md is updated

Files

@plan/architecture.md
@plan/state.md

On this page