feat: invoice generator

components/sidebar/sidebar-user.tsx

@@ -4,14 +4,16 @@ import {
   DropdownMenuContent,
   DropdownMenuGroup,
   DropdownMenuItem,
+  DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
 import { SidebarMenuButton } from "@/components/ui/sidebar"
 import { UserProfile } from "@/lib/auth"
 import { authClient } from "@/lib/auth-client"
+import { PLANS } from "@/lib/stripe"
 import { formatBytes } from "@/lib/utils"
-import { HardDrive, LogOut, MoreVertical, User } from "lucide-react"
+import { CreditCard, LogOut, MoreVertical, Settings, Sparkles, User } from "lucide-react"
 import Link from "next/link"
 import { redirect } from "next/navigation"
 
@@ -40,26 +42,50 @@ export default function SidebarUser({ profile, isSelfHosted }: { profile: UserPr
       </DropdownMenuTrigger>
       <DropdownMenuContent
         className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
-        side={"top"}
+        side="top"
         align="center"
         sideOffset={4}
       >
+        <DropdownMenuLabel className="p-0 font-normal">
+          <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+            <Avatar className="h-8 w-8 rounded-lg">
+              <AvatarImage src={profile.avatar} alt={profile.name || ""} />
+              <AvatarFallback className="rounded-lg">
+                <User className="h-4 w-4" />
+              </AvatarFallback>
+            </Avatar>
+            <div className="grid flex-1 text-left text-sm leading-tight">
+              <span className="truncate font-semibold">{profile.name || profile.email}</span>
+              <span className="truncate text-xs">{profile.email}</span>
+            </div>
+          </div>
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
         <DropdownMenuGroup>
-          {/* <DropdownMenuItem>
-            <ThemeToggle />
-          </DropdownMenuItem> */}
           <DropdownMenuItem asChild>
             <Link href="/settings/profile" className="flex items-center gap-2">
-              <User className="h-4 w-4" />
-              Profile & Plan
+              <Sparkles />
+              <span className="truncate">{PLANS[profile.membershipPlan as keyof typeof PLANS].name}</span>
+              <span className="ml-auto text-xs text-muted-foreground">{formatBytes(profile.storageUsed)} used</span>
             </Link>
           </DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
           <DropdownMenuItem asChild>
-            <Link href="/settings/profile" className="flex items-center gap-2">
-              <HardDrive className="h-4 w-4" />
-              Storage: {formatBytes(profile.storageUsed)}
+            <Link href="/settings" className="flex items-center gap-2">
+              <Settings className="h-4 w-4" />
+              Settings
             </Link>
           </DropdownMenuItem>
+          {!isSelfHosted && (
+            <DropdownMenuItem asChild>
+              <Link href="/api/stripe/portal" className="flex items-center gap-2">
+                <CreditCard className="h-4 w-4" />
+                Billing
+              </Link>
+            </DropdownMenuItem>
+          )}
         </DropdownMenuGroup>
         {!isSelfHosted && (
           <>

components/sidebar/sidebar.tsx

@@ -18,7 +18,7 @@ import {
 } from "@/components/ui/sidebar"
 import { UserProfile } from "@/lib/auth"
 import config from "@/lib/config"
-import { ClockArrowUp, FileText, Import, LayoutDashboard, Settings, Sparkles, Upload } from "lucide-react"
+import { ClockArrowUp, FileText, Gift, House, Import, LayoutDashboard, Settings, Upload } from "lucide-react"
 import Image from "next/image"
 import Link from "next/link"
 import { usePathname } from "next/navigation"
@@ -72,7 +72,7 @@ export function AppSidebar({
                 <SidebarMenuItemWithHighlight href="/dashboard">
                   <SidebarMenuButton asChild>
                     <Link href="/dashboard">
-                      <LayoutDashboard />
+                      <House />
                       <span>Home</span>
                     </Link>
                   </SidebarMenuButton>
@@ -106,7 +106,14 @@ export function AppSidebar({
                     </Link>
                   </SidebarMenuButton>
                 </SidebarMenuItemWithHighlight>
-
+                <SidebarMenuItemWithHighlight href="/apps">
+                  <SidebarMenuButton asChild>
+                    <Link href="/apps">
+                      <LayoutDashboard />
+                      <span>Apps</span>
+                    </Link>
+                  </SidebarMenuButton>
+                </SidebarMenuItemWithHighlight>
                 <SidebarMenuItemWithHighlight href="/settings">
                   <SidebarMenuButton asChild>
                     <Link href="/settings">
@@ -136,7 +143,7 @@ export function AppSidebar({
                   <SidebarMenuItem>
                     <SidebarMenuButton asChild>
                       <Link href="https://vas3k.com/donate/" target="_blank">
-                        <Sparkles />
+                        <Gift />
                         Thank the author
                       </Link>
                     </SidebarMenuButton>