From 2d9273706da440fef8d8d50cc898798a5a84d9be Mon Sep 17 00:00:00 2001
From: YakshitAgarwal <yakshitagarwal05@gmail.com>
Date: Fri, 29 Aug 2025 17:25:36 +0530
Subject: [PATCH] Feat: Upload project on project owner dashboard

---
 .../project-owner/upload-project/page.tsx     |  52 ++++++-
 .../dashboard/upload-project/FundProject.tsx  |  66 +++++++++
 .../upload-project/SubmitNewProject.tsx       | 132 ++++++++++++++++++
 .../upload-project/SummaryAndUpload.tsx       | 111 +++++++++++++++
 4 files changed, 357 insertions(+), 4 deletions(-)
 create mode 100644 src/components/dashboard/upload-project/FundProject.tsx
 create mode 100644 src/components/dashboard/upload-project/SubmitNewProject.tsx
 create mode 100644 src/components/dashboard/upload-project/SummaryAndUpload.tsx

diff --git a/src/app/dashboard/project-owner/upload-project/page.tsx b/src/app/dashboard/project-owner/upload-project/page.tsx
index 4583406..eca4d3d 100644
--- a/src/app/dashboard/project-owner/upload-project/page.tsx
+++ b/src/app/dashboard/project-owner/upload-project/page.tsx
@@ -1,7 +1,51 @@
-import React from "react";
+"use client";
 
-function page() {
-  return <div>page</div>;
+import FundProject from "@/components/dashboard/upload-project/FundProject";
+import SubmitNewProject from "@/components/dashboard/upload-project/SubmitNewProject";
+import SummaryAndUpload from "@/components/dashboard/upload-project/SummaryAndUpload";
+import React, { useState } from "react";
+
+export type TabType = "submit" | "fund" | "summary";
+
+function UploadProject() {
+  const [activeTab, setActiveTab] = useState<TabType>("submit");
+
+  const tabs = [
+    { name: "submit", title: "Submit New Project" },
+    { name: "fund", title: "Fund Project" },
+    { name: "summary", title: "Summary & Upload" },
+  ];
+
+  const activeIndex = tabs.findIndex((t) => t.name === activeTab);
+
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="flex justify-center items-center gap-[21px]">
+        {tabs.map((item, index) => (
+          <div key={item.name} className="flex flex-col gap-[10px]">
+            <div>{item.title}</div>
+            <div
+              className={`rounded-[100px] h-[6px] transition-colors duration-300 ${
+                index <= activeIndex ? "bg-[#0073E6]" : "bg-[#1C1C1C]"
+              }`}
+            ></div>
+          </div>
+        ))}
+      </div>
+
+      <div>
+        {activeTab === tabs[0].name && (
+          <SubmitNewProject setActiveTab={setActiveTab} />
+        )}
+        {activeTab === tabs[1].name && (
+          <FundProject setActiveTab={setActiveTab} />
+        )}
+        {activeTab === tabs[2].name && (
+          <SummaryAndUpload setActiveTab={setActiveTab} />
+        )}
+      </div>
+    </div>
+  );
 }
 
