@ozdao/martyrs 0.2.547 → 0.2.548

package/src/modules/governance/reactcode/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "vite-react-typescript-starter",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "typecheck": "tsc --noEmit -p tsconfig.app.json"
+  },
+  "dependencies": {
+    "@supabase/supabase-js": "^2.57.4",
+    "lucide-react": "^0.344.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^7.9.3"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.9.1",
+    "@types/react": "^18.3.5",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "autoprefixer": "^10.4.18",
+    "eslint": "^9.9.1",
+    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
+    "eslint-plugin-react-refresh": "^0.4.11",
+    "globals": "^15.9.0",
+    "postcss": "^8.4.35",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.5.3",
+    "typescript-eslint": "^8.3.0",
+    "vite": "^5.4.2"
+  }
+}

package/src/modules/governance/reactcode/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

package/src/modules/governance/reactcode/src/App.tsx

@@ -0,0 +1,29 @@
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
+import InitiativesListPage from './pages/InitiativesListPage';
+import InitiativeDetailPage from './pages/InitiativeDetailPage';
+import InitiativeMilestonesPage from './pages/InitiativeMilestonesPage';
+import RoadmapPage from './pages/RoadmapPage';
+import MilestoneDetailPage from './pages/MilestoneDetailPage';
+import TaskDetailPage from './pages/TaskDetailPage';
+import VotingsListPage from './pages/VotingsListPage';
+import VotingDetailPage from './pages/VotingDetailPage';
+
+function App() {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<InitiativesListPage />} />
+        <Route path="/initiatives/:id" element={<InitiativeDetailPage />} />
+        <Route path="/initiatives/:id/milestones" element={<InitiativeMilestonesPage />} />
+        <Route path="/initiatives/:id/roadmap" element={<RoadmapPage />} />
+        <Route path="/milestones/:id" element={<MilestoneDetailPage />} />
+        <Route path="/tasks/:id" element={<TaskDetailPage />} />
+        <Route path="/votings" element={<VotingsListPage />} />
+        <Route path="/votings/:id" element={<VotingDetailPage />} />
+        <Route path="*" element={<Navigate to="/" replace />} />
+      </Routes>
+    </BrowserRouter>
+  );
+}
+
+export default App;

package/src/modules/governance/reactcode/src/components/CreateInitiativeForm.tsx

