Added template creator (doesn't work without db)

2026-03-10 19:15:03 -05:00
parent 5a8b20a827
commit 39c5021e2f
10 changed files with 322 additions and 8 deletions
@@ -0,0 +1,88 @@
+import type { Component } from 'solid-js';
+import { createSignal } from 'solid-js';
+import { Save } from 'lucide-solid';
+import type { TemplateItem, Template } from '../types';
+import TemplateItemList from '../components/template/TemplateItemList';
+
+const TemplateCreator: Component = () => {
+    const [templateName, setTemplateName] = createSignal('');
+    const [items, setItems] = createSignal<TemplateItem[]>([]);
+
+    const handleAddItem = () => {
+        const newItem: TemplateItem = {
+            id: crypto.randomUUID(),
+            description: '',
+            quantity: 1,
+            unitPrice: 0
+        };
+        setItems([...items(), newItem]);
+    };
+
+    const handleUpdateItem = (id: string, updates: Partial<TemplateItem>) => {
+        setItems(items().map(item => item.id === id ? { ...item, ...updates } : item));
+    };
+
+    const handleDeleteItem = (id: string) => {
+        setItems(items().filter(item => item.id !== id));
+    };
+
+    const handleSaveTemplate = () => {
+        // Here we would typically save to localStorage or backend
+        // For now, we'll just log it or show a toast
+        const template: Template = {
+            id: crypto.randomUUID(),
+            name: templateName(),
+            items: items()
+        };
+        console.log('Template saved:', template);
+        alert(`Template "${template.name}" saved successfully!`);
+        
+        // Reset form
+        setTemplateName('');
+        setItems([]);
+    };
+
+    return (
+        <div class="flex flex-col items-center py-6 px-4 font-sans print:bg-transparent print:border-none print:p-0">
+            <div class="max-w-4xl w-full bg-white rounded-xl shadow-premium p-8 mb-8 border border-gray-100 no-print">
+                <div class="flex items-center justify-between mb-8 pb-4 border-b border-gray-100">
+                    <div>
+                        <h1 class="text-3xl font-bold text-gray-800 mb-2 tracking-tight">Template Creator</h1>
+                        <p class="text-gray-500 font-medium">Create templates for your estimate sub-scopes.</p>
+                    </div>
+                    
+                    <button
+                        onClick={handleSaveTemplate}
+                        disabled={!templateName() || items().length === 0}
+                        class="flex items-center gap-2 px-6 py-2.5 text-sm font-bold text-white bg-blue-600 rounded-xl hover:bg-blue-700 transition-all shadow-premium hover:shadow-premium-hover disabled:opacity-50 disabled:cursor-not-allowed"
+                    >
+                        <Save class="w-4 h-4" />
+                        Save Template
+                    </button>
+                </div>
+                
+                <div class="mb-8">
+                    <label class="block text-sm font-semibold text-gray-700 mb-2">
+                        Sub-Scope Name
+                    </label>
+                    <input
+                        type="text"
+                        value={templateName()}
+                        onInput={(e) => setTemplateName(e.currentTarget.value)}
+                        placeholder="e.g. Master Bathroom Rough-in"
+                        class="w-full bg-gray-50/50 border border-gray-200 rounded-xl px-4 py-3 text-gray-800 focus:bg-white focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 outline-none font-medium transition-all shadow-sm"
+                    />
+                </div>
+
+                <TemplateItemList
+                    items={items()}
+                    onAddItem={handleAddItem}
+                    onUpdateItem={handleUpdateItem}
+                    onDeleteItem={handleDeleteItem}
+                />
+            </div>
+        </div>
+    );
+};
+
+export default TemplateCreator;