Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

removed extra spacing added icons #675

Merged
merged 1 commit into from
Feb 10, 2025
Merged

removed extra spacing added icons #675

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 19 additions & 4 deletions insights-ui/src/app/crowd-funding/projects/[projectId]/reports/[reportType]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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,
Expand All @@ -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"
Expand All @@ -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>
</>
) : (
Expand Down
50 changes: 18 additions & 32 deletions insights-ui/src/components/projects/ProductDetailsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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] => {
Expand All @@ -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">
Expand All @@ -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">
Expand Down
45 changes: 45 additions & 0 deletions insights-ui/src/components/projects/ProjectInfoTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
}