planpost-affiliate-ui/src/components/Sidebar.tsx

import React, { useEffect } from "react";
import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarMenu,
  SidebarMenuItem,
  SidebarMenuButton,
  SidebarHeader,
  SidebarFooter,
} from "@/components/ui/sidebar";
import { LayoutDashboard, Users, DollarSign, LogOut } from "lucide-react";
import { Link, useLocation } from "react-router-dom";
import { useUserStore } from "@/stores/userStore";
import { useAuthStore } from "@/stores/authStore";

const AppSidebar: React.FC = () => {
  const { pathname } = useLocation();

  const { user, fetchUser } = useUserStore();
  const { logout } = useAuthStore();

  useEffect(() => {
    // Get user ID from localStorage
    const userStr = localStorage.getItem("aff-user");

    if (userStr) {
      const userData = JSON.parse(userStr);
      if (userData.id) {
        fetchUser(userData.id);
      }
    }
  }, [fetchUser]);

  const links = [
    { name: "Overview", path: "/dashboard/overview", icon: LayoutDashboard },
    { name: "Referrals", path: "/dashboard/referrals", icon: Users },
    { name: "Earnings", path: "/dashboard/earnings", icon: DollarSign },
  ];

  return (
    <Sidebar className="border-r bg-gradient-to-b from-slate-50 to-white">
      <SidebarHeader className="border-b border-gray-200 pb-4">
        <div className="flex items-center gap-3 px-2">
          <div>
            <img src="/planpost.png" alt="Logo" className="w-10 h-10" />
          </div>
          <div>
            <h2 className="text-lg font-bold text-gray-900">Affiliate Panel</h2>
            <p className="text-xs text-gray-500">Manage your earnings</p>
          </div>
        </div>
      </SidebarHeader>

      <SidebarContent className="px-2 py-4">
        <SidebarGroup>
          <SidebarGroupContent>
            <SidebarMenu className="space-y-1">
              {links.map(({ name, path, icon: Icon }) => (
                <SidebarMenuItem key={name}>
                  <SidebarMenuButton
                    asChild
                    isActive={pathname === path}
                    className={`
                      transition-all duration-200
                      ${
                        pathname === path
                          ? "bg-blue-600 text-white shadow-md hover:bg-blue-700"
                          : "hover:bg-gray-100 text-gray-700"
                      }
                    `}
                  >
                    <Link
                      to={path}
                      className="flex items-center gap-3 px-3 py-2.5 rounded-lg"
                    >
                      <Icon
                        size={20}
                        className={
                          pathname === path ? "text-black" : "text-gray-600"
                        }
                      />
                      <span className="font-medium">{name}</span>
                    </Link>
                  </SidebarMenuButton>
                </SidebarMenuItem>
              ))}
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>

        <div className="mt-6 mx-2 bg-gradient-to-br from-blue-50 to-purple-50 border border-blue-100 rounded-xl p-4">
          <p className="text-xs font-medium text-gray-600 mb-2">
            Total Earnings
          </p>
          <p className="text-2xl font-bold text-gray-900 mb-1">$3,200</p>
          <p className="text-xs text-green-600 font-medium">+15% this month</p>
        </div>
      </SidebarContent>

      <SidebarFooter className="border-t border-gray-200 pt-4">
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton
              asChild
              className="hover:bg-red-50 text-red-600 transition-colors bg-white"
            >
              <button
                className="flex items-center gap-3 px-3 py-2.5 rounded-lg w-full"
                onClick={() => logout()}
              >
                <LogOut size={20} />
                <span className="font-medium">Logout</span>
              </button>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>

        <div className="mt-3 mx-2 flex items-center gap-3 p-3 bg-gray-50 rounded-lg border border-gray-200">
          <div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center text-white font-semibold">
            {user?.first_name ? user.first_name.charAt(0) : "U"}
          </div>
          <div className="flex-1 min-w-0">
            <p className="text-sm font-semibold text-gray-900 truncate">
              {user?.first_name || "John Doe"} {user?.last_name || ""}
            </p>
            <p className="text-xs text-gray-500 truncate">{user?.email}</p>
          </div>
        </div>
      </SidebarFooter>
    </Sidebar>
  );
};

export default AppSidebar;