updated image path

insights-ui/src/app/api/upload/route.ts

@@ -19,7 +19,7 @@ async function postHandler(req: NextRequest): Promise<NextResponse<{ url: string
   const fileType = req.headers.get('x-file-type');
 
   const bucketName = InsightsConstants.S3_BUCKET_NAME;
-  const key = `${InsightsConstants.CROWDFUND_ANALYSIS_PREFIX}/images/${fileName}`;
+  const key = `images/${fileName}`;
 
   const uploadParams = {
     Bucket: bucketName,

insights-ui/src/app/page.tsx

@@ -1,7 +1,10 @@
-import ProjectTable from '@/components/projects/ProjectTable';
 import getBaseUrl from '@dodao/web-core/utils/api/getBaseURL';
+import { Grid4Cols } from '@dodao/web-core/components/core/grids/Grid4Cols';
 import React from 'react';
 import PageWrapper from '@dodao/web-core/components/core/page/PageWrapper';
+import ProjectSummaryCard from '@/components/projects/ProjectSummaryCard';
+import AddProjectButton from '@/components/ui/AddProjectButton';
+import { isAdmin } from '@/util/auth/isAdmin';
 
 export default async function Home() {
   const apiUrl = `${getBaseUrl()}/api/crowd-funding/projects`;
@@ -17,7 +20,14 @@ export default async function Home() {
             <p className="my-2 text-sm text-color">A list of all the projects.</p>
           </div>
         </div>
-        {data.projectIds.length > 0 ? <ProjectTable projectIds={data.projectIds} /> : <div className="text-color text-center">No projects to show</div>}
+        {isAdmin() && <AddProjectButton />}
+        <Grid4Cols>
+          {data.projectIds!.length > 0 ? (
+            data.projectIds.map((projectId: string) => <ProjectSummaryCard key={projectId} projectId={projectId} />)
+          ) : (
+            <div className="text-color text-center">No projects to show</div>
+          )}
+        </Grid4Cols>
       </div>
     </PageWrapper>
   );

insights-ui/src/components/projects/ProjectSummaryCard.tsx

@@ -0,0 +1,90 @@
+'use client';
+import { ProjectDetails } from '@/types/project/project';
+import { useRouter } from 'next/navigation';
+import Thumbnail from '@dodao/web-core/components/app/Thumbnail';
+import Card from '@dodao/web-core/components/core/card/Card';
+import { shorten } from '@dodao/web-core/utils/utils';
+import Link from 'next/link';
+import React from 'react';
+import { InsightsConstants } from '@/util/insights-constants';
+import { regenerateReport } from '@/util/regenerate';
+import EllipsisDropdown from '@dodao/web-core/components/core/dropdowns/EllipsisDropdown';
+import { isAdmin } from '@/util/auth/isAdmin';
+
+interface ProjectSummaryCardProps {
+  projectId: string;
+}
+const MODEL_OPTIONS = [
+  { key: 'gpt-4o', label: 'gpt-4o' },
+  { key: 'gpt-4o-mini', label: 'gpt-4o-mini' },
+];
+
+const ProjectSummaryCard: React.FC<ProjectSummaryCardProps> = ({ projectId }) => {
+  const router = useRouter();
+
+  const tableActions = {
+    items: [
+      { key: 'view', label: 'View' },
+      { key: 'edit', label: 'Edit' },
+      ...MODEL_OPTIONS.map((model) => ({
+        key: `regenerate_${model.key}`,
+        label: `Regenerate with ${model.label}`,
+      })),
+    ],
+    onSelect: async (key: string, item: string) => {
+      if (key === 'view') {
+        router.push(`/crowd-funding/projects/${item}`);
+      } else if (key === 'edit') {
+        router.push(`/crowd-funding/projects/${item}/edit`);
+      } else if (key.startsWith('regenerate_')) {
+        const model = key.replace('regenerate_', '');
+        const { success, message } = await regenerateReport(item, model);
+        success ? router.refresh() : alert(message);
+      }
+    },
+  };
+
+  function formatProjectName(projectId: string): string {
+    return projectId
+      .trim() // Remove extra spaces
+      .replace(/_/g, ' ') // Replace underscores with spaces
+      .replace(/\b\w/g, (char) => char.toUpperCase()); // Capitalize each word
+  }
+
+  return (
+    <Card>
+      <Link href={`/crowd-funding/projects/${projectId}`} className="card blog-card w-inline-block h-full w-full">
+        <div className="relative w-full">
+          {
+            <div className="absolute top-2 right-2 py-2 pl-3 pr-4 text-right font-medium sm:pr-0">
+              <EllipsisDropdown
+                items={tableActions.items}
+                onSelect={(key) => {
+                  tableActions.onSelect(key, projectId);
+                }}
+              />
+            </div>
+          }
+
+          <Thumbnail
+            src={`https://${InsightsConstants.S3_BUCKET_NAME}.s3.us-east-1.amazonaws.com/images/${projectId}`}
+            entityId={projectId}
+            title={projectId}
+            size="350"
+            className="mb-1 w-full"
+            max_tile_height="200px"
+            big_tile={true}
+            imageClass="w-full"
+          />
+        </div>
+
+        <div className="p-4 text-center">
+          <h2 className="text-color text-base font-bold whitespace-nowrap overflow-hidden overflow-ellipsis">{shorten(formatProjectName(projectId), 32)}</h2>
+          <p className="text-color break-words mb-2 h-65px overflow-ellipsis overflow-hidden text-sm">{shorten(`This is a Crowd Funding Project`, 300)}</p>
+        </div>
+      </Link>
+    </Card>
+  );
+};
+
+export default ProjectSummaryCard;

insights-ui/src/components/ui/AddProjectButton.tsx

@@ -0,0 +1,25 @@
+'use client';
+import React from 'react';
+import { useRouter } from 'next/navigation';
+import Button from '@dodao/web-core/components/core/buttons/Button';
+
+const AddProjectButton: React.FC = () => {
+  const router = useRouter();
+
+  return (
+    <div className="flex justify-end">
+      <Button
+        onClick={() => {
+          router.push(`/crowd-funding/projects/create`);
+        }}
+        className="m-4"
+        variant="contained"
+        primary
+      >
+        Add New Project
+      </Button>
+    </div>
+  );
+};
+
+export default AddProjectButton;

insights-ui/src/util/upload-image.ts

@@ -3,7 +3,7 @@ import { InsightsConstants } from './insights-constants';
 export async function uploadImageToS3(file: File, fileName: string) {
   const fileBuffer = await file.arrayBuffer();
   const bucketName = InsightsConstants.S3_BUCKET_NAME;
-  const key = `${InsightsConstants.CROWDFUND_ANALYSIS_PREFIX}/images/${fileName}`;
+  const key = `images/${fileName}`;
   console.log('File Buffer:', fileBuffer);
   const response = await fetch('/api/upload', {
     method: 'POST',

shared/web-core/src/components/app/Thumbnail.tsx

@@ -21,7 +21,9 @@ const Thumbnail: React.FC<ThumbnailProps> = ({ big_tile = false, max_tile_height
   const imgSrc = url ? getCDNImageUrl(url) : null;
   const address = entityId ? formatBytes32String(entityId.slice(0, 24)) : '';
 
-  let thumbnailClass = `${styles.thumbnailImage} ${big_tile ? styles.bigTile : ''} ${max_tile_height ? styles.dynamicHeight : ''} ${imageClass || ''}`;
+  let thumbnailClass = `${styles.thumbnailImage} ${big_tile ? styles.bigTile : ''} ${max_tile_height ? styles.dynamicHeight : ''} ${
+    imageClass || ''
+  } rounded-t-xl`;
 
   return (
     <div className={`flex justify-center ${big_tile ? 'w-full' : ''} ${className || ''}`}>