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,30 +85,18 @@
     </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,
-        VTooltip,
-        VChip,
-        VDataTable,
-        ProjectActionsMenu,
-    },
-    data() {
-        return {
-            // search in the table
-            search: '',
-            selected: [],
-            sortBy: [{ key: 'name', order: 'asc' }],
-            headers: [
     { title: 'Project ID', key: 'projectid', align: 'start' },
     // { title: 'Name', key: 'name'},
     { title: 'Storage Used', key: 'storagepercent' },
@@ -120,8 +108,8 @@ export default {
     { title: 'Segments Used', key: 'segmentpercent' },
     // { title: 'Value Attribution', key: 'agent' },
     // { title: 'Date Created', key: 'date' },
-            ],
+];
-            files: [
+const files = [
     {
         name: 'My First Project',
         projectid: 'F82SR21Q284JF',
@@ -161,14 +149,13 @@ export default {
         agent: 'Company',
         date: '21 Apr 2023',
     },
-            ],
+];
-        };
+
-    },
+function setSearch(searchText: string) {
-    methods: {
+    search.value = searchText;
-        setSearch(searchText) {
+}
-            this.search = searchText;
+
-        },
+function getPercentColor(percent: number) {
-        getPercentColor(percent) {
     if (percent >= 99) {
         return 'error';
     } else if (percent >= 80) {
@@ -176,7 +163,5 @@ export default {
     } 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,29 +81,18 @@
     </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,
-        VIcon,
-        VChip,
-        VDataTable,
-        AccountActionsMenu,
-    },
-    data() {
-        return {
-            search: '',
-            selected: [],
-            sortBy: [{ key: 'email', order: 'asc' }],
-            headers: [
     { title: 'Account', key: 'email' },
     { title: 'Type', key: 'type' },
     // { title: 'Name', key: 'name' },
@@ -115,8 +104,8 @@ export default {
     { title: 'Placement', key: 'placement' },
     { title: 'ID', key: 'userid' },
     { title: 'Created', key: 'date', align: 'start' },
-            ],
+];
-            users: [
+const users = [
     {
         name: 'Magnolia Queen',
         date: '12 Mar 2023',
@@ -273,12 +262,9 @@ export default {
         placement: 'global',
         userid: '25808',
     },
-            ],
+];
-        };
+
-    },
+function getColor(type: string) {
-    computed: {
-        getColor() {
-            return (type) => {
     if (type === 'Enterprise') return 'purple';
     if (type === 'Priority') return 'secondary';
     if (type === 'Pro') return 'success';
@@ -289,13 +275,9 @@ export default {
     if (type === 'Suspended') return 'error';
     if (type === 'Deleted') return 'error';
     return 'default';
-            };
+}
-        },
+
-    },
+function setSearch(searchText: string) {
-    methods: {
+    search.value = searchText;
-        setSearch(searchText) {
+}
-            this.search = 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,30 +58,18 @@
     </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,
-        VIcon,
-        VChip,
-        VDataTable,
-        BucketActionsMenu,
-    },
-    data() {
-        return {
-            // search in the table
-            search: '',
-            selected: [],
-            sortBy: [{ key: 'name', order: 'asc' }],
-            headers: [
     { title: 'Bucket', key: 'name' },
     { title: 'Storage', key: 'storage' },
     { title: 'Download', key: 'download' },
@@ -89,8 +77,8 @@ export default {
     { title: 'Placement', key: 'placement' },
     { title: 'Value', key: 'agent' },
     { title: 'Created', key: 'date' },
-            ],
+];
-            files: [
+const files = [
     {
         name: 'First',
         placement: 'global',
@@ -191,13 +179,9 @@ export default {
         agent: 'Random',
         date: '29 Mar 2023',
     },
-            ],
+];
-        };
+
-    },
+function setSearch(searchText: string) {
-    methods: {
+    search.value = searchText;
-        setSearch(searchText) {
+}
-            this.search = 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,29 +98,19 @@
         </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,
-        VTooltip,
-        VDataTable,
-        ProjectActionsMenu,
-    },
-    data() {
-        return {
-            // search in the table
-            search: '',
-            selected: [],
-            sortBy: [{ key: 'name', order: 'asc' }],
-            headers: [
     { title: 'Project ID', key: 'projectid', align: 'start' },
     // { title: 'Name', key: 'name'},
     { title: 'Account', key: 'email' },
@@ -134,8 +124,8 @@ export default {
     { title: 'Value', key: 'agent' },
     { title: 'Placement', key: 'placement' },
     { title: 'Created', key: 'date' },
-            ],
+];
-            projects: [
+const projects = [
     {
         name: 'Personal Project',
         email: 'knowles@aurora.io',
@@ -256,14 +246,13 @@ export default {
         agent: 'Random',
         date: '29 Mar 2023',
     },
-            ],
+];
-        };
+
-    },
+function setSearch(searchText: string) {
-    methods: {
+    search.value = searchText;
-        setSearch(searchText) {
+}
-            this.search = searchText;
+
-        },
+function getPercentColor(percent: number) {
-        getPercentColor(percent) {
     if (percent >= 99) {
         return 'error';
     } else if (percent >= 80) {
@@ -271,7 +260,5 @@ export default {
     } else {
         return 'success';
     }
-        },
+}
-    },
-};
 </script>

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

@@ -47,26 +47,16 @@
     </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,
-        VDataTable,
-    },
-    data() {
-        return {
-            // search in the table
-            search: '',
-            selected: [],
-            expanded: [],
-            sortBy: [{ key: 'date', order: 'asc' }],
-            headers: [
     { title: 'Date', key: 'date' },
     { title: 'Change', key: 'name' },
     { title: 'Operation', key: 'operation' },
@@ -76,8 +66,8 @@ export default {
     { title: 'Previous', key: 'previous' },
     { title: 'Admin', key: 'email' },
     { title: '', key: 'data-table-expand' },
-            ],
+];
-            files: [
+const files = [
     {
         name: 'Project',
         operation: 'Limits',
@@ -98,13 +88,9 @@ export default {
         previous: 'Free Tier',
         date: '21 Apr 2023',
     },
-            ],
+];
-        };
+
-    },
+function setSearch(searchText: string) {
-    methods: {
+    search.value = searchText;
-        setSearch(searchText) {
+}
-            this.search = 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,
+const emailRules = [
-        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.';
+        return 'E-mail is required.';
     },
     value => {
         if (/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(value)) return true;
         return 'E-mail must be valid.';
     },
-            ],
+];
-        };
+
-    },
+function onButtonClick() {
-    methods: {
+    snackbar.value = true;
-        onButtonClick() {
+    dialog.value = false;
-            this.snackbar = true;
+}
-            this.dialog = 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,
-            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,
-            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,24 +115,11 @@ 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,
-        VChip,
-        VTooltip,
-        VDataTable,
-        ProjectActionsMenu,
-    },
-    data() {
-        return {
-            // search in the table
-            search: '',
-            selected: [],
-            sortBy: [{ key: 'name', order: 'asc' }],
-            headers: [
     { title: 'Project ID', key: 'projectid', align: 'start' },
     // { title: 'Name', key: 'name'},
     { title: 'Account', key: 'email' },
@@ -145,8 +133,8 @@ export default {
     { title: 'Value', key: 'agent' },
     { title: 'Placement', key: 'placement' },
     { title: 'Created', key: 'date' },
-            ],
+];
-            files: [
+const files = [
     {
         name: 'My First Project',
         email: 'vduke@gmail.com',
@@ -297,14 +285,13 @@ export default {
         agent: 'Random',
         date: '29 Mar 2023',
     },
-            ],
+];
-        };
+
-    },
+function setSearch(searchText: string) {
-    methods: {
+    search.value = searchText;
-        setSearch(searchText) {
+}
-            this.search = searchText;
+
-        },
+function getPercentColor(percent: number) {
-        getPercentColor(percent) {
     if (percent >= 99) {
         return 'error';
     } else if (percent >= 80) {
@@ -312,7 +299,5 @@ export default {
     } 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,29 +69,18 @@
     </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,
-        VIcon,
-        VChip,
-        VDataTable,
-        AccountActionsMenu,
-    },
-    data() {
-        return {
-            search: '',
-            selected: [],
-            sortBy: [{ key: 'userid', order: 'asc' }],
-            headers: [
     { title: 'Account', key: 'email' },
     { title: 'Name', key: 'name' },
     // { title: 'ID', key: 'userid' },
@@ -99,8 +88,8 @@ export default {
     { title: 'Role', key: 'role' },
     { title: 'Value', key: 'agent' },
     { title: 'Date Added', key: 'date', align: 'start' },
-            ],
+];
-            users: [
+const users = [
     {
         name: 'Magnolia Queen',
         date: '12 Mar 2023',
@@ -158,24 +147,17 @@ export default {
         email: 'georgia@jordan.net',
         userid: '55524',
     },
-            ],
+];
-        };
+
-    },
+function getColor(type: string) {
-    computed: {
-        getColor() {
-            return (type) => {
     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) {
-    methods: {
+    search.value = searchText;
-        setSearch(searchText) {
+}
-            this.search = 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 {
-    components: {
-        VAppBar,
-        VAppBarNavIcon,
-        VAppBarTitle,
-        VImg,
-        VMenu,
-        VBtnToggle,
-        VBtn,
-        VTooltip,
-        VIcon,
-        VList,
-        VListItem,
-        VListItemTitle,
-        VListItemSubtitle,
-        VDivider,
-        VNavigationDrawer,
-        VSheet,
-    },
-    setup() {
 const theme = useTheme();
-        return {
+
-            theme,
+const drawer = ref<boolean>(true);
-            toggleTheme: (newTheme) => {
+const activeTheme = ref<number>(0);
+
+function toggleTheme(newTheme: string) {
     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
-            },
+}
-        };
+
-    },
+watch(() => theme.global.current.value.dark, newVal => {
-    data: () => ({
+    activeTheme.value = newVal ? 1 : 0;
-        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';
+toggleTheme(localStorage.getItem('theme') || 'light');
-        this.toggleTheme(storedTheme);
+activeTheme.value = theme.global.current.value.dark ? 1 : 0;
-        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: {
-        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: {
-        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: {
-        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: {
-        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: {
-        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 {
-    components: {
-        VAppBar,
-        VAppBarTitle,
-        VImg,
-        VBtnToggle,
-        VTooltip,
-        VBtn,
-        VContainer,
-        VRow,
-        VCol,
-        VCard,
-        VCardText,
-        VSelect,
-    },
-    setup() {
 const theme = useTheme();
-        return {
+
-            theme,
+const activeTheme = ref<number>(0);
-            toggleTheme: (newTheme) => {
+const selectedSatellite = ref<string>('North America US1');
+
+function toggleTheme(newTheme: string) {
     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
-            },
+}
-        };
+
-    },
+watch(() => theme.global.current.value.dark, newVal => {
-    data: () => ({
+    activeTheme.value = newVal ? 1 : 0;
-        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';
+toggleTheme(localStorage.getItem('theme') || 'light');
-        this.toggleTheme(storedTheme);
+activeTheme.value = theme.global.current.value.dark ? 1 : 0;
-        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: {
-        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: {
-        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>