Skip to content

Commit 3b4039d

Browse files
tabioduntabiodun
committed
feat(components/phone): enhance UI and functionality across multiple components
- Updated CurrentCall.vue to improve layout and styling, including a new background and enhanced call details display. - Refined ManualDialer.vue to conditionally disable the dial button based on user permissions. - Modified PhoneOverlay.vue to adjust the background and button styles for better user experience. - Revamped UpdateStatus.vue with a new form layout, improved status selection, and enhanced note-taking functionality. - Added custom scrollbar styles for better visual consistency across components.
1 parent 58d775e commit 3b4039d

File tree

4 files changed

+176
-64
lines changed

4 files changed

+176
-64
lines changed

‎src/components/phone/CurrentCall.vue‎

Lines changed: 101 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -94,65 +94,101 @@ const suggestedScript = computed(() => {
9494
</script>
9595

9696
<template>
97-
<div>
97+
<div class="bg-white rounded-lg shadow-sm p-6 w-full">
9898
<!-- Details Header Section -->
99-
<div class="flex flex-wrap gap-4 items-center">
100-
<div class="font-bold mb-4">{{ $t('phoneDashboard.details') }}</div>
99+
<div
100+
class="flex flex-wrap gap-4 items-center mb-6 border-b border-gray-100 pb-4"
101+
>
102+
<div class="font-semibold text-lg text-gray-800">
103+
{{ $t('phoneDashboard.details') }}
104+
</div>
101105
<div
102106
v-if="caller"
103107
data-testid="testNumberOfInboundCallsDiv"
104-
class="text-sm text-crisiscleanup-dark-200 mt-1"
108+
class="text-sm text-gray-500 flex items-center gap-4"
105109
>
106-
{{
107-
`${caller.number_of_inbound_calls} ${$t(
108-
'phoneDashboard.calls',
109-
)} | ${moment().diff(moment(caller.created_at), 'days')} ${$t(
110-
'phoneDashboard.days',
111-
)}`
112-
}}
110+
<span class="flex items-center gap-1">
111+
<span class="inline-block w-2 h-2 rounded-full bg-green-500"></span>
112+
{{
113+
`${caller.number_of_inbound_calls} ${$t('phoneDashboard.calls')}`
114+
}}
115+
</span>
116+
<span class="text-gray-400">|</span>
117+
<span>
118+
{{
119+
`${moment().diff(moment(caller.created_at), 'days')} ${$t('phoneDashboard.days')}`
120+
}}
121+
</span>
113122
</div>
114123
</div>
115124

116125
<!-- Content Grid Section -->
117-
<div class="grid grid-cols-1 md:grid-cols-3 gap-5">
126+
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
118127
<!-- Suggested Script Section -->
119-
<div class="prompts">
120-
<div class="font-bold">{{ $t('phoneDashboard.suggested_script') }}</div>
121-
<span class="text-sm" v-html="suggestedScript"></span>
128+
<div class="bg-gray-50 rounded-lg p-4">
129+
<div
130+
class="font-semibold text-gray-700 mb-3 text-sm uppercase tracking-wide flex items-center"
131+
>
132+
<span
133+
class="inline-block w-3 h-3 rounded-full bg-blue-500 mr-2"
134+
></span>
135+
{{ $t('phoneDashboard.suggested_script') }}
136+
</div>
137+
<div
138+
class="text-sm text-gray-700 leading-relaxed bg-white rounded-md p-4 shadow-sm"
139+
v-html="suggestedScript"
140+
></div>
122141
</div>
123142

124143
<!-- Cases Section -->
125-
<div class="cases">
126-
<div class="font-bold">{{ $t('phoneDashboard.existing_cases') }}</div>
144+
<div class="bg-gray-50 rounded-lg p-4">
127145
<div
128-
class="h-60 sm:h-80 lg:h-120 overflow-auto border border-gray-300 rounded-md"
146+
class="font-semibold text-gray-700 mb-3 text-sm uppercase tracking-wide flex items-center"
147+
>
148+
<span
149+
class="inline-block w-3 h-3 rounded-full bg-purple-500 mr-2"
150+
></span>
151+
{{ $t('phoneDashboard.existing_cases') }}
152+
</div>
153+
<div
154+
class="h-60 sm:h-80 lg:h-96 overflow-auto bg-white rounded-md shadow-sm custom-scrollbar"
129155
>
130156
<div
131157
v-for="c in cases"
132158
:key="`${c.id}`"
133159
:data-testid="`test${c.id}Content`"
134-
class="m-1 flex-grow-0 flex-shrink-0 w-full sm:w-56"
160+
class="m-2"
135161
>
136162
<div
137-
class="cursor-pointer p-2 h-full w-full border rounded-md"
138-
:class="c.id === caseId ? 'border-black bg-gray-100' : ''"
163+
class="cursor-pointer p-3 border rounded-md transition-all duration-200 hover:shadow-md hover:border-gray-400"
164+
:class="
165+
c.id === caseId
166+
? 'border-blue-500 bg-blue-50 shadow-md ring-1 ring-blue-500'
167+
: 'border-gray-200 bg-white'
168+
"
139169
@click="() => setCase(c)"
140170
>
141-
<div class="flex items-center">
171+
<div class="flex items-center mb-2">
142172
<div
143-
class="cases-svg-container p-1"
173+
class="cases-svg-container p-1.5 bg-gray-100 rounded mr-2"
144174
data-testid="testWorktypeSVGIcon"
145175
v-html="getSVG(c.worktype)"
146176
></div>
147-
<div class="px-1 text-sm" data-testid="testCaseNumberDiv">
177+
<div
178+
class="text-sm font-medium text-gray-800"
179+
data-testid="testCaseNumberDiv"
180+
>
148181
{{ c.caseNumber }}
149182
</div>
150183
</div>
151-
<div class="px-1 text-sm" data-testid="testCaseNameDiv">
184+
<div
185+
class="text-sm text-gray-700 mb-1"
186+
data-testid="testCaseNameDiv"
187+
>
152188
{{ c.name }}
153189
</div>
154190
<div
155-
class="text-xs text-gray-600 p-1"
191+
class="text-xs text-gray-500"
156192
data-testid="testCaseAddressStateDiv"
157193
>
158194
{{ c.address }} {{ c.state }}
@@ -163,12 +199,47 @@ const suggestedScript = computed(() => {
163199
</div>
164200

165201
<!-- FAQ Section -->
166-
<div class="faq">
167-
<div class="font-bold">{{ $t('phoneDashboard.faq') }}</div>
168-
<PhoneFaqRAG />
202+
<div class="bg-gray-50 rounded-lg p-4">
203+
<div
204+
class="font-semibold text-gray-700 mb-3 text-sm uppercase tracking-wide flex items-center"
205+
>
206+
<span
207+
class="inline-block w-3 h-3 rounded-full bg-green-500 mr-2"
208+
></span>
209+
{{ $t('phoneDashboard.faq') }}
210+
</div>
211+
<div class="bg-white rounded-md shadow-sm p-4">
212+
<PhoneFaqRAG />
213+
</div>
169214
</div>
170215
</div>
171216
</div>
172217
</template>
173218

174-
<style scoped></style>
219+
<style scoped lang="postcss">
220+
.custom-scrollbar {
221+
scrollbar-width: thin;
222+
scrollbar-color: theme('colors.gray.400') theme('colors.gray.100');
223+
}
224+
225+
.custom-scrollbar::-webkit-scrollbar {
226+
width: 6px;
227+
}
228+
229+
.custom-scrollbar::-webkit-scrollbar-track {
230+
@apply bg-gray-100 rounded;
231+
}
232+
233+
.custom-scrollbar::-webkit-scrollbar-thumb {
234+
@apply bg-gray-400 rounded;
235+
}
236+
237+
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
238+
@apply bg-gray-500;
239+
}
240+
241+
.cases-svg-container :deep(svg) {
242+
width: 20px;
243+
height: 20px;
244+
}
245+
</style>

‎src/components/phone/ManualDialer.vue‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,10 @@
4646
:alt="
4747
dialing ? $t('phoneDashboard.dialing') : $t('phoneDashboard.dial')
4848
"
49-
:disabled="dialing || !phone || after10pmEastern || !hasActiveHotline"
49+
:disabled="
50+
(dialing || !phone || after10pmEastern || !hasActiveHotline) &&
51+
!can('development_mode')
52+
"
5053
@click="handleDial"
5154
></base-button>
5255

@@ -72,6 +75,7 @@ import BaseInput from '@/components/BaseInput.vue';
7275
import moment from 'moment';
7376
import PhoneNumberInput from '@/components/PhoneNumberInput.vue';
7477
import { useActiveHotlines } from '@/hooks/useActiveHotlines';
78+
import useAcl from '@/hooks/useAcl';
7579
7680
export default defineComponent({
7781
name: 'EnhancedManualDialer',
@@ -89,6 +93,7 @@ export default defineComponent({
8993
emits: ['onDial', 'onRemoveNumberFromQueue'],
9094
setup(props, { emit }) {
9195
const { isLoading, incidentsWithActiveHotline } = useActiveHotlines();
96+
const { $can } = useAcl();
9297
9398
const phone = ref('');
9499
const selectedCountryCode = ref('+1');
@@ -127,6 +132,7 @@ export default defineComponent({
127132
}
128133
});
129134
return {
135+
can: $can,
130136
selectedCountryCode,
131137
phone,
132138
countryCodes,

‎src/components/phone/PhoneOverlay.vue‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -710,7 +710,7 @@ const {
710710
<div v-show="!currentView && caller" class="flex-grow">
711711
<template v-if="showCompleteCallScreen">
712712
<div
713-
class="h-full bg-crisiscleanup-green-900 bg-opacity-20 p-2 flex flex-col items-start justify-between"
713+
class="h-full bg-white p-2 flex flex-col items-start justify-between w-full"
714714
>
715715
<div class="w-full">
716716
<div class="py-2 flex">
@@ -735,9 +735,10 @@ const {
735735
@on-cancel="onCancelCompleteCall"
736736
/>
737737
</div>
738-
<div class="w-full">
738+
<div class="w-full mt-2">
739739
<base-button
740740
class="p-1 w-full bg-white"
741+
variant="outline"
741742
:action="() => (showCompleteCallScreen = false)"
742743
:text="$t('actions.hide')"
743744
:alt="$t('actions.hide')"

‎src/components/phone/UpdateStatus.vue‎

Lines changed: 65 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,66 @@
11
<template>
2-
<form class="flex flex-col">
2+
<form class="flex flex-col bg-white rounded-lg shadow-sm p-6 w-full">
33
<!-- Status Selector Section -->
44
<div
5-
class="flex flex-col flex-wrap text-center status-wrapper gap-4 md:gap-6"
5+
class="grid grid-cols-1 md:grid-cols-3 gap-6 status-wrapper overflow-x-hidden p-0.5"
66
data-testid="testStatusSelectorDiv"
77
>
88
<div
99
v-for="(section, index) in sortedValues"
1010
:key="index"
11-
class="flex flex-col items-center"
11+
class="flex flex-col"
1212
>
13-
<div class="font-bold text-base sm:text-lg">
14-
{{ section.name }}
15-
</div>
1613
<div
17-
v-for="(item, idx) in section.values"
18-
:key="idx"
19-
class="m-1 p-1 rounded cursor-pointer text-sm sm:text-base w-full sm:w-auto"
20-
:class="
21-
item.value === status
22-
? 'outline border border-gray-700'
23-
: 'opacity-80'
24-
"
25-
:style="`background: ${section.color}`"
26-
@click="status = item.value"
14+
class="font-semibold text-gray-700 mb-3 text-sm uppercase tracking-wide flex items-center"
2715
>
28-
{{ item.name_t }}
16+
<span
17+
class="inline-block w-3 h-3 rounded-full mr-2"
18+
:style="`background: ${section.color}`"
19+
></span>
20+
{{ section.name }}
21+
</div>
22+
<div class="space-y-2">
23+
<div
24+
v-for="(item, idx) in section.values"
25+
:key="idx"
26+
class="px-3 py-2.5 rounded-md cursor-pointer text-sm transition-all duration-200 hover:scale-105 hover:shadow-md"
27+
:class="
28+
item.value === status
29+
? 'ring-2 ring-offset-2 ring-gray-600 shadow-md scale-105 font-medium'
30+
: 'opacity-85 hover:opacity-100'
31+
"
32+
:style="`background: ${
33+
item.value === status ? section.color : section.color + '40'
34+
}`"
35+
@click="status = item.value"
36+
>
37+
{{ item.name_t }}
38+
</div>
2939
</div>
3040
</div>
3141
</div>
3242

3343
<!-- Notes Section -->
34-
<textarea
35-
v-model="callNotes"
36-
data-testid="testCallNoteTextarea"
37-
rows="3"
38-
class="text-sm sm:text-base border border-crisiscleanup-dark-100 placeholder-crisiscleanup-dark-200 outline-none p-2 my-4 resize-none w-full rounded"
39-
:placeholder="$t('phoneDashboard.notes')"
40-
@update:modelValue="(value) => (updateNotes = value)"
41-
></textarea>
44+
<div class="mt-8">
45+
<label class="block text-sm font-medium text-gray-700 mb-2">
46+
{{ $t('phoneDashboard.notes') }}
47+
</label>
48+
<textarea
49+
v-model="callNotes"
50+
data-testid="testCallNoteTextarea"
51+
rows="4"
52+
class="w-full px-3 py-2 text-sm border border-gray-300 rounded-md shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 resize-none"
53+
:placeholder="$t('phoneDashboard.notes')"
54+
@update:modelValue="(value) => (updateNotes = value)"
55+
></textarea>
56+
</div>
4257

4358
<!-- Buttons Section -->
44-
<div class="flex flex-wrap gap-2 justify-center sm:justify-start mt-4">
59+
<div class="flex flex-wrap gap-3 mt-6">
4560
<base-button
4661
data-testid="testCompleteCallButton"
47-
class="p-2 rounded text-sm sm:text-base"
48-
size="small"
62+
class="flex-1 sm:flex-initial px-6 py-2.5 font-medium shadow-sm hover:shadow-md transition-all duration-200"
63+
size="medium"
4964
variant="solid"
5065
:alt="$t('phoneDashboard.complete_call')"
5166
:action="
@@ -60,7 +75,7 @@
6075
</base-button>
6176
<base-button
6277
v-if="allowCancel"
63-
class="p-2 rounded text-sm sm:text-base"
78+
class="flex-1 sm:flex-initial px-6 py-2.5 font-medium transition-all duration-200"
6479
:alt="$t('actions.cancel')"
6580
:action="
6681
() =>
@@ -69,7 +84,7 @@
6984
notes: callNotes,
7085
})
7186
"
72-
size="small"
87+
size="medium"
7388
variant="outline"
7489
>
7590
{{ $t('actions.cancel') }}
@@ -205,6 +220,25 @@ export default defineComponent({
205220

206221
<style scoped lang="postcss">
207222
.status-wrapper {
208-
height: 18rem;
223+
max-height: 24rem;
224+
overflow-y: auto;
225+
scrollbar-width: thin;
226+
scrollbar-color: theme('colors.gray.400') theme('colors.gray.100');
227+
}
228+
229+
.status-wrapper::-webkit-scrollbar {
230+
width: 6px;
231+
}
232+
233+
.status-wrapper::-webkit-scrollbar-track {
234+
@apply bg-gray-100 rounded;
235+
}
236+
237+
.status-wrapper::-webkit-scrollbar-thumb {
238+
@apply bg-gray-400 rounded;
239+
}
240+
241+
.status-wrapper::-webkit-scrollbar-thumb:hover {
242+
@apply bg-gray-500;
209243
}
210244
</style>

0 commit comments

Comments
 (0)