akadmin/chatwoot
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Update dashboard icons

Browse Source
This commit is contained in:
Pranav
2025-12-19 12:14:23 -08:00
parent 05f9c3053d
commit b1c4ac7ede
26 changed files with 421 additions and 234 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/superadmin_pages/views/dashboard/Index.vue
+58 -14
View File
@@ -1,6 +1,8 @@
<script setup>
import { computed } from 'vue';
/* eslint-disable vue/no-bare-strings-in-template */
import { computed, ref } from 'vue';
import BarChart from 'shared/components/charts/BarChart.vue';
const props = defineProps({
componentData: {
type: Object,
@@ -8,11 +10,32 @@ const props = defineProps({
},
});
const chartFilterOptions = [
{ value: '7', label: 'Last 7d' },
{ value: '30', label: 'Last 30d' },
];
const selectedChartFilter = ref(
props.componentData.chartDays?.toString() || '7'
);
const onChartFilterChange = event => {
const period = event.target.value;
const url = new URL(window.location.href);
url.searchParams.set('chart_period', period);
window.location.href = url.toString();
};
const formatDate = dateString => {
const date = new Date(dateString);
return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
};
const prepareData = sourceData => {
var labels = [];
var data = [];
const labels = [];
const data = [];
sourceData.forEach(item => {
labels.push(item[0]);
labels.push(formatDate(item[0]));
data.push(item[1]);
});
return {
@@ -44,18 +67,19 @@ const { accountsCount, usersCount, inboxesCount, conversationsCount } =
role="banner"
>
<div
class="flex items-center justify-between w-full h-20 mx-auto max-w-[60rem]"
class="flex items-center justify-between w-full h-16 mx-auto max-w-[60rem]"
>
<div class="flex items-center gap-3">
<div
class="border border-n-weak p-2 rounded-full text-n-slate-11"
>
<div class="border border-n-weak p-2 rounded-full text-n-slate-11">
<svg width="24" height="24">
<use xlink:href="#icon-dashboard-line" />
<use xlink:href="#icon-layout-dashboard" />
</svg>
</div>
<div class="flex flex-col justify-center">
<h1 id="page-title" class="text-base font-medium tracking-tight text-n-slate-12">
<h1
id="page-title"
class="text-base font-medium tracking-tight text-n-slate-12"
>
Admin Dashboard
</h1>
<p class="text-xs text-n-slate-11 m-0">
@@ -67,7 +91,7 @@ const { accountsCount, usersCount, inboxesCount, conversationsCount } =
</header>
<main class="flex-1 px-6 overflow-y-auto">
<div class="w-full mx-auto max-w-[60rem] py-4">
<div class="w-full mx-auto max-w-[60rem] py-8">
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
<div
class="p-4 rounded-xl bg-n-solid-2 outline outline-1 outline-n-container shadow-sm"
@@ -99,14 +123,34 @@ const { accountsCount, usersCount, inboxesCount, conversationsCount } =
<div class="text-3xl font-semibold text-n-slate-12">
{{ conversationsCount }}
</div>
<div class="text-sm text-n-slate-11">Conversations</div>
<div class="text-sm text-n-slate-11">Conversations (30d)</div>
</div>
</div>
<div
class="p-6 rounded-xl bg-n-solid-2 outline outline-1 outline-n-container shadow-sm"
class="px-6 pt-4 pb-6 rounded-xl bg-n-solid-2 outline outline-1 outline-n-container shadow-sm"
>
<BarChart class="w-full max-h-[500px]" :collection="chartData" />
<div class="flex items-center justify-between mb-4">
<div class="text-base font-semibold text-n-slate-12">
Conversations
</div>
<select
v-model="selectedChartFilter"
class="w-auto px-3 py-1.5 text-sm rounded-lg border border-n-weak bg-n-background text-n-slate-12 cursor-pointer focus:outline-none focus:ring-2 focus:ring-n-brand"
@change="onChartFilterChange"
>
<option
v-for="option in chartFilterOptions"
:key="option.value"
:value="option.value"
>
{{ option.label }}
</option>
</select>
</div>
<div class="h-[300px]">
<BarChart class="w-full h-full" :collection="chartData" />
</div>
</div>
</div>
</main>