Lunoh

import React, { useState, useEffect } from “react”; import { Card } from “@/components/ui/card”;

// Seed data const seedCompany = { name: “Demo Fence Co.”, tax: 0.05, phone: “555-123-4567”, email: “contact@demofence.com” };

const seedTemplates = [ { id: “chain”, label: “Chain‑Link”, material: 15, labor: 12, margin: 0.2 }, { id: “wood”, label: “Wood Privacy”, material: 22, labor: 18, margin: 0.25 }, { id: “vinyl”, label: “Vinyl Fence”, material: 28, labor: 16, margin: 0.3 } ];

// Gate types const GATE_TYPES = [ { id: “manual”, label: “Manual Gate”, width: 4 }, { id: “rv”, label: “RV Gate”, width: 12 }, { id: “pedestrian”, label: “Pedestrian Gate”, width: 3 }, { id: “double”, label: “Double Gate”, width: 8 } ];

// UI Components const Modal = ({ open, onClose, title, children }) => { if (!open) return null; return (

<div className=“bg-white rounded-lg p-4 w-11/12 max-w-sm” onClick={e => e.stopPropagation()} > {title &&

{title}

} {children}

); };

const Button = ({ children, onClick, variant, className }) => { const baseClasses = “px-4 py-2 rounded font-medium”; const variantClasses = variant === “outline” ? “border border-gray-300 text-gray-700” : “bg-blue-600 text-white”;

return ( <button className={${baseClasses} ${variantClasses} ${className || ""}} onClick={onClick} > {children} ); };

const Input = ({ value, onChange, type, className, placeholder }) => { return ( <input type={type || “text”} value={value} onChange={onChange} placeholder={placeholder} className={border rounded p-2 w-full ${className || ""}} /> ); };

// Settings Screen Component const SettingsScreen = ({ company, setCompany, templates, setTemplates }) => { const updateTemplate = (i, field, value) => { const updated = […templates]; updated[i][field] = value; setTemplates(updated); };

const removeTemplate = (index) => { if (templates.length > 1) { setTemplates(templates.filter((_, i) => i !== index)); } };

const addTemplate = () => { setTemplates([ …templates, { id: Date.now().toString(), label: “New Fence Type”, material: 10, labor: 10, margin: 0.2 } ]); };

return (

{/* Company Info */}

Company Information

Company Name <Input value={company.name} onChange={(e) => setCompany({ …company, name: e.target.value })} />

Phone <Input value={company.phone} onChange={(e) => setCompany({ …company, phone: e.target.value })} />

Email <Input value={company.email} onChange={(e) => setCompany({ …company, email: e.target.value })} />

Sales Tax Rate (e.g., 0.05 for 5%) <Input type=“number” step=“0.01” value={company.tax} onChange={(e) => setCompany({ …company, tax: parseFloat(e.target.value) })} />

    {/* Fence Types */}
    <div>
      <div className="flex justify-between items-center mb-2">
        <h2 className="font-semibold text-lg">Fence Types</h2>
      </div>
      
      <div className="space-y-3">
        {templates.map((template, index) => (
          <Card key={template.id} className="p-4 space-y-3">
            <div className="flex justify-between items-center">
              <h3 className="font-medium">{template.label}</h3>
              <button 
                onClick={() => removeTemplate(index)}
                className="text-red-500 px-2 py-1 rounded hover:bg-red-50"
                disabled={templates.length <= 1}
              >
                {templates.length <= 1 ? '(Required)' : 'Delete'}
              </button>
            </div>
            <div>
              <label className="text-xs">Label</label>
              <Input 
                value={template.label} 
                onChange={(e) => updateTemplate(index, "label", e.target.value)} 
              />
            </div>
            <div className="grid grid-cols-3 gap-2">
              <div>
                <label className="text-xs">Material $/ft</label>
                <Input 
                  type="number" 
                  value={template.material} 
                  onChange={(e) => updateTemplate(index, "material", parseFloat(e.target.value))} 
                />
              </div>
              <div>
                <label className="text-xs">Labor $/ft</label>
                <Input 
                  type="number" 
                  value={template.labor} 
                  onChange={(e) => updateTemplate(index, "labor", parseFloat(e.target.value))} 
                />
              </div>
              <div>
                <label className="text-xs">Margin (0‑1)</label>
                <Input 
                  type="number" 
                  step="0.01" 
                  value={template.margin} 
                  onChange={(e) => updateTemplate(index, "margin", parseFloat(e.target.value))} 
                />
              </div>
            </div>
          </Card>
        ))}
      </div>
    </div>
  </div>

  {/* Fixed bottom button */}
  <div className="fixed bottom-0 left-0 right-0 bg-white border-t p-4">
    <Button 
      className="w-full"
      onClick={addTemplate}
    >
      Add Fence Type
    </Button>
  </div>
</div>

); };

