feat: list clients and show list of invoice ids when clicked

src/components/listClientInvoices.ts

@@ -0,0 +1,71 @@
+
+import { Box, Button, Container, Flex, Screen, ScrollableList, Text, } from "wretched";
+import { ClientResponse, InvoiceResponse, getAllClients, getAllInvoices, getAllProjects } from "../services/pancakeApi.js";
+import { compact, find, reverse, sortBy } from "lodash-es";
+
+const clientsResp = await getAllClients({ limit: 100, sort_by: "created", sort_dir: "desc" });
+console.log("🚀 ~ clientsResp:", clientsResp)
+const sorted = reverse(sortBy(clientsResp.clients, ["unpaid_total"]))
+console.log("🚀 ~ sorted:", sorted)
+
+let selectedClientId: string | undefined;
+const currentClientName = () => {
+  const curr = find(sorted, { id: selectedClientId });
+  return `🏙️ ${curr?.company} | ${curr?.first_name} ${curr?.last_name}`
+}
+let invoiceList = async (clientId?: string) => {
+  if (clientId === undefined) {
+    console.warn("No Client Id");
+    return new Text({ text: " --" });
+  }
+  const invResp = await getAllInvoices({ client_id: clientId });
+  const invoices: Array<InvoiceResponse> = invResp.invoices;
+  if (!invoices?.length) {
+    console.warn("No invoices")
+    return new Text({ text: " --" });
+  }
+  return new ScrollableList({ cellForItem: (item) => new Button({ text: item.invoice_number }), items: invoices })
+}
+
+let Invoices = new Box({ width: "fill", height: "fill", child: await invoiceList(selectedClientId), border: "rounded" })
+
+let Clients = new ScrollableList({
+  minWidth: 20,
+  width: "natural",
+  cellForItem: (item: ClientResponse) => {
+    if (!item || !item.company) {
+      console.log(item)
+      return new Text({ text: "Nothing Here" })
+    }
+    return new Button({
+      text: item.company || item.id, onClick: async () => {
+        console.log("🚀 ~ clientInvoicesView ~ clicked company:", item);
+        selectedClientId = item.id;
+        //TODO: Need a spinner for loading indicator
+        Invoices.removeAllChildren();
+        Invoices.add(await invoiceList(selectedClientId))
+        ClientTitle.text = currentClientName();
+      },
+    });
+  }, items: sorted
+})
+
+const ClientTitle = new Text({
+  text: "No Client Selected Yet",
+})
+
+export const clientInvoicesView = Flex.right({
+  children: [
+    Clients,
+    Flex.down({
+      width: "fill",
+      height: "fill",
+      padding: 1,
+
+      children: [
+        ClientTitle,
+        Invoices
+      ],
+    }),
+  ]
+})

src/components/listProjects.ts

@@ -1,11 +0,0 @@
-import { Button, Flex } from "wretched";
-import { getAllProjects } from "../services/api-client.js";
-
-const projectsResp = await getAllProjects({ limit: 100, sort_by: "date_updated", sort_dir: "desc" });
-
-export const projectView = Flex.down({
-  children: projectsResp.projects.map(x => new Button({
-    text: x.name
-  })
-  )
-});