Growing goal admin dashboard design (#118)

* Add Edit Donation Goal UI with reset functionality and tester route

* Refine spacing

* feat: add goal update functionality with admin interface and validation

* fix: remove unused subMessage prop from GrowingGoal component

* Default edit field & admin growing goal title

* reflect currently raised instead of hardcode in editgoal

* MM-DD-YYYY format via helper for frontend to conform w/ design, backend still uses YYYY-MM-DD

---------

Co-authored-by: Thanin Kongkiatsophon <108406347+thaninbew@users.noreply.github.com>

Author: pujitakalinadhabhotla

apps/backend/src/donations/donations.controller.ts

@@ -2,6 +2,8 @@ import {
   Controller,
   Get,
   Post,
+  Patch,
+  Param,
   Body,
   Query,
   ParseIntPipe,
@@ -25,9 +27,12 @@ import {
 import { AuthGuard } from '@nestjs/passport';
 import { DonationsService } from './donations.service';
 import { DonationsRepository, PaginationFilters } from './donations.repository';
-import { CreateDonationDto } from './dtos/create-donation-dto';
-import { DonationResponseDto } from './dtos/donation-response-dto';
-import { PublicDonationDto } from './dtos/public-donation-dto';
+import {
+  CreateDonationDto,
+  DonationResponseDto,
+  PublicDonationDto,
+  UpdateGoalDto,
+} from './dtos';
 import { DonationMappers } from './mappers';
 import {
   DonationType,
@@ -36,6 +41,7 @@ import {
 } from './donation.entity';
 import { CurrentUserInterceptor } from '../interceptors/current-user.interceptor';
 import { Status } from '../users/types';
+import { Goal } from './goal.entity';
 
 @ApiTags('Donations')
 @Controller('donations')
@@ -191,6 +197,31 @@ export class DonationsController {
     return this.donationsService.getActiveGoalSummary();
   }
 
+  @Patch('goal/:id?')
+  @UseGuards(AuthGuard('jwt'))
+  @ApiBearerAuth()
+  @ApiOperation({
+    summary: 'update an existing goal (admin)',
+    description:
+      'update the details of a specific donation goal. If no ID is provided, the current active goal is updated. Requires authentication.',
+  })
+  @ApiResponse({
+    status: 200,
+    description: 'goal successfully updated',
+    type: Goal,
+  })
+  @ApiResponse({
+    status: 404,
+    description: 'goal not found',
+  })
+  async updateGoal(
+    @Param('id', new ParseIntPipe({ optional: true })) id: number | null,
+    @Body(new ValidationPipe({ whitelist: true, forbidNonWhitelisted: true }))
+    updateGoalDto: UpdateGoalDto,
+  ): Promise<Goal> {
+    return this.donationsService.updateGoal(id, updateGoalDto);
+  }
+
   @Get('lapsed')
   @UseGuards(AuthGuard('jwt'))
   @ApiBearerAuth()

apps/backend/src/donations/donations.service.ts

@@ -12,6 +12,7 @@ import { CreateDonationRequest, Donation as DomainDonation } from './mappers';
 import { Readable } from 'stream';
 import { DonationsRepository } from './donations.repository';
 import { Goal } from './goal.entity';
+import { UpdateGoalDto } from './dtos';
 
 interface PaymentIntentSyncPayload {
   donationId?: number;
@@ -348,26 +349,27 @@ export class DonationsService {
     return stream;
   }
 
-  async getActiveGoalSummary() {
-    // --- TEMPORARY MOCK FOR TESTING ---
-    return {
-      goal: {
-        id: 999,
-        targetAmount: 50000,
-        startDate: '2026-01-01',
-        endDate: '2026-06-30',
-        dateRangeLabel: 'January - June 2026',
-      },
-      amountRaised: 31336,
-      progressPercent: 62.67,
-    };
-    /* 
+  async getActiveGoalSummary(): Promise<{
+    goal: {
+      id: number;
+      title: string;
+      targetAmount: number;
+      startDate: string;
+      endDate: string;
+      dateRangeLabel: string;
+    } | null;
+    amountRaised: number;
+    progressPercent: number;
+  }> {
     const today = new Date().toISOString().split('T')[0];
-    
+
     // 1. find active goal
     const goal = await this.goalRepository
       .createQueryBuilder('goal')
-      .where(':today BETWEEN goal.startDate AND goal.endDate', { today })
+      .where(
+        '(:today BETWEEN goal.startDate AND goal.endDate) OR (goal.startDate <= :today AND goal.endDate IS NULL) OR (goal.startDate IS NULL AND goal.endDate >= :today) OR (goal.startDate IS NULL AND goal.endDate IS NULL)',
+        { today },
+      )
       .orderBy('goal.startDate', 'DESC')
       .getOne();
 
@@ -384,10 +386,10 @@ export class DonationsService {
       .createQueryBuilder('donation')
       .select('COALESCE(SUM(donation.amount), 0)', 'amount')
       .where('donation.status = :status', { status: DonationStatus.SUCCEEDED })
-      .andWhere('donation.createdAt >= :startDate', {
+      .andWhere(goal.startDate ? 'donation.createdAt >= :startDate' : '1=1', {
         startDate: goal.startDate,
       })
-      .andWhere('donation.createdAt <= :endDate', {
+      .andWhere(goal.endDate ? 'donation.createdAt <= :endDate' : '1=1', {
         endDate: `${goal.endDate} 23:59:59`,
       })
       .getRawOne<{ amount: string }>();
@@ -402,20 +404,77 @@ export class DonationsService {
     return {
       goal: {
         id: goal.id,
+        title: goal.title ?? '',
         targetAmount: goal.targetAmount,
-        startDate: goal.startDate,
-        endDate: goal.endDate,
-        dateRangeLabel: this.formatDateRange(goal.startDate, goal.endDate),
+        startDate: goal.startDate ?? '',
+        endDate: goal.endDate ?? '',
+        dateRangeLabel: this.formatDateRange(
+          goal.startDate ?? null,
+          goal.endDate ?? null,
+        ),
       },
       amountRaised,
       progressPercent,
     };
-    */
   }
 
-  private formatDateRange(start: string, end: string): string {
-    const startDate = new Date(start);
-    const endDate = new Date(end);
+  async updateGoal(
+    id: number | null,
+    updateGoalDto: UpdateGoalDto,
+  ): Promise<Goal> {
+    let goal: Goal | null;
+
+    if (id) {
+      goal = await this.goalRepository.findOneBy({ id });
+    } else {
+      const today = new Date().toISOString().split('T')[0];
+      goal = await this.goalRepository
+        .createQueryBuilder('goal')
+        .where(':today BETWEEN goal.startDate AND goal.endDate', { today })
+        .orderBy('goal.startDate', 'DESC')
+        .getOne();
+    }
+
+    if (!goal) {
+      return this.createGoal(updateGoalDto);
+    }
+
+    Object.assign(goal, updateGoalDto);
+    return this.goalRepository.save(goal);
+  }
+
+  async createGoal(updateGoalDto: UpdateGoalDto): Promise<Goal> {
+    const goal = this.goalRepository.create({
+      ...updateGoalDto,
+    });
+    return this.goalRepository.save(goal);
+  }
+
+  private formatDateRange(start: string | null, end: string | null): string {
+    if (!start && !end) return '';
+
+    const options: Intl.DateTimeFormatOptions = {
+      month: 'long',
+      day: 'numeric',
+      year: 'numeric',
+    };
+
+    if (start && !end) {
+      const startDate = new Date(start);
+      return `Started ${startDate.toLocaleDateString('en-US', options)}`;
+    }
+
+    if (!start && end) {
+      const endDate = new Date(end);
+      return `By ${endDate.toLocaleDateString('en-US', options)}`;
+    }
+
+    if (!start && !end) {
+      return 'Ongoing';
+    }
+
+    const startDate = new Date(start as string);
+    const endDate = new Date(end as string);
 
     const startMonth = startDate.toLocaleString('en-US', { month: 'long' });
     const endMonth = endDate.toLocaleString('en-US', { month: 'long' });

apps/backend/src/donations/dtos/index.ts

@@ -1,3 +1,4 @@
 export * from './create-donation-dto';
 export * from './donation-response-dto';
 export * from './public-donation-dto';
+export * from './update-goal-dto';

apps/backend/src/donations/dtos/update-goal-dto.ts

@@ -0,0 +1,24 @@
+import { ApiProperty } from '@nestjs/swagger';
+import { IsInt, IsString, Min, IsOptional } from 'class-validator';
+
+export class UpdateGoalDto {
+  @ApiProperty({ example: 50000 })
+  @IsInt()
+  @Min(0)
+  targetAmount!: number;
+
+  @ApiProperty({ example: 'Summer Goal' })
+  @IsString()
+  @IsOptional()
+  title?: string;
+
+  @ApiProperty({ example: '2026-01-01' })
+  @IsString()
+  @IsOptional()
+  startDate?: string;
+
+  @ApiProperty({ example: '2026-06-30' })
+  @IsString()
+  @IsOptional()
+  endDate?: string;
+}

apps/backend/src/donations/goal.entity.ts

@@ -11,20 +11,23 @@ export class Goal {
   @PrimaryGeneratedColumn('identity', {
     generatedIdentity: 'ALWAYS',
   })
-  id: number;
+  id!: number;
 
   @Column({ type: 'int' })
-  targetAmount: number;
+  targetAmount!: number;
 
-  @Column({ type: 'date' })
-  startDate: string;
+  @Column({ type: 'text', nullable: true })
+  title?: string;
 
-  @Column({ type: 'date' })
-  endDate: string;
+  @Column({ type: 'date', nullable: true })
+  startDate?: string;
+
+  @Column({ type: 'date', nullable: true })
+  endDate?: string;
 
   @CreateDateColumn({ type: 'timestamp', default: () => 'now()' })
-  createdAt: Date;
+  createdAt!: Date;
 
   @UpdateDateColumn({ type: 'timestamp', default: () => 'now()' })
-  updatedAt: Date;
+  updatedAt!: Date;
 }

apps/backend/src/main.ts

@@ -13,7 +13,10 @@ async function bootstrap() {
   const app = await NestFactory.create(AppModule, {
     rawBody: true,
   });
-  app.enableCors();
+  app.enableCors({
+    origin: 'http://localhost:4200',
+    credentials: true,
+  });
 
   const globalPrefix = 'api';
   app.setGlobalPrefix(globalPrefix);

apps/frontend/src/api/apiClient.ts

@@ -25,6 +25,7 @@ export type DonationStatsResponse = {
 export type ActiveGoalResponse = {
   goal: {
     id: number;
+    title: string;
     targetAmount: number;
     startDate: string;
     endDate: string;
@@ -34,6 +35,13 @@ export type ActiveGoalResponse = {
   progressPercent: number;
 };
 
+export type UpdateGoalRequest = {
+  title?: string;
+  targetAmount: number;
+  startDate: string;
+  endDate: string;
+};
+
 export type SignInRequest = { email: string; password: string };
 export type SignUpRequest = {
   firstName: string;
@@ -108,6 +116,18 @@ export class ApiClient {
     }
   }
 
+  public async updateGoal(
+    id: number | null,
+    body: UpdateGoalRequest,
+  ): Promise<void> {
+    try {
+      const url = id ? `/api/donations/goal/${id}` : '/api/donations/goal';
+      await this.axiosInstance.patch(url, body);
+    } catch (err: unknown) {
+      this.handleAxiosError(err, 'Failed to update goal');
+    }
+  }
+
   private handleAxiosError(err: unknown, defaultMsg: string): never {
     if (axios.isAxiosError<ApiError>(err)) {
       const data = err.response?.data;

apps/frontend/src/app.tsx

@@ -16,6 +16,7 @@ import { ConfirmRegisteredPage } from '@containers/auth/ConfirmRegisteredPage';
 import { DashboardPage } from '@containers/dashboard/DashboardPage';
 import { DonorStatsChart } from '@components/DonorStatsChart';
 import SidebarTester from '@containers/dashboard/sidebar/SidebarTester';
+import EditDonationGoalTester from '@components/DonationGoal/EditDonationGoalTester';
 import { AdminGrowingGoalTester } from '@containers/dashboard/AdminGrowingGoalTester';
 
 const router = createBrowserRouter([
@@ -50,6 +51,10 @@ const router = createBrowserRouter([
     path: '/sidebar-test',
     element: <SidebarTester />,
   },
+  {
+    path: '/edit-donation-goal-test',
+    element: <EditDonationGoalTester />,
+  },
   {
     path: '/test',
     element: <TestimonialTester />,