add base ui and backups tab

packages/builder/src/components/portal/overview/backups/ActionsRenderer.svelte

@@ -0,0 +1,25 @@
+<script>
+  import { ActionButton, ActionMenu, MenuItem, Icon } from "@budibase/bbui"
+
+  export let value
+</script>
+
+<div class="cell">
+  <ActionButton>Restore</ActionButton>
+  <ActionMenu>
+    <div slot="control">
+      <Icon size="M" hoverable name="MoreSmallList" />
+    </div>
+
+    <MenuItem icon="Delete">Delete</MenuItem>
+  </ActionMenu>
+</div>
+
+<style>
+  .cell {
+    display: flex;
+    flex-direction: row;
+    gap: var(--spacing-m);
+    align-items: center;
+  }
+</style>

packages/builder/src/components/portal/overview/backups/AutomationsRenderer.svelte

@@ -0,0 +1,20 @@
+<script>
+  import { Icon } from "@budibase/bbui"
+
+  export let value
+  $: console.log(value)
+</script>
+
+<div class="cell">
+  <Icon name="JourneyVoyager" />
+  <div>{value.length}</div>
+</div>
+
+<style>
+  .cell {
+    display: flex;
+    flex-direction: row;
+    gap: var(--spacing-m);
+    align-items: center;
+  }
+</style>

packages/builder/src/components/portal/overview/backups/BackupsTab.svelte

