add Toast library and handling server errors - WIP

app/(prowler)/layout.tsx

@@ -3,6 +3,7 @@ import "@/styles/globals.css";
 import { Metadata, Viewport } from "next";
 import React from "react";
 
+import { Toaster } from "@/components";
 import { SidebarWrap } from "@/components/ui/sidebar";
 import { fontSans } from "@/config/fonts";
 import { siteConfig } from "@/config/site";
@@ -48,6 +49,7 @@ export default function RootLayout({
             <SidebarWrap />
             <main className="w-full h-full flex-1 flex-col p-4 mb-auto overflow-y-auto">
               {children}
+              <Toaster />
             </main>
           </div>
         </Providers>

app/(prowler)/providers/page.tsx

@@ -3,6 +3,7 @@ import React, { Suspense } from "react";
 
 import { getProvider } from "@/actions";
 import {
+  AddProvider,
   ColumnsProviders,
   DataTable,
   Header,
@@ -21,17 +22,20 @@ export default async function Providers() {
       <Header title="Providers" icon="fluent:cloud-sync-24-regular" />
       <Spacer />
       <div className="flex flex-col items-end w-full">
-        <ModalWrap
-          modalTitle="Modal Title"
-          modalBody={
-            <>
-              <p>Modal body content</p>
-            </>
-          }
-          actionButtonLabel="Save"
-          onAction={onSave}
-          openButtonLabel="Add Cloud Accounts"
-        />
+        <div className="flex space-x-6">
+          <AddProvider />
+          <ModalWrap
+            modalTitle="Modal Title"
+            modalBody={
+              <>
+                <p>Modal body content</p>
+              </>
+            }
+            actionButtonLabel="Save"
+            onAction={onSave}
+            openButtonLabel="Add Cloud Accounts"
+          />
+        </div>
         <Spacer y={6} />
         <Suspense fallback={<SkeletonTableProvider />}>
           <SSRDataTable />