Dashboard interactivity

shop/package.json

@@ -33,6 +33,7 @@
     "recharts": "^2.10.4",
     "tailwind-merge": "^2.2.0",
     "tailwindcss-animate": "^1.0.7",
+    "vaul": "^0.8.0",
     "viem": "^1.21.4",
     "wagmi": "^1.4.13"
   },

shop/src/app/dashboard/components/cash-out-button.tsx

@@ -0,0 +1,42 @@
+import { PrimaryButton as Button } from '@/components/ui/button'
+
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from '@/components/ui/drawer'
+
+export function CashOutButton() {
+  return (
+    <Drawer>
+      <DrawerTrigger asChild>
+        <Button className="text-xl py-4 px-6 transition-colors hover:text-secondary hover:bg-primary-foreground">
+          Cash Out
+        </Button>
+      </DrawerTrigger>
+      <DrawerContent className="mx-auto w-full max-w-md">
+        <DrawerHeader>
+          <DrawerTitle className="text-2xl text-center font-semibold">
+            Withdraw Funds
+          </DrawerTitle>
+          <DrawerDescription className="text-md text-center">
+            489.97 GHO
+          </DrawerDescription>
+        </DrawerHeader>
+        <DrawerFooter className="flex justify-end space-x-4">
+          <DrawerClose asChild>
+            <Button variant="outline" className="px-4 py-2">
+              Cancel
+            </Button>
+          </DrawerClose>
+          <Button className="px-4 py-2 bg-primary text-white">Withdraw</Button>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  )
+}

shop/src/app/dashboard/components/main-nav.tsx

@@ -12,25 +12,25 @@ export function MainNav({
       {...props}
     >
       <Link
-        href="/examples/dashboard"
+        href="/dashboard"
         className="text-sm font-medium transition-colors hover:text-primary"
       >
         Overview
       </Link>
       <Link
-        href="/examples/dashboard"
+        href="/dashboard"
         className="text-sm font-medium text-muted-foreground transition-colors hover:text-primary"
       >
         Customers
       </Link>
       <Link
-        href="/examples/dashboard"
+        href="/dashboard"
         className="text-sm font-medium text-muted-foreground transition-colors hover:text-primary"
       >
         Products
       </Link>
       <Link
-        href="/examples/dashboard"
+        href="/dashboard"
         className="text-sm font-medium text-muted-foreground transition-colors hover:text-primary"
       >
         Settings

shop/src/app/dashboard/components/overview.tsx

@@ -75,7 +75,7 @@ export function Overview() {
           dataKey="total"
           fill="currentColor"
           radius={[4, 4, 0, 0]}
-          className="fill-primary"
+          className="fill-primary hover:fill-primary-foreground"
         />
       </BarChart>
     </ResponsiveContainer>

shop/src/app/dashboard/components/recent-sales.tsx

@@ -1,4 +1,6 @@
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { RefundButton } from './refund-button'
+
 
 export function RecentSales() {
   return (
@@ -14,7 +16,8 @@ export function RecentSales() {
             olivia.martin@email.com
           </p>
         </div>
-        <div className="ml-auto font-medium">+$1,999.00</div>
+        <div className="ml-auto font-medium">+$1,999.00</div> 
+        <RefundButton></RefundButton>       
       </div>
       <div className="flex items-center">
         <Avatar className="flex h-9 w-9 items-center justify-center space-y-0 border">
@@ -26,6 +29,7 @@ export function RecentSales() {
           <p className="text-sm text-muted-foreground">jackson.lee@email.com</p>
         </div>
         <div className="ml-auto font-medium">+$39.00</div>
+        <RefundButton></RefundButton> 
       </div>
       <div className="flex items-center">
         <Avatar className="h-9 w-9">
@@ -39,6 +43,7 @@ export function RecentSales() {
           </p>
         </div>
         <div className="ml-auto font-medium">+$299.00</div>
+        <RefundButton></RefundButton> 
       </div>
       <div className="flex items-center">
         <Avatar className="h-9 w-9">
@@ -50,6 +55,7 @@ export function RecentSales() {
           <p className="text-sm text-muted-foreground">will@email.com</p>
         </div>
         <div className="ml-auto font-medium">+$99.00</div>
+        <RefundButton></RefundButton> 
       </div>
       <div className="flex items-center">
         <Avatar className="h-9 w-9">
@@ -61,6 +67,7 @@ export function RecentSales() {
           <p className="text-sm text-muted-foreground">sofia.davis@email.com</p>
         </div>
         <div className="ml-auto font-medium">+$39.00</div>
+        <RefundButton></RefundButton> 
       </div>
     </div>
   )

shop/src/app/dashboard/components/refund-button.tsx

@@ -0,0 +1,42 @@
+import { PrimaryButton as Button } from '@/components/ui/button'
+
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from '@/components/ui/drawer'
+
+export function RefundButton() {
+  return (
+    <Drawer>
+      <DrawerTrigger asChild>
+        <Button className="text-xs ml-4 transition:colors hover:text-secondary hover:bg-primary-foreground">
+          Refund
+        </Button>
+      </DrawerTrigger>
+      <DrawerContent className="mx-auto w-full max-w-md">
+        <DrawerHeader>
+          <DrawerTitle className="text-2xl text-center font-semibold">
+            Refund Customer Order
+          </DrawerTitle>
+          <DrawerDescription className="text-md text-center">
+            Revert On-Chain Transaction
+          </DrawerDescription>
+        </DrawerHeader>
+        <DrawerFooter className="flex justify-end space-x-4">
+          <DrawerClose asChild>
+            <Button variant="outline" className="px-4 py-2">
+              Cancel
+            </Button>
+          </DrawerClose>
+          <Button className="px-4 py-2 bg-primary text-white">Refund</Button>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  )
+}

shop/src/app/dashboard/components/team-switcher.tsx

@@ -48,7 +48,7 @@ const groups = [
     label: 'Personal Account',
     teams: [
       {
-        label: 'Alicia Koch',
+        label: 'Stani K',
         value: 'personal',
       },
     ],
@@ -57,12 +57,12 @@ const groups = [
     label: 'Teams',
     teams: [
       {
-        label: 'Acme Inc.',
-        value: 'acme-inc',
+        label: 'Nice Shoes Inc.',
+        value: 'nice-shoes-inc',
       },
       {
-        label: 'Monsters Inc.',
-        value: 'monsters',
+        label: 'Cool Poaps Inc.',
+        value: 'cool-poaps-inc',
       },
     ],
   },

shop/src/app/dashboard/components/user-nav.tsx

@@ -18,16 +18,16 @@ export function UserNav() {
         <Button variant="ghost" className="relative h-8 w-8 rounded-full">
           <Avatar className="h-8 w-8">
             <AvatarImage src="/avatars/01.png" alt="@shadcn" />
-            <AvatarFallback>SC</AvatarFallback>
+            <AvatarFallback>GM</AvatarFallback>
           </Avatar>
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent className="w-56" align="end" forceMount>
         <DropdownMenuLabel className="font-normal">
           <div className="flex flex-col space-y-1">
-            <p className="text-sm font-medium leading-none">shadcn</p>
+            <p className="text-sm font-medium leading-none">stani</p>
             <p className="text-xs leading-none text-muted-foreground">
-              m@example.com
+              gm@aave.com
             </p>
           </div>
         </DropdownMenuLabel>

shop/src/app/dashboard/page.tsx

@@ -1,6 +1,5 @@
 import { Metadata } from 'next'
 import Image from 'next/image'
-
 import { PrimaryButton as Button } from '@/components/ui/button'
 import {
   Card,
@@ -18,6 +17,7 @@ import { RecentSales } from '@/app/dashboard/components/recent-sales'
 import { Search } from '@/app/dashboard/components/search'
 import TeamSwitcher from '@/app/dashboard/components/team-switcher'
 import { UserNav } from '@/app/dashboard/components/user-nav'
+import { CashOutButton } from './components/cash-out-button'
 
 export const metadata: Metadata = {
   title: 'Dashboard',
@@ -60,8 +60,7 @@ export default function DashboardPage() {
               Esprit Merchant Dashboard
             </h2>
             <div className="flex items-center space-x-2">
-              {/* <CalendarDateRangePicker /> */}
-              <Button className="text-2xl px-6 py-6">Cash Out</Button>
+              <CashOutButton></CashOutButton>
             </div>
           </div>
           <Tabs defaultValue="overview" className="space-y-4">

shop/src/components/ui/drawer.tsx

@@ -0,0 +1,118 @@
+"use client"
+
+import * as React from "react"
+import { Drawer as DrawerPrimitive } from "vaul"
+
+import { cn } from "@/lib/utils"
+
+const Drawer = ({
+  shouldScaleBackground = true,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
+  <DrawerPrimitive.Root
+    shouldScaleBackground={shouldScaleBackground}
+    {...props}
+  />
+)
+Drawer.displayName = "Drawer"
+
+const DrawerTrigger = DrawerPrimitive.Trigger
+
+const DrawerPortal = DrawerPrimitive.Portal
+
+const DrawerClose = DrawerPrimitive.Close
+
+const DrawerOverlay = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Overlay
+    ref={ref}
+    className={cn("fixed inset-0 z-50 bg-black/80", className)}
+    {...props}
+  />
+))
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
+
+const DrawerContent = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DrawerPortal>
+    <DrawerOverlay />
+    <DrawerPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
+        className
+      )}
+      {...props}
+    >
+      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+      {children}
+    </DrawerPrimitive.Content>
+  </DrawerPortal>
+))
+DrawerContent.displayName = "DrawerContent"
+
+const DrawerHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
+    {...props}
+  />
+)
+DrawerHeader.displayName = "DrawerHeader"
+
+const DrawerFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+    {...props}
+  />
+)
+DrawerFooter.displayName = "DrawerFooter"
+
+const DrawerTitle = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName
+
+const DrawerDescription = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+}