Add Subscription

\n \n

\n setServiceName(e.target.value)}\n className=\"w-full p-2 border rounded\"\n />\n \n setCost(e.target.value)}\n className=\"w-full p-2 border rounded\"\n />\n \n setBillingCycle(e.target.value)}\n className=\"w-full p-2 border rounded\"\n >\n {Object.values(BILLING_CYCLES).map(cycle => (\n \n ))}\n \n \n setCategory(e.target.value)}\n className=\"w-full p-2 border rounded\"\n >\n \n {CATEGORIES.map(cat => (\n \n ))}\n \n \n setNextBillingDate(e.target.value)}\n className=\"w-full p-2 border rounded\"\n />\n

\n \n

\n \n \n

\n );\n};\n\nconst SubscriptionTracker = () => {\n const [subscriptions, setSubscriptions] = useState([]);\n const [isModalOpen, setIsModalOpen] = useState(false);\n\n useEffect(() => {\n fetchSubscriptions();\n }, []);\n\n const fetchSubscriptions = async () => {\n try {\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const KEY = \"cerebrasTemplate\";\n const SCHEMA_VERSION = 1;\n\n const result = await sqlite.execute(`\n SELECT * FROM ${KEY}_subscriptions_${SCHEMA_VERSION}\n `);\n\n setSubscriptions(result.rows);\n } catch (error) {\n console.error(\"Error fetching subscriptions:\", error);\n }\n };\n\n const addSubscription = async (subscription) => {\n try {\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const KEY = \"cerebrasTemplate\";\n const SCHEMA_VERSION = 1;\n\n await sqlite.execute(`\n INSERT INTO ${KEY}_subscriptions_${SCHEMA_VERSION} \n (service_name, cost, billing_cycle, category, next_billing_date, is_active)\n VALUES (?, ?, ?, ?, ?, ?)\n `, [\n subscription.serviceName,\n subscription.cost,\n subscription.billingCycle,\n subscription.category,\n subscription.nextBillingDate,\n 1\n ]);\n\n fetchSubscriptions();\n } catch (error) {\n console.error(\"Error adding subscription:\", error);\n }\n };\n\n const calculateTotalMonthlySpend = () => {\n return subscriptions\n .filter(sub => sub.billing_cycle === BILLING_CYCLES.MONTHLY)\n .reduce((total, sub) => total + sub.cost, 0)\n .toFixed(2);\n };\n\n const sendBillingReminders = async () => {\n const upcomingBills = subscriptions.filter(sub => {\n const nextBilling = new Date(sub.next_billing_date);\n const soon = new Date();\n soon.setDate(soon.getDate() + 7);\n return nextBilling <= soon;\n });\n\n for (const bill of upcomingBills) {\n try {\n await email({\n subject: `Upcoming Subscription Bill: ${bill.service_name}`,\n text: `Reminder: Your ${bill.service_name} subscription is due on ${new Date(bill.next_billing_date).toLocaleDateString()}`\n });\n } catch (error) {\n console.error(`Failed to send email for ${bill.service_name}:`, error);\n }\n }\n };\n\n return (\n

💸 Subscription Tracker

\n\n

My Subscriptions

\n \n

\n\n

Monthly Spending

\n ${calculateTotalMonthlySpend()}\n

\n\n

\n {subscriptions.map((sub, index) => (\n

{sub.service_name}

\n Next Bill: {new Date(sub.next_billing_date).toLocaleDateString()}\n

${sub.cost}

\n {sub.billing_cycle.charAt(0).toUpperCase() + sub.billing_cycle.slice(1)}\n

\n ))}\n

\n\n setIsModalOpen(false)}\n onSave={addSubscription}\n />\n

\n );\n};\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\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 = \"cerebrasTemplate\";\n const SCHEMA_VERSION = 1;\n\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_subscriptions_${SCHEMA_VERSION} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n service_name TEXT NOT NULL,\n cost REAL NOT NULL,\n billing_cycle TEXT NOT NULL,\n category TEXT,\n next_billing_date DATE,\n is_active BOOLEAN DEFAULT 1\n )\n `);\n\n return new Response(`\n \n \n \n Subscription Tracker\n \n \n \n \n

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