// Quote Builder Component const QuoteBuilder = ({ templates, activeQuote, setActiveQuote, company }) => { const [lastFenceType, setLastFenceType] = useState(templates[0]?.id); const [entries, setEntries] = useState(activeQuote?.entries || []); const [margin, setMargin] = useState(activeQuote?.margin || templates[0]?.margin || 0.2); const [modal, setModal] = useState({ open: false, kind: “run”, fenceId: lastFenceType, value: 10 });

// Calculate totals const calcTotals = (entries) => { let footage = 0; let gateCount = 0; let materialCost = 0; let laborCost = 0;

entries.forEach(entry => {
  if (entry.kind === "run") {
    const tpl = templates.find(t => t.id === entry.fenceId);
    if (tpl) {
      footage += entry.len;
      materialCost += entry.len * tpl.material;
      laborCost += entry.len * tpl.labor;
    }
  } else if (entry.kind === "gate") {
    gateCount++;
  }
});

const baseCost = materialCost + laborCost;
const profit = baseCost * margin;
const sub = baseCost + profit;
// Use company.tax instead of hardcoded value
const tax = company.tax * sub;
const total = sub + tax;

return {
  footage,
  gateCount,
  materialCost,
  laborCost,
  baseCost,
  profit,
  sub,
  tax,
  total
};

};

const totals = calcTotals(entries);

// Update the quote whenever relevant values change useEffect(() => { if (entries.length > 0) { setActiveQuote({ entries, margin, …totals, date: new Date().toISOString() }); } else { setActiveQuote(null); } }, [entries, margin]);

const openModal = (kind) => { setModal({ open: true, kind, fenceId: lastFenceType, value: kind === “run” ? 10 : 0 }); };

const confirmModal = () => { const id = Date.now();

if (modal.kind === "run") {
  const entry = { 
    id, 
    kind: "run", 
    fenceId: modal.fenceId,
    len: modal.value,
    label: templates.find(t => t.id === modal.fenceId)?.label || "Unknown"
  };
  setEntries([...entries, entry]);
  setLastFenceType(modal.fenceId);
} 
else if (modal.kind === "photo") {
  setEntries([...entries, { id, kind: "photo", label: "Site Photo" }]);
}
else if (modal.kind === "voice") {
  setEntries([...entries, { id, kind: "voice", label: "Voice Note" }]);
}

setModal({ ...modal, open: false });

};

const addGate = (gateTypeId) => { const id = Date.now(); const gateDetails = GATE_TYPES.find(g => g.id === gateTypeId);

setEntries([...entries, { 
  id, 
  kind: "gate", 
  gateSize: gateTypeId,
  width: gateDetails?.width || 4,
  label: gateDetails?.label || "Gate"
}]);

setModal({ ...modal, open: false });

};

const removeEntry = (id) => { setEntries(entries.filter(e => e.id !== id)); };

