pacatui 0.1.0

package/src/components/CreateInvoiceModal.tsx

@@ -0,0 +1,222 @@
+import { useKeyboard } from "@opentui/react";
+import {
+	type Customer,
+	type TimeEntryWithProject,
+	formatDateInTimezone,
+} from "../types.ts";
+import Modal from "./Modal.tsx";
+
+interface CreateInvoiceModalProps {
+	projectName: string;
+	projectColor: string;
+	hourlyRate: number | null;
+	customer: Customer | null;
+	entries: TimeEntryWithProject[];
+	timezone: string;
+	hasStripeKey: boolean;
+	onConfirm: () => void;
+	onCancel: () => void;
+}
+
+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 formatHours(ms: number): string {
+	const hours = ms / 3600000;
+	return hours.toFixed(2);
+}
+
+export function CreateInvoiceModal({
+	projectName,
+	projectColor,
+	hourlyRate,
+	customer,
+	entries,
+	timezone,
+	hasStripeKey,
+	onConfirm,
+	onCancel,
+}: CreateInvoiceModalProps) {
+	useKeyboard((key) => {
+		if (key.name === "escape") {
+			onCancel();
+			return;
+		}
+		if (key.name === "return") {
+			if (!customer || !hasStripeKey) {
+				return;
+			}
+			onConfirm();
+			return;
+		}
+	});
+
+	// Calculate totals
+	const totalMs = entries.reduce((sum, e) => {
+		if (!e.endTime) return sum;
+		return (
+			sum + (new Date(e.endTime).getTime() - new Date(e.startTime).getTime())
+		);
+	}, 0);
+
+	const totalHours = totalMs / 3600000;
+	const totalAmount = hourlyRate ? totalHours * hourlyRate : 0;
+
+	// Prepare line items
+	const lineItems = entries
+		.filter((e) => e.endTime)
+		.map((e) => {
+			const durationMs =
+				new Date(e.endTime!).getTime() - new Date(e.startTime).getTime();
+			const hours = durationMs / 3600000;
+			const amount = hourlyRate ? hours * hourlyRate : 0;
+			return {
+				date: formatDateInTimezone(e.startTime, timezone),
+				description: e.description || "Work",
+				duration: formatDuration(durationMs),
+				hours: formatHours(durationMs),
+				amount,
+			};
+		});
+
+	// Calculate modal height based on content
+	const baseHeight = 14;
+	const lineItemsHeight = Math.min(lineItems.length, 8); // Cap at 8 visible items
+	const modalHeight = !customer
+		? 12
+		: !hasStripeKey
+			? 14
+			: baseHeight + lineItemsHeight;
+
+	return (
+		<Modal title="Create Stripe Invoice" height={Math.max(modalHeight, 20)}>
+			{/* Customer info */}
+			{customer && (
+				<box style={{ flexDirection: "row", marginTop: 1, gap: 1 }}>
+					<text fg="#8b5cf6" attributes="bold">
+						{customer.name}
+					</text>
+					<text fg="#64748b">{customer.email}</text>
+				</box>
+			)}
+
+			{!customer && (
+				<box style={{ marginTop: 1 }}>
+					<text fg="#ef4444">
+						This project has no customer linked. Please link a customer first
+						using the 'c' key in the Projects view.
+					</text>
+				</box>
+			)}
+
+			{!hasStripeKey && customer && (
+				<box style={{ marginTop: 1 }}>
+					<text fg="#ef4444">
+						No Stripe API key configured. Add one in Settings to create
+						invoices.
+					</text>
+				</box>
+			)}
+
+			{customer && hasStripeKey && (
+				<>
+					{/* Line items header */}
+					<text fg="#334155" style={{ marginTop: 1 }}>
+						{"─".repeat(56)}
+					</text>
+					<box style={{ flexDirection: "row", gap: 1 }}>
+						<box style={{ width: 8 }}>
+							<text fg="#94a3b8">Date</text>
+						</box>
+						<box style={{ flexGrow: 1 }}>
+							<text fg="#94a3b8">Description</text>
+						</box>
+						<box style={{ width: 8 }}>
+							<text fg="#94a3b8">Hours</text>
+						</box>
+						{hourlyRate != null && (
+							<box style={{ width: 10, alignItems: "flex-end" }}>
+								<text fg="#94a3b8">Amount</text>
+							</box>
+						)}
+					</box>
+
+					{/* Line items */}
+					<scrollbox style={{ maxHeight: 8 }}>
+						{lineItems.map((item, idx) => (
+							<box key={idx} style={{ flexDirection: "row", gap: 1 }}>
+								<box style={{ width: 8 }}>
+									<text fg="#64748b">{item.date}</text>
+								</box>
+								<box style={{ flexGrow: 1 }}>
+									<text fg="#e2e8f0">
+										{item.description.length > 30
+											? `${item.description.slice(0, 27)}...`
+											: item.description}
+									</text>
+								</box>
+								<box style={{ width: 8 }}>
+									<text fg="#94a3b8">{item.hours}</text>
+								</box>
+								{hourlyRate != null && (
+									<box style={{ width: 10, alignItems: "flex-end" }}>
+										<text fg="#10b981">${item.amount.toFixed(2)}</text>
+									</box>
+								)}
+							</box>
+						))}
+					</scrollbox>
+
+					{/* Totals */}
+					<text fg="#334155">{"─".repeat(56)}</text>
+					<box style={{ flexDirection: "row", gap: 1 }}>
+						<box style={{ width: 8 }}>
+							<text fg="#ffffff" attributes="bold">
+								Total
+							</text>
+						</box>
+						<box style={{ flexGrow: 1 }}>
+							<text fg="#94a3b8">
+								{entries.length} {entries.length === 1 ? "entry" : "entries"}
+							</text>
+						</box>
+						<box style={{ width: 8 }}>
+							<text fg="#ffffff" attributes="bold">
+								{totalHours.toFixed(2)}
+							</text>
+						</box>
+						{hourlyRate != null && (
+							<box style={{ width: 10, alignItems: "flex-end" }}>
+								<text fg="#10b981" attributes="bold">
+									${totalAmount.toFixed(2)}
+								</text>
+							</box>
+						)}
+					</box>
+
+					{hourlyRate != null && (
+						<box style={{ marginTop: 1 }}>
+							<text fg="#64748b">Rate: ${hourlyRate.toFixed(2)}/hr</text>
+						</box>
+					)}
+				</>
+			)}
+
+			<box style={{ flexGrow: 1 }} />
+
+			<text fg="#64748b">
+				{customer && hasStripeKey
+					? "Enter to create draft invoice, Esc to cancel"
+					: "Esc to close"}
+			</text>
+		</Modal>
+	);
+}

