@ozdao/martyrs 0.2.547 → 0.2.549

package/src/modules/governance/reactcode/src/pages/InitiativeMilestonesPage.tsx

@@ -0,0 +1,171 @@
+import { useParams, Link } from 'react-router-dom';
+import { ArrowLeft, Calendar, CheckCircle, AlertCircle, Clock } from 'lucide-react';
+import MilestoneCard from '../components/MilestoneCard';
+import EmptyState from '../components/EmptyState';
+import { mockInitiatives, mockMilestones } from '../data/mockData';
+
+export default function InitiativeMilestonesPage() {
+  const { id } = useParams();
+
+  const initiative = mockInitiatives.find((i) => i.id === id);
+  const milestones = mockMilestones.filter((m) => m.initiativeId === id);
+
+  if (!initiative) {
+    return (
+      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
+        <div className="text-center">
+          <h2 className="text-2xl font-bold text-gray-900 mb-2">Initiative not found</h2>
+          <Link to="/" className="text-blue-600 hover:text-blue-700">
+            Back to initiatives
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+    });
+  };
+
+  const statusConfig = {
+    completed: { icon: CheckCircle, color: 'text-green-600', bgColor: 'bg-green-50', label: 'Completed' },
+    in_progress: { icon: Clock, color: 'text-blue-600', bgColor: 'bg-blue-50', label: 'In Progress' },
+    not_started: { icon: AlertCircle, color: 'text-gray-400', bgColor: 'bg-gray-50', label: 'Not Started' },
+  };
+
+  const completedMilestones = milestones.filter((m) => m.status === 'completed');
+  const inProgressMilestones = milestones.filter((m) => m.status === 'in_progress');
+  const notStartedMilestones = milestones.filter((m) => m.status === 'not_started');
+
+  const overallProgress = milestones.length > 0
+    ? Math.round((completedMilestones.length / milestones.length) * 100)
+    : 0;
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <Link
+          to={`/initiatives/${id}`}
+          className="inline-flex items-center text-gray-600 hover:text-gray-900 mb-6 transition-colors"
+        >
+          <ArrowLeft className="w-5 h-5 mr-2" />
+          Back to initiative
+        </Link>
+
+        <div className="bg-white rounded-xl shadow-sm p-8 mb-8">
+          <div className="flex items-start justify-between mb-6">
+            <div className="flex-1">
+              <h1 className="text-3xl font-bold text-gray-900 mb-2">{initiative.title}</h1>
+              <p className="text-gray-600 text-lg mb-4">{initiative.description}</p>
+              <div className="flex items-center gap-6 text-sm">
+                {initiative.date && (
+                  <div className="flex items-center gap-2 text-gray-600">
+                    <Calendar className="w-4 h-4" />
+                    <span>Started {formatDate(initiative.date)}</span>
+                  </div>
+                )}
+                {initiative.targetReleaseDate && (
+                  <div className="flex items-center gap-2 text-gray-600">
+                    <Calendar className="w-4 h-4" />
+                    <span>Target {formatDate(initiative.targetReleaseDate)}</span>
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+
+          <div className="border-t border-gray-200 pt-6">
+            <div className="flex items-center justify-between mb-3">
+              <span className="text-sm font-medium text-gray-700">Overall Progress</span>
+              <span className="text-2xl font-bold text-gray-900">{overallProgress}%</span>
+            </div>
+            <div className="w-full bg-gray-200 rounded-full h-3 overflow-hidden mb-4">
+              <div
+                className="bg-blue-600 h-full transition-all duration-300"
+                style={{ width: `${overallProgress}%` }}
+              />
+            </div>
+            <div className="flex items-center gap-6 text-sm">
+              <div className="flex items-center gap-2">
+                <div className="w-3 h-3 bg-green-600 rounded-full" />
+                <span className="text-gray-600">{completedMilestones.length} Completed</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <div className="w-3 h-3 bg-blue-600 rounded-full" />
+                <span className="text-gray-600">{inProgressMilestones.length} In Progress</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <div className="w-3 h-3 bg-gray-400 rounded-full" />
+                <span className="text-gray-600">{notStartedMilestones.length} Not Started</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="mb-6">
+          <h2 className="text-2xl font-bold text-gray-900">Milestones Roadmap</h2>
+          <p className="text-gray-600 mt-1">Track progress across all milestones</p>
+        </div>
+
+        {milestones.length === 0 ? (
+          <EmptyState
+            icon={Calendar}
+            title="No milestones yet"
+            message="Create milestones to start tracking progress on this initiative."
+          />
+        ) : (
+          <div className="space-y-8">
+            {inProgressMilestones.length > 0 && (
+              <div>
+                <div className="flex items-center gap-2 mb-4">
+                  <Clock className="w-5 h-5 text-blue-600" />
+                  <h3 className="text-lg font-semibold text-gray-900">In Progress</h3>
+                  <span className="text-sm text-gray-500">({inProgressMilestones.length})</span>
+                </div>
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                  {inProgressMilestones.map((milestone) => (
+                    <MilestoneCard key={milestone.id} milestone={milestone} />
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {notStartedMilestones.length > 0 && (
+              <div>
+                <div className="flex items-center gap-2 mb-4">
+                  <AlertCircle className="w-5 h-5 text-gray-400" />
+                  <h3 className="text-lg font-semibold text-gray-900">Not Started</h3>
+                  <span className="text-sm text-gray-500">({notStartedMilestones.length})</span>
+                </div>
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                  {notStartedMilestones.map((milestone) => (
+                    <MilestoneCard key={milestone.id} milestone={milestone} />
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {completedMilestones.length > 0 && (
+              <div>
+                <div className="flex items-center gap-2 mb-4">
+                  <CheckCircle className="w-5 h-5 text-green-600" />
+                  <h3 className="text-lg font-semibold text-gray-900">Completed</h3>
+                  <span className="text-sm text-gray-500">({completedMilestones.length})</span>
+                </div>
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                  {completedMilestones.map((milestone) => (
+                    <MilestoneCard key={milestone.id} milestone={milestone} />
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/modules/governance/reactcode/src/pages/InitiativesListPage.tsx

@@ -0,0 +1,182 @@
+import { useState, useMemo } from 'react';
+import { Plus, Target, Search, Filter } from 'lucide-react';
+import InitiativeCard from '../components/InitiativeCard';
+import CreateInitiativeForm from '../components/CreateInitiativeForm';
+import EmptyState from '../components/EmptyState';
+import { mockInitiatives } from '../data/mockData';
+
+export default function InitiativesListPage() {
+  const [showCreateForm, setShowCreateForm] = useState(false);
+  const [initiatives] = useState(mockInitiatives);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [statusFilter, setStatusFilter] = useState<string>('all');
+  const [riskFilter, setRiskFilter] = useState<string>('all');
+  const [showFilters, setShowFilters] = useState(false);
+
+  const handleCreateInitiative = (data: any) => {
+    console.log('Creating product:', data);
+    setShowCreateForm(false);
+  };
+
+  const filteredInitiatives = useMemo(() => {
+    return initiatives.filter((initiative) => {
+      const matchesSearch =
+        searchQuery === '' ||
+        initiative.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        initiative.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        initiative.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        (initiative.slug && initiative.slug.toLowerCase().includes(searchQuery.toLowerCase())) ||
+        (initiative.team?.owners && initiative.team.owners.some((owner: any) =>
+          owner.name.toLowerCase().includes(searchQuery.toLowerCase())
+        ));
+
+      const matchesStatus =
+        statusFilter === 'all' || initiative.status === statusFilter;
+
+      const matchesRisk =
+        riskFilter === 'all' ||
+        (initiative.metrics && initiative.metrics.riskIndex === riskFilter);
+
+      return matchesSearch && matchesStatus && matchesRisk;
+    });
+  }, [initiatives, searchQuery, statusFilter, riskFilter]);
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <div className="flex items-center justify-between mb-8">
+          <div>
+            <h1 className="text-3xl font-bold text-gray-900">Products</h1>
+            <p className="text-gray-600 mt-1">Manage and track all your products</p>
+          </div>
+          <button
+            onClick={() => setShowCreateForm(true)}
+            className="bg-blue-600 hover:bg-blue-700 text-white font-semibold px-6 py-3 rounded-lg flex items-center gap-2 transition-colors shadow-sm"
+          >
+            <Plus className="w-5 h-5" />
+            Create Product
+          </button>
+        </div>
+
+        <div className="bg-white rounded-lg shadow-sm p-4 mb-6">
+          <div className="flex flex-col md:flex-row gap-4">
+            <div className="flex-1 relative">
+              <Search className="w-5 h-5 text-gray-400 absolute left-3 top-1/2 transform -translate-y-1/2" />
+              <input
+                type="text"
+                placeholder="Search products by name, description, team members..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              />
+            </div>
+
+            <button
+              onClick={() => setShowFilters(!showFilters)}
+              className="flex items-center gap-2 px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
+            >
+              <Filter className="w-5 h-5" />
+              Filters
+              {(statusFilter !== 'all' || riskFilter !== 'all') && (
+                <span className="px-2 py-0.5 bg-blue-100 text-blue-700 rounded-full text-xs font-medium">
+                  Active
+                </span>
+              )}
+            </button>
+          </div>
+
+          {showFilters && (
+            <div className="mt-4 pt-4 border-t border-gray-200">
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">Status</label>
+                  <select
+                    value={statusFilter}
+                    onChange={(e) => setStatusFilter(e.target.value)}
+                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                  >
+                    <option value="all">All Statuses</option>
+                    <option value="active">Active</option>
+                    <option value="draft">Draft</option>
+                    <option value="completed">Completed</option>
+                    <option value="archived">Archived</option>
+                    <option value="paused">Paused</option>
+                  </select>
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">Risk Level</label>
+                  <select
+                    value={riskFilter}
+                    onChange={(e) => setRiskFilter(e.target.value)}
+                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                  >
+                    <option value="all">All Risks</option>
+                    <option value="low">Low</option>
+                    <option value="medium">Medium</option>
+                    <option value="high">High</option>
+                  </select>
+                </div>
+
+                <div className="flex items-end">
+                  <button
+                    onClick={() => {
+                      setStatusFilter('all');
+                      setRiskFilter('all');
+                      setSearchQuery('');
+                    }}
+                    className="w-full px-4 py-2 text-gray-700 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
+                  >
+                    Clear All Filters
+                  </button>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+
+        {filteredInitiatives.length === 0 && initiatives.length > 0 ? (
+          <div className="bg-white rounded-lg shadow-sm p-12 text-center">
+            <p className="text-gray-500 text-lg mb-2">No products match your filters</p>
+            <button
+              onClick={() => {
+                setStatusFilter('all');
+                setRiskFilter('all');
+                setSearchQuery('');
+              }}
+              className="text-blue-600 hover:text-blue-700 font-medium"
+            >
+              Clear filters
+            </button>
+          </div>
+        ) : filteredInitiatives.length === 0 ? (
+          <EmptyState
+            icon={Target}
+            title="No products yet"
+            message="Get started by creating your first product to organize your work."
+            actionText="Create Product"
+            onAction={() => setShowCreateForm(true)}
+          />
+        ) : (
+          <>
+            <div className="mb-4 text-sm text-gray-600">
+              Showing {filteredInitiatives.length} of {initiatives.length} products
+            </div>
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+              {filteredInitiatives.map((initiative) => (
+                <InitiativeCard key={initiative.id} initiative={initiative} />
+              ))}
+            </div>
+          </>
+        )}
+
+        {showCreateForm && (
+          <CreateInitiativeForm
+            onSubmit={handleCreateInitiative}
+            onClose={() => setShowCreateForm(false)}
+          />
+        )}
+      </div>
+    </div>
+  );
+}

package/src/modules/governance/reactcode/src/pages/MilestoneDetailPage.tsx

@@ -0,0 +1,178 @@
+import { useState } from 'react';
+import { useParams, Link } from 'react-router-dom';
+import { ArrowLeft, Plus, Calendar } from 'lucide-react';
+import TaskCard from '../components/TaskCard';
+import ProposeTaskForm from '../components/ProposeTaskForm';
+import TaskStatusBadge from '../components/TaskStatusBadge';
+import EmptyState from '../components/EmptyState';
+import { mockMilestones, mockTasks } from '../data/mockData';
+
+const columns = [
+  { id: 'proposed', title: 'Proposed', status: 'proposed' },
+  { id: 'voting', title: 'Voting', status: 'voting' },
+  { id: 'not_started', title: 'Not Started', status: 'not_started' },
+  { id: 'in_progress', title: 'In Progress', status: 'in_progress' },
+  { id: 'review', title: 'Review', status: 'review' },
+  { id: 'completed', title: 'Completed', status: 'completed' },
+];
+
+export default function MilestoneDetailPage() {
+  const { id } = useParams();
+  const [showTaskForm, setShowTaskForm] = useState(false);
+
+  const milestone = mockMilestones.find((m) => m.id === id);
+  const tasks = mockTasks.filter((t) => t.milestoneId === id);
+
+  if (!milestone) {
+    return (
+      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
+        <div className="text-center">
+          <h2 className="text-2xl font-bold text-gray-900 mb-2">Milestone not found</h2>
+          <Link to="/" className="text-blue-600 hover:text-blue-700">
+            Back to initiatives
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  const handleProposeTask = (data: any) => {
+    console.log('Proposing task:', data);
+    setShowTaskForm(false);
+  };
+
+  const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+    });
+  };
+
+  const getTasksForColumn = (status: string) => {
+    return tasks.filter((task) => task.status === status);
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <div className="max-w-[1800px] mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <Link
+          to={`/initiatives/${milestone.initiativeId}`}
+          className="inline-flex items-center text-gray-600 hover:text-gray-900 mb-6 transition-colors"
+        >
+          <ArrowLeft className="w-5 h-5 mr-2" />
+          Back to initiative
+        </Link>
+
+        <div className="bg-white rounded-xl shadow-sm p-8 mb-8">
+          <div className="flex items-start justify-between mb-6">
+            <div className="flex-1">
+              <div className="flex items-center gap-3 mb-3">
+                <TaskStatusBadge status={milestone.status} />
+                <div className="flex items-center text-sm text-gray-500">
+                  <Calendar className="w-4 h-4 mr-1" />
+                  {formatDate(milestone.startDate)} - {formatDate(milestone.dueDate)}
+                </div>
+              </div>
+              <h1 className="text-3xl font-bold text-gray-900 mb-3">{milestone.name}</h1>
+              <p className="text-gray-700 text-lg">{milestone.description}</p>
+            </div>
+            <button
+              onClick={() => setShowTaskForm(true)}
+              className="bg-blue-600 hover:bg-blue-700 text-white font-semibold px-4 py-2 rounded-lg flex items-center gap-2 transition-colors ml-4"
+            >
+              <Plus className="w-5 h-5" />
+              Propose Task
+            </button>
+          </div>
+
+          <div className="border-t border-gray-200 pt-6">
+            <div className="flex items-center justify-between mb-3">
+              <span className="text-sm font-medium text-gray-700">Progress</span>
+              <span className="text-2xl font-bold text-gray-900">{milestone.progress}%</span>
+            </div>
+            <div className="w-full bg-gray-200 rounded-full h-3 overflow-hidden">
+              <div
+                className="bg-blue-600 h-full transition-all duration-300"
+                style={{ width: `${milestone.progress}%` }}
+              />
+            </div>
+            <div className="mt-4 flex items-center gap-6 text-sm text-gray-600">
+              <div className="flex items-center gap-2">
+                <img
+                  src={milestone.owner.avatar}
+                  alt={milestone.owner.name}
+                  className="w-8 h-8 rounded-full"
+                />
+                <div>
+                  <div className="text-xs text-gray-500">Owner</div>
+                  <div className="font-medium text-gray-900">{milestone.owner.name}</div>
+                </div>
+              </div>
+              {milestone.contributors.length > 0 && (
+                <div>
+                  <div className="text-xs text-gray-500 mb-1">Contributors</div>
+                  <div className="flex -space-x-2">
+                    {milestone.contributors.map((contributor) => (
+                      <img
+                        key={contributor.id}
+                        src={contributor.avatar}
+                        alt={contributor.name}
+                        className="w-8 h-8 rounded-full border-2 border-white"
+                        title={contributor.name}
+                      />
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+
+        <div className="mb-6">
+          <h2 className="text-2xl font-bold text-gray-900">Tasks</h2>
+        </div>
+
+        {tasks.length === 0 ? (
+          <EmptyState
+            icon={Calendar}
+            title="No tasks yet"
+            message="Propose tasks to start working on this milestone."
+            actionText="Propose Task"
+            onAction={() => setShowTaskForm(true)}
+          />
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-4">
+            {columns.map((column) => {
+              const columnTasks = getTasksForColumn(column.status);
+              return (
+                <div key={column.id} className="bg-gray-100 rounded-lg p-4">
+                  <div className="flex items-center justify-between mb-4">
+                    <h3 className="font-semibold text-gray-900">{column.title}</h3>
+                    <span className="bg-gray-200 text-gray-700 text-xs font-semibold px-2 py-1 rounded-full">
+                      {columnTasks.length}
+                    </span>
+                  </div>
+                  <div className="space-y-3">
+                    {columnTasks.map((task) => (
+                      <TaskCard key={task.id} task={task} draggable />
+                    ))}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )}
+
+        {showTaskForm && (
+          <ProposeTaskForm
+            initiativeId={milestone.initiativeId}
+            milestoneId={id}
+            onSubmit={handleProposeTask}
+            onClose={() => setShowTaskForm(false)}
+          />
+        )}
+      </div>
+    </div>
+  );
+}