null/BillTracker
null
/
BillTracker
1
0
Fork 0
Code Issues 4 Pull Requests Packages Projects Releases 1 Wiki Activity

feat: Roadmap pulls from Forgejo issues (v0.35.1)

This commit is contained in:
null 2026-05-31 19:37:01 -05:00
parent 557378dab9
commit e4f1f58730
6 changed files with 463 additions and 194 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
HISTORY.md
View File

@ -1,5 +1,17 @@
# Bill Tracker — Changelog
## v0.35.1
### 🔧 Changed
- **Bump** — `0.35.0` → `0.35.1`
- **Roadmap pulls from Forgejo issues** — The Admin Roadmap tab now fetches live open issues from the Forgejo repository instead of parsing `FUTURE.md`. Issues are grouped into the same priority lanes (`CRITICAL` → `NICE TO HAVE`) using `priority:*` labels. Each card shows the issue title (priority prefix stripped), a 2-line body preview, all label chips rendered in their actual Forgejo colors, creation time, comment count, and a click-through link to the issue. Results are cached server-side for 5 minutes; a ↻ refresh button bypasses the cache on demand. On fetch failure the last cached result is served with a stale indicator.
- **OIDC login error logging improved** — `Issuer.discover()` failures previously produced a blank log line because the error was an `AggregateError` (empty `.message`, real causes in `.errors[]`). Both the `/login` and `/callback` handlers now log the full error, expand `err.errors[]` entries, and surface `err.cause` so network-level failures (e.g. `ETIMEDOUT`, `ENOTFOUND`) are visible in the server log.
---
## v0.35.0
### 🔧 Changed

2
client/api.js
View File

