From 50090f374c14141ae23b9f8607233851ad38111a Mon Sep 17 00:00:00 2001
From: "Builder.io" <builder-bot@builder.io>
Date: Sat, 18 Oct 2025 02:44:40 +0000
Subject: [PATCH] Add connections and endorsements sections to main column

cgen-0a3b7a6d7d834d1a85c47c7f39ab65c6
---
 client/pages/Network.tsx | 71 ++++++++++++++++++++++++++++++++++++++--
 1 file changed, 69 insertions(+), 2 deletions(-)

diff --git a/client/pages/Network.tsx b/client/pages/Network.tsx
index 97487be7..c3cb04c3 100644
--- a/client/pages/Network.tsx
+++ b/client/pages/Network.tsx
@@ -239,8 +239,39 @@ export default function Network() {
             </Card>
           </div>
 
-          {/* Discover People */}
-          <div className="lg:col-span-8">
+          {/* Connections + Discover + Endorsements */}
+          <div className="lg:col-span-8 space-y-6">
+            <Card className="bg-card/50 border-border/50">
+              <CardHeader>
+                <CardTitle>My connections</CardTitle>
+                <CardDescription>People you’re connected with</CardDescription>
+              </CardHeader>
+              <CardContent className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                {connections.map((c) => {
+                  const p = (c as any).user_profiles || {};
+                  const display = p.full_name || p.username || c.connection_id;
+                  return (
+                    <div key={c.connection_id} className="flex items-center justify-between p-3 rounded-lg border border-border/50">
+                      <div className="flex items-center gap-3">
+                        <Avatar className="h-10 w-10">
+                          <AvatarImage src={p.avatar_url || undefined} />
+                          <AvatarFallback>{(display || "U")[0]}</AvatarFallback>
+                        </Avatar>
+                        <div>
+                          <div className="font-medium">{display}</div>
+                          <div className="text-xs text-muted-foreground">Connected</div>
+                        </div>
+                      </div>
+                      <Button size="sm" variant="outline">Message</Button>
+                    </div>
+                  );
+                })}
+                {connections.length === 0 && (
+                  <div className="text-sm text-muted-foreground">No connections yet.</div>
+                )}
+              </CardContent>
+            </Card>
+
             <Card className="bg-card/50 border-border/50">
               <CardHeader>
                 <CardTitle>Discover People</CardTitle>
@@ -294,6 +325,42 @@ export default function Network() {
                 )}
               </CardContent>
             </Card>
+
+            <Card className="bg-card/50 border-border/50">
+              <CardHeader>
+                <CardTitle>Endorsements</CardTitle>
+                <CardDescription>Recognize skills of your peers</CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-3">
+                {connections.slice(0, 6).map((c) => {
+                  const p = (c as any).user_profiles || {};
+                  const display = p.full_name || p.username || c.connection_id;
+                  return (
+                    <div key={`endorse-${c.connection_id}`} className="flex items-center justify-between p-3 rounded-lg border border-border/50">
+                      <div className="flex items-center gap-3">
+                        <Avatar className="h-8 w-8">
+                          <AvatarImage src={p.avatar_url || undefined} />
+                          <AvatarFallback>{(display || "U")[0]}</AvatarFallback>
+                        </Avatar>
+                        <div className="text-sm">{display}</div>
+                      </div>
+                      <div className="flex gap-2 flex-wrap">
+                        {(["Leadership","Systems","Frontend","Backend"] as const).map((skill) => (
+                          <Button key={skill} size="xs" variant="outline" onClick={() => handleEndorse(c.connection_id, skill)}>
+                            {skill}
+                          </Button>
+                        ))}
+                      </div>
+                    </div>
+                  );
+                })}
+                {endorsements.length > 0 && (
+                  <div className="text-xs text-muted-foreground">
+                    You have received {endorsements.length} endorsements.
+                  </div>
+                )}
+              </CardContent>
+            </Card>
           </div>
         </div>
       </div>