Refactor component and page structure for responsiveness and add remote image patterns

src/app/business/apply/page.tsx

@@ -1,8 +1,39 @@
 "use client";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { createSupabaseClient } from "@/lib/supabase/clientComponentClient";
+import { useEffect, useState } from "react";
 
 export default function Apply() {
+  let supabase = createSupabaseClient();
+  const [industry, setIndustry] = useState<string[]>([]);
+
+  const fetchIndustry = async () => {
+    let { data: BusinessType, error } = await supabase
+      .from("BusinessType")
+      .select("value");
+
+    if (error) {
+      console.error(error);
+    } else {
+      if (BusinessType) {
+        console.table();
+        setIndustry(BusinessType.map((item) => item.value));
+      }
+    }
+  };
+  useEffect(() => {
+    fetchIndustry();
+  }, []);
   return (
     <div>
       <div className="grid grid-flow-row auto-rows-max w-full h-52 md:h-92 bg-gray-100 dark:bg-gray-800 p-5">
@@ -27,10 +58,30 @@ export default function Apply() {
         </p>
         {/* form */}
         <div className="ml-96 mt-5">
+          {/* company name */}
           <Label htmlFor="companyName" className="font-bold text-lg">
             Company name
           </Label>
-          <Input type="email" id="companyName" className="mt-2 w-96" />
+          <Input type="text" id="companyName" className="mt-2 w-96" />
+          <div className="mt-5">
+            {/* industry */}
+            <Label htmlFor="industry" className="font-bold text-lg mt-10">
+              Industry
+            </Label>
+            <Select>
+              <SelectTrigger className="w-[180px]">
+                <SelectValue placeholder="Select an industry" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectGroup>
+                  <SelectLabel>Industry</SelectLabel>
+                  {industry.map((i) => (
+                    <SelectItem value={i}>{i}</SelectItem>
+                  ))}
+                </SelectGroup>
+              </SelectContent>
+            </Select>
+          </div>
         </div>
       </div>
     </div>

src/app/find/page.tsx

@@ -3,12 +3,17 @@
 import { useSearchParams } from "next/navigation";
 import { SupabaseClient } from "@supabase/supabase-js";
 import { createSupabaseClient } from "@/lib/supabase/clientComponentClient";
-import { dehydrate, HydrationBoundary, QueryClient } from "@tanstack/react-query";
 import { useQuery } from "@supabase-cache-helpers/postgrest-react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { ExtendableCard } from "@/components/extendableCard";
 import { Separator } from "@/components/ui/separator";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 
 interface ProjectInvestmentDetail {
   minInvestment: number;
@@ -35,7 +40,10 @@ interface Business {
 }
 
 function getBusinesses(client: SupabaseClient, query: string | null) {
-  return client.from("Business").select("id, businessName, joinedDate").ilike("businessName", `%${query}%`);
+  return client
+    .from("Business")
+    .select("id, businessName, joinedDate")
+    .ilike("businessName", `%${query}%`);
 }
 
 function getProjects(client: SupabaseClient, businessIds: string[]) {
@@ -59,11 +67,17 @@ function getProjects(client: SupabaseClient, businessIds: string[]) {
 }
 
 function getTags(client: SupabaseClient, projectIds: string[]) {
-  return client.from("ItemTag").select("itemId, Tag (value)").in("itemId", projectIds);
+  return client
+    .from("ItemTag")
+    .select("itemId, Tag (value)")
+    .in("itemId", projectIds);
 }
 
 function getInvestmentCounts(client: SupabaseClient, projectIds: string[]) {
-  return client.from("InvestmentDeal").select("*", { count: "exact", head: true }).in("projectId", projectIds);
+  return client
+    .from("InvestmentDeal")
+    .select("*", { count: "exact", head: true })
+    .in("projectId", projectIds);
 }
 
 export default function Find() {
@@ -84,24 +98,34 @@ export default function Find() {
     data: projects,
     isLoading: isLoadingProjects,
     error: projectError,
-  } = useQuery(getProjects(supabase, businessIds), { enabled: businessIds.length > 0 });
+  } = useQuery(getProjects(supabase, businessIds), {
+    enabled: businessIds.length > 0,
+  });
 
   const projectIds = projects?.map((p) => p.id) || [];
   const {
     data: tags,
     isLoading: isLoadingTags,
     error: tagError,
-  } = useQuery(getTags(supabase, projectIds), { enabled: projectIds.length > 0 });
+  } = useQuery(getTags(supabase, projectIds), {
+    enabled: projectIds.length > 0,
+  });
 
   const {
     data: investmentCounts,
     isLoading: isLoadingInvestments,
     error: investmentError,
-  } = useQuery(getInvestmentCounts(supabase, projectIds), { enabled: projectIds.length > 0 });
+  } = useQuery(getInvestmentCounts(supabase, projectIds), {
+    enabled: projectIds.length > 0,
+  });
 
   // -----
 
-  const isLoading = isLoadingBusinesses || isLoadingProjects || isLoadingTags || isLoadingInvestments;
+  const isLoading =
+    isLoadingBusinesses ||
+    isLoadingProjects ||
+    isLoadingTags ||
+    isLoadingInvestments;
   const error = businessError || projectError || tagError || investmentError;
 
   const results: Business[] =
@@ -112,8 +136,13 @@ export default function Find() {
           ?.filter((project) => project.businessId === business.id)
           .map((project) => ({
             ...project,
-            tags: tags?.filter((tag) => tag.itemId === project.id).map((tag) => tag.Tag.value) || [],
+            tags:
-            investmentCount: investmentCounts?.find((ic) => ic.projectId === project.id)?.count || 0,
+              tags
+                ?.filter((tag) => tag.itemId === project.id)
+                .map((tag) => tag.Tag.value) || [],
+            investmentCount:
+              investmentCounts?.find((ic) => ic.projectId === project.id)
+                ?.count || 0,
           })) || [],
     })) || [];
 
@@ -151,7 +180,10 @@ export default function Find() {
                 <Card className="w-full">
                   <CardHeader>
                     <CardTitle>{business.businessName}</CardTitle>
-                    <CardDescription>Joined Date: {new Date(business.joinedDate).toLocaleDateString()}</CardDescription>
+                    <CardDescription>
+                      Joined Date:{" "}
+                      {new Date(business.joinedDate).toLocaleDateString()}
+                    </CardDescription>
                   </CardHeader>
                   <CardContent>
                     {business.Projects.map((project) => (
@@ -161,10 +193,17 @@ export default function Find() {
                         description={project.projectName}
                         joinDate={project.projectName}
                         location={"Bangkok"}
-                        minInvestment={project.ProjectInvestmentDetail[0]?.minInvestment}
+                        minInvestment={
-                        totalInvestor={project.ProjectInvestmentDetail[0]?.totalInvestment}
+                          project.ProjectInvestmentDetail[0]?.minInvestment
-                        totalRaised={project.ProjectInvestmentDetail[0]?.targetInvestment}
+                        }
+                        totalInvestor={
+                          project.ProjectInvestmentDetail[0]?.totalInvestment
+                        }
+                        totalRaised={
+                          project.ProjectInvestmentDetail[0]?.targetInvestment
+                        }
                         tags={[]}
+                        imageUri={null}
                       />
                     ))}
                   </CardContent>