return (

{/* Quote entries */}

{entries.length === 0 && (

No items added yet

Use buttons below to add items

)}

      {entries.map((entry) => (
        <Card key={entry.id} className="p-4">
          <div className="flex justify-between items-start">
            <div className="flex items-start">
              <div className="mr-3 mt-1">
                {entry.kind === "run" && <span className="text-blue-600">↔️</span>}
                {entry.kind === "gate" && <span className="text-green-600">🚪</span>}
                {entry.kind === "photo" && <span className="text-purple-600">📷</span>}
                {entry.kind === "voice" && <span className="text-red-600">🎤</span>}
              </div>
              <div>
                <div className="font-medium">{entry.label}</div>
                <div className="text-sm text-gray-600">
                  {entry.kind === "run" && `${entry.len} ft`}
                  {entry.kind === "gate" && `${entry.width} ft wide`}
                </div>
              </div>
            </div>
            <button
              onClick={() => removeEntry(entry.id)}
              className="text-red-500 p-1"
            >
              ✕
            </button>
          </div>
          
          {entry.kind === "photo" && (
            <div className="mt-3 relative h-24 overflow-hidden rounded border">
              <img 
                src="/api/placeholder/300/100" 
                alt="Site photo" 
                className="w-full object-cover absolute top-1/2 left-0 -translate-y-1/2"
              />
            </div>
          )}
        </Card>
      ))}
    </div>
  </div>

  {/* Cost Summary - Fixed at the bottom above toolbar */}
  <div className="fixed bottom-16 left-0 right-0 bg-white border-t p-3 z-10">
    <div className="flex justify-between text-sm mb-1">
      <span>{entries.length > 0 ? `${totals.footage} ft • ${totals.gateCount} gates` : "0 ft • 0 gates"}</span>
      <span>{entries.length > 0 ? `${totals.total.toFixed(2)}` : "$0.00"}</span>
    </div>
    <div className="flex justify-between text-sm mb-1">
      <span>Margin:</span>
      <span className="flex items-center">
        <input 
          type="range" 
          min="0" 
          max="0.5" 
          step="0.01" 
          value={margin} 
          onChange={(e) => setMargin(parseFloat(e.target.value))} 
          className="w-24 mr-1 h-4" 
        />
        {(margin * 100).toFixed(0)}%
      </span>
    </div>
  </div>

  {/* Gate selection modal */}
  <Modal 
    open={modal.kind === "gate" && modal.open} 
    onClose={() => setModal(prev => ({ ...prev, open: false }))}
    title="Select Gate Type"
  >
    <div className="space-y-2">
      {GATE_TYPES.map(gate => (
        <button
          key={gate.id} 
          className="p-3 border rounded flex items-center w-full text-left"
          onClick={() => addGate(gate.id)}
        >
          <span className="mr-2">🚪</span>
          <div>
            <div>{gate.label}</div>
            <div className="text-xs text-gray-500">{gate.width} ft wide</div>
          </div>
        </button>
      ))}
    </div>
  </Modal>

  {/* Run modal */}
  <Modal
    open={modal.kind === "run" && modal.open}
    onClose={() => setModal({ ...modal, open: false })}
    title="Add Fence Run"
  >
    <div className="mb-3">
      <label className="block text-sm font-medium mb-1">Fence Type</label>
      <select 
        className="w-full p-2 border rounded"
        value={modal.fenceId}
        onChange={(e) => setModal({ ...modal, fenceId: e.target.value })}
      >
        {templates.map(t => (
          <option key={t.id} value={t.id}>{t.label}</option>
        ))}
      </select>
    </div>
    
    <p className="mb-2">Set run length:</p>
    <input 
      type="range" 
      min="1" 
      max="200" 
      value={modal.value} 
      onChange={(e) => setModal({ ...modal, value: parseInt(e.target.value) })} 
      className="w-full" 
    />
    <p className="text-center mt-1">{modal.value} ft</p>
    <div className="flex justify-between mt-4">
      <Button variant="outline" onClick={() => setModal({ ...modal, open: false })}>Cancel</Button>
      <Button onClick={confirmModal}>Add Run</Button>
    </div>
  </Modal>

  {/* Photo modal */}
  <Modal
    open={modal.kind === "photo" && modal.open}
    onClose={() => setModal({ ...modal, open: false })}
    title="Add Photo"
  >
    <div className="flex justify-center mb-4">
      <img 
        src="/api/placeholder/300/200" 
        alt="Fence site photo" 
        className="rounded border w-full" 
      />
    </div>
    <div className="flex justify-between">
      <Button variant="outline" onClick={() => setModal({ ...modal, open: false })}>Cancel</Button>
      <Button onClick={confirmModal}>Add Photo</Button>
    </div>
  </Modal>

  {/* Voice modal */}
  <Modal
    open={modal.kind === "voice" && modal.open}
    onClose={() => setModal({ ...modal, open: false })}
    title="Add Voice Note"
  >
    <div className="flex flex-col items-center justify-center mb-4">
      <div className="w-16 h-16 rounded-full bg-red-100 flex items-center justify-center mb-2">
        <span className="text-3xl">🎤</span>
      </div>
      <p className="text-center">Tap to record a voice note</p>
    </div>
    <div className="flex justify-between">
      <Button variant="outline" onClick={() => setModal({ ...modal, open: false })}>Cancel</Button>
      <Button onClick={confirmModal}>Add Recording</Button>
    </div>
  </Modal>

  {/* Bottom toolbar */}
  <div className="fixed bottom-0 left-0 right-0 bg-white border-t grid grid-cols-4">
    <button 
      className="flex flex-col items-center justify-center py-3 text-blue-600"
      onClick={() => openModal("run")}
    >
      <span className="text-2xl">↔️</span>
      <span className="text-xs mt-1">Run</span>
    </button>
    <button 
      className="flex flex-col items-center justify-center py-3 text-green-600"
      onClick={() => setModal({ open: true, kind: "gate" })}
    >
      <span className="text-2xl">🚪</span>
      <span className="text-xs mt-1">Gate</span>
    </button>
    <button 
      className="flex flex-col items-center justify-center py-3 text-purple-600"
      onClick={() => openModal("photo")}
    >
      <span className="text-2xl">📷</span>
      <span className="text-xs mt-1">Photo</span>
    </button>
    <button 
      className="flex flex-col items-center justify-center py-3 text-red-600"
      onClick={() => openModal("voice")}
    >
      <span className="text-2xl">🎤</span>
      <span className="text-xs mt-1">Voice</span>
    </button>
  </div>
</div>

); };

// Review Screen Component const ReviewScreen = ({ quote, company, customerInfo, setCustomerInfo }) => { if (!quote) return (

No quote to review

);

const updateCustomerInfo = (field, value) => { setCustomerInfo({ …customerInfo, [field]: value }); };

return (

Quote Summary

Date: {new Date(quote.date).toLocaleDateString()}

      <div className="grid grid-cols-1 gap-3 mt-4">
        {quote.entries
          .filter(entry => entry.kind === "run" || entry.kind === "gate")
          .map((entry) => (
            <div key={entry.id} className="flex items-center border-b pb-2">
              <div className="mr-2">
                {entry.kind === "run" ? "↔️" : "🚪"}
              </div>
              <div>
                <div>{entry.label}</div>
                <div className="text-sm text-gray-600">
                  {entry.kind === "run" ? `${entry.len} ft` : `${entry.width} ft wide`}
                </div>
              </div>
            </div>
          ))}
      </div>
      
      <div className="mt-4">
        <div className="flex justify-between mb-1">
          <span>Subtotal:</span>
          <span>${quote.sub.toFixed(2)}</span>
        </div>
        <div className="flex justify-between mb-1">
          <span>Tax:</span>
          <span>${quote.tax.toFixed(2)}</span>
        </div>
        <div className="border-t flex justify-between font-bold text-lg pt-2 mt-2">
          <span>Total:</span>
          <span>${quote.total.toFixed(2)}</span>
        </div>
      </div>
    </Card>

    <Card className="p-4 space-y-3">
      <h3 className="font-semibold">Customer Info</h3>
      <div>
        <label className="font-medium mb-2 block">Location</label>
        <button 
          className="w-full p-3 text-left rounded border border-gray-300 flex justify-between items-center"
          onClick={() => {
            const location = prompt("Enter job location:", customerInfo.location);
            if (location !== null) updateCustomerInfo("location", location);
          }}
        >
          <span>{customerInfo.location || "Tap to enter location"}</span>
          <span>📍</span>
        </button>
      </div>
      
      <div>
        <label className="font-medium mb-2 block">Customer Name</label>
        <button 
          className="w-full p-3 text-left rounded border border-gray-300 flex justify-between items-center"
          onClick={() => {
            const name = prompt("Enter customer name:", customerInfo.name);
            if (name !== null) updateCustomerInfo("name", name);
          }}
        >
          <span>{customerInfo.name || "Tap to enter name"}</span>
          <span>👤</span>
        </button>
      </div>
      
      <div>
        <label className="font-medium mb-2 block">Phone</label>
        <button 
          className="w-full p-3 text-left rounded border border-gray-300 flex justify-between items-center"
          onClick={() => {
            const phone = prompt("Enter customer phone:", customerInfo.phone);
            if (phone !== null) updateCustomerInfo("phone", phone);
          }}
        >
          <span>{customerInfo.phone || "Tap to enter phone"}</span>
          <span>📞</span>
        </button>
      </div>
      
      <div>
        <label className="font-medium mb-2 block">Email</label>
        <button 
          className="w-full p-3 text-left rounded border border-gray-300 flex justify-between items-center"
          onClick={() => {
            const email = prompt("Enter customer email:", customerInfo.email);
            if (email !== null) updateCustomerInfo("email", email);
          }}
        >
          <span>{customerInfo.email || "Tap to enter email"}</span>
          <span>✉️</span>
        </button>
      </div>
    </Card>
  </div>

  {/* Bottom action button */}
  <div className="fixed bottom-0 left-0 right-0 bg-white p-4 border-t">
    <Button 
      className="w-full bg-green-600"
      onClick={() => alert('Quote generated successfully!')}
    >
      Generate Quote
    </Button>
  </div>
</div>

); };

// Main App export default function FenceQuoteApp() { const [screen, setScreen] = useState(“settings”); // settings | builder | review const [company, setCompany] = useState(seedCompany); const [templates, setTemplates] = useState(seedTemplates); const [activeQuote, setActiveQuote] = useState(null); const [customerInfo, setCustomerInfo] = useState({ name: “”, email: “”, phone: “”, location: “”, notes: "" });

const navigateToSettings = () => { setActiveQuote(null); setCustomerInfo({ name: “”, email: “”, phone: “”, location: “”, notes: "" }); setScreen(“settings”); };

// Check if there are runs or gates in the quote const hasRunsOrGates = activeQuote?.entries?.some(entry => entry.kind === “run” || entry.kind === “gate” ) || false;

return (

{/* Fixed top nav /}

{/ Left nav button */} {screen === “builder” && ( )} {screen === “review” && ( <button className=“text-blue-600 font-medium w-16 text-left” onClick={() => setScreen(“builder”)} > Edit )} {screen === “settings” && (

// Spacer for home screen )}

    {/* Title */}
    <h1 className="text-lg font-medium">
      {screen === "settings" ? "Settings" : 
       screen === "builder" ? "Build Quote" : 
       "Review Quote"}
    </h1>
    
    {/* Right nav button */}
    {screen === "settings" && (
      <button 
        className="text-blue-600 font-medium text-right"
        onClick={() => setScreen("builder")}
      >
        New Quote
      </button>
    )}
    {screen === "builder" && (
      <button 
        className={`text-blue-600 font-medium w-16 text-right ${!hasRunsOrGates ? 'opacity-50' : ''}`}
        onClick={() => hasRunsOrGates && setScreen("review")}
        disabled={!hasRunsOrGates}
        style={{cursor: hasRunsOrGates ? 'pointer' : 'not-allowed'}}
      >
        Review
      </button>
    )}
    {screen === "review" && (
      <div className="w-16"></div> // Spacer
    )}
  </header>

  {/* Content area */}
  <div className="flex-1">
    {screen === "settings" && (
      <SettingsScreen
        company={company}
        setCompany={setCompany}
        templates={templates}
        setTemplates={setTemplates}
      />
    )}
    {screen === "builder" && (
      <QuoteBuilder
        templates={templates}
        activeQuote={activeQuote}
        setActiveQuote={setActiveQuote}
        company={company}
      />
    )}
    {screen === "review" && (
      <ReviewScreen 
        quote={activeQuote} 
        company={company}
        customerInfo={customerInfo}
        setCustomerInfo={setCustomerInfo}
      />
    )}
  </div>
</div>

); }