📦 Invoice Set Manager

\n\n {/* Create Set Form */}\n

\n setNewSetName(e.target.value)}\n required\n />\n \n \n\n {/* Invoice Sets */}\n

Invoice Sets

\n {sets.map((set) => (\n

{set.name}

\n \n handleDeleteSet(set.id)}\n style={styles.deleteButton}\n >\n 🗑️ Delete Set\n \n

\n ))}\n

\n\n {/* Current Set Details */}\n {currentSet && (\n

Set: {currentSet.name}

Total Weight: {calculateSetTotals(currentSet.invoices).totalWeight.toFixed(2)}

Total Price: ${calculateSetTotals(currentSet.invoices).totalPrice.toFixed(2)}

\n\n {/* Invoice Creation Form - Only visible when a set is selected */}\n

\n setInvoiceName(e.target.value)}\n required\n />\n setDate(e.target.value)}\n required\n />\n setPrice(e.target.value)}\n step=\"0.01\"\n required\n />\n setWeight(e.target.value)}\n step=\"0.01\"\n required\n />\n \n \n\n {/* Invoices in Current Set */}\n

Invoices in Set

\n {currentSet.invoices.map((invoice) => (\n

Name: {invoice.name}

Date: {invoice.date}

Price/Unit: ${invoice.price}

Weight: {invoice.weight}

Total Price: ${invoice.total_price.toFixed(2)}

\n handleDeleteInvoice(invoice.id, true)}\n style={styles.deleteButton}\n >\n 🗑️ Delete Invoice\n \n

\n ))}\n\n {/* Available Invoices to Add to Set */}\n

Available Invoices

\n {availableInvoices.map((invoice) => (\n

Name: {invoice.name}

Date: {invoice.date}

Price/Unit: ${invoice.price}

Weight: {invoice.weight}

Total Price: ${invoice.total_price.toFixed(2)}

\n \n handleDeleteInvoice(invoice.id)}\n style={styles.deleteButton}\n >\n 🗑️ Delete Invoice\n \n

\n ))}\n

\n )}\n