-export default page;
+export default UploadProject;
diff --git a/src/components/dashboard/upload-project/FundProject.tsx b/src/components/dashboard/upload-project/FundProject.tsx
new file mode 100644
index 0000000..bc82f8f
--- /dev/null
+++ b/src/components/dashboard/upload-project/FundProject.tsx
@@ -0,0 +1,66 @@
+import type { TabType } from "@/app/dashboard/project-owner/upload-project/page";
+
+interface FundProjectProps {
+  setActiveTab: React.Dispatch<React.SetStateAction<TabType>>;
+}
+
+const FundProject = ({ setActiveTab }: FundProjectProps) => {
+  return (
+    <div className="flex justify-center pb-32 sm:pb-10">
+      <div className="sm:border-[1px] sm:border-[#1F1F1F] sm:rounded-[8px] p-6 w-full sm:max-w-[614px] flex flex-col gap-6">
+        <div className="flex flex-col gap-3">
+          <div className="text-[16px] text-[#E2E2E2]">
+            Fund project for audit
+          </div>
+          <div className="text-[12px] text-[#6C6C6C]">
+            Add funds to your bounty escrow account to pay for audit.
+          </div>
+        </div>
+        <div className="bg-[#101011] border-[1px] border-[#1F1F1F] p-6 rounded-[8px] flex flex-col gap-[10px]">
+          <div className="text-[16px] text-[#E2E2E2]">Connect Wallet</div>
+          <div className="text-[12px] text-[#6C6C6C]">
+            0x4A7d5cB67eA4F6e4B7cC3B3aE3f8fD9bB2cF9a1B
+          </div>
+        </div>
+        <div className="flex flex-col gap-3">
+          <div className="flex flex-col gap-[8px]">
+            <label className="text-[16px] text-[#E2E2E2]">Amount (USD)</label>
+            <input
+              type="text"
+              name="amount"
+              placeholder="1000"
+              className="border-[1px] border-[#1F1F1F] rounded-[48px] py-[12px] px-[24px] bg-[#090909] placeholder:text-[#6C6C6C] text-[#E2E2E2]"
+            />
+            <p className="text-[14px] text-[#6C6C6C]">Minimum deposit: $100</p>
+          </div>
+          <div className="bg-[#101011] p-6 flex flex-col gap-[10px] rounded-[8px]">
+            <div className="text-[16px] text-[#E2E2E2]">Escrow Protection</div>
+            <div className="text-[16px] text-[#6C6C6C]">
+              Funds are held securely in escrow and only released when valid
+              vulnerabilities are confirmed and bounties are awarded.
+            </div>
+          </div>
+        </div>
+        <div className="flex flex-col-reverse sm:flex-row sm:items-center gap-6 w-full">
+          <div className="flex-1 rounded-[48px] p-[2px] bg-gradient-to-r from-[#212121] to-[#312F2F]">
+            <button
+              onClick={() => setActiveTab("submit")}
+              className="w-full py-3 px-6 rounded-[48px] bg-[#1C1C1C] text-[#E2E2E2] text-[14px]"
+            >
+              Back
+            </button>
+          </div>
+          <div className="flex-1 rounded-[48px] p-[2px] bg-gradient-to-r from-[#10273E] to-[#2A67A4]">
+            <button
+              onClick={() => setActiveTab("summary")}
+              className="w-full py-3 px-6 rounded-[48px] bg-gradient-to-r from-[#1D74F9] to-[#092650] text-[#E2E2E2] text-[14px]"
+            >
+              Next
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default FundProject;
diff --git a/src/components/dashboard/upload-project/SubmitNewProject.tsx b/src/components/dashboard/upload-project/SubmitNewProject.tsx
new file mode 100644
index 0000000..e4707ac
--- /dev/null
+++ b/src/components/dashboard/upload-project/SubmitNewProject.tsx
@@ -0,0 +1,132 @@
+import { ChevronDown, CalendarDays } from "lucide-react";
+import type { TabType } from "@/app/dashboard/project-owner/upload-project/page";
+
+interface SubmitNewProjectProps {
+  setActiveTab: React.Dispatch<React.SetStateAction<TabType>>;
+}
+
+const SubmitNewProject = ({ setActiveTab }: SubmitNewProjectProps) => {
+  return (
+    <div className="flex justify-center pb-32 sm:pb-10">
+      <div className="sm:border-[1px] sm:border-[#1F1F1F] sm:rounded-[8px] p-6 w-full sm:max-w-[614px] flex flex-col gap-6">
+        <div className="font-medium text-[18px] text-[#E2E2E2]">
+          Submit New Project for Audit
+        </div>
+        <div className="flex flex-col gap-6">
+          <div className="flex flex-col gap-[10px]">
+            <label className="text-[16px] text-[#E2E2E2]">Project Name</label>
+            <input
+              type="text"
+              name="projectName"
+              placeholder="Enter project name"
+              className="border-[1px] border-[#1F1F1F] rounded-[48px] py-[12px] px-[24px] bg-[#090909] placeholder:text-[#6C6C6C] text-[#E2E2E2]"
+            />
+          </div>
+          <div className="flex flex-col gap-[10px]">
+            <label className="text-[16px] text-[#E2E2E2]">Description</label>
+            <textarea
+              name="description"
+              placeholder="Describe your project and its security requirements"
+              className="border-[1px] border-[#1F1F1F] rounded-[8px] py-[12px] px-[24px] h-[119px] bg-[#090909] placeholder:text-[#6C6C6C] text-[#E2E2E2]"
+            />
+          </div>
+          <div className="flex flex-col sm:flex-row items-center gap-6">
+            <div className="flex flex-col gap-[10px] w-full">
+              <label className="text-[16px] text-[#E2E2E2]">Project Type</label>
+              <div className="relative">
+                <input
+                  type="text"
+                  name="projectType"
+                  placeholder="Select project type"
+                  className="w-full border-[1px] border-[#1F1F1F] rounded-[48px] py-[12px] px-[24px] bg-[#090909] placeholder:text-[#6C6C6C] text-[#E2E2E2]"
+                />
+                <ChevronDown
+                  className="absolute right-4 top-1/2 -translate-y-1/2 text-[#6C6C6C] pointer-events-none"
+                  size={20}
+                />
+              </div>
+            </div>
+            <div className="flex flex-col gap-[10px] w-full">
+              <label className="text-[16px] text-[#E2E2E2]">
+                Project Deadline
+              </label>
+              <div className="relative">
+                <input
+                  type="text"
+                  name="projectDeadline"
+                  placeholder="Pick date"
+                  className="w-full border-[1px] border-[#1F1F1F] rounded-[48px] py-[12px] px-[24px] bg-[#090909] placeholder:text-[#6C6C6C] text-[#E2E2E2]"
+                />
+                <CalendarDays
+                  className="absolute right-4 top-1/2 -translate-y-1/2 text-[#6C6C6C] pointer-events-none"
+                  size={20}
+                />
+              </div>
+            </div>
+          </div>
+          <div className="flex flex-col sm:flex-row items-center gap-6">
+            <div className="flex flex-col gap-[10px] w-full">
+              <label className="text-[16px] text-[#E2E2E2]">
+                Repository URL
+              </label>
+              <div className="relative">
+                <input
+                  type="text"
+                  name="repoUrl"
+                  placeholder="Select repo"
+                  className="w-full border-[1px] border-[#1F1F1F] rounded-[48px] py-[12px] px-[24px] bg-[#090909] placeholder:text-[#6C6C6C] text-[#E2E2E2]"
+                />
+                <ChevronDown
+                  className="absolute right-4 top-1/2 -translate-y-1/2 text-[#6C6C6C] pointer-events-none"
+                  size={20}
+                />
+              </div>
+            </div>
+            <div className="flex flex-col gap-[10px] w-full">
+              <label className="text-[16px] text-[#E2E2E2]">Priority</label>
+              <div className="relative">
+                <input
+                  type="text"
+                  name="priority"
+                  placeholder="Select priority"
+                  className="w-full border-[1px] border-[#1F1F1F] rounded-[48px] py-[12px] px-[24px] bg-[#090909] placeholder:text-[#6C6C6C] text-[#E2E2E2]"
+                />
+                <ChevronDown
+                  className="absolute right-4 top-1/2 -translate-y-1/2 text-[#6C6C6C] pointer-events-none"
+                  size={20}
+                />
+              </div>
+            </div>
+          </div>
+          <div className="flex flex-col gap-[10px]">
+            <label className="text-[16px] text-[#E2E2E2]">
+              Contract Address
+            </label>
+            <input
+              type="text"
+              name="contractAddress"
+              placeholder="https://yourproject.com"
+              className="border-[1px] border-[#1F1F1F] rounded-[48px] py-[12px] px-[24px] bg-[#090909] placeholder:text-[#6C6C6C] text-[#E2E2E2]"
+            />
+          </div>
+        </div>
+        <div className="flex flex-col-reverse sm:flex-row sm:items-center gap-6 w-full">
+          <div className="flex-1 rounded-[48px] p-[2px] bg-gradient-to-r from-[#212121] to-[#312F2F]">
+            <button className="w-full py-3 px-6 rounded-[48px] bg-[#1C1C1C] text-[#E2E2E2] text-[14px]">
+              Cancel
+            </button>
+          </div>
+          <div className="flex-1 rounded-[48px] p-[2px] bg-gradient-to-r from-[#10273E] to-[#2A67A4]">
+            <button
+              onClick={() => setActiveTab("fund")}
+              className="w-full py-3 px-6 rounded-[48px] bg-gradient-to-r from-[#1D74F9] to-[#092650] text-[#E2E2E2] text-[14px]"
+            >
+              Next
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default SubmitNewProject;
diff --git a/src/components/dashboard/upload-project/SummaryAndUpload.tsx b/src/components/dashboard/upload-project/SummaryAndUpload.tsx
new file mode 100644
index 0000000..edd39a2
--- /dev/null
+++ b/src/components/dashboard/upload-project/SummaryAndUpload.tsx
@@ -0,0 +1,111 @@
+import type { TabType } from "@/app/dashboard/project-owner/upload-project/page";
+
+interface SummaryAndUploadProps {
+  setActiveTab: React.Dispatch<React.SetStateAction<TabType>>;
+}
+
+const SummaryAndUpload = ({ setActiveTab }: SummaryAndUploadProps) => {
+  return (
+    <div className="flex justify-center pb-32 sm:pb-10">
+      <div className="sm:border-[1px] sm:border-[#1F1F1F] sm:rounded-[8px] p-6 w-full sm:max-w-[808px] flex flex-col gap-6">
+        <div className="text-[18px] text-[#E2E2E2]">Summary</div>
+        <div className="flex flex-col gap-6">
+          <div className="hidden sm:flex sm:items-center sm:justify-between">
+            <div className="flex flex-col gap-[10px]">
+              <div className="text-[16px] text-[#E2E2E2]">Project Name</div>
+              <div className="text-[14px] text-[#6C6C6C]">
+                Smart contract audit
+              </div>
+            </div>
+            <div className="bg-[#10273E] rounded-[48px] py-[14px] px-3 text-[#0073E6]">
+              Priority: Low
+            </div>
+            <div className="bg-[#1C1C1C] border-[1px] border-[#1F1F1F] rounded-[8px] py-[14px] px-6 text-[#6C6C6C] text-[14px]">
+              Bounty Amount |{" "}
+              <span className="text-[18px] text-[#E2E2E2]">$1200</span>
+            </div>
+          </div>
+          <div className="flex flex-col gap-[10px]">
+            <div className="flex items-center justify-between">
+              <div className="flex flex-col gap-[10px]">
+                <div className="text-[16px] text-[#E2E2E2]">Project Name</div>
+                <div className="text-[14px] text-[#6C6C6C]">
+                  Smart contract audit
+                </div>
+              </div>
+              <div className="bg-[#10273E] rounded-[48px] py-[14px] px-3 text-[#0073E6]">
+                Priority: Low
+              </div>
+            </div>
+            <div className="text-center bg-[#1C1C1C] border-[1px] border-[#1F1F1F] rounded-[8px] py-[14px] px-6 text-[#6C6C6C] text-[14px]">
+              Bounty Amount |{" "}
+              <span className="text-[18px] text-[#E2E2E2]">$1200</span>
+            </div>
+          </div>
+          <div className="flex flex-col gap-[10px]">
+            <div className="text-[16px] text-[#E2E2E2]">Description</div>
+            <div className="text-[14px] text-[#6C6C6C]">
+              Smart Contract Audit is a planned, thorough evaluation of a smart
+              contract’s codebase, designed to equip researchers with a clear
+              framework for assessing its security, functionality, and
+              efficiency within the Mindblitz ecosystem or related blockchain
+              applications. The audit, to be conducted by specialized security
+              experts, will utilize automated analysis tools and in-depth manual
+              code review to uncover potential vulnerabilities, logical errors,
+              or inefficiencies that could lead to exploits or operational
+              issues. Researchers will focus on verifying the contract’s
+              alignment with its specified requirements, compliance with
+              blockchain industry best practices, and robustness against common
+              attack vectors, such as reentrancy, integer overflows, or
+              unauthorized access. The process will result in a detailed report
+              that identifies any issues, evaluates their severity, and provides
+              actionable recommendations for remediation, enabling researchers
+              to ensure the smart contract’s reliability, security, and
+              trustworthiness prior to its deployment in decentralized systems.
+            </div>
+          </div>
+          <div className="flex items-center gap-6">
+            <div className="flex flex-col gap-[10px] w-full">
+              <div className="text-[16px] text-[#E2E2E2]">Project Type</div>
+              <div className="text-[14px] text-[#6C6C6C]">Smart contract</div>
+            </div>
+            <div className="flex flex-col gap-[10px] w-full">
+              <div className="text-[16px] text-[#E2E2E2]">Project Deadline</div>
+              <div className="text-[14px] text-[#6C6C6C]">17 - Aug - 2025</div>
+            </div>
+          </div>
+          <div className="flex flex-col sm:flex-row sm:items-center gap-6">
+            <div className="flex flex-col gap-[10px] w-full">
+              <div className="text-[16px] text-[#E2E2E2]">Repository URL</div>
+              <div className="text-[14px] text-[#6C6C6C]">
+                https://github.com/smartcontract/repository
+              </div>
+            </div>
+            <div className="flex flex-col gap-[10px] w-full">
+              <div className="text-[16px] text-[#E2E2E2]">Contract Address</div>
+              <div className="text-[14px] text-[#6C6C6C]">
+                0x1234567890abcdef1234567890abcdef12345678
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="flex flex-col-reverse sm:flex-row sm:items-center gap-6 w-full">
+          <div className="flex-1 rounded-[48px] p-[2px] bg-gradient-to-r from-[#212121] to-[#312F2F]">
+            <button
+              onClick={() => setActiveTab("fund")}
+              className="w-full py-3 px-6 rounded-[48px] bg-[#1C1C1C] text-[#E2E2E2] text-[14px]"
+            >
+              Back
+            </button>
+          </div>
+          <div className="flex-1 rounded-[48px] p-[2px] bg-gradient-to-r from-[#10273E] to-[#2A67A4]">
+            <button className="w-full py-3 px-6 rounded-[48px] bg-gradient-to-r from-[#1D74F9] to-[#092650] text-[#E2E2E2] text-[14px]">
+              Upload
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default SummaryAndUpload;