@@ -0,0 +1,165 @@
+<script>
+  import {
+    ActionButton,
+    Layout,
+    Pagination,
+    Select,
+    Table,
+    Modal,
+  } from "@budibase/bbui"
+  import { onMount } from "svelte"
+  import { backups } from "stores/portal"
+  import DatasourceRenderer from "./DatasourceRenderer.svelte"
+  import ScreensRenderer from "./ScreensRenderer.svelte"
+  import AutomationsRenderer from "./AutomationsRenderer.svelte"
+  import CreateBackupModal from "./CreateBackupModal.svelte"
+  import TriggerRenderer from "./TriggerRenderer.svelte"
+  import ActionsRenderer from "./ActionsRenderer.svelte"
+
+  export let app
+  let backupData = null
+  let modal
+
+  const triggers = {
+    PUBLISH: "Publish",
+    SCHEDULED: "Scheduled",
+    MANUAL: "Manual",
+  }
+
+  const schema = {
+    trigger: {
+      displayName: "Trigger",
+    },
+    name: {
+      displayName: "Name",
+    },
+    date: {
+      displayName: "Date",
+    },
+    datasources: {
+      displayName: "Data",
+    },
+    screens: {
+      displayName: "Screens",
+    },
+    automations: {
+      displayName: "Automations",
+    },
+    userId: {
+      displayName: "User",
+    },
+    actions: {
+      displayName: null,
+    },
+  }
+
+  const customRenderers = [
+    { column: "datasources", component: DatasourceRenderer },
+    { column: "screens", component: ScreensRenderer },
+    { column: "automations", component: AutomationsRenderer },
+    { column: "trigger", component: TriggerRenderer },
+    { column: "actions", component: ActionsRenderer },
+  ]
+
+  async function fetchBackups() {
+    backups.load()
+    backupData = enrichBackupData($backups)
+  }
+
+  function enrichBackupData(backups) {
+    let enrichedBackups = backups.map(backup => {
+      return {
+        ...backup,
+        ...Object.assign(...backup.contents),
+      }
+    })
+
+    return enrichedBackups
+  }
+
+  function createManualBackup(name) {
+    backups.createManualBackup({ appId: app.appId, name })
+  }
+
+  onMount(async () => {
+    console.log(await backups.searchBackups(app.appId))
+
+    await fetchBackups()
+  })
+</script>
+
+<div class="root">
+  <Layout noPadding gap="M" alignContent="start">
+    <div class="search">
+      <div class="select">
+        <Select
+          placeholder="All"
+          label="Trigger"
+          options={Object.values(triggers)}
+        />
+      </div>
+      <div class="split-buttons">
+        <ActionButton on:click={modal.show} icon="SaveAsFloppy"
+          >Create new backup</ActionButton
+        >
+      </div>
+    </div>
+    {#if backupData}
+      <div>
+        <Table
+          {schema}
+          allowSelectRows={false}
+          allowEditColumns={false}
+          allowEditRows={false}
+          data={backupData}
+          {customRenderers}
+          placeholderText="No backups found"
+          border={false}
+        />
+        <div class="pagination">
+          <Pagination page={1} />
+        </div>
+      </div>
+    {/if}
+  </Layout>
+</div>
+
+<Modal bind:this={modal}>
+  <CreateBackupModal {createManualBackup} />
+</Modal>
+
+<style>
+  .root {
+    display: grid;
+    grid-template-columns: 1fr;
+    height: 100%;
+    padding: var(--spectrum-alias-grid-gutter-medium)
+      var(--spectrum-alias-grid-gutter-large);
+  }
+
+  .search {
+    display: flex;
+    gap: var(--spacing-xl);
+    width: 100%;
+    align-items: flex-end;
+  }
+
+  .select {
+    flex-basis: 150px;
+  }
+
+  .pagination {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    margin-top: var(--spacing-xl);
+  }
+
+  .split-buttons {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    flex: 1;
+    gap: var(--spacing-xl);
+  }
+</style>

packages/builder/src/components/portal/overview/backups/CreateBackupModal.svelte

@@ -0,0 +1,21 @@
+<script>
+  import { ModalContent, Input } from "@budibase/bbui"
+
+  export let createManualBackup
+
+  let name
+</script>
+
+<ModalContent
+  onConfirm={() => createManualBackup(name)}
+  title="Create new backup"
+  confirmText="Create"
+  ><Input
+    label="Backup name"
+    bind:value={name}
+    placeholder={"test"}
+  /></ModalContent
+>
+
+<style>
+</style>

packages/builder/src/components/portal/overview/backups/DatasourceRenderer.svelte

@@ -0,0 +1,19 @@
+<script>
+  import { Icon } from "@budibase/bbui"
+
+  export let value
+</script>
+
+<div class="cell">
+  <Icon name="Data" />
+  <div>{value.length}</div>
+</div>
+
+<style>
+  .cell {
+    display: flex;
+    flex-direction: row;
+    gap: var(--spacing-m);
+    align-items: center;
+  }
+</style>

packages/builder/src/components/portal/overview/backups/ScreensRenderer.svelte

@@ -0,0 +1,19 @@
+<script>
+  import { Icon } from "@budibase/bbui"
+
+  export let value
+</script>
+
+<div class="cell">
+  <Icon name="WebPage" />
+  <div>{value.length}</div>
+</div>
+
+<style>
+  .cell {
+    display: flex;
+    flex-direction: row;
+    gap: var(--spacing-m);
+    align-items: center;
+  }
+</style>

packages/builder/src/components/portal/overview/backups/TriggerRenderer.svelte

@@ -0,0 +1,27 @@
+<script>
+  import { Icon } from "@budibase/bbui"
+
+  export let value
+</script>
+
+<div class="cell">
+  {#if value === "PUBLISH"}
+    <Icon name="GlobeCheck" />
+    <div>{value}</div>
+  {:else if value === "MANUAL"}
+    <Icon name="Floppy" />
+    <div>{value}</div>
+  {:else if value === "SCHEDULED"}
+    <Icon name="Clock" />
+    <div>{value}</div>
+  {/if}
+</div>
+
+<style>
+  .cell {
+    display: flex;
+    flex-direction: row;
+    gap: var(--spacing-m);
+    align-items: center;
+  }
+</style>

packages/builder/src/pages/builder/portal/overview/[application]/index.svelte

@@ -33,6 +33,7 @@
   import ExportAppModal from "components/start/ExportAppModal.svelte"
   import { checkIncomingDeploymentStatus } from "components/deploy/utils"
   import { onDestroy, onMount } from "svelte"
+  import BackupsTab from "components/portal/overview/backups/BackupsTab.svelte"
 
   export let application
 
@@ -323,11 +324,9 @@
               <HistoryTab app={selectedApp} />
             </Tab>
           {/if}
-          {#if false}
           <Tab title="Backups">
-              <div class="container">Backups contents</div>
+            <BackupsTab app={selectedApp} />
           </Tab>
-          {/if}
           <Tab title="Settings">
             <SettingsTab app={selectedApp} />
           </Tab>