From 24a492fae4b96d3c60289ff2b89caa13334ac411 Mon Sep 17 00:00:00 2001
From: Udoh Jeremiah <udohjeremiah@icloud.com>
Date: Tue, 2 Apr 2024 23:57:43 +0100
Subject: [PATCH] Refactor website code and components.

---
 .../billboards/[billboardId]/page.tsx         |   2 +-
 .../categories/[categoryId]/page.tsx          |   2 +-
 .../[storeId]/colors/[colorId]/page.tsx       |   8 +-
 src/app/(dashboard)/[storeId]/layout.tsx      |  13 +-
 .../[storeId]/products/[productId]/page.tsx   |   2 +-
 .../[storeId]/sizes/[sizeId]/page.tsx         |   2 +-
 src/app/(root)/layout.tsx                     |   7 +-
 src/app/(root)/page.tsx                       |   2 +-
 src/components/StoreSwitcher.tsx              | 122 +++++++++---------
 src/components/columns/BillboardColumns.tsx   |  93 +++++++------
 src/components/columns/CategoryColumns.tsx    |  93 +++++++------
 src/components/columns/ColorColumns.tsx       |  93 +++++++------
 src/components/columns/ProductColumns.tsx     |  91 +++++++------
 src/components/columns/SizeColumns.tsx        |  93 +++++++------
 src/components/dialogs/CreateStoreDialog.tsx  |  30 +++--
 .../dialogs/DeleteBillboardDialog.tsx         |  56 ++++----
 .../dialogs/DeleteCategoryDialog.tsx          |  58 ++++-----
 src/components/dialogs/DeleteColorDialog.tsx  |  56 ++++----
 .../dialogs/DeleteProductDialog.tsx           |  56 ++++----
 src/components/dialogs/DeleteSizeDialog.tsx   |  56 ++++----
 src/components/dialogs/DeleteStoreDialog.tsx  |  17 ++-
 src/hooks/use-create-store.ts                 |   9 --
 src/providers/CreateStoreProvider.tsx         |  29 -----
 23 files changed, 508 insertions(+), 482 deletions(-)
 delete mode 100644 src/hooks/use-create-store.ts
 delete mode 100644 src/providers/CreateStoreProvider.tsx

