pacatui 0.1.0

package/src/components/SplashScreen.tsx

@@ -0,0 +1,25 @@
+const PACA_TEXT = `
+  ██████╗  █████╗  ██████╗ █████╗
+  ██╔══██╗██╔══██╗██╔════╝██╔══██╗
+  ██████╔╝███████║██║     ███████║
+  ██╔═══╝ ██╔══██║██║     ██╔══██║
+  ██║     ██║  ██║╚██████╗██║  ██║
+  ╚═╝     ╚═╝  ╚═╝ ╚═════╝╚═╝  ╚═╝
+`;
+
+export function SplashScreen() {
+  return (
+    <box
+      style={{
+        width: "100%",
+        height: "100%",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
+      <text>{PACA_TEXT}</text>
+      <text>Task Management for the Terminal</text>
+    </box>
+  );
+}

package/src/components/StatusBar.tsx

@@ -0,0 +1,93 @@
+interface StatusBarProps {
+	message?: string;
+	mode?: string;
+	timerRunning?: boolean;
+	currentView?: string;
+	activePanel?: string;
+}
+
+function getShortCuts(
+	currentView: string | undefined,
+	timerRunning: boolean | undefined,
+	activePanel: string | undefined,
+) {
+	const baseShortcuts = timerRunning
+		? [{ key: "s", action: "Stop Timer", color: "#ef4444" }]
+		: [{ key: "t", action: "Timer", color: "#10b981" }];
+
+	if (currentView === "timesheets") {
+		return [
+			...baseShortcuts,
+			{ key: "⇅", action: "navigate" },
+			{ key: "e", action: "edit" },
+			{ key: "d", action: "delete" },
+			{ key: "_", action: "select" },
+			{ key: "i", action: "create invoice" },
+		];
+	}
+
+	if (currentView === "invoices") {
+		return [
+			...baseShortcuts,
+			{ key: "⇅", action: "navigate" },
+			{ key: "↵", action: "open" },
+			{ key: "r", action: "refresh" },
+			{ key: "[]", action: "page" },
+		];
+	}
+
+	if (currentView === "settings") {
+		return [...baseShortcuts];
+	}
+
+	return [
+		...baseShortcuts,
+		{ key: "n", action: "New" },
+		{ key: "e", action: "Edit" },
+		{ key: "Tab", action: "Panel" },
+		{ key: "q", action: "Quit" },
+	];
+}
+
+export function StatusBar({
+	message,
+	mode,
+	timerRunning,
+	currentView,
+	activePanel,
+}: StatusBarProps) {
+	const shortcuts = getShortCuts(currentView, timerRunning, activePanel);
+
+	return (
+		<box
+			style={{
+				width: "100%",
+				height: 1,
+				flexDirection: "row",
+				justifyContent: "space-between",
+				paddingLeft: 1,
+				paddingRight: 1,
+			}}
+		>
+			<box style={{ flexDirection: "row", gap: 2 }}>
+				{mode && (
+					<text>
+						<span fg="#000000" bg="#f59e0b">
+							{" "}
+							{mode.toUpperCase().replace(/_/g, " ")}{" "}
+						</span>
+					</text>
+				)}
+				{shortcuts.map((s) => (
+					<text key={s.key}>
+						<span fg={s.color || "#3b82f6"}>{s.key}</span>
+						<span fg="#64748b"> {s.action}</span>
+					</text>
+				))}
+			</box>
+			<text fg={message?.includes("Error") ? "#ef4444" : "#10b981"}>
+				{message || "Ready"}
+			</text>
+		</box>
+	);
+}

package/src/components/TaskList.tsx

@@ -0,0 +1,143 @@
+import type { Task } from "../types.ts";
+import { STATUS_ICONS, type TaskStatus } from "../types.ts";
+import { COLORS } from "../types.ts";
+
+interface TaskListProps {
+	tasks: Task[];
+	selectedIndex: number;
+	focused: boolean;
+	projectName?: string;
+}
+
+export function TaskList({
+	tasks,
+	selectedIndex,
+	focused,
+	projectName,
+}: TaskListProps) {
+	const formatDueDate = (date: Date | null) => {
+		if (!date) return null;
+		const d = new Date(date);
+		const now = new Date();
+		const diffDays = Math.ceil(
+			(d.getTime() - now.getTime()) / (1000 * 60 * 60 * 24),
+		);
+
+		if (diffDays < 0)
+			return { text: `${Math.abs(diffDays)}d overdue`, color: "#ef4444" };
+		if (diffDays === 0) return { text: "Today", color: "#f59e0b" };
+		if (diffDays === 1) return { text: "Tomorrow", color: "#f59e0b" };
+		if (diffDays <= 7) return { text: `${diffDays}d`, color: "#3b82f6" };
+		return {
+			text: d.toLocaleDateString("en-US", { month: "short", day: "numeric" }),
+			color: "#64748b",
+		};
+	};
+
+	const getPriorityIndicator = (priority: string) => {
+		const indicators: Record<string, { symbol: string; color: string }> = {
+			urgent: { symbol: "!", color: "#ef4444" },
+			high: { symbol: "!", color: "#f59e0b" },
+			medium: { symbol: "!", color: "#3b82f6" },
+			low: { symbol: " ", color: "#64748b" },
+		};
+		return indicators[priority] || indicators.medium;
+	};
+
+	return (
+		<box
+			title={projectName ? `Tasks - ${projectName}` : "Tasks"}
+			style={{
+				border: true,
+				borderColor: focused ? COLORS.border : COLORS.borderOff,
+				flexGrow: 2,
+				flexDirection: "column",
+			}}
+		>
+			{tasks.length === 0 ? (
+				<box
+					style={{
+						flexGrow: 1,
+						alignItems: "center",
+						justifyContent: "center",
+					}}
+				>
+					<text fg="#64748b">
+						{projectName ? "No tasks in this project" : "Select a project"}
+					</text>
+					{projectName && <text fg="#475569">Press 'n' to create a task</text>}
+				</box>
+			) : (
+				<scrollbox focused={focused} style={{ flexGrow: 1 }}>
+					{tasks.map((task, index) => {
+						const isSelected = index === selectedIndex;
+						const statusIcon = STATUS_ICONS[task.status as TaskStatus] || "○";
+						const priority = getPriorityIndicator(task.priority);
+						const dueInfo = formatDueDate(task.dueDate);
+
+						return (
+							<box
+								key={task.id}
+								style={{
+									width: "100%",
+									paddingLeft: 1,
+									paddingRight: 1,
+									backgroundColor:
+										isSelected && focused
+											? COLORS.selectedRowBg
+											: "transparent",
+								}}
+							>
+								<box
+									style={{
+										flexDirection: "row",
+										justifyContent: "space-between",
+									}}
+								>
+									<box style={{ width: 2 }}>
+										<text
+											fg={
+												task.status === "done"
+													? "#10b981"
+													: task.status === "in_progress"
+														? "#f59e0b"
+														: "#64748b"
+											}
+										>
+											{statusIcon}{" "}
+										</text>
+									</box>
+									<box style={{ width: 2 }}>
+										<text fg={priority.color}>{priority.symbol}</text>
+									</box>
+									<box style={{ flexGrow: 1 }}>
+										<text
+											fg={
+												task.status === "done"
+													? "#64748b"
+													: isSelected
+														? "#ffffff"
+														: "#e2e8f0"
+											}
+											attributes={
+												task.status === "done"
+													? "strikethrough"
+													: isSelected
+														? "bold"
+														: undefined
+											}
+										>
+											{task.title}
+										</text>
+									</box>
+
+									{dueInfo && <text fg={dueInfo.color}>{dueInfo.text}</text>}
+								</box>
+							</box>
+						);
+					})}
+				</scrollbox>
+			)}
+		</box>
+	);
+}

package/src/components/Timer.tsx

@@ -0,0 +1,95 @@
+import { useState, useEffect } from "react";
+import type { RunningTimer } from "../types.ts";
+
+interface TimerProps {
+  runningTimer: RunningTimer | null;
+  onStop: () => void;
+}
+
+function formatDuration(ms: number): string {
+  const seconds = Math.floor(ms / 1000);
+  const hours = Math.floor(seconds / 3600);
+  const minutes = Math.floor((seconds % 3600) / 60);
+  const secs = seconds % 60;
+
+  if (hours > 0) {
+    return `${hours}:${minutes.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
+  }
+  return `${minutes}:${secs.toString().padStart(2, "0")}`;
+}
+
+export function formatDurationHuman(ms: number): string {
+  const seconds = Math.floor(ms / 1000);
+  const hours = Math.floor(seconds / 3600);
+  const minutes = Math.floor((seconds % 3600) / 60);
+
+  if (hours > 0 && minutes > 0) {
+    return `${hours}h ${minutes}m`;
+  } else if (hours > 0) {
+    return `${hours}h`;
+  } else if (minutes > 0) {
+    return `${minutes}m`;
+  }
+  return "<1m";
+}
+
+export function Timer({ runningTimer, onStop }: TimerProps) {
+  const [elapsed, setElapsed] = useState(0);
+
+  useEffect(() => {
+    if (!runningTimer) {
+      setElapsed(0);
+      return;
+    }
+
+    const updateElapsed = () => {
+      const start = new Date(runningTimer.startTime).getTime();
+      setElapsed(Date.now() - start);
+    };
+
+    updateElapsed();
+    const interval = setInterval(updateElapsed, 1000);
+
+    return () => clearInterval(interval);
+  }, [runningTimer]);
+
+  if (!runningTimer) {
+    return (
+      <box style={{ flexDirection: "row", alignItems: "center", gap: 1 }}>
+        <text fg="#64748b">No timer running</text>
+        <text>
+          <span fg="#475569">[</span>
+          <span fg="#10b981">t</span>
+          <span fg="#475569">] Start</span>
+        </text>
+      </box>
+    );
+  }
+
+  const earnings =
+    runningTimer.project.hourlyRate != null
+      ? (elapsed / 3600000) * runningTimer.project.hourlyRate
+      : null;
+
+  return (
+    <box style={{ flexDirection: "row", alignItems: "center", gap: 1 }}>
+      <text>
+        <span fg="#ef4444">●</span>
+      </text>
+      <text fg={runningTimer.project.color} attributes="bold">
+        {runningTimer.project.name}
+      </text>
+      <text fg="#f59e0b" attributes="bold">
+        {formatDuration(elapsed)}
+      </text>
+      {earnings !== null && (
+        <text fg="#10b981">${earnings.toFixed(2)}</text>
+      )}
+      <text>
+        <span fg="#475569">[</span>
+        <span fg="#ef4444">s</span>
+        <span fg="#475569">] Stop</span>
+      </text>
+    </box>
+  );
+}

package/src/components/TimerModals.tsx

@@ -0,0 +1,120 @@
+import { useState } from "react";
+import { useKeyboard } from "@opentui/react";
+import { COLORS, type ProjectWithTaskCounts } from "../types.ts";
+import { usePaste } from "../hooks/usePaste";
+import Modal from "./Modal.tsx";
+
+interface ProjectSelectModalProps {
+	projects: ProjectWithTaskCounts[];
+	onSelect: (projectId: string) => void;
+	onCancel: () => void;
+}
+
+export function ProjectSelectModal({
+	projects,
+	onSelect,
+	onCancel,
+}: ProjectSelectModalProps) {
+	const [selectedIndex, setSelectedIndex] = useState(0);
+
+	useKeyboard((key) => {
+		if (key.name === "escape") {
+			onCancel();
+			return;
+		}
+		if (key.name === "return" && projects[selectedIndex]) {
+			onSelect(projects[selectedIndex].id);
+			return;
+		}
+		if (key.name === "j" || key.name === "down") {
+			setSelectedIndex((i) => Math.min(i + 1, projects.length - 1));
+			return;
+		}
+		if (key.name === "k" || key.name === "up") {
+			setSelectedIndex((i) => Math.max(i - 1, 0));
+			return;
+		}
+	});
+
+	return (
+		<Modal title="Start Timer" height={20}>
+			<box style={{ marginTop: 1, flexGrow: 1 }}>
+				<scrollbox focused style={{ flexGrow: 1 }}>
+					{projects.map((project, index) => (
+						<box
+							key={project.id}
+							style={{
+								paddingLeft: 1,
+								paddingRight: 1,
+								backgroundColor:
+									index === selectedIndex ? "#1e40af" : "transparent",
+							}}
+						>
+							<text>
+								<span fg={project.color}>[*] </span>
+								<span
+									fg={index === selectedIndex ? "#ffffff" : "#e2e8f0"}
+									attributes={index === selectedIndex ? "bold" : undefined}
+								>
+									{project.name}
+								</span>
+								{project.hourlyRate != null && (
+									<span fg="#10b981"> ${project.hourlyRate}/hr</span>
+								)}
+							</text>
+						</box>
+					))}
+				</scrollbox>
+			</box>
+			<text fg="#64748b">Enter to select, Esc to cancel</text>
+		</Modal>
+	);
+}
+
+interface StopTimerModalProps {
+	projectName: string;
+	projectColor: string;
+	duration: string;
+	onSubmit: (description: string) => void;
+	onCancel: () => void;
+}
+
+export function StopTimerModal({
+	projectName,
+	projectColor,
+	duration,
+	onSubmit,
+	onCancel,
+}: StopTimerModalProps) {
+	const [description, setDescription] = useState("");
+	const inputRef = usePaste();
+
+	return (
+		<Modal title="Stop Timer" height={20}>
+			<box style={{ flexDirection: "row", gap: 1, marginTop: 0 }}>
+				<text fg="#ff0000">{projectName}</text>
+
+				<text fg="#f59e0b">{duration}</text>
+			</box>
+			<text fg="#94a3b8" style={{ marginTop: 1 }}>
+				What did you work on?
+			</text>
+			<box
+				style={{
+					border: true,
+					borderColor: "#475569",
+					height: 3,
+				}}
+			>
+				<input
+					ref={inputRef}
+					placeholder="Description (optional)..."
+					focused
+					onInput={setDescription}
+					onSubmit={() => onSubmit(description)}
+				/>
+			</box>
+			<text fg="#64748b">Enter to save, Esc to cancel</text>
+		</Modal>
+	);
+}

package/src/components/TimesheetView.tsx

@@ -0,0 +1,218 @@
+import {
+	COLORS,
+	type TimesheetGroup,
+	formatDateInTimezone,
+	formatTimeInTimezone,
+} from "../types.ts";
+
+interface TimesheetViewProps {
+	groups: TimesheetGroup[];
+	selectedGroupIndex: number;
+	selectedEntryIndex: number;
+	selectedEntryIds: Set<string>;
+	focused: boolean;
+	timezone: string;
+}
+
+function formatDuration(ms: number): string {
+	const totalSeconds = Math.floor(ms / 1000);
+	const hours = Math.floor(totalSeconds / 3600);
+	const minutes = Math.floor((totalSeconds % 3600) / 60);
+
+	if (hours > 0) {
+		return `${hours}h ${minutes}m`;
+	}
+	return `${minutes}m`;
+}
+
+function formatCurrency(amount: number): string {
+	return `$${amount.toFixed(2)}`;
+}
+
+// Column widths for table layout
+const COL = {
+	checkbox: 4, // [x] + space
+	date: 7, // "Jan 17" + space
+	time: 22, // "9:00 AM - 5:00 PM" + space
+	duration: 9, // "10h 30m" + space
+	amount: 10, // "$1000.00" + space
+};
+
+export function TimesheetView({
+	groups,
+	selectedGroupIndex,
+	selectedEntryIndex,
+	selectedEntryIds,
+	focused,
+	timezone,
+}: TimesheetViewProps) {
+	if (groups.length === 0) {
+		return (
+			<box
+				style={{
+					flexGrow: 1,
+					flexDirection: "column",
+					padding: 1,
+				}}
+			>
+				<box
+					style={{
+						flexDirection: "row",
+						justifyContent: "space-between",
+					}}
+				>
+					<text fg="#ffffff">Timesheets</text>
+					<text fg="#94a3b8">Uninvoiced Time</text>
+				</box>
+				<text fg={COLORS.borderOff}>{"─".repeat(56)}</text>
+				<box
+					style={{
+						flexGrow: 1,
+						justifyContent: "center",
+						alignItems: "center",
+					}}
+				>
+					<text fg="#64748b">No uninvoiced time entries</text>
+				</box>
+			</box>
+		);
+	}
+
+	return (
+		<box
+			style={{
+				flexGrow: 1,
+				flexDirection: "column",
+				padding: 1,
+			}}
+		>
+			<box
+				style={{
+					flexDirection: "row",
+					justifyContent: "space-between",
+				}}
+			>
+				<text fg="#ffffff">Timesheets</text>
+				<text fg="#94a3b8">
+					{selectedEntryIds.size > 0
+						? `${selectedEntryIds.size} selected`
+						: "Uninvoiced Time"}
+				</text>
+			</box>
+			<text fg={COLORS.borderOff}>{"─".repeat(56)}</text>
+
+			<scrollbox focused={focused} style={{ flexGrow: 1 }}>
+				{groups.map((group, groupIndex) => {
+					const isSelectedGroup = groupIndex === selectedGroupIndex;
+
+					return (
+						<box key={group.project.id} style={{ flexDirection: "column" }}>
+							{/* Project Header */}
+							<box
+								style={{
+									flexDirection: "row",
+									justifyContent: "space-between",
+									backgroundColor: isSelectedGroup ? "#1e293b" : "transparent",
+									paddingLeft: 1,
+									paddingRight: 1,
+									marginTop: groupIndex > 0 ? 1 : 0,
+								}}
+							>
+								<text>
+									<span fg={group.project.color} attributes="bold">
+										{group.project.name}
+									</span>
+									{group.project.customer && (
+										<span fg="#8b5cf6"> ({group.project.customer.name})</span>
+									)}
+									{!group.project.customer && (
+										<span fg="#ef4444"> (No customer)</span>
+									)}
+								</text>
+								<text>
+									<span fg="#94a3b8">{formatDuration(group.totalMs)}</span>
+									{group.project.hourlyRate != null && (
+										<span fg="#10b981">
+											{" "}
+											{formatCurrency(group.totalAmount)}
+										</span>
+									)}
+								</text>
+							</box>
+
+							{/* Time Entries */}
+							{group.entries.map((entry, entryIndex) => {
+								const isSelected =
+									isSelectedGroup && entryIndex === selectedEntryIndex;
+								const isChecked = selectedEntryIds.has(entry.id);
+								const duration = entry.endTime
+									? new Date(entry.endTime).getTime() -
+										new Date(entry.startTime).getTime()
+									: 0;
+								const rate = group.project.hourlyRate ?? 0;
+								const amount = (duration / 3600000) * rate;
+
+								const dateStr = formatDateInTimezone(entry.startTime, timezone);
+								const timeStart = formatTimeInTimezone(
+									entry.startTime,
+									timezone,
+								);
+								const timeEnd = entry.endTime
+									? formatTimeInTimezone(entry.endTime, timezone)
+									: "";
+								const timeRange = timeEnd
+									? `${timeStart} - ${timeEnd}`
+									: timeStart;
+								const durationStr = formatDuration(duration);
+								const amountStr = rate > 0 ? formatCurrency(amount) : "";
+
+								return (
+									<box
+										key={entry.id}
+										style={{
+											flexDirection: "row",
+											backgroundColor: isSelected
+												? COLORS.selectedRowBg
+												: "transparent",
+											paddingLeft: 2,
+											paddingRight: 1,
+										}}
+									>
+										{/* Checkbox */}
+										<box style={{ width: COL.checkbox }}>
+											<text fg={isChecked ? "#10b981" : "#64748b"}>
+												{isChecked ? "[x]" : "[ ]"}
+											</text>
+										</box>
+										{/* Date */}
+										<box style={{ width: COL.date }}>
+											<text fg="#94a3b8">{dateStr}</text>
+										</box>
+										{/* Time Range */}
+										<box style={{ width: COL.time }}>
+											<text fg="#64748b">{timeRange}</text>
+										</box>
+										{/* Duration */}
+										<box style={{ width: COL.duration }}>
+											<text fg="#94a3b8">{durationStr}</text>
+										</box>
+										{/* Amount */}
+										<box style={{ width: COL.amount }}>
+											<text fg="#10b981">{amountStr}</text>
+										</box>
+										{/* Description */}
+										<box style={{ flexGrow: 1 }}>
+											<text fg={isSelected ? "#ffffff" : "#e2e8f0"}>
+												{entry.description || ""}
+											</text>
+										</box>
+									</box>
+								);
+							})}
+						</box>
+					);
+				})}
+			</scrollbox>
+		</box>
+	);
+}