feat: add business and project element to business profile

src/app/(user)/profile/[uid]/BusinessProfile.tsx

@@ -0,0 +1,74 @@
+import { getBusinessByUserId } from "@/lib/data/businessQuery";
+import { createSupabaseClient } from "@/lib/supabase/serverComponentClient";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+
+export const BusinessProfile = async ({ userId }: { userId: string }) => {
+  const supabase = createSupabaseClient();
+  const { data, error } = await getBusinessByUserId(supabase, userId);
+  if (error) {
+    return (
+      <Card className="text-center">
+        <CardHeader>
+          <CardTitle>Error Loading Data</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p>Can't load business data</p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (!data) {
+    return (
+      <Card className="text-center">
+        <CardHeader>
+          <CardTitle>No Business Found</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p>This business account doesn't have businesses</p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <div className="container max-w-screen-xl px-4">
+      <Card className="mb-6 shadow-md rounded-lg bg-white">
+        <CardHeader>
+          <div className="flex flex-col sm:flex-row justify-between items-center">
+            <div className="text-center sm:text-left">
+              <CardTitle className="text-2xl font-semibold">{data.business_name}</CardTitle>
+              <CardDescription className="text-md text-gray-600">{data.business_type}</CardDescription>
+            </div>
+            <div className="mt-4 sm:mt-0">
+              <p className="text-lg text-gray-700">
+                <strong>Location:</strong> {data.location}
+              </p>
+              <p className="text-lg text-gray-700">
+                <strong>Joined on:</strong> {new Date(data.joined_date).toLocaleDateString()}
+              </p>
+            </div>
+          </div>
+        </CardHeader>
+        <Separator />
+        <CardContent className="py-3">
+          <div className="grid gap-4">
+            <div>
+              <p className="text-md font-semibold text-gray-800">Business ID:</p>
+              <p className="text-md text-gray-600">{data.business_id}</p>
+            </div>
+            <div>
+              <p className="text-md font-semibold text-gray-800">Business Type:</p>
+              <p className="text-md text-gray-600">{data.business_type}</p>
+            </div>
+            <div>
+              <p className="text-md font-semibold text-gray-800">User ID:</p>
+              <p className="text-md text-gray-600">{data.user_id}</p>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};

src/app/(user)/profile/[uid]/ProjectProfile.tsx

@@ -0,0 +1,66 @@
+import { getProjectByUserId } from "@/lib/data/projectQuery";
+import { createSupabaseClient } from "@/lib/supabase/serverComponentClient";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+import { Button } from "@/components/ui/button";
+import Link from "next/link";
+
+export const ProjectProfileSection = async ({ userId }: { userId: string }) => {
+  const supabase = createSupabaseClient();
+  const { data, error } = await getProjectByUserId(supabase, userId);
+
+  if (error) {
+    return (
+      <Card className="text-center">
+        <CardHeader>
+          <CardTitle>Error Loading Data</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p>Can't load business data</p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (!data || data.length === 0) {
+    return (
+      <Card className="text-center">
+        <CardHeader>
+          <CardTitle>No Project Found</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p>This business doesn't have any projects</p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <div className="container max-w-screen-xl px-4">
+      <div className="overflow-y-auto max-h-screen flex flex-col gap-6">
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
+          {data.map((project) => (
+            <Card key={project.id} className="shadow-lg rounded-lg bg-white overflow-hidden">
+              <CardHeader>
+                <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center">
+                  <div className="text-center sm:text-left">
+                    <CardTitle className="text-2xl font-semibold">{project.project_name}</CardTitle>
+                    <CardDescription className="text-md text-gray-600">
+                      {project.project_short_description}
+                    </CardDescription>
+                  </div>
+                </div>
+              </CardHeader>
+              <Separator />
+              <CardContent className="py-4">
+                <Button>
+                  <Link href={`/deals/${project.id}`}>Go to deal</Link>
+                </Button>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};

src/app/(user)/profile/[uid]/page.tsx

@@ -6,6 +6,8 @@ import { format } from "date-fns";
 import ReactMarkdown from "react-markdown";
 import Link from "next/link";
 import { getUserRole } from "@/lib/data/userQuery";
+import { BusinessProfile } from "./BusinessProfile";
+import { ProjectProfileSection } from "./ProjectProfile";
 
 export default async function ProfilePage({ params }: { params: { uid: string } }) {
   const supabase = createSupabaseClient();
@@ -85,16 +87,24 @@ export default async function ProfilePage({ params }: { params: { uid: string }
               )}
             </div>
           </div>
+          {userRoleData.role === "business" && (
+            <div id="business-area" className="rounded-md mt-3">
+              <BusinessProfile userId={uid} />
+              <ProjectProfileSection userId={uid} />
+            </div>
+          )}
           {/* Lower */}
           <div>
             <div className="mt-6">
-              <h2 className="text-xl font-semibold mb-2">Bio</h2>
+              {/* <h2 className="text-4xl font-bold mb-2">Bio</h2> */}
+              <div className="border-[1px] mx-4 p-6 rounded-md">
                 <div className="prose prose-sm max-w-none dark:prose-invert">
                   <ReactMarkdown>{profileData.bio || "No bio available."}</ReactMarkdown>
                 </div>
               </div>
             </div>
           </div>
+        </div>
         <div className="px-4 py-4 border-t">
           <p className="text-sm text-gray-600">
             Last updated: {profileData.updated_at ? format(new Date(profileData.updated_at), "PPpp") : "N/A"}

src/lib/data/businessQuery.ts

@@ -45,6 +45,28 @@ export const getBusinessByName = (
   return query;
 };
 
+export const getBusinessByUserId = (client: SupabaseClient, userId: string) => {
+  const query = client
+    .from("business")
+    .select(
+      `
+    business_id:id,
+    location,
+    business_name,
+    ...business_type (
+      business_type_id: id,
+      business_type: value
+    ),
+    joined_date,
+    user_id
+  `
+    )
+    .eq("user_id", userId)
+    .single();
+
+  return query;
+};
+
 export const getBusinessAndProject = (
   client: SupabaseClient,
   params: { businessName?: String | null; businessId?: number | null; single?: boolean } = { single: false }