From c3a42cbd615abb0972171a02260960ddbc027124 Mon Sep 17 00:00:00 2001
From: Aditya Anand M C <aditya.anandmc@gmail.com>
Date: Wed, 11 Dec 2024 17:44:13 +0530
Subject: [PATCH] fix: add ApplicationSummary to EvaluationView page (#87)

* fix: add ApplicationSummary to EvaluationView page

- refactor ApplicationSummary into component
- reuse in SubmitEvaluation
- wire it into EvaluationView page
- rename gray -> grey
- update ApplicationSummary component to accordian

closes PAR-688

* address feedback
---
 .../components/PoolSummary/PoolSummary.tsx    |   4 +-
 .../ApplicationSummary/ApplicationSummary.mdx |  23 +++
 .../ApplicationSummary.stories.tsx            |  26 +++
 .../ApplicationSummary/ApplicationSummary.tsx | 169 ++++++++++++++++++
 .../components/ApplicationSummary/index.ts    |   1 +
 .../components/ApplicationSummary/mocks.ts    | 101 +++++++++++
 .../ProjectSummary/ProjectSummary.tsx         |   6 +-
 ...licationEvaluationOverviewPage.stories.tsx |   7 +-
 .../ApplicationEvaluationOverviewPage.tsx     |   2 +-
 ...ubmitApplicationEvaluationPage.stories.tsx |   6 +-
 .../SubmitApplicationEvaluationPage.tsx       | 151 +---------------
 .../ViewApplicationEvaluationsPage.tsx        |  40 +++--
 src/tokens/colors.ts                          |   1 +
 13 files changed, 372 insertions(+), 165 deletions(-)
 create mode 100644 src/components/project/components/ApplicationSummary/ApplicationSummary.mdx
 create mode 100644 src/components/project/components/ApplicationSummary/ApplicationSummary.stories.tsx
 create mode 100644 src/components/project/components/ApplicationSummary/ApplicationSummary.tsx
 create mode 100644 src/components/project/components/ApplicationSummary/index.ts
 create mode 100644 src/components/project/components/ApplicationSummary/mocks.ts

diff --git a/src/components/pool/components/PoolSummary/PoolSummary.tsx b/src/components/pool/components/PoolSummary/PoolSummary.tsx
index e18d1092..77c2c0bb 100644
--- a/src/components/pool/components/PoolSummary/PoolSummary.tsx
+++ b/src/components/pool/components/PoolSummary/PoolSummary.tsx
@@ -107,7 +107,7 @@ export const PoolSummary = (pool: PoolSummaryProps) => {
         <div className="flex items-end gap-6">
           <Button
             icon={<Icon type={IconType.LINK} />}
-            className="border-gray-100 bg-white text-black shadow-sm"
+            className="border-grey-100 bg-white text-black shadow-sm"
             value="Round application"
             onClick={() => {
               navigator.clipboard.writeText(applyLink).then(
@@ -125,7 +125,7 @@ export const PoolSummary = (pool: PoolSummaryProps) => {
           />
           <Button
             icon={<Icon type={IconType.EXPLORER} />}
-            className="border-gray-100 bg-white text-black shadow-sm"
+            className="border-grey-100 bg-white text-black shadow-sm"
             value="View round"
             onClick={() => window.open(explorerLink, "_blank")}
           />
diff --git a/src/components/project/components/ApplicationSummary/ApplicationSummary.mdx b/src/components/project/components/ApplicationSummary/ApplicationSummary.mdx
new file mode 100644
index 00000000..53efc020
--- /dev/null
+++ b/src/components/project/components/ApplicationSummary/ApplicationSummary.mdx
@@ -0,0 +1,23 @@
+import { Meta, Title, Primary, Stories, Controls, Story } from "@storybook/blocks";
+
+import { ApplicationSummary } from "./ApplicationSummary";
+
+import * as ApplicationSummaryStories from "./ApplicationSummary.stories";
+
+<Meta of={ApplicationSummaryStories} />
+
+# ApplicationSummary
+
+The `ApplicationSummary` component provides a detailed view of a project, its current application, and any past applications.
+
+## Examples
+
+<Story of={ApplicationSummaryStories.Default} />
+
+# Controls
+
+<Controls />
+
+# Other variations
+
+<Stories />
diff --git a/src/components/project/components/ApplicationSummary/ApplicationSummary.stories.tsx b/src/components/project/components/ApplicationSummary/ApplicationSummary.stories.tsx
new file mode 100644
index 00000000..987d4c4f
--- /dev/null
+++ b/src/components/project/components/ApplicationSummary/ApplicationSummary.stories.tsx
@@ -0,0 +1,26 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import { ApplicationSummary } from "./ApplicationSummary";
+import { project, application, pastApplications } from "./mocks";
+
+const meta: Meta<typeof ApplicationSummary> = {
+  title: "Components/project/ApplicationSummary",
+  component: ApplicationSummary,
+  argTypes: {
+    project: { control: "object", description: "Metadata about the project." },
+    application: { control: "object", description: "Current application details." },
+    pastApplications: { control: "object", description: "List of past applications." },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ApplicationSummary>;
+
+export const Default: Story = {
+  args: {
+    project,
+    application,
+    pastApplications,
+  },
+};
diff --git a/src/components/project/components/ApplicationSummary/ApplicationSummary.tsx b/src/components/project/components/ApplicationSummary/ApplicationSummary.tsx
new file mode 100644
index 00000000..285c7592
--- /dev/null
+++ b/src/components/project/components/ApplicationSummary/ApplicationSummary.tsx
@@ -0,0 +1,169 @@
+import { ApplicationBadge, ApplicationBadgeStatus, IconLabel, ProjectSummary } from "@/components";
+import { PastApplication, ProjectApplication, ProjectMetadata } from "@/features/checker";
+import { DateFormat, formatDate } from "@/lib/dates/formatDate";
+import { Accordion, IconType, ListGrid, ListGridColumn, Markdown } from "@/primitives";
+
+export enum SummaryAccordians {
+  project = "project",
+  projectDetails = "projectDetails",
+  applicationAnswers = "applicationAnswers",
+  pastApplications = "pastApplications",
+}
+
+export const ApplicationSummary = ({
+  project,
+  application,
+  pastApplications,
+  hideAccordians,
+  className,
+}: {
+  project: ProjectMetadata;
+  application: ProjectApplication;
+  pastApplications: PastApplication[];
+  hideAccordians?: SummaryAccordians[];
+  className?: string;
+}) => {
+  const columns: ListGridColumn<PastApplication>[] = pastApplications
+    ? [
+        {
+          header: "Status",
+          key: "status",
+          width: "0.5fr",
+          render: (item) => {
+            let status;
+            // Determine the badge properties based on the status
+            if (item.status === "REJECTED") {
+              status = ApplicationBadgeStatus.Rejected;
+            } else if (item.status === "APPROVED") {
+              status = ApplicationBadgeStatus.Approved;
+            } else {
+              status = ApplicationBadgeStatus.Pending;
+            }
+            return <ApplicationBadge status={status} />;
+          },
+        },
+        {
+          header: "Date",
+          key: "createdAtBlock",
+          width: "1.2fr",
+          render: (item) => (
+            <span className="text-[16px]/[24px]">
+              {formatDate(new Date(item.statusSnapshots[0]?.updatedAt), DateFormat.FullDate24Hour)}
+            </span>
+          ),
+        },
+        {
+          header: "Round",
+          key: "name",
+          width: "1.8fr",
+          render: (item) => <p className="text-[16px]/[24px]">{item.round.roundMetadata.name}</p>,
+        },
+      ]
+    : [];
+
+  return (
+    <div className={`${className} flex w-full flex-col gap-4`}>
+      {!hideAccordians?.includes(SummaryAccordians.project) && (
+        <Accordion
+          header={
+            <IconLabel
+              type="default"
+              label={project.title}
+              iconType={IconType.GLOBE}
+              iconVariant="text-lg font-medium"
+            />
+          }
+          isOpen={true}
+          content={<ProjectSummary projectMetadata={project} application={application} />}
+          variant="default"
+          border="none"
+          padding="none"
+        />
+      )}
+
+      {!hideAccordians?.includes(SummaryAccordians.projectDetails) && (
+        <Accordion
+          header={
+            <IconLabel
+              type="default"
+              label="Project details"
+              iconType={IconType.CLIPBOARD_LIST}
+              iconVariant="text-lg font-medium"
+            />
+          }
+          content={<Markdown>{project.description}</Markdown>}
+          variant="default"
+          border="none"
+          padding="none"
+          isOpen={false}
+        />
+      )}
+
+      {!hideAccordians?.includes(SummaryAccordians.applicationAnswers) && (
+        <Accordion
+          header={
+            <IconLabel
+              type="default"
+              label="Application answers"
+              iconType={IconType.STAR}
+              iconVariant="text-lg font-medium"
+            />
+          }
+          content={
+            <div className="flex flex-col gap-4">
+              {application.metadata.application.answers.map((answer, index) => {
+                if (answer.encryptedAnswer || !answer.answer) {
+                  return null;
+                }
+                return (
+                  <div key={index} className="flex flex-col gap-2">
+                    <span className="font-ui-sans text-[16px]/[24px] font-bold">
+                      {answer.question}
+                    </span>
+                    <span className="font-ui-sans text-[16px]/[24px] font-normal">
+                      <Markdown>{answer.answer}</Markdown>
+                    </span>
+                  </div>
+                );
+              })}
+            </div>
+          }
+          variant="default"
+          border="none"
+          padding="none"
+          isOpen={false}
+        />
+      )}
+      {!hideAccordians?.includes(SummaryAccordians.pastApplications) && (
+        <Accordion
+          header={
+            <IconLabel
+              type="default"
+              label="Past applications"
+              iconType={IconType.INFORMATION_CIRCLE}
+              iconVariant="text-lg font-medium"
+            />
+          }
+          content={
+            pastApplications ? (
+              <div>
+                <ListGrid
+                  data={pastApplications}
+                  columns={columns}
+                  rowClassName="h-[72px]"
+                  getRowKey={(item: PastApplication) => `${item.id}-${item.roundId}`}
+                />
+              </div>
+            ) : (
+              <div>No past applications</div>
+            )
+          }
+          variant="default"
+          border="none"
+          padding="none"
+          isOpen={false}
+        />
+      )}
+    </div>
+  );
+};
diff --git a/src/components/project/components/ApplicationSummary/index.ts b/src/components/project/components/ApplicationSummary/index.ts
new file mode 100644
index 00000000..5a45212a
--- /dev/null
+++ b/src/components/project/components/ApplicationSummary/index.ts
@@ -0,0 +1 @@
+import "./ApplicationSummary";
diff --git a/src/components/project/components/ApplicationSummary/mocks.ts b/src/components/project/components/ApplicationSummary/mocks.ts
new file mode 100644
index 00000000..93ea3c28
--- /dev/null
+++ b/src/components/project/components/ApplicationSummary/mocks.ts
@@ -0,0 +1,101 @@
+import {
+  ProjectMetadata,
+  CheckerApplication,
+  ApplicationStatus,
+  PastApplication,
+} from "@/features/checker";
+
+export const project: ProjectMetadata = {
+  title: "Sample Project",
+  description: "An example project description to showcase ApplicationSummary.",
+  website: "https://example.com",
+  bannerImg: "sampleBannerCID",
+  logoImg: "sampleLogoCID",
+  projectTwitter: "exampleproject",
+  userGithub: "exampleuser",
+  projectGithub: "exampleproject",
+  credentials: {},
+  owners: [{ address: "0x1234567890abcdef1234567890abcdef12345678" }],
+  recipient: "0x1234567890abcdef1234567890abcdef12345678",
+  createdAt: 1672531200, // Timestamp for Jan 1, 2023
+  lastUpdated: 1675119600, // Timestamp for Feb 1, 2023
+};
+
+export const application: CheckerApplication = {
+  id: "application-123",
+  projectId: "project-123",
+  chainId: 1,
+  roundId: "round-1",
+  status: ApplicationStatus.APPROVED,
+  metadataCid: "bafybeihsamplemetadata",
+  metadata: {
+    signature: "0xsamplesignature",
+    application: {
+      round: "Round 1",
+      answers: [
+        {
+          type: "text",
+          hidden: false,
+          question: "What is the purpose of your project?",
+          questionId: 1,
+          answer: "To make the world a better place.",
+        },
+        {
+          type: "text",
+          hidden: false,
+          question: "Who is your target audience?",
+          questionId: 2,
+          answer: "Developers, creators, and tech enthusiasts.",
+        },
+      ],
+      project,
+      recipient: "0x1234567890abcdef1234567890abcdef12345678",
+    },
+  },
+  distributionTransaction: null,
+  totalAmountDonatedInUsd: 10000,
+  totalDonationsCount: 500,
+  uniqueDonorsCount: 100,
+  anchorAddress: "0xanchoraddress1234567890abcdef12345678",
+  statusSnapshots: [
+    {
+      status: ApplicationStatus.APPROVED,
+      updatedAtBlock: "123456",
+      updatedAt: "2023-01-01T00:00:00Z",
+    },
+  ],
+  canonicalProject: {
+    roles: [{ address: "0xroleaddress1234567890abcdef12345678" }],
+  },
+  alloApplicationId: "",
+  evaluations: [],
+};
+
+export const pastApplications: PastApplication[] = [
+  {
+    id: "past-1",
+    roundId: "round-1",
+    statusSnapshots: [
+      {
+        status: ApplicationStatus.APPROVED,
+        updatedAtBlock: "123456",
+        updatedAt: "2023-01-01T00:00:00Z",
+      },
+    ],
+    status: ApplicationStatus.APPROVED,
+    round: { roundMetadata: { name: "Round 1" } },
+  },
+  {
+    id: "past-2",
+    roundId: "round-2",
+    statusSnapshots: [
+      {
+        status: ApplicationStatus.REJECTED,
+        updatedAtBlock: "123457",
+        updatedAt: "2023-02-01T00:00:00Z",
+      },
+    ],
+    status: ApplicationStatus.REJECTED,
+    round: { roundMetadata: { name: "Round 2" } },
+  },
+];
diff --git a/src/components/project/components/ProjectSummary/ProjectSummary.tsx b/src/components/project/components/ProjectSummary/ProjectSummary.tsx
index 07f8819e..581a8192 100644
--- a/src/components/project/components/ProjectSummary/ProjectSummary.tsx
+++ b/src/components/project/components/ProjectSummary/ProjectSummary.tsx
@@ -3,8 +3,8 @@ import * as React from "react";
 import { IconLabel } from "@/components/IconLabel";
 // import { useCredentialverification } from "@/features/checker/hooks";
 import { ProjectApplicationForManager, ProjectMetadata } from "@/features/checker/services/allo";
-import { IconType } from "@/primitives/Icon";
 import { useCredentialVerification } from "@/hooks/useCredentialVerification";
+import { IconType } from "@/primitives/Icon";
 
 export interface ProjectSummaryProps {
   projectMetadata: ProjectMetadata;
@@ -40,7 +40,7 @@ export const ProjectSummary: React.FC<ProjectSummaryProps> = ({ projectMetadata,
       <div className="flex flex-col gap-4">
         {createdAt && (
           <IconLabel
-            className="text-gray-700"
+            className="text-grey-700"
             type="default"
             iconType={IconType.CALENDAR}
             label={appliedOnLabel}
@@ -48,7 +48,7 @@ export const ProjectSummary: React.FC<ProjectSummaryProps> = ({ projectMetadata,
         )}
         {(createdAt || lastUpdated) && (
           <IconLabel
-            className="text-gray-700"
+            className="text-grey-700"
             type="default"
             iconType={IconType.CALENDAR}
             label={lastEditedLabel}
diff --git a/src/features/checker/pages/ApplicationEvaluationOverviewPage/ApplicationEvaluationOverviewPage.stories.tsx b/src/features/checker/pages/ApplicationEvaluationOverviewPage/ApplicationEvaluationOverviewPage.stories.tsx
index 6d66f6f8..80561bd8 100644
--- a/src/features/checker/pages/ApplicationEvaluationOverviewPage/ApplicationEvaluationOverviewPage.stories.tsx
+++ b/src/features/checker/pages/ApplicationEvaluationOverviewPage/ApplicationEvaluationOverviewPage.stories.tsx
@@ -40,8 +40,9 @@ export const Default: Story = {
     },
   },
   args: {
-    chainId: 42161,
-    poolId: "609",
-    applicationId: "17",
+    chainId: 11155111,
+    poolId: "605",
+    applicationId: "1",
+    address: "0x0D1781F0b693b35939A49831A6C799B938Bd2F80",
   },
 };
diff --git a/src/features/checker/pages/ApplicationEvaluationOverviewPage/ApplicationEvaluationOverviewPage.tsx b/src/features/checker/pages/ApplicationEvaluationOverviewPage/ApplicationEvaluationOverviewPage.tsx
index 2e4a883e..fe74df2a 100644
--- a/src/features/checker/pages/ApplicationEvaluationOverviewPage/ApplicationEvaluationOverviewPage.tsx
+++ b/src/features/checker/pages/ApplicationEvaluationOverviewPage/ApplicationEvaluationOverviewPage.tsx
@@ -71,7 +71,7 @@ export const ApplicationEvaluationOverviewPage = ({
           avatarPosition="left"
         />
         <h1 className="text-3xl font-medium leading-9">{project.title}</h1>
-        <div className="h-0.5 bg-[#EAEAEA]" />
+        <div className="h-0.5 bg-grey-200" />
         <p className="leading-9 text-grey-900">
           Evaluate this project and see how others have evaluated this project.
         </p>
diff --git a/src/features/checker/pages/SubmitApplicationEvaluationPage/SubmitApplicationEvaluationPage.stories.tsx b/src/features/checker/pages/SubmitApplicationEvaluationPage/SubmitApplicationEvaluationPage.stories.tsx
index fc89c879..8f1a4af5 100644
--- a/src/features/checker/pages/SubmitApplicationEvaluationPage/SubmitApplicationEvaluationPage.stories.tsx
+++ b/src/features/checker/pages/SubmitApplicationEvaluationPage/SubmitApplicationEvaluationPage.stories.tsx
@@ -43,9 +43,9 @@ export const Default: Story = {
     },
   },
   args: {
-    chainId: 42161,
-    poolId: "609",
-    applicationId: "17",
+    chainId: 11155111,
+    poolId: "605",
+    applicationId: "1",
     address: "0x0D1781F0b693b35939A49831A6C799B938Bd2F80",
   },
   render: (args) => {
diff --git a/src/features/checker/pages/SubmitApplicationEvaluationPage/SubmitApplicationEvaluationPage.tsx b/src/features/checker/pages/SubmitApplicationEvaluationPage/SubmitApplicationEvaluationPage.tsx
index 3450a718..b8c38393 100644
--- a/src/features/checker/pages/SubmitApplicationEvaluationPage/SubmitApplicationEvaluationPage.tsx
+++ b/src/features/checker/pages/SubmitApplicationEvaluationPage/SubmitApplicationEvaluationPage.tsx
@@ -4,26 +4,19 @@ import { useEffect, useState } from "react";
 import { useQueryClient } from "@tanstack/react-query";
 import { Hex } from "viem";
 
-import { ApplicationBadge, ApplicationBadgeStatus } from "@/components/Badges";
 import { EvaluationForm } from "@/components/EvaluationForm/EvaluationForm";
-import { IconLabel } from "@/components/IconLabel";
 import { PoolSummary } from "@/components/pool/components/PoolSummary/PoolSummary";
+import { ApplicationSummary } from "@/components/project/components/ApplicationSummary/ApplicationSummary";
 import { ProjectBanner } from "@/components/project/components/ProjectBanner/ProjectBanner";
-import { ProjectSummary } from "@/components/project/components/ProjectSummary/ProjectSummary";
 import { useToast } from "@/hooks/use-toast";
-import { formatDate, DateFormat } from "@/lib/dates/formatDate";
-import { Accordion } from "@/primitives/Accordion";
 import { Button } from "@/primitives/Button";
 import { Icon, IconType } from "@/primitives/Icon";
-import { ListGrid, ListGridColumn } from "@/primitives/ListGrid";
-import { Markdown } from "@/primitives/Markdown/Markdown";
 
 import {
   useGetPastApplications,
   useInitialize,
   useApplicationOverviewEvaluations,
 } from "~checker/hooks";
-import { PastApplication } from "~checker/services/allo";
 import { goToApplicationEvaluationOverviewAction, useCheckerDispatchContext } from "~checker/store";
 import { EvaluationStatus, EvaluationBody } from "~checker/types";
 
@@ -100,45 +93,6 @@ export const SubmitApplicationEvaluationPage = ({
     heading: q.question,
   }));
 
-  const columns: ListGridColumn<PastApplication>[] = pastApplications
-    ? [
-        {
-          header: "Status",
-          key: "status",
-          width: "0.5fr",
-          render: (item) => {
-            let status;
-            // Determine the badge properties based on the status
-            if (item.status === "REJECTED") {
-              status = ApplicationBadgeStatus.Rejected;
-            } else if (item.status === "APPROVED") {
-              status = ApplicationBadgeStatus.Approved;
-            } else {
-              status = ApplicationBadgeStatus.Pending;
-            }
-
-            return <ApplicationBadge status={status} />;
-          },
-        },
-        {
-          header: "Date",
-          key: "createdAtBlock",
-          width: "1.2fr",
-          render: (item) => (
-            <span className="text-[16px]/[24px]">
-              {formatDate(new Date(item.statusSnapshots[0]?.updatedAt), DateFormat.FullDate24Hour)}
-            </span>
-          ),
-        },
-        {
-          header: "Round",
-          key: "name",
-          width: "1.8fr",
-          render: (item) => <p className="text-[16px]/[24px]">{item.round.roundMetadata.name}</p>,
-        },
-      ]
-    : [];
-
   const handleSubmit = ({
     type,
     selections,
@@ -216,103 +170,16 @@ export const SubmitApplicationEvaluationPage = ({
           avatarPosition="left"
         />
         <h1 className="text-3xl font-medium leading-9">Evaluate {project.title}</h1>
-        <div className="h-0.5 bg-[#EAEAEA]" />
+        <div className="h-0.5 bg-grey-200" />
         <div className="flex gap-2">
-          <div className="flex w-full max-w-[600px] flex-col gap-4">
-            <Accordion
-              header={
-                <IconLabel
-                  type="default"
-                  label={project.title}
-                  iconType={IconType.GLOBE}
-                  iconVariant="text-lg font-medium"
-                />
-              }
-              isOpen={true}
-              content={<ProjectSummary projectMetadata={project} application={application} />}
-              variant="default"
-              border="none"
-              padding="none"
-            />
-            <Accordion
-              header={
-                <IconLabel
-                  type="default"
-                  label="Project details"
-                  iconType={IconType.CLIPBOARD_LIST}
-                  iconVariant="text-lg font-medium"
-                />
-              }
-              content={<Markdown>{project.description}</Markdown>}
-              variant="default"
-              border="none"
-              padding="none"
-              isOpen={false}
-            />
-            <Accordion
-              header={
-                <IconLabel
-                  type="default"
-                  label="Application answers"
-                  iconType={IconType.STAR}
-                  iconVariant="text-lg font-medium"
-                />
-              }
-              content={
-                <div className="flex flex-col gap-4">
-                  {application.metadata.application.answers.map((answer, index) => {
-                    if (answer.encryptedAnswer || !answer.answer) {
-                      return null;
-                    }
-                    return (
-                      <div key={index} className="flex flex-col gap-2">
-                        <span className="font-ui-sans text-[16px]/[24px] font-bold">
-                          {answer.question}
-                        </span>
-                        <span className="font-ui-sans text-[16px]/[24px] font-normal">
-                          <Markdown>{answer.answer}</Markdown>
-                        </span>
-                      </div>
-                    );
-                  })}
-                </div>
-              }
-              variant="default"
-              border="none"
-              padding="none"
-              isOpen={false}
-            />
-            <Accordion
-              header={
-                <IconLabel
-                  type="default"
-                  label="Past applications"
-                  iconType={IconType.INFORMATION_CIRCLE}
-                  iconVariant="text-lg font-medium"
-                />
-              }
-              content={
-                pastApplications ? (
-                  <div>
-                    <ListGrid
-                      data={pastApplications}
-                      columns={columns}
-                      rowClassName="h-[72px]"
-                      getRowKey={(item: PastApplication) => `${item.id}-${item.roundId}`}
-                    />
-                  </div>
-                ) : (
-                  <div>No past applications</div>
-                )
-              }
-              variant="default"
-              border="none"
-              padding="none"
-              isOpen={false}
-            />
-          </div>
+          <ApplicationSummary
+            project={project}
+            application={application}
+            pastApplications={pastApplications || []}
+            className="max-w-[600px]"
+          />
 
-          <div className="border-gray-100 rounded-[20px] border p-5">
+          <div className="rounded-[20px] border border-grey-100 p-5">
             <EvaluationForm groups={groups} onSubmit={handleSubmit} />
           </div>
         </div>
diff --git a/src/features/checker/pages/ViewApplicationEvaluationsPage/ViewApplicationEvaluationsPage.tsx b/src/features/checker/pages/ViewApplicationEvaluationsPage/ViewApplicationEvaluationsPage.tsx
index 5c12c7fb..2ff257c8 100644
--- a/src/features/checker/pages/ViewApplicationEvaluationsPage/ViewApplicationEvaluationsPage.tsx
+++ b/src/features/checker/pages/ViewApplicationEvaluationsPage/ViewApplicationEvaluationsPage.tsx
@@ -1,12 +1,16 @@
 import React from "react";
 
 import { ProjectBanner, ProjectSummary } from "@/components";
+import {
+  ApplicationSummary,
+  SummaryAccordians,
+} from "@/components/project/components/ApplicationSummary/ApplicationSummary";
 import { useToast } from "@/hooks/use-toast";
 import { capitalizeWord } from "@/lib/utils";
 import { Badge, Button, Icon, IconType } from "@/primitives";
 
 import { ReviewDropdownList } from "~checker/components";
-import { useApplicationEvaluations } from "~checker/hooks";
+import { useApplicationEvaluations, useGetPastApplications } from "~checker/hooks";
 import { getExplorerUrl } from "~checker/utils";
 
 export interface ViewApplicationEvaluationsPageProps {
@@ -23,6 +27,8 @@ export const ViewApplicationEvaluationsPage: React.FC<ViewApplicationEvaluations
   const { toast } = useToast();
   const { data, isLoading, error } = useApplicationEvaluations(chainId, poolId, applicationId);
 
+  const { data: pastApplications } = useGetPastApplications(chainId, poolId, applicationId);
+
   if (isLoading) return;
   if (error) return <div>Error loading evaluations</div>;
   if (!data) return;
@@ -81,22 +87,34 @@ export const ViewApplicationEvaluationsPage: React.FC<ViewApplicationEvaluations
           </div>
         </div>
       </div>
-      <div className="h-0.5 bg-[#EAEAEA]" />
+      <div className="h-0.5 bg-grey-200" />
       <div className="flex gap-2">
         <Badge className="font-semibold" variant={reviewStatusBadgeVariant}>
           {capitalizeWord(data?.application.status)}
         </Badge>
       </div>
-      <ProjectSummary projectMetadata={project} application={data?.application} />
-      <div className="h-0.5 bg-[#EAEAEA]" />
-      {data?.applicationEvaluations.length > 0 ? (
-        <ReviewDropdownList evaluations={data?.applicationEvaluations} />
-      ) : (
-        <div className="leading-7">
-          This application is still pending evaluation submission. Check back here soon for your
-          results!
+      <div className="flex flex-col gap-6">
+        <ProjectSummary projectMetadata={project} application={data?.application} />
+
+        <ApplicationSummary
+          project={project}
+          application={data.application}
+          pastApplications={pastApplications || []}
+          hideAccordians={[SummaryAccordians.project]}
+        />
+
+        <div>
+          <div className="h-0.5 bg-grey-200" />
+          {data?.applicationEvaluations.length > 0 ? (
+            <ReviewDropdownList evaluations={data?.applicationEvaluations} />
+          ) : (
+            <div className="leading-7">
+              This application is still pending evaluation submission. Check back here soon for your
+              results!
+            </div>
+          )}
         </div>
-      )}
+      </div>
     </div>
   );
 };
diff --git a/src/tokens/colors.ts b/src/tokens/colors.ts
index c61c9760..fc4c4eb2 100644
--- a/src/tokens/colors.ts
+++ b/src/tokens/colors.ts
@@ -7,6 +7,7 @@ const white = "#ffffff";
 const grey: ColorSet = {
   "50": "#F7F7F7",
   "100": "#ECEDED",
+  "200": "#EAEAEA",
   "300": "#C8CCCC",
   "500": "#959C9C",
   "700": "#555555",