From 6771e7ceb7f3e237fa08f362a27a607ae18b27ae Mon Sep 17 00:00:00 2001
From: akshat mittal <akshatmittal.0007@gmail.com>
Date: Fri, 9 Jan 2026 17:53:35 +0200
Subject: [PATCH] fix: improve member page UI with better charts, buttons, and
 team names styling

---
 src/app/member/member-card.tsx            | 28 ++++++++++++-----------
 src/app/member/members-sidebar.tsx        | 13 ++++++-----
 src/components/charts/goals-bar-chart.tsx | 27 ++++++++++++++--------
 src/components/charts/pie-chart.tsx       | 10 +++++---
 src/components/metric/kpi-card.tsx        |  2 +-
 src/components/role/role-card.tsx         |  2 +-
 6 files changed, 49 insertions(+), 33 deletions(-)

diff --git a/src/app/member/member-card.tsx b/src/app/member/member-card.tsx
index 250a47c..9d667b3 100644
--- a/src/app/member/member-card.tsx
+++ b/src/app/member/member-card.tsx
@@ -172,21 +172,23 @@ export function MemberCard({ member, dashboardCharts }: MemberCardProps) {
               </div>
 
               {uniqueTeams.length > 0 && (
-                <div className="flex flex-wrap items-center gap-2">
+                <div className="space-y-1.5">
                   <div className="text-muted-foreground flex items-center gap-1.5">
                     <LayoutGrid className="h-3.5 w-3.5" />
-                    <span className="text-xs font-medium">Teams:</span>
+                    <span className="text-xs font-medium">Teams</span>
                   </div>
-                  {uniqueTeams.map((team) => (
-                    <Link key={team.id} href={`/teams/${team.id}`}>
-                      <Badge
-                        variant="outline"
-                        className="hover:bg-accent hover:border-accent-foreground/20 cursor-pointer text-xs transition-colors"
-                      >
-                        {team.name}
-                      </Badge>
-                    </Link>
-                  ))}
+                  <ul className="space-y-1 pl-5">
+                    {uniqueTeams.map((team) => (
+                      <li key={team.id}>
+                        <Link
+                          href={`/teams/${team.id}`}
+                          className="hover:text-primary text-sm font-medium underline-offset-2 transition-colors hover:underline"
+                        >
+                          {team.name}
+                        </Link>
+                      </li>
+                    ))}
+                  </ul>
                 </div>
               )}
             </>
@@ -255,7 +257,7 @@ export function MemberCard({ member, dashboardCharts }: MemberCardProps) {
         <Collapsible open={isExpanded} onOpenChange={setIsExpanded}>
           <CollapsibleTrigger asChild>
             <Button
-              variant="ghost"
+              variant="outline"
               size="sm"
               className="text-muted-foreground hover:text-foreground mt-4 w-full justify-center gap-2"
             >
diff --git a/src/app/member/members-sidebar.tsx b/src/app/member/members-sidebar.tsx
index a0017e2..71c774a 100644
--- a/src/app/member/members-sidebar.tsx
+++ b/src/app/member/members-sidebar.tsx
@@ -73,21 +73,22 @@ export function MembersSidebar({ members, memberStats }: MembersSidebarProps) {
         className={cn(
           "fixed top-1/2 z-50 -translate-y-1/2 transition-all duration-300 ease-in-out",
           "flex items-center gap-1 md:gap-1.5",
-          "h-8 px-2 md:h-9 md:px-2.5",
+          "h-7 px-1.5 md:h-8 md:px-2",
           "bg-background rounded-md border",
           "shadow-md hover:shadow-lg",
-          "text-xs font-medium md:text-sm",
+          "text-xs font-medium",
           isOpen ? "border-primary bg-accent" : "hover:bg-accent/50 right-4",
         )}
         aria-label={isOpen ? "Close Members sidebar" : "Open Members sidebar"}
       >
-        <Users className="h-4 w-4" />
+        <Users className="h-3.5 w-3.5" />
         <span className="hidden md:inline">Members</span>
-        <span>({members.length})</span>
+        <span className="text-muted-foreground">|</span>
+        <span>{members.length}</span>
         {isOpen ? (
-          <ChevronRight className="h-4 w-4" />
+          <ChevronRight className="h-3.5 w-3.5" />
         ) : (
-          <ChevronLeft className="h-4 w-4" />
+          <ChevronLeft className="h-3.5 w-3.5" />
         )}
       </button>
 
diff --git a/src/components/charts/goals-bar-chart.tsx b/src/components/charts/goals-bar-chart.tsx
index 3020420..132f5df 100644
--- a/src/components/charts/goals-bar-chart.tsx
+++ b/src/components/charts/goals-bar-chart.tsx
@@ -390,20 +390,29 @@ export function GoalsBarChart({
         >
           <BarChart
             data={chartData}
-            margin={{ top: 20, right: 20, left: 0, bottom: 60 }}
+            margin={{
+              top: 20,
+              right: 20,
+              left: 0,
+              bottom: simpleLegend ? 10 : 60,
+            }}
           >
             <XAxis
               dataKey="goal"
-              tick={{
-                fill: "hsl(var(--muted-foreground))",
-                fontSize: 10,
-              }}
-              angle={-45}
-              textAnchor="end"
-              height={60}
+              tick={
+                simpleLegend
+                  ? false
+                  : {
+                      fill: "hsl(var(--muted-foreground))",
+                      fontSize: 10,
+                    }
+              }
+              angle={simpleLegend ? 0 : -45}
+              textAnchor={simpleLegend ? "middle" : "end"}
+              height={simpleLegend ? 10 : 60}
               interval={0}
               tickLine={false}
-              axisLine={{ stroke: "hsl(var(--border))" }}
+              axisLine={simpleLegend ? false : { stroke: "hsl(var(--border))" }}
             />
             <YAxis
               domain={[0, 100]}
diff --git a/src/components/charts/pie-chart.tsx b/src/components/charts/pie-chart.tsx
index 5166f5e..939f61b 100644
--- a/src/components/charts/pie-chart.tsx
+++ b/src/components/charts/pie-chart.tsx
@@ -41,8 +41,8 @@ export function MetricPieChart({
           data={chartData}
           dataKey={dataKey}
           nameKey={xAxisKey}
-          innerRadius={60}
-          outerRadius={100}
+          innerRadius="40%"
+          outerRadius="70%"
           strokeWidth={2}
           isAnimationActive={true}
           animationDuration={800}
@@ -91,7 +91,11 @@ export function MetricPieChart({
         {showLegend && (
           <ChartLegend
             content={<ChartLegendContent nameKey={xAxisKey} />}
-            wrapperStyle={{ paddingTop: 16 }}
+            wrapperStyle={{
+              paddingTop: 8,
+              maxHeight: "80px",
+              overflowY: "auto",
+            }}
           />
         )}
       </PieChart>
diff --git a/src/components/metric/kpi-card.tsx b/src/components/metric/kpi-card.tsx
index 2c9a81a..7d71088 100644
--- a/src/components/metric/kpi-card.tsx
+++ b/src/components/metric/kpi-card.tsx
@@ -136,7 +136,7 @@ export function KpiCard({
                     <Button
                       variant="outline"
                       size="icon"
-                      className="h-7 w-7 border opacity-0 shadow-sm transition-all group-hover:opacity-100"
+                      className="h-7 w-7 border opacity-60 shadow-sm transition-all group-hover:opacity-100"
                       onClick={(e) => e.stopPropagation()}
                     >
                       <Settings className="h-3.5 w-3.5" />
diff --git a/src/components/role/role-card.tsx b/src/components/role/role-card.tsx
index c3a606b..cb5dfee 100644
--- a/src/components/role/role-card.tsx
+++ b/src/components/role/role-card.tsx
@@ -191,7 +191,7 @@ function RoleCardComponent({
     >
       {/* Action Buttons */}
       {showActions && (
-        <div className="nodrag absolute top-1 right-1 z-10 flex gap-0.5 opacity-0 transition-opacity group-hover:opacity-100">
+        <div className="nodrag absolute top-1 right-1 z-10 flex gap-0.5 opacity-60 transition-opacity group-hover:opacity-100">
           {onEdit && (
             <Button
               variant="outline"