pacatui 0.1.0

package/src/components/InvoicesView.tsx

@@ -0,0 +1,297 @@
+import { COLORS } from "../types.ts";
+import type { StripeInvoiceItem } from "../stripe.ts";
+
+interface InvoicesViewProps {
+	invoices: StripeInvoiceItem[];
+	selectedIndex: number;
+	focused: boolean;
+	loading: boolean;
+	error: string | null;
+	hasStripeKey: boolean;
+	currentPage: number;
+	hasMore: boolean;
+	hasPrevious: boolean;
+}
+
+function formatCurrency(amount: number, currency: string): string {
+	return new Intl.NumberFormat("en-US", {
+		style: "currency",
+		currency: currency.toUpperCase(),
+	}).format(amount);
+}
+
+function formatDate(date: Date): string {
+	return date.toLocaleDateString("en-US", {
+		month: "short",
+		day: "numeric",
+		year: "numeric",
+	});
+}
+
+function getStatusColor(status: string): string {
+	switch (status) {
+		case "paid":
+			return "#10b981"; // green
+		case "open":
+			return "#f59e0b"; // amber
+		case "draft":
+			return "#64748b"; // gray
+		case "void":
+			return "#ef4444"; // red
+		case "uncollectible":
+			return "#ef4444"; // red
+		default:
+			return "#94a3b8";
+	}
+}
+
+// Column widths for table layout
+const COL = {
+	number: 12,
+	date: 14,
+	customer: 24,
+	status: 10,
+	amount: 12,
+};
+
+export function InvoicesView({
+	invoices,
+	selectedIndex,
+	focused,
+	loading,
+	error,
+	hasStripeKey,
+	currentPage,
+	hasMore,
+	hasPrevious,
+}: InvoicesViewProps) {
+	if (!hasStripeKey) {
+		return (
+			<box
+				style={{
+					flexGrow: 1,
+					flexDirection: "column",
+					padding: 1,
+				}}
+			>
+				<box
+					style={{
+						flexDirection: "row",
+						justifyContent: "space-between",
+					}}
+				>
+					<text fg="#ffffff">Invoices</text>
+				</box>
+				<text fg={COLORS.borderOff}>{"─".repeat(72)}</text>
+				<box
+					style={{
+						flexGrow: 1,
+						justifyContent: "center",
+						alignItems: "center",
+					}}
+				>
+					<text fg="#ef4444">No Stripe API key configured.</text>
+					<text fg="#64748b">Add one in Settings to view invoices.</text>
+				</box>
+			</box>
+		);
+	}
+
+	if (loading) {
+		return (
+			<box
+				style={{
+					flexGrow: 1,
+					flexDirection: "column",
+					padding: 1,
+				}}
+			>
+				<box
+					style={{
+						flexDirection: "row",
+						justifyContent: "space-between",
+					}}
+				>
+					<text fg="#ffffff">Invoices</text>
+				</box>
+				<text fg={COLORS.borderOff}>{"─".repeat(72)}</text>
+				<box
+					style={{
+						flexGrow: 1,
+						justifyContent: "center",
+						alignItems: "center",
+					}}
+				>
+					<text fg="#64748b">Loading invoices from Stripe...</text>
+				</box>
+			</box>
+		);
+	}
+
+	if (error) {
+		return (
+			<box
+				style={{
+					flexGrow: 1,
+					flexDirection: "column",
+					padding: 1,
+				}}
+			>
+				<box
+					style={{
+						flexDirection: "row",
+						justifyContent: "space-between",
+					}}
+				>
+					<text fg="#ffffff">Invoices</text>
+				</box>
+				<text fg={COLORS.borderOff}>{"─".repeat(72)}</text>
+				<box
+					style={{
+						flexGrow: 1,
+						justifyContent: "center",
+						alignItems: "center",
+					}}
+				>
+					<text fg="#ef4444">Error: {error}</text>
+				</box>
+			</box>
+		);
+	}
+
+	if (invoices.length === 0) {
+		return (
+			<box
+				style={{
+					flexGrow: 1,
+					flexDirection: "column",
+					padding: 1,
+				}}
+			>
+				<box
+					style={{
+						flexDirection: "row",
+						justifyContent: "space-between",
+					}}
+				>
+					<text fg="#ffffff">Invoices</text>
+				</box>
+				<text fg={COLORS.borderOff}>{"─".repeat(72)}</text>
+				<box
+					style={{
+						flexGrow: 1,
+						justifyContent: "center",
+						alignItems: "center",
+					}}
+				>
+					<text fg="#64748b">No invoices found in Stripe</text>
+				</box>
+			</box>
+		);
+	}
+
+	return (
+		<box
+			style={{
+				flexGrow: 1,
+				flexDirection: "column",
+				padding: 1,
+			}}
+		>
+			{/* Header */}
+			<box
+				style={{
+					flexDirection: "row",
+					justifyContent: "space-between",
+				}}
+			>
+				<text fg="#ffffff">Invoices</text>
+				<text fg="#94a3b8">
+					Page {currentPage} {hasMore && "| ] next"} {hasPrevious && "| [ prev"}
+				</text>
+			</box>
+			<text fg={COLORS.borderOff}>{"─".repeat(72)}</text>
+
+			{/* Column Headers */}
+			<box
+				style={{
+					flexDirection: "row",
+					paddingLeft: 1,
+					paddingRight: 1,
+				}}
+			>
+				<box style={{ width: COL.number }}>
+					<text fg="#64748b">Invoice #</text>
+				</box>
+				<box style={{ width: COL.date }}>
+					<text fg="#64748b">Date</text>
+				</box>
+				<box style={{ width: COL.customer }}>
+					<text fg="#64748b">Customer</text>
+				</box>
+				<box style={{ width: COL.status }}>
+					<text fg="#64748b">Status</text>
+				</box>
+				<box style={{ width: COL.amount, alignItems: "flex-end" }}>
+					<text fg="#64748b">Amount</text>
+				</box>
+			</box>
+			<text fg={COLORS.borderOff}>{"─".repeat(72)}</text>
+
+			{/* Invoice List */}
+			<scrollbox focused={focused} style={{ flexGrow: 1 }}>
+				{invoices.map((invoice, index) => {
+					const isSelected = index === selectedIndex;
+
+					return (
+						<box
+							key={invoice.id}
+							style={{
+								flexDirection: "row",
+								backgroundColor: isSelected
+									? COLORS.selectedRowBg
+									: "transparent",
+								paddingLeft: 1,
+								paddingRight: 1,
+							}}
+						>
+							{/* Invoice Number */}
+							<box style={{ width: COL.number }}>
+								<text fg={isSelected ? "#ffffff" : "#e2e8f0"}>
+									{invoice.number || invoice.id.slice(-8)}
+								</text>
+							</box>
+							{/* Date */}
+							<box style={{ width: COL.date }}>
+								<text fg="#94a3b8">{formatDate(invoice.created)}</text>
+							</box>
+							{/* Customer */}
+							<box style={{ width: COL.customer }}>
+								<text fg={isSelected ? "#ffffff" : "#e2e8f0"}>
+									{(invoice.customerName || invoice.customerEmail || "Unknown")
+										.slice(0, COL.customer - 2)}
+								</text>
+							</box>
+							{/* Status */}
+							<box style={{ width: COL.status }}>
+								<text fg={getStatusColor(invoice.status)}>
+									{invoice.status}
+								</text>
+							</box>
+							{/* Amount */}
+							<box style={{ width: COL.amount, alignItems: "flex-end" }}>
+								<text fg="#10b981">
+									{formatCurrency(invoice.amount, invoice.currency)}
+								</text>
+							</box>
+						</box>
+					);
+				})}
+			</scrollbox>
+
+			{/* Footer */}
+			<text fg={COLORS.borderOff}>{"─".repeat(72)}</text>
+			<text fg="#64748b">Enter to open in browser | r to refresh</text>
+		</box>
+	);
+}