diff --git a/src/app/(dashboard)/[storeId]/billboards/[billboardId]/page.tsx b/src/app/(dashboard)/[storeId]/billboards/[billboardId]/page.tsx
index 0fb5e49..8d32c82 100644
--- a/src/app/(dashboard)/[storeId]/billboards/[billboardId]/page.tsx
+++ b/src/app/(dashboard)/[storeId]/billboards/[billboardId]/page.tsx
@@ -80,12 +80,12 @@ export default async function BillboardPage({ params }: BillboardPageProps) {
           description={`Manage this billboard for your ${store?.name} store.`}
         />
         <DeleteBillboardDialog
+          defaultState={true}
           billboard={{
             id: billboard.id,
             label: billboard.label,
             createdAt: format(billboard.createdAt, "MMMM do, yyyy"),
           }}
-          triggerBtnClassName="w-max"
         />
       </div>
       <Separator />
diff --git a/src/app/(dashboard)/[storeId]/categories/[categoryId]/page.tsx b/src/app/(dashboard)/[storeId]/categories/[categoryId]/page.tsx
index 6fbca39..2710850 100644
--- a/src/app/(dashboard)/[storeId]/categories/[categoryId]/page.tsx
+++ b/src/app/(dashboard)/[storeId]/categories/[categoryId]/page.tsx
@@ -89,13 +89,13 @@ export default async function CategoryPage({ params }: CategoryPageProps) {
           description={`Manage the ${category.name} category for your ${store?.name} store.`}
         />
         <DeleteCategoryDialog
+          defaultState={true}
           category={{
             id: category.id,
             name: category.name,
             billboardLabel: category.Billboard.label,
             createdAt: format(category.createdAt, "MMMM do, yyyy"),
           }}
-          triggerBtnClassName="w-max"
         />
       </div>
       <Separator />
diff --git a/src/app/(dashboard)/[storeId]/colors/[colorId]/page.tsx b/src/app/(dashboard)/[storeId]/colors/[colorId]/page.tsx
index a30b8ed..36c4586 100644
--- a/src/app/(dashboard)/[storeId]/colors/[colorId]/page.tsx
+++ b/src/app/(dashboard)/[storeId]/colors/[colorId]/page.tsx
@@ -80,23 +80,23 @@ export default async function ColorPage({ params }: ColorPageProps) {
         )}
       >
         <Heading
-          title={`${store?.name} Store Billboard`}
-          description={`Manage this billboard for your ${store?.name} store.`}
+          title={`${store?.name} Store Color`}
+          description={`Manage this color for your ${store?.name} store.`}
         />
         <DeleteColorDialog
+          defaultState={true}
           color={{
             id: color.id,
             name: color.name,
             value: color.value,
             createdAt: format(color.createdAt, "MMMM do, yyyy"),
           }}
-          triggerBtnClassName="w-max"
         />
       </div>
       <Separator />
       <ColorForm color={color} />
       <Separator />
-      <Heading title="API" description="API calls for billboard" />
+      <Heading title="API" description="API calls for colors" />
       <APIList
         apis={[
           {
diff --git a/src/app/(dashboard)/[storeId]/layout.tsx b/src/app/(dashboard)/[storeId]/layout.tsx
index 50b0d86..0336cbd 100644
--- a/src/app/(dashboard)/[storeId]/layout.tsx
+++ b/src/app/(dashboard)/[storeId]/layout.tsx
@@ -4,14 +4,12 @@ import { auth, ClerkProvider } from "@clerk/nextjs";
 
 import "@/styles/globals.css";
 
-import CreateStoreDialog from "@/components/dialogs/CreateStoreDialog";
 import Header from "@/components/layout/Header";
 import Footer from "@/components/layout/Footer";
 import { Toaster } from "@/components/ui/sonner";
 
 import prisma from "@/lib/prisma";
 
-import CreateStoreProvider from "@/providers/CreateStoreProvider";
 import ThemeProvider from "@/providers/ThemeProvider";
 
 interface DashboardLayoutProps {
@@ -47,13 +45,10 @@ export default async function DashboardLayout({
             enableSystem
             disableTransitionOnChange
           >
-            <CreateStoreProvider>
-              <Header />
-              {children}
-              <Footer />
-              <CreateStoreDialog />
-              <Toaster closeButton richColors />
-            </CreateStoreProvider>
+            <Header />
+            {children}
+            <Footer />
+            <Toaster closeButton richColors />
           </ThemeProvider>
         </body>
       </html>
diff --git a/src/app/(dashboard)/[storeId]/products/[productId]/page.tsx b/src/app/(dashboard)/[storeId]/products/[productId]/page.tsx
index c19d014..9fade0d 100644
--- a/src/app/(dashboard)/[storeId]/products/[productId]/page.tsx
+++ b/src/app/(dashboard)/[storeId]/products/[productId]/page.tsx
@@ -102,6 +102,7 @@ export default async function ProductPage({ params }: ProductPageProps) {
           description={`Manage this product for your ${store?.name} store.`}
         />
         <DeleteProductDialog
+          defaultState={true}
           product={{
             id: product.id,
             name: product.name,
@@ -116,7 +117,6 @@ export default async function ProductPage({ params }: ProductPageProps) {
             color: product.Color.value,
             createdAt: format(product.createdAt, "MMMM do, yyyy"),
           }}
-          triggerBtnClassName="w-max"
         />
       </div>
       <Separator />
diff --git a/src/app/(dashboard)/[storeId]/sizes/[sizeId]/page.tsx b/src/app/(dashboard)/[storeId]/sizes/[sizeId]/page.tsx
index 61a102b..1dc4cbe 100644
--- a/src/app/(dashboard)/[storeId]/sizes/[sizeId]/page.tsx
+++ b/src/app/(dashboard)/[storeId]/sizes/[sizeId]/page.tsx
@@ -84,13 +84,13 @@ export default async function SizePage({ params }: SizePageProps) {
           description={`Manage this billboard for your ${store?.name} store.`}
         />
         <DeleteSizeDialog
+          defaultState={true}
           size={{
             id: size.id,
             name: size.name,
             value: size.value,
             createdAt: format(size.createdAt, "MMMM do, yyyy"),
           }}
-          triggerBtnClassName="w-max"
         />
       </div>
       <Separator />
diff --git a/src/app/(root)/layout.tsx b/src/app/(root)/layout.tsx
index 607ffe0..c28589c 100644
--- a/src/app/(root)/layout.tsx
+++ b/src/app/(root)/layout.tsx
@@ -6,7 +6,6 @@ import "@/styles/globals.css";
 
 import { Toaster } from "@/components/ui/sonner";
 
-import CreateStoreProvider from "@/providers/CreateStoreProvider";
 import ThemeProvider from "@/providers/ThemeProvider";
 
 interface RootLayoutProps {
@@ -30,10 +29,8 @@ export default function RootLayout({ children }: RootLayoutProps) {
             enableSystem
             disableTransitionOnChange
           >
-            <CreateStoreProvider>
-              {children}
-              <Toaster closeButton richColors />
-            </CreateStoreProvider>
+            {children}
+            <Toaster closeButton richColors />
           </ThemeProvider>
         </body>
       </html>
diff --git a/src/app/(root)/page.tsx b/src/app/(root)/page.tsx
index 51a2307..c5f6802 100644
--- a/src/app/(root)/page.tsx
+++ b/src/app/(root)/page.tsx
@@ -19,5 +19,5 @@ export default async function RootPage() {
     redirect(`/${store.id}`);
   }
 
-  return <CreateStoreDialog initialState={true} />;
+  return <CreateStoreDialog defaultState={true} />;
 }
diff --git a/src/components/StoreSwitcher.tsx b/src/components/StoreSwitcher.tsx
index bd9688c..e7984f3 100644
--- a/src/components/StoreSwitcher.tsx
+++ b/src/components/StoreSwitcher.tsx
@@ -12,6 +12,7 @@ import {
   StoreIcon,
 } from "lucide-react";
 
+import CreateStoreDialog from "@/components/dialogs/CreateStoreDialog";
 import { Button } from "@/components/ui/button";
 import {
   Command,
@@ -28,8 +29,6 @@ import {
   PopoverTrigger,
 } from "@/components/ui/popover";
 
-import { useCreateStore } from "@/hooks/use-create-store";
-
 interface StoreSwitcherProps {
   stores: Store[];
 }
@@ -37,74 +36,81 @@ interface StoreSwitcherProps {
 export default function StoreSwitcher({ stores = [] }: StoreSwitcherProps) {
   const params = useParams();
 
-  const [open, setOpen] = useState(false);
   const [currentStore, setCurrentStore] = useState(
     stores.find((store) => store.id === params.storeId)?.id,
   );
+  const [open, setOpen] = useState(false);
+  const [showCreateDialog, setShowCreateDialog] = useState(false);
 
   const router = useRouter();
 
-  const { setCreateStore } = useCreateStore();
-
   return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <Button
-          variant="outline"
-          role="combobox"
-          aria-label="Select a store"
-          aria-expanded={open}
-          className="w-[200px] justify-between"
-        >
-          <StoreIcon className="mr-2 h-4 w-4" />
-          {currentStore
-            ? stores.find((store) => store.id === currentStore)?.name
-            : "Select store..."}
-          <ChevronsUpDownIcon className="ml-auto h-4 w-4 shrink-0 opacity-50" />
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className="w-[200px] p-0">
-        <Command>
-          <CommandInput placeholder="Search store..." className="h-9" />
-          <CommandList>
-            <CommandEmpty>No store found.</CommandEmpty>
-            <CommandGroup heading="Stores">
-              {stores.map((store) => (
+    <>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            role="combobox"
+            aria-label="Select a store"
+            aria-expanded={open}
+            className="w-[200px] justify-between"
+          >
+            <StoreIcon className="mr-2 h-4 w-4" />
+            {currentStore
+              ? stores.find((store) => store.id === currentStore)?.name
+              : "Select store..."}
+            <ChevronsUpDownIcon className="ml-auto h-4 w-4 shrink-0 opacity-50" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-[200px] p-0">
+          <Command>
+            <CommandInput placeholder="Search store..." className="h-9" />
+            <CommandList>
+              <CommandEmpty>No store found.</CommandEmpty>
+              <CommandGroup heading="Stores">
+                {stores.map((store) => (
+                  <CommandItem
+                    key={store.id}
+                    value={store.name}
+                    onSelect={() => {
+                      setCurrentStore(store.id);
+                      setOpen(false);
+                      router.push(`/${store.id}`);
+                    }}
+                  >
+                    <StoreIcon className="mr-2 h-4 w-4" />
+                    {store.name}
+                    {currentStore === store.id && (
+                      <CheckIcon className="ml-auto h-4 w-4" />
+                    )}
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+              <CommandSeparator />
+              <CommandGroup>
                 <CommandItem
-                  key={store.id}
-                  value={store.name}
                   onSelect={() => {
-                    setCurrentStore(store.id);
                     setOpen(false);
-                    router.push(`/${store.id}`);
+                    setShowCreateDialog(true);
                   }}
+                  className="p-0"
                 >
-                  <StoreIcon className="mr-2 h-4 w-4" />
-                  {store.name}
-                  {currentStore === store.id && (
-                    <CheckIcon className="ml-auto h-4 w-4" />
-                  )}
+                  <Button variant="default" className="w-full">
+                    <CirclePlusIcon className="mr-2 h-4 w-4" />
+                    Create Store
+                  </Button>
                 </CommandItem>
-              ))}
-            </CommandGroup>
-            <CommandSeparator />
-            <CommandGroup>
-              <CommandItem
-                onSelect={() => {
-                  setOpen(false);
-                  setCreateStore(true);
-                }}
-                className="p-0"
-              >
-                <Button variant="default" className="w-full">
-                  <CirclePlusIcon className="mr-2 h-4 w-4" />
-                  Create Store
-                </Button>
-              </CommandItem>
-            </CommandGroup>
-          </CommandList>
-        </Command>
-      </PopoverContent>
-    </Popover>
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+      {showCreateDialog && (
+        <CreateStoreDialog
+          open={showCreateDialog}
+          setOpen={setShowCreateDialog}
+        />
+      )}
+    </>
   );
 }
diff --git a/src/components/columns/BillboardColumns.tsx b/src/components/columns/BillboardColumns.tsx
index b74929f..c43f1c4 100644
--- a/src/components/columns/BillboardColumns.tsx
+++ b/src/components/columns/BillboardColumns.tsx
@@ -1,9 +1,17 @@
 "use client";
 
+import { useState } from "react";
+
 import { useParams, useRouter } from "next/navigation";
 
 import { ColumnDef } from "@tanstack/react-table";
-import { ArrowUpDown, CopyIcon, EditIcon, MoreHorizontal } from "lucide-react";
+import {
+  ArrowUpDown,
+  CopyIcon,
+  EditIcon,
+  MoreHorizontal,
+  TrashIcon,
+} from "lucide-react";
 import { toast } from "sonner";
 
 import DeleteBillboardDialog from "@/components/dialogs/DeleteBillboardDialog";
@@ -58,52 +66,57 @@ export const columns: ColumnDef<BillboardColumn>[] = [
 ];
 
 export function BillboardCellActions({ row }: { row: BillboardColumn }) {
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+
   const params = useParams();
   const router = useRouter();
 
   return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="ghost" className="h-8 w-8 p-0">
-          <MoreHorizontal className="h-4 w-4" />
-          <span className="sr-only">Open menu</span>
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent>
-        <DropdownMenuLabel>Actions</DropdownMenuLabel>
-        <div className="space-y-1">
-          <DropdownMenuItem
-            asChild
-            onClick={() => {
-              navigator.clipboard.writeText(row.id);
-              toast.success("✅ Billboard ID copied successfully.");
-            }}
-          >
-            <Button variant="ghost" className="w-full justify-start">
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" className="h-8 w-8 p-0">
+            <MoreHorizontal className="h-4 w-4" />
+            <span className="sr-only">Open menu</span>
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuLabel>Actions</DropdownMenuLabel>
+          <div className="space-y-1">
+            <DropdownMenuItem
+              onClick={() => {
+                navigator.clipboard.writeText(row.id);
+                toast.success("✅ Billboard ID copied successfully.");
+              }}
+            >
               <CopyIcon className="mr-2 h-4 w-4" />
               Copy ID
-            </Button>
-          </DropdownMenuItem>
-          <DropdownMenuItem
-            asChild
-            onClick={() =>
-              router.push(`/${params.storeId}/billboards/${row.id}`)
-            }
-          >
-            <Button variant="ghost" className="w-full justify-start">
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onClick={() =>
+                router.push(`/${params.storeId}/billboards/${row.id}`)
+              }
+            >
               <EditIcon className="mr-2 h-4 w-4" />
               Update Billboard
-            </Button>
-          </DropdownMenuItem>
-          <DropdownMenuItem asChild>
-            <DeleteBillboardDialog
-              billboard={row}
-              variant="ghost"
-              triggerBtnClassName="w-full justify-start px-2 py-1.5 cursor-default"
-            />
-          </DropdownMenuItem>
-        </div>
-      </DropdownMenuContent>
-    </DropdownMenu>
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onSelect={() => setShowDeleteDialog(true)}
+              className="text-destructive"
+            >
+              <TrashIcon className="mr-2 h-4 w-4" />
+              Delete Billboard
+            </DropdownMenuItem>
+          </div>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      {showDeleteDialog && (
+        <DeleteBillboardDialog
+          open={showDeleteDialog}
+          setOpen={setShowDeleteDialog}
+          billboard={row}
+        />
+      )}
+    </>
   );
 }
diff --git a/src/components/columns/CategoryColumns.tsx b/src/components/columns/CategoryColumns.tsx
index a8c16d8..d06ca98 100644
--- a/src/components/columns/CategoryColumns.tsx
+++ b/src/components/columns/CategoryColumns.tsx
@@ -1,9 +1,17 @@
 "use client";
 
+import { useState } from "react";
+
 import { useParams, useRouter } from "next/navigation";
 
 import { ColumnDef } from "@tanstack/react-table";
-import { ArrowUpDown, CopyIcon, EditIcon, MoreHorizontal } from "lucide-react";
+import {
+  ArrowUpDown,
+  CopyIcon,
+  EditIcon,
+  MoreHorizontal,
+  TrashIcon,
+} from "lucide-react";
 import { toast } from "sonner";
 
 import DeleteCategoryDialog from "@/components/dialogs/DeleteCategoryDialog";
@@ -74,52 +82,57 @@ export const columns: ColumnDef<CategoryColumn>[] = [
 ];
 
 export function CategoryCellActions({ row }: { row: CategoryColumn }) {
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+
   const params = useParams();
   const router = useRouter();
 
   return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="ghost" className="h-8 w-8 p-0">
-          <MoreHorizontal className="h-4 w-4" />
-          <span className="sr-only">Open menu</span>
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent>
-        <DropdownMenuLabel>Actions</DropdownMenuLabel>
-        <div className="space-y-1">
-          <DropdownMenuItem
-            asChild
-            onClick={() => {
-              navigator.clipboard.writeText(row.id);
-              toast.success("✅ Category ID copied successfully.");
-            }}
-          >
-            <Button variant="ghost" className="w-full justify-start">
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" className="h-8 w-8 p-0">
+            <MoreHorizontal className="h-4 w-4" />
+            <span className="sr-only">Open menu</span>
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuLabel>Actions</DropdownMenuLabel>
+          <div className="space-y-1">
+            <DropdownMenuItem
+              onClick={() => {
+                navigator.clipboard.writeText(row.id);
+                toast.success("✅ Category ID copied successfully.");
+              }}
+            >
               <CopyIcon className="mr-2 h-4 w-4" />
               Copy ID
-            </Button>
-          </DropdownMenuItem>
-          <DropdownMenuItem
-            asChild
-            onClick={() =>
-              router.push(`/${params.storeId}/categories/${row.id}`)
-            }
-          >
-            <Button variant="ghost" className="w-full justify-start">
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onClick={() =>
+                router.push(`/${params.storeId}/categories/${row.id}`)
+              }
+            >
               <EditIcon className="mr-2 h-4 w-4" />
               Update Category
-            </Button>
-          </DropdownMenuItem>
-          <DropdownMenuItem asChild>
-            <DeleteCategoryDialog
-              category={row}
-              variant="ghost"
-              triggerBtnClassName="w-full justify-start px-2 py-1.5 cursor-default"
-            />
-          </DropdownMenuItem>
-        </div>
-      </DropdownMenuContent>
-    </DropdownMenu>
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onSelect={() => setShowDeleteDialog(true)}
+              className="text-destructive"
+            >
+              <TrashIcon className="mr-2 h-4 w-4" />
+              Delete Category
+            </DropdownMenuItem>
+          </div>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      {showDeleteDialog && (
+        <DeleteCategoryDialog
+          open={showDeleteDialog}
+          setOpen={setShowDeleteDialog}
+          category={row}
+        />
+      )}
+    </>
   );
 }
diff --git a/src/components/columns/ColorColumns.tsx b/src/components/columns/ColorColumns.tsx
index 976ab8b..db6bb12 100644
--- a/src/components/columns/ColorColumns.tsx
+++ b/src/components/columns/ColorColumns.tsx
@@ -1,9 +1,17 @@
 "use client";
 
+import { useState } from "react";
+
 import { useParams, useRouter } from "next/navigation";
 
 import { ColumnDef } from "@tanstack/react-table";
-import { ArrowUpDown, CopyIcon, EditIcon, MoreHorizontal } from "lucide-react";
+import {
+  ArrowUpDown,
+  CopyIcon,
+  EditIcon,
+  MoreHorizontal,
+  TrashIcon,
+} from "lucide-react";
 import { toast } from "sonner";
 
 import DeleteColorDialog from "@/components/dialogs/DeleteColorDialog";
@@ -79,55 +87,60 @@ export const columns: ColumnDef<ColorColumn>[] = [
   },
   {
     id: "actions",
-    cell: ({ row }) => <BillboardCellActions row={row.original} />,
+    cell: ({ row }) => <ColorCellActions row={row.original} />,
   },
 ];
 
-export function BillboardCellActions({ row }: { row: ColorColumn }) {
+export function ColorCellActions({ row }: { row: ColorColumn }) {
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+
   const params = useParams();
   const router = useRouter();
 
   return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="ghost" className="h-8 w-8 p-0">
-          <MoreHorizontal className="h-4 w-4" />
-          <span className="sr-only">Open menu</span>
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent>
-        <DropdownMenuLabel>Actions</DropdownMenuLabel>
-        <div className="space-y-1">
-          <DropdownMenuItem
-            asChild
-            onClick={() => {
-              navigator.clipboard.writeText(row.id);
-              toast.success("✅ Color ID copied successfully.");
-            }}
-          >
-            <Button variant="ghost" className="w-full justify-start">
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" className="h-8 w-8 p-0">
+            <MoreHorizontal className="h-4 w-4" />
+            <span className="sr-only">Open menu</span>
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuLabel>Actions</DropdownMenuLabel>
+          <div className="space-y-1">
+            <DropdownMenuItem
+              onClick={() => {
+                navigator.clipboard.writeText(row.id);
+                toast.success("✅ Color ID copied successfully.");
+              }}
+            >
               <CopyIcon className="mr-2 h-4 w-4" />
               Copy ID
-            </Button>
-          </DropdownMenuItem>
-          <DropdownMenuItem
-            asChild
-            onClick={() => router.push(`/${params.storeId}/colors/${row.id}`)}
-          >
-            <Button variant="ghost" className="w-full justify-start">
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onClick={() => router.push(`/${params.storeId}/colors/${row.id}`)}
+            >
               <EditIcon className="mr-2 h-4 w-4" />
               Update Color
-            </Button>
-          </DropdownMenuItem>
-          <DropdownMenuItem asChild>
-            <DeleteColorDialog
-              color={row}
-              variant="ghost"
-              triggerBtnClassName="w-full justify-start px-2 py-1.5 cursor-default"
-            />
-          </DropdownMenuItem>
-        </div>
-      </DropdownMenuContent>
-    </DropdownMenu>
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onSelect={() => setShowDeleteDialog(true)}
+              className="text-destructive"
+            >
+              <TrashIcon className="mr-2 h-4 w-4" />
+              Delete Color
+            </DropdownMenuItem>
+          </div>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      {showDeleteDialog && (
+        <DeleteColorDialog
+          open={showDeleteDialog}
+          setOpen={setShowDeleteDialog}
+          color={row}
+        />
+      )}
+    </>
   );
 }
diff --git a/src/components/columns/ProductColumns.tsx b/src/components/columns/ProductColumns.tsx
index 500357e..f24b3cd 100644
--- a/src/components/columns/ProductColumns.tsx
+++ b/src/components/columns/ProductColumns.tsx
@@ -1,9 +1,17 @@
 "use client";
 
+import { useState } from "react";
+
 import { useParams, useRouter } from "next/navigation";
 
 import { ColumnDef } from "@tanstack/react-table";
-import { ArrowUpDown, CopyIcon, EditIcon, MoreHorizontal } from "lucide-react";
+import {
+  ArrowUpDown,
+  CopyIcon,
+  EditIcon,
+  MoreHorizontal,
+  TrashIcon,
+} from "lucide-react";
 import { toast } from "sonner";
 
 import DeleteProductDialog from "@/components/dialogs/DeleteProductDialog";
@@ -129,50 +137,57 @@ export const columns: ColumnDef<ProductColumn>[] = [
 ];
 
 export function ProductCellActions({ row }: { row: ProductColumn }) {
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+
   const params = useParams();
   const router = useRouter();
 
   return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="ghost" className="h-8 w-8 p-0">
-          <MoreHorizontal className="h-4 w-4" />
-          <span className="sr-only">Open menu</span>
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent>
-        <DropdownMenuLabel>Actions</DropdownMenuLabel>
-        <div className="space-y-1">
-          <DropdownMenuItem
-            asChild
-            onClick={() => {
-              navigator.clipboard.writeText(row.id);
-              toast.success("✅ Product ID copied successfully.");
-            }}
-          >
-            <Button variant="ghost" className="w-full justify-start">
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" className="h-8 w-8 p-0">
+            <MoreHorizontal className="h-4 w-4" />
+            <span className="sr-only">Open menu</span>
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuLabel>Actions</DropdownMenuLabel>
+          <div className="space-y-1">
+            <DropdownMenuItem
+              onClick={() => {
+                navigator.clipboard.writeText(row.id);
+                toast.success("✅ Product ID copied successfully.");
+              }}
+            >
               <CopyIcon className="mr-2 h-4 w-4" />
               Copy ID
-            </Button>
-          </DropdownMenuItem>
-          <DropdownMenuItem
-            asChild
-            onClick={() => router.push(`/${params.storeId}/products/${row.id}`)}
-          >
-            <Button variant="ghost" className="w-full justify-start">
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onClick={() =>
+                router.push(`/${params.storeId}/products/${row.id}`)
+              }
+            >
               <EditIcon className="mr-2 h-4 w-4" />
               Update Product
-            </Button>
-          </DropdownMenuItem>
-          <DropdownMenuItem asChild>
-            <DeleteProductDialog
-              product={row}
-              variant="ghost"
-              triggerBtnClassName="w-full justify-start px-2 py-1.5 cursor-default"
-            />
-          </DropdownMenuItem>
-        </div>
-      </DropdownMenuContent>
-    </DropdownMenu>
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onSelect={() => setShowDeleteDialog(true)}
+              className="text-destructive"
+            >
+              <TrashIcon className="mr-2 h-4 w-4" />
+              Delete Product
+            </DropdownMenuItem>
+          </div>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      {showDeleteDialog && (
+        <DeleteProductDialog
+          open={showDeleteDialog}
+          setOpen={setShowDeleteDialog}
+          product={row}
+        />
+      )}
+    </>
   );
 }
diff --git a/src/components/columns/SizeColumns.tsx b/src/components/columns/SizeColumns.tsx
index 027afd2..a5573a4 100644
--- a/src/components/columns/SizeColumns.tsx
+++ b/src/components/columns/SizeColumns.tsx
@@ -1,9 +1,17 @@
 "use client";
 
+import { useState } from "react";
+
 import { useParams, useRouter } from "next/navigation";
 
 import { ColumnDef } from "@tanstack/react-table";
-import { ArrowUpDown, CopyIcon, EditIcon, MoreHorizontal } from "lucide-react";
+import {
+  ArrowUpDown,
+  CopyIcon,
+  EditIcon,
+  MoreHorizontal,
+  TrashIcon,
+} from "lucide-react";
 import { toast } from "sonner";
 
 import DeleteSizeDialog from "@/components/dialogs/DeleteSizeDialog";
@@ -68,55 +76,60 @@ export const columns: ColumnDef<SizeColumn>[] = [
   },
   {
     id: "actions",
-    cell: ({ row }) => <BillboardCellActions row={row.original} />,
+    cell: ({ row }) => <SizeCellActions row={row.original} />,
   },
 ];
 
-export function BillboardCellActions({ row }: { row: SizeColumn }) {
+export function SizeCellActions({ row }: { row: SizeColumn }) {
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+
   const params = useParams();
   const router = useRouter();
 
   return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="ghost" className="h-8 w-8 p-0">
-          <MoreHorizontal className="h-4 w-4" />
-          <span className="sr-only">Open menu</span>
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent>
-        <DropdownMenuLabel>Actions</DropdownMenuLabel>
-        <div className="space-y-1">
-          <DropdownMenuItem
-            asChild
-            onClick={() => {
-              navigator.clipboard.writeText(row.id);
-              toast.success("✅ Size ID copied successfully.");
-            }}
-          >
-            <Button variant="ghost" className="w-full justify-start">
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" className="h-8 w-8 p-0">
+            <MoreHorizontal className="h-4 w-4" />
+            <span className="sr-only">Open menu</span>
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuLabel>Actions</DropdownMenuLabel>
+          <div className="space-y-1">
+            <DropdownMenuItem
+              onClick={() => {
+                navigator.clipboard.writeText(row.id);
+                toast.success("✅ Size ID copied successfully.");
+              }}
+            >
               <CopyIcon className="mr-2 h-4 w-4" />
               Copy ID
-            </Button>
-          </DropdownMenuItem>
-          <DropdownMenuItem
-            asChild
-            onClick={() => router.push(`/${params.storeId}/sizes/${row.id}`)}
-          >
-            <Button variant="ghost" className="w-full justify-start">
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onClick={() => router.push(`/${params.storeId}/sizes/${row.id}`)}
+            >
               <EditIcon className="mr-2 h-4 w-4" />
               Update Size
-            </Button>
-          </DropdownMenuItem>
-          <DropdownMenuItem asChild>
-            <DeleteSizeDialog
-              size={row}
-              variant="ghost"
-              triggerBtnClassName="w-full justify-start px-2 py-1.5 cursor-default"
-            />
-          </DropdownMenuItem>
-        </div>
-      </DropdownMenuContent>
-    </DropdownMenu>
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onSelect={() => setShowDeleteDialog(true)}
+              className="text-destructive"
+            >
+              <TrashIcon className="mr-2 h-4 w-4" />
+              Delete Size
+            </DropdownMenuItem>
+          </div>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      {showDeleteDialog && (
+        <DeleteSizeDialog
+          open={showDeleteDialog}
+          setOpen={setShowDeleteDialog}
+          size={row}
+        />
+      )}
+    </>
   );
 }
diff --git a/src/components/dialogs/CreateStoreDialog.tsx b/src/components/dialogs/CreateStoreDialog.tsx
index 53d29f6..d8cba12 100644
--- a/src/components/dialogs/CreateStoreDialog.tsx
+++ b/src/components/dialogs/CreateStoreDialog.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect } from "react";
+import { Dispatch, SetStateAction, useEffect, useState } from "react";
 
 import { useRouter } from "next/navigation";
 
@@ -31,8 +31,6 @@ import {
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 
-import { useCreateStore } from "@/hooks/use-create-store";
-
 const formSchema = z.object({
   name: z
     .string()
@@ -45,12 +43,18 @@ const formSchema = z.object({
 });
 
 interface CreateStoreDialogProps {
-  initialState?: boolean;
+  defaultState?: boolean;
+  open?: boolean;
+  setOpen?: Dispatch<SetStateAction<boolean>>;
 }
 
 export default function CreateStoreDialog({
-  initialState = false,
+  defaultState = false,
+  open,
+  setOpen,
 }: CreateStoreDialogProps) {
+  const [defaultOpen, setDefaultOpen] = useState(false);
+
   const router = useRouter();
 
   const form = useForm<z.infer<typeof formSchema>>({
@@ -60,11 +64,14 @@ export default function CreateStoreDialog({
     },
   });
 
-  const { createStore, setCreateStore } = useCreateStore();
+  if (defaultState) {
+    open = defaultOpen;
+    setOpen = setDefaultOpen;
+  }
 
   useEffect(() => {
-    if (initialState) {
-      setCreateStore(true);
+    if (defaultState) {
+      setOpen?.(true);
     }
   });
 
@@ -94,12 +101,15 @@ export default function CreateStoreDialog({
 
   return (
     <Dialog
-      open={createStore}
+      open={open}
       onOpenChange={(open) => {
         if (!open) {
           form.reset();
         }
-        setCreateStore(open);
+        if (!open && defaultOpen) {
+          router.refresh();
+        }
+        setOpen?.(open);
       }}
     >
       <DialogContent className="sm:max-w-md">
diff --git a/src/components/dialogs/DeleteBillboardDialog.tsx b/src/components/dialogs/DeleteBillboardDialog.tsx
index c5cc0ff..359321b 100644
--- a/src/components/dialogs/DeleteBillboardDialog.tsx
+++ b/src/components/dialogs/DeleteBillboardDialog.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { Dispatch, SetStateAction, useState } from "react";
 
 import { useParams, useRouter } from "next/navigation";
 
@@ -11,7 +11,6 @@ import { BillboardColumn } from "@/components/columns/BillboardColumns";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import {
   AlertDialog,
-  AlertDialogAction,
   AlertDialogCancel,
   AlertDialogContent,
   AlertDialogDescription,
@@ -25,31 +24,30 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 
 interface DeleteBillboardDialogProps {
+  defaultState?: boolean;
+  open?: boolean;
+  setOpen?: Dispatch<SetStateAction<boolean>>;
   billboard: BillboardColumn;
-  variant?:
-    | "default"
-    | "destructive"
-    | "outline"
-    | "secondary"
-    | "ghost"
-    | "link"
-    | null
-    | undefined;
-  triggerBtnClassName: string;
 }
 
 export default function DeleteBillboardDialog({
+  defaultState = false,
+  open,
+  setOpen,
   billboard,
-  variant = "destructive",
-  triggerBtnClassName,
 }: DeleteBillboardDialogProps) {
-  const [open, setOpen] = useState(false);
+  const [defaultOpen, setDefaultOpen] = useState(false);
   const [billboardLabel, setBillboardLabel] = useState("");
   const [isDeleting, setIsDeleting] = useState(false);
 
   const params = useParams();
   const router = useRouter();
 
+  if (defaultState) {
+    open = defaultOpen;
+    setOpen = setDefaultOpen;
+  }
+
   const onBillboardDelete = async () => {
     try {
       setIsDeleting(true);
@@ -88,15 +86,17 @@ export default function DeleteBillboardDialog({
         if (!open) {
           setBillboardLabel("");
         }
-        setOpen(open);
+        setOpen?.(open);
       }}
     >
-      <AlertDialogTrigger asChild>
-        <Button variant={variant} className={triggerBtnClassName}>
-          <TrashIcon className="mr-2 h-4 w-4" />
-          Delete Billboard
-        </Button>
-      </AlertDialogTrigger>
+      {defaultState && (
+        <AlertDialogTrigger asChild>
+          <Button variant="destructive" className="w-max">
+            <TrashIcon className="mr-2 h-4 w-4" />
+            Delete Billboard
+          </Button>
+        </AlertDialogTrigger>
+      )}
       <AlertDialogContent>
         <AlertDialogHeader>
           <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
@@ -130,12 +130,10 @@ export default function DeleteBillboardDialog({
         </div>
         <AlertDialogFooter>
           <AlertDialogCancel>Cancel</AlertDialogCancel>
-          <AlertDialogAction
+          <Button
+            variant="destructive"
             disabled={billboardLabel !== billboard.label || isDeleting}
-            onClick={(e) => {
-              e.preventDefault();
-              onBillboardDelete();
-            }}
+            onClick={onBillboardDelete}
           >
             {isDeleting ? (
               <>
@@ -143,9 +141,9 @@ export default function DeleteBillboardDialog({
                 Deleting
               </>
             ) : (
-              "Continue"
+              "Delete"
             )}
-          </AlertDialogAction>
+          </Button>
         </AlertDialogFooter>
       </AlertDialogContent>
     </AlertDialog>
diff --git a/src/components/dialogs/DeleteCategoryDialog.tsx b/src/components/dialogs/DeleteCategoryDialog.tsx
index 506ae1c..d48051a 100644
--- a/src/components/dialogs/DeleteCategoryDialog.tsx
+++ b/src/components/dialogs/DeleteCategoryDialog.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { Dispatch, SetStateAction, useState } from "react";
 
 import { useParams, useRouter } from "next/navigation";
 
@@ -11,7 +11,6 @@ import { CategoryColumn } from "@/components/columns/CategoryColumns";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import {
   AlertDialog,
-  AlertDialogAction,
   AlertDialogCancel,
   AlertDialogContent,
   AlertDialogDescription,
@@ -25,32 +24,31 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 
 interface DeleteCategoryDialogProps {
+  defaultState?: boolean;
+  open?: boolean;
+  setOpen?: Dispatch<SetStateAction<boolean>>;
   category: CategoryColumn;
-  variant?:
-    | "default"
-    | "destructive"
-    | "outline"
-    | "secondary"
-    | "ghost"
-    | "link"
-    | null
-    | undefined;
-  triggerBtnClassName: string;
 }
 
 export default function DeleteCategoryDialog({
+  defaultState = false,
+  open,
+  setOpen,
   category,
-  variant = "destructive",
-  triggerBtnClassName,
 }: DeleteCategoryDialogProps) {
-  const [open, setOpen] = useState(false);
+  const [defaultOpen, setDefaultOpen] = useState(false);
   const [categoryName, setCategoryName] = useState("");
   const [isDeleting, setIsDeleting] = useState(false);
 
   const params = useParams();
   const router = useRouter();
 
-  const onBillboardDelete = async () => {
+  if (defaultState) {
+    open = defaultOpen;
+    setOpen = setDefaultOpen;
+  }
+
+  const onCategoryDelete = async () => {
     try {
       setIsDeleting(true);
       const response = await fetch(
@@ -88,15 +86,17 @@ export default function DeleteCategoryDialog({
         if (!open) {
           setCategoryName("");
         }
-        setOpen(open);
+        setOpen?.(open);
       }}
     >
-      <AlertDialogTrigger asChild>
-        <Button variant={variant} className={triggerBtnClassName}>
-          <TrashIcon className="mr-2 h-4 w-4" />
-          Delete Category
-        </Button>
-      </AlertDialogTrigger>
+      {defaultState && (
+        <AlertDialogTrigger asChild>
+          <Button variant="destructive" className="w-max">
+            <TrashIcon className="mr-2 h-4 w-4" />
+            Delete Category
+          </Button>
+        </AlertDialogTrigger>
+      )}
       <AlertDialogContent>
         <AlertDialogHeader>
           <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
@@ -130,12 +130,10 @@ export default function DeleteCategoryDialog({
         </div>
         <AlertDialogFooter>
           <AlertDialogCancel>Cancel</AlertDialogCancel>
-          <AlertDialogAction
+          <Button
+            variant="destructive"
             disabled={categoryName !== category.name || isDeleting}
-            onClick={(e) => {
-              e.preventDefault();
-              onBillboardDelete();
-            }}
+            onClick={onCategoryDelete}
           >
             {isDeleting ? (
               <>
@@ -143,9 +141,9 @@ export default function DeleteCategoryDialog({
                 Deleting
               </>
             ) : (
-              "Continue"
+              "Delete"
             )}
-          </AlertDialogAction>
+          </Button>
         </AlertDialogFooter>
       </AlertDialogContent>
     </AlertDialog>
diff --git a/src/components/dialogs/DeleteColorDialog.tsx b/src/components/dialogs/DeleteColorDialog.tsx
index dd277cc..1fcc99a 100644
--- a/src/components/dialogs/DeleteColorDialog.tsx
+++ b/src/components/dialogs/DeleteColorDialog.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { Dispatch, SetStateAction, useState } from "react";
 
 import { useParams, useRouter } from "next/navigation";
 
@@ -11,7 +11,6 @@ import { ColorColumn } from "@/components/columns/ColorColumns";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import {
   AlertDialog,
-  AlertDialogAction,
   AlertDialogCancel,
   AlertDialogContent,
   AlertDialogDescription,
@@ -25,31 +24,30 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 
 interface DeleteColorDialogProps {
+  defaultState?: boolean;
+  open?: boolean;
+  setOpen?: Dispatch<SetStateAction<boolean>>;
   color: ColorColumn;
-  variant?:
-    | "default"
-    | "destructive"
-    | "outline"
-    | "secondary"
-    | "ghost"
-    | "link"
-    | null
-    | undefined;
-  triggerBtnClassName: string;
 }
 
 export default function DeleteColorDialog({
+  defaultState = false,
+  open,
+  setOpen,
   color,
-  variant = "destructive",
-  triggerBtnClassName,
 }: DeleteColorDialogProps) {
-  const [open, setOpen] = useState(false);
+  const [defaultOpen, setDefaultOpen] = useState(false);
   const [colorName, setColorName] = useState("");
   const [isDeleting, setIsDeleting] = useState(false);
 
   const params = useParams();
   const router = useRouter();
 
+  if (defaultState) {
+    open = defaultOpen;
+    setOpen = setDefaultOpen;
+  }
+
   const onColorDelete = async () => {
     try {
       setIsDeleting(true);
@@ -88,15 +86,17 @@ export default function DeleteColorDialog({
         if (!open) {
           setColorName("");
         }
-        setOpen(open);
+        setOpen?.(open);
       }}
     >
-      <AlertDialogTrigger asChild>
-        <Button variant={variant} className={triggerBtnClassName}>
-          <TrashIcon className="mr-2 h-4 w-4" />
-          Delete Color
-        </Button>
-      </AlertDialogTrigger>
+      {defaultState && (
+        <AlertDialogTrigger asChild>
+          <Button variant="destructive" className="w-max">
+            <TrashIcon className="mr-2 h-4 w-4" />
+            Delete Color
+          </Button>
+        </AlertDialogTrigger>
+      )}
       <AlertDialogContent>
         <AlertDialogHeader>
           <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
@@ -129,12 +129,10 @@ export default function DeleteColorDialog({
         </div>
         <AlertDialogFooter>
           <AlertDialogCancel>Cancel</AlertDialogCancel>
-          <AlertDialogAction
+          <Button
+            variant="destructive"
             disabled={colorName !== color.name || isDeleting}
-            onClick={(e) => {
-              e.preventDefault();
-              onColorDelete();
-            }}
+            onClick={onColorDelete}
           >
             {isDeleting ? (
               <>
@@ -142,9 +140,9 @@ export default function DeleteColorDialog({
                 Deleting
               </>
             ) : (
-              "Continue"
+              "Delete"
             )}
-          </AlertDialogAction>
+          </Button>
         </AlertDialogFooter>
       </AlertDialogContent>
     </AlertDialog>
diff --git a/src/components/dialogs/DeleteProductDialog.tsx b/src/components/dialogs/DeleteProductDialog.tsx
index f2c96c9..90a0ab5 100644
--- a/src/components/dialogs/DeleteProductDialog.tsx
+++ b/src/components/dialogs/DeleteProductDialog.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { Dispatch, SetStateAction, useState } from "react";
 
 import { useParams, useRouter } from "next/navigation";
 
@@ -11,7 +11,6 @@ import { ProductColumn } from "@/components/columns/ProductColumns";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import {
   AlertDialog,
-  AlertDialogAction,
   AlertDialogCancel,
   AlertDialogContent,
   AlertDialogDescription,
@@ -25,31 +24,30 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 
 interface DeleteProductDialogProps {
+  defaultState?: boolean;
+  open?: boolean;
+  setOpen?: Dispatch<SetStateAction<boolean>>;
   product: ProductColumn;
-  variant?:
-    | "default"
-    | "destructive"
-    | "outline"
-    | "secondary"
-    | "ghost"
-    | "link"
-    | null
-    | undefined;
-  triggerBtnClassName: string;
 }
 
 export default function DeleteProductDialog({
+  defaultState = false,
+  open,
+  setOpen,
   product,
-  variant = "destructive",
-  triggerBtnClassName,
 }: DeleteProductDialogProps) {
-  const [open, setOpen] = useState(false);
+  const [defaultOpen, setDefaultOpen] = useState(false);
   const [productName, setProductName] = useState("");
   const [isDeleting, setIsDeleting] = useState(false);
 
   const params = useParams();
   const router = useRouter();
 
+  if (defaultState) {
+    open = defaultOpen;
+    setOpen = setDefaultOpen;
+  }
+
   const onProductDelete = async () => {
     try {
       setIsDeleting(true);
@@ -88,15 +86,17 @@ export default function DeleteProductDialog({
         if (!open) {
           setProductName("");
         }
-        setOpen(open);
+        setOpen?.(open);
       }}
     >
-      <AlertDialogTrigger asChild>
-        <Button variant={variant} className={triggerBtnClassName}>
-          <TrashIcon className="mr-2 h-4 w-4" />
-          Delete Product
-        </Button>
-      </AlertDialogTrigger>
+      {defaultState && (
+        <AlertDialogTrigger asChild>
+          <Button variant="destructive" className="w-max">
+            <TrashIcon className="mr-2 h-4 w-4" />
+            Delete Product
+          </Button>
+        </AlertDialogTrigger>
+      )}
       <AlertDialogContent>
         <AlertDialogHeader>
           <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
@@ -130,12 +130,10 @@ export default function DeleteProductDialog({
         </div>
         <AlertDialogFooter>
           <AlertDialogCancel>Cancel</AlertDialogCancel>
-          <AlertDialogAction
+          <Button
+            variant="destructive"
             disabled={productName !== product.name || isDeleting}
-            onClick={(e) => {
-              e.preventDefault();
-              onProductDelete();
-            }}
+            onClick={onProductDelete}
           >
             {isDeleting ? (
               <>
@@ -143,9 +141,9 @@ export default function DeleteProductDialog({
                 Deleting
               </>
             ) : (
-              "Continue"
+              "Delete"
             )}
-          </AlertDialogAction>
+          </Button>
         </AlertDialogFooter>
       </AlertDialogContent>
     </AlertDialog>
diff --git a/src/components/dialogs/DeleteSizeDialog.tsx b/src/components/dialogs/DeleteSizeDialog.tsx
index d853d04..8d2dcad 100644
--- a/src/components/dialogs/DeleteSizeDialog.tsx
+++ b/src/components/dialogs/DeleteSizeDialog.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { Dispatch, SetStateAction, useState } from "react";
 
 import { useParams, useRouter } from "next/navigation";
 
@@ -11,7 +11,6 @@ import { SizeColumn } from "@/components/columns/SizeColumns";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import {
   AlertDialog,
-  AlertDialogAction,
   AlertDialogCancel,
   AlertDialogContent,
   AlertDialogDescription,
@@ -25,31 +24,30 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 
 interface DeleteSizeDialogProps {
+  defaultState?: boolean;
+  open?: boolean;
+  setOpen?: Dispatch<SetStateAction<boolean>>;
   size: SizeColumn;
-  variant?:
-    | "default"
-    | "destructive"
-    | "outline"
-    | "secondary"
-    | "ghost"
-    | "link"
-    | null
-    | undefined;
-  triggerBtnClassName: string;
 }
 
 export default function DeleteSizeDialog({
+  defaultState = false,
+  open,
+  setOpen,
   size,
-  variant = "destructive",
-  triggerBtnClassName,
 }: DeleteSizeDialogProps) {
-  const [open, setOpen] = useState(false);
+  const [defaultOpen, setDefaultOpen] = useState(false);
   const [sizeName, setSizeName] = useState("");
   const [isDeleting, setIsDeleting] = useState(false);
 
   const params = useParams();
   const router = useRouter();
 
+  if (defaultState) {
+    open = defaultOpen;
+    setOpen = setDefaultOpen;
+  }
+
   const onSizeDelete = async () => {
     try {
       setIsDeleting(true);
@@ -85,15 +83,17 @@ export default function DeleteSizeDialog({
         if (!open) {
           setSizeName("");
         }
-        setOpen(open);
+        setOpen?.(open);
       }}
     >
-      <AlertDialogTrigger asChild>
-        <Button variant={variant} className={triggerBtnClassName}>
-          <TrashIcon className="mr-2 h-4 w-4" />
-          Delete Size
-        </Button>
-      </AlertDialogTrigger>
+      {defaultState && (
+        <AlertDialogTrigger asChild>
+          <Button variant="destructive" className="w-max">
+            <TrashIcon className="mr-2 h-4 w-4" />
+            Delete Size
+          </Button>
+        </AlertDialogTrigger>
+      )}
       <AlertDialogContent>
         <AlertDialogHeader>
           <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
@@ -125,12 +125,10 @@ export default function DeleteSizeDialog({
         </div>
         <AlertDialogFooter>
           <AlertDialogCancel>Cancel</AlertDialogCancel>
-          <AlertDialogAction
+          <Button
+            variant="destructive"
             disabled={sizeName !== size.name || isDeleting}
-            onClick={(e) => {
-              e.preventDefault();
-              onSizeDelete();
-            }}
+            onClick={onSizeDelete}
           >
             {isDeleting ? (
               <>
@@ -138,9 +136,9 @@ export default function DeleteSizeDialog({
                 Deleting
               </>
             ) : (
-              "Continue"
+              "Delete"
             )}
-          </AlertDialogAction>
+          </Button>
         </AlertDialogFooter>
       </AlertDialogContent>
     </AlertDialog>
diff --git a/src/components/dialogs/DeleteStoreDialog.tsx b/src/components/dialogs/DeleteStoreDialog.tsx
index 7f0a1e1..f6e492e 100644
--- a/src/components/dialogs/DeleteStoreDialog.tsx
+++ b/src/components/dialogs/DeleteStoreDialog.tsx
@@ -11,7 +11,6 @@ import { toast } from "sonner";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import {
   AlertDialog,
-  AlertDialogAction,
   AlertDialogCancel,
   AlertDialogContent,
   AlertDialogDescription,
@@ -90,7 +89,9 @@ export default function DeleteStoreDialog({ store }: DeleteStoreDialogProps) {
           </Alert>
           <AlertDialogDescription>
             This action cannot be undone. It will permanently delete this store
-            and remove all associated data from our servers.
+            and remove all associated data from our servers. Please ensure that
+            you remove all billboards, categories, sizes, colors and products
+            associated this store before proceeding.
           </AlertDialogDescription>
         </AlertDialogHeader>
         <div className="flex items-center space-x-2">
@@ -108,12 +109,10 @@ export default function DeleteStoreDialog({ store }: DeleteStoreDialogProps) {
         </div>
         <AlertDialogFooter>
           <AlertDialogCancel>Cancel</AlertDialogCancel>
-          <AlertDialogAction
+          <Button
+            variant="destructive"
             disabled={storeName !== store.name || isDeleting}
-            onClick={(e) => {
-              e.preventDefault();
-              onStoreDelete();
-            }}
+            onClick={onStoreDelete}
           >
             {isDeleting ? (
               <>
@@ -121,9 +120,9 @@ export default function DeleteStoreDialog({ store }: DeleteStoreDialogProps) {
                 Deleting
               </>
             ) : (
-              "Continue"
+              "Delete"
             )}
-          </AlertDialogAction>
+          </Button>
         </AlertDialogFooter>
       </AlertDialogContent>
     </AlertDialog>
diff --git a/src/hooks/use-create-store.ts b/src/hooks/use-create-store.ts
deleted file mode 100644
index 7030341..0000000
--- a/src/hooks/use-create-store.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { useContext } from "react";
-
-import { CreateStoreContext } from "@/providers/CreateStoreProvider";
-
-export function useCreateStore() {
-  const { createStore, setCreateStore } = useContext(CreateStoreContext);
-
-  return { createStore, setCreateStore };
-}
diff --git a/src/providers/CreateStoreProvider.tsx b/src/providers/CreateStoreProvider.tsx
deleted file mode 100644
index 890e7c0..0000000
--- a/src/providers/CreateStoreProvider.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-"use client";
-
-import { Dispatch, SetStateAction, createContext, useState } from "react";
-
-interface CreateStoreContextType {
-  createStore: boolean;
-  setCreateStore: Dispatch<SetStateAction<boolean>>;
-}
-
-interface CreateStoreProviderProps {
-  children: React.ReactNode;
-}
-
-export const CreateStoreContext = createContext<CreateStoreContextType>({
-  createStore: false,
-  setCreateStore: () => {},
-});
-
-export default function CreateStoreProvider({
-  children,
-}: CreateStoreProviderProps) {
-  const [createStore, setCreateStore] = useState<boolean>(false);
-
-  return (
-    <CreateStoreContext.Provider value={{ createStore, setCreateStore }}>
-      {children}
-    </CreateStoreContext.Provider>
-  );
-}