package/src/components/CustomerModal.tsx

@@ -0,0 +1,158 @@
+import { useState } from "react";
+import { useKeyboard } from "@opentui/react";
+import { COLORS } from "../types";
+import Modal from "./Modal";
+import { useMultiPaste } from "../hooks/usePaste";
+
+interface CustomerModalProps {
+  mode: "create" | "edit";
+  initialName?: string;
+  initialEmail?: string;
+  initialStripeId?: string;
+  onSubmit: (name: string, email: string, stripeCustomerId?: string) => void;
+  onCancel: () => void;
+}
+
+type Field = "name" | "email" | "stripeId";
+
+export function CustomerModal({
+  mode,
+  initialName = "",
+  initialEmail = "",
+  initialStripeId = "",
+  onSubmit,
+  onCancel,
+}: CustomerModalProps) {
+  const [name, setName] = useState(initialName);
+  const [email, setEmail] = useState(initialEmail);
+  const [stripeId, setStripeId] = useState(initialStripeId);
+  const [activeField, setActiveField] = useState<Field>("name");
+  const { registerInput } = useMultiPaste();
+
+  const fields: Field[] = mode === "edit" ? ["name", "email", "stripeId"] : ["name", "email"];
+
+  useKeyboard((key) => {
+    if (key.name === "escape") {
+      onCancel();
+      return;
+    }
+    if (key.name === "tab" || key.name === "down") {
+      setActiveField((f) => {
+        const idx = fields.indexOf(f);
+        return fields[(idx + 1) % fields.length] as Field;
+      });
+      return;
+    }
+    if (key.name === "up") {
+      setActiveField((f) => {
+        const idx = fields.indexOf(f);
+        return fields[(idx - 1 + fields.length) % fields.length] as Field;
+      });
+      return;
+    }
+  });
+
+  const handleSubmit = () => {
+    if (!name.trim() || !email.trim()) return;
+    onSubmit(name.trim(), email.trim(), stripeId.trim() || undefined);
+  };
+
+  return (
+    <Modal
+      title={mode === "create" ? "Create New Customer" : "Edit Customer"}
+      height={mode === "edit" ? 18 : 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="Customer name..."
+            focused={activeField === "name"}
+            onInput={setName}
+            onSubmit={handleSubmit}
+            value={name}
+          />
+        </box>
+      </box>
+
+      <box
+        onClick={() => setActiveField("email")}
+        style={{
+          flexDirection: "column",
+          marginTop: 1,
+        }}
+      >
+        <box>
+          <text fg="#94a3b8">Email</text>
+        </box>
+        <box
+          style={{
+            border: true,
+            borderColor:
+              activeField === "email" ? COLORS.border : COLORS.borderOff,
+            height: 3,
+            width: "100%",
+          }}
+        >
+          <input
+            ref={registerInput("email")}
+            placeholder="customer@example.com"
+            focused={activeField === "email"}
+            onInput={setEmail}
+            onSubmit={handleSubmit}
+            value={email}
+          />
+        </box>
+      </box>
+
+      {mode === "edit" && (
+        <box
+          onClick={() => setActiveField("stripeId")}
+          style={{
+            flexDirection: "column",
+            marginTop: 1,
+          }}
+        >
+          <box>
+            <text fg="#94a3b8">Stripe Customer ID</text>
+          </box>
+          <box
+            style={{
+              border: true,
+              borderColor:
+                activeField === "stripeId" ? COLORS.border : COLORS.borderOff,
+              height: 3,
+              width: "100%",
+            }}
+          >
+            <input
+              ref={registerInput("stripeId")}
+              placeholder="cus_... (optional)"
+              focused={activeField === "stripeId"}
+              onInput={setStripeId}
+              onSubmit={handleSubmit}
+              value={stripeId}
+            />
+          </box>
+        </box>
+      )}
+    </Modal>
+  );
+}

package/src/components/CustomerSelectModal.tsx

@@ -0,0 +1,142 @@
+import { useState } from "react";
+import { useKeyboard } from "@opentui/react";
+import { COLORS, type Customer } from "../types.ts";
+
+interface CustomerSelectModalProps {
+  customers: Customer[];
+  currentCustomerId?: string | null;
+  projectName: string;
+  onSelect: (customerId: string | null) => void;
+  onCreateNew: () => void;
+  onEdit: (customer: Customer) => void;
+  onCancel: () => void;
+}
+
+export function CustomerSelectModal({
+  customers,
+  currentCustomerId,
+  projectName,
+  onSelect,
+  onCreateNew,
+  onEdit,
+  onCancel,
+}: CustomerSelectModalProps) {
+  // Create items list: customers + "None" option + "Create new" option
+  const items: { id: string | null; label: string; isAction: boolean; customer?: Customer }[] = [
+    { id: null, label: "(No customer)", isAction: false },
+    ...customers.map((c) => ({
+      id: c.id,
+      label: `${c.name} <${c.email}>${c.stripeCustomerId ? " [Stripe]" : ""}`,
+      isAction: false,
+      customer: c,
+    })),
+    { id: "__create__", label: "+ Create new customer", isAction: true },
+  ];
+
+  const currentIndex = currentCustomerId
+    ? items.findIndex((i) => i.id === currentCustomerId)
+    : 0;
+
+  const [selectedIndex, setSelectedIndex] = useState(currentIndex >= 0 ? currentIndex : 0);
+
+  useKeyboard((key) => {
+    if (key.name === "escape") {
+      onCancel();
+      return;
+    }
+    if (key.name === "return" && items[selectedIndex]) {
+      const item = items[selectedIndex];
+      if (item.id === "__create__") {
+        onCreateNew();
+      } else {
+        onSelect(item.id);
+      }
+      return;
+    }
+    // Edit customer
+    if (key.name === "e" && items[selectedIndex]) {
+      const item = items[selectedIndex];
+      if (item.customer) {
+        onEdit(item.customer);
+      }
+      return;
+    }
+    // Create new customer shortcut
+    if (key.name === "n") {
+      onCreateNew();
+      return;
+    }
+    if (key.name === "j" || key.name === "down") {
+      setSelectedIndex((i) => Math.min(i + 1, items.length - 1));
+      return;
+    }
+    if (key.name === "k" || key.name === "up") {
+      setSelectedIndex((i) => Math.max(i - 1, 0));
+      return;
+    }
+  });
+
+  const modalHeight = Math.min(items.length + 6, 18);
+
+  return (
+    <box
+      style={{
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        width: 60,
+        height: modalHeight,
+        marginTop: -Math.floor(modalHeight / 2),
+        marginLeft: -30,
+        border: true,
+        borderColor: "#8b5cf6",
+        flexDirection: "column",
+        backgroundColor: COLORS.bg,
+        padding: 1,
+        zIndex: 99999,
+      }}
+    >
+      <text fg="#ffffff" attributes="bold">
+        Link Customer to Project
+      </text>
+      <text fg="#94a3b8">{projectName}</text>
+      <box style={{ marginTop: 1, flexGrow: 1 }}>
+        <scrollbox focused style={{ flexGrow: 1 }}>
+          {items.map((item, index) => (
+            <box
+              key={item.id ?? "none"}
+              style={{
+                paddingLeft: 1,
+                paddingRight: 1,
+                backgroundColor:
+                  index === selectedIndex ? "#1e40af" : "transparent",
+              }}
+            >
+              <text>
+                {item.id === currentCustomerId && (
+                  <span fg="#10b981">[*] </span>
+                )}
+                {item.id !== currentCustomerId && item.id !== "__create__" && (
+                  <span fg="#64748b">[ ] </span>
+                )}
+                <span
+                  fg={
+                    item.isAction
+                      ? "#10b981"
+                      : index === selectedIndex
+                        ? "#ffffff"
+                        : "#e2e8f0"
+                  }
+                  attributes={index === selectedIndex ? "bold" : undefined}
+                >
+                  {item.label}
+                </span>
+              </text>
+            </box>
+          ))}
+        </scrollbox>
+      </box>
+      <text fg="#64748b">Enter: select | n: new | e: edit | Esc: cancel</text>
+    </box>
+  );
+}