package/src/components/Modal.tsx

@@ -0,0 +1,38 @@
+import { COLORS } from "../types";
+
+interface ProjectModalProps {
+  title: string;
+  height: number;
+  children: any;
+}
+
+export default function ProjectModal({
+  title,
+  height = 10,
+  children,
+}: ProjectModalProps) {
+  return (
+    <box
+      style={{
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        width: 60,
+        height,
+        marginTop: -Math.floor(height / 2),
+        marginLeft: -30,
+        border: true,
+        borderColor: COLORS.border,
+        flexDirection: "column",
+        backgroundColor: COLORS.bg,
+        padding: 1,
+        zIndex: 99999,
+      }}
+    >
+      <text fg="#ffffff" attributes="bold">
+        {title}
+      </text>
+      {children}
+    </box>
+  );
+}

package/src/components/ProjectList.tsx

@@ -0,0 +1,114 @@
+import type { ProjectWithTaskCounts } from "../types.ts";
+import { COLORS } from "../types";
+
+interface ProjectListProps {
+	projects: ProjectWithTaskCounts[];
+	selectedIndex: number;
+	focused: boolean;
+	showArchived: boolean;
+}
+
+export function ProjectList({
+	projects,
+	selectedIndex,
+	focused,
+	showArchived,
+}: ProjectListProps) {
+	const getTaskStats = (project: ProjectWithTaskCounts) => {
+		const total = project.tasks.length;
+		const done = project.tasks.filter((t) => t.status === "done").length;
+		const inProgress = project.tasks.filter(
+			(t) => t.status === "in_progress",
+		).length;
+		return { total, done, inProgress };
+	};
+
+	const projectList = projects.sort((a, b) => {
+		return a.name.toLowerCase() + b.name.toLowerCase();
+	});
+
+	return (
+		<box
+			title={`Projects${showArchived ? " (incl. archived)" : ""}`}
+			style={{
+				border: true,
+				borderColor: focused ? COLORS.border : COLORS.borderOff,
+				flexGrow: 1,
+				flexDirection: "column",
+			}}
+		>
+			{projectList.length === 0 ? (
+				<box
+					style={{
+						flexGrow: 1,
+						alignItems: "center",
+						justifyContent: "center",
+					}}
+				>
+					<text fg="#64748b">No projects yet</text>
+					<text fg="#475569">Press 'n' to create one</text>
+				</box>
+			) : (
+				<scrollbox focused={focused} style={{ flexGrow: 1 }}>
+					{projectList.map((project, index) => {
+						const isSelected = index === selectedIndex;
+						const stats = getTaskStats(project);
+
+						// Dim highlight when not focused, bright when focused
+						const bgColor = isSelected
+							? focused
+								? COLORS.selectedRowBg
+								: "#252560" // Muted version of selectedRowBg
+							: "transparent";
+
+						return (
+							<box
+								key={project.id}
+								style={{
+									width: "100%",
+									paddingLeft: 1,
+									paddingRight: 1,
+									backgroundColor: bgColor,
+								}}
+							>
+								<box
+									style={{
+										flexDirection: "row",
+										justifyContent: "space-between",
+									}}
+								>
+									<text>
+										<span fg={project.color}>
+											{project.archived ? "[ ] " : "[*] "}
+										</span>
+										<span
+											fg={isSelected ? "#ffffff" : "#e2e8f0"}
+											attributes={isSelected ? "bold" : undefined}
+										>
+											{project.name}
+										</span>
+										{project.archived && <span fg="#64748b"> (archived)</span>}
+										{project.hourlyRate != null && (
+											<span fg="#10b981"> ${project.hourlyRate}/hr</span>
+										)}
+									</text>
+									<text>
+										<span fg="#10b981">{stats.done}</span>
+										<span fg="#64748b">/</span>
+										<span fg="#94a3b8">{stats.total}</span>
+									</text>
+								</box>
+								{project.description && (
+									<text fg="#64748b" style={{ paddingLeft: 4 }}>
+										{project.description.slice(0, 40)}
+										{project.description.length > 40 ? "..." : ""}
+									</text>
+								)}
+							</box>
+						);
+					})}
+				</scrollbox>
+			)}
+		</box>
+	);
+}

