@ozdao/martyrs 0.2.547 → 0.2.549

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

@@ -0,0 +1,58 @@
+import { Link } from 'react-router-dom';
+import { Target, CheckSquare, Layers, ExternalLink } from 'lucide-react';
+import TaskStatusBadge from './TaskStatusBadge';
+
+interface LinkedEntityCardProps {
+  entityType: 'initiative' | 'milestone' | 'task';
+  entityData: {
+    id: string;
+    name?: string;
+    title?: string;
+    status: string;
+  };
+}
+
+const entityConfig = {
+  initiative: {
+    icon: Target,
+    label: 'Initiative',
+    path: (id: string) => `/initiatives/${id}`,
+  },
+  milestone: {
+    icon: Layers,
+    label: 'Milestone',
+    path: (id: string) => `/milestones/${id}`,
+  },
+  task: {
+    icon: CheckSquare,
+    label: 'Task',
+    path: (id: string) => `/tasks/${id}`,
+  },
+};
+
+export default function LinkedEntityCard({ entityType, entityData }: LinkedEntityCardProps) {
+  const config = entityConfig[entityType];
+  const Icon = config.icon;
+  const displayName = entityData.title || entityData.name || 'Untitled';
+
+  return (
+    <Link
+      to={config.path(entityData.id)}
+      className="block bg-gray-50 rounded-lg p-4 border border-gray-200 hover:border-blue-300 hover:bg-blue-50 transition-all group"
+    >
+      <div className="flex items-start justify-between">
+        <div className="flex items-start gap-3 flex-1">
+          <div className="bg-white rounded-lg p-2 group-hover:bg-blue-100 transition-colors">
+            <Icon className="w-5 h-5 text-gray-600 group-hover:text-blue-600" />
+          </div>
+          <div className="flex-1 min-w-0">
+            <div className="text-xs text-gray-500 mb-1">{config.label}</div>
+            <h4 className="text-sm font-semibold text-gray-900 mb-2 truncate">{displayName}</h4>
+            <TaskStatusBadge status={entityData.status} />
+          </div>
+        </div>
+        <ExternalLink className="w-4 h-4 text-gray-400 group-hover:text-blue-600 flex-shrink-0 ml-2" />
+      </div>
+    </Link>
+  );
+}

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

@@ -0,0 +1,82 @@
+import { Calendar, CheckSquare } from 'lucide-react';
+import { Link } from 'react-router-dom';
+import TaskStatusBadge from './TaskStatusBadge';
+
+interface User {
+  id: string;
+  name: string;
+  avatar: string;
+}
+
+interface Milestone {
+  id: string;
+  initiativeId: string;
+  name: string;
+  status: string;
+  startDate: string;
+  dueDate: string;
+  progress: number;
+  owner: User;
+  taskCount: number;
+}
+
+interface MilestoneCardProps {
+  milestone: Milestone;
+}
+
+export default function MilestoneCard({ milestone }: MilestoneCardProps) {
+  const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+    });
+  };
+
+  return (
+    <Link to={`/milestones/${milestone.id}`} className="block group">
+      <div className="bg-white rounded-lg shadow-sm hover:shadow-md transition-all duration-200 p-5 border border-gray-100">
+        <div className="flex items-start justify-between mb-3">
+          <h3 className="text-base font-semibold text-gray-900 group-hover:text-blue-600 transition-colors">
+            {milestone.name}
+          </h3>
+          <TaskStatusBadge status={milestone.status} />
+        </div>
+
+        <div className="mb-4">
+          <div className="flex items-center justify-between mb-2 text-sm">
+            <span className="text-gray-600">Progress</span>
+            <span className="font-semibold text-gray-900">{milestone.progress}%</span>
+          </div>
+          <div className="w-full bg-gray-200 rounded-full h-2 overflow-hidden">
+            <div
+              className="bg-blue-600 h-full transition-all duration-300"
+              style={{ width: `${milestone.progress}%` }}
+            />
+          </div>
+        </div>
+
+        <div className="flex items-center justify-between text-sm">
+          <div className="flex items-center text-gray-500">
+            <Calendar className="w-4 h-4 mr-1" />
+            <span>
+              {formatDate(milestone.startDate)} - {formatDate(milestone.dueDate)}
+            </span>
+          </div>
+          <div className="flex items-center text-gray-500">
+            <CheckSquare className="w-4 h-4 mr-1" />
+            <span>{milestone.taskCount}</span>
+          </div>
+        </div>
+
+        <div className="mt-4 flex items-center">
+          <img
+            src={milestone.owner.avatar}
+            alt={milestone.owner.name}
+            className="w-8 h-8 rounded-full border-2 border-white"
+          />
+          <span className="ml-2 text-sm text-gray-600">{milestone.owner.name}</span>
+        </div>
+      </div>
+    </Link>
+  );
+}

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

