root
262 lines
13 KiB
TypeScript
262 lines
13 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
|
|
// Monday-style columns
|
|
const COLUMNS = [
|
|
{ id: "brainstorming", name: "💡 Brainstorming", color: "#ff6b6b" },
|
|
{ id: "planning", name: "📋 Planning", color: "#ffd93d" },
|
|
{ id: "ready", name: "✅ Ready", color: "#6bcb77" },
|
|
{ id: "in-progress", name: "🚀 In Progress", color: "#4d96ff" },
|
|
{ id: "review", name: "👀 Review", color: "#9b59b6" },
|
|
{ id: "done", name: "🎉 Done", color: "#00d2d3" },
|
|
];
|
|
|
|
interface Feature {
|
|
id: string;
|
|
title: string;
|
|
description: string;
|
|
column: string;
|
|
projectId: string;
|
|
approved: boolean;
|
|
implemented: boolean;
|
|
}
|
|
|
|
// Project features - these will be listed for approval
|
|
const PROJECT_FEATURES_INITIAL: Feature[] = [
|
|
// SiteMente v1
|
|
{ id: "s1", title: "Vertical Pack Cards", description: "Beautiful cards for Real Estate, Restaurant, Clinic verticals on landing", column: "brainstorming", projectId: "sitemente-v1", approved: false, implemented: false },
|
|
{ id: "s2", title: "Contact/Onboarding Form", description: "Lead capture form with business type selection", column: "brainstorming", projectId: "sitemente-v1", approved: false, implemented: false },
|
|
{ id: "s3", title: "AI Widget Live Demo", description: "Working voice/chat AI widget on landing page", column: "brainstorming", projectId: "sitemente-v1", approved: false, implemented: false },
|
|
{ id: "s4", title: "Mobile Responsive Pass", description: "Full mobile responsiveness audit and fixes", column: "planning", projectId: "sitemente-v1", approved: false, implemented: false },
|
|
{ id: "s5", title: "Demo Pages SEO", description: "Per-vertical landing pages with unique meta tags", column: "planning", projectId: "sitemente-v1", approved: false, implemented: false },
|
|
{ id: "s6", title: "Lead Capture Integration", description: "Connect forms to email/CRM notification", column: "planning", projectId: "sitemente-v1", approved: false, implemented: false },
|
|
{ id: "s7", title: "WhatsApp Business Integration", description: "Auto-send leads to WhatsApp", column: "planning", projectId: "sitemente-v1", approved: false, implemented: false },
|
|
{ id: "s8", title: "Pricing Toggle", description: "Monthly/Annual toggle with discount display", column: "ready", projectId: "sitemente-v1", approved: false, implemented: false },
|
|
{ id: "s9", title: "Case Studies Section", description: "Real testimonials from Costa del Sol clients", column: "ready", projectId: "sitemente-v1", approved: false, implemented: false },
|
|
{ id: "s10", title: "Blog Section", description: "SEO blog with AI-generated content tips", column: "in-progress", projectId: "sitemente-v1", approved: false, implemented: false },
|
|
// HolaCompi v1
|
|
{ id: "h1", title: "Voice AI Agent", description: "Real voice conversation with callers", column: "brainstorming", projectId: "holacompi-v1", approved: false, implemented: false },
|
|
{ id: "h2", title: "WhatsApp Integration", description: "AI responds on WhatsApp Business", column: "brainstorming", projectId: "holacompi-v1", approved: false, implemented: false },
|
|
{ id: "h3", title: "Consumer Rights Chatbot", description: "Legal info chatbot for immigrants", column: "brainstorming", projectId: "holacompi-v1", approved: false, implemented: false },
|
|
{ id: "h4", title: "Spanish Bureaucracy Guide", description: "AI guide through Spanish paperwork", column: "planning", projectId: "holacompi-v1", approved: false, implemented: false },
|
|
{ id: "h5", title: "Multi-language Support", description: "ES, EN, FR, AR, RO language options", column: "planning", projectId: "holacompi-v1", approved: false, implemented: false },
|
|
{ id: "h6", title: "Emergency Contacts", description: "Quick access to emergency services by location", column: "ready", projectId: "holacompi-v1", approved: false, implemented: false },
|
|
// Infrastructure
|
|
{ id: "i1", title: "Production Deployment", description: "Deploy to production domain (sitemente.com)", column: "planning", projectId: "infrastructure", approved: false, implemented: false },
|
|
{ id: "i2", title: "Cloud Backups", description: "Automated daily backups to cloud storage", column: "planning", projectId: "infrastructure", approved: false, implemented: false },
|
|
{ id: "i3", title: "Monitoring Setup", description: "Uptime monitoring and alerts", column: "planning", projectId: "infrastructure", approved: false, implemented: false },
|
|
{ id: "i4", title: "SSL Certificate", description: "Proper HTTPS for production", column: "ready", projectId: "infrastructure", approved: false, implemented: false },
|
|
{ id: "i5", title: "Email Notifications", description: "System sends emails for important events", column: "in-progress", projectId: "infrastructure", approved: false, implemented: false },
|
|
];
|
|
|
|
const PROJECTS = [
|
|
{ id: "sitemente-v1", name: "SiteMente v1", emoji: "🏢", description: "AI website platform for local businesses", color: "#8B5CF6" },
|
|
{ id: "holacompi-v1", name: "HolaCompi v1", emoji: "🤝", description: "AI ally for immigrants & consumers", color: "#EC4899" },
|
|
{ id: "infrastructure", name: "Infrastructure", emoji: "⚙️", description: "DevOps, deployment & maintenance", color: "#10B981" },
|
|
];
|
|
|
|
export default function MondayBoard() {
|
|
const [mounted, setMounted] = useState(false);
|
|
const [selectedProject, setSelectedProject] = useState<string>("sitemente-v1");
|
|
const [features, setFeatures] = useState<Feature[]>([]);
|
|
const [showApproval, setShowApproval] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
setMounted(true);
|
|
setFeatures(PROJECT_FEATURES_INITIAL);
|
|
}, []);
|
|
|
|
if (!mounted) {
|
|
return (
|
|
<div className="h-full flex items-center justify-center">
|
|
<div className="text-white/60">Loading...</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const projectFeatures = features.filter(f => f.projectId === selectedProject);
|
|
|
|
const getColumnFeatures = (columnId: string) => {
|
|
return projectFeatures.filter(f => f.column === columnId);
|
|
};
|
|
|
|
const approveFeature = (featureId: string) => {
|
|
setFeatures(prev => prev.map(f =>
|
|
f.id === featureId ? { ...f, approved: true, column: "ready" } : f
|
|
));
|
|
setShowApproval(null);
|
|
};
|
|
|
|
const markImplemented = (featureId: string) => {
|
|
setFeatures(prev => prev.map(f =>
|
|
f.id === featureId ? { ...f, implemented: true, column: "done" } : f
|
|
));
|
|
};
|
|
|
|
const getProgress = () => {
|
|
const total = projectFeatures.length;
|
|
const done = projectFeatures.filter(f => f.column === "done").length;
|
|
return total > 0 ? Math.round((done / total) * 100) : 0;
|
|
};
|
|
|
|
const currentFeature = showApproval ? features.find(f => f.id === showApproval) : null;
|
|
|
|
return (
|
|
<div className="h-full flex flex-col">
|
|
{/* Project Selector */}
|
|
<div className="flex items-center gap-3 p-4 border-b border-white/10">
|
|
<span className="text-white/60 text-sm">Project:</span>
|
|
<div className="flex gap-2">
|
|
{PROJECTS.map(proj => (
|
|
<button
|
|
key={proj.id}
|
|
onClick={() => setSelectedProject(proj.id)}
|
|
className={`flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-medium transition ${
|
|
selectedProject === proj.id
|
|
? "bg-white/20 text-white"
|
|
: "text-white/60 hover:text-white hover:bg-white/10"
|
|
}`}
|
|
>
|
|
<span>{proj.emoji}</span>
|
|
<span>{proj.name}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
<div className="ml-auto flex items-center gap-2">
|
|
<div className="w-32 h-2 bg-white/10 rounded-full overflow-hidden">
|
|
<div
|
|
className="h-full bg-brand-pink transition-all"
|
|
style={{ width: `${getProgress()}%` }}
|
|
/>
|
|
</div>
|
|
<span className="text-xs text-white/60">{getProgress()}%</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Board */}
|
|
<div className="flex-1 overflow-x-auto p-4">
|
|
<div className="flex gap-3 min-w-max h-full">
|
|
{COLUMNS.map(column => {
|
|
const columnFeatures = getColumnFeatures(column.id);
|
|
return (
|
|
<div
|
|
key={column.id}
|
|
className="w-72 flex-shrink-0 flex flex-col rounded-xl bg-white/5 border border-white/10"
|
|
>
|
|
{/* Column Header */}
|
|
<div
|
|
className="p-3 rounded-t-xl border-b border-white/10"
|
|
style={{ backgroundColor: `${column.color}20` }}
|
|
>
|
|
<div className="flex items-center justify-between">
|
|
<span className="font-semibold text-sm" style={{ color: column.color }}>
|
|
{column.name}
|
|
</span>
|
|
<span className="text-xs bg-white/10 px-2 py-0.5 rounded-full text-white/70">
|
|
{columnFeatures.length}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Features List */}
|
|
<div className="flex-1 overflow-y-auto p-2 space-y-2">
|
|
{columnFeatures.map(feature => (
|
|
<div
|
|
key={feature.id}
|
|
className={`p-3 rounded-lg border transition-all cursor-pointer ${
|
|
feature.approved
|
|
? "bg-brand-pink/20 border-brand-pink/50"
|
|
: feature.implemented
|
|
? "bg-green-500/20 border-green-500/50"
|
|
: "bg-white/5 border-white/10 hover:border-white/30"
|
|
}`}
|
|
onClick={() => {
|
|
if (!feature.approved && !feature.implemented) {
|
|
setShowApproval(feature.id);
|
|
}
|
|
}}
|
|
>
|
|
<div className="flex items-start justify-between gap-2">
|
|
<div className="flex-1">
|
|
<h4 className="text-sm font-medium text-white">{feature.title}</h4>
|
|
<p className="text-xs text-white/50 mt-1">{feature.description}</p>
|
|
</div>
|
|
<div className="flex flex-col gap-1">
|
|
{feature.approved && !feature.implemented && (
|
|
<button
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
markImplemented(feature.id);
|
|
}}
|
|
className="text-xs bg-green-500/30 hover:bg-green-500/50 text-green-300 px-2 py-1 rounded transition"
|
|
>
|
|
✓ Done
|
|
</button>
|
|
)}
|
|
{feature.approved && (
|
|
<span className="text-xs text-brand-pink">✓ Approved</span>
|
|
)}
|
|
{feature.implemented && (
|
|
<span className="text-xs text-green-400">🎉 Live</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
|
|
{columnFeatures.length === 0 && (
|
|
<div className="text-center text-white/30 text-xs py-4">
|
|
No items
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Approval Modal */}
|
|
{showApproval && currentFeature && (
|
|
<div
|
|
className="fixed inset-0 bg-black/70 flex items-center justify-center z-50"
|
|
onClick={() => setShowApproval(null)}
|
|
>
|
|
<div
|
|
className="bg-[#1a1625] border border-white/20 rounded-2xl p-6 max-w-md w-full mx-4"
|
|
onClick={e => e.stopPropagation()}
|
|
>
|
|
<h3 className="text-xl font-bold text-white mb-2">🚀 Approve Feature?</h3>
|
|
<p className="text-white/70 mb-4">{currentFeature.description}</p>
|
|
|
|
<div className="bg-white/5 rounded-xl p-4 mb-6">
|
|
<h4 className="text-sm font-semibold text-brand-pink mb-2">{currentFeature.title}</h4>
|
|
<p className="text-xs text-white/50">{currentFeature.description}</p>
|
|
</div>
|
|
|
|
<div className="flex gap-3">
|
|
<button
|
|
onClick={() => setShowApproval(null)}
|
|
className="flex-1 px-4 py-2 rounded-lg border border-white/20 text-white/70 hover:bg-white/10 transition"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
onClick={() => approveFeature(currentFeature.id)}
|
|
className="flex-1 px-4 py-2 rounded-lg bg-brand-pink text-white font-semibold hover:bg-[#ff7bc0] transition"
|
|
>
|
|
✅ Approve
|
|
</button>
|
|
</div>
|
|
|
|
<p className="text-xs text-white/40 mt-4 text-center">
|
|
Clicking approve will move this to Ready column for implementation
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|