package/src/components/ProjectModal.tsx

@@ -0,0 +1,116 @@
+import { useState } from "react";
+import { useKeyboard } from "@opentui/react";
+import { COLORS } from "../types";
+import Modal from "./Modal";
+import { useMultiPaste } from "../hooks/usePaste";
+
+interface ProjectModalProps {
+  mode: "create" | "edit";
+  initialName?: string;
+  initialRate?: number | null;
+  onSubmit: (name: string, rate: number | null) => void;
+  onCancel: () => void;
+}
+
+export function ProjectModal({
+  mode,
+  initialName = "",
+  initialRate = null,
+  onSubmit,
+  onCancel,
+}: ProjectModalProps) {
+  const [name, setName] = useState(initialName);
+  const [rate, setRate] = useState(initialRate?.toString() ?? "");
+  const [activeField, setActiveField] = useState<"name" | "rate">("name");
+  const { registerInput } = useMultiPaste();
+
+  useKeyboard((key) => {
+    if (key.name === "escape") {
+      onCancel();
+      return;
+    }
+    if (key.name === "tab" || key.name === "down" || key.name === "up") {
+      setActiveField((f) => (f === "name" ? "rate" : "name"));
+      return;
+    }
+  });
+
+  const handleSubmit = () => {
+    if (!name.trim()) return;
+    const parsedRate = rate.trim() === "" ? null : parseFloat(rate);
+    const validRate =
+      parsedRate !== null && !isNaN(parsedRate) && parsedRate >= 0
+        ? parsedRate
+        : null;
+    onSubmit(name.trim(), validRate);
+  };
+
+  return (
+    <Modal
+      title={mode === "create" ? "Create New Project" : "Edit Project"}
+      height={14}
+    >
+      <box
+        onClick={() => setActiveField("name")}
+        style={{
+          flexDirection: "column",
+          marginTop: 1,
+        }}
+      >
+        <box>
+          <text fg="#94a3b8">Name</text>
+        </box>
+        <box
+          style={{
+            border: true,
+            borderColor:
+              activeField === "name" ? COLORS.border : COLORS.borderOff,
+            height: 3,
+            width: "100%",
+          }}
+        >
+          <input
+            ref={registerInput("name")}
+            placeholder="Project name..."
+            focused={activeField === "name"}
+            onInput={setName}
+            onSubmit={handleSubmit}
+            value={name}
+          />
+        </box>
+      </box>
+
+      <box
+        onClick={() => setActiveField("rate")}
+        style={{
+          flexDirection: "column",
+          marginTop: 1,
+        }}
+      >
+        <box>
+          <text fg="#94a3b8" style={{ minWidth: 12 }}>
+            Hourly Rate
+          </text>
+        </box>
+        <box
+          style={{
+            border: true,
+            borderColor:
+              activeField === "rate" ? COLORS.border : COLORS.borderOff,
+            height: 3,
+            width: "100%",
+          }}
+        >
+          <input
+            ref={registerInput("rate")}
+            placeholder="e.g. 75.00 (optional)"
+            focused={activeField === "rate"}
+            onInput={setRate}
+            onSubmit={handleSubmit}
+            value={rate}
+          />
+        </box>
+      </box>
+    </Modal>
+  );
+}