@@ -0,0 +1,70 @@
+import { GitBranch, CheckCircle, XCircle, ExternalLink } from 'lucide-react';
+
+interface ProductRepositoriesProps {
+  repositories: any[];
+}
+
+export default function ProductRepositories({ repositories }: ProductRepositoriesProps) {
+  if (!repositories || repositories.length === 0) {
+    return (
+      <div className="bg-white rounded-xl shadow-sm p-6">
+        <div className="flex items-center gap-2 mb-4">
+          <GitBranch className="w-5 h-5 text-gray-600" />
+          <h3 className="text-lg font-semibold text-gray-900">Repositories</h3>
+        </div>
+        <p className="text-gray-500">No repositories configured yet.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="bg-white rounded-xl shadow-sm p-6">
+      <div className="flex items-center gap-2 mb-6">
+        <GitBranch className="w-5 h-5 text-gray-600" />
+        <h3 className="text-lg font-semibold text-gray-900">Repositories</h3>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        {repositories.map((repo, index) => (
+          <div key={index} className="border border-gray-200 rounded-lg p-4 hover:border-blue-300 transition-colors">
+            <div className="flex items-start justify-between mb-3">
+              <div className="flex-1">
+                <h4 className="font-semibold text-gray-900 mb-1">{repo.name}</h4>
+                <p className="text-sm text-gray-500 font-mono">{repo.path}</p>
+              </div>
+              <a
+                href={`https://${repo.provider.toLowerCase()}.com/${repo.path}`}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-blue-600 hover:text-blue-700"
+              >
+                <ExternalLink className="w-4 h-4" />
+              </a>
+            </div>
+
+            <div className="flex items-center gap-2 mb-2">
+              {repo.buildStatus === 'passing' ? (
+                <CheckCircle className="w-4 h-4 text-green-600" />
+              ) : (
+                <XCircle className="w-4 h-4 text-red-600" />
+              )}
+              <span className={`text-sm font-medium ${repo.buildStatus === 'passing' ? 'text-green-600' : 'text-red-600'}`}>
+                {repo.buildStatus === 'passing' ? 'Build Passing' : 'Build Failing'}
+              </span>
+            </div>
+
+            <div className="flex items-center justify-between text-sm">
+              <div>
+                <span className="text-gray-500">Owner:</span>
+                <span className="ml-1 font-medium text-gray-900">{repo.owner.name}</span>
+              </div>
+              <span className="px-2 py-1 bg-blue-100 text-blue-700 rounded text-xs font-medium">
+                {repo.lastRelease}
+              </span>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,183 @@
+import { Calendar, TrendingUp, AlertTriangle, Activity, Users, ExternalLink } from 'lucide-react';
+import TaskStatusBadge from './TaskStatusBadge';
+
+interface ProductSummaryProps {
+  initiative: any;
+  onAction: (action: string) => void;
+}
+
+export default function ProductSummary({ initiative, onAction }: ProductSummaryProps) {
+  const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+    });
+  };
+
+  const getRiskColor = (level: string) => {
+    switch (level) {
+      case 'low': return 'text-green-600 bg-green-100';
+      case 'medium': return 'text-yellow-600 bg-yellow-100';
+      case 'high': return 'text-red-600 bg-red-100';
+      default: return 'text-gray-600 bg-gray-100';
+    }
+  };
+
+  return (
+    <div className="bg-white rounded-xl shadow-sm overflow-hidden">
+      <div className="h-64 overflow-hidden">
+        <img
+          src={initiative.cover}
+          alt={initiative.title}
+          className="w-full h-full object-cover"
+        />
+      </div>
+
+      <div className="p-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={initiative.status} />
+              <span className="text-sm text-gray-500 font-mono">{initiative.slug || initiative.name}</span>
+            </div>
+            <h1 className="text-3xl font-bold text-gray-900 mb-3">{initiative.title}</h1>
+            <p className="text-gray-700 text-lg leading-relaxed">{initiative.description}</p>
+          </div>
+          {initiative.url && (
+            <a
+              href={initiative.url}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-blue-600 hover:text-blue-700 ml-4"
+            >
+              <ExternalLink className="w-6 h-6" />
+            </a>
+          )}
+        </div>
+
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-6 pt-6 border-t border-gray-200 mb-6">
+          <div>
+            <div className="text-sm text-gray-500 mb-1 flex items-center gap-1">
+              <Calendar className="w-4 h-4" />
+              Start Date
+            </div>
+            <div className="font-semibold text-gray-900">{formatDate(initiative.date)}</div>
+          </div>
+          <div>
+            <div className="text-sm text-gray-500 mb-1 flex items-center gap-1">
+              <Calendar className="w-4 h-4" />
+              Target Release
+            </div>
+            <div className="font-semibold text-gray-900">
+              {initiative.targetReleaseDate ? formatDate(initiative.targetReleaseDate) : 'TBD'}
+            </div>
+          </div>
+          <div>
+            <div className="text-sm text-gray-500 mb-1">Structure</div>
+            <div className="font-semibold text-gray-900">{initiative.structure}</div>
+          </div>
+          <div>
+            <div className="text-sm text-gray-500 mb-1 flex items-center gap-1">
+              <Users className="w-4 h-4" />
+              Team Size
+            </div>
+            <div className="font-semibold text-gray-900">
+              {(initiative.team?.owners?.length || 0) +
+               (initiative.team?.coreTeam?.length || 0) +
+               (initiative.team?.contributors?.length || 0)}
+            </div>
+          </div>
+        </div>
+
+        {initiative.metrics && (
+          <div className="border-t border-gray-200 pt-6">
+            <h3 className="text-sm font-semibold text-gray-500 uppercase mb-4">Key Metrics</h3>
+            <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
+              <div className="bg-gray-50 rounded-lg p-4">
+                <div className="flex items-center gap-2 mb-1">
+                  <TrendingUp className="w-4 h-4 text-blue-600" />
+                  <div className="text-xs text-gray-500">Task Progress</div>
+                </div>
+                <div className="text-2xl font-bold text-gray-900">{initiative.metrics.taskProgress}%</div>
+              </div>
+              <div className="bg-gray-50 rounded-lg p-4">
+                <div className="flex items-center gap-2 mb-1">
+                  <AlertTriangle className="w-4 h-4 text-yellow-600" />
+                  <div className="text-xs text-gray-500">Risk Index</div>
+                </div>
+                <div className={`text-sm font-bold capitalize px-2 py-1 rounded ${getRiskColor(initiative.metrics.riskIndex)}`}>
+                  {initiative.metrics.riskIndex}
+                </div>
+              </div>
+              <div className="bg-gray-50 rounded-lg p-4">
+                <div className="flex items-center gap-2 mb-1">
+                  <Activity className="w-4 h-4 text-green-600" />
+                  <div className="text-xs text-gray-500">Availability</div>
+                </div>
+                <div className="text-2xl font-bold text-gray-900">{initiative.metrics.availabilityIndex}%</div>
+              </div>
+              <div className="bg-gray-50 rounded-lg p-4">
+                <div className="flex items-center gap-2 mb-1">
+                  <Activity className="w-4 h-4 text-blue-600" />
+                  <div className="text-xs text-gray-500">SLA</div>
+                </div>
+                <div className="text-2xl font-bold text-gray-900">{initiative.metrics.sla}%</div>
+              </div>
+              <div className="bg-gray-50 rounded-lg p-4">
+                <div className="flex items-center gap-2 mb-1">
+                  <Users className="w-4 h-4 text-violet-600" />
+                  <div className="text-xs text-gray-500">Active Users</div>
+                </div>
+                <div className="text-2xl font-bold text-gray-900">{initiative.metrics.activeUsers}</div>
+              </div>
+              <div className="bg-gray-50 rounded-lg p-4">
+                <div className="flex items-center gap-2 mb-1">
+                  <TrendingUp className="w-4 h-4 text-green-600" />
+                  <div className="text-xs text-gray-500">Performance</div>
+                </div>
+                <div className="text-2xl font-bold text-gray-900">{initiative.metrics.performance}</div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        <div className="border-t border-gray-200 pt-6 mt-6">
+          <h3 className="text-sm font-semibold text-gray-500 uppercase mb-4">Quick Actions</h3>
+          <div className="flex flex-wrap gap-3">
+            <button
+              onClick={() => onAction('create-task')}
+              className="bg-blue-600 hover:bg-blue-700 text-white font-semibold px-4 py-2 rounded-lg transition-colors"
+            >
+              Create Task
+            </button>
+            <button
+              onClick={() => onAction('plan-release')}
+              className="bg-white hover:bg-gray-50 text-gray-700 border border-gray-300 font-semibold px-4 py-2 rounded-lg transition-colors"
+            >
+              Plan Release
+            </button>
+            <button
+              onClick={() => onAction('add-link')}
+              className="bg-white hover:bg-gray-50 text-gray-700 border border-gray-300 font-semibold px-4 py-2 rounded-lg transition-colors"
+            >
+              Add Link
+            </button>
+            <button
+              onClick={() => onAction('open-voting')}
+              className="bg-white hover:bg-gray-50 text-gray-700 border border-gray-300 font-semibold px-4 py-2 rounded-lg transition-colors"
+            >
+              Open Voting
+            </button>
+            <button
+              onClick={() => onAction('mark-risk')}
+              className="bg-white hover:bg-gray-50 text-red-700 border border-red-300 font-semibold px-4 py-2 rounded-lg transition-colors"
+            >
+              Mark Risk
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,100 @@
+import { Users, Crown, Star, UserPlus } from 'lucide-react';
+
+interface ProductTeamProps {
+  team: {
+    owners?: any[];
+    coreTeam?: any[];
+    contributors?: any[];
+  };
+}
+
+export default function ProductTeam({ team }: ProductTeamProps) {
+  const { owners = [], coreTeam = [], contributors = [] } = team;
+
+  return (
+    <div className="bg-white rounded-xl shadow-sm p-6">
+      <div className="flex items-center gap-2 mb-6">
+        <Users className="w-5 h-5 text-gray-600" />
+        <h3 className="text-lg font-semibold text-gray-900">Team</h3>
+      </div>
+
+      <div className="space-y-6">
+        {owners.length > 0 && (
+          <div>
+            <div className="flex items-center gap-2 mb-3">
+              <Crown className="w-4 h-4 text-yellow-600" />
+              <h4 className="text-sm font-semibold text-gray-700 uppercase">Owners</h4>
+            </div>
+            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3">
+              {owners.map((member) => (
+                <div key={member.id} className="flex items-center gap-3 p-3 bg-yellow-50 border border-yellow-200 rounded-lg">
+                  <img
+                    src={member.avatar}
+                    alt={member.name}
+                    className="w-10 h-10 rounded-full"
+                  />
+                  <div className="flex-1 min-w-0">
+                    <div className="font-medium text-gray-900 truncate">{member.name}</div>
+                    <div className="text-xs text-yellow-700">Product Owner</div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {coreTeam.length > 0 && (
+          <div>
+            <div className="flex items-center gap-2 mb-3">
+              <Star className="w-4 h-4 text-blue-600" />
+              <h4 className="text-sm font-semibold text-gray-700 uppercase">Core Team</h4>
+            </div>
+            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3">
+              {coreTeam.map((member) => (
+                <div key={member.id} className="flex items-center gap-3 p-3 bg-blue-50 border border-blue-200 rounded-lg">
+                  <img
+                    src={member.avatar}
+                    alt={member.name}
+                    className="w-10 h-10 rounded-full"
+                  />
+                  <div className="flex-1 min-w-0">
+                    <div className="font-medium text-gray-900 truncate">{member.name}</div>
+                    <div className="text-xs text-blue-700">Core Member</div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {contributors.length > 0 && (
+          <div>
+            <div className="flex items-center gap-2 mb-3">
+              <UserPlus className="w-4 h-4 text-gray-600" />
+              <h4 className="text-sm font-semibold text-gray-700 uppercase">Contributors</h4>
+            </div>
+            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3">
+              {contributors.map((member) => (
+                <div key={member.id} className="flex items-center gap-3 p-3 bg-gray-50 border border-gray-200 rounded-lg">
+                  <img
+                    src={member.avatar}
+                    alt={member.name}
+                    className="w-10 h-10 rounded-full"
+                  />
+                  <div className="flex-1 min-w-0">
+                    <div className="font-medium text-gray-900 truncate">{member.name}</div>
+                    <div className="text-xs text-gray-600">Contributor</div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {owners.length === 0 && coreTeam.length === 0 && contributors.length === 0 && (
+          <p className="text-gray-500 text-center py-4">No team members assigned yet.</p>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,184 @@
+import { useState } from 'react';
+import { X, Info } from 'lucide-react';
+import { mockMilestones } from '../data/mockData';
+
+interface ProposeTaskFormProps {
+  initiativeId: string;
+  milestoneId?: string;
+  onSubmit: (data: any) => void;
+  onClose: () => void;
+}
+
+export default function ProposeTaskForm({ initiativeId, milestoneId, onSubmit, onClose }: ProposeTaskFormProps) {
+  const [formData, setFormData] = useState({
+    title: '',
+    description: '',
+    dueDate: '',
+    milestone: milestoneId || '',
+    priority: 'medium',
+    tags: '',
+  });
+
+  const availableMilestones = mockMilestones.filter(m => m.initiativeId === initiativeId);
+
+  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,
+    }));
+  };
+
+  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">Propose New Task</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="title" className="block text-sm font-medium text-gray-700 mb-1">
+              Title <span className="text-red-500">*</span>
+            </label>
+            <input
+              type="text"
+              id="title"
+              name="title"
+              required
+              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="Task 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 task in detail..."
+            />
+          </div>
+
+          {!milestoneId && (
+            <div>
+              <label htmlFor="milestone" className="block text-sm font-medium text-gray-700 mb-1">
+                Milestone
+              </label>
+              <select
+                id="milestone"
+                name="milestone"
+                value={formData.milestone}
+                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 milestone (optional)</option>
+                {availableMilestones.map((milestone) => (
+                  <option key={milestone.id} value={milestone.id}>
+                    {milestone.name}
+                  </option>
+                ))}
+              </select>
+            </div>
+          )}
+
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label htmlFor="dueDate" className="block text-sm font-medium text-gray-700 mb-1">
+                Due Date
+              </label>
+              <input
+                type="date"
+                id="dueDate"
+                name="dueDate"
+                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>
+              <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>
+            <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="bg-blue-50 border border-blue-200 rounded-lg p-4 flex gap-3">
+            <Info className="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5" />
+            <p className="text-sm text-blue-900">
+              This will create a voting for task creation. The task will be added to the milestone once the voting is approved.
+            </p>
+          </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"
+            >
+              Propose Task
+            </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>
+  );
+}