\n );\n}\n\nconst styles = {\n container: {\n fontFamily: \"Arial, sans-serif\",\n maxWidth: \"800px\",\n margin: \"0 auto\",\n padding: \"20px\",\n textAlign: \"center\",\n },\n form: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"10px\",\n marginBottom: \"20px\",\n },\n sectionContainer: {\n border: \"1px solid #ddd\",\n borderRadius: \"5px\",\n padding: \"10px\",\n marginBottom: \"20px\",\n },\n setItem: {\n backgroundColor: \"#f0f0f0\",\n margin: \"10px 0\",\n padding: \"10px\",\n borderRadius: \"5px\",\n display: \"flex\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n },\n invoiceItem: {\n backgroundColor: \"#f9f9f9\",\n margin: \"10px 0\",\n padding: \"10px\",\n borderRadius: \"5px\",\n },\n deleteButton: {\n backgroundColor: \"#ff4d4d\",\n color: \"white\",\n border: \"none\",\n padding: \"5px 10px\",\n borderRadius: \"3px\",\n cursor: \"pointer\",\n },\n};\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const KEY = \"InvoiceApp\";\n const SCHEMA_VERSION = 6;\n\n // Create invoices table\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_invoices_${SCHEMA_VERSION} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n name TEXT NOT NULL,\n date TEXT NOT NULL,\n price REAL NOT NULL,\n weight REAL NOT NULL,\n total_price REAL NOT NULL,\n set_id INTEGER,\n timestamp DATETIME DEFAULT CURRENT_TIMESTAMP\n )\n `);\n\n // Create invoice sets table\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_invoice_sets_${SCHEMA_VERSION} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n name TEXT NOT NULL,\n timestamp DATETIME DEFAULT CURRENT_TIMESTAMP\n )\n `);\n\n // Delete set endpoint\n const deleteSetMatch = request.url.match(/\\/delete-set\\/(\\d+)/);\n if (request.method === \"DELETE\" && deleteSetMatch) {\n const setId = deleteSetMatch[1];\n\n // First, remove all invoices associated with this set\n await sqlite.execute(\n `\n UPDATE ${KEY}_invoices_${SCHEMA_VERSION} \n SET set_id = NULL \n WHERE set_id = ?\n `,\n [setId],\n );\n\n // Then delete the set\n await sqlite.execute(\n `\n DELETE FROM ${KEY}_invoice_sets_${SCHEMA_VERSION} \n WHERE id = ?\n `,\n [setId],\n );\n\n return new Response(\"Set deleted\", { status: 200 });\n }\n\n // Delete invoice endpoint\n const deleteInvoiceMatch = request.url.match(/\\/delete-invoice\\/(\\d+)/);\n if (request.method === \"DELETE\" && deleteInvoiceMatch) {\n const invoiceId = deleteInvoiceMatch[1];\n\n await sqlite.execute(\n `\n DELETE FROM ${KEY}_invoices_${SCHEMA_VERSION} \n WHERE id = ?\n `,\n [invoiceId],\n );\n\n return new Response(\"Invoice deleted\", { status: 200 });\n }\n\n // Create invoice endpoint\n if (request.method === \"POST\" && new URL(request.url).pathname === \"/create-invoice\") {\n const invoice = await request.json();\n const result = await sqlite.execute(\n `\n INSERT INTO ${KEY}_invoices_${SCHEMA_VERSION} \n (name, date, price, weight, total_price, set_id) \n VALUES (?, ?, ?, ?, ?, ?)\n `,\n [invoice.name, invoice.date, invoice.price, invoice.weight, invoice.totalPrice, invoice.setId],\n );\n return new Response(\"Invoice created\", { status: 200 });\n }\n\n // Create set endpoint\n if (request.method === \"POST\" && new URL(request.url).pathname === \"/create-set\") {\n const setData = await request.json();\n await sqlite.execute(\n `\n INSERT INTO ${KEY}_invoice_sets_${SCHEMA_VERSION} \n (name) VALUES (?)\n `,\n [setData.name],\n );\n return new Response(\"Set created\", { status: 200 });\n }\n\n // Get all sets endpoint\n if (request.method === \"GET\" && new URL(request.url).pathname === \"/invoice-sets\") {\n const result = await sqlite.execute(`\n SELECT id, name \n FROM ${KEY}_invoice_sets_${SCHEMA_VERSION} \n ORDER BY timestamp DESC\n `);\n return new Response(JSON.stringify(result.rows), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n // Get invoices in a specific set\n const setInvoicesMatch = request.url.match(/\\/set-invoices\\/(\\d+)/);\n if (request.method === \"GET\" && setInvoicesMatch) {\n const setId = setInvoicesMatch[1];\n const result = await sqlite.execute(\n `\n SELECT id, name, date, price, weight, total_price \n FROM ${KEY}_invoices_${SCHEMA_VERSION} \n WHERE set_id = ?\n ORDER BY timestamp DESC\n `,\n [setId],\n );\n return new Response(JSON.stringify(result.rows), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n // Get available invoices (invoices without a set)\n if (request.method === \"GET\" && new URL(request.url).pathname === \"/available-invoices\") {\n const result = await sqlite.execute(`\n SELECT id, name, date, price, weight, total_price \n FROM ${KEY}_invoices_${SCHEMA_VERSION} \n WHERE set_id IS NULL\n ORDER BY timestamp DESC\n `);\n return new Response(JSON.stringify(result.rows), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n // Add invoice to set endpoint\n if (request.method === \"POST\" && new URL(request.url).pathname === \"/add-invoice-to-set\") {\n const { invoiceId, setId } = await request.json();\n await sqlite.execute(\n `\n UPDATE ${KEY}_invoices_${SCHEMA_VERSION} \n SET set_id = ? \n WHERE id = ?\n `,\n [setId, invoiceId],\n );\n return new Response(\"Invoice added to set\", { status: 200 });\n }\n\n return new Response(\n `\n \n \n Invoice Set Manager\n \n \n

\n \n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}","deleted","label",[99],"permalink","https://www.val.town/x/happynoob/InvoiceApp/code/main.tsx","extension","actionData","errors"]