/** @jsxImportSource https://esm.sh/react@18.2.0 */ import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; import React, { useEffect, useRef, useState } from "https://esm.sh/react@18.2.0"; function LoginScreen({ onLogin }) { const [password, setPassword] = useState(""); const [error, setError] = useState(""); const handleSubmit = async (e) => { e.preventDefault(); try { const response = await fetch("/login", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ password }), }); if (response.ok) { onLogin(); setError(""); } else { const result = await response.json(); setError(result.message || "Incorrect password"); } } catch (error) { setError("Login failed. Please try again."); } }; return (

); } function CustomerInteractionForm({ onSubmit }) { const [email, setEmail] = useState(""); const [firstName, setFirstName] = useState(""); const [lastName, setLastName] = useState(""); const [interactionDate, setInteractionDate] = useState(new Date().toLocaleDateString("en-CA")); const [notes, setNotes] = useState(""); const [additionalNotesLink, setAdditionalNotesLink] = useState(""); const formRef = useRef(null); const emailInputRef = useRef(null); const [tags, setTags] = useState([]); const [tagInput, setTagInput] = useState(""); // Fetch previous customer details when email changes useEffect(() => { const fetchCustomerDetails = async () => { if (!email) return; try { const response = await fetch(`/get-customer-details?email=${encodeURIComponent(email)}`); if (response.ok) { const customerDetails = await response.json(); if (customerDetails) { setFirstName(customerDetails.first_name || ""); setLastName(customerDetails.last_name || ""); } } } catch (error) { console.error("Error fetching customer details:", error); } }; fetchCustomerDetails(); }, [email]); // Add keyboard shortcut for form submission useEffect(() => { const handleKeyDown = (e) => { // Check for Command (Mac) or Ctrl (Windows/Linux) + K if ((e.metaKey || e.ctrlKey) && e.key === "k") { e.preventDefault(); formRef.current?.requestSubmit(); // Use requestSubmit instead of dispatchEvent } }; // Add event listener to document document.addEventListener("keydown", handleKeyDown); // Cleanup event listener return () => { document.removeEventListener("keydown", handleKeyDown); }; }, []); useEffect(() => { emailInputRef.current?.focus(); }, []); const handleTagInput = (e) => { if (e.key === "Enter" || e.key === ",") { e.preventDefault(); const newTag = tagInput.trim(); if (newTag && !tags.includes(newTag)) { setTags([...tags, newTag]); } setTagInput(""); } }; const removeTag = (tagToRemove) => { setTags(tags.filter(tag => tag !== tagToRemove)); }; const handleSubmit = async (e) => { e.preventDefault(); try { const response = await fetch("/add-interaction", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ firstName, lastName, email, interactionDate, notes, additionalNotesLink, tags, // Add this line }), }); if (response.ok) { setFirstName(""); setLastName(""); setEmail(""); setNotes(""); setAdditionalNotesLink(""); setTags([]); // Reset tags setInteractionDate(new Date().toISOString().split("T")[0]); onSubmit(); } } catch (error) { console.error("Error submitting interaction:", error); } }; return ( ); } function InteractionList() { const [customerInteractions, setCustomerInteractions] = useState({}); const [copiedEmail, setCopiedEmail] = useState(null); const [currentPage, setCurrentPage] = useState(1); const [totalInteractions, setTotalInteractions] = useState(0); const [selectedTags, setSelectedTags] = useState([]); const [availableTags, setAvailableTags] = useState([]); const handleCopyEmail = async (email) => { try { await navigator.clipboard.writeText(email); setCopiedEmail(email); setTimeout(() => setCopiedEmail(null), 2000); } catch (err) { console.error("Failed to copy email:", err); } }; const handleDeleteInteraction = async (id) => { try { const response = await fetch("/delete-interaction", { method: "DELETE", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ id }), }); if (response.ok) { fetchInteractions(); } } catch (error) { console.error("Error deleting interaction:", error); } }; const handleTagSelect = (tag) => { setSelectedTags(prev => prev.includes(tag) ? prev.filter(t => t !== tag) : [...prev, tag] ); }; const fetchInteractions = async () => { try { const response = await fetch(`/get-interactions?page=${currentPage}`); const data = await response.json(); // Extract all unique tags const allTags = new Set(); data.interactions.forEach(interaction => { if (interaction.tags) { interaction.tags.split(",").forEach(tag => allTags.add(tag.trim())); } }); setAvailableTags(Array.from(allTags)); // Filter interactions based on selected tags const filteredInteractions = selectedTags.length > 0 ? data.interactions.filter(interaction => { if (!interaction.tags) return false; const interactionTags = interaction.tags.split(",").map(tag => tag.trim()); return selectedTags.every(tag => interactionTags.includes(tag)); }) : data.interactions; // Group filtered interactions by customer const groupedInteractions = filteredInteractions.reduce((acc, interaction) => { const customerKey = `${interaction.first_name} ${interaction.last_name}`; if (!acc[customerKey]) { acc[customerKey] = []; } acc[customerKey].push(interaction); return acc; }, {}); setCustomerInteractions(groupedInteractions); setTotalInteractions(data.total); } catch (error) { console.error("Error fetching interactions:", error); } }; useEffect(() => { fetchInteractions(); }, [currentPage, selectedTags]); return (

📋 Customer Conversations

{/* Tag Filter Section */}

Filter by Tags

{availableTags.map(tag => ( ))}

{selectedTags.length > 0 && ( )}

{/* Display when no results match filters */} {Object.keys(customerInteractions).length === 0 && selectedTags.length > 0 && (

No interactions found with the selected tags.

)} {Object.entries(customerInteractions).map(([customerName, interactions]) => (

🧑 {customerName}

📧{" "} handleCopyEmail(interactions[0].email)} className="copyable-email" > {interactions[0].email} {" "} {copiedEmail === interactions[0].email && "✓"}

{interactions.map((interaction) => (

📝 {interaction.notes}

{interaction.additional_notes_link && (

🔗{" "} Notes

)} {interaction.tags && (

{interaction.tags.split(",").map(tag => ( {tag.trim()} ))}

)}

📅 {new Date(interaction.interaction_date).toLocaleDateString("en-US")} handleDeleteInteraction(interaction.id)} title="Delete interaction" > 🗑️

))}

Page {currentPage} of {Math.ceil(totalInteractions / 10)}

); } function App() { const [isAuthenticated, setIsAuthenticated] = useState(false); const [refreshList, setRefreshList] = useState(0); const handleLogin = () => { setIsAuthenticated(true); }; const handleLogout = () => { setIsAuthenticated(false); }; const handleInteractionSubmit = () => { setRefreshList(prev => prev + 1); }; if (!isAuthenticated) { return ; } return (

🌽 It's Kernel!

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite"); const KEY = new URL(import.meta.url).pathname.split("/").at(-1); const SCHEMA_VERSION = 4; // Increment schema version // Retrieve the admin password from environment variable const ADMIN_PASSWORD = Deno.env.get("CRM_PWD") || "default_fallback_password"; await sqlite.execute(` CREATE TABLE IF NOT EXISTS ${KEY}_interactions_${SCHEMA_VERSION} ( id INTEGER PRIMARY KEY AUTOINCREMENT, first_name TEXT NOT NULL, last_name TEXT NOT NULL, email TEXT NOT NULL, interaction_date DATE NOT NULL, notes TEXT NOT NULL, additional_notes_link TEXT, timestamp DATETIME DEFAULT CURRENT_TIMESTAMP ) `); await sqlite.execute(` CREATE TABLE IF NOT EXISTS ${KEY}_tags_${SCHEMA_VERSION} ( interaction_id INTEGER, tag TEXT NOT NULL, FOREIGN KEY (interaction_id) REFERENCES ${KEY}_interactions_${SCHEMA_VERSION}(id), PRIMARY KEY (interaction_id, tag) ) `); // New endpoint to get customer details by email if (request.method === "GET" && new URL(request.url).pathname === "/get-customer-details") { const url = new URL(request.url); const email = url.searchParams.get("email"); if (!email) { return new Response(JSON.stringify(null), { headers: { "Content-Type": "application/json" }, }); } const result = await sqlite.execute( ` SELECT first_name, last_name FROM ${KEY}_interactions_${SCHEMA_VERSION} WHERE email = ? ORDER BY timestamp DESC LIMIT 1 `, [email], ); return new Response(JSON.stringify(result.rows[0] || null), { headers: { "Content-Type": "application/json" }, }); } if (request.method === "POST" && new URL(request.url).pathname === "/login") { const { password } = await request.json(); if (password === ADMIN_PASSWORD) { return new Response(JSON.stringify({ success: true }), { headers: { "Content-Type": "application/json" }, }); } else { return new Response(JSON.stringify({ message: "Incorrect password" }), { status: 401, headers: { "Content-Type": "application/json" }, }); } } if (request.method === "POST" && new URL(request.url).pathname === "/add-interaction") { const { firstName, lastName, email, interactionDate, notes, additionalNotesLink, tags = [] } = await request.json(); try { // Insert interaction const result = await sqlite.execute( `INSERT INTO ${KEY}_interactions_${SCHEMA_VERSION} (first_name, last_name, email, interaction_date, notes, additional_notes_link) VALUES (?, ?, ?, ?, ?, ?) RETURNING id`, [firstName, lastName, email, interactionDate, notes, additionalNotesLink || null], ); const interactionId = result.rows[0].id; // Insert tags if there are any if (tags && tags.length > 0) { for (const tag of tags) { await sqlite.execute( `INSERT INTO ${KEY}_tags_${SCHEMA_VERSION} (interaction_id, tag) VALUES (?, ?)`, [interactionId, tag], ); } } return new Response(JSON.stringify({ success: true }), { headers: { "Content-Type": "application/json" }, }); } catch (error) { console.error("Error in add-interaction:", error); return new Response( JSON.stringify({ success: false, error: "Failed to save interaction", }), { status: 500, headers: { "Content-Type": "application/json" }, }, ); } } if (request.method === "GET" && new URL(request.url).pathname === "/get-interactions") { const url = new URL(request.url); const page = parseInt(url.searchParams.get("page") || "1"); const limit = 10; const offset = (page - 1) * limit; const result = await sqlite.execute( ` SELECT i.*, GROUP_CONCAT(t.tag) as tags FROM ${KEY}_interactions_${SCHEMA_VERSION} i LEFT JOIN ${KEY}_tags_${SCHEMA_VERSION} t ON i.id = t.interaction_id GROUP BY i.id ORDER BY i.interaction_date DESC, i.timestamp DESC LIMIT ? OFFSET ? `, [limit, offset], ); // Get total count for pagination const countResult = await sqlite.execute(` SELECT COUNT(*) as total FROM ${KEY}_interactions_${SCHEMA_VERSION} `); return new Response( JSON.stringify({ interactions: result.rows, total: countResult.rows[0].total, }), { headers: { "Content-Type": "application/json" }, }, ); } if (request.method === "DELETE" && new URL(request.url).pathname === "/delete-interaction") { const { id } = await request.json(); try { // First delete the tags associated with this interaction await sqlite.execute( `DELETE FROM ${KEY}_tags_${SCHEMA_VERSION} WHERE interaction_id = ?`, [id], ); // Then delete the interaction await sqlite.execute( `DELETE FROM ${KEY}_interactions_${SCHEMA_VERSION} WHERE id = ?`, [id], ); return new Response(JSON.stringify({ success: true }), { headers: { "Content-Type": "application/json" }, }); } catch (error) { console.error("Error deleting interaction:", error); return new Response( JSON.stringify({ success: false, error: "Failed to delete interaction", }), { status: 500, headers: { "Content-Type": "application/json" }, }, ); } } return new Response( ` 🌽 Kernel CRM

View Source `, { headers: { "Content-Type": "text/html" }, }, ); } const css = ` body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; max-width: 600px; margin: 0 auto; padding: 20px; background-color: #f4f4f4; } .login-container { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f4f4f4; } .login-form { background-color: white; padding: 30px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); width: 100%; max-width: 350px; display: flex; flex-direction: column; gap: 15px; } .login-form input { padding: 10px; border: 1px solid #ddd; border-radius: 4px; } .login-form button { background-color: #007bff; color: white; border: none; padding: 10px; border-radius: 4px; cursor: pointer; } .error-message { color: red; margin: 0; text-align: center; } .crm-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .crm-container { background-color: white; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px; } .interaction-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; } .name-inputs { display: flex; gap: 10px; } .name-inputs input { flex: 1; } .interaction-form input, .interaction-form textarea { padding: 10px; border: 1px solid #ddd; border-radius: 4px; } .interaction-form > button { background-color: #007bff; color: white; border: none; padding: 10px; border-radius: 4px; cursor: pointer; } .interaction-list { display: flex; flex-direction: column; gap: 15px; } .customer-interaction-group { background-color: #f9f9f9; border-radius: 4px; padding: 15px; border: 1px solid #e9ecef; } .customer-interaction-group h3 { margin-top: 0; margin-bottom: 10px; color: #333; } .interaction-card { background-color: white; border-radius: 4px; padding: 10px; margin-bottom: 10px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); } .interaction-card small { color: #6c757d; display: block; margin-top: 5px; } .interaction-card a { color: #007bff; text-decoration: none; } .interaction-card a:hover { text-decoration: underline; } .copyable-email { cursor: pointer; } .copyable-email:hover { text-decoration: underline; } .interaction-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 5px; } .delete-button { cursor: pointer; } .pagination-controls { display: flex; justify-content: center; align-items: center; gap: 15px; margin-top: 20px; padding: 10px; } .pagination-button { color: #000; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; margin-top: 10px; } .pagination-button:disabled { background-color: #ccc; cursor: not-allowed; } .tags-input-container { margin: 10px 0; } .tags-list { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 5px; } .tag-input { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; } .tag-pill { background-color: #e9ecef; color: #495057; padding: 4px 12px; border-radius: 16px; font-size: 14px; display: inline-flex; align-items: center; margin-right: 5px; cursor: pointer; border: none; transition: all 0.2s ease; } .tag-pill:hover { background-color: #dee2e6; } .tag-pill.selected { background-color: #007bff; color: white; } .tag-pill.selected:hover { background-color: #0056b3; } .tag-remove { border: none; } `;

👹 Welcome to Kernel CRM

📋 Customer Conversations

Filter by Tags

🧑 {customerName}

🌽 It's Kernel!