refactor: standardize campaign status types and rename milestone name to title across components

Author: 0xdevcollins

app/me/crowdfunding/[slug]/edit/components/MilestonesSection.tsx

@@ -62,7 +62,7 @@ const SortableMilestoneItem = ({
   };
 
   const hasContent =
-    milestone.name ||
+    milestone.title ||
     milestone.description ||
     milestone.startDate ||
     milestone.endDate;
@@ -118,7 +118,7 @@ const SortableMilestoneItem = ({
                   className='hover:text-primary flex items-center gap-2 text-white transition-colors'
                 >
                   <span className='text-sm font-medium'>
-                    {milestone.name || `Milestone ${index + 1}`}
+                    {milestone.title || `Milestone ${index + 1}`}
                   </span>
                   <svg
                     width='16'
@@ -154,11 +154,11 @@ const SortableMilestoneItem = ({
               <div className='space-y-2'>
                 <Input
                   placeholder='Enter milestone name/title'
-                  value={milestone.name}
+                  value={milestone.title}
                   onChange={e =>
                     onMilestoneChange(
                       milestone.id || '',
-                      'name',
+                      'title',
                       e.target.value
                     )
                   }
@@ -257,14 +257,13 @@ export function MilestonesSection({
   const addMilestone = () => {
     const newMilestone: Milestone = {
       id: `milestone-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
-      name: '',
+      title: '',
       description: '',
       amount: 0,
       fundingPercentage: 0,
       reviewStatus: 'pending',
       startDate: '',
       endDate: '',
-      title: '',
     };
     onChange([...milestones, newMilestone]);
   };

components/crowdfunding/campaign-milestones-tab.tsx

@@ -5,15 +5,7 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Progress } from '@/components/ui/progress';
 import { Target, Calendar } from 'lucide-react';
-
-interface Milestone {
-  name: string;
-  description: string;
-  amount: number;
-  reviewStatus: string;
-  endDate: string;
-  progress?: number;
-}
+import { Milestone } from '@/features/projects/types';
 
 interface CampaignMilestonesTabProps {
   milestones: Milestone[];
@@ -91,7 +83,7 @@ export function CampaignMilestonesTab({
                 <div className='mb-4 flex items-start justify-between'>
                   <div className='flex-1'>
                     <h4 className='mb-2 text-lg font-semibold text-white'>
-                      {milestone.name}
+                      {milestone.title}
                     </h4>
                     <p className='mb-3 text-white/80'>
                       {milestone.description}

components/crowdfunding/milestone-card.tsx

@@ -88,7 +88,7 @@ export function MilestoneCard({
               {/* Milestone Info */}
               <div className='min-w-0 flex-1'>
                 <h3 className='text-foreground truncate text-lg font-semibold transition-colors group-hover:text-amber-500'>
-                  {milestone.name}
+                  {milestone.title}
                 </h3>
                 <p className='text-muted-foreground mt-1 line-clamp-2 text-sm'>
                   {milestone.description}

components/crowdfunding/milestone-detail-header.tsx

@@ -50,7 +50,7 @@ export function MilestoneDetailHeader({
         </Button>
         <div className='flex-1'>
           <h1 className='text-3xl font-bold tracking-tight'>
-            {milestone.name}
+            {milestone.title}
           </h1>
         </div>
       </div>

components/project-details/project-milestone/index.tsx

@@ -15,6 +15,10 @@ import { Milestone } from '@/features/projects/types';
 import type { ProjectViewModel } from '@/features/projects/types/view-model';
 import Link from 'next/link';
 import { getCrowdfundingMilestones } from '@/features/projects/api';
+import {
+  CampaignStatus,
+  normalizeCampaignStatus,
+} from '@/features/projects/types';
 import { useOptionalAuth } from '@/hooks/use-auth';
 import { MilestoneSubmissionModal } from './MilestoneSubmissionModal';
 import { MilestoneDisputeModal } from './MilestoneDisputeModal';
@@ -46,12 +50,11 @@ const ProjectMilestone = ({ vm }: ProjectMilestoneProps) => {
   const isBacker = !!(
     user && vm.campaign?.contributors?.some(c => c.userId === user.id)
   );
-  // Milestones can only be submitted/disputed when the campaign is funded or executing
-  const campaignStatus = (vm.status || '').toUpperCase();
+  const campaignStatus = normalizeCampaignStatus(vm.status);
   const isFundedOrExecuting =
-    campaignStatus === 'LIVE' ||
-    campaignStatus === 'FUNDED' ||
-    campaignStatus === 'EXECUTING' ||
+    campaignStatus === CampaignStatus.LIVE ||
+    campaignStatus === CampaignStatus.FUNDED ||
+    campaignStatus === CampaignStatus.EXECUTING ||
     vm.campaign?.trustlessWorkStatus === 'funded';
   const inlineMilestones =
     vm.campaign?.milestones ?? vm.submission?.milestones ?? [];

components/project-details/project-sidebar/ProjectSidebarActions.tsx

@@ -12,6 +12,8 @@ import {
   Loader2,
 } from 'lucide-react';
 import { ProjectSidebarActionsProps } from './types';
+import { CampaignStatus } from './utils';
+import type { CampaignStatusValue } from '@/features/projects/types';
 import { BoundlessButton } from '@/components/buttons';
 import { SharePopup } from './SharePopup';
 import { FollowButton } from '@/components/follow';
@@ -46,12 +48,15 @@ export function ProjectSidebarActions({
     useCrowdfundContract();
 
   const isCreator = !!(user && user.id === vm.creatorId);
+  const cancellableStatuses: CampaignStatusValue[] = [
+    CampaignStatus.CAMPAIGNING,
+    CampaignStatus.IDEA,
+    CampaignStatus.REVIEWING,
+  ];
   const canCancel =
     isCreator &&
     vm.campaign?.onChainId &&
-    ['CAMPAIGNING', 'Validation', 'idea', 'pending', 'SUBMITTED'].includes(
-      projectStatus
-    );
+    cancellableStatuses.includes(projectStatus);
 
   const handleShareClick = () => {
     setIsSharePopupOpen(true);
@@ -66,10 +71,7 @@ export function ProjectSidebarActions({
 
     setIsCancelling(true);
     try {
-      // Sign cancel_campaign transaction on-chain
       const transactionHash = await cancelCampaign(vm.campaign.onChainId);
-
-      // Record in backend
       await deleteCrowdfundingProject(vm.campaign.campaignId);
 
       toast.success('Campaign cancelled', {
@@ -87,7 +89,7 @@ export function ProjectSidebarActions({
 
   return (
     <div className='flex flex-wrap gap-2 sm:gap-3'>
-      {projectStatus === 'VOTING' && (
+      {projectStatus === CampaignStatus.VOTING && (
         <div className='group relative inline-block'>
           <BoundlessButton
             onClick={() => onVote(1)}
@@ -120,8 +122,7 @@ export function ProjectSidebarActions({
         </div>
       )}
 
-      {/* Back Project — only for campaigns in funding phase */}
-      {vm.campaign && projectStatus === 'CAMPAIGNING' && (
+      {vm.campaign && projectStatus === CampaignStatus.CAMPAIGNING && (
         <FundingModal
           campaignId={vm.campaign.campaignId}
           onChainId={vm.campaign.onChainId}
@@ -140,7 +141,7 @@ export function ProjectSidebarActions({
         </FundingModal>
       )}
 
-      {projectStatus === 'Completed' && (
+      {projectStatus === CampaignStatus.COMPLETED && (
         <BoundlessButton
           disabled
           className='bg-success-75 border-success-600 text-success-600 flex h-10 flex-1 items-center justify-center gap-2 rounded-lg border text-sm font-semibold shadow-lg transition-all duration-200 sm:h-12 sm:text-base'
@@ -151,7 +152,7 @@ export function ProjectSidebarActions({
         </BoundlessButton>
       )}
 
-      {projectStatus === 'Funded' && (
+      {projectStatus === CampaignStatus.FUNDED && (
         <BoundlessButton
           disabled
           className='bg-secondary-75 border-secondary-600 text-secondary-600 flex h-10 flex-1 items-center justify-center gap-2 rounded-lg border text-sm font-semibold shadow-lg transition-all duration-200 sm:h-12 sm:text-base'
@@ -162,7 +163,6 @@ export function ProjectSidebarActions({
         </BoundlessButton>
       )}
 
-      {/* Cancel Campaign — only for campaign creator in cancellable states */}
       {canCancel && (
         <AlertDialog>
           <AlertDialogTrigger asChild>

components/project-details/project-sidebar/ProjectSidebarHeader.tsx

@@ -3,6 +3,7 @@
 import { Calendar, Rocket, Trophy, Layers } from 'lucide-react';
 import Image from 'next/image';
 import { ProjectSidebarHeaderProps } from './types';
+import { CampaignStatus } from './utils';
 import type { ProjectOrigin } from '@/features/projects/types/view-model';
 
 const ORIGIN_CONFIG: Record<
@@ -26,32 +27,43 @@ const ORIGIN_CONFIG: Record<
   },
 };
 
+const STATUS_LABELS: Record<string, string> = {
+  [CampaignStatus.IDEA]: 'Validation',
+  [CampaignStatus.REVIEWING]: 'Reviewing',
+  [CampaignStatus.VOTING]: 'Voting',
+  [CampaignStatus.CAMPAIGNING]: 'Funding',
+  [CampaignStatus.FUNDED]: 'Funded',
+  [CampaignStatus.EXECUTING]: 'Executing',
+  [CampaignStatus.LIVE]: 'Live',
+  [CampaignStatus.COMPLETED]: 'Completed',
+  [CampaignStatus.FAILED]: 'Failed',
+  [CampaignStatus.CANCELLED]: 'Cancelled',
+  [CampaignStatus.DRAFT]: 'Draft',
+};
+
+const STATUS_STYLES: Record<string, string> = {
+  [CampaignStatus.CAMPAIGNING]:
+    'bg-secondary-75 border-secondary-600 text-secondary-600',
+  [CampaignStatus.FUNDED]: 'bg-active-bg border-primary text-primary',
+  [CampaignStatus.COMPLETED]:
+    'bg-success-75 border-success-600 text-success-600',
+  [CampaignStatus.IDEA]: 'bg-warning-75 border-warning-600 text-warning-600',
+  [CampaignStatus.VOTING]: 'bg-warning-75 border-warning-600 text-warning-600',
+  [CampaignStatus.LIVE]: 'bg-active-bg border-primary text-primary',
+  [CampaignStatus.REVIEWING]: 'bg-gray-800 border-gray-700 text-white',
+  [CampaignStatus.DRAFT]: 'bg-gray-800 border-gray-700 text-white',
+  [CampaignStatus.EXECUTING]: 'bg-active-bg border-primary text-primary',
+  [CampaignStatus.FAILED]: 'bg-red-500/10 border-red-500/30 text-red-400',
+  [CampaignStatus.CANCELLED]: 'bg-gray-800 border-gray-700 text-white/50',
+};
+
 export function ProjectSidebarHeader({
   vm,
   projectStatus,
 }: ProjectSidebarHeaderProps) {
-  const getStatusStyles = () => {
-    switch (projectStatus) {
-      case 'CAMPAIGNING':
-        return 'bg-secondary-75 border-secondary-600 text-secondary-600';
-      case 'Funded':
-        return 'bg-active-bg border-primary text-primary';
-      case 'Completed':
-        return 'bg-success-75 border-success-600 text-success-600';
-      case 'Validation':
-        return 'bg-warning-75 border-warning-600 text-warning-600';
-      case 'idea':
-        return 'bg-warning-75 border-warning-600 text-warning-600';
-      case 'Live':
-        return 'bg-active-bg border-primary text-primary';
-      case 'pending':
-      case 'SUBMITTED':
-        return 'bg-gray-800 border-gray-700 text-white';
-      default:
-        return 'text-white border-gray-700';
-    }
-  };
-
+  const statusStyle =
+    STATUS_STYLES[projectStatus] ?? 'text-white border-gray-700';
+  const statusLabel = STATUS_LABELS[projectStatus] ?? projectStatus;
   const originCfg = ORIGIN_CONFIG[vm.origin];
 
   return (
@@ -74,22 +86,19 @@ export function ProjectSidebarHeader({
           </h1>
 
           <div className='flex flex-wrap items-center gap-1.5 sm:gap-2'>
-            {/* Origin badge */}
             <div
               className={`flex items-center gap-1 rounded-lg border px-2 py-0.5 text-[10px] font-semibold sm:px-2.5 sm:py-1 sm:text-xs ${originCfg.className}`}
             >
               {originCfg.icon}
               {originCfg.label}
             </div>
-            {/* Category badge */}
             <div className='rounded-lg border border-orange-500/30 bg-orange-500/10 px-2 py-0.5 text-[10px] font-semibold text-orange-400 sm:px-2.5 sm:py-1 sm:text-xs'>
               {vm.category}
             </div>
-            {/* Status badge */}
             <div
-              className={`rounded-lg border px-2 py-0.5 text-[10px] font-semibold sm:px-2.5 sm:py-1 sm:text-xs ${getStatusStyles()}`}
+              className={`rounded-lg border px-2 py-0.5 text-[10px] font-semibold sm:px-2.5 sm:py-1 sm:text-xs ${statusStyle}`}
             >
-              {projectStatus}
+              {statusLabel}
             </div>
           </div>
         </div>

components/project-details/project-sidebar/ProjectSidebarProgress.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useState } from 'react';
 import { ProjectSidebarProgressProps } from './types';
+import { CampaignStatus } from './utils';
 import { Progress } from '@/components/ui/progress';
 import { useCrowdfundContract } from '@/hooks/use-crowdfund-contract';
 import { Shield } from 'lucide-react';
@@ -19,7 +20,6 @@ export function ProjectSidebarProgress({
   const fundingPercentage =
     fundingGoal > 0 ? (fundingRaised / fundingGoal) * 100 : 0;
 
-  // On-chain verification data
   const { getCampaignOnChain } = useCrowdfundContract();
   const [onChainData, setOnChainData] = useState<{
     currentFunding: number;
@@ -33,8 +33,6 @@ export function ProjectSidebarProgress({
     getCampaignOnChain(campaign.onChainId)
       .then(result => {
         if (cancelled || !result) return;
-        // Result may be a Soroban Result<Campaign> or direct Campaign object
-        // Use unknown intermediate to safely extract fields
         const raw = result as unknown as Record<string, unknown>;
         let campaignData: Record<string, unknown> | null = null;
 
@@ -51,21 +49,15 @@ export function ProjectSidebarProgress({
           });
         }
       })
-      .catch(() => {
-        // Silently fail — on-chain data is supplementary
-      });
+      .catch(() => {});
 
     return () => {
       cancelled = true;
     };
   }, [campaign?.onChainId, getCampaignOnChain]);
 
   const renderProgressSection = () => {
-    // Funding progress — only for campaigns in funding phase
-    if (
-      campaign &&
-      (projectStatus === 'Funding' || projectStatus === 'CAMPAIGNING')
-    ) {
+    if (campaign && projectStatus === CampaignStatus.CAMPAIGNING) {
       return (
         <div className='space-y-3'>
           <div className='flex items-center justify-between text-sm'>
@@ -89,8 +81,10 @@ export function ProjectSidebarProgress({
       );
     }
 
-    // Validation vote progress — all project types
-    if (projectStatus === 'Validation' || projectStatus === 'VOTING') {
+    if (
+      projectStatus === CampaignStatus.IDEA ||
+      projectStatus === CampaignStatus.VOTING
+    ) {
       const validationProgress = Math.min(
         ((voteCounts?.upvotes || 0) / voteGoal) * 100,
         100
@@ -111,10 +105,11 @@ export function ProjectSidebarProgress({
       );
     }
 
-    // Milestone progress — only for funded/completed campaigns
     if (
       campaign &&
-      (projectStatus === 'Completed' || projectStatus === 'Funded')
+      (projectStatus === CampaignStatus.COMPLETED ||
+        projectStatus === CampaignStatus.FUNDED ||
+        projectStatus === CampaignStatus.EXECUTING)
     ) {
       const completedMilestones =
         campaign.milestones?.filter(m => m.reviewStatus === 'completed')
@@ -154,7 +149,6 @@ export function ProjectSidebarProgress({
       );
     }
 
-    // Default: vote progress
     const defaultProgress = Math.min(
       ((voteCounts?.totalVotes || 0) / voteGoal) * 100,
       100