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

Update design

Browse Source
This commit is contained in:
Shivam Mishra
2024-11-20 17:13:18 -08:00
committed by Pranav
parent 16432a6ebc
commit 82c73f18d9
13 changed files with 97 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
+1
View File
@@ -69,6 +69,7 @@ export default {
{{ headerTitle }}
</span>
</h1>
<slot name="action-button" />
<router-link
v-if="showNewButton && isAdmin"
:to="buttonRoute"
app/javascript/dashboard/routes/dashboard/settings/SettingsWrapper.vue
+1 -3
View File
@@ -8,9 +8,7 @@ defineProps({
</script>
<template>
<div
class="flex flex-col w-full h-full m-0 p-6 sm:py-8 lg:px-16 overflow-auto bg-n-background"
>
<div class="flex flex-col w-full h-full m-0 overflow-auto bg-n-background">
<div class="flex items-start w-full max-w-6xl mx-auto">
<router-view v-slot="{ Component }">
<keep-alive v-if="keepAlive">
app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
+2 -2
View File
@@ -150,8 +150,8 @@ const confirmDeletion = () => {
>
<template #actions>
<woot-button
class="rounded-md button nice"
icon="add-circle"
class="inline-flex items-center justify-center min-w-0 gap-2 transition-all duration-200 ease-in-out border-0 rounded-lg outline-1 outline disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50 !bg-n-brand text-white hover:brightness-110 outline-transparent px-3 !text-sm"
icon="add"
@click="openAddPopup"
>
{{ $t('AGENT_MGMT.HEADER_BTN_TXT') }}
app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsHeader.vue
+6 -6
View File
@@ -64,7 +64,7 @@ const openInNewTab = url => {
</div>
</div>
<h1
class="text-2xl font-semibold tracking-[0.3px] text-slate-900 dark:text-slate-25"
class="text-xl font-interDisplay font-semibold tracking-[0.3px] text-slate-900 dark:text-slate-25"
>
{{ title }}
</h1>
@@ -74,9 +74,9 @@ const openInNewTab = url => {
<slot name="actions" />
</div>
</div>
<div class="flex flex-col gap-3 text-slate-600 dark:text-slate-300 w-full">
<div class="flex flex-col gap-2 text-slate-600 dark:text-slate-300 w-full">
<p
class="mb-0 text-base font-normal line-clamp-5 sm:line-clamp-none max-w-3xl tracking-[-0.1px]"
class="mb-0 text-sm font-normal line-clamp-5 sm:line-clamp-none max-w-3xl leading-5"
>
<slot name="description">{{ description }}</slot>
</p>
@@ -86,14 +86,14 @@ const openInNewTab = url => {
:href="helpURL"
target="_blank"
rel="noopener noreferrer"
class="sm:inline-flex hidden gap-1 w-fit items-center text-woot-500 dark:text-woot-500 text-sm font-medium hover:underline"
class="sm:inline-flex hidden gap-1 w-fit items-center text-n-brand text-sm font-medium hover:underline"
>
{{ linkText }}
<fluent-icon
size="16"
icon="chevron-right"
type="outline"
class="flex-shrink-0 text-woot-500 dark:text-woot-500"
class="flex-shrink-0 text-n-brand"
/>
</a>
</CustomBrandPolicyWrapper>
@@ -107,7 +107,7 @@ const openInNewTab = url => {
v-if="helpURL && linkText"
color-scheme="secondary"
icon="arrow-outwards"
class="flex-row-reverse rounded-md min-w-0 !bg-slate-50 !text-slate-900 dark:!text-white dark:!bg-slate-800"
class="flex-row-reverse rounded-md text-sm min-w-0 !bg-slate-50 !text-slate-900 dark:!text-white dark:!bg-slate-800"
@click="openInNewTab(helpURL)"
>
{{ linkText }}
app/javascript/dashboard/routes/dashboard/settings/macros/MacroEditor.vue
+22 -21
View File
@@ -8,6 +8,7 @@ import { MACRO_ACTION_TYPES } from './constants';
import { useAlert } from 'dashboard/composables';
import actionQueryGenerator from 'dashboard/helper/actionQueryGenerator.js';
import { useMacros } from 'dashboard/composables/useMacros';
import SettingsHeader from '../SettingsHeader.vue';
const store = useStore();
const getters = useStoreGetters();
@@ -122,19 +123,23 @@ const saveMacro = async macroData => {
</script>
<template>
<div
class="flex flex-col flex-1 pb-10 max-w-[960px] mx-auto w-full overflow-auto macro-gradient-radial dark:macro-dark-gradient-radial macro-gradient-radial-size"
>
<woot-loading-state
v-if="uiFlags.isFetchingItem"
:message="t('MACROS.EDITOR.LOADING')"
/>
<MacroForm
v-if="macro && !uiFlags.isFetchingItem"
:macro-data="macro"
@update:macro-data="macro = $event"
@submit="saveMacro"
/>
<div class="overflow-auto flex-1 px-4 lg:px-0">
<SettingsHeader :header-title="t('MACROS.HEADER')" show-back-button />
<div
class="max-w-[960px] mx-auto w-full overflow-auto macro-gradient-radial dark:macro-dark-gradient-radial macro-gradient-radial-size"
>
<woot-loading-state
v-if="uiFlags.isFetchingItem"
:message="t('MACROS.EDITOR.LOADING')"
/>
<MacroForm
v-if="macro && !uiFlags.isFetchingItem"
:macro-data="macro"
@update:macro-data="macro = $event"
@submit="saveMacro"
/>
</div>
</div>
</template>
@@ -143,20 +148,16 @@ const saveMacro = async macroData => {
@layer components {
.macro-gradient-radial {
background-image: radial-gradient(
ellipse at center,
background-image: radial-gradient(ellipse at center,
transparent 0%,
#fdfdfd 80%
),
#fdfdfd 80%),
radial-gradient(#cbe5ff 1.2px, transparent 0);
}
.macro-dark-gradient-radial {
background-image: radial-gradient(
circle at center,
background-image: radial-gradient(circle at center,
transparent 0%,
#121213 70%
),
#121213 70%),
radial-gradient(#293f51 1.2px, transparent 0);
}
app/javascript/dashboard/routes/dashboard/settings/macros/MacroNodes.vue
+7 -6
View File
@@ -69,12 +69,13 @@ export default {
type="add"
:index="i"
:error-key="errors[`action_${i}`]"
:file-name="fileName(
actionData[i].action_params[0],
actionData[i].action_name,
files
)
"
:file-name="
fileName(
actionData[i].action_params[0],
actionData[i].action_name,
files
)
"
:single-node="actionData.length === 1"
@reset-action="$emit('resetAction', i)"
@delete-node="$emit('deleteNode', i)"
app/javascript/dashboard/routes/dashboard/settings/macros/MacroProperties.vue
+6 -6
View File
@@ -56,12 +56,12 @@ export default {
v-if="macroVisibility === 'global'"
icon="checkmark-circle"
type="solid"
class="absolute text-woot-500 dark:text-woot-500 top-2 right-2"
class="absolute text-n-brand top-2 right-2"
/>
<p class="block m-0 text-sm font-medium mb-1">
<p class="block m-0 text-sm text-n-slate-12 font-medium mb-1">
{{ $t('MACROS.EDITOR.VISIBILITY.GLOBAL.LABEL') }}
</p>
<p class="text-sm text-slate-500 dark:text-slate-200">
<p class="text-sm text-n-slate-11 mb-0">
{{ $t('MACROS.EDITOR.VISIBILITY.GLOBAL.DESCRIPTION') }}
</p>
</button>
@@ -74,12 +74,12 @@ export default {
v-if="macroVisibility === 'personal'"
icon="checkmark-circle"
type="solid"
class="absolute text-woot-500 dark:text-woot-500 top-2 right-2"
class="absolute text-n-brand top-2 right-2"
/>
<p class="block m-0 text-sm font-medium mb-1">
<p class="block m-0 text-sm text-n-slate-12 font-medium mb-1">
{{ $t('MACROS.EDITOR.VISIBILITY.PERSONAL.LABEL') }}
</p>
<p class="text-sm text-slate-500 dark:text-slate-200">
<p class="text-sm text-n-slate-11 mb-0">
{{ $t('MACROS.EDITOR.VISIBILITY.PERSONAL.DESCRIPTION') }}
</p>
</button>
app/javascript/dashboard/routes/dashboard/settings/macros/macros.routes.js
+13 -27
View File
@@ -4,7 +4,6 @@ import {
ROLES,
CONVERSATION_PERMISSIONS,
} from 'dashboard/constants/permissions.js';
import SettingsContent from '../Wrapper.vue';
import SettingsWrapper from '../SettingsWrapper.vue';
import Macros from './Index.vue';
import MacroEditor from './MacroEditor.vue';
@@ -26,33 +25,20 @@ export default {
],
},
{
path: frontendURL('accounts/:accountId/settings/macros'),
component: SettingsContent,
props: () => {
return {
headerTitle: 'MACROS.HEADER',
icon: 'flash-settings',
showBackButton: true,
};
path: frontendURL('accounts/:accountId/settings/macros/:macroId/edit'),
name: 'macros_edit',
component: MacroEditor,
meta: {
permissions: [...ROLES, ...CONVERSATION_PERMISSIONS],
},
},
{
path: frontendURL('accounts/:accountId/settings/macros/new'),
name: 'macros_new',
component: MacroEditor,
meta: {
permissions: [...ROLES, ...CONVERSATION_PERMISSIONS],
},
children: [
{
path: ':macroId/edit',
name: 'macros_edit',
component: MacroEditor,
meta: {
permissions: [...ROLES, ...CONVERSATION_PERMISSIONS],
},
},
{
path: 'new',
name: 'macros_new',
component: MacroEditor,
meta: {
permissions: [...ROLES, ...CONVERSATION_PERMISSIONS],
},
},
],
},
],
};
app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue
+1 -2
View File
@@ -101,8 +101,7 @@ export default {
<div class="flex-1 p-1 overflow-auto">
<div class="max-w-[960px] w-full mx-auto mb-10">
<woot-button
color-scheme="success"
class-names="button--fixed-top"
color-scheme="primary"
icon="arrow-download"
@click="downloadAgentReports"
>
app/javascript/dashboard/routes/dashboard/settings/reports/LiveReports.vue
+33 -32
View File
@@ -124,50 +124,51 @@ export default {
<template>
<div class="flex-1 overflow-auto">
<div class="max-w-[960px] mx-auto w-full">
<div class="flex flex-col items-center md:flex-row">
<div
class="flex-1 w-full max-w-full md:w-[65%] md:max-w-[65%] conversation-metric"
>
<div class="max-w-[960px] mx-auto w-full gap-3 flex flex-col p-1 pb-16">
<div class="flex flex-col items-center md:flex-row gap-3">
<div class="flex-1 w-full max-w-full md:w-[65%] md:max-w-[65%]">
<MetricCard
:header="$t('OVERVIEW_REPORTS.ACCOUNT_CONVERSATIONS.HEADER')"
:is-loading="uiFlags.isFetchingAccountConversationMetric"
:loading-message="
$t('OVERVIEW_REPORTS.ACCOUNT_CONVERSATIONS.LOADING_MESSAGE')
"
:loading-message="$t('OVERVIEW_REPORTS.ACCOUNT_CONVERSATIONS.LOADING_MESSAGE')
"
>
<div
v-for="(metric, name, index) in conversationMetrics"
:key="index"
class="flex-1 min-w-0 pb-2"
>
<h3 class="text-base text-slate-700 dark:text-slate-100">
{{ name }}
</h3>
<p class="text-woot-800 dark:text-woot-300 text-3xl mb-0 mt-1">
{{ metric }}
</p>
<div class="grid grid-cols-2 auto-cols-auto xl:grid-cols-4 w-full">
<div
v-for="(metric, name, index) in conversationMetrics"
:key="index"
class="w-full"
>
<h3 class="text-base text-n-slate-11">
{{ name }}
</h3>
<p class="text-n-slate-12 text-3xl mb-0 mt-1">
{{ metric }}
</p>
</div>
</div>
</MetricCard>
</div>
<div class="flex-1 w-full max-w-full md:w-[35%] md:max-w-[35%]">
<MetricCard :header="$t('OVERVIEW_REPORTS.AGENT_STATUS.HEADER')">
<div
v-for="(metric, name, index) in agentStatusMetrics"
:key="index"
class="flex-1 min-w-0 pb-2"
>
<h3 class="text-base text-slate-700 dark:text-slate-100">
{{ name }}
</h3>
<p class="text-woot-800 dark:text-woot-300 text-3xl mb-0 mt-1">
{{ metric }}
</p>
<div class="grid grid-cols-2 auto-cols-auto xl:grid-cols-4 w-full">
<div
v-for="(metric, name, index) in agentStatusMetrics"
:key="index"
class="w-full"
>
<h3 class="text-base text-n-slate-11">
{{ name }}
</h3>
<p class="text-n-slate-12 text-3xl mb-0 mt-1">
{{ metric }}
</p>
</div>
</div>
</MetricCard>
</div>
</div>
<div class="flex flex-row flex-wrap max-w-full ml-auto mr-auto">
<div class="flex flex-row w-full max-w-full ml-auto mr-auto">
<MetricCard
:header="$t('OVERVIEW_REPORTS.CONVERSATION_HEATMAP.HEADER')"
>
@@ -188,7 +189,7 @@ export default {
/>
</MetricCard>
</div>
<div class="flex flex-row flex-wrap max-w-full ml-auto mr-auto">
<div class="flex flex-row w-full max-w-full ml-auto mr-auto">
<MetricCard :header="$t('OVERVIEW_REPORTS.AGENT_CONVERSATIONS.HEADER')">
<AgentTable
:agents="agents"
app/javascript/dashboard/routes/dashboard/settings/reports/ReportContainer.vue
+2 -6
View File
@@ -135,13 +135,9 @@ export default {
<template>
<div
class="grid grid-cols-1 px-6 py-5 md:grid-cols-2 lg:grid-cols-3 shadow outline-1 outline outline-n-container group/cardLayout rounded-2xl bg-n-solid-2"
class="grid grid-cols-1 px-6 py-5 md:grid-cols-2 gap-5 shadow outline-1 outline outline-n-container group/cardLayout rounded-2xl bg-n-solid-2"
>
<div
v-for="metric in metrics"
:key="metric.KEY"
class="p-4 mb-3 rounded-md"
>
<div v-for="metric in metrics" :key="metric.KEY">
<ChartStats :metric="metric" :account-summary-key="accountSummaryKey" />
<div class="mt-4 h-72">
<woot-loading-state
app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/MetricCard.vue
+3 -3
View File
@@ -25,15 +25,15 @@ export default {
<template>
<div
class="metric-card mb-2 p flex flex-col m-2 px-6 py-5 overflow-hidden flex-grow text-slate-700 dark:text-slate-100 min-h-[10rem] shadow outline-1 outline outline-n-container group/cardLayout rounded-2xl bg-n-solid-2"
class="metric-card flex flex-col px-6 py-5 overflow-hidden flex-grow text-slate-700 dark:text-slate-100 min-h-[8rem] shadow outline-1 outline outline-n-container group/cardLayout rounded-2xl bg-n-solid-2"
>
<div
class="card-header grid w-full mb-6 grid-cols-[repeat(auto-fit,minmax(max-content,50%))] gap-y-2"
class="card-header grid w-full mb-4 grid-cols-[repeat(auto-fit,minmax(max-content,50%))] gap-y-2"
>
<slot name="header">
<div class="flex items-center gap-0.5 flex-row">
<h5
class="mb-0 text-slate-800 dark:text-slate-100 font-medium text-xl"
class="mb-0 text-slate-800 dark:text-slate-100 font-medium text-lg"
>
{{ header }}
</h5>
app/javascript/dashboard/routes/dashboard/settings/reports/reports.routes.js
-9
View File
@@ -19,7 +19,6 @@ export default {
component: SettingsContent,
props: {
headerTitle: 'OVERVIEW_REPORTS.HEADER',
icon: 'arrow-trending-lines',
keepAlive: false,
},
children: [
@@ -44,7 +43,6 @@ export default {
component: SettingsContent,
props: {
headerTitle: 'REPORT.HEADER',
icon: 'chat',
keepAlive: false,
},
children: [
@@ -63,7 +61,6 @@ export default {
component: SettingsContent,
props: {
headerTitle: 'CSAT_REPORTS.HEADER',
icon: 'emoji',
keepAlive: false,
},
children: [
@@ -82,7 +79,6 @@ export default {
component: SettingsContent,
props: {
headerTitle: 'BOT_REPORTS.HEADER',
icon: 'bot',
keepAlive: false,
},
children: [
@@ -102,7 +98,6 @@ export default {
component: SettingsContent,
props: {
headerTitle: 'AGENT_REPORTS.HEADER',
icon: 'people',
keepAlive: false,
},
children: [
@@ -121,7 +116,6 @@ export default {
component: SettingsContent,
props: {
headerTitle: 'LABEL_REPORTS.HEADER',
icon: 'tag',
keepAlive: false,
},
children: [
@@ -140,7 +134,6 @@ export default {
component: SettingsContent,
props: {
headerTitle: 'INBOX_REPORTS.HEADER',
icon: 'mail-inbox-all',
keepAlive: false,
},
children: [
@@ -159,7 +152,6 @@ export default {
component: SettingsContent,
props: {
headerTitle: 'TEAM_REPORTS.HEADER',
icon: 'people-team',
},
children: [
{
@@ -177,7 +169,6 @@ export default {
component: SettingsContent,
props: {
headerTitle: 'SLA_REPORTS.HEADER',
icon: 'document-list-clock',
keepAlive: false,
},
children: [