package/src/components/SettingsView.tsx

@@ -0,0 +1,145 @@
+import { COLORS, getSystemTimezone } from "../types.ts";
+import type { AppSettings } from "../types.ts";
+
+interface SettingsViewProps {
+  settings: AppSettings;
+  selectedIndex: number;
+  onEditBusinessName: () => void;
+  onEditStripeKey: () => void;
+  onEditTimezone: () => void;
+  onExportDatabase: () => void;
+  onImportDatabase: () => void;
+}
+
+const SETTINGS_ITEMS = [
+  { key: "businessName", label: "Business Name", type: "text" },
+  { key: "stripeApiKey", label: "Stripe API Key", type: "secret" },
+  { key: "timezone", label: "Timezone", type: "text" },
+  { key: "exportDatabase", label: "Export Database", type: "action" },
+  { key: "importDatabase", label: "Import Database", type: "action" },
+] as const;
+
+export function SettingsView({
+  settings,
+  selectedIndex,
+  onEditBusinessName,
+  onEditStripeKey,
+  onEditTimezone,
+  onExportDatabase,
+  onImportDatabase,
+}: SettingsViewProps) {
+  const maskSecret = (value: string) => {
+    if (!value) return "(not set)";
+    if (value.length <= 8) return "*".repeat(value.length);
+    return value.slice(0, 4) + "*".repeat(value.length - 8) + value.slice(-4);
+  };
+
+  const formatTimezone = (tz: string) => {
+    if (!tz || tz === "auto") {
+      return `Auto (${getSystemTimezone()})`;
+    }
+    return tz;
+  };
+
+  const getValue = (key: string) => {
+    switch (key) {
+      case "businessName":
+        return settings.businessName || "(not set)";
+      case "stripeApiKey":
+        return maskSecret(settings.stripeApiKey);
+      case "timezone":
+        return formatTimezone(settings.timezone);
+      case "exportDatabase":
+        return "Export to file...";
+      case "importDatabase":
+        return "Import from file...";
+      default:
+        return "";
+    }
+  };
+
+  const getAction = (key: string) => {
+    switch (key) {
+      case "businessName":
+        return onEditBusinessName;
+      case "stripeApiKey":
+        return onEditStripeKey;
+      case "timezone":
+        return onEditTimezone;
+      case "exportDatabase":
+        return onExportDatabase;
+      case "importDatabase":
+        return onImportDatabase;
+      default:
+        return () => {};
+    }
+  };
+
+  return (
+    <box
+      style={{
+        flexDirection: "column",
+        flexGrow: 1,
+        padding: 1,
+      }}
+    >
+      <box style={{ marginBottom: 1 }}>
+        <text fg="#64748b">Application Settings</text>
+      </box>
+
+      <box
+        title="Settings"
+        style={{
+          border: true,
+          borderColor: "#334155",
+          padding: 1,
+          flexDirection: "column",
+        }}
+      >
+        {SETTINGS_ITEMS.map((item, index) => {
+          const isSelected = index === selectedIndex;
+          return (
+            <box
+              key={item.key}
+              style={{
+                flexDirection: "row",
+                paddingLeft: 1,
+                paddingRight: 1,
+                backgroundColor: isSelected ? COLORS.selectedRowBg : "transparent",
+              }}
+            >
+              <box style={{ width: 20 }}>
+                <text
+                  fg={isSelected ? "#ffffff" : "#e2e8f0"}
+                  attributes={isSelected ? "bold" : undefined}
+                >
+                  {item.label}
+                </text>
+              </box>
+              <box style={{ flexGrow: 1 }}>
+                <text fg={isSelected ? "#ffffff" : "#94a3b8"}>
+                  {getValue(item.key)}
+                </text>
+              </box>
+              {isSelected && (
+                <text fg="#64748b">[Enter to {item.type === "action" ? "run" : "edit"}]</text>
+              )}
+            </box>
+          );
+        })}
+      </box>
+
+      <box style={{ marginTop: 2 }}>
+        <text fg="#475569">
+          Use j/k or arrows to navigate, Enter to select, Esc to go back
+        </text>
+      </box>
+
+      <box style={{ marginTop: 1 }}>
+        <text fg="#475569">Database location: ~/.paca/paca.db</text>
+      </box>
+    </box>
+  );
+}
+
+export const SETTINGS_COUNT = SETTINGS_ITEMS.length;