@ -255,7 +255,7 @@ export const api = {
about: () => get('/about'),
privacy: () => get('/privacy'),
aboutAdmin: () => get('/about-admin'),
roadmap: () => get('/about-admin/roadmap'),
roadmap: (refresh = false) => get(`/about-admin/roadmap${refresh ? '?refresh=1' : ''}`),
updateStatus: () => get('/version/update-status'),
checkForUpdates: () => post('/about-admin/check-updates'),
devLog: () => get('/about-admin/dev-log'),

445
client/pages/RoadmapPage.jsx
View File

@ -7,11 +7,21 @@ import {
CollapsibleContent,
CollapsibleTrigger,
} from '@/components/ui/collapsible';
import { ChevronDown, ChevronsUpDown, Map, FileText, Loader2, Users, FileCode, Clock } from 'lucide-react';
import {
AlertCircle,
ChevronDown,
CircleDot,
Clock,
ExternalLink,
FileCode,
FileText,
Loader2,
MessageCircle,
RefreshCw,
} from 'lucide-react';
import { api } from '@/api';
import { APP_VERSION } from '@/lib/version';
/* ─── Priority lanes ────────────────────────────────────────────────────────── */
/* ─── Priority lanes ─────────────────────────────────────────────────────── */
const PRIORITY_LANES = [
{ key: 'critical', emoji: '🔴', label: 'CRITICAL', borderColor: 'border-t-red-500', textColor: 'text-red-500', badgeClass: 'bg-red-500/15 text-red-500 border-red-500/20' },
@ -21,127 +31,210 @@ const PRIORITY_LANES = [
{ key: 'niceToHave', emoji: '💭', label: 'NICE TO HAVE', borderColor: 'border-t-border', textColor: 'text-muted-foreground', badgeClass: 'bg-muted/50 text-muted-foreground border-border/50' },
];
// Normalise any priority string to a lane key.
function laneForPriority(priority) {
const normalised = String(priority || '').toLowerCase().replace(/[\s_-]+/g, '');
const map = {
critical: 'critical',
high: 'high',
medium: 'medium',
low: 'low',
nicetohave: 'niceToHave',
};
return map[normalised] ?? 'low';
/* ─── Helpers ────────────────────────────────────────────────────────────── */
function priorityFromLabels(labels = []) {
for (const l of labels) {
if (l.name === 'priority:critical') return 'critical';
if (l.name === 'priority:high') return 'high';
if (l.name === 'priority:medium') return 'medium';
if (l.name === 'priority:low') return 'low';
if (l.name === 'priority:nice-to-have') return 'niceToHave';
}
return 'low';
}
/* ─── Roadmap item card ─────────────────────────────────────────────────────── */
function cleanTitle(title) {
return title.replace(/^(CRITICAL|HIGH|MEDIUM|LOW|NICE[\s-]TO[\s-]HAVE)\s*:\s*/i, '').trim();
}
function RoadmapItemCard({ item, defaultOpen }) {
const lane = PRIORITY_LANES.find(l => l.key === laneForPriority(item.priority)) ?? PRIORITY_LANES[3];
const [open, setOpen] = useState(defaultOpen);
function stripMarkdown(text) {
if (!text) return '';
return text
.replace(/#{1,6}\s+[^\n]*/g, '')
.replace(/```[\s\S]*?```/g, '')
.replace(/`([^`]+)`/g, '$1')
.replace(/\*\*([^*]+)\*\*/g, '$1')
.replace(/\*([^*]+)\*/g, '$1')
.replace(/\[([^\]]+)\]\([^)]+\)/g, '$1')
.replace(/^[-*+]\s+/gm, '')
.replace(/\n\n+/g, ' ')
.replace(/\n/g, ' ')
.replace(/\s{2,}/g, ' ')
.trim();
}
// Sync when parent toggles all cards via forceKey remount (no extra effect needed)
function timeAgo(dateStr) {
const diff = Date.now() - new Date(dateStr).getTime();
const mins = Math.floor(diff / 60000);
const hours = Math.floor(diff / 3600000);
const days = Math.floor(diff / 86400000);
if (mins < 1) return 'just now';
if (mins < 60) return `${mins}m ago`;
if (hours < 24) return `${hours}h ago`;
if (days < 30) return `${days}d ago`;
return new Date(dateStr).toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
}
function labelStyle(hex) {
const r = parseInt(hex.slice(0, 2), 16);
const g = parseInt(hex.slice(2, 4), 16);
const b = parseInt(hex.slice(4, 6), 16);
return {
backgroundColor: `rgba(${r},${g},${b},0.12)`,
color: `#${hex}`,
border: `1px solid rgba(${r},${g},${b},0.28)`,
};
}
/* ─── Label chip ─────────────────────────────────────────────────────────── */
function LabelChip({ label }) {
return (
<Collapsible open={open} onOpenChange={setOpen} className="group">
<div className="rounded-xl border border-border/60 bg-card/90 transition-shadow hover:shadow-md overflow-hidden">
{/* Trigger — always visible header */}
<CollapsibleTrigger asChild>
<button className="w-full text-left px-4 pt-3 pb-2 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2">
<div className="flex items-start justify-between gap-2">
<div className="flex-1 min-w-0">
<Badge
variant="outline"
className={`${lane.badgeClass} border text-[11px] font-semibold px-1.5 py-0 mb-1.5`}
>
{lane.emoji} {lane.label}
</Badge>
<p className="break-words text-sm font-semibold leading-snug">{item.title}</p>
</div>
<ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground mt-0.5 transition-transform duration-200 group-data-[state=open]:rotate-180" />
</div>
</button>
</CollapsibleTrigger>
{/* Meta row — always visible */}
{(item.added || item.addedBy || item.effort) && (
<div className="px-4 pb-2 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground">
{item.added && (
<span className="flex items-center gap-1">
<Clock className="h-3 w-3" />
{item.added}
</span>
)}
{item.addedBy && (
<>
<span aria-hidden="true">·</span>
<span className="flex items-center gap-1">
<Users className="h-3 w-3" />
{item.addedBy}
</span>
</>
)}
{item.effort && (
<>
<span aria-hidden="true">·</span>
<span>{item.effort}</span>
</>
)}
</div>
)}
{/* Expandable detail */}
<CollapsibleContent>
<div className="px-4 pb-4 pt-1 space-y-3 border-t border-border/40">
{item.description && (
<div>
<p className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground mb-1">Description</p>
<p className="break-words text-sm leading-relaxed">{item.description}</p>
</div>
)}
{item.rationale && (
<div>
<p className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground mb-1">Rationale</p>
<p className="break-words text-sm leading-relaxed text-muted-foreground">{item.rationale}</p>
</div>
)}
{item.implementationNotes && (
<div>
<p className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground mb-1">Implementation Notes</p>
<div className="overflow-x-auto rounded-lg border border-border/50 bg-muted/50 p-3 font-mono text-xs leading-relaxed whitespace-pre-wrap sm:text-sm">
{item.implementationNotes}
</div>
</div>
)}
</div>
</CollapsibleContent>
</div>
</Collapsible>
<span
style={labelStyle(label.color)}
className="rounded-full px-2 py-0.5 text-[10px] font-semibold leading-none whitespace-nowrap"
>
{label.name}
</span>
);
}
/* ─── Priority lane column ──────────────────────────────────────────────────── */
/* ─── Issue card ─────────────────────────────────────────────────────────── */
function PriorityLane({ lane, items, defaultOpenCards, forceKey }) {
if (items.length === 0) return null;
function IssueCard({ issue }) {
const typeLabels = issue.labels || [];
const title = cleanTitle(issue.title);
const preview = stripMarkdown(issue.body);
return (
<section aria-label={`${lane.label} priority`} className={`min-w-0 rounded-xl border border-border/60 border-t-4 ${lane.borderColor}`}>
<a
href={issue.html_url}
target="_blank"
rel="noopener noreferrer"
className="block rounded-xl border border-border/60 bg-card hover:shadow-md hover:-translate-y-0.5 transition-all duration-150 overflow-hidden group focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1"
aria-label={`Issue #${issue.number}: ${title}`}
>
{/* Title row */}
<div className="px-4 pt-3 pb-1.5 flex items-start gap-3">
<p className="flex-1 min-w-0 text-sm font-semibold leading-snug break-words">
{title}
</p>
<span className="shrink-0 font-mono text-[11px] text-muted-foreground/60 mt-px tabular-nums">
#{issue.number}
</span>
</div>
{/* Body preview */}
{preview && (
<p className="px-4 pb-2.5 text-xs text-muted-foreground line-clamp-2 leading-relaxed">
{preview}
</p>
)}
{/* Type labels */}
{typeLabels.length > 0 && (
<div className="px-4 pb-3 flex flex-wrap gap-1.5">
{typeLabels.map(label => (
<LabelChip key={label.id} label={label} />
))}
</div>
)}
{/* Footer */}
<div className="px-4 py-2 flex items-center justify-between border-t border-border/40 text-[11px] text-muted-foreground">
<div className="flex items-center gap-3">
<span className="flex items-center gap-1">
<Clock className="h-3 w-3 shrink-0" />
{timeAgo(issue.created_at)}
</span>
{issue.comments > 0 && (
<span className="flex items-center gap-1">
<MessageCircle className="h-3 w-3 shrink-0" />
{issue.comments}
</span>
)}
</div>
<ExternalLink className="h-3 w-3 opacity-0 group-hover:opacity-50 transition-opacity" />
</div>
</a>
);
}
/* ─── Priority lane ──────────────────────────────────────────────────────── */
function PriorityLane({ lane, items }) {
return (
<section
aria-label={`${lane.label} priority`}
className={`min-w-0 rounded-xl border border-border/60 border-t-4 ${lane.borderColor}`}
>
<div className="flex items-center gap-2 border-b border-border/50 px-4 py-2.5">
<span aria-hidden="true">{lane.emoji}</span>
<h3 className={`min-w-0 break-words text-xs font-bold uppercase tracking-wider ${lane.textColor}`}>{lane.label}</h3>
<span className="ml-auto text-[11px] font-semibold text-muted-foreground tabular-nums">{items.length}</span>
<h3 className={`min-w-0 text-xs font-bold uppercase tracking-wider ${lane.textColor}`}>
{lane.label}
</h3>
<span className="ml-auto text-[11px] font-semibold text-muted-foreground tabular-nums">
{items.length}
</span>
</div>
<div className="p-3 space-y-2">
{items.map(item => (
<RoadmapItemCard key={`${item.id}-${forceKey}`} item={item} defaultOpen={defaultOpenCards} />
{items.map(issue => (
<IssueCard key={issue.id} issue={issue} />
))}
</div>
</section>
);
}
/* ─── Dev log entry ─────────────────────────────────────────────────────────── */
/* ─── Stats bar ──────────────────────────────────────────────────────────── */
function StatsBar({ issues, fetchedAt, stale, onRefresh, refreshing }) {
const counts = Object.fromEntries(PRIORITY_LANES.map(l => [l.key, 0]));
issues.forEach(issue => {
const p = priorityFromLabels(issue.labels);
counts[p] = (counts[p] || 0) + 1;
});
const nonEmpty = PRIORITY_LANES.filter(l => counts[l.key] > 0);
return (
<div className="flex flex-wrap items-center gap-x-3 gap-y-2 rounded-xl border border-border/60 bg-muted/30 px-4 py-3 text-[12px]">
<span className="font-semibold">{issues.length} open</span>
{nonEmpty.map(lane => (
<React.Fragment key={lane.key}>
<span className="text-border/60" aria-hidden>·</span>
<span className={`flex items-center gap-1.5 ${lane.textColor}`}>
<span aria-hidden>{lane.emoji}</span>
<span className="font-semibold tabular-nums">{counts[lane.key]}</span>
<span className="text-muted-foreground font-normal">{lane.label}</span>
</span>
</React.Fragment>
))}
<div className="ml-auto flex items-center gap-2 text-muted-foreground">
{fetchedAt && (
<span className="text-[11px]">
{stale && <span className="text-yellow-500 mr-1">⚠ stale ·</span>}
{timeAgo(fetchedAt)}
</span>
)}
<Button
variant="ghost"
size="icon"
className="h-6 w-6"
onClick={onRefresh}
disabled={refreshing}
title="Refresh issues"
>
<RefreshCw className={`h-3.5 w-3.5 ${refreshing ? 'animate-spin' : ''}`} />
</Button>
</div>
</div>
);
}
/* ─── Dev log entry ──────────────────────────────────────────────────────── */
function DevLogEntry({ entry }) {
const [open, setOpen] = useState(false);
@ -234,56 +327,35 @@ function DevLogEntry({ entry }) {
);
}
/* ─── Main page ─────────────────────────────────────────────────────────────── */
/* ─── Main page ──────────────────────────────────────────────────────────── */
export default function RoadmapPage() {
const [roadmapData, setRoadmapData] = useState(null);
const [devLogData, setDevLogData] = useState(null);
const [roadmapLoading, setRoadmapLoading] = useState(true);
const [devLogLoading, setDevLogLoading] = useState(false);
const [roadmapError, setRoadmapError] = useState(null);
const [devLogError, setDevLogError] = useState(null);
const [roadmapData, setRoadmapData] = useState(null);
const [devLogData, setDevLogData] = useState(null);
const [roadmapLoading, setRoadmapLoading] = useState(true);
const [roadmapRefreshing,setRoadmapRefreshing]= useState(false);
const [devLogLoading, setDevLogLoading] = useState(false);
const [roadmapError, setRoadmapError] = useState(null);
const [devLogError, setDevLogError] = useState(null);
// Expand/collapse all — forceKey causes cards to remount with the new default
const [allExpanded, setAllExpanded] = useState(true);
const [forceKey, setForceKey] = useState(0);
const handleExpandToggle = () => {
setAllExpanded(prev => !prev);
setForceKey(prev => prev + 1);
};
const getIsDesktop = () => (
typeof window !== 'undefined'
&& typeof window.matchMedia === 'function'
&& window.matchMedia('(min-width: 1024px)').matches
);
const [isDesktop, setIsDesktop] = useState(getIsDesktop);
useEffect(() => {
if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return undefined;
const mq = window.matchMedia('(min-width: 1024px)');
const handler = (e) => setIsDesktop(e.matches);
setIsDesktop(mq.matches);
if (typeof mq.addEventListener === 'function') {
mq.addEventListener('change', handler);
return () => mq.removeEventListener('change', handler);
}
mq.addListener(handler);
return () => mq.removeListener(handler);
}, []);
// Fetch roadmap on mount
useEffect(() => {
let cancelled = false;
setRoadmapLoading(true);
api.roadmap()
.then(data => { if (!cancelled) setRoadmapData(data); })
.catch(err => { if (!cancelled) setRoadmapError(err.message || 'Failed to load roadmap'); })
.catch(err => { if (!cancelled) setRoadmapError(err.message || 'Failed to load issues'); })
.finally(() => { if (!cancelled) setRoadmapLoading(false); });
return () => { cancelled = true; };
}, []);
// Lazy-load dev log when the Activity tab is first opened
const handleRefresh = () => {
setRoadmapRefreshing(true);
api.roadmap(true)
.then(data => setRoadmapData(data))
.catch(() => {})
.finally(() => setRoadmapRefreshing(false));
};
const fetchDevLog = useCallback(() => {
if (devLogData || devLogLoading) return;
let cancelled = false;
@ -292,25 +364,22 @@ export default function RoadmapPage() {
.then(data => { if (!cancelled) setDevLogData(data); })
.catch(err => { if (!cancelled) setDevLogError(err.message || 'Failed to load activity log'); })
.finally(() => { if (!cancelled) setDevLogLoading(false); });
return () => { cancelled = true; };
}, [devLogData, devLogLoading]);
const version = roadmapData?.version || APP_VERSION;
const items = roadmapData?.items || [];
const grouped = PRIORITY_LANES.map(lane => ({
const issues = roadmapData?.issues || [];
const grouped = PRIORITY_LANES.map(lane => ({
...lane,
items: items.filter(item => laneForPriority(item.priority) === lane.key),
items: issues.filter(issue => priorityFromLabels(issue.labels) === lane.key),
}));
const visibleLanes = grouped.filter(lane => lane.items.length > 0);
const laneGridClass = {
1: 'grid-cols-1',
2: 'grid-cols-1 lg:grid-cols-2',
3: 'grid-cols-1 sm:grid-cols-2 xl:grid-cols-3',
4: 'grid-cols-1 sm:grid-cols-2 xl:grid-cols-4',
5: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 min-[1400px]:grid-cols-5',
}[visibleLanes.length] || 'grid-cols-1';
const defaultOpenCards = isDesktop && allExpanded;
const laneProps = { defaultOpenCards, forceKey };
const cols = visibleLanes.length;
const laneGridClass =
cols <= 1 ? 'grid-cols-1' :
cols === 2 ? 'grid-cols-1 lg:grid-cols-2' :
cols === 3 ? 'grid-cols-1 sm:grid-cols-2 xl:grid-cols-3' :
cols === 4 ? 'grid-cols-1 sm:grid-cols-2 xl:grid-cols-4' :
'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 min-[1400px]:grid-cols-5';
return (
<div className="space-y-6">
@ -319,24 +388,36 @@ export default function RoadmapPage() {
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
<div className="flex min-w-0 items-center gap-3">
<div className="flex h-10 w-10 items-center justify-center rounded-xl border border-border/70 bg-primary/10 text-primary">
<Map className="h-5 w-5" />
<CircleDot className="h-5 w-5" />
</div>
<div className="min-w-0">
<h1 className="text-2xl font-bold tracking-tight">Roadmap</h1>
<p className="text-sm text-muted-foreground">Current and upcoming features by priority</p>
<h1 className="text-2xl font-bold tracking-tight">Issues & Roadmap</h1>
<p className="text-sm text-muted-foreground">
Open issues ·{' '}
<a
href="https://dream.scheller.ltd/null/BillTracker/issues"
target="_blank"
rel="noopener noreferrer"
className="text-primary hover:underline underline-offset-4"
>
BillTracker ↗
</a>
</p>
</div>
</div>
<Badge variant="outline" className="font-mono text-sm self-start sm:self-auto">
v{version}
</Badge>
{issues.length > 0 && (
<Badge variant="outline" className="font-mono text-sm self-start sm:self-auto">
{issues.length} open
</Badge>
)}
</div>
{/* Tabs */}
<Tabs defaultValue="roadmap" onValueChange={v => { if (v === 'activity') fetchDevLog(); }} className="min-w-0">
<TabsList className="grid w-full grid-cols-2 sm:inline-flex sm:w-auto">
<TabsTrigger value="roadmap" className="gap-1.5">
<Map className="h-3.5 w-3.5" />
Roadmap
<CircleDot className="h-3.5 w-3.5" />
Issues
</TabsTrigger>
<TabsTrigger value="activity" className="gap-1.5">
<FileText className="h-3.5 w-3.5" />
@ -344,38 +425,40 @@ export default function RoadmapPage() {
</TabsTrigger>
</TabsList>
{/* ── Roadmap tab ── */}
{/* ── Issues tab ── */}
<TabsContent value="roadmap" className="mt-4">
{roadmapLoading ? (
<div className="flex items-center justify-center py-16 gap-3 text-muted-foreground">
<Loader2 className="h-5 w-5 animate-spin" />
<span className="text-sm">Loading roadmap…</span>
<span className="text-sm">Loading issues…</span>
</div>
) : roadmapError ? (
<div className="rounded-xl border border-destructive/50 bg-destructive/5 py-8 text-center">
<p className="text-destructive font-medium">Failed to load roadmap</p>
<p className="text-sm text-muted-foreground mt-1">{roadmapError}</p>
<div className="rounded-xl border border-destructive/50 bg-destructive/5 py-8 text-center space-y-2">
<div className="flex items-center justify-center gap-2 text-destructive font-medium">
<AlertCircle className="h-4 w-4" />
Failed to load issues
</div>
<p className="text-sm text-muted-foreground">{roadmapError}</p>
</div>
) : items.length === 0 ? (
) : issues.length === 0 ? (
<div className="rounded-xl border border-dashed border-border/60 py-12 text-center text-sm text-muted-foreground">
No roadmap items found.
No open issues.
</div>
) : (
<>
<div className="flex justify-end mb-3">
<Button variant="outline" size="sm" onClick={handleExpandToggle} className="gap-1.5">
<ChevronsUpDown className="h-3.5 w-3.5" />
{allExpanded ? 'Collapse All' : 'Expand All'}
</Button>
</div>
{/* Size the board to its populated lanes so sparse roadmaps stay readable. */}
<div className="space-y-4">
<StatsBar
issues={issues}
fetchedAt={roadmapData?.fetchedAt}
stale={roadmapData?.stale}
onRefresh={handleRefresh}
refreshing={roadmapRefreshing}
/>
<div className={`grid gap-4 ${laneGridClass}`}>
{visibleLanes.map(lane => (
<PriorityLane key={lane.key} lane={lane} items={lane.items} {...laneProps} />
<PriorityLane key={lane.key} lane={lane} items={lane.items} />
))}
</div>
</>
</div>
)}
</TabsContent>

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "bill-tracker",
"version": "0.35.0",
"version": "0.35.1",
"description": "Monthly bill tracking system",
"main": "server.js",
"scripts": {

154
roadmap.md Normal file
View File

@ -0,0 +1,154 @@
# Bill Tracker Roadmap
This document tracks the planned features and enhancements for Bill Tracker, organized by priority and implementation status.
## 🟡 MEDIUM Priority Items
### 🟡 Projected Cash Flow — MEDIUM
**Status:** Not implemented
**Description:**
Show users what's coming: "You'll have $X left before the 15th", "Upcoming bills before next paycheck", and a "Safe-to-spend" estimate based on starting amount, unpaid bills, and scheduled income. Fits naturally with the existing 1st/15th bucket model.
**Scope:**
- "Remaining after bills" projection per bucket (1st half / 15th half)
- "Upcoming bills before next paycheck" list
- "Safe-to-spend" estimate based on starting balance minus unpaid bills
- Scheduled income support (payday amounts)
**Rationale:**
- The 1st/15th bucket model is already built — cash flow projection is the natural next step
- Most valuable feature for day-to-day money management
- Turns a bill tracker into a financial planning tool
**Implementation Notes:**
- Requires user to enter starting balance and payday amounts (new settings fields)
- Calculate: starting amount - unpaid bills due before next payday = safe-to-spend
- Files to modify: `TrackerPage.jsx`, `routes/tracker.js`, `user_settings` table (new fields)
- Estimated effort: 8-10 hours
---
### 🟡 Recurring Payment Rules — MEDIUM
**Status:** Partially implemented
**Description:**
Auto-mark certain bills as paid on due date if `autodraft_status = assumed_paid`. Or create suggested payments awaiting confirmation. Good for autopay-heavy users.
**Scope:**
- Bills with autopay/autodraft get a "suggested payment" on their due date
- User confirms or dismisses the suggestion
- Auto-mark option: bills can be set to automatically mark as paid on due date
**Implementation Status:**
- ✅ `auto_mark_paid` column + bill edit checkbox
- ✅ `applyAutopaySuggestions()` in trackerService handles auto-mark + suggestion generation
- ✅ Confirm (`POST /api/payments/autopay-suggestions/:billId/confirm`) and dismiss (`POST /.../dismiss`) endpoints
- ✅ Suggestion UI in TrackerPage with badge + confirm/dismiss buttons
- ❌ No proactive suggestion engine — only runs when tracker loads
- ❌ No scheduled task/cron to evaluate bills and create suggestions on due date
**Remaining Work:**
- Implement scheduled task/cron to evaluate bills and create suggestions on due date
- Estimated effort remaining: 2-3 hours
---
### 🟡 Calendar Agenda Mode — MEDIUM
**Status:** Not implemented
**Description:**
Replace the month-grid calendar with an agenda view: Today / This Week / Next 14 Days. Group bills by "needs action," "autopay," "already paid." More useful when actually paying bills.
**Rationale:**
- Month grids are pretty but not actionable
- Agenda mode answers "what do I need to do right now?"
- Groups by status makes it immediately clear what needs attention
**Implementation Notes:**
- New view toggle on CalendarPage: Grid vs Agenda
- Agenda shows: Overdue → Today → This Week → Next 14 Days
- Each group sorted by due date, with action status badges
- Files to modify: `CalendarPage.jsx`, `routes/calendar.js`
- Estimated effort: 6-8 hours
---
### 🟡 Filtered Exports — MEDIUM
**Status:** Not implemented
**Description:**
Export only utilities, debts, overdue, date range, tax-relevant categories. Currently exports everything with no filtering.
**Rationale:**
- Users need "all Q1 utility bills" or "overdue payments this year" for reconciliation and tax prep
- `/api/export/user-excel` exports everything — no query params for date range, category, or status
**Implementation Notes:**
- Add query params to export endpoints: `category_id`, `start`, `end`, `status` (paid/unpaid/overdue)
- Files to modify: `routes/export.js`, `client/pages/DataPage.jsx`
- Estimated effort: 6 hours
---
## 🔵 LOW Priority Items
### 🔵 Payment Method Tracking and Summary — LOW
**Status:** Not implemented
**Description:**
The `payments` table has a `method` column (free-text) but no way to see "how much did I pay via autopay vs manual vs credit card this month."
**Implementation Notes:**
- Standardize payment methods: enum or controlled list (autopay, bank_transfer, credit_card, check, cash, other)
- Add payment method breakdown to analytics or summary page
- Files to modify: `routes/payments.js`, `AnalyticsPage.jsx`, schema migration
- Estimated effort: 4-6 hours
---
### 🔵 No Keyboard Navigation or Shortcuts — LOW
**Status:** Partially implemented
**Description:**
Only a skip link exists for keyboard accessibility. No `Cmd+K` to find a bill, no `Esc` to close modals, no arrow keys to navigate the tracker grid.
**Implementation Status:**
- ✅ `Esc` closes any open modal/dialog (via Radix Dialog default)
- ✅ `Cmd+K` / `Ctrl+K` opens command palette (`CommandPalette.jsx`)
- ❌ Arrow keys navigate tracker rows when grid is focused
**Remaining Work:**
- Implement arrow key navigation for tracker rows
- Estimated effort: 1-2 hours
---
### 🔵 Add comprehensive unit and integration tests
**Status:** Not implemented
**Description:**
Currently no unit tests exist for components or hooks. The only testing is functional tests in `test-functional.js`.
**Implementation Notes:**
- Set up Jest + React Testing Library (or vitest)
- Test key components: BillModal, TrackerPage row, BillsTableInner
- Test hooks: useAuth, custom form hooks
- Test utility functions in `client/lib/utils.js`
- Estimated effort: 8-12 hours for baseline coverage
---
## 💭 NICE TO HAVE Items
### 💭 Add consistent form state management pattern
**Status:** Not implemented
**Description:**
Form state management is inconsistent across components. Some use `useState` for each field, others use form libraries.
**Implementation Notes:**
- Consider react-hook-form for complex forms
- Create reusable form field components (InputField, SelectField, etc.)
- Standardize validation approach
- Estimated effort: 4-6 hours

42
routes/aboutAdmin.js
View File

@ -397,6 +397,23 @@ function redactSensitiveContent(content) {
.replace(/\bpassword\s*=\s*['"][^'"\s]+['"]/gi, 'password=[REDACTED]')
}
// ── Forgejo issues cache ──────────────────────────────────────────────────────
const FORGEJO_BASE = 'https://dream.scheller.ltd/api/v1/repos/null/BillTracker';
let _forgejoCache = null;
let _forgejoCacheTs = 0;
const FORGEJO_TTL_MS = 5 * 60 * 1000;
async function fetchForgejoIssues() {
const res = await fetch(
`${FORGEJO_BASE}/issues?type=issues&state=open&limit=50&page=1`,
{ headers: { Accept: 'application/json' }, signal: AbortSignal.timeout(10000) },
);
if (!res.ok) throw new Error(`Forgejo API returned ${res.status}`);
const issues = await res.json();
if (!Array.isArray(issues)) throw new Error('Unexpected Forgejo response shape');
return issues;
}
// Admin-only endpoint to serve FUTURE.md and DEVELOPMENT_LOG.md content (raw markdown, backward compat)
router.get('/', requireAuth, requireAdmin, (req, res) => {
try {
@ -423,19 +440,22 @@ router.get('/', requireAuth, requireAdmin, (req, res) => {
}
});
// Admin-only endpoint: parsed roadmap items from FUTURE.md
router.get('/roadmap', requireAuth, requireAdmin, (req, res) => {
// Admin-only endpoint: open issues from Forgejo (5-min cache, ?refresh=1 to bypass)
router.get('/roadmap', requireAuth, requireAdmin, async (req, res) => {
const now = Date.now();
const refresh = req.query.refresh === '1';
try {
const futureContent = fs.readFileSync(ALLOWED_FILES['FUTURE.md'], 'utf-8');
const sanitized = redactSensitiveContent(futureContent);
const result = parseFutureMd(sanitized);
res.json(result);
if (!refresh && _forgejoCache && now - _forgejoCacheTs < FORGEJO_TTL_MS) {
return res.json(_forgejoCache);
}
const issues = await fetchForgejoIssues();
_forgejoCache = { issues, fetchedAt: new Date().toISOString() };
_forgejoCacheTs = now;
res.json(_forgejoCache);
} catch (err) {
console.error('[aboutAdmin] Error reading FUTURE.md for roadmap');
res.status(500).json({
error: 'Failed to read roadmap data',
code: 'FILE_READ_ERROR'
});
console.error('[aboutAdmin] Forgejo issues error:', err.message);
if (_forgejoCache) return res.json({ ..._forgejoCache, stale: true });
res.status(502).json({ error: 'Failed to fetch issues from repository', code: 'FORGEJO_ERROR' });
}
});