satellite/admin/back-office/ui: use composition API

This change migrates Vue components of the new satellite admin web app
from the options API to the composition API.

Change-Id: Ie8c9bcd468f1c0fe0abc9ef0a3724563db096ba9

satellite/admin/back-office/ui/src/components/AccountActionsMenu.vue

@@ -80,7 +80,7 @@
     </v-menu>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { VMenu, VList, VListItem, VListItemTitle, VDivider } from 'vuetify/components';
 
 import AccountInformationDialog from '@/components/AccountInformationDialog.vue';
@@ -92,24 +92,4 @@ import AccountNewProjectDialog from '@/components/AccountNewProjectDialog.vue';
 import AccountGeofenceDialog from '@/components/AccountGeofenceDialog.vue';
 import AccountUserAgentsDialog from '@/components/AccountUserAgentsDialog.vue';
 import AccountLimitsDialog from '@/components/AccountLimitsDialog.vue';
-
-export default {
-    name: 'AccountsActionsMenu',
-    components: {
-        VMenu,
-        VList,
-        VListItem,
-        VListItemTitle,
-        VDivider,
-        AccountResetMFADialog,
-        AccountSuspendDialog,
-        AccountDeleteDialog,
-        AccountNewProjectDialog,
-        AccountGeofenceDialog,
-        AccountUserAgentsDialog,
-        AccountLimitsDialog,
-        AccountInformationDialog,
-        AccountStatusDialog,
-    },
-};
 </script>

satellite/admin/back-office/ui/src/components/AccountDeleteDialog.vue

@@ -78,7 +78,7 @@
     </v-dialog>
 
     <v-snackbar v-model="snackbar" :timeout="7000" color="success">
-        {{ text }}
+        The account was deleted successfully.
         <template #actions>
             <v-btn color="default" variant="text" @click="snackbar = false">
                 Close
@@ -87,7 +87,8 @@
     </v-snackbar>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref } from 'vue';
 import {
     VDialog,
     VCard,
@@ -106,36 +107,11 @@ import {
     VAlert,
 } from 'vuetify/components';
 
-export default {
+const snackbar = ref<boolean>(false);
-    components: {
+const dialog = ref<boolean>(false);
-        VDialog,
+
-        VCard,
+function onButtonClick() {
-        VSheet,
+    snackbar.value = true;
-        VCardItem,
+    dialog.value = false;
-        VCardTitle,
+}
-        VBtn,
-        VDivider,
-        VForm,
-        VRow,
-        VCol,
-        VTextField,
-        VCardActions,
-        VSnackbar,
-        VSelect,
-        VAlert,
-    },
-    data() {
-        return {
-            snackbar: false,
-            text: `The account was deleted successfully.`,
-            dialog: false,
-        };
-    },
-    methods: {
-        onButtonClick() {
-            this.snackbar = true;
-            this.dialog = false;
-        },
-    },
-};
 </script>

satellite/admin/back-office/ui/src/components/AccountGeofenceDialog.vue

@@ -64,7 +64,7 @@
     </v-dialog>
 
     <v-snackbar v-model="snackbar" :timeout="7000" color="success">
-        {{ text }}
+        The account placement was set successfully.
         <template #actions>
             <v-btn color="default" variant="text" @click="snackbar = false">
                 Close
@@ -73,7 +73,7 @@
     </v-snackbar>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import {
     VDialog,
     VCard,
@@ -91,35 +91,11 @@ import {
     VSelect,
 } from 'vuetify/components';
 
-export default {
+const snackbar = ref<boolean>(false);
-    components: {
+const dialog = ref<boolean>(false);
-        VDialog,
+
-        VCard,
+function onButtonClick() {
-        VSheet,
+    snackbar.value = true;
-        VCardItem,
+    dialog.value = false;
-        VCardTitle,
+}
-        VBtn,
-        VDivider,
-        VForm,
-        VRow,
-        VCol,
-        VTextField,
-        VCardActions,
-        VSnackbar,
-        VSelect,
-    },
-    data() {
-        return {
-            snackbar: false,
-            text: `The account placement was set successfully.`,
-            dialog: false,
-        };
-    },
-    methods: {
-        onButtonClick() {
-            this.snackbar = true;
-            this.dialog = false;
-        },
-    },
-};
 </script>

satellite/admin/back-office/ui/src/components/AccountInformationDialog.vue

@@ -65,7 +65,7 @@
     </v-dialog>
 
     <v-snackbar v-model="snackbar" :timeout="7000" color="success">
-        {{ text }}
+        Successfully saved the account information.
         <template #actions>
             <v-btn color="default" variant="text" @click="snackbar = false">
                 Close
@@ -74,7 +74,8 @@
     </v-snackbar>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref } from 'vue';
 import {
     VDialog,
     VCard,
@@ -92,35 +93,11 @@ import {
     VSelect,
 } from 'vuetify/components';
 
-export default {
+const snackbar = ref<boolean>(false);
-    components: {
+const dialog = ref<boolean>(false);
-        VDialog,
+
-        VCard,
+function onButtonClick() {
-        VSheet,
+    snackbar.value = true;
-        VCardItem,
+    dialog.value = false;
-        VCardTitle,
+}
-        VBtn,
-        VDivider,
-        VForm,
-        VRow,
-        VCol,
-        VTextField,
-        VCardActions,
-        VSnackbar,
-        VSelect,
-    },
-    data() {
-        return {
-            snackbar: false,
-            text: `Successfully saved the account information.`,
-            dialog: false,
-        };
-    },
-    methods: {
-        onButtonClick() {
-            this.snackbar = true;
-            this.dialog = false;
-        },
-    },
-};
 </script>

satellite/admin/back-office/ui/src/components/AccountLimitsDialog.vue

@@ -85,7 +85,7 @@
     </v-dialog>
 
     <v-snackbar v-model="snackbar" :timeout="7000" color="error">
-        {{ text }}
+        Error. Cannot change limits.
         <template #actions>
             <v-btn color="default" variant="text" @click="snackbar = false">
                 Close
@@ -94,7 +94,8 @@
     </v-snackbar>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref } from 'vue';
 import {
     VDialog,
     VCard,
@@ -111,34 +112,11 @@ import {
     VSnackbar,
 } from 'vuetify/components';
 
-export default {
+const snackbar = ref<boolean>(false);
-    components: {
+const dialog = ref<boolean>(false);
-        VDialog,
+
-        VCard,
+function onButtonClick() {
-        VSheet,
+    snackbar.value = true;
-        VCardItem,
+    dialog.value = false;
-        VCardTitle,
+}
-        VBtn,
-        VDivider,
-        VForm,
-        VRow,
-        VCol,
-        VTextField,
-        VCardActions,
-        VSnackbar,
-    },
-    data() {
-        return {
-            snackbar: false,
-            text: `Error. Cannot change limits.`,
-            dialog: false,
-        };
-    },
-    methods: {
-        onButtonClick() {
-            this.snackbar = true;
-            this.dialog = false;
-        },
-    },
-};
 </script>

satellite/admin/back-office/ui/src/components/AccountNewProjectDialog.vue

@@ -58,7 +58,7 @@
     </v-dialog>
 
     <v-snackbar v-model="snackbar" :timeout="7000" color="success">
-        {{ text }}
+        Project created successfully.
         <template #actions>
             <v-btn color="default" variant="text" @click="snackbar = false">
                 Close
@@ -67,7 +67,8 @@
     </v-snackbar>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref } from 'vue';
 import {
     VDialog,
     VCard,
@@ -84,34 +85,11 @@ import {
     VSnackbar,
 } from 'vuetify/components';
 
-export default {
+const snackbar = ref<boolean>(false);
-    components: {
+const dialog = ref<boolean>(false);
-        VDialog,
+
-        VCard,
+function onButtonClick() {
-        VSheet,
+    snackbar.value = true;
-        VCardItem,
+    dialog.value = false;
-        VCardTitle,
+}
-        VBtn,
-        VDivider,
-        VForm,
-        VRow,
-        VCol,
-        VTextField,
-        VCardActions,
-        VSnackbar,
-    },
-    data() {
-        return {
-            snackbar: false,
-            text: `Project created successfully.`,
-            dialog: false,
-        };
-    },
-    methods: {
-        onButtonClick() {
-            this.snackbar = true;
-            this.dialog = false;
-        },
-    },
-};
 </script>

satellite/admin/back-office/ui/src/components/AccountProjectsTableComponent.vue

@@ -85,98 +85,83 @@
     </v-card>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref } from 'vue';
 import { VCard, VTextField, VBtn, VIcon, VTooltip, VChip } from 'vuetify/components';
 import { VDataTable } from 'vuetify/labs/components';
 
 import ProjectActionsMenu from '@/components/ProjectActionsMenu.vue';
 
-export default {
+const search = ref<string>('');
-    components: {
+const selected = ref<string[]>([]);
-        VCard,
+const sortBy = ref([{ key: 'name', order: 'asc' }]);
-        VTextField,
+
-        VBtn,
+const headers = [
-        VIcon,
+    { title: 'Project ID', key: 'projectid', align: 'start' },
-        VTooltip,
+    // { title: 'Name', key: 'name'},
-        VChip,
+    { title: 'Storage Used', key: 'storagepercent' },
-        VDataTable,
+    { title: 'Storage Used', key: 'storageused' },
-        ProjectActionsMenu,
+    { title: 'Storage Limit', key: 'storagelimit' },
+    { title: 'Download Used', key: 'downloadpercent' },
+    { title: 'Download Used', key: 'downloadused' },
+    { title: 'Download Limit', key: 'downloadlimit' },
+    { title: 'Segments Used', key: 'segmentpercent' },
+    // { title: 'Value Attribution', key: 'agent' },
+    // { title: 'Date Created', key: 'date' },
+];
+const files = [
+    {
+        name: 'My First Project',
+        projectid: 'F82SR21Q284JF',
+        storageused: '150 TB',
+        storagelimit: '300 TB',
+        storagepercent: '50',
+        downloadused: '100 TB',
+        downloadlimit: '100 TB',
+        downloadpercent: '100',
+        segmentpercent: '43',
+        agent: 'Test Agent',
+        date: '02 Mar 2023',
     },
-    data() {
+    {
-        return {
+        name: 'Personal Project',
-            // search in the table
+        projectid: '284JFF82SR21Q',
-            search: '',
+        storageused: '24 TB',
-            selected: [],
+        storagelimit: '30 TB',
-            sortBy: [{ key: 'name', order: 'asc' }],
+        storagepercent: '80',
-            headers: [
+        downloadused: '7 TB',
-                { title: 'Project ID', key: 'projectid', align: 'start' },
+        downloadlimit: '100 TB',
-                // { title: 'Name', key: 'name'},
+        segmentpercent: '20',
-                { title: 'Storage Used', key: 'storagepercent' },
+        downloadpercent: '7',
-                { title: 'Storage Used', key: 'storageused' },
+        agent: 'Agent',
-                { title: 'Storage Limit', key: 'storagelimit' },
+        date: '21 Apr 2023',
-                { title: 'Download Used', key: 'downloadpercent' },
-                { title: 'Download Used', key: 'downloadused' },
-                { title: 'Download Limit', key: 'downloadlimit' },
-                { title: 'Segments Used', key: 'segmentpercent' },
-                // { title: 'Value Attribution', key: 'agent' },
-                // { title: 'Date Created', key: 'date' },
-            ],
-            files: [
-                {
-                    name: 'My First Project',
-                    projectid: 'F82SR21Q284JF',
-                    storageused: '150 TB',
-                    storagelimit: '300 TB',
-                    storagepercent: '50',
-                    downloadused: '100 TB',
-                    downloadlimit: '100 TB',
-                    downloadpercent: '100',
-                    segmentpercent: '43',
-                    agent: 'Test Agent',
-                    date: '02 Mar 2023',
-                },
-                {
-                    name: 'Personal Project',
-                    projectid: '284JFF82SR21Q',
-                    storageused: '24 TB',
-                    storagelimit: '30 TB',
-                    storagepercent: '80',
-                    downloadused: '7 TB',
-                    downloadlimit: '100 TB',
-                    segmentpercent: '20',
-                    downloadpercent: '7',
-                    agent: 'Agent',
-                    date: '21 Apr 2023',
-                },
-                {
-                    name: 'Test Project',
-                    projectid: '82SR21Q284JFF',
-                    storageused: '99 TB',
-                    storagelimit: '100 TB',
-                    storagepercent: '99',
-                    downloadused: '85 TB',
-                    downloadlimit: '100 TB',
-                    segmentpercent: '83',
-                    downloadpercent: '85',
-                    agent: 'Company',
-                    date: '21 Apr 2023',
-                },
-            ],
-        };
     },
-    methods: {
+    {
-        setSearch(searchText) {
+        name: 'Test Project',
-            this.search = searchText;
+        projectid: '82SR21Q284JFF',
-        },
+        storageused: '99 TB',
-        getPercentColor(percent) {
+        storagelimit: '100 TB',
-            if (percent >= 99) {
+        storagepercent: '99',
-                return 'error';
+        downloadused: '85 TB',
-            } else if (percent >= 80) {
+        downloadlimit: '100 TB',
-                return 'warning';
+        segmentpercent: '83',
-            } else {
+        downloadpercent: '85',
-                return 'success';
+        agent: 'Company',
-            }
+        date: '21 Apr 2023',
-        },
     },
-};
+];
+
+function setSearch(searchText: string) {
+    search.value = searchText;
+}
+
+function getPercentColor(percent: number) {
+    if (percent >= 99) {
+        return 'error';
+    } else if (percent >= 80) {
+        return 'warning';
+    } else {
+        return 'success';
+    }
+}
 </script>

satellite/admin/back-office/ui/src/components/AccountResetMFADialog.vue

@@ -58,7 +58,7 @@
     </v-dialog>
 
     <v-snackbar v-model="snackbar" :timeout="7000" color="success">
-        {{ text }}
+        The MFA was disabled successfully.
         <template #actions>
             <v-btn color="default" variant="text" @click="snackbar = false">
                 Close
@@ -67,7 +67,8 @@
     </v-snackbar>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref } from 'vue';
 import {
     VDialog,
     VCard,
@@ -84,34 +85,11 @@ import {
     VSnackbar,
 } from 'vuetify/components';
 
-export default {
+const snackbar = ref<boolean>(false);
-    components: {
+const dialog = ref<boolean>(false);
-        VDialog,
+
-        VCard,
+function onButtonClick() {
-        VSheet,
+    snackbar.value = true;
-        VCardItem,
+    dialog.value = false;
-        VCardTitle,
+}
-        VBtn,
-        VDivider,
-        VForm,
-        VRow,
-        VCol,
-        VTextField,
-        VCardActions,
-        VSnackbar,
-    },
-    data() {
-        return {
-            snackbar: false,
-            text: `The MFA was disabled successfully.`,
-            dialog: false,
-        };
-    },
-    methods: {
-        onButtonClick() {
-            this.snackbar = true;
-            this.dialog = false;
-        },
-    },
-};
 </script>

satellite/admin/back-office/ui/src/components/AccountStatusDialog.vue

@@ -59,7 +59,7 @@
     </v-dialog>
 
     <v-snackbar v-model="snackbar" :timeout="7000" color="success">
-        {{ text }}
+        Successfully saved the account status.
         <template #actions>
             <v-btn color="default" variant="text" @click="snackbar = false">
                 Close
@@ -68,7 +68,8 @@
     </v-snackbar>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref } from 'vue';
 import {
     VDialog,
     VCard,
@@ -86,35 +87,11 @@ import {
     VSnackbar,
 } from 'vuetify/components';
 
-export default {
+const snackbar = ref<boolean>(false);
-    components: {
+const dialog = ref<boolean>(false);
-        VDialog,
+
-        VCard,
+function onButtonClick() {
-        VSheet,
+    snackbar.value = true;
-        VCardItem,
+    dialog.value = false;
-        VCardTitle,
+}
-        VBtn,
-        VDivider,
-        VForm,
-        VRow,
-        VCol,
-        VSelect,
-        VTextField,
-        VCardActions,
-        VSnackbar,
-    },
-    data() {
-        return {
-            snackbar: false,
-            text: `Successfully saved the account status.`,
-            dialog: false,
-        };
-    },
-    methods: {
-        onButtonClick() {
-            this.snackbar = true;
-            this.dialog = false;
-        },
-    },
-};
 </script>

satellite/admin/back-office/ui/src/components/AccountSuspendDialog.vue

@@ -70,7 +70,7 @@
     </v-dialog>
 
     <v-snackbar v-model="snackbar" :timeout="7000" color="success">
-        {{ text }}
+        The account was suspended successfully.
         <template #actions>
             <v-btn color="default" variant="text" @click="snackbar = false">
                 Close
@@ -79,7 +79,8 @@
     </v-snackbar>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref } from 'vue';
 import {
     VDialog,
     VCard,
@@ -97,37 +98,13 @@ import {
     VSnackbar,
 } from 'vuetify/components';
 
-export default {
+const selected = ref<string[]>([]);
-    components: {
+const otherReason = ref<string>('');
-        VDialog,
+const snackbar = ref<boolean>(false);
-        VCard,
+const dialog = ref<boolean>(false);
-        VSheet,
+
-        VCardItem,
+function onButtonClick() {
-        VCardTitle,
+    snackbar.value = true;
-        VBtn,
+    dialog.value = false;
-        VDivider,
+}
-        VForm,
-        VRow,
-        VCol,
-        VSelect,
-        VTextField,
-        VCardActions,
-        VSnackbar,
-    },
-    data() {
-        return {
-            selected: [],
-            otherReason: '',
-            snackbar: false,
-            text: `The account was suspended successfully.`,
-            dialog: false,
-        };
-    },
-    methods: {
-        onButtonClick() {
-            this.snackbar = true;
-            this.dialog = false;
-        },
-    },
-};
 </script>

satellite/admin/back-office/ui/src/components/AccountUserAgentsDialog.vue

@@ -31,7 +31,7 @@
                     <v-col cols="12">
                         <v-select
                             label="Value Attribution" placeholder="Select the value attribution"
-                            :items="['User', 'Agent', 'Company', 'New']" model-value="Company" multiple chips required
+                            :items="['User', 'Agent', 'Company', 'New']" :model-value="['Company']" multiple chips required
                             variant="outlined" hide-details="auto" class="text-body"
                         />
                     </v-col>
@@ -62,7 +62,7 @@
     </v-dialog>
 
     <v-snackbar v-model="snackbar" :timeout="7000" color="success">
-        {{ text }}
+        Successfully saved the value attribution.
         <template #actions>
             <v-btn color="default" variant="text" @click="snackbar = false">
                 Close
@@ -71,7 +71,8 @@
     </v-snackbar>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref } from 'vue';
 import {
     VDialog,
     VCard,
@@ -89,35 +90,11 @@ import {
     VSnackbar,
 } from 'vuetify/components';
 
-export default {
+const snackbar = ref<boolean>(false);
-    components: {
+const dialog = ref<boolean>(false);
-        VDialog,
+
-        VCard,
+function onButtonClick() {
-        VSheet,
+    snackbar.value = true;
-        VCardItem,
+    dialog.value = false;
-        VCardTitle,
+}
-        VBtn,
-        VDivider,
-        VForm,
-        VRow,
-        VCol,
-        VSelect,
-        VTextField,
-        VCardActions,
-        VSnackbar,
-    },
-    data() {
-        return {
-            snackbar: false,
-            text: `Successfully saved the value attribution.`,
-            dialog: false,
-        };
-    },
-    methods: {
-        onButtonClick() {
-            this.snackbar = true;
-            this.dialog = false;
-        },
-    },
-};
 </script>

satellite/admin/back-office/ui/src/components/AccountsTableComponent.vue

@@ -81,221 +81,203 @@
     </v-card>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref } from 'vue';
 import { VCard, VTextField, VBtn, VIcon, VChip } from 'vuetify/components';
 import { VDataTable } from 'vuetify/labs/components';
 
 import AccountActionsMenu from '@/components/AccountActionsMenu.vue';
 
-export default {
+const search = ref<string>('');
-    name: 'AccountsTableComponent',
+const selected = ref<string[]>([]);
-    components: {
+const sortBy = ref([{ key: 'email', order: 'asc' }]);
-        VCard,
+
-        VTextField,
+const headers = [
-        VBtn,
+    { title: 'Account', key: 'email' },
-        VIcon,
+    { title: 'Type', key: 'type' },
-        VChip,
+    // { title: 'Name', key: 'name' },
-        VDataTable,
+    { title: 'Projects', key: 'projects' },
-        AccountActionsMenu,
+    { title: 'Storage', key: 'storage' },
+    { title: 'Download', key: 'download' },
+    { title: 'Status', key: 'status' },
+    { title: 'Value', key: 'agent' },
+    { title: 'Placement', key: 'placement' },
+    { title: 'ID', key: 'userid' },
+    { title: 'Created', key: 'date', align: 'start' },
+];
+const users = [
+    {
+        name: 'Magnolia Queen',
+        date: '12 Mar 2023',
+        type: 'Enterprise',
+        status: 'Active',
+        projects: '8',
+        storage: '1,000 TB',
+        download: '3,000 TB',
+        agent: 'Company',
+        email: 'magnolia@queen.com',
+        placement: 'global',
+        userid: '2521',
     },
-    data() {
+    {
-        return {
+        name: 'Irving Thacker',
-            search: '',
+        date: '30 May 2023',
-            selected: [],
+        type: 'Enterprise',
-            sortBy: [{ key: 'email', order: 'asc' }],
+        status: 'Active',
-            headers: [
+        projects: '3',
-                { title: 'Account', key: 'email' },
+        storage: '1,000 TB',
-                { title: 'Type', key: 'type' },
+        download: '3,000 TB',
-                // { title: 'Name', key: 'name' },
+        agent: 'Company',
-                { title: 'Projects', key: 'projects' },
+        email: 'itacker@gmail.com',
-                { title: 'Storage', key: 'storage' },
+        placement: 'global',
-                { title: 'Download', key: 'download' },
+        userid: '41',
-                { title: 'Status', key: 'status' },
-                { title: 'Value', key: 'agent' },
-                { title: 'Placement', key: 'placement' },
-                { title: 'ID', key: 'userid' },
-                { title: 'Created', key: 'date', align: 'start' },
-            ],
-            users: [
-                {
-                    name: 'Magnolia Queen',
-                    date: '12 Mar 2023',
-                    type: 'Enterprise',
-                    status: 'Active',
-                    projects: '8',
-                    storage: '1,000 TB',
-                    download: '3,000 TB',
-                    agent: 'Company',
-                    email: 'magnolia@queen.com',
-                    placement: 'global',
-                    userid: '2521',
-                },
-                {
-                    name: 'Irving Thacker',
-                    date: '30 May 2023',
-                    type: 'Enterprise',
-                    status: 'Active',
-                    projects: '3',
-                    storage: '1,000 TB',
-                    download: '3,000 TB',
-                    agent: 'Company',
-                    email: 'itacker@gmail.com',
-                    placement: 'global',
-                    userid: '41',
-                },
-                {
-                    name: 'Brianne Deighton',
-                    date: '20 Mar 2023',
-                    type: 'Enterprise',
-                    status: 'Active',
-                    projects: '1',
-                    storage: '1,000 TB',
-                    download: '3,000 TB',
-                    agent: 'Company',
-                    email: 'bd@rianne.net',
-                    placement: 'global',
-                    userid: '87212',
-                },
-                {
-                    name: 'Vince Duke',
-                    date: '4 Apr 2023',
-                    type: 'Priority',
-                    status: 'Active',
-                    projects: '5',
-                    storage: '500 TB',
-                    download: '500 TB',
-                    agent: 'User Agent',
-                    email: 'vduke@gmail.com',
-                    placement: 'global',
-                    userid: '53212',
-                },
-                {
-                    name: 'Aurora Knowles',
-                    date: '15 Mar 2023',
-                    type: 'Priority',
-                    status: 'Active',
-                    projects: '5',
-                    storage: '500 TB',
-                    download: '500 TB',
-                    agent: 'User Agent',
-                    email: 'knowles@aurora.io',
-                    placement: 'global',
-                    userid: '2',
-                },
-                {
-                    name: 'Luvenia Breckinridge',
-                    date: '11 Jan 2023',
-                    type: 'Priority',
-                    status: 'Frozen',
-                    projects: '3',
-                    storage: '500 TB',
-                    download: '500 TB',
-                    agent: 'User Agent',
-                    email: 'lbreckinridge42@gmail.com',
-                    placement: 'global',
-                    userid: '1244',
-                },
-                {
-                    name: 'Georgia Jordan',
-                    date: '15 Mar 2023',
-                    type: 'Pro',
-                    status: 'Active',
-                    projects: '3',
-                    storage: '75 TB',
-                    download: '300 TB',
-                    agent: 'Agent',
-                    email: 'georgia@jordan.net',
-                    placement: 'global',
-                    userid: '55524',
-                },
-                {
-                    name: 'Mckayla Bird',
-                    date: '5 May 2023',
-                    type: 'Pro',
-                    status: 'Active',
-                    projects: '2',
-                    storage: '75 TB',
-                    download: '300 TB',
-                    agent: 'Agent',
-                    email: 'mckaylabird@gmail.com',
-                    placement: 'global',
-                    userid: '102852',
-                },
-                {
-                    name: 'Herb Hamilton',
-                    date: '15 Mar 2023',
-                    type: 'Pro',
-                    status: 'Active',
-                    projects: '3',
-                    storage: '75 TB',
-                    download: '300 TB',
-                    agent: 'Agent',
-                    email: 'herbh@gmail.com',
-                    placement: 'global',
-                    userid: '248',
-                },
-                {
-                    name: 'Tria Goddard',
-                    date: '10 Mar 2023',
-                    type: 'Free',
-                    status: 'Frozen',
-                    projects: '1',
-                    storage: '1 TB',
-                    download: '3 TB',
-                    agent: 'Name',
-                    email: 'tg@tria.com',
-                    placement: 'global',
-                    userid: '12515',
-                },
-                {
-                    name: 'Scarlett Trevis',
-                    date: '24 Mar 2023',
-                    type: 'Free',
-                    status: 'Active',
-                    projects: '1',
-                    storage: '1 TB',
-                    download: '3 TB',
-                    agent: 'Name',
-                    email: 'sctrevis@gmail.com',
-                    placement: 'global',
-                    userid: '821',
-                },
-                {
-                    name: 'Destiny Brett',
-                    date: '29 Mar 2023',
-                    type: 'Free',
-                    status: 'Suspended',
-                    projects: '1',
-                    storage: '0 TB',
-                    download: '0 TB',
-                    agent: 'Test',
-                    email: 'destiny@gmail.com',
-                    placement: 'global',
-                    userid: '25808',
-                },
-            ],
-        };
     },
-    computed: {
+    {
-        getColor() {
+        name: 'Brianne Deighton',
-            return (type) => {
+        date: '20 Mar 2023',
-                if (type === 'Enterprise') return 'purple';
+        type: 'Enterprise',
-                if (type === 'Priority') return 'secondary';
+        status: 'Active',
-                if (type === 'Pro') return 'success';
+        projects: '1',
-                if (type === 'Free') return 'default';
+        storage: '1,000 TB',
-                if (type === 'Active') return 'success';
+        download: '3,000 TB',
-                if (type === 'Inactive') return 'default';
+        agent: 'Company',
-                if (type === 'Frozen') return 'warning';
+        email: 'bd@rianne.net',
-                if (type === 'Suspended') return 'error';
+        placement: 'global',
-                if (type === 'Deleted') return 'error';
+        userid: '87212',
-                return 'default';
-            };
-        },
     },
-    methods: {
+    {
-        setSearch(searchText) {
+        name: 'Vince Duke',
-            this.search = searchText;
+        date: '4 Apr 2023',
-        },
+        type: 'Priority',
+        status: 'Active',
+        projects: '5',
+        storage: '500 TB',
+        download: '500 TB',
+        agent: 'User Agent',
+        email: 'vduke@gmail.com',
+        placement: 'global',
+        userid: '53212',
     },
-};
+    {
+        name: 'Aurora Knowles',
+        date: '15 Mar 2023',
+        type: 'Priority',
+        status: 'Active',
+        projects: '5',
+        storage: '500 TB',
+        download: '500 TB',
+        agent: 'User Agent',
+        email: 'knowles@aurora.io',
+        placement: 'global',
+        userid: '2',
+    },
+    {
+        name: 'Luvenia Breckinridge',
+        date: '11 Jan 2023',
+        type: 'Priority',
+        status: 'Frozen',
+        projects: '3',
+        storage: '500 TB',
+        download: '500 TB',
+        agent: 'User Agent',
+        email: 'lbreckinridge42@gmail.com',
+        placement: 'global',
+        userid: '1244',
+    },
+    {
+        name: 'Georgia Jordan',
+        date: '15 Mar 2023',
+        type: 'Pro',
+        status: 'Active',
+        projects: '3',
+        storage: '75 TB',
+        download: '300 TB',
+        agent: 'Agent',
+        email: 'georgia@jordan.net',
+        placement: 'global',
+        userid: '55524',
+    },
+    {
+        name: 'Mckayla Bird',
+        date: '5 May 2023',
+        type: 'Pro',
+        status: 'Active',
+        projects: '2',
+        storage: '75 TB',
+        download: '300 TB',
+        agent: 'Agent',
+        email: 'mckaylabird@gmail.com',
+        placement: 'global',
+        userid: '102852',
+    },
+    {
+        name: 'Herb Hamilton',
+        date: '15 Mar 2023',
+        type: 'Pro',
+        status: 'Active',
+        projects: '3',
+        storage: '75 TB',
+        download: '300 TB',
+        agent: 'Agent',
+        email: 'herbh@gmail.com',
+        placement: 'global',
+        userid: '248',
+    },
+    {
+        name: 'Tria Goddard',
+        date: '10 Mar 2023',
+        type: 'Free',
+        status: 'Frozen',
+        projects: '1',
+        storage: '1 TB',
+        download: '3 TB',
+        agent: 'Name',
+        email: 'tg@tria.com',
+        placement: 'global',
+        userid: '12515',
+    },
+    {
+        name: 'Scarlett Trevis',
+        date: '24 Mar 2023',
+        type: 'Free',
+        status: 'Active',
+        projects: '1',
+        storage: '1 TB',
+        download: '3 TB',
+        agent: 'Name',
+        email: 'sctrevis@gmail.com',
+        placement: 'global',
+        userid: '821',
+    },
+    {
+        name: 'Destiny Brett',
+        date: '29 Mar 2023',
+        type: 'Free',
+        status: 'Suspended',
+        projects: '1',
+        storage: '0 TB',
+        download: '0 TB',
+        agent: 'Test',
+        email: 'destiny@gmail.com',
+        placement: 'global',
+        userid: '25808',
+    },
+];
+
+function getColor(type: string) {
+    if (type === 'Enterprise') return 'purple';
+    if (type === 'Priority') return 'secondary';
+    if (type === 'Pro') return 'success';
+    if (type === 'Free') return 'default';
+    if (type === 'Active') return 'success';
+    if (type === 'Inactive') return 'default';
+    if (type === 'Frozen') return 'warning';
+    if (type === 'Suspended') return 'error';
+    if (type === 'Deleted') return 'error';
+    return 'default';
+}
+
+function setSearch(searchText: string) {
+    search.value = searchText;
+}
 </script>

satellite/admin/back-office/ui/src/components/AdminAccountDialog.vue

@@ -58,7 +58,7 @@
     </v-dialog>
 
     <v-snackbar v-model="snackbar" :timeout="7000" color="success">
-        {{ text }}
+        Account information updated successfully.
         <template #actions>
             <v-btn color="default" variant="text" @click="snackbar = false">
                 Close
@@ -67,7 +67,8 @@
     </v-snackbar>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref } from 'vue';
 import {
     VDialog,
     VCard,
@@ -84,34 +85,11 @@ import {
     VSnackbar,
 } from 'vuetify/components';
 
-export default {
+const snackbar = ref<boolean>(false);
-    components: {
+const dialog = ref<boolean>(false);
-        VDialog,
+
-        VCard,
+function onButtonClick() {
-        VSheet,
+    snackbar.value = true;
-        VCardItem,
+    dialog.value = false;
-        VCardTitle,
+}
-        VBtn,
-        VDivider,
-        VForm,
-        VRow,
-        VCol,
-        VTextField,
-        VCardActions,
-        VSnackbar,
-    },
-    data() {
-        return {
-            snackbar: false,
-            text: `Account information updated successfully.`,
-            dialog: false,
-        };
-    },
-    methods: {
-        onButtonClick() {
-            this.snackbar = true;
-            this.dialog = false;
-        },
-    },
-};
 </script>

satellite/admin/back-office/ui/src/components/BucketActionsMenu.vue

@@ -45,26 +45,11 @@
     </v-menu>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { VMenu, VList, VListItem, VListItemTitle, VDivider } from 'vuetify/components';
 
 import BucketInformationDialog from '@/components/BucketInformationDialog.vue';
 import BucketDeleteDialog from '@/components/BucketDeleteDialog.vue';
 import BucketGeofenceDialog from '@/components/BucketGeofenceDialog.vue';
 import BucketUserAgentsDialog from '@/components/BucketUserAgentsDialog.vue';
-
-export default {
-    name: 'BucketActionsMenu',
-    components: {
-        VMenu,
-        VList,
-        VListItem,
-        VListItemTitle,
-        VDivider,
-        BucketDeleteDialog,
-        BucketGeofenceDialog,
-        BucketUserAgentsDialog,
-        BucketInformationDialog,
-    },
-};
 </script>

satellite/admin/back-office/ui/src/components/BucketDeleteDialog.vue

@@ -74,7 +74,7 @@
     </v-dialog>
 
     <v-snackbar v-model="snackbar" :timeout="7000" color="success">
-        {{ text }}
+        The bucket was deleted successfully.
         <template #actions>
             <v-btn color="default" variant="text" @click="snackbar = false">
                 Close
@@ -83,7 +83,8 @@
     </v-snackbar>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref } from 'vue';
 import {
     VDialog,
     VCard,
@@ -102,36 +103,11 @@ import {
     VAlert,
 } from 'vuetify/components';
 
-export default {
+const snackbar = ref<boolean>(false);
-    components: {
+const dialog = ref<boolean>(false);
-        VDialog,
+
-        VCard,
+function onButtonClick() {
-        VSheet,
+    snackbar.value = true;
-        VCardItem,
+    dialog.value = false;
-        VCardTitle,
+}
-        VBtn,
-        VDivider,
-        VForm,
-        VRow,
-        VCol,
-        VSelect,
-        VTextField,
-        VCardActions,
-        VSnackbar,
-        VAlert,
-    },
-    data() {
-        return {
-            snackbar: false,
-            text: `The bucket was deleted successfully.`,
-            dialog: false,
-        };
-    },
-    methods: {
-        onButtonClick() {
-            this.snackbar = true;
-            this.dialog = false;
-        },
-    },
-};
 </script>

satellite/admin/back-office/ui/src/components/BucketGeofenceDialog.vue

@@ -61,7 +61,7 @@
     </v-dialog>
 
     <v-snackbar v-model="snackbar" :timeout="7000" color="success">
-        {{ text }}
+        The bucket placement was set successfully.
         <template #actions>
             <v-btn color="default" variant="text" @click="snackbar = false">
                 Close
@@ -70,7 +70,8 @@
     </v-snackbar>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref } from 'vue';
 import {
     VDialog,
     VCard,
@@ -88,35 +89,11 @@ import {
     VSnackbar,
 } from 'vuetify/components';
 
-export default {
+const snackbar = ref<boolean>(false);
-    components: {
+const dialog = ref<boolean>(false);
-        VDialog,
+
-        VCard,
+function onButtonClick() {
-        VSheet,
+    snackbar.value = true;
-        VCardItem,
+    dialog.value = false;
-        VCardTitle,
+}
-        VBtn,
-        VDivider,
-        VForm,
-        VRow,
-        VCol,
-        VSelect,
-        VTextField,
-        VCardActions,
-        VSnackbar,
-    },
-    data() {
-        return {
-            snackbar: false,
-            text: `The bucket placement was set successfully.`,
-            dialog: false,
-        };
-    },
-    methods: {
-        onButtonClick() {
-            this.snackbar = true;
-            this.dialog = false;
-        },
-    },
-};
 </script>

satellite/admin/back-office/ui/src/components/BucketInformationDialog.vue

@@ -49,7 +49,7 @@
     </v-dialog>
 
     <v-snackbar v-model="snackbar" :timeout="7000" color="success">
-        {{ text }}
+        Successfully updated the bucket information.
         <template #actions>
             <v-btn color="default" variant="text" @click="snackbar = false">
                 Close
@@ -58,7 +58,8 @@
     </v-snackbar>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref } from 'vue';
 import {
     VDialog,
     VCard,
@@ -75,34 +76,11 @@ import {
     VSnackbar,
 } from 'vuetify/components';
 
-export default {
+const snackbar = ref<boolean>(false);
-    components: {
+const dialog = ref<boolean>(false);
-        VDialog,
+
-        VCard,
+function onButtonClick() {
-        VSheet,
+    snackbar.value = true;
-        VCardItem,
+    dialog.value = false;
-        VCardTitle,
+}
-        VBtn,
-        VDivider,
-        VForm,
-        VRow,
-        VCol,
-        VTextField,
-        VCardActions,
-        VSnackbar,
-    },
-    data() {
-        return {
-            snackbar: false,
-            text: `Successfully updated the bucket information.`,
-            dialog: false,
-        };
-    },
-    methods: {
-        onButtonClick() {
-            this.snackbar = true;
-            this.dialog = false;
-        },
-    },
-};
 </script>

satellite/admin/back-office/ui/src/components/BucketUserAgentsDialog.vue

@@ -62,7 +62,7 @@
     </v-dialog>
 
     <v-snackbar v-model="snackbar" :timeout="7000" color="success">
-        {{ text }}
+        Successfully saved the value attribution.
         <template #actions>
             <v-btn color="default" variant="text" @click="snackbar = false">
                 Close
@@ -71,7 +71,8 @@
     </v-snackbar>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref } from 'vue';
 import {
     VDialog,
     VCard,
@@ -89,35 +90,11 @@ import {
     VSnackbar,
 } from 'vuetify/components';
 
-export default {
+const snackbar = ref<boolean>(false);
-    components: {
+const dialog = ref<boolean>(false);
-        VDialog,
+
-        VCard,
+function onButtonClick() {
-        VSheet,
+    snackbar.value = true;
-        VCardItem,
+    dialog.value = false;
-        VCardTitle,
+}
-        VBtn,
-        VDivider,
-        VForm,
-        VRow,
-        VCol,
-        VSelect,
-        VTextField,
-        VCardActions,
-        VSnackbar,
-    },
-    data() {
-        return {
-            snackbar: false,
-            text: `Successfully saved the value attribution.`,
-            dialog: false,
-        };
-    },
-    methods: {
-        onButtonClick() {
-            this.snackbar = true;
-            this.dialog = false;
-        },
-    },
-};
 </script>

satellite/admin/back-office/ui/src/components/BucketsTableComponent.vue

@@ -58,146 +58,130 @@
     </v-card>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref } from 'vue';
 import { VCard, VTextField, VBtn, VIcon, VChip } from 'vuetify/components';
 import { VDataTable } from 'vuetify/labs/components';
 
 import BucketActionsMenu from '@/components/BucketActionsMenu.vue';
 
-export default {
+const search = ref<string>('');
-    name: 'BucketsTableComponent',
+const selected = ref<string[]>([]);
-    components: {
+const sortBy = ref([{ key: 'name', order: 'asc' }]);
-        VCard,
+
-        VTextField,
+const headers = [
-        VBtn,
+    { title: 'Bucket', key: 'name' },
-        VIcon,
+    { title: 'Storage', key: 'storage' },
-        VChip,
+    { title: 'Download', key: 'download' },
-        VDataTable,
+    { title: 'Segments', key: 'segments' },
-        BucketActionsMenu,
+    { title: 'Placement', key: 'placement' },
+    { title: 'Value', key: 'agent' },
+    { title: 'Created', key: 'date' },
+];
+const files = [
+    {
+        name: 'First',
+        placement: 'global',
+        bucketid: '1Q284JF',
+        storage: '300TB',
+        download: '100TB',
+        segments: '23,456',
+        agent: 'Test Agent',
+        date: '02 Mar 2023',
     },
-    data() {
+    {
-        return {
+        name: 'Personal',
-            // search in the table
+        placement: 'global',
-            search: '',
+        bucketid: '82SR21Q',
-            selected: [],
+        storage: '30TB',
-            sortBy: [{ key: 'name', order: 'asc' }],
+        download: '10TB',
-            headers: [
+        segments: '123,456',
-                { title: 'Bucket', key: 'name' },
+        agent: 'Agent',
-                { title: 'Storage', key: 'storage' },
+        date: '21 Apr 2023',
-                { title: 'Download', key: 'download' },
-                { title: 'Segments', key: 'segments' },
-                { title: 'Placement', key: 'placement' },
-                { title: 'Value', key: 'agent' },
-                { title: 'Created', key: 'date' },
-            ],
-            files: [
-                {
-                    name: 'First',
-                    placement: 'global',
-                    bucketid: '1Q284JF',
-                    storage: '300TB',
-                    download: '100TB',
-                    segments: '23,456',
-                    agent: 'Test Agent',
-                    date: '02 Mar 2023',
-                },
-                {
-                    name: 'Personal',
-                    placement: 'global',
-                    bucketid: '82SR21Q',
-                    storage: '30TB',
-                    download: '10TB',
-                    segments: '123,456',
-                    agent: 'Agent',
-                    date: '21 Apr 2023',
-                },
-                {
-                    name: 'Invitation',
-                    placement: 'global',
-                    bucketid: '4JFF82S',
-                    storage: '500TB',
-                    download: '200TB',
-                    segments: '456',
-                    agent: 'Random',
-                    date: '24 Mar 2023',
-                },
-                {
-                    name: 'Videos',
-                    placement: 'global',
-                    bucketid: '1Q223JA',
-                    storage: '300TB',
-                    download: '100TB',
-                    segments: '3,456',
-                    agent: 'Test Agent',
-                    date: '11 Mar 2023',
-                },
-                {
-                    name: 'App',
-                    placement: 'global',
-                    bucketid: 'R21Q284',
-                    storage: '300TB',
-                    download: '100TB',
-                    segments: '56',
-                    agent: 'Test Agent',
-                    date: '11 Mar 2023',
-                },
-                {
-                    name: 'Backup',
-                    placement: 'global',
-                    bucketid: '42SR20S',
-                    storage: '30TB',
-                    download: '10TB',
-                    segments: '1,456',
-                    agent: 'Agent',
-                    date: '21 Apr 2023',
-                },
-                {
-                    name: 'My Bucket',
-                    placement: 'global',
-                    bucketid: '4JFF8FF',
-                    storage: '500TB',
-                    download: '200TB',
-                    segments: '6',
-                    agent: 'Random',
-                    date: '24 Mar 2023',
-                },
-                {
-                    name: 'Sync',
-                    placement: 'global',
-                    bucketid: '4JFF8ZZ',
-                    storage: '500TB',
-                    download: '200TB',
-                    segments: '3,123,456',
-                    agent: 'Random',
-                    date: '24 Mar 2023',
-                },
-                {
-                    name: 'Backupss',
-                    placement: 'global',
-                    bucketid: '4JFF8TS',
-                    storage: '500TB',
-                    download: '200TB',
-                    segments: '10,123,456',
-                    agent: 'Random',
-                    date: '24 Mar 2023',
-                },
-                {
-                    name: 'Destiny',
-                    placement: 'global',
-                    bucketid: '4IF42TM',
-                    storage: '500TB',
-                    download: '200TB',
-                    segments: '3,456',
-                    agent: 'Random',
-                    date: '29 Mar 2023',
-                },
-            ],
-        };
     },
-    methods: {
+    {
-        setSearch(searchText) {
+        name: 'Invitation',
-            this.search = searchText;
+        placement: 'global',
-        },
+        bucketid: '4JFF82S',
+        storage: '500TB',
+        download: '200TB',
+        segments: '456',
+        agent: 'Random',
+        date: '24 Mar 2023',
     },
-};
+    {
+        name: 'Videos',
+        placement: 'global',
+        bucketid: '1Q223JA',
+        storage: '300TB',
+        download: '100TB',
+        segments: '3,456',
+        agent: 'Test Agent',
+        date: '11 Mar 2023',
+    },
+    {
+        name: 'App',
+        placement: 'global',
+        bucketid: 'R21Q284',
+        storage: '300TB',
+        download: '100TB',
+        segments: '56',
+        agent: 'Test Agent',
+        date: '11 Mar 2023',
+    },
+    {
+        name: 'Backup',
+        placement: 'global',
+        bucketid: '42SR20S',
+        storage: '30TB',
+        download: '10TB',
+        segments: '1,456',
+        agent: 'Agent',
+        date: '21 Apr 2023',
+    },
+    {
+        name: 'My Bucket',
+        placement: 'global',
+        bucketid: '4JFF8FF',
+        storage: '500TB',
+        download: '200TB',
+        segments: '6',
+        agent: 'Random',
+        date: '24 Mar 2023',
+    },
+    {
+        name: 'Sync',
+        placement: 'global',
+        bucketid: '4JFF8ZZ',
+        storage: '500TB',
+        download: '200TB',
+        segments: '3,123,456',
+        agent: 'Random',
+        date: '24 Mar 2023',
+    },
+    {
+        name: 'Backupss',
+        placement: 'global',
+        bucketid: '4JFF8TS',
+        storage: '500TB',
+        download: '200TB',
+        segments: '10,123,456',
+        agent: 'Random',
+        date: '24 Mar 2023',
+    },
+    {
+        name: 'Destiny',
+        placement: 'global',
+        bucketid: '4IF42TM',
+        storage: '500TB',
+        download: '200TB',
+        segments: '3,456',
+        agent: 'Random',
+        date: '29 Mar 2023',
+    },
+];
+
+function setSearch(searchText: string) {
+    search.value = searchText;
+}
 </script>

satellite/admin/back-office/ui/src/components/CardStatsComponent.vue

@@ -9,36 +9,14 @@
     </v-card>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { VCard, VCardText, VChip } from 'vuetify/components';
 
-export default {
+const props = defineProps<{
-    components: {
+    title: string;
-        VCard,
+    subtitle: string;
-        VCardText,
+    data: string;
-        VChip,
+    variant?: 'flat' | 'text' | 'elevated' | 'tonal' | 'outlined' | 'plain';
-    },
+    color?: string;
-    props: {
+}>();
-        title: {
-            type: String,
-            required: true,
-        },
-        subtitle: {
-            type: String,
-            required: true,
-        },
-        data: {
-            type: String,
-            required: true,
-        },
-        variant: {
-            type: String,
-            required: true,
-        },
-        color: {
-            type: String,
-            required: true,
-        },
-    },
-};
 </script>

satellite/admin/back-office/ui/src/components/DashboardLimitsTableComponent.vue

@@ -98,180 +98,167 @@
         </template>
     </v-data-table>
 </template>
-<script lang="ts">
+
+<script setup lang="ts">
+import { ref } from 'vue';
 import { VTextField, VBtn, VIcon, VChip, VTooltip } from 'vuetify/components';
 import { VDataTable } from 'vuetify/labs/components';
 
 import ProjectActionsMenu from '@/components/ProjectActionsMenu.vue';
 
-export default {
+const search = ref<string>('');
-    components: {
+const selected = ref<string[]>([]);
-        VTextField,
+const sortBy = ref([{ key: 'name', order: 'asc' }]);
-        VBtn,
+
-        VIcon,
+const headers = [
-        VChip,
+    { title: 'Project ID', key: 'projectid', align: 'start' },
-        VTooltip,
+    // { title: 'Name', key: 'name'},
-        VDataTable,
+    { title: 'Account', key: 'email' },
-        ProjectActionsMenu,
+    { title: 'Storage Used', key: 'storagepercent' },
+    { title: 'Storage Used', key: 'storageused' },
+    { title: 'Storage Limit', key: 'storagelimit' },
+    { title: 'Download Used', key: 'downloadpercent' },
+    { title: 'Download Used', key: 'downloadused' },
+    { title: 'Download Limit', key: 'downloadlimit' },
+    { title: 'Segments Used', key: 'segmentpercent' },
+    { title: 'Value', key: 'agent' },
+    { title: 'Placement', key: 'placement' },
+    { title: 'Created', key: 'date' },
+];
+const projects = [
+    {
+        name: 'Personal Project',
+        email: 'knowles@aurora.io',
+        projectid: '284JFF82SR21Q',
+        storageused: '150 TB',
+        storagelimit: '300 TB',
+        storagepercent: '50',
+        downloadused: '100 TB',
+        downloadlimit: '100 TB',
+        downloadpercent: '100',
+        segmentpercent: '43',
+        placement: 'Global',
+        agent: 'Agent',
+        date: '21 Apr 2023',
     },
-    data() {
+    {
-        return {
+        name: 'Videos',
-            // search in the table
+        email: 'vduke@gmail.com',
-            search: '',
+        projectid: '482SR21Q223JA',
-            selected: [],
+        storageused: '24 TB',
-            sortBy: [{ key: 'name', order: 'asc' }],
+        storagelimit: '30 TB',
-            headers: [
+        storagepercent: '80',
-                { title: 'Project ID', key: 'projectid', align: 'start' },
+        downloadused: '7 TB',
-                // { title: 'Name', key: 'name'},
+        downloadlimit: '100 TB',
-                { title: 'Account', key: 'email' },
+        segmentpercent: '20',
-                { title: 'Storage Used', key: 'storagepercent' },
+        downloadpercent: '7',
-                { title: 'Storage Used', key: 'storageused' },
+        placement: 'Global',
-                { title: 'Storage Limit', key: 'storagelimit' },
+        agent: 'Test Agent',
-                { title: 'Download Used', key: 'downloadpercent' },
+        date: '11 Mar 2023',
-                { title: 'Download Used', key: 'downloadused' },
-                { title: 'Download Limit', key: 'downloadlimit' },
-                { title: 'Segments Used', key: 'segmentpercent' },
-                { title: 'Value', key: 'agent' },
-                { title: 'Placement', key: 'placement' },
-                { title: 'Created', key: 'date' },
-            ],
-            projects: [
-                {
-                    name: 'Personal Project',
-                    email: 'knowles@aurora.io',
-                    projectid: '284JFF82SR21Q',
-                    storageused: '150 TB',
-                    storagelimit: '300 TB',
-                    storagepercent: '50',
-                    downloadused: '100 TB',
-                    downloadlimit: '100 TB',
-                    downloadpercent: '100',
-                    segmentpercent: '43',
-                    placement: 'Global',
-                    agent: 'Agent',
-                    date: '21 Apr 2023',
-                },
-                {
-                    name: 'Videos',
-                    email: 'vduke@gmail.com',
-                    projectid: '482SR21Q223JA',
-                    storageused: '24 TB',
-                    storagelimit: '30 TB',
-                    storagepercent: '80',
-                    downloadused: '7 TB',
-                    downloadlimit: '100 TB',
-                    segmentpercent: '20',
-                    downloadpercent: '7',
-                    placement: 'Global',
-                    agent: 'Test Agent',
-                    date: '11 Mar 2023',
-                },
-                {
-                    name: 'App',
-                    email: 'vduke@gmail.com',
-                    projectid: '56F82SR21Q284',
-                    storageused: '150 TB',
-                    storagelimit: '300 TB',
-                    storagepercent: '50',
-                    downloadused: '100 TB',
-                    downloadlimit: '100 TB',
-                    downloadpercent: '100',
-                    segmentpercent: '43',
-                    placement: 'Global',
-                    agent: 'Test Agent',
-                    date: '11 Mar 2023',
-                },
-                {
-                    name: 'Backup',
-                    email: 'knowles@aurora.io',
-                    projectid: '624QXF42SR20S',
-                    storageused: '99 TB',
-                    storagelimit: '100 TB',
-                    storagepercent: '99',
-                    downloadused: '85 TB',
-                    downloadlimit: '100 TB',
-                    segmentpercent: '83',
-                    downloadpercent: '85',
-                    placement: 'Global',
-                    agent: 'Agent',
-                    date: '21 Apr 2023',
-                },
-                {
-                    name: 'My Project',
-                    email: 'sctrevis@gmail.com',
-                    projectid: 'P33Q284JFF8FF',
-                    storageused: '24 TB',
-                    storagelimit: '30 TB',
-                    storagepercent: '80',
-                    downloadused: '7 TB',
-                    downloadlimit: '100 TB',
-                    segmentpercent: '20',
-                    downloadpercent: '7',
-                    placement: 'Global',
-                    agent: 'Random',
-                    date: '24 Mar 2023',
-                },
-                {
-                    name: 'Sync',
-                    email: 'sctrevis@gmail.com',
-                    projectid: 'W22S284JFF8ZZ',
-                    storageused: '150 TB',
-                    storagelimit: '300 TB',
-                    storagepercent: '50',
-                    downloadused: '100 TB',
-                    downloadlimit: '100 TB',
-                    downloadpercent: '100',
-                    segmentpercent: '43',
-                    placement: 'Global',
-                    agent: 'Random',
-                    date: '24 Mar 2023',
-                },
-                {
-                    name: 'Backupss',
-                    email: 'destiny@gmail.com',
-                    projectid: '2SFX284JFF8TS',
-                    storageused: '99 TB',
-                    storagelimit: '100 TB',
-                    storagepercent: '99',
-                    downloadused: '85 TB',
-                    downloadlimit: '100 TB',
-                    segmentpercent: '83',
-                    downloadpercent: '85',
-                    placement: 'Global',
-                    agent: 'Random',
-                    date: '24 Mar 2023',
-                },
-                {
-                    name: 'Destiny',
-                    email: 'destiny@gmail.com',
-                    projectid: 'FGXZ484IF42TM',
-                    storageused: '24 TB',
-                    storagelimit: '30 TB',
-                    storagepercent: '80',
-                    downloadused: '7 TB',
-                    downloadlimit: '100 TB',
-                    segmentpercent: '20',
-                    downloadpercent: '7',
-                    placement: 'Global',
-                    agent: 'Random',
-                    date: '29 Mar 2023',
-                },
-            ],
-        };
     },
-    methods: {
+    {
-        setSearch(searchText) {
+        name: 'App',
-            this.search = searchText;
+        email: 'vduke@gmail.com',
-        },
+        projectid: '56F82SR21Q284',
-        getPercentColor(percent) {
+        storageused: '150 TB',
-            if (percent >= 99) {
+        storagelimit: '300 TB',
-                return 'error';
+        storagepercent: '50',
-            } else if (percent >= 80) {
+        downloadused: '100 TB',
-                return 'warning';
+        downloadlimit: '100 TB',
-            } else {
+        downloadpercent: '100',
-                return 'success';
+        segmentpercent: '43',
-            }
+        placement: 'Global',
-        },
+        agent: 'Test Agent',
+        date: '11 Mar 2023',
     },
-};
+    {
+        name: 'Backup',
+        email: 'knowles@aurora.io',
+        projectid: '624QXF42SR20S',
+        storageused: '99 TB',
+        storagelimit: '100 TB',
+        storagepercent: '99',
+        downloadused: '85 TB',
+        downloadlimit: '100 TB',
+        segmentpercent: '83',
+        downloadpercent: '85',
+        placement: 'Global',
+        agent: 'Agent',
+        date: '21 Apr 2023',
+    },
+    {
+        name: 'My Project',
+        email: 'sctrevis@gmail.com',
+        projectid: 'P33Q284JFF8FF',
+        storageused: '24 TB',
+        storagelimit: '30 TB',
+        storagepercent: '80',
+        downloadused: '7 TB',
+        downloadlimit: '100 TB',
+        segmentpercent: '20',
+        downloadpercent: '7',
+        placement: 'Global',
+        agent: 'Random',
+        date: '24 Mar 2023',
+    },
+    {
+        name: 'Sync',
+        email: 'sctrevis@gmail.com',
+        projectid: 'W22S284JFF8ZZ',
+        storageused: '150 TB',
+        storagelimit: '300 TB',
+        storagepercent: '50',
+        downloadused: '100 TB',
+        downloadlimit: '100 TB',
+        downloadpercent: '100',
+        segmentpercent: '43',
+        placement: 'Global',
+        agent: 'Random',
+        date: '24 Mar 2023',
+    },
+    {
+        name: 'Backupss',
+        email: 'destiny@gmail.com',
+        projectid: '2SFX284JFF8TS',
+        storageused: '99 TB',
+        storagelimit: '100 TB',
+        storagepercent: '99',
+        downloadused: '85 TB',
+        downloadlimit: '100 TB',
+        segmentpercent: '83',
+        downloadpercent: '85',
+        placement: 'Global',
+        agent: 'Random',
+        date: '24 Mar 2023',
+    },
+    {
+        name: 'Destiny',
+        email: 'destiny@gmail.com',
+        projectid: 'FGXZ484IF42TM',
+        storageused: '24 TB',
+        storagelimit: '30 TB',
+        storagepercent: '80',
+        downloadused: '7 TB',
+        downloadlimit: '100 TB',
+        segmentpercent: '20',
+        downloadpercent: '7',
+        placement: 'Global',
+        agent: 'Random',
+        date: '29 Mar 2023',
+    },
+];
+
+function setSearch(searchText: string) {
+    search.value = searchText;
+}
+
+function getPercentColor(percent: number) {
+    if (percent >= 99) {
+        return 'error';
+    } else if (percent >= 80) {
+        return 'warning';
+    } else {
+        return 'success';
+    }
+}
 </script>

satellite/admin/back-office/ui/src/components/LogsTableComponent.vue

@@ -47,64 +47,50 @@
     </v-card>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref } from 'vue';
 import { VCard, VTextField, VChip, VListItem } from 'vuetify/components';
 import { VDataTable } from 'vuetify/labs/components';
 
-export default {
+const search = ref<string>('');
-    components: {
+const selected = ref<string[]>([]);
-        VCard,
+const sortBy = ref([{ key: 'date', order: 'asc' }]);
-        VTextField,
+
-        VChip,
+const headers = [
-        VListItem,
+    { title: 'Date', key: 'date' },
-        VDataTable,
+    { title: 'Change', key: 'name' },
+    { title: 'Operation', key: 'operation' },
+    { title: 'Project ID', key: 'projectID' },
+    { title: 'Bucket', key: 'bucket' },
+    { title: 'Updated', key: 'updated' },
+    { title: 'Previous', key: 'previous' },
+    { title: 'Admin', key: 'email' },
+    { title: '', key: 'data-table-expand' },
+];
+const files = [
+    {
+        name: 'Project',
+        operation: 'Limits',
+        email: 'vduke@gmail.com',
+        projectID: 'F82SR21Q284JF',
+        bucket: 'All',
+        updated: '300TB',
+        previous: '100TB',
+        date: '02 Mar 2023',
     },
-    data() {
+    {
-        return {
+        name: 'Account',
-            // search in the table
+        operation: 'Coupon',
-            search: '',
+        email: 'knowles@aurora.io',
-            selected: [],
+        projectID: '',
-            expanded: [],
+        bucket: 'All',
-            sortBy: [{ key: 'date', order: 'asc' }],
+        updated: '30TB',
-            headers: [
+        previous: 'Free Tier',
-                { title: 'Date', key: 'date' },
+        date: '21 Apr 2023',
-                { title: 'Change', key: 'name' },
-                { title: 'Operation', key: 'operation' },
-                { title: 'Project ID', key: 'projectID' },
-                { title: 'Bucket', key: 'bucket' },
-                { title: 'Updated', key: 'updated' },
-                { title: 'Previous', key: 'previous' },
-                { title: 'Admin', key: 'email' },
-                { title: '', key: 'data-table-expand' },
-            ],
-            files: [
-                {
-                    name: 'Project',
-                    operation: 'Limits',
-                    email: 'vduke@gmail.com',
-                    projectID: 'F82SR21Q284JF',
-                    bucket: 'All',
-                    updated: '300TB',
-                    previous: '100TB',
-                    date: '02 Mar 2023',
-                },
-                {
-                    name: 'Account',
-                    operation: 'Coupon',
-                    email: 'knowles@aurora.io',
-                    projectID: '',
-                    bucket: 'All',
-                    updated: '30TB',
-                    previous: 'Free Tier',
-                    date: '21 Apr 2023',
-                },
-            ],
-        };
     },
-    methods: {
+];
-        setSearch(searchText) {
+
-            this.search = searchText;
+function setSearch(searchText: string) {
-        },
+    search.value = searchText;
-    },
+}
-};
 </script>

satellite/admin/back-office/ui/src/components/NewAccountDialog.vue

@@ -58,7 +58,7 @@
     </v-dialog>
 
     <v-snackbar v-model="snackbar" :timeout="7000" color="success">
-        {{ text }}
+        Account created successfully.
         <template #actions>
             <v-btn color="default" variant="text" @click="snackbar = false">
                 Close
@@ -67,7 +67,8 @@
     </v-snackbar>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref } from 'vue';
 import {
     VDialog,
     VCard,
@@ -84,47 +85,25 @@ import {
     VSnackbar,
 } from 'vuetify/components';
 
-export default {
+const snackbar = ref<boolean>(false);
-    components: {
+const dialog = ref<boolean>(false);
-        VDialog,
+const valid = ref<boolean>(false);
-        VCard,
+const email = ref<string>('');
-        VSheet,
-        VCardItem,
-        VCardTitle,
-        VBtn,
-        VDivider,
-        VForm,
-        VRow,
-        VCol,
-        VTextField,
-        VCardActions,
-        VSnackbar,
-    },
-    data() {
-        return {
-            snackbar: false,
-            text: `Account created successfully.`,
-            dialog: false,
-            valid: false,
-            email: '',
-            emailRules: [
-                value => {
-                    if (value) return true;
 
-                    return 'E-mail is requred.';
+const emailRules = [
-                },
+    value => {
-                value => {
+        if (value) return true;
-                    if (/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(value)) return true;
+
-                    return 'E-mail must be valid.';
+        return 'E-mail is required.';
-                },
-            ],
-        };
     },
-    methods: {
+    value => {
-        onButtonClick() {
+        if (/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(value)) return true;
-            this.snackbar = true;
+        return 'E-mail must be valid.';
-            this.dialog = false;
-        },
     },
-};
+];
+
+function onButtonClick() {
+    snackbar.value = true;
+    dialog.value = false;
+}
 </script>

satellite/admin/back-office/ui/src/components/NewProjectDialog.vue

@@ -58,7 +58,7 @@
     </v-dialog>
 
     <v-snackbar v-model="snackbar" :timeout="7000" color="success">
-        {{ text }}
+        Project created successfully.
         <template #actions>
             <v-btn color="default" variant="text" @click="snackbar = false">
                 Close
@@ -67,7 +67,8 @@
     </v-snackbar>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref } from 'vue';
 import {
     VDialog,
     VCard,
@@ -84,34 +85,11 @@ import {
     VSnackbar,
 } from 'vuetify/components';
 
-export default {
+const snackbar = ref<boolean>(false);
-    components: {
+const dialog = ref<boolean>(false);
-        VDialog,
+
-        VCard,
+function onButtonClick() {
-        VSheet,
+    snackbar.value = true;
-        VCardItem,
+    dialog.value = false;
-        VCardTitle,
+}
-        VBtn,
-        VDivider,
-        VForm,
-        VRow,
-        VCol,
-        VTextField,
-        VCardActions,
-        VSnackbar,
-    },
-    data() {
-        return {
-            snackbar: false,
-            text: `Project created successfully.`,
-            dialog: false,
-        };
-    },
-    methods: {
-        onButtonClick() {
-            this.snackbar = true;
-            this.dialog = false;
-        },
-    },
-};
 </script>

satellite/admin/back-office/ui/src/components/PageSubtitleComponent.vue

@@ -7,13 +7,8 @@
     </p>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-export default {
+const props = defineProps<{
-    props: {
+    subtitle: string;
-        subtitle: {
+}>();
-            type: String,
+</script>
-            required: true,
-        },
-    },
-};
-</script>

satellite/admin/back-office/ui/src/components/PageTitleComponent.vue

@@ -5,13 +5,8 @@
     <h1 class="text-h5 font-weight-bold my-2">{{ title }}</h1>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-export default {
+const props = defineProps<{
-    props: {
+    title: string;
-        title: {
+}>();
-            type: String,
+</script>
-            required: true,
-        },
-    },
-};
-</script>

satellite/admin/back-office/ui/src/components/ProjectActionsMenu.vue

@@ -65,7 +65,7 @@
     </v-menu>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { VMenu, VList, VListItem, VListItemTitle, VDivider } from 'vuetify/components';
 
 import ProjectInformationDialog from '@/components/ProjectInformationDialog.vue';
@@ -75,22 +75,4 @@ import ProjectGeofenceDialog from '@/components/ProjectGeofenceDialog.vue';
 import ProjectUserAgentsDialog from '@/components/ProjectUserAgentsDialog.vue';
 import ProjectLimitsDialog from '@/components/ProjectLimitsDialog.vue';
 import ProjectAddUserDialog from '@/components/ProjectAddUserDialog.vue';
-
-export default {
-    name: 'ProjectActionsMenu',
-    components: {
-        VMenu,
-        VList,
-        VListItem,
-        VListItemTitle,
-        VDivider,
-        ProjectDeleteDialog,
-        ProjectNewBucketDialog,
-        ProjectGeofenceDialog,
-        ProjectUserAgentsDialog,
-        ProjectLimitsDialog,
-        ProjectAddUserDialog,
-        ProjectInformationDialog,
-    },
-};
 </script>

satellite/admin/back-office/ui/src/components/ProjectAddUserDialog.vue

@@ -57,7 +57,7 @@
     </v-dialog>
 
     <v-snackbar v-model="snackbar" :timeout="7000" color="success">
-        {{ text }}
+        The user was added successfully.
         <template #actions>
             <v-btn color="default" variant="text" @click="snackbar = false">
                 Close
@@ -66,7 +66,8 @@
     </v-snackbar>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref } from 'vue';
 import {
     VDialog,
     VCard,
@@ -83,34 +84,11 @@ import {
     VSnackbar,
 } from 'vuetify/components';
 
-export default {
+const snackbar = ref<boolean>(false);
-    components: {
+const dialog = ref<boolean>(false);
-        VDialog,
+
-        VCard,
+function onButtonClick() {
-        VSheet,
+    snackbar.value = true;
-        VCardItem,
+    dialog.value = false;
-        VCardTitle,
+}
-        VBtn,
-        VDivider,
-        VForm,
-        VRow,
-        VCol,
-        VTextField,
-        VCardActions,
-        VSnackbar,
-    },
-    data() {
-        return {
-            snackbar: false,
-            text: `The user was added successfully.`,
-            dialog: false,
-        };
-    },
-    methods: {
-        onButtonClick() {
-            this.snackbar = true;
-            this.dialog = false;
-        },
-    },
-};
 </script>

satellite/admin/back-office/ui/src/components/ProjectDeleteDialog.vue

@@ -74,7 +74,7 @@
     </v-dialog>
 
     <v-snackbar v-model="snackbar" :timeout="7000" color="success">
-        {{ text }}
+        The project was deleted successfully.
         <template #actions>
             <v-btn color="default" variant="text" @click="snackbar = false">
                 Close
@@ -83,7 +83,8 @@
     </v-snackbar>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref } from 'vue';
 import {
     VDialog,
     VCard,
@@ -102,36 +103,11 @@ import {
     VAlert,
 } from 'vuetify/components';
 
-export default {
+const snackbar = ref<boolean>(false);
-    components: {
+const dialog = ref<boolean>(false);
-        VDialog,
+
-        VCard,
+function onButtonClick() {
-        VSheet,
+    snackbar.value = true;
-        VCardItem,
+    dialog.value = false;
-        VCardTitle,
+}
-        VBtn,
-        VDivider,
-        VForm,
-        VRow,
-        VCol,
-        VSelect,
-        VTextField,
-        VCardActions,
-        VSnackbar,
-        VAlert,
-    },
-    data() {
-        return {
-            snackbar: false,
-            text: `The project was deleted successfully.`,
-            dialog: false,
-        };
-    },
-    methods: {
-        onButtonClick() {
-            this.snackbar = true;
-            this.dialog = false;
-        },
-    },
-};
 </script>

satellite/admin/back-office/ui/src/components/ProjectGeofenceDialog.vue

@@ -61,7 +61,7 @@
     </v-dialog>
 
     <v-snackbar v-model="snackbar" :timeout="7000" color="success">
-        {{ text }}
+        The project placement was set successfully.
         <template #actions>
             <v-btn color="default" variant="text" @click="snackbar = false">
                 Close
@@ -70,7 +70,8 @@
     </v-snackbar>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref } from 'vue';
 import {
     VDialog,
     VCard,
@@ -88,35 +89,11 @@ import {
     VSnackbar,
 } from 'vuetify/components';
 
-export default {
+const snackbar = ref<boolean>(false);
-    components: {
+const dialog = ref<boolean>(false);
-        VDialog,
+
-        VCard,
+function onButtonClick() {
-        VSheet,
+    snackbar.value = true;
-        VCardItem,
+    dialog.value = false;
-        VCardTitle,
+}
-        VBtn,
-        VDivider,
-        VForm,
-        VRow,
-        VCol,
-        VSelect,
-        VTextField,
-        VCardActions,
-        VSnackbar,
-    },
-    data() {
-        return {
-            snackbar: false,
-            text: `The project placement was set successfully.`,
-            dialog: false,
-        };
-    },
-    methods: {
-        onButtonClick() {
-            this.snackbar = true;
-            this.dialog = false;
-        },
-    },
-};
 </script>

satellite/admin/back-office/ui/src/components/ProjectInformationDialog.vue

@@ -52,7 +52,7 @@
     </v-dialog>
 
     <v-snackbar v-model="snackbar" :timeout="7000" color="success">
-        {{ text }}
+        Successfully updated the project information.
         <template #actions>
             <v-btn color="default" variant="text" @click="snackbar = false">
                 Close
@@ -61,7 +61,8 @@
     </v-snackbar>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref } from 'vue';
 import {
     VDialog,
     VCard,
@@ -78,34 +79,11 @@ import {
     VSnackbar,
 } from 'vuetify/components';
 
-export default {
+const snackbar = ref<boolean>(false);
-    components: {
+const dialog = ref<boolean>(false);
-        VDialog,
+
-        VCard,
+function onButtonClick() {
-        VSheet,
+    snackbar.value = true;
-        VCardItem,
+    dialog.value = false;
-        VCardTitle,
+}
-        VBtn,
-        VDivider,
-        VForm,
-        VRow,
-        VCol,
-        VTextField,
-        VCardActions,
-        VSnackbar,
-    },
-    data() {
-        return {
-            snackbar: false,
-            text: `Successfully updated the project information.`,
-            dialog: false,
-        };
-    },
-    methods: {
-        onButtonClick() {
-            this.snackbar = true;
-            this.dialog = false;
-        },
-    },
-};
 </script>

satellite/admin/back-office/ui/src/components/ProjectLimitsDialog.vue

@@ -86,7 +86,7 @@
     </v-dialog>
 
     <v-snackbar v-model="snackbar" :timeout="7000" color="error">
-        {{ text }}
+        Error. Cannot change project limits.
         <template #actions>
             <v-btn color="default" variant="text" @click="snackbar = false">
                 Close
@@ -95,7 +95,8 @@
     </v-snackbar>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref } from 'vue';
 import {
     VDialog,
     VCard,
@@ -112,34 +113,11 @@ import {
     VSnackbar,
 } from 'vuetify/components';
 
-export default {
+const snackbar = ref<boolean>(false);
-    components: {
+const dialog = ref<boolean>(false);
-        VDialog,
+
-        VCard,
+function onButtonClick() {
-        VSheet,
+    snackbar.value = true;
-        VCardItem,
+    dialog.value = false;
-        VCardTitle,
+}
-        VBtn,
-        VDivider,
-        VForm,
-        VRow,
-        VCol,
-        VTextField,
-        VCardActions,
-        VSnackbar,
-    },
-    data() {
-        return {
-            snackbar: false,
-            text: `Error. Cannot change project limits.`,
-            dialog: false,
-        };
-    },
-    methods: {
-        onButtonClick() {
-            this.snackbar = true;
-            this.dialog = false;
-        },
-    },
-};
 </script>

satellite/admin/back-office/ui/src/components/ProjectNewBucketDialog.vue

@@ -58,7 +58,7 @@
     </v-dialog>
 
     <v-snackbar v-model="snackbar" :timeout="7000" color="success">
-        {{ text }}
+        Bucket created successfully.
         <template #actions>
             <v-btn color="default" variant="text" @click="snackbar = false">
                 Close
@@ -67,7 +67,8 @@
     </v-snackbar>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref } from 'vue';
 import {
     VDialog,
     VCard,
@@ -84,34 +85,11 @@ import {
     VSnackbar,
 } from 'vuetify/components';
 
-export default {
+const snackbar = ref<boolean>(false);
-    components: {
+const dialog = ref<boolean>(false);
-        VDialog,
+
-        VCard,
+function onButtonClick() {
-        VSheet,
+    snackbar.value = true;
-        VCardItem,
+    dialog.value = false;
-        VCardTitle,
+}
-        VBtn,
-        VDivider,
-        VForm,
-        VRow,
-        VCol,
-        VTextField,
-        VCardActions,
-        VSnackbar,
-    },
-    data() {
-        return {
-            snackbar: false,
-            text: `Bucket created successfully.`,
-            dialog: false,
-        };
-    },
-    methods: {
-        onButtonClick() {
-            this.snackbar = true;
-            this.dialog = false;
-        },
-    },
-};
 </script>

satellite/admin/back-office/ui/src/components/ProjectResetMFADialog.vue

@@ -58,7 +58,7 @@
     </v-dialog>
 
     <v-snackbar v-model="snackbar" :timeout="7000" color="success">
-        {{ text }}
+        The MFA was disabled successfully.
         <template #actions>
             <v-btn color="default" variant="text" @click="snackbar = false">
                 Close
@@ -67,7 +67,8 @@
     </v-snackbar>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref } from 'vue';
 import {
     VDialog,
     VCard,
@@ -84,34 +85,11 @@ import {
     VSnackbar,
 } from 'vuetify/components';
 
-export default {
+const snackbar = ref<boolean>(false);
-    components: {
+const dialog = ref<boolean>(false);
-        VDialog,
+
-        VCard,
+function onButtonClick() {
-        VSheet,
+    snackbar.value = true;
-        VCardItem,
+    dialog.value = false;
-        VCardTitle,
+}
-        VBtn,
-        VDivider,
-        VForm,
-        VRow,
-        VCol,
-        VTextField,
-        VCardActions,
-        VSnackbar,
-    },
-    data() {
-        return {
-            snackbar: false,
-            text: `The MFA was disabled successfully.`,
-            dialog: false,
-        };
-    },
-    methods: {
-        onButtonClick() {
-            this.snackbar = true;
-            this.dialog = false;
-        },
-    },
-};
 </script>

satellite/admin/back-office/ui/src/components/ProjectSuspendDialog.vue

@@ -67,7 +67,7 @@
     </v-dialog>
 
     <v-snackbar v-model="snackbar" :timeout="7000" color="success">
-        {{ text }}
+        The account was suspended successfully.
         <template #actions>
             <v-btn color="default" variant="text" @click="snackbar = false">
                 Close
@@ -76,7 +76,8 @@
     </v-snackbar>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref } from 'vue';
 import {
     VDialog,
     VCard,
@@ -94,35 +95,11 @@ import {
     VSnackbar,
 } from 'vuetify/components';
 
-export default {
+const snackbar = ref<boolean>(false);
-    components: {
+const dialog = ref<boolean>(false);
-        VDialog,
+
-        VCard,
+function onButtonClick() {
-        VSheet,
+    snackbar.value = true;
-        VCardItem,
+    dialog.value = false;
-        VCardTitle,
+}
-        VBtn,
-        VDivider,
-        VForm,
-        VRow,
-        VCol,
-        VSelect,
-        VTextField,
-        VCardActions,
-        VSnackbar,
-    },
-    data() {
-        return {
-            snackbar: false,
-            text: `The account was suspended successfully.`,
-            dialog: false,
-        };
-    },
-    methods: {
-        onButtonClick() {
-            this.snackbar = true;
-            this.dialog = false;
-        },
-    },
-};
 </script>

satellite/admin/back-office/ui/src/components/ProjectUserAgentsDialog.vue

@@ -62,7 +62,7 @@
     </v-dialog>
 
     <v-snackbar v-model="snackbar" :timeout="7000" color="success">
-        {{ text }}
+        Successfully saved the value attribution.
         <template #actions>
             <v-btn color="default" variant="text" @click="snackbar = false">
                 Close
@@ -71,7 +71,8 @@
     </v-snackbar>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref } from 'vue';
 import {
     VDialog,
     VCard,
@@ -89,35 +90,11 @@ import {
     VSnackbar,
 } from 'vuetify/components';
 
-export default {
+const snackbar = ref<boolean>(false);
-    components: {
+const dialog = ref<boolean>(false);
-        VDialog,
+
-        VCard,
+function onButtonClick() {
-        VSheet,
+    snackbar.value = true;
-        VCardItem,
+    dialog.value = false;
-        VCardTitle,
+}
-        VBtn,
-        VDivider,
-        VForm,
-        VRow,
-        VCol,
-        VSelect,
-        VTextField,
-        VCardActions,
-        VSnackbar,
-    },
-    data() {
-        return {
-            snackbar: false,
-            text: `Successfully saved the value attribution.`,
-            dialog: false,
-        };
-    },
-    methods: {
-        onButtonClick() {
-            this.snackbar = true;
-            this.dialog = false;
-        },
-    },
-};
 </script>

satellite/admin/back-office/ui/src/components/ProjectsTableComponent.vue

@@ -101,7 +101,8 @@
     </v-card>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref } from 'vue';
 import {
     VCard,
     VTextField,
@@ -114,205 +115,189 @@ import { VDataTable } from 'vuetify/labs/components';
 
 import ProjectActionsMenu from '@/components/ProjectActionsMenu.vue';
 
-export default {
+const search = ref<string>('');
-    components: {
+const selected = ref<string[]>([]);
-        VCard,
+const sortBy = ref([{ key: 'name', order: 'asc' }]);
-        VTextField,
+
-        VBtn,
+const headers = [
-        VIcon,
+    { title: 'Project ID', key: 'projectid', align: 'start' },
-        VChip,
+    // { title: 'Name', key: 'name'},
-        VTooltip,
+    { title: 'Account', key: 'email' },
-        VDataTable,
+    { title: 'Storage Used', key: 'storagepercent' },
-        ProjectActionsMenu,
+    { title: 'Storage Used', key: 'storageused' },
+    { title: 'Storage Limit', key: 'storagelimit' },
+    { title: 'Download Used', key: 'downloadpercent' },
+    { title: 'Download Used', key: 'downloadused' },
+    { title: 'Download Limit', key: 'downloadlimit' },
+    { title: 'Segments Used', key: 'segmentpercent' },
+    { title: 'Value', key: 'agent' },
+    { title: 'Placement', key: 'placement' },
+    { title: 'Created', key: 'date' },
+];
+const files = [
+    {
+        name: 'My First Project',
+        email: 'vduke@gmail.com',
+        projectid: 'F82SR21Q284JF',
+        storageused: '24 TB',
+        storagelimit: '30 TB',
+        storagepercent: '80',
+        downloadused: '7 TB',
+        downloadlimit: '100 TB',
+        segmentpercent: '20',
+        downloadpercent: '7',
+        placement: 'Global',
+        agent: 'Test Agent',
+        date: '02 Mar 2023',
     },
-    data() {
+    {
-        return {
+        name: 'Personal Project',
-            // search in the table
+        email: 'knowles@aurora.io',
-            search: '',
+        projectid: '284JFF82SR21Q',
-            selected: [],
+        storageused: '150 TB',
-            sortBy: [{ key: 'name', order: 'asc' }],
+        storagelimit: '300 TB',
-            headers: [
+        storagepercent: '50',
-                { title: 'Project ID', key: 'projectid', align: 'start' },
+        downloadused: '100 TB',
-                // { title: 'Name', key: 'name'},
+        downloadlimit: '100 TB',
-                { title: 'Account', key: 'email' },
+        downloadpercent: '100',
-                { title: 'Storage Used', key: 'storagepercent' },
+        segmentpercent: '43',
-                { title: 'Storage Used', key: 'storageused' },
+        placement: 'Global',
-                { title: 'Storage Limit', key: 'storagelimit' },
+        agent: 'Agent',
-                { title: 'Download Used', key: 'downloadpercent' },
+        date: '21 Apr 2023',
-                { title: 'Download Used', key: 'downloadused' },
-                { title: 'Download Limit', key: 'downloadlimit' },
-                { title: 'Segments Used', key: 'segmentpercent' },
-                { title: 'Value', key: 'agent' },
-                { title: 'Placement', key: 'placement' },
-                { title: 'Created', key: 'date' },
-            ],
-            files: [
-                {
-                    name: 'My First Project',
-                    email: 'vduke@gmail.com',
-                    projectid: 'F82SR21Q284JF',
-                    storageused: '24 TB',
-                    storagelimit: '30 TB',
-                    storagepercent: '80',
-                    downloadused: '7 TB',
-                    downloadlimit: '100 TB',
-                    segmentpercent: '20',
-                    downloadpercent: '7',
-                    placement: 'Global',
-                    agent: 'Test Agent',
-                    date: '02 Mar 2023',
-                },
-                {
-                    name: 'Personal Project',
-                    email: 'knowles@aurora.io',
-                    projectid: '284JFF82SR21Q',
-                    storageused: '150 TB',
-                    storagelimit: '300 TB',
-                    storagepercent: '50',
-                    downloadused: '100 TB',
-                    downloadlimit: '100 TB',
-                    downloadpercent: '100',
-                    segmentpercent: '43',
-                    placement: 'Global',
-                    agent: 'Agent',
-                    date: '21 Apr 2023',
-                },
-                {
-                    name: 'Invitation Project',
-                    email: 'sctrevis@gmail.com',
-                    projectid: 'R21Q284JFF82S',
-                    storageused: '99 TB',
-                    storagelimit: '100 TB',
-                    storagepercent: '99',
-                    downloadused: '85 TB',
-                    downloadlimit: '100 TB',
-                    segmentpercent: '83',
-                    downloadpercent: '85',
-                    placement: 'Global',
-                    agent: 'Random',
-                    date: '24 Mar 2023',
-                },
-                {
-                    name: 'Videos',
-                    email: 'vduke@gmail.com',
-                    projectid: '482SR21Q223JA',
-                    storageused: '24 TB',
-                    storagelimit: '30 TB',
-                    storagepercent: '80',
-                    downloadused: '7 TB',
-                    downloadlimit: '100 TB',
-                    segmentpercent: '20',
-                    downloadpercent: '7',
-                    placement: 'Global',
-                    agent: 'Test Agent',
-                    date: '11 Mar 2023',
-                },
-                {
-                    name: 'App',
-                    email: 'vduke@gmail.com',
-                    projectid: '56F82SR21Q284',
-                    storageused: '150 TB',
-                    storagelimit: '300 TB',
-                    storagepercent: '50',
-                    downloadused: '100 TB',
-                    downloadlimit: '100 TB',
-                    downloadpercent: '100',
-                    segmentpercent: '43',
-                    placement: 'Global',
-                    agent: 'Test Agent',
-                    date: '11 Mar 2023',
-                },
-                {
-                    name: 'Backup',
-                    email: 'knowles@aurora.io',
-                    projectid: '624QXF42SR20S',
-                    storageused: '99 TB',
-                    storagelimit: '100 TB',
-                    storagepercent: '99',
-                    downloadused: '85 TB',
-                    downloadlimit: '100 TB',
-                    segmentpercent: '83',
-                    downloadpercent: '85',
-                    placement: 'Global',
-                    agent: 'Agent',
-                    date: '21 Apr 2023',
-                },
-                {
-                    name: 'My Project',
-                    email: 'sctrevis@gmail.com',
-                    projectid: 'P33Q284JFF8FF',
-                    storageused: '24 TB',
-                    storagelimit: '30 TB',
-                    storagepercent: '80',
-                    downloadused: '7 TB',
-                    downloadlimit: '100 TB',
-                    segmentpercent: '20',
-                    downloadpercent: '7',
-                    placement: 'Global',
-                    agent: 'Random',
-                    date: '24 Mar 2023',
-                },
-                {
-                    name: 'Sync',
-                    email: 'sctrevis@gmail.com',
-                    projectid: 'W22S284JFF8ZZ',
-                    storageused: '150 TB',
-                    storagelimit: '300 TB',
-                    storagepercent: '50',
-                    downloadused: '100 TB',
-                    downloadlimit: '100 TB',
-                    downloadpercent: '100',
-                    segmentpercent: '43',
-                    placement: 'Global',
-                    agent: 'Random',
-                    date: '24 Mar 2023',
-                },
-                {
-                    name: 'Backupss',
-                    email: 'destiny@gmail.com',
-                    projectid: '2SFX284JFF8TS',
-                    storageused: '99 TB',
-                    storagelimit: '100 TB',
-                    storagepercent: '99',
-                    downloadused: '85 TB',
-                    downloadlimit: '100 TB',
-                    segmentpercent: '83',
-                    downloadpercent: '85',
-                    placement: 'Global',
-                    agent: 'Random',
-                    date: '24 Mar 2023',
-                },
-                {
-                    name: 'Destiny',
-                    email: 'destiny@gmail.com',
-                    projectid: 'FGXZ484IF42TM',
-                    storageused: '24 TB',
-                    storagelimit: '30 TB',
-                    storagepercent: '80',
-                    downloadused: '7 TB',
-                    downloadlimit: '100 TB',
-                    segmentpercent: '20',
-                    downloadpercent: '7',
-                    placement: 'Global',
-                    agent: 'Random',
-                    date: '29 Mar 2023',
-                },
-            ],
-        };
     },
-    methods: {
+    {
-        setSearch(searchText) {
+        name: 'Invitation Project',
-            this.search = searchText;
+        email: 'sctrevis@gmail.com',
-        },
+        projectid: 'R21Q284JFF82S',
-        getPercentColor(percent) {
+        storageused: '99 TB',
-            if (percent >= 99) {
+        storagelimit: '100 TB',
-                return 'error';
+        storagepercent: '99',
-            } else if (percent >= 80) {
+        downloadused: '85 TB',
-                return 'warning';
+        downloadlimit: '100 TB',
-            } else {
+        segmentpercent: '83',
-                return 'success';
+        downloadpercent: '85',
-            }
+        placement: 'Global',
-        },
+        agent: 'Random',
+        date: '24 Mar 2023',
     },
-};
+    {
+        name: 'Videos',
+        email: 'vduke@gmail.com',
+        projectid: '482SR21Q223JA',
+        storageused: '24 TB',
+        storagelimit: '30 TB',
+        storagepercent: '80',
+        downloadused: '7 TB',
+        downloadlimit: '100 TB',
+        segmentpercent: '20',
+        downloadpercent: '7',
+        placement: 'Global',
+        agent: 'Test Agent',
+        date: '11 Mar 2023',
+    },
+    {
+        name: 'App',
+        email: 'vduke@gmail.com',
+        projectid: '56F82SR21Q284',
+        storageused: '150 TB',
+        storagelimit: '300 TB',
+        storagepercent: '50',
+        downloadused: '100 TB',
+        downloadlimit: '100 TB',
+        downloadpercent: '100',
+        segmentpercent: '43',
+        placement: 'Global',
+        agent: 'Test Agent',
+        date: '11 Mar 2023',
+    },
+    {
+        name: 'Backup',
+        email: 'knowles@aurora.io',
+        projectid: '624QXF42SR20S',
+        storageused: '99 TB',
+        storagelimit: '100 TB',
+        storagepercent: '99',
+        downloadused: '85 TB',
+        downloadlimit: '100 TB',
+        segmentpercent: '83',
+        downloadpercent: '85',
+        placement: 'Global',
+        agent: 'Agent',
+        date: '21 Apr 2023',
+    },
+    {
+        name: 'My Project',
+        email: 'sctrevis@gmail.com',
+        projectid: 'P33Q284JFF8FF',
+        storageused: '24 TB',
+        storagelimit: '30 TB',
+        storagepercent: '80',
+        downloadused: '7 TB',
+        downloadlimit: '100 TB',
+        segmentpercent: '20',
+        downloadpercent: '7',
+        placement: 'Global',
+        agent: 'Random',
+        date: '24 Mar 2023',
+    },
+    {
+        name: 'Sync',
+        email: 'sctrevis@gmail.com',
+        projectid: 'W22S284JFF8ZZ',
+        storageused: '150 TB',
+        storagelimit: '300 TB',
+        storagepercent: '50',
+        downloadused: '100 TB',
+        downloadlimit: '100 TB',
+        downloadpercent: '100',
+        segmentpercent: '43',
+        placement: 'Global',
+        agent: 'Random',
+        date: '24 Mar 2023',
+    },
+    {
+        name: 'Backupss',
+        email: 'destiny@gmail.com',
+        projectid: '2SFX284JFF8TS',
+        storageused: '99 TB',
+        storagelimit: '100 TB',
+        storagepercent: '99',
+        downloadused: '85 TB',
+        downloadlimit: '100 TB',
+        segmentpercent: '83',
+        downloadpercent: '85',
+        placement: 'Global',
+        agent: 'Random',
+        date: '24 Mar 2023',
+    },
+    {
+        name: 'Destiny',
+        email: 'destiny@gmail.com',
+        projectid: 'FGXZ484IF42TM',
+        storageused: '24 TB',
+        storagelimit: '30 TB',
+        storagepercent: '80',
+        downloadused: '7 TB',
+        downloadlimit: '100 TB',
+        segmentpercent: '20',
+        downloadpercent: '7',
+        placement: 'Global',
+        agent: 'Random',
+        date: '29 Mar 2023',
+    },
+];
+
+function setSearch(searchText: string) {
+    search.value = searchText;
+}
+
+function getPercentColor(percent: number) {
+    if (percent >= 99) {
+        return 'error';
+    } else if (percent >= 80) {
+        return 'warning';
+    } else {
+        return 'success';
+    }
+}
 </script>

satellite/admin/back-office/ui/src/components/UsageProgressComponent.vue

@@ -35,7 +35,7 @@
     </v-card>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import {
     VCard,
     VCardItem,
@@ -46,45 +46,13 @@ import {
     VBtn,
 } from 'vuetify/components';
 
-export default {
+const props = defineProps<{
-    components: {
+    title: string;
-        VCard,
+    progress: number;
-        VCardItem,
+    used: string;
-        VRow,
+    limit: string;
-        VCol,
+    available: string;
-        VProgressLinear,
+    percentage: string;
-        VDivider,
+    color: string;
-        VBtn,
+}>();
-    },
-    props: {
-        title: {
-            type: String,
-            required: true,
-        },
-        progress: {
-            type: Number,
-            required: true,
-        },
-        used: {
-            type: String,
-            required: true,
-        },
-        limit: {
-            type: String,
-            required: true,
-        },
-        available: {
-            type: String,
-            required: true,
-        },
-        percentage: {
-            type: String,
-            required: true,
-        },
-        color: {
-            type: String,
-            required: true,
-        },
-    },
-};
 </script>

satellite/admin/back-office/ui/src/components/UsersTableComponent.vue

@@ -69,113 +69,95 @@
     </v-card>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref } from 'vue';
 import { VCard, VTextField, VBtn, VIcon, VChip } from 'vuetify/components';
 import { VDataTable } from 'vuetify/labs/components';
 
 import AccountActionsMenu from '@/components/AccountActionsMenu.vue';
 
-export default {
+const search = ref<string>('');
-    name: 'AccountsTableComponent',
+const selected = ref<string[]>([]);
-    components: {
+const sortBy = ref([{ key: 'userid', order: 'asc' }]);
-        VCard,
+
-        VTextField,
+const headers = [
-        VBtn,
+    { title: 'Account', key: 'email' },
-        VIcon,
+    { title: 'Name', key: 'name' },
-        VChip,
+    // { title: 'ID', key: 'userid' },
-        VDataTable,
+    // { title: 'Type', key: 'type' },
-        AccountActionsMenu,
+    { title: 'Role', key: 'role' },
+    { title: 'Value', key: 'agent' },
+    { title: 'Date Added', key: 'date', align: 'start' },
+];
+const users = [
+    {
+        name: 'Magnolia Queen',
+        date: '12 Mar 2023',
+        type: 'Enterprise',
+        role: 'Member',
+        agent: 'Company',
+        email: 'magnolia@queen.com',
+        userid: '2521',
     },
-    data() {
+    {
-        return {
+        name: 'Irving Thacker',
-            search: '',
+        date: '30 May 2023',
-            selected: [],
+        type: 'Pro',
-            sortBy: [{ key: 'userid', order: 'asc' }],
+        role: 'Owner',
-            headers: [
+        agent: 'Company',
-                { title: 'Account', key: 'email' },
+        email: 'itacker@gmail.com',
-                { title: 'Name', key: 'name' },
+        userid: '41',
-                // { title: 'ID', key: 'userid' },
-                // { title: 'Type', key: 'type' },
-                { title: 'Role', key: 'role' },
-                { title: 'Value', key: 'agent' },
-                { title: 'Date Added', key: 'date', align: 'start' },
-            ],
-            users: [
-                {
-                    name: 'Magnolia Queen',
-                    date: '12 Mar 2023',
-                    type: 'Enterprise',
-                    role: 'Member',
-                    agent: 'Company',
-                    email: 'magnolia@queen.com',
-                    userid: '2521',
-                },
-                {
-                    name: 'Irving Thacker',
-                    date: '30 May 2023',
-                    type: 'Pro',
-                    role: 'Owner',
-                    agent: 'Company',
-                    email: 'itacker@gmail.com',
-                    userid: '41',
-                },
-                {
-                    name: 'Brianne Deighton',
-                    date: '20 Mar 2023',
-                    type: 'Free',
-                    role: 'Member',
-                    projects: '1',
-                    storage: '1,000 TB',
-                    download: '3,000 TB',
-                    agent: 'Company',
-                    email: 'bd@rianne.net',
-                    userid: '87212',
-                },
-                {
-                    name: 'Vince Duke',
-                    date: '4 Apr 2023',
-                    type: 'Priority',
-                    role: 'Member',
-                    agent: 'User Agent',
-                    email: 'vduke@gmail.com',
-                    userid: '53212',
-                },
-                {
-                    name: 'Luvenia Breckinridge',
-                    date: '11 Jan 2023',
-                    type: 'Free',
-                    role: 'Member',
-                    agent: 'User Agent',
-                    email: 'lbreckinridge42@gmail.com',
-                    userid: '1244',
-                },
-                {
-                    name: 'Georgia Jordan',
-                    date: '15 Mar 2023',
-                    type: 'Pro',
-                    role: 'Member',
-                    agent: 'Agent',
-                    email: 'georgia@jordan.net',
-                    userid: '55524',
-                },
-            ],
-        };
     },
-    computed: {
+    {
-        getColor() {
+        name: 'Brianne Deighton',
-            return (type) => {
+        date: '20 Mar 2023',
-                if (type === 'Enterprise') return 'purple';
+        type: 'Free',
-                if (type === 'Priority') return 'secondary';
+        role: 'Member',
-                if (type === 'Pro') return 'success';
+        projects: '1',
-                if (type === 'Suspended') return 'warning';
+        storage: '1,000 TB',
-                return 'default';
+        download: '3,000 TB',
-            };
+        agent: 'Company',
-        },
+        email: 'bd@rianne.net',
+        userid: '87212',
     },
-    methods: {
+    {
-        setSearch(searchText) {
+        name: 'Vince Duke',
-            this.search = searchText;
+        date: '4 Apr 2023',
-        },
+        type: 'Priority',
+        role: 'Member',
+        agent: 'User Agent',
+        email: 'vduke@gmail.com',
+        userid: '53212',
     },
-};
+    {
+        name: 'Luvenia Breckinridge',
+        date: '11 Jan 2023',
+        type: 'Free',
+        role: 'Member',
+        agent: 'User Agent',
+        email: 'lbreckinridge42@gmail.com',
+        userid: '1244',
+    },
+    {
+        name: 'Georgia Jordan',
+        date: '15 Mar 2023',
+        type: 'Pro',
+        role: 'Member',
+        agent: 'Agent',
+        email: 'georgia@jordan.net',
+        userid: '55524',
+    },
+];
+
+function getColor(type: string) {
+    if (type === 'Enterprise') return 'purple';
+    if (type === 'Priority') return 'secondary';
+    if (type === 'Pro') return 'success';
+    if (type === 'Suspended') return 'warning';
+    return 'default';
+}
+
+function setSearch(searchText: string) {
+    search.value = searchText;
+}
 </script>

satellite/admin/back-office/ui/src/layouts/default/AppBar.vue

@@ -172,7 +172,8 @@
     </v-navigation-drawer>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref, watch } from 'vue';
 import {
     VAppBar,
     VAppBarNavIcon,
@@ -193,53 +194,24 @@ import {
 } from 'vuetify/components';
 import { useTheme } from 'vuetify';
 
-export default {
+const theme = useTheme();
-    components: {
+
-        VAppBar,
+const drawer = ref<boolean>(true);
-        VAppBarNavIcon,
+const activeTheme = ref<number>(0);
-        VAppBarTitle,
+
-        VImg,
+function toggleTheme(newTheme: string) {
-        VMenu,
+    if ((newTheme === 'dark' && theme.global.current.value.dark) || (newTheme === 'light' && !theme.global.current.value.dark)) {
-        VBtnToggle,
+        return;
-        VBtn,
+    }
-        VTooltip,
+    theme.global.name.value = newTheme;
-        VIcon,
+    localStorage.setItem('theme', newTheme);  // Store the selected theme in localStorage
-        VList,
+}
-        VListItem,
+
-        VListItemTitle,
+watch(() => theme.global.current.value.dark, newVal => {
-        VListItemSubtitle,
+    activeTheme.value = newVal ? 1 : 0;
-        VDivider,
+});
-        VNavigationDrawer,
+
-        VSheet,
+// Check for stored theme in localStorage. If none, default to 'light'
-    },
+toggleTheme(localStorage.getItem('theme') || 'light');
-    setup() {
+activeTheme.value = theme.global.current.value.dark ? 1 : 0;
-        const theme = useTheme();
+</script>
-        return {
-            theme,
-            toggleTheme: (newTheme) => {
-                if ((newTheme === 'dark' && theme.global.current.value.dark) || (newTheme === 'light' && !theme.global.current.value.dark)) {
-                    return;
-                }
-                theme.global.name.value = newTheme;
-                localStorage.setItem('theme', newTheme);  // Store the selected theme in localStorage
-            },
-        };
-    },
-    data: () => ({
-        drawer: true,
-        menu: false,
-        activeTheme: null,
-    }),
-    watch: {
-        'theme.global.current.value.dark': function (newVal) {
-            this.activeTheme = newVal ? 1 : 0;
-        },
-    },
-    created() {
-        // Check for stored theme in localStorage. If none, default to 'light'
-        const storedTheme = localStorage.getItem('theme') || 'light';
-        this.toggleTheme(storedTheme);
-        this.activeTheme = this.theme.global.current.value.dark ? 1 : 0;
-    },
-};
-</script>

satellite/admin/back-office/ui/src/views/AccountDetails.vue

@@ -135,7 +135,8 @@
     </v-container>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
 import {
     VContainer,
     VRow,
@@ -159,36 +160,7 @@ import AccountInformationDialog from '@/components/AccountInformationDialog.vue'
 import AccountStatusDialog from '@/components/AccountStatusDialog.vue';
 import CardStatsComponent from '@/components/CardStatsComponent.vue';
 
-export default {
+onMounted(() => {
-    components: {
+    document.title = 'Storj Admin - Account Details';
-        VContainer,
+});
-        VRow,
-        VCol,
-        VChip,
-        VTooltip,
-        VIcon,
-        VCard,
-        VCardText,
-        VDivider,
-        VBtn,
-        PageTitleComponent,
-        AccountProjectsTableComponent,
-        LogsTableComponent,
-        AccountActionsMenu,
-        AccountUserAgentsDialog,
-        AccountGeofenceDialog,
-        AccountInformationDialog,
-        AccountStatusDialog,
-        CardStatsComponent,
-    },
-    data() {
-        return {
-            dialog: false,
-            valid: false,
-        };
-    },
-    mounted() {
-        document.title = 'Storj Admin - Account Details';
-    },
-};
 </script>

satellite/admin/back-office/ui/src/views/Accounts.vue

@@ -48,7 +48,8 @@
     </v-container>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { onMounted } from 'vue';
 import { VContainer, VRow, VCol, VBtn } from 'vuetify/components';
 
 import PageTitleComponent from '@/components/PageTitleComponent.vue';
@@ -56,26 +57,7 @@ import PageSubtitleComponent from '@/components/PageSubtitleComponent.vue';
 import AccountsTableComponent from '@/components/AccountsTableComponent.vue';
 import NewAccountDialog from '@/components/NewAccountDialog.vue';
 
-export default {
+onMounted(() => {
-    components: {
+    document.title = 'Storj Admin - Accounts';
-        VContainer,
+});
-        VRow,
-        VCol,
-        VBtn,
-        PageTitleComponent,
-        PageSubtitleComponent,
-        AccountsTableComponent,
-        NewAccountDialog,
-    },
-    data() {
-        return {
-            dialog: false,
-            valid: false,
-            search: '',
-        };
-    },
-    mounted() {
-        document.title = 'Storj Admin - Accounts';
-    },
-};
 </script>

satellite/admin/back-office/ui/src/views/AdminSettings.vue

@@ -51,7 +51,8 @@
     </v-container>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { onMounted } from 'vue';
 import {
     VContainer,
     VRow,
@@ -67,22 +68,7 @@ import PageTitleComponent from '@/components/PageTitleComponent.vue';
 import PageSubtitleComponent from '@/components/PageSubtitleComponent.vue';
 import AdminAccountDialog from '@/components/AdminAccountDialog.vue';
 
-export default {
+onMounted(() => {
-    components: {
+    document.title = 'Storj Admin Settings';
-        VContainer,
+});
-        VRow,
-        VCol,
-        VCard,
-        VCardText,
-        VChip,
-        VDivider,
-        VBtn,
-        PageTitleComponent,
-        PageSubtitleComponent,
-        AdminAccountDialog,
-    },
-    mounted() {
-        document.title = 'Storj Admin Settings';
-    },
-};
 </script>

satellite/admin/back-office/ui/src/views/BucketDetails.vue

@@ -130,7 +130,8 @@
     </v-container>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { onMounted } from 'vue';
 import {
     VContainer,
     VRow,
@@ -151,33 +152,7 @@ import BucketUserAgentsDialog from '@/components/BucketUserAgentsDialog.vue';
 import BucketInformationDialog from '@/components/BucketInformationDialog.vue';
 import CardStatsComponent from '@/components/CardStatsComponent.vue';
 
-export default {
+onMounted(() => {
-    components: {
+    document.title = 'Storj Admin - Bucket Details';
-        VContainer,
+});
-        VRow,
-        VCol,
-        VChip,
-        VTooltip,
-        VBtn,
-        VIcon,
-        VCard,
-        VCardText,
-        VDivider,
-        PageTitleComponent,
-        BucketActionsMenu,
-        BucketGeofenceDialog,
-        BucketUserAgentsDialog,
-        BucketInformationDialog,
-        CardStatsComponent,
-    },
-    data() {
-        return {
-            dialog: false,
-            valid: false,
-        };
-    },
-    mounted() {
-        document.title = 'Storj Admin - Bucket Details';
-    },
-};
 </script>

satellite/admin/back-office/ui/src/views/Dashboard.vue

@@ -47,7 +47,8 @@
     </v-container>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { onMounted } from 'vue';
 import { VContainer, VRow, VCol, VCard, VDivider } from 'vuetify/components';
 
 import PageTitleComponent from '@/components/PageTitleComponent.vue';
@@ -55,20 +56,7 @@ import PageSubtitleComponent from '@/components/PageSubtitleComponent.vue';
 import CardStatsComponent from '@/components/CardStatsComponent.vue';
 import DashboardLimitsTableComponent from '@/components/DashboardLimitsTableComponent.vue';
 
-export default {
+onMounted(() => {
-    components: {
+    document.title = 'Storj Admin - Dashboard';
-        VContainer,
+});
-        VRow,
-        VCol,
-        VCard,
-        VDivider,
-        PageTitleComponent,
-        PageSubtitleComponent,
-        CardStatsComponent,
-        DashboardLimitsTableComponent,
-    },
-    mounted() {
-        document.title = 'Storj Admin - Dashboard';
-    },
-};
 </script>

satellite/admin/back-office/ui/src/views/Login.vue

@@ -54,7 +54,8 @@
     </v-container>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref, watch } from 'vue';
 import { useTheme } from 'vuetify';
 import {
     VAppBar,
@@ -71,51 +72,24 @@ import {
     VSelect,
 } from 'vuetify/components';
 
-export default {
+const theme = useTheme();
-    components: {
+
-        VAppBar,
+const activeTheme = ref<number>(0);
-        VAppBarTitle,
+const selectedSatellite = ref<string>('North America US1');
-        VImg,
+
-        VBtnToggle,
+function toggleTheme(newTheme: string) {
-        VTooltip,
+    if ((newTheme === 'dark' && theme.global.current.value.dark) || (newTheme === 'light' && !theme.global.current.value.dark)) {
-        VBtn,
+        return;
-        VContainer,
+    }
-        VRow,
+    theme.global.name.value = newTheme;
-        VCol,
+    localStorage.setItem('theme', newTheme);  // Store the selected theme in localStorage
-        VCard,
+}
-        VCardText,
+
-        VSelect,
+watch(() => theme.global.current.value.dark, newVal => {
-    },
+    activeTheme.value = newVal ? 1 : 0;
-    setup() {
+});
-        const theme = useTheme();
+
-        return {
+// Check for stored theme in localStorage. If none, default to 'light'
-            theme,
+toggleTheme(localStorage.getItem('theme') || 'light');
-            toggleTheme: (newTheme) => {
+activeTheme.value = theme.global.current.value.dark ? 1 : 0;
-                if ((newTheme === 'dark' && theme.global.current.value.dark) || (newTheme === 'light' && !theme.global.current.value.dark)) {
-                    return;
-                }
-                theme.global.name.value = newTheme;
-                localStorage.setItem('theme', newTheme);  // Store the selected theme in localStorage
-            },
-        };
-    },
-    data: () => ({
-        activeTheme: null,
-        selectedSatellite: 'North America US1',
-    }),
-    watch: {
-        'theme.global.current.value.dark': function (newVal) {
-            this.activeTheme = newVal ? 1 : 0;
-        },
-    },
-    mounted() {
-        document.title = 'Storj Admin - Login';
-    },
-    created() {
-    // Check for stored theme in localStorage. If none, default to 'light'
-        const storedTheme = localStorage.getItem('theme') || 'light';
-        this.toggleTheme(storedTheme);
-        this.activeTheme = this.theme.global.current.value.dark ? 1 : 0;
-    },
-};
 </script>

satellite/admin/back-office/ui/src/views/ProjectDetails.vue

@@ -168,7 +168,8 @@
     </v-container>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { onMounted } from 'vue';
 import {
     VContainer,
     VRow,
@@ -193,37 +194,7 @@ import ProjectUserAgentsDialog from '@/components/ProjectUserAgentsDialog.vue';
 import ProjectLimitsDialog from '@/components/ProjectLimitsDialog.vue';
 import ProjectInformationDialog from '@/components/ProjectInformationDialog.vue';
 
-export default {
+onMounted(() => {
-    components: {
+    document.title = 'Storj Admin - Project Details';
-        VContainer,
+});
-        VRow,
-        VCol,
-        VChip,
-        VTooltip,
-        VBtn,
-        VIcon,
-        VCard,
-        VCardText,
-        VDivider,
-        PageTitleComponent,
-        UsageProgressComponent,
-        BucketsTableComponent,
-        LogsTableComponent,
-        UsersTableComponent,
-        ProjectActionsMenu,
-        ProjectGeofenceDialog,
-        ProjectUserAgentsDialog,
-        ProjectLimitsDialog,
-        ProjectInformationDialog,
-    },
-    data() {
-        return {
-            dialog: false,
-            valid: false,
-        };
-    },
-    mounted() {
-        document.title = 'Storj Admin - Project Details';
-    },
-};
 </script>

satellite/admin/back-office/ui/src/views/Projects.vue

@@ -27,7 +27,8 @@
     </v-container>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { onMounted } from 'vue';
 import { VContainer, VRow, VCol, VBtn } from 'vuetify/components';
 
 import PageTitleComponent from '@/components/PageTitleComponent.vue';
@@ -35,38 +36,7 @@ import PageSubtitleComponent from '@/components/PageSubtitleComponent.vue';
 import ProjectsTableComponent from '@/components/ProjectsTableComponent.vue';
 import NewProjectDialog from '@/components/NewProjectDialog.vue';
 
-export default {
+onMounted(() => {
-    components: {
+    document.title = 'Storj Admin - Projects';
-        VContainer,
+});
-        VRow,
-        VCol,
-        VBtn,
-        PageTitleComponent,
-        PageSubtitleComponent,
-        ProjectsTableComponent,
-        NewProjectDialog,
-    },
-    data() {
-        return {
-            dialog: false,
-            valid: false,
-            search: '',
-            email: '',
-            emailRules: [
-                value => {
-                    if (value) return true;
-
-                    return 'E-mail is requred.';
-                },
-                value => {
-                    if (/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(value)) return true;
-                    return 'E-mail must be valid.';
-                },
-            ],
-        };
-    },
-    mounted() {
-        document.title = 'Storj Admin - Projects';
-    },
-};
 </script>