@@ -0,0 +1,258 @@
+import { useState } from 'react';
+import { X } from 'lucide-react';
+
+interface CreateInitiativeFormProps {
+  onSubmit: (data: any) => void;
+  onClose: () => void;
+}
+
+export default function CreateInitiativeForm({ onSubmit, onClose }: CreateInitiativeFormProps) {
+  const [formData, setFormData] = useState({
+    name: '',
+    title: '',
+    description: '',
+    status: 'draft',
+    client: '',
+    url: '',
+    cover: '',
+    published: false,
+    structure: '',
+    team: '',
+    services: '',
+    date: '',
+  });
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    onSubmit(formData);
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
+    const { name, value, type } = e.target;
+    setFormData((prev) => ({
+      ...prev,
+      [name]: type === 'checkbox' ? (e.target as HTMLInputElement).checked : value,
+    }));
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
+      <div className="bg-white rounded-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
+        <div className="sticky top-0 bg-white border-b border-gray-200 px-6 py-4 flex items-center justify-between">
+          <h2 className="text-xl font-semibold text-gray-900">Create New Initiative</h2>
+          <button
+            onClick={onClose}
+            className="text-gray-400 hover:text-gray-600 transition-colors"
+          >
+            <X className="w-6 h-6" />
+          </button>
+        </div>
+
+        <form onSubmit={handleSubmit} className="p-6 space-y-4">
+          <div>
+            <label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-1">
+              Name <span className="text-red-500">*</span>
+            </label>
+            <input
+              type="text"
+              id="name"
+              name="name"
+              required
+              value={formData.name}
+              onChange={handleChange}
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              placeholder="initiative-name"
+            />
+          </div>
+
+          <div>
+            <label htmlFor="title" className="block text-sm font-medium text-gray-700 mb-1">
+              Title
+            </label>
+            <input
+              type="text"
+              id="title"
+              name="title"
+              value={formData.title}
+              onChange={handleChange}
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              placeholder="Initiative Title"
+            />
+          </div>
+
+          <div>
+            <label htmlFor="description" className="block text-sm font-medium text-gray-700 mb-1">
+              Description <span className="text-red-500">*</span>
+            </label>
+            <textarea
+              id="description"
+              name="description"
+              required
+              value={formData.description}
+              onChange={handleChange}
+              rows={4}
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              placeholder="Describe the initiative..."
+            />
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label htmlFor="status" className="block text-sm font-medium text-gray-700 mb-1">
+                Status
+              </label>
+              <select
+                id="status"
+                name="status"
+                value={formData.status}
+                onChange={handleChange}
+                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="draft">Draft</option>
+                <option value="active">Active</option>
+                <option value="completed">Completed</option>
+                <option value="archived">Archived</option>
+              </select>
+            </div>
+
+            <div>
+              <label htmlFor="client" className="block text-sm font-medium text-gray-700 mb-1">
+                Client
+              </label>
+              <input
+                type="text"
+                id="client"
+                name="client"
+                value={formData.client}
+                onChange={handleChange}
+                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                placeholder="Client name"
+              />
+            </div>
+          </div>
+
+          <div>
+            <label htmlFor="url" className="block text-sm font-medium text-gray-700 mb-1">
+              URL
+            </label>
+            <input
+              type="url"
+              id="url"
+              name="url"
+              value={formData.url}
+              onChange={handleChange}
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              placeholder="https://example.com"
+            />
+          </div>
+
+          <div>
+            <label htmlFor="cover" className="block text-sm font-medium text-gray-700 mb-1">
+              Cover Image URL
+            </label>
+            <input
+              type="url"
+              id="cover"
+              name="cover"
+              value={formData.cover}
+              onChange={handleChange}
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              placeholder="https://images.pexels.com/..."
+            />
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label htmlFor="structure" className="block text-sm font-medium text-gray-700 mb-1">
+                Structure
+              </label>
+              <input
+                type="text"
+                id="structure"
+                name="structure"
+                value={formData.structure}
+                onChange={handleChange}
+                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                placeholder="Agile, Scrum, etc."
+              />
+            </div>
+
+            <div>
+              <label htmlFor="team" className="block text-sm font-medium text-gray-700 mb-1">
+                Team
+              </label>
+              <input
+                type="text"
+                id="team"
+                name="team"
+                value={formData.team}
+                onChange={handleChange}
+                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                placeholder="Team name"
+              />
+            </div>
+          </div>
+
+          <div>
+            <label htmlFor="services" className="block text-sm font-medium text-gray-700 mb-1">
+              Services
+            </label>
+            <input
+              type="text"
+              id="services"
+              name="services"
+              value={formData.services}
+              onChange={handleChange}
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              placeholder="Design, Development, etc."
+            />
+          </div>
+
+          <div>
+            <label htmlFor="date" className="block text-sm font-medium text-gray-700 mb-1">
+              Date
+            </label>
+            <input
+              type="date"
+              id="date"
+              name="date"
+              value={formData.date}
+              onChange={handleChange}
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            />
+          </div>
+
+          <div className="flex items-center">
+            <input
+              type="checkbox"
+              id="published"
+              name="published"
+              checked={formData.published}
+              onChange={handleChange}
+              className="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
+            />
+            <label htmlFor="published" className="ml-2 text-sm text-gray-700">
+              Published
+            </label>
+          </div>
+
+          <div className="flex gap-3 pt-4">
+            <button
+              type="submit"
+              className="flex-1 bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 rounded-lg transition-colors"
+            >
+              Create Initiative
+            </button>
+            <button
+              type="button"
+              onClick={onClose}
+              className="flex-1 bg-gray-200 hover:bg-gray-300 text-gray-800 font-semibold py-2 rounded-lg transition-colors"
+            >
+              Cancel
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

package/src/modules/governance/reactcode/src/components/CreateMilestoneForm.tsx

@@ -0,0 +1,257 @@
+import { useState } from 'react';
+import { X } from 'lucide-react';
+import { mockUsers } from '../data/mockData';
+
+interface CreateMilestoneFormProps {
+  initiativeId: string;
+  onSubmit: (data: any) => void;
+  onClose: () => void;
+}
+
+export default function CreateMilestoneForm({ initiativeId, onSubmit, onClose }: CreateMilestoneFormProps) {
+  const [formData, setFormData] = useState({
+    name: '',
+    description: '',
+    status: 'not_started',
+    startDate: '',
+    dueDate: '',
+    progress: 0,
+    owner: '',
+    contributors: [] as string[],
+    priority: 'medium',
+    tags: '',
+  });
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    const tagsArray = formData.tags.split(',').map(tag => tag.trim()).filter(tag => tag);
+    onSubmit({
+      ...formData,
+      initiativeId,
+      tags: tagsArray,
+    });
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+  };
+
+  const handleContributorsChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const selectedOptions = Array.from(e.target.selectedOptions).map(option => option.value);
+    setFormData((prev) => ({
+      ...prev,
+      contributors: selectedOptions,
+    }));
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
+      <div className="bg-white rounded-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
+        <div className="sticky top-0 bg-white border-b border-gray-200 px-6 py-4 flex items-center justify-between">
+          <h2 className="text-xl font-semibold text-gray-900">Create New Milestone</h2>
+          <button
+            onClick={onClose}
+            className="text-gray-400 hover:text-gray-600 transition-colors"
+          >
+            <X className="w-6 h-6" />
+          </button>
+        </div>
+
+        <form onSubmit={handleSubmit} className="p-6 space-y-4">
+          <div>
+            <label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-1">
+              Name <span className="text-red-500">*</span>
+            </label>
+            <input
+              type="text"
+              id="name"
+              name="name"
+              required
+              value={formData.name}
+              onChange={handleChange}
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              placeholder="Milestone name"
+            />
+          </div>
+
+          <div>
+            <label htmlFor="description" className="block text-sm font-medium text-gray-700 mb-1">
+              Description
+            </label>
+            <textarea
+              id="description"
+              name="description"
+              value={formData.description}
+              onChange={handleChange}
+              rows={3}
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              placeholder="Describe the milestone..."
+            />
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label htmlFor="status" className="block text-sm font-medium text-gray-700 mb-1">
+                Status
+              </label>
+              <select
+                id="status"
+                name="status"
+                value={formData.status}
+                onChange={handleChange}
+                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="not_started">Not Started</option>
+                <option value="in_progress">In Progress</option>
+                <option value="completed">Completed</option>
+              </select>
+            </div>
+
+            <div>
+              <label htmlFor="priority" className="block text-sm font-medium text-gray-700 mb-1">
+                Priority
+              </label>
+              <select
+                id="priority"
+                name="priority"
+                value={formData.priority}
+                onChange={handleChange}
+                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="low">Low</option>
+                <option value="medium">Medium</option>
+                <option value="high">High</option>
+              </select>
+            </div>
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label htmlFor="startDate" className="block text-sm font-medium text-gray-700 mb-1">
+                Start Date <span className="text-red-500">*</span>
+              </label>
+              <input
+                type="date"
+                id="startDate"
+                name="startDate"
+                required
+                value={formData.startDate}
+                onChange={handleChange}
+                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              />
+            </div>
+
+            <div>
+              <label htmlFor="dueDate" className="block text-sm font-medium text-gray-700 mb-1">
+                Due Date <span className="text-red-500">*</span>
+              </label>
+              <input
+                type="date"
+                id="dueDate"
+                name="dueDate"
+                required
+                value={formData.dueDate}
+                onChange={handleChange}
+                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              />
+            </div>
+          </div>
+
+          <div>
+            <label htmlFor="progress" className="block text-sm font-medium text-gray-700 mb-1">
+              Progress: {formData.progress}%
+            </label>
+            <input
+              type="range"
+              id="progress"
+              name="progress"
+              min="0"
+              max="100"
+              value={formData.progress}
+              onChange={handleChange}
+              className="w-full"
+            />
+          </div>
+
+          <div>
+            <label htmlFor="owner" className="block text-sm font-medium text-gray-700 mb-1">
+              Owner <span className="text-red-500">*</span>
+            </label>
+            <select
+              id="owner"
+              name="owner"
+              required
+              value={formData.owner}
+              onChange={handleChange}
+              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="">Select owner</option>
+              {mockUsers.map((user) => (
+                <option key={user.id} value={user.id}>
+                  {user.name}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          <div>
+            <label htmlFor="contributors" className="block text-sm font-medium text-gray-700 mb-1">
+              Contributors
+            </label>
+            <select
+              id="contributors"
+              name="contributors"
+              multiple
+              value={formData.contributors}
+              onChange={handleContributorsChange}
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              size={5}
+            >
+              {mockUsers.map((user) => (
+                <option key={user.id} value={user.id}>
+                  {user.name}
+                </option>
+              ))}
+            </select>
+            <p className="text-xs text-gray-500 mt-1">Hold Ctrl/Cmd to select multiple</p>
+          </div>
+
+          <div>
+            <label htmlFor="tags" className="block text-sm font-medium text-gray-700 mb-1">
+              Tags
+            </label>
+            <input
+              type="text"
+              id="tags"
+              name="tags"
+              value={formData.tags}
+              onChange={handleChange}
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              placeholder="design, frontend, backend (comma separated)"
+            />
+          </div>
+
+          <div className="flex gap-3 pt-4">
+            <button
+              type="submit"
+              className="flex-1 bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 rounded-lg transition-colors"
+            >
+              Create Milestone
+            </button>
+            <button
+              type="button"
+              onClick={onClose}
+              className="flex-1 bg-gray-200 hover:bg-gray-300 text-gray-800 font-semibold py-2 rounded-lg transition-colors"
+            >
+              Cancel
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

package/src/modules/governance/reactcode/src/components/EmptyState.tsx

@@ -0,0 +1,29 @@
+import { Video as LucideIcon } from 'lucide-react';
+
+interface EmptyStateProps {
+  icon: LucideIcon;
+  title: string;
+  message: string;
+  actionText?: string;
+  onAction?: () => void;
+}
+
+export default function EmptyState({ icon: Icon, title, message, actionText, onAction }: EmptyStateProps) {
+  return (
+    <div className="flex flex-col items-center justify-center py-16 px-4">
+      <div className="bg-gray-100 rounded-full p-6 mb-4">
+        <Icon className="w-12 h-12 text-gray-400" />
+      </div>
+      <h3 className="text-xl font-semibold text-gray-900 mb-2">{title}</h3>
+      <p className="text-gray-600 text-center max-w-md mb-6">{message}</p>
+      {actionText && onAction && (
+        <button
+          onClick={onAction}
+          className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg font-medium transition-colors"
+        >
+          {actionText}
+        </button>
+      )}
+    </div>
+  );
+}

package/src/modules/governance/reactcode/src/components/InitiativeCard.tsx

@@ -0,0 +1,59 @@
+import { Calendar, Layers } from 'lucide-react';
+import { Link } from 'react-router-dom';
+import TaskStatusBadge from './TaskStatusBadge';
+
+interface Initiative {
+  id: string;
+  name: string;
+  title: string;
+  description: string;
+  status: string;
+  cover: string;
+  createdAt: string;
+  milestoneCount: number;
+}
+
+interface InitiativeCardProps {
+  initiative: Initiative;
+}
+
+export default function InitiativeCard({ initiative }: InitiativeCardProps) {
+  const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+    });
+  };
+
+  return (
+    <Link to={`/initiatives/${initiative.id}`} className="block group">
+      <div className="bg-white rounded-xl shadow-sm hover:shadow-lg transition-all duration-300 overflow-hidden border border-gray-100">
+        <div className="h-48 overflow-hidden">
+          <img
+            src={initiative.cover}
+            alt={initiative.title}
+            className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+          />
+        </div>
+        <div className="p-5">
+          <div className="flex items-center justify-between mb-3">
+            <TaskStatusBadge status={initiative.status} />
+            <div className="flex items-center text-gray-500 text-sm">
+              <Layers className="w-4 h-4 mr-1" />
+              <span>{initiative.milestoneCount}</span>
+            </div>
+          </div>
+          <h3 className="text-lg font-semibold text-gray-900 mb-2 group-hover:text-blue-600 transition-colors">
+            {initiative.title}
+          </h3>
+          <p className="text-gray-600 text-sm mb-4 line-clamp-2">{initiative.description}</p>
+          <div className="flex items-center text-gray-500 text-xs">
+            <Calendar className="w-4 h-4 mr-1" />
+            <span>{formatDate(initiative.createdAt)}</span>
+          </div>
+        </div>
+      </div>
+    </Link>
+  );
+}