From 7d87473f666a814a6ebd4403a5d8565c85337c64 Mon Sep 17 00:00:00 2001
From: HussainKhanSherwani <ghulamhussainsherwani@gmail.com>
Date: Mon, 10 Feb 2025 17:07:15 +0500
Subject: [PATCH] removed extra spacing added icons

---
 .../[projectId]/reports/[reportType]/page.tsx | 23 +++++++--
 .../projects/ProductDetailsPage.tsx           | 50 +++++++------------
 .../components/projects/ProjectInfoTable.tsx  | 45 +++++++++++++++++
 3 files changed, 82 insertions(+), 36 deletions(-)
 create mode 100644 insights-ui/src/components/projects/ProjectInfoTable.tsx

diff --git a/insights-ui/src/app/crowd-funding/projects/[projectId]/reports/[reportType]/page.tsx b/insights-ui/src/app/crowd-funding/projects/[projectId]/reports/[reportType]/page.tsx
index 9f35d2d4b..d3d81f007 100644
--- a/insights-ui/src/app/crowd-funding/projects/[projectId]/reports/[reportType]/page.tsx
+++ b/insights-ui/src/app/crowd-funding/projects/[projectId]/reports/[reportType]/page.tsx
@@ -5,6 +5,7 @@ import remarkGfm from 'remark-gfm';
 import { BreadcrumbsOjbect } from '@dodao/web-core/components/core/breadcrumbs/BreadcrumbsWithChevrons';
 import { Metadata } from 'next';
 import Breadcrumbs from '@/components/ui/Breadcrumbs';
