Skip to content

Commit f8973dc

Browse files
pbsonpbson
committed
feat: Update cardamon dashboard ui to new design
1 parent 997098c commit f8973dc

46 files changed

Lines changed: 1780 additions & 1641 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎package-lock.json‎

Lines changed: 10 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
"@fortawesome/vue-fontawesome": "^3.0.8",
2626
"axios": "^1.7.2",
2727
"chart.js": "^4.4.3",
28+
"date-fns": "^3.6.0",
2829
"flowbite": "^2.3.0",
2930
"flowbite-vue": "^0.1.4",
3031
"gridstack": "^10.1.2",

‎src/components/Common/Breadcrumb/AppBreadcrumb.vue‎

Lines changed: 30 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,47 @@
11
<template>
2-
<fwb-breadcrumb>
3-
<fwb-breadcrumb-item class="breadcrumb__item" home href="/dashboard">
4-
<template #home-icon>
5-
<font-awesome-icon :icon="['fas', 'clone']" class="breadcrumb__icon breadcrumb__item-text" />
6-
</template>
7-
<div>
8-
<router-link to="/dashboard" class="flex items-center">
9-
<span class="breadcrumb__item-text">Dashboard</span>
10-
</router-link>
11-
</div>
12-
</fwb-breadcrumb-item>
13-
<fwb-breadcrumb-item class="breadcrumb__item" v-if="runId">
14-
<span class="breadcrumb__item-text">Cardamon Run ID: {{ runId }}</span>
15-
</fwb-breadcrumb-item>
16-
<fwb-breadcrumb-item class="breadcrumb__item" v-if="scenarioId">
17-
<span class="breadcrumb__item-text">Scenario ID: {{ scenarioId }}</span>
18-
</fwb-breadcrumb-item>
19-
</fwb-breadcrumb>
2+
<fwb-breadcrumb>
3+
<fwb-breadcrumb-item class="breadcrumb__item" home href="/dashboard">
4+
<template #home-icon>
5+
<font-awesome-icon
6+
:icon="['fas', 'clone']"
7+
class="breadcrumb__icon breadcrumb__item-text"
8+
/>
9+
</template>
10+
<div>
11+
<router-link to="/dashboard" class="flex items-center">
12+
<span class="breadcrumb__item-text">Dashboard</span>
13+
</router-link>
14+
</div>
15+
</fwb-breadcrumb-item>
16+
<fwb-breadcrumb-item class="breadcrumb__item" v-if="runId">
17+
<span class="breadcrumb__item-text">Cardamon Run ID: {{ runId }}</span>
18+
</fwb-breadcrumb-item>
19+
<fwb-breadcrumb-item class="breadcrumb__item" v-if="scenarioName">
20+
<span class="breadcrumb__item-text">Scenario ID: {{ scenarioName }}</span>
21+
</fwb-breadcrumb-item>
22+
</fwb-breadcrumb>
2023
</template>
2124

2225
<script setup lang="ts">
23-
import { FwbBreadcrumb, FwbBreadcrumbItem } from 'flowbite-vue';
24-
import { useRoute } from 'vue-router';
25-
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
26+
import { FwbBreadcrumb, FwbBreadcrumbItem } from 'flowbite-vue'
27+
import { useRoute } from 'vue-router'
28+
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
2629
27-
const route = useRoute();
28-
const runId = route.params.runId;
29-
const scenarioId = route.params.scenarioId;
30+
const route = useRoute()
31+
const runId = route.params.runId
32+
const scenarioName = route.params.scenarioName
3033
</script>
3134

3235
<style scoped>
3336
.breadcrumb__item {
34-
@apply text-gray-500 dark:text-gray-300;
37+
@apply text-gray-500 dark:text-gray-300;
3538
}
3639
3740
.breadcrumb__item-text {
38-
@apply ml-2 font-light text-gray-500 dark:text-gray-300;
41+
@apply ml-2 font-light text-gray-500 dark:text-gray-300;
3942
}
4043
4144
.breadcrumb__icon {
42-
@apply mr-2;
45+
@apply mr-2;
4346
}
4447
</style>

