feat(billing): account balance overview and settings sidebar

apps/deploy-web/src/components/alerts/AlertsPage.tsx

@@ -1,18 +1,44 @@
 import React, { type FC } from "react";
+import { buttonVariants, Tabs, TabsContent, TabsList, TabsTrigger } from "@akashnetwork/ui/components";
+import { cn } from "@akashnetwork/ui/utils";
+import { Plus } from "iconoir-react";
+import Link from "next/link";
 import { NextSeo } from "next-seo";
 
-import { AlertsLayout, AlertTabs } from "@src/components/alerts/AlertsLayout";
 import { AlertsListContainer } from "@src/components/alerts/AlertsListContainer/AlertsListContainer";
 import { AlertsListView } from "@src/components/alerts/AlertsListView/AlertsListView";
+import { NotificationChannelsListContainer } from "@src/components/alerts/NotificationChannelsListContainer/NotificationChannelsListContainer";
+import { NotificationChannelsListView } from "@src/components/alerts/NotificationChannelsListView/NotificationChannelsListView";
 import Layout from "@src/components/layout/Layout";
+import { SettingsLayout } from "@src/components/layout/SettingsLayout/SettingsLayout";
+import { UrlService } from "@src/utils/urlUtils";
 
 export const AlertsPage: FC = () => {
   return (
-    <Layout containerClassName="flex h-full flex-col justify-between">
-      <NextSeo title="Configured Alerts" />
-      <AlertsLayout page={AlertTabs.ALERTS} title="Configured Alerts">
-        <AlertsListContainer>{props => <AlertsListView {...props} />}</AlertsListContainer>
-      </AlertsLayout>
+    <Layout disableContainer containerClassName="flex h-full flex-col justify-between">
+      <NextSeo title="Alerts" />
+      <SettingsLayout title="Alerts" description="Get notified about your deployments and manage where alerts are sent.">
+        <Tabs defaultValue="alerts">
+          <TabsList>
+            <TabsTrigger value="alerts">Alerts</TabsTrigger>
+            <TabsTrigger value="channels">Notification Channels</TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="alerts" className="space-y-4">
+            <AlertsListContainer>{props => <AlertsListView {...props} />}</AlertsListContainer>
+          </TabsContent>
+
+          <TabsContent value="channels" className="space-y-4">
+            <div className="flex justify-end">
+              <Link href={UrlService.newNotificationChannel()} className={cn(buttonVariants({ variant: "default", size: "sm" }), "space-x-2")}>
+                <Plus />
+                <span>Create</span>
+              </Link>
+            </div>
+            <NotificationChannelsListContainer>{props => <NotificationChannelsListView {...props} />}</NotificationChannelsListContainer>
+          </TabsContent>
+        </Tabs>
+      </SettingsLayout>
     </Layout>
   );
 };

apps/deploy-web/src/components/alerts/CreateNotificationChannelPage.tsx

@@ -12,7 +12,7 @@ import { useNavigationGuard } from "@src/hooks/useNavigationGuard/useNavigationG
 import { UrlService } from "@src/utils/urlUtils";
 
 export const CreateNotificationChannelPage: React.FunctionComponent = () => {
-  const goBack = useBackNav(UrlService.notificationChannels());
+  const goBack = useBackNav(UrlService.alerts());
   const navGuard = useNavigationGuard();
 
   return (

apps/deploy-web/src/components/alerts/EditNotificationChannelPage.tsx

@@ -17,7 +17,7 @@ type Props = {
 };
 
 export const EditNotificationChannelPage: React.FunctionComponent<Props> = ({ notificationChannel }: Props) => {
-  const goBack = useBackNav(UrlService.notificationChannels());
+  const goBack = useBackNav(UrlService.alerts());
   const navGuard = useNavigationGuard();
   const saveNavStateAndGoBack = useCallback(() => {
     navGuard.toggle({ hasChanges: false });

apps/deploy-web/src/components/api-keys/ApiKeysPage/ApiKeysPage.tsx

@@ -5,11 +5,13 @@ import { useSnackbar } from "notistack";
 
 import { ApiKeyList } from "@src/components/api-keys/ApiKeyList";
 import Layout from "@src/components/layout/Layout";
+import { SettingsLayout } from "@src/components/layout/SettingsLayout/SettingsLayout";
 import { useServices } from "@src/context/ServicesProvider";
 import { useDeleteApiKey, useUserApiKeys } from "@src/queries/useApiKeysQuery";
 
 export const DEPENDENCIES = {
   Layout,
+  SettingsLayout,
   NextSeo,
   ApiKeyList,
   useUserApiKeys,
@@ -48,17 +50,19 @@ export function ApiKeysPage({ dependencies: d = DEPENDENCIES }: Props = {}) {
   };
 
   return (
-    <d.Layout isLoading={isLoading}>
+    <d.Layout isLoading={isLoading} disableContainer>
       <d.NextSeo title="API Keys" />
 
-      <d.ApiKeyList
-        apiKeys={apiKeys}
-        onDeleteApiKey={onDeleteApiKey}
-        onDeleteClose={onDeleteClose}
-        isDeleting={isDeleting}
-        apiKeyToDelete={apiKeyToDelete}
-        updateApiKeyToDelete={apiKey => setApiKeyToDelete(apiKey)}
-      />
+      <d.SettingsLayout>
+        <d.ApiKeyList
+          apiKeys={apiKeys}
+          onDeleteApiKey={onDeleteApiKey}
+          onDeleteClose={onDeleteClose}
+          isDeleting={isDeleting}
+          apiKeyToDelete={apiKeyToDelete}
+          updateApiKeyToDelete={apiKey => setApiKeyToDelete(apiKey)}
+        />
+      </d.SettingsLayout>
     </d.Layout>
   );
 }