+import { ProjectDetails, SpiderGraph } from '@/types/project/project';
 
 export async function generateMetadata({ params }: { params: Promise<{ projectId: string; reportType: string }> }): Promise<Metadata> {
   const { projectId, reportType } = await params;
@@ -63,9 +64,13 @@ export async function generateMetadata({ params }: { params: Promise<{ projectId
 export default async function ReportDetailPage({ params }: { params: Promise<{ projectId: string; reportType: string }> }) {
   const { projectId, reportType } = await params;
 
-  const res = await fetch(`${getBaseUrl()}/api/crowd-funding/projects/${projectId}/reports/${reportType}`);
-  const data: { reportDetail: string } = await res.json();
+  const reportResponse = await fetch(`${getBaseUrl()}/api/crowd-funding/projects/${projectId}/reports/${reportType}`);
+  const reportData: { reportDetail: string } = await reportResponse.json();
 
+  const projectResponse = await fetch(`${getBaseUrl()}/api/crowd-funding/projects/${projectId}`);
+  const projectData: { projectDetails: ProjectDetails; spiderGraph: SpiderGraph | {} } = await projectResponse.json();
+
+  const report = projectData.projectDetails.reports[reportType];
   const breadcrumbs: BreadcrumbsOjbect[] = [
     {
       name: projectId,
@@ -89,7 +94,17 @@ export default async function ReportDetailPage({ params }: { params: Promise<{ p
         </div>
         <div className="block-bg-color p-8">
           <div className="overflow-x-auto">
-            {data.reportDetail ? (
+            {report.performanceChecklist?.length && (
+              <ul className="list-disc mt-2">
+                {report.performanceChecklist.map((item, index) => (
+                  <li key={index} className="mb-1 flex items-start">
+                    <span className="mr-2">{item.score === 1 ? '✅' : '❌'}</span>
+                    <span>{item.checklistItem}</span>
+                  </li>
+                ))}
+              </ul>
+            )}
+            {reportData.reportDetail ? (
               <>
                 <Markdown
                   className="markdown"
@@ -99,7 +114,7 @@ export default async function ReportDetailPage({ params }: { params: Promise<{ p
                     td: ({ node, ...props }) => <td className="border border-color px-4 py-2" {...props} />,
                   }}
                 >
-                  {data.reportDetail}
+                  {reportData.reportDetail}
                 </Markdown>
               </>
             ) : (
diff --git a/insights-ui/src/components/projects/ProductDetailsPage.tsx b/insights-ui/src/components/projects/ProductDetailsPage.tsx
index 92b604b9f..ef984924c 100644
--- a/insights-ui/src/components/projects/ProductDetailsPage.tsx
+++ b/insights-ui/src/components/projects/ProductDetailsPage.tsx
@@ -1,11 +1,12 @@
 import ProjectActionsDropdown from '@/components/projects/ProjectActionsDropdown';
 import ReportActionsDropdown from '@/components/reports/ReportActionsDropdown';
-import { ProjectDetails, REPORT_TYPES_TO_DISPLAY, ReportInterfaceWithType, SpiderGraph, SpiderGraphPie } from '@/types/project/project';
+import { ProjectDetails, REPORT_TYPES_TO_DISPLAY, ReportInterfaceWithType, ReportType, SpiderGraph, SpiderGraphPie } from '@/types/project/project';
 import { getReportName } from '@/util/report-utils';
 import Link from 'next/link';
 import React from 'react';
 import RadarChart from '../ui/RadarChart';
 import PrivateWrapper from '../auth/PrivateWrapper';
+import ProjectInfoTable from './ProjectInfoTable';
 
 interface ProjectDetailPageProps {
   projectId: string;
@@ -20,6 +21,16 @@ export default function ProjectDetailPage({ projectId, initialProjectDetails, pr
       type: r,
     })
   );
+  const reportIcons: { [key in ReportType]: string } = {
+    founder_and_team: '👨‍💼', // People/Team
+    market_opportunity: '📈', // Growth/Market
+    traction: '🚀', // Growth/Success
+    execution_and_speed: '⏱️', // Speed/Execution
+    valuation: '💰', // Finance/Value
+    financial_health: '📊',
+    [ReportType.GENERAL_INFO]: '',
+    [ReportType.RELEVANT_LINKS]: '',
+  };
 
   const spiderGraph: SpiderGraph = Object.fromEntries(
     reports.map((report): [string, SpiderGraphPie] => {
@@ -35,7 +46,7 @@ export default function ProjectDetailPage({ projectId, initialProjectDetails, pr
 
   console.log('projectDetails.reports', JSON.stringify(projectDetails.reports, null, 2));
   return (
-    <div className="py-24 sm:py-32 text-color">
+    <div className="text-color">
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
         <div className="mx-auto  lg:text-center">
           <div className="flex justify-end">
@@ -47,42 +58,17 @@ export default function ProjectDetailPage({ projectId, initialProjectDetails, pr
           <div className="max-w-lg mx-auto">
             <RadarChart data={spiderGraph} />
           </div>
-          <div className="mt-6 border-t border-gray-100 text-left">
-            <dl className="divide-y text-color">
-              <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
-                <dt className="text-sm/6 font-medium ">Crowd Funding Link</dt>
-                <dd className="mt-1 text-sm/6  sm:col-span-2 sm:mt-0">{initialProjectDetails.projectInfoInput.crowdFundingUrl}</dd>
-              </div>
-              <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
-                <dt className="text-sm/6 font-medium ">Website Link</dt>
-                <dd className="mt-1 text-sm/6 sm:col-span-2 sm:mt-0">{initialProjectDetails.projectInfoInput.websiteUrl}</dd>
-              </div>
-              <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
-                <dt className="text-sm/6 font-medium ">SEC Filing Link</dt>
-                <dd className="mt-1 text-sm/6 sm:col-span-2 sm:mt-0">{initialProjectDetails.projectInfoInput.secFilingUrl}</dd>
-              </div>
-              {initialProjectDetails.projectInfoInput.additionalUrls && (
-                <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
-                  <dt className="text-sm/6 font-medium ">Additional Links</dt>
-                  {initialProjectDetails.projectInfoInput.additionalUrls.map((url, index) => (
-                    <dd key={index} className="mt-1 text-sm/6 sm:col-span-2 sm:mt-0">
-                      {url}
-                    </dd>
-                  ))}
-                </div>
-              )}
-            </dl>
-          </div>
-          <div className="mx-auto mt-16 sm:mt-20 lg:mt-24 text-left">
-            <dl className="grid max-w-xl grid-cols-1 gap-x-8 gap-y-10 lg:max-w-none lg:grid-cols-2 lg:gap-y-16">
+          <ProjectInfoTable initialProjectDetails={initialProjectDetails} />
+          <div className="mx-auto mt-12 text-left">
+            <dl className="grid max-w-xl grid-cols-1 gap-x-8 gap-y-8 lg:max-w-none lg:grid-cols-2 ">
               {REPORT_TYPES_TO_DISPLAY.map((reportType) => {
                 const report = projectDetails.reports[reportType];
                 return (
                   <div key={reportType} className="relative text-left">
                     <dt>
                       <div className="absolute left-0 top-0 flex size-10 items-center justify-center heading-color rounded-lg">
-                        <span aria-hidden="true" className="size-6">
-                          📊
+                        <span aria-hidden="true" className="size-6 text-blue-200">
+                          {reportIcons[reportType]}
                         </span>
                       </div>
                       <div className="flex justify-between font-semibold">
diff --git a/insights-ui/src/components/projects/ProjectInfoTable.tsx b/insights-ui/src/components/projects/ProjectInfoTable.tsx
new file mode 100644
index 000000000..887caa5ed
--- /dev/null
+++ b/insights-ui/src/components/projects/ProjectInfoTable.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+
+interface ProjectInfoInput {
+  crowdFundingUrl: string;
+  websiteUrl: string;
+  secFilingUrl: string;
+  additionalUrls?: string[];
+}
+
+interface ProjectInfoTableProps {
+  initialProjectDetails: {
+    projectInfoInput: ProjectInfoInput;
+  };
+}
+
+export default function ProjectInfoTable({ initialProjectDetails }: ProjectInfoTableProps) {
+  return (
+    <div className="border-b border-gray-100 text-left">
+      <dl className="divide-y text-color">
+        <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+          <dt className="text-sm/6 font-medium">Crowd Funding Link</dt>
+          <dd className="mt-1 text-sm/6 sm:col-span-2 sm:mt-0">{initialProjectDetails.projectInfoInput.crowdFundingUrl}</dd>
+        </div>
+        <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+          <dt className="text-sm/6 font-medium">Website Link</dt>
+          <dd className="mt-1 text-sm/6 sm:col-span-2 sm:mt-0">{initialProjectDetails.projectInfoInput.websiteUrl}</dd>
+        </div>
+        <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+          <dt className="text-sm/6 font-medium">SEC Filing Link</dt>
+          <dd className="mt-1 text-sm/6 sm:col-span-2 sm:mt-0">{initialProjectDetails.projectInfoInput.secFilingUrl}</dd>
+        </div>
+        {initialProjectDetails.projectInfoInput.additionalUrls && (
+          <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+            <dt className="text-sm/6 font-medium">Additional Links</dt>
+            {initialProjectDetails.projectInfoInput.additionalUrls.map((url, index) => (
+              <dd key={index} className="mt-1 text-sm/6 sm:col-span-2 sm:mt-0">
+                {url}
+              </dd>
+            ))}
+          </div>
+        )}
+      </dl>
+    </div>
+  );
+}