‎src/components/Common/Header/AppHeader.vue‎

Lines changed: 73 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,119 +1,125 @@
11
<template>
2-
<header class="app-header">
3-
<div class="app-header__container">
4-
<div class="app-header__logo-section">
5-
<img src="/logo.svg" alt="Logo" class="app-header__logo-image">
2+
<header class="app-header">
3+
<div class="app-header__container">
4+
<div class="app-header__logo-section">
5+
<img src="/logo.svg" alt="Logo" class="app-header__logo-image" />
6+
</div>
7+
8+
<div class="app-header__right-section">
9+
<!-- Dark Mode Toggle Button -->
10+
<button @click="toggleDarkMode" class="app-header__toggle-theme-button">
11+
<font-awesome-icon :icon="darkMode ? 'moon' : 'sun'" />
12+
<span>{{ darkMode ? 'Dark Mode' : 'Light Mode' }}</span>
13+
</button>
14+
15+
<!-- Add Widget Button -->
16+
<!-- <div v-if="showAddWidget" class="app-header__button-container">
17+
<fwb-button pill class="app-header__add-widget-button" @click="openSidebar">
18+
<template #prefix>
19+
<font-awesome-icon icon="circle-plus" class="mr-2" />
20+
</template>
21+
Add Widget
22+
</fwb-button>
23+
</div> -->
24+
25+
<!-- Database Info Icon with Tooltip -->
26+
<fwb-tooltip placement="bottom" class="cursor-pointer">
27+
<template #trigger>
28+
<font-awesome-layers class="fa-lg app-header__db-icon">
29+
<font-awesome-icon
30+
icon="fa-solid fa-circle"
31+
class="app-header__circle-icon"
32+
transform="grow-13"
33+
/>
34+
<font-awesome-icon icon="fa-solid fa-database" class="app-header__database-icon" />
35+
</font-awesome-layers>
36+
</template>
37+
<template #content>
38+
<div class="app-header__tooltip-content">
39+
<span class="tooltip-content__label">Database Endpoint: </span>
40+
<span class="tooltip-content__info">{{ databaseEndpoint }}</span>
641
</div>
7-
8-
<div class="app-header__right-section">
9-
<!-- Dark Mode Toggle Button -->
10-
<button @click="toggleDarkMode" class="app-header__toggle-theme-button">
11-
<font-awesome-icon :icon="darkMode ? 'moon' : 'sun'" />
12-
<span>{{ darkMode ? 'Dark Mode' : 'Light Mode' }}</span>
13-
</button>
14-
15-
<!-- Add Widget Button -->
16-
<div class="app-header__button-container">
17-
<fwb-button pill class="app-header__add-widget-button" @click="openSidebar">
18-
<template #prefix>
19-
<font-awesome-icon icon="circle-plus" class="mr-2" />
20-
</template>
21-
Add Widget
22-
</fwb-button>
23-
</div>
24-
25-
<!-- Database Info Icon with Tooltip -->
26-
<fwb-tooltip placement="bottom">
27-
<template #trigger>
28-
<font-awesome-layers class="fa-lg app-header__db-icon">
29-
<font-awesome-icon icon="fa-solid fa-circle" class="app-header__circle-icon" transform="grow-13" />
30-
<font-awesome-icon icon="fa-solid fa-database" class="app-header__database-icon" />
31-
</font-awesome-layers>
32-
</template>
33-
<template #content>
34-
<div class="app-header__tooltip-content">
35-
<span class="tooltip-content__label">Database Endpoint: </span>
36-
<span class="tooltip-content__info">Database URL info</span>
37-
</div>
38-
</template>
39-
</fwb-tooltip>
40-
</div>
41-
</div>
42-
</header>
42+
</template>
43+
</fwb-tooltip>
44+
</div>
45+
</div>
46+
</header>
4347
</template>
4448

4549
<script setup lang="ts">
46-
import { FwbButton, FwbTooltip } from 'flowbite-vue';
47-
import { FontAwesomeIcon, FontAwesomeLayers } from '@fortawesome/vue-fontawesome';
48-
import { useWidgetStore } from '@/stores/widgets';
49-
import { useThemeStore } from '@/stores/theme';
50-
import { computed } from 'vue';
51-
52-
const widgetStore = useWidgetStore();
50+
import { FwbTooltip } from 'flowbite-vue'
51+
import { FontAwesomeIcon, FontAwesomeLayers } from '@fortawesome/vue-fontawesome'
52+
import { useThemeStore } from '@/stores/theme'
53+
import { computed, onMounted } from 'vue'
54+
import { useDatabaseStore } from '@/stores/database-endpoint'
5355
54-
const openSidebar = () => {
55-
widgetStore.setSidebarVisible(true);
56-
};
56+
const databaseStore = useDatabaseStore()
5757
58-
const themeStore = useThemeStore();
59-
const darkMode = computed(() => themeStore.darkMode);
58+
const themeStore = useThemeStore()
59+
const darkMode = computed(() => themeStore.darkMode)
6060
6161
const toggleDarkMode = () => {
62-
themeStore.toggleDarkMode();
63-
};
62+
themeStore.toggleDarkMode()
63+
}
64+
65+
const databaseEndpoint = computed(() => databaseStore.databaseEndpoint)
66+
67+
onMounted(() => {
68+
databaseStore.fetchDatabaseEndpoint()
69+
})
6470
</script>
6571

6672
<style scoped>
6773
.app-header {
68-
@apply fixed top-0 z-50 h-[81px] w-full border-b border-solid border-gray-200 bg-white dark:bg-gray-900 dark:border-gray-800;
74+
@apply fixed top-0 z-50 h-[81px] w-full border-b border-solid border-gray-200 bg-white dark:bg-gray-900 dark:border-gray-800;
6975
}
7076
7177
.app-header__container {
72-
@apply flex h-full items-center justify-between pr-10;
78+
@apply flex h-full items-center justify-between pr-10;
7379
}
7480
7581
.app-header__logo-section {
76-
@apply flex items-center justify-center min-w-[240px] h-full border-r border-solid border-gray-200 dark:border-gray-800;
82+
@apply flex items-center justify-center min-w-[240px] h-full;
7783
}
7884
7985
.app-header__logo-image {
80-
@apply h-10;
86+
@apply h-10;
8187
}
8288
8389
.app-header__right-section {
84-
@apply flex items-center space-x-4 pr-10;
90+
@apply flex items-center space-x-4 pr-10;
8591
}
8692
8793
.app-header__button-container {
88-
@apply pr-4;
94+
@apply pr-4;
8995
}
9096
9197
.app-header__add-widget-button {
92-
@apply bg-blue-600 text-white border-none dark:bg-blue-700 dark:text-white;
98+
@apply bg-blue-600 text-white border-none dark:bg-blue-700 dark:text-white;
9399
}
94100
95101
.app-header__db-icon {
96-
@apply text-gray-600 dark:text-gray-300;
102+
@apply text-gray-600 dark:text-gray-300;
97103
}
98104
99105
.app-header__circle-icon {
100-
@apply text-neutral-400 dark:text-neutral-600;
106+
@apply text-neutral-400 dark:text-neutral-600;
101107
}
102108
103109
.app-header__database-icon {
104-
@apply text-white dark:text-gray-200;
110+
@apply text-white dark:text-gray-200;
105111
}
106112
107113
.app-header__tooltip-content {
108-
@apply p-2 mr-4 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800;
114+
@apply p-2 mr-4 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800;
109115
}
110116
111117
.tooltip-content__label {
112-
@apply text-sm font-bold dark:text-white;
118+
@apply text-sm font-bold dark:text-white;
113119
}
114120
115121
.tooltip-content__info {
116-
@apply text-sm text-gray-500 font-normal dark:text-gray-400;
122+
@apply text-sm text-gray-500 font-normal dark:text-gray-400;
117123
}
118124
119125
.app-header__toggle-theme-button {

0 commit comments

Comments
 (0)