bagus-arie05
120 lines
2.6 KiB
Vue
120 lines
2.6 KiB
Vue
<template>
|
|
<v-row class="search-section">
|
|
<v-col cols="12" sm="6" class="py-2">
|
|
<v-text-field
|
|
:model-value="searchQuery"
|
|
@update:model-value="$emit('update:searchQuery', $event)"
|
|
density="comfortable"
|
|
label="Cari pasien berdasarkan nama atau RM..."
|
|
prepend-inner-icon="mdi-magnify"
|
|
variant="outlined"
|
|
hide-details
|
|
single-line
|
|
color="primary-600"
|
|
bg-color="white"
|
|
class="search-field"
|
|
/>
|
|
</v-col>
|
|
|
|
<v-col cols="12" sm="6" class="py-2">
|
|
<v-tabs
|
|
:model-value="selectedTab"
|
|
@update:model-value="$emit('update:selectedTab', $event)"
|
|
color="primary-600"
|
|
align-tabs="end"
|
|
class="filter-tabs"
|
|
slider-color="primary-600"
|
|
>
|
|
<v-tab :value="0" class="tab-item">
|
|
SEMUA
|
|
<v-chip size="small" color="primary-600" class="ml-2 chip-count">
|
|
{{ allCount }}
|
|
</v-chip>
|
|
</v-tab>
|
|
|
|
<v-tab :value="1" class="tab-item">
|
|
PENDING
|
|
<v-chip size="small" color="primary-600" class="ml-2 chip-count">
|
|
{{ pendingCount }}
|
|
</v-chip>
|
|
</v-tab>
|
|
|
|
<v-tab :value="2" class="tab-item">
|
|
VERIFIED
|
|
<v-chip size="small" color="primary-600" class="ml-2 chip-count">
|
|
{{ verifiedCount }}
|
|
</v-chip>
|
|
</v-tab>
|
|
</v-tabs>
|
|
</v-col>
|
|
</v-row>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
searchQuery: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
selectedTab: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
allCount: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
pendingCount: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
verifiedCount: {
|
|
type: Number,
|
|
default: 0
|
|
}
|
|
});
|
|
|
|
defineEmits(['update:searchQuery', 'update:selectedTab']);
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
$neutral-100: #FFFFFF;
|
|
$neutral-500: #ABBED1;
|
|
$neutral-600: #89939E;
|
|
$neutral-300: #F5F7FA;
|
|
$primary-600: #FFA532;
|
|
$font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
$font-weight-semibold: 600;
|
|
$font-weight-bold: 700;
|
|
|
|
.search-section {
|
|
background: $neutral-300;
|
|
border-bottom: 1px solid $neutral-500;
|
|
margin: 0;
|
|
padding: 24px;
|
|
}
|
|
|
|
.search-field {
|
|
border-radius: 8px;
|
|
font-family: $font-family-base;
|
|
}
|
|
|
|
.filter-tabs {
|
|
background: transparent;
|
|
font-family: $font-family-base;
|
|
}
|
|
|
|
.tab-item {
|
|
font-weight: $font-weight-bold;
|
|
font-size: 14px;
|
|
text-transform: none;
|
|
letter-spacing: 0;
|
|
font-family: $font-family-base;
|
|
}
|
|
|
|
.chip-count {
|
|
color: #000 !important;
|
|
font-weight: $font-weight-bold;
|
|
font-family: $font-family-base;
|
|
}
|
|
</style> |