// Extra admin tabs: visitor counter, blog editor, page-content editor, settings. // Lives in its own file so pages-admin.jsx doesn't balloon. // ---------- Visitor counter (sits above the orders table) ---------- function VisitorCounterRow() { const app = useApp(); const c = app.counter; if (!c) return null; // Build a tiny 30-day sparkline from days[] const days = c.days || []; const max = Math.max(1, ...days.map(d => d.count)); return (
Site visitors
Counts unique browsers, with a 12-hour cool-down so reloads don't inflate the number.
{days.length > 0 && ( )}
); } function CounterStat({ label, value }) { return (
{Number(value).toLocaleString()}
{label}
); } // ---------- Blog management ---------- function AdminBlog() { const app = useApp(); const posts = (app.allBlogPosts || []).slice().sort((a, b) => b.createdAt - a.createdAt); const [editing, setEditing] = useState(null); const [creating, setCreating] = useState(false); return (

Studio journal

Write blog posts for the journal — they appear on the home page and the journal index.

{posts.length === 0 ? (

No posts yet. Write your first journal entry!

) : (
{posts.map(p => (
{p.image ? : }
{p.title} {p.published ? Published : Draft}
{fmtDate(p.createdAt)} · /blog/{p.slug}

{p.excerpt || (p.content || "").slice(0, 140) + "…"}

View
))}
)} {creating && ( setCreating(false)}>

Write a new post

{ try { await app.addBlogPost(formData); app.toast("Post saved!"); setCreating(false); } catch (err) { app.toast(err.message || "Couldn't save — try again."); } }} /> )} {editing && ( setEditing(null)}>

Edit post

{ try { await app.updateBlogPost(editing.id, formData); app.toast("Saved!"); setEditing(null); } catch (err) { app.toast(err.message || "Couldn't save — try again."); } }} /> )}
); } function BlogPostForm({ initial, submitLabel, onSubmit }) { const [f, setF] = useState({ ...initial }); const [imageFile, setImageFile] = useState(null); const [uploading, setUploading] = useState(false); // Track upload state const set = (k, v) => setF(s => ({ ...s, [k]: v })); const fileRef = useRef(null); const handleImage = async (e) => { const file = e.target.files?.[0]; if (!file) return; setImageFile(file); const dataUrl = await readFileAsDataURL(file); set("image", dataUrl); // Keeps local UI preview working perfectly }; const submit = async (e) => { e.preventDefault(); if (!f.title) return; // 1. Create a unified FormData instance const formData = new FormData(); // 2. Pack all standard text parameter keys formData.append("title", f.title); formData.append("slug", f.slug || ""); formData.append("excerpt", f.excerpt || ""); formData.append("content", f.content || ""); formData.append("tags", f.tags || ""); formData.append("published", f.published ? "1" : "0"); // 3. Grab the raw file directly from your component's imageFile state if (imageFile) { formData.append("image", await shrinkImageForUpload(imageFile)); // This matches your backend upload.single("image") expectations! } else if (f.image && !f.image.startsWith("data:")) { formData.append("image", f.image); // Keeps the old filename if editing without updating the photo } // 4. Send the whole bundle down to your working context handlers onSubmit(formData); }; return (
set("title", e.target.value)} placeholder="On the hoop this week…" autoFocus />
set("slug", e.target.value)} placeholder="on-the-hoop-this-week" />
Leave blank — we'll make a nice slug from the title.
set("tags", e.target.value)} placeholder="studio, wedding" />