Integrate request feature

packages/backend/prisma/schema.prisma

@@ -258,3 +258,11 @@ enum ProofStatus {
 enum NotificationType {
   COMMITMENT_RECEIVED
 }
+
+model FeatureRequest {
+  id        String   @id @default(cuid())
+  content   String
+  createdAt DateTime @default(now()) @map("created_at")
+
+  @@map("feature_requests")
+}

packages/backend/src/app.module.ts

@@ -12,6 +12,7 @@ import { EventsModule } from './events/events.module';
 import { NotificationModule } from './notification/notification.module';
 import { AuthModule } from './auth/auth.module';
 import { PriceModule } from './price/price.module';
+import { FeatureRequestModule } from './feature-request/feature-request.module';
 
 @Module({
   imports: [
@@ -28,6 +29,7 @@ import { PriceModule } from './price/price.module';
     NotificationModule,
     AuthModule,
     PriceModule,
+    FeatureRequestModule,
   ],
 })
 export class AppModule {}

packages/backend/src/feature-request/feature-request.controller.ts

@@ -0,0 +1,29 @@
+import { Controller, Get, Post, Body } from '@nestjs/common';
+import { ApiTags, ApiOperation, ApiResponse, ApiBody } from '@nestjs/swagger';
+import { FeatureRequestService } from './feature-request.service';
+import { CreateFeatureRequestDto } from '@polypay/shared';
+
+@ApiTags('feature-requests')
+@Controller('feature-requests')
+export class FeatureRequestController {
+  constructor(private readonly featureRequestService: FeatureRequestService) {}
+
+  @Post()
+  @ApiOperation({ summary: 'Submit a new feature request' })
+  @ApiBody({ type: CreateFeatureRequestDto })
+  @ApiResponse({
+    status: 201,
+    description: 'Feature request submitted successfully',
+  })
+  @ApiResponse({ status: 400, description: 'Bad request' })
+  async create(@Body() dto: CreateFeatureRequestDto) {
+    return this.featureRequestService.create(dto);
+  }
+
+  @Get()
+  @ApiOperation({ summary: 'Get all feature requests (internal)' })
+  @ApiResponse({ status: 200, description: 'List of feature requests' })
+  async findAll() {
+    return this.featureRequestService.findAll();
+  }
+}

packages/backend/src/feature-request/feature-request.module.ts

@@ -0,0 +1,12 @@
+import { Module } from '@nestjs/common';
+import { FeatureRequestController } from './feature-request.controller';
+import { FeatureRequestService } from './feature-request.service';
+import { DatabaseModule } from '@/database/database.module';
+
+@Module({
+  imports: [DatabaseModule],
+  controllers: [FeatureRequestController],
+  providers: [FeatureRequestService],
+  exports: [FeatureRequestService],
+})
+export class FeatureRequestModule {}

packages/backend/src/feature-request/feature-request.service.ts

@@ -0,0 +1,27 @@
+import { Injectable, Logger } from '@nestjs/common';
+import { PrismaService } from '@/database/prisma.service';
+import { CreateFeatureRequestDto } from '@polypay/shared';
+
+@Injectable()
+export class FeatureRequestService {
+  private readonly logger = new Logger(FeatureRequestService.name);
+
+  constructor(private prisma: PrismaService) {}
+
+  async create(dto: CreateFeatureRequestDto) {
+    const featureRequest = await this.prisma.featureRequest.create({
+      data: {
+        content: dto.content,
+      },
+    });
+
+    this.logger.log(`Created feature request: ${featureRequest.id}`);
+    return featureRequest;
+  }
+
+  async findAll() {
+    return this.prisma.featureRequest.findMany({
+      orderBy: { createdAt: 'desc' },
+    });
+  }
+}

packages/nextjs/components/Sidebar/Sidebar.tsx

@@ -187,12 +187,9 @@ export default function Sidebar() {
 
         {/* Bottom Section */}
         <div className="flex flex-col gap-2.5">
-          {/* Request new feature */}
           <div
             className="h-[36px] flex items-center gap-[5px] px-2.5 py-1.5 bg-main-white rounded-lg cursor-pointer hover:bg-grey-50"
-            onClick={() => {
-              // TODO: Open request feature modal
-            }}
+            onClick={() => openModal("requestFeature")}
           >
             <Image src="/sidebar/request-feature.svg" alt="Request feature" width={20} height={20} />
             <span className="xl:block hidden flex-1 text-sm font-medium text-grey-700">Request new feature</span>

packages/nextjs/components/modals/ModalLayout.tsx

@@ -32,6 +32,10 @@ const modals: ModalRegistry = {
   removeBatch: dynamic(() => import("./RemoveBatchModal"), {
     ssr: false,
   }),
+
+  requestFeature: dynamic(() => import("./RequestFeatureModal"), {
+    ssr: false,
+  }),
 };
 
 type ModalInstance = {

packages/nextjs/components/modals/RequestFeatureModal.tsx

@@ -0,0 +1,107 @@
+import Image from "next/image";
+import ModalContainer from "./ModalContainer";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { X } from "lucide-react";
+import { useForm } from "react-hook-form";
+import { toast } from "react-hot-toast";
+import { FeatureRequestFormData, featureRequestSchema } from "~~/lib/form/schemas";
+import { featureRequestApi } from "~~/services/api";
+import { ModalProps } from "~~/types/modal";
+
+const BUTTON_BASE_CLASS = "text-main-black font-medium h-9 text-sm rounded-lg disabled:opacity-50";
+
+const RequestFeatureModal: React.FC<ModalProps> = ({ isOpen, onClose }) => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+    reset,
+    watch,
+  } = useForm<FeatureRequestFormData>({
+    resolver: zodResolver(featureRequestSchema),
+    mode: "onChange",
+    defaultValues: { content: "" },
+  });
+
+  const content = watch("content");
+  const isDisabled = isSubmitting || !content?.trim();
+
+  const onSubmit = async (data: FeatureRequestFormData) => {
+    try {
+      await featureRequestApi.create(data);
+      toast.success("Feature request submitted successfully!");
+      reset();
+      onClose();
+    } catch (error) {
+      console.error("Error submitting feature request:", error);
+      toast.error("Failed to submit feature request");
+    }
+  };
+
+  const handleCancel = () => {
+    reset();
+    onClose();
+  };
+
+  return (
+    <ModalContainer
+      isOpen={isOpen}
+      onClose={onClose}
+      isCloseButton={false}
+      className="bg-white border border-white rounded-4xl max-w-xl p-0"
+    >
+      <div className="relative w-full h-full">
+        <div className="p-4 relative">
+          <Image
+            className="absolute w-full h-full top-0 left-0 z-10 rounded-t-4xl"
+            src="/dashboard/bg-request-feature.png"
+            alt="background"
+            width={512}
+            height={500}
+          />
+          <div className="relative z-50 pt-3">
+            <h3 className="text-2xl font-medium text-center text-main-black">Request a new feature</h3>
+            <button
+              type="button"
+              className="absolute h-9 w-9 right-2 top-1/2 transform -translate-y-1/2 flex items-center justify-center rounded-lg border border-grey-200 cursor-pointer"
+              onClick={handleCancel}
+              aria-label="Close"
+            >
+              <X width={14} height={14} />
+            </button>
+          </div>
+          <form onSubmit={handleSubmit(onSubmit)}>
+            <div className="my-8 relative z-50">
+              <textarea
+                {...register("content")}
+                className="w-full outline-none border border-grey-200 bg-[#FFFFFFCC] rounded-2xl p-4 h-[180px] resize-none"
+                placeholder="Describe the feature you'd like to see — what problem it solves and how you'd use it."
+              />
+              {errors.content && <p className="text-red-500 text-sm mt-2">{errors.content.message}</p>}
+            </div>
+          </form>
+        </div>
+        <div className="flex items-center gap-2 w-full px-5 py-4 border-t border-grey-200 bg-grey-50 rounded-b-4xl">
+          <button
+            type="button"
+            className={`${BUTTON_BASE_CLASS} w-[90px] text-center bg-grey-100`}
+            onClick={handleCancel}
+            disabled={isSubmitting}
+          >
+            Cancel
+          </button>
+          <button
+            type="submit"
+            className={`${BUTTON_BASE_CLASS} w-full bg-main-pink disabled:cursor-not-allowed`}
+            onClick={handleSubmit(onSubmit)}
+            disabled={isDisabled}
+          >
+            {isSubmitting ? "Submitting..." : "Submit"}
+          </button>
+        </div>
+      </div>
+    </ModalContainer>
+  );
+};
+
+export default RequestFeatureModal;

packages/nextjs/lib/form/schemas.ts

@@ -67,3 +67,10 @@ export const updateThresholdSchema = z.object({
   threshold: z.number().min(1, "Threshold must be at least 1"),
 });
 export type UpdateThresholdFormData = z.infer<typeof updateThresholdSchema>;
+
+// ==================== Feature Request ====================
+
+export const featureRequestSchema = z.object({
+  content: validators.requiredString("Feature request").trim(),
+});
+export type FeatureRequestFormData = z.infer<typeof featureRequestSchema>;

packages/nextjs/package.json

@@ -57,6 +57,7 @@
     "usehooks-ts": "~3.1.0",
     "viem": "2.31.1",
     "wagmi": "2.15.6",
+    "zod": "^3.25.76",
     "zustand": "~5.0.0"
   },
   "devDependencies": {

packages/nextjs/services/api/featureRequestApi.ts

@@ -0,0 +1,15 @@
+import { apiClient } from "./apiClient";
+import { API_ENDPOINTS } from "@polypay/shared";
+import { CreateFeatureRequestDto, FeatureRequest } from "@polypay/shared";
+
+export const featureRequestApi = {
+  create: async (dto: CreateFeatureRequestDto): Promise<FeatureRequest> => {
+    const { data } = await apiClient.post<FeatureRequest>(API_ENDPOINTS.featureRequests.base, dto);
+    return data;
+  },
+
+  getAll: async (): Promise<FeatureRequest[]> => {
+    const { data } = await apiClient.get<FeatureRequest[]>(API_ENDPOINTS.featureRequests.base);
+    return data;
+  },
+};

packages/nextjs/services/api/index.ts

@@ -6,4 +6,5 @@ export { batchItemApi } from "./batchItemApi";
 export { transactionApi } from "./transactionApi";
 export { notificationApi } from "./notificationApi";
 export { authApi } from "./authApi";
+export { featureRequestApi } from "./featureRequestApi";
 export { queryClient } from "../queryClient";

packages/nextjs/styles/globals.css

@@ -167,7 +167,7 @@
   h2,
   h3,
   h4 {
-    margin-bottom: 0.5rem;
+    /* margin-bottom: 0.5rem; */
     line-height: 1;
   }
 }

packages/nextjs/types/modal.ts

@@ -20,4 +20,5 @@ export type ModalName =
   | "confirm"
   | "editAccount"
   | "developingFeature"
-  | "removeBatch";
+  | "removeBatch"
+  | "requestFeature";

packages/shared/src/api/endpoints.ts

@@ -69,4 +69,8 @@ export const API_ENDPOINTS = {
   prices: {
     base: "/api/prices",
   },
+
+  featureRequests: {
+    base: "/api/feature-requests",
+  },
 } as const;

packages/shared/src/dto/feature-request/create-feature-request.dto.ts

@@ -0,0 +1,7 @@
+import { IsNotEmpty, IsString } from "class-validator";
+
+export class CreateFeatureRequestDto {
+  @IsNotEmpty()
+  @IsString()
+  content: string;
+}

packages/shared/src/dto/feature-request/index.ts

@@ -0,0 +1 @@
+export * from "./create-feature-request.dto";

packages/shared/src/dto/index.ts

@@ -5,4 +5,5 @@ export * from "./batch-item";
 export * from "./contact-book";
 export * from "./notification";
 export * from "./auth";
+export * from "./feature-request";
 export * from "./pagination.dto";

packages/shared/src/types/feature-request.ts

@@ -0,0 +1,5 @@
+export interface FeatureRequest {
+  id: string;
+  content: string;
+  createdAt: string;
+}

packages/shared/src/types/index.ts

@@ -7,3 +7,4 @@ export * from "./contact-book";
 export * from "./notification";
 export * from "./socket-events";
 export * from "./auth";
+export * from "./feature-request";