add webmanifest

public/site.webmanifest

@@ -0,0 +1,14 @@
+{
+  "name": "",
+  "short_name": "",
+  "icons": [
+    {
+      "src": "/icon.png",
+      "sizes": "32x32",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}

src/app/(dashboard)/dashboard/stores/[storeId]/analytics/page.tsx

@@ -144,30 +144,28 @@ export default async function AnalyticsPage({
             {dayCount && `in the last ${dayCount} days`}
           </CardDescription>
         </CardHeader>
-        <CardContent>
-          <div className="space-y-8">
-            {customers.map((customer) => (
-              <div key={customer.email} className="flex items-center">
-                <Avatar className="h-9 w-9">
-                  <AvatarImage src="/avatars/01.png" alt="Avatar" />
-                  <AvatarFallback>
-                    {customer.name?.slice(0, 2).toUpperCase()}
-                  </AvatarFallback>
-                </Avatar>
-                <div className="ml-4 space-y-1">
-                  <p className="text-sm font-medium leading-none">
-                    {customer.name}
-                  </p>
-                  <p className="text-sm text-muted-foreground">
-                    {customer.email}
-                  </p>
-                </div>
-                <div className="ml-auto font-medium">
-                  +${formatNumber(customer.totalSpent)}
-                </div>
+        <CardContent className="space-y-8">
+          {customers.map((customer) => (
+            <div key={customer.email} className="flex items-center">
+              <Avatar className="h-9 w-9">
+                <AvatarImage src="/avatars/01.png" alt="Avatar" />
+                <AvatarFallback>
+                  {customer.name?.slice(0, 2).toUpperCase()}
+                </AvatarFallback>
+              </Avatar>
+              <div className="ml-4 space-y-1">
+                <p className="text-sm font-medium leading-none">
+                  {customer.name}
+                </p>
+                <p className="text-sm text-muted-foreground">
+                  {customer.email}
+                </p>
               </div>
-            ))}
-          </div>
+              <div className="ml-auto font-medium">
+                +${formatNumber(customer.totalSpent)}
+              </div>
+            </div>
+          ))}
         </CardContent>
       </Card>
     </div>

src/app/(dashboard)/dashboard/stores/[storeId]/products/page.tsx

@@ -66,8 +66,8 @@ export default async function ProductsPage({
   const toDay = to ? new Date(to) : undefined
 
   // Transaction is used to ensure both queries are executed in a single transaction
-  noStore()
   const productsPromise = db.transaction(async (tx) => {
+    noStore()
     try {
       const data = await tx
         .select({

src/app/layout.tsx

@@ -6,7 +6,7 @@ import "@/styles/globals.css"
 
 import { siteConfig } from "@/config/site"
 import { fontHeading, fontMono, fontSans } from "@/lib/fonts"
-import { cn } from "@/lib/utils"
+import { absoluteUrl, cn } from "@/lib/utils"
 import { Toaster } from "@/components/ui/toaster"
 import { Analytics } from "@/components/analytics"
 import { ThemeProvider } from "@/components/providers"
@@ -52,6 +52,7 @@ export const metadata: Metadata = {
   icons: {
     icon: "/icon.png",
   },
+  manifest: absoluteUrl("/site.webmanifest"),
 }
 
 export const viewport: Viewport = {

src/components/blur-image.tsx

@@ -0,0 +1,27 @@
+"use client"
+
+// Original source: https://github.com/vercel/platforms/blob/main/components/blur-image.tsx
+import type { ComponentProps } from "react"
+import * as React from "react"
+import Image from "next/image"
+
+import { cn } from "@/lib/utils"
+
+interface BlurImageProps extends ComponentProps<typeof Image> {}
+
+export function BlurImage({ className, alt, ...props }: BlurImageProps) {
+  const [isLoading, setLoading] = React.useState(true)
+
+  return (
+    <Image
+      alt={alt}
+      className={cn(
+        className,
+        "duration-700 ease-in-out",
+        isLoading ? "scale-105 blur-lg" : "scale-100 blur-0"
+      )}
+      onLoad={() => setLoading(false)}
+      {...props}
+    />
+  )
+}

src/lib/utils.ts

@@ -127,11 +127,11 @@ export function catchError(err: unknown) {
     const errors = err.issues.map((issue) => {
       return issue.message
     })
-    return toast(errors.join("\n"))
+    return toast.error(errors.join("\n"))
   } else if (err instanceof Error) {
-    return toast(err.message)
+    return toast.error(err.message)
   } else {
-    return toast("Something went wrong, please try again later.")
+    return toast.error("Something went wrong, please try again later.")
   }
 }