Merge pull request #5 from janndriessen/dashboard-tweak

Dashboard tweak
janndriessen · Jan 17, 2024 · d7ce4c4 · d7ce4c4
2 parents d1a03cd + 0c98907
commit d7ce4c4
Show file tree

Hide file tree

Showing 23 changed files with 381 additions and 397 deletions.
diff --git a/shop/.gitignore b/shop/.gitignore
@@ -1,7 +1,7 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
-node_modules
+/node_modules
 /.pnp
 .pnp.js
 .yarn/install-state.gz

diff --git a/shop/package-lock.json b/shop/package-lock.json
diff --git a/shop/package.json b/shop/package.json
@@ -41,7 +41,7 @@
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "autoprefixer": "^10.0.1",
-    "eslint": "^8",
+    "eslint": "^8.56.0",
     "eslint-config-next": "14.0.4",
     "postcss": "^8",
     "tailwindcss": "^3.3.0",

diff --git a/shop/src/app/dashboard/components/date-range-picker.tsx b/shop/src/app/dashboard/components/date-range-picker.tsx
@@ -1,18 +1,18 @@
-"use client"
+'use client'
 
-import * as React from "react"
-import { CalendarIcon } from "@radix-ui/react-icons"
-import { addDays, format } from "date-fns"
-import { DateRange } from "react-day-picker"
+import * as React from 'react'
+import { CalendarIcon } from '@radix-ui/react-icons'
+import { addDays, format } from 'date-fns'
+import { DateRange } from 'react-day-picker'
 
-import { cn } from "@/lib/utils"
-import { PrimaryButton as Button } from "@/components/ui/button"
-import { Calendar } from "@/components/ui/calendar"
+import { cn } from '@/lib/utils'
+import { PrimaryButton as Button } from '@/components/ui/button'
+import { Calendar } from '@/components/ui/calendar'
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from "@/components/ui/popover"
+} from '@/components/ui/popover'
 
 export function CalendarDateRangePicker({
   className,
@@ -23,26 +23,26 @@ export function CalendarDateRangePicker({
   })
 
   return (
-    <div className={cn("grid gap-2", className)}>
+    <div className={cn('grid gap-2', className)}>
       <Popover>
         <PopoverTrigger asChild>
           <Button
             id="date"
-            variant={"outline"}
+            variant={'outline'}
             className={cn(
-              "w-[260px] justify-start text-left font-normal",
-              !date && "text-muted-foreground"
+              'w-[260px] justify-start text-left font-normal',
+              !date && 'text-muted-foreground',
             )}
           >
             <CalendarIcon className="mr-2 h-4 w-4" />
             {date?.from ? (
               date.to ? (
                 <>
-                  {format(date.from, "LLL dd, y")} -{" "}
-                  {format(date.to, "LLL dd, y")}
+                  {format(date.from, 'LLL dd, y')} -{' '}
+                  {format(date.to, 'LLL dd, y')}
                 </>
               ) : (
-                format(date.from, "LLL dd, y")
+                format(date.from, 'LLL dd, y')
               )
             ) : (
               <span>Pick a date</span>
@@ -62,4 +62,4 @@ export function CalendarDateRangePicker({
       </Popover>
     </div>
   )
-}
+}
diff --git a/shop/src/app/dashboard/components/main-nav.tsx b/shop/src/app/dashboard/components/main-nav.tsx
@@ -1,14 +1,14 @@
-import Link from "next/link"
+import Link from 'next/link'
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
 
 export function MainNav({
   className,
   ...props
 }: React.HTMLAttributes<HTMLElement>) {
   return (
     <nav
-      className={cn("flex items-center space-x-4 lg:space-x-6", className)}
+      className={cn('flex items-center space-x-4 lg:space-x-6', className)}
       {...props}
     >
       <Link
@@ -37,4 +37,4 @@ export function MainNav({
       </Link>
     </nav>
   )
-}
+}
diff --git a/shop/src/app/dashboard/components/overview.tsx b/shop/src/app/dashboard/components/overview.tsx
@@ -1,54 +1,54 @@
-"use client"
+'use client'
 
-import { Bar, BarChart, ResponsiveContainer, XAxis, YAxis } from "recharts"
+import { Bar, BarChart, ResponsiveContainer, XAxis, YAxis } from 'recharts'
 
 const data = [
   {
-    name: "Jan",
+    name: 'Jan',
     total: Math.floor(Math.random() * 5000) + 1000,
   },
   {
-    name: "Feb",
+    name: 'Feb',
     total: Math.floor(Math.random() * 5000) + 1000,
   },
   {
-    name: "Mar",
+    name: 'Mar',
     total: Math.floor(Math.random() * 5000) + 1000,
   },
   {
-    name: "Apr",
+    name: 'Apr',
     total: Math.floor(Math.random() * 5000) + 1000,
   },
   {
-    name: "May",
+    name: 'May',
     total: Math.floor(Math.random() * 5000) + 1000,
   },
   {
-    name: "Jun",
+    name: 'Jun',
     total: Math.floor(Math.random() * 5000) + 1000,
   },
   {
-    name: "Jul",
+    name: 'Jul',
     total: Math.floor(Math.random() * 5000) + 1000,
   },
   {
-    name: "Aug",
+    name: 'Aug',
     total: Math.floor(Math.random() * 5000) + 1000,
   },
   {
-    name: "Sep",
+    name: 'Sep',
     total: Math.floor(Math.random() * 5000) + 1000,
   },
   {
-    name: "Oct",
+    name: 'Oct',
     total: Math.floor(Math.random() * 5000) + 1000,
   },
   {
-    name: "Nov",
+    name: 'Nov',
     total: Math.floor(Math.random() * 5000) + 1000,
   },
   {
-    name: "Dec",
+    name: 'Dec',
     total: Math.floor(Math.random() * 5000) + 1000,
   },
 ]
@@ -80,4 +80,4 @@ export function Overview() {
       </BarChart>
     </ResponsiveContainer>
   )
-}
+}
diff --git a/shop/src/app/dashboard/components/recent-sales.tsx b/shop/src/app/dashboard/components/recent-sales.tsx
@@ -1,71 +1,67 @@
-import {
-    Avatar,
-    AvatarFallback,
-    AvatarImage,
-  } from "@/components/ui/avatar"
-
-  export function RecentSales() {
-    return (
-      <div className="space-y-8">
-        <div className="flex items-center">
-          <Avatar className="h-9 w-9">
-            <AvatarImage src="/avatars/01.png" alt="Avatar" />
-            <AvatarFallback>OM</AvatarFallback>
-          </Avatar>
-          <div className="ml-4 space-y-1">
-            <p className="text-sm font-medium leading-none">Olivia Martin</p>
-            <p className="text-sm text-muted-foreground">
-              olivia.martin@email.com
-            </p>
-          </div>
-          <div className="ml-auto font-medium">+$1,999.00</div>
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+
+export function RecentSales() {
+  return (
+    <div className="space-y-8">
+      <div className="flex items-center">
+        <Avatar className="h-9 w-9">
+          <AvatarImage src="/avatars/01.png" alt="Avatar" />
+          <AvatarFallback>OM</AvatarFallback>
+        </Avatar>
+        <div className="ml-4 space-y-1">
+          <p className="text-sm font-medium leading-none">Olivia Martin</p>
+          <p className="text-sm text-muted-foreground">
+            olivia.martin@email.com
+          </p>
         </div>
-        <div className="flex items-center">
-          <Avatar className="flex h-9 w-9 items-center justify-center space-y-0 border">
-            <AvatarImage src="/avatars/02.png" alt="Avatar" />
-            <AvatarFallback>JL</AvatarFallback>
-          </Avatar>
-          <div className="ml-4 space-y-1">
-            <p className="text-sm font-medium leading-none">Jackson Lee</p>
-            <p className="text-sm text-muted-foreground">jackson.lee@email.com</p>
-          </div>
-          <div className="ml-auto font-medium">+$39.00</div>
+        <div className="ml-auto font-medium">+$1,999.00</div>
+      </div>
+      <div className="flex items-center">
+        <Avatar className="flex h-9 w-9 items-center justify-center space-y-0 border">
+          <AvatarImage src="/avatars/02.png" alt="Avatar" />
+          <AvatarFallback>JL</AvatarFallback>
+        </Avatar>
+        <div className="ml-4 space-y-1">
+          <p className="text-sm font-medium leading-none">Jackson Lee</p>
+          <p className="text-sm text-muted-foreground">jackson.lee@email.com</p>
         </div>
-        <div className="flex items-center">
-          <Avatar className="h-9 w-9">
-            <AvatarImage src="/avatars/03.png" alt="Avatar" />
-            <AvatarFallback>IN</AvatarFallback>
-          </Avatar>
-          <div className="ml-4 space-y-1">
-            <p className="text-sm font-medium leading-none">Isabella Nguyen</p>
-            <p className="text-sm text-muted-foreground">
-              isabella.nguyen@email.com
-            </p>
-          </div>
-          <div className="ml-auto font-medium">+$299.00</div>
+        <div className="ml-auto font-medium">+$39.00</div>
+      </div>
+      <div className="flex items-center">
+        <Avatar className="h-9 w-9">
+          <AvatarImage src="/avatars/03.png" alt="Avatar" />
+          <AvatarFallback>IN</AvatarFallback>
+        </Avatar>
+        <div className="ml-4 space-y-1">
+          <p className="text-sm font-medium leading-none">Isabella Nguyen</p>
+          <p className="text-sm text-muted-foreground">
+            isabella.nguyen@email.com
+          </p>
         </div>
-        <div className="flex items-center">
-          <Avatar className="h-9 w-9">
-            <AvatarImage src="/avatars/04.png" alt="Avatar" />
-            <AvatarFallback>WK</AvatarFallback>
-          </Avatar>
-          <div className="ml-4 space-y-1">
-            <p className="text-sm font-medium leading-none">William Kim</p>
-            <p className="text-sm text-muted-foreground">will@email.com</p>
-          </div>
-          <div className="ml-auto font-medium">+$99.00</div>
+        <div className="ml-auto font-medium">+$299.00</div>
+      </div>
+      <div className="flex items-center">
+        <Avatar className="h-9 w-9">
+          <AvatarImage src="/avatars/04.png" alt="Avatar" />
+          <AvatarFallback>WK</AvatarFallback>
+        </Avatar>
+        <div className="ml-4 space-y-1">
+          <p className="text-sm font-medium leading-none">William Kim</p>
+          <p className="text-sm text-muted-foreground">will@email.com</p>
         </div>
-        <div className="flex items-center">
-          <Avatar className="h-9 w-9">
-            <AvatarImage src="/avatars/05.png" alt="Avatar" />
-            <AvatarFallback>SD</AvatarFallback>
-          </Avatar>
-          <div className="ml-4 space-y-1">
-            <p className="text-sm font-medium leading-none">Sofia Davis</p>
-            <p className="text-sm text-muted-foreground">sofia.davis@email.com</p>
-          </div>
-          <div className="ml-auto font-medium">+$39.00</div>
+        <div className="ml-auto font-medium">+$99.00</div>
+      </div>
+      <div className="flex items-center">
+        <Avatar className="h-9 w-9">
+          <AvatarImage src="/avatars/05.png" alt="Avatar" />
+          <AvatarFallback>SD</AvatarFallback>
+        </Avatar>
+        <div className="ml-4 space-y-1">
+          <p className="text-sm font-medium leading-none">Sofia Davis</p>
+          <p className="text-sm text-muted-foreground">sofia.davis@email.com</p>
         </div>
+        <div className="ml-auto font-medium">+$39.00</div>
       </div>
-    )
-  }
+    </div>
+  )
+}
diff --git a/shop/src/app/dashboard/components/search.tsx b/shop/src/app/dashboard/components/search.tsx
@@ -1,4 +1,4 @@
-import { Input } from "@/components/ui/input"
+import { Input } from '@/components/ui/input'
 
 export function Search() {
   return (
@@ -10,4 +10,4 @@ export function Search() {
       />
     </div>
   )
-}
+}