bagus-arie05
782 lines
20 KiB
Vue
782 lines
20 KiB
Vue
<template>
|
|
<v-container>
|
|
<v-card>
|
|
<!-- Header -->
|
|
<div class="page-header">
|
|
<div class="header-content">
|
|
<div class="header-left">
|
|
<div class="header-icon">
|
|
<v-icon size="32" color="white">mdi-door-open</v-icon>
|
|
</div>
|
|
<div class="header-text">
|
|
<h2 class="page-title">Master Klinik Ruang</h2>
|
|
<p class="page-subtitle">Rabu, 13 Agustus 2025 - Manajemen Ruangan</p>
|
|
</div>
|
|
</div>
|
|
<div class="header-stats">
|
|
<v-chip color="white" variant="flat" class="stat-chip mr-2">
|
|
<v-icon start size="16">mdi-hospital-building</v-icon>
|
|
{{ masterStore.totalKlinikRuang }} Klinik
|
|
</v-chip>
|
|
<v-chip color="white" variant="flat" class="stat-chip mr-2">
|
|
<v-icon start size="16">mdi-door</v-icon>
|
|
{{ masterStore.totalRuangan }} Ruang
|
|
</v-chip>
|
|
<v-btn
|
|
color="white"
|
|
@click="openTambahDialog"
|
|
elevation="0"
|
|
class="add-btn"
|
|
>
|
|
<v-icon left size="20">mdi-plus-circle</v-icon>
|
|
Tambah Ruang
|
|
</v-btn>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Table -->
|
|
<v-card-text>
|
|
<v-data-table
|
|
:headers="headers"
|
|
:items="masterStore.ruangData"
|
|
:items-per-page="10"
|
|
class="elevation-0 data-table"
|
|
>
|
|
<template v-slot:item.namaKlinik="{ item }">
|
|
<v-chip size="small" class="chip-success-outline">
|
|
{{ item.kodeKlinik }}
|
|
</v-chip>
|
|
<span class="ml-2 body-3 text-medium">{{ item.namaKlinik }}</span>
|
|
</template>
|
|
|
|
<template v-slot:item.layarInformasi="{ item }">
|
|
<v-btn
|
|
size="small"
|
|
@click="openPreviewDialog(item)"
|
|
variant="flat"
|
|
class="btn-preview mr-2"
|
|
>
|
|
<v-icon size="16" left>mdi-eye</v-icon>
|
|
Preview
|
|
</v-btn>
|
|
</template>
|
|
|
|
<template v-slot:item.aksi="{ item }">
|
|
<v-btn
|
|
size="small"
|
|
@click="openEditDialog(item)"
|
|
class="btn-edit mr-2"
|
|
variant="flat"
|
|
>
|
|
<v-icon size="16" left>mdi-pencil</v-icon>
|
|
Edit
|
|
</v-btn>
|
|
<v-btn
|
|
size="small"
|
|
@click="handleDelete(item)"
|
|
class="btn-delete"
|
|
variant="outlined"
|
|
>
|
|
<v-icon size="16" left>mdi-delete</v-icon>
|
|
Delete
|
|
</v-btn>
|
|
</template>
|
|
</v-data-table>
|
|
</v-card-text>
|
|
</v-card>
|
|
|
|
<!-- Dialog Tambah/Edit -->
|
|
<v-dialog v-model="dialog" max-width="700px" persistent scrollable>
|
|
<v-card class="dialog-card">
|
|
<v-card-title class="dialog-header">
|
|
<span class="headline-4">{{ isEdit ? 'Edit Klinik Ruang' : 'Tambah Klinik Ruang' }}</span>
|
|
<v-btn icon variant="text" @click="closeDialog" size="small" class="btn-close">
|
|
<v-icon>mdi-close</v-icon>
|
|
</v-btn>
|
|
</v-card-title>
|
|
|
|
<v-divider></v-divider>
|
|
|
|
<v-card-text class="dialog-content">
|
|
<v-form ref="formRef">
|
|
<!-- Pilih Klinik -->
|
|
<div class="field-group">
|
|
<div class="group-label">
|
|
<v-icon size="18" class="icon-label">mdi-hospital-building</v-icon>
|
|
<span>Pilih Klinik</span>
|
|
</div>
|
|
|
|
<v-autocomplete
|
|
label="Kode Klinik"
|
|
v-model="formData.kodeKlinik"
|
|
:items="masterStore.klinikList"
|
|
item-title="nama"
|
|
item-value="kode"
|
|
variant="outlined"
|
|
density="compact"
|
|
:rules="[v => !!v || 'Kode klinik harus dipilih']"
|
|
hide-details="auto"
|
|
placeholder="Pilih Klinik"
|
|
@update:model-value="onKlinikChange"
|
|
class="mb-3 input-field"
|
|
>
|
|
<template v-slot:item="{ props, item }">
|
|
<v-list-item v-bind="props">
|
|
<template v-slot:prepend>
|
|
<v-chip size="x-small" class="chip-success-small">{{ item.raw.kode }}</v-chip>
|
|
</template>
|
|
<v-list-item-title class="body-3">{{ item.raw.nama }}</v-list-item-title>
|
|
</v-list-item>
|
|
</template>
|
|
</v-autocomplete>
|
|
</div>
|
|
|
|
<v-divider class="my-4 divider-section"></v-divider>
|
|
|
|
<!-- Daftar Ruangan -->
|
|
<div class="field-group">
|
|
<div class="group-label">
|
|
<v-icon size="18" class="icon-label">mdi-door</v-icon>
|
|
<span>Daftar Ruangan</span>
|
|
</div>
|
|
|
|
<div v-for="(ruang, index) in formData.ruangList" :key="index" class="ruang-item">
|
|
<v-row dense align="center">
|
|
<v-col cols="1">
|
|
<div class="ruang-badge body-3">{{ index + 1 }}</div>
|
|
</v-col>
|
|
|
|
<v-col cols="3">
|
|
<v-text-field
|
|
label="No. Ruang"
|
|
v-model="ruang.nomorRuang"
|
|
variant="outlined"
|
|
density="compact"
|
|
hide-details
|
|
placeholder="1"
|
|
class="input-field"
|
|
></v-text-field>
|
|
</v-col>
|
|
|
|
<v-col cols="4">
|
|
<v-text-field
|
|
label="Nama Ruang"
|
|
v-model="ruang.namaRuang"
|
|
variant="outlined"
|
|
density="compact"
|
|
hide-details
|
|
placeholder="Ruang Konsultasi"
|
|
class="input-field"
|
|
></v-text-field>
|
|
</v-col>
|
|
|
|
<v-col cols="3">
|
|
<v-text-field
|
|
label="No. Screen"
|
|
v-model="ruang.nomorScreen"
|
|
variant="outlined"
|
|
density="compact"
|
|
hide-details
|
|
placeholder="101"
|
|
class="input-field"
|
|
></v-text-field>
|
|
</v-col>
|
|
|
|
<v-col cols="1">
|
|
<v-btn
|
|
v-if="formData.ruangList.length > 1"
|
|
icon
|
|
size="small"
|
|
variant="text"
|
|
@click="removeRuang(index)"
|
|
class="btn-delete-ruang"
|
|
>
|
|
<v-icon size="18">mdi-delete</v-icon>
|
|
</v-btn>
|
|
</v-col>
|
|
</v-row>
|
|
</div>
|
|
|
|
<v-btn
|
|
variant="outlined"
|
|
size="small"
|
|
@click="addRuang"
|
|
class="btn-add-ruang mt-2"
|
|
>
|
|
<v-icon left size="18">mdi-plus</v-icon>
|
|
Tambah Ruang
|
|
</v-btn>
|
|
</div>
|
|
</v-form>
|
|
</v-card-text>
|
|
|
|
<v-divider></v-divider>
|
|
|
|
<v-card-actions class="dialog-actions">
|
|
<v-spacer></v-spacer>
|
|
<v-btn
|
|
variant="outlined"
|
|
@click="closeDialog"
|
|
class="btn-cancel"
|
|
>
|
|
<v-icon left size="18">mdi-close</v-icon>
|
|
Batal
|
|
</v-btn>
|
|
<v-btn
|
|
variant="flat"
|
|
@click="submitForm"
|
|
class="btn-submit"
|
|
>
|
|
<v-icon left size="18">mdi-content-save</v-icon>
|
|
Simpan
|
|
</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
|
|
<!-- Preview Dialog -->
|
|
<v-dialog v-model="previewDialog" max-width="95vw" max-height="95vh" persistent>
|
|
<v-card class="preview-dialog-card">
|
|
<v-card-title class="preview-dialog-header">
|
|
<div class="preview-header-content">
|
|
<v-icon size="24" class="mr-2">mdi-door-open</v-icon>
|
|
<span class="headline-4">Preview Klinik Ruang: {{ previewItem?.namaKlinik || '' }}</span>
|
|
</div>
|
|
<v-btn icon variant="text" size="small" class="btn-close" @click="closePreviewDialog">
|
|
<v-icon>mdi-close</v-icon>
|
|
</v-btn>
|
|
</v-card-title>
|
|
<v-divider></v-divider>
|
|
<v-card-text class="preview-content">
|
|
<iframe
|
|
v-if="previewUrl"
|
|
:src="previewUrl"
|
|
class="preview-iframe"
|
|
frameborder="0"
|
|
allowfullscreen
|
|
></iframe>
|
|
<div v-else class="preview-loading">
|
|
<v-progress-circular indeterminate color="primary"></v-progress-circular>
|
|
<p class="mt-4">Memuat preview...</p>
|
|
</div>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-dialog>
|
|
|
|
<!-- Snackbar -->
|
|
<v-snackbar v-model="snackbar.show" :color="snackbar.color" :timeout="3000">
|
|
<span class="body-3">{{ snackbar.message }}</span>
|
|
<template v-slot:actions>
|
|
<v-btn variant="text" @click="snackbar.show = false" size="small">Tutup</v-btn>
|
|
</template>
|
|
</v-snackbar>
|
|
</v-container>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
import { useMasterStore } from '@/stores/masterStore';
|
|
|
|
const masterStore = useMasterStore();
|
|
const dialog = ref(false);
|
|
const isEdit = ref(false);
|
|
const formRef = ref(null);
|
|
const previewDialog = ref(false);
|
|
const previewItem = ref(null);
|
|
const previewUrl = ref('');
|
|
|
|
const snackbar = ref({
|
|
show: false,
|
|
message: '',
|
|
color: 'success'
|
|
});
|
|
|
|
const headers = ref([
|
|
{ title: 'No', value: 'no', sortable: true },
|
|
{ title: 'Nama Klinik', value: 'namaKlinik', sortable: true },
|
|
{ title: 'Kode', value: 'kodeKlinik', sortable: true },
|
|
{ title: 'Nama Ruang', value: 'namaRuang', sortable: true },
|
|
{ title: 'Layar Informasi', value: 'layarInformasi', sortable: false, width: '150px' },
|
|
{ title: 'Aksi', value: 'aksi', sortable: false },
|
|
]);
|
|
|
|
const formData = ref({
|
|
id: null,
|
|
kodeKlinik: '',
|
|
namaKlinik: '',
|
|
ruangList: [
|
|
{ nomorRuang: '', namaRuang: '', nomorScreen: '' }
|
|
],
|
|
});
|
|
|
|
const onKlinikChange = (kode) => {
|
|
const selectedKlinik = masterStore.getKlinikByKode(kode);
|
|
if (selectedKlinik) {
|
|
formData.value.namaKlinik = selectedKlinik.nama;
|
|
}
|
|
};
|
|
|
|
const addRuang = () => {
|
|
formData.value.ruangList.push({
|
|
nomorRuang: '',
|
|
namaRuang: '',
|
|
nomorScreen: ''
|
|
});
|
|
};
|
|
|
|
const removeRuang = (index) => {
|
|
if (formData.value.ruangList.length > 1) {
|
|
formData.value.ruangList.splice(index, 1);
|
|
}
|
|
};
|
|
|
|
const openTambahDialog = () => {
|
|
isEdit.value = false;
|
|
resetForm();
|
|
dialog.value = true;
|
|
};
|
|
|
|
const openEditDialog = (item) => {
|
|
isEdit.value = true;
|
|
formData.value = {
|
|
id: item.id,
|
|
kodeKlinik: item.kodeKlinik,
|
|
namaKlinik: item.namaKlinik,
|
|
ruangList: JSON.parse(JSON.stringify(item.ruangList)),
|
|
};
|
|
dialog.value = true;
|
|
};
|
|
|
|
const closeDialog = () => {
|
|
dialog.value = false;
|
|
resetForm();
|
|
};
|
|
|
|
const resetForm = () => {
|
|
formData.value = {
|
|
id: null,
|
|
kodeKlinik: '',
|
|
namaKlinik: '',
|
|
ruangList: [
|
|
{ nomorRuang: '', namaRuang: '', nomorScreen: '' }
|
|
],
|
|
};
|
|
if (formRef.value) {
|
|
formRef.value.reset();
|
|
}
|
|
};
|
|
|
|
const submitForm = async () => {
|
|
const { valid } = await formRef.value.validate();
|
|
|
|
if (!valid) return;
|
|
|
|
if (formData.value.ruangList.length === 0) {
|
|
snackbar.value = {
|
|
show: true,
|
|
message: 'Tambahkan minimal 1 ruangan',
|
|
color: 'warning'
|
|
};
|
|
return;
|
|
}
|
|
|
|
let result;
|
|
if (isEdit.value) {
|
|
result = masterStore.updateRuang(formData.value);
|
|
} else {
|
|
result = masterStore.addRuang(formData.value);
|
|
}
|
|
|
|
if (result.success) {
|
|
snackbar.value = { show: true, message: result.message, color: 'success' };
|
|
closeDialog();
|
|
} else {
|
|
snackbar.value = { show: true, message: result.message, color: 'error' };
|
|
}
|
|
};
|
|
|
|
const handleDelete = (item) => {
|
|
if (confirm(`Hapus ruangan ${item.namaRuang} dari klinik ${item.namaKlinik}?`)) {
|
|
const result = masterStore.deleteRuang(item.id);
|
|
snackbar.value = {
|
|
show: true,
|
|
message: result.message,
|
|
color: result.success ? 'success' : 'error'
|
|
};
|
|
}
|
|
};
|
|
|
|
const openPreviewDialog = (item) => {
|
|
previewItem.value = item;
|
|
// Generate preview URL untuk klinik ruang menggunakan kodeKlinik
|
|
previewUrl.value = `/anjungan/antrianklinikruang/${item.kodeKlinik}`;
|
|
previewDialog.value = true;
|
|
};
|
|
|
|
const closePreviewDialog = () => {
|
|
previewDialog.value = false;
|
|
previewItem.value = null;
|
|
previewUrl.value = '';
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
// Colors from Design System
|
|
$neutral-900: #212121;
|
|
$neutral-800: #4D4D4D;
|
|
$neutral-700: #717171;
|
|
$neutral-600: #89939E;
|
|
$neutral-500: #ABBED1;
|
|
$neutral-400: #E5F7FA;
|
|
$neutral-300: #F5F7FA;
|
|
$neutral-100: #FFFFFF;
|
|
|
|
$success-700: #1B6E53;
|
|
$success-600: #009262;
|
|
$success-400: #32C997;
|
|
$success-300: #84DFC1;
|
|
$success-200: #F1FBF8;
|
|
|
|
$danger-600: #E02B1D;
|
|
|
|
// Font Family & Weights
|
|
$font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
$font-weight-regular: 400;
|
|
$font-weight-medium: 500;
|
|
$font-weight-semibold: 600;
|
|
|
|
// Apply font family
|
|
* {
|
|
font-family: $font-family-base;
|
|
}
|
|
|
|
// ============================================
|
|
// PAGE HEADER
|
|
// ============================================
|
|
.page-header {
|
|
background: linear-gradient(135deg, $success-600 0%, $success-700 100%);
|
|
border-radius: 16px 16px 0 0;
|
|
box-shadow: 0 4px 16px rgba(0, 146, 98, 0.2);
|
|
}
|
|
|
|
.header-content {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 32px;
|
|
color: $neutral-100;
|
|
}
|
|
|
|
.header-left {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.header-icon {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
border-radius: 16px;
|
|
padding: 16px;
|
|
margin-right: 20px;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.page-title {
|
|
font-size: 36px;
|
|
line-height: 44px;
|
|
font-weight: $font-weight-semibold;
|
|
margin: 0;
|
|
color: $neutral-100;
|
|
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.page-subtitle {
|
|
margin: 4px 0 0 0;
|
|
opacity: 0.9;
|
|
font-size: 16px;
|
|
line-height: 24px;
|
|
font-weight: $font-weight-regular;
|
|
color: $neutral-100;
|
|
}
|
|
|
|
.header-stats {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.stat-chip {
|
|
color: $success-600 !important;
|
|
font-weight: $font-weight-semibold;
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.add-btn {
|
|
font-weight: $font-weight-semibold;
|
|
text-transform: none;
|
|
letter-spacing: 0.5px;
|
|
font-size: 16px;
|
|
line-height: 24px;
|
|
color: $success-600 !important;
|
|
}
|
|
|
|
// ============================================
|
|
// DATA TABLE
|
|
// ============================================
|
|
.data-table {
|
|
font-family: $font-family-base;
|
|
}
|
|
|
|
.chip-success-outline {
|
|
border: 1px solid $success-600;
|
|
background-color: transparent !important;
|
|
color: $success-600 !important;
|
|
font-weight: $font-weight-medium;
|
|
font-size: 12px;
|
|
line-height: 16px;
|
|
}
|
|
|
|
.btn-edit {
|
|
background-color: $success-600 !important;
|
|
color: $neutral-100 !important;
|
|
text-transform: none;
|
|
font-weight: $font-weight-semibold;
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.btn-delete {
|
|
border-color: $danger-600 !important;
|
|
color: $danger-600 !important;
|
|
text-transform: none;
|
|
font-weight: $font-weight-semibold;
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
// ============================================
|
|
// DIALOG
|
|
// ============================================
|
|
.dialog-card {
|
|
font-family: $font-family-base;
|
|
}
|
|
|
|
.dialog-header {
|
|
background: linear-gradient(135deg, $success-600 0%, $success-700 100%);
|
|
color: $neutral-100;
|
|
padding: 20px 24px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.headline-4 {
|
|
font-size: 20px;
|
|
line-height: 28px;
|
|
font-weight: $font-weight-semibold;
|
|
margin: 0;
|
|
}
|
|
|
|
.btn-close {
|
|
color: $neutral-100 !important;
|
|
}
|
|
|
|
.dialog-content {
|
|
padding: 24px !important;
|
|
background: $neutral-300;
|
|
}
|
|
|
|
.dialog-actions {
|
|
padding: 16px 24px;
|
|
background: $neutral-300;
|
|
}
|
|
|
|
// ============================================
|
|
// FORM ELEMENTS
|
|
// ============================================
|
|
.field-group {
|
|
background: $neutral-100;
|
|
padding: 20px;
|
|
border-radius: 12px;
|
|
margin-bottom: 0;
|
|
border: 1px solid $neutral-400;
|
|
}
|
|
|
|
.group-label {
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
font-weight: $font-weight-semibold;
|
|
color: $success-600;
|
|
margin-bottom: 12px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.icon-label {
|
|
color: $success-600 !important;
|
|
}
|
|
|
|
.body-3 {
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
font-weight: $font-weight-regular;
|
|
}
|
|
|
|
.text-medium {
|
|
font-weight: $font-weight-medium !important;
|
|
}
|
|
|
|
.input-field {
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.divider-section {
|
|
border-color: $neutral-400 !important;
|
|
}
|
|
|
|
// ============================================
|
|
// CHIPS
|
|
// ============================================
|
|
.chip-success-small {
|
|
background-color: $success-600 !important;
|
|
color: $neutral-100 !important;
|
|
font-weight: $font-weight-semibold;
|
|
font-size: 12px;
|
|
line-height: 16px;
|
|
}
|
|
|
|
// ============================================
|
|
// RUANG ITEMS
|
|
// ============================================
|
|
.ruang-item {
|
|
background: $neutral-300;
|
|
padding: 12px;
|
|
border-radius: 8px;
|
|
margin-bottom: 8px;
|
|
border: 1px solid $neutral-500;
|
|
}
|
|
|
|
.ruang-badge {
|
|
background: linear-gradient(135deg, $success-600 0%, $success-700 100%);
|
|
color: $neutral-100;
|
|
padding: 8px;
|
|
border-radius: 6px;
|
|
text-align: center;
|
|
font-weight: $font-weight-semibold;
|
|
}
|
|
|
|
.btn-delete-ruang {
|
|
color: $danger-600 !important;
|
|
}
|
|
|
|
.btn-add-ruang {
|
|
border-color: $success-600 !important;
|
|
color: $success-600 !important;
|
|
text-transform: none;
|
|
font-weight: $font-weight-semibold;
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
// ============================================
|
|
// BUTTONS
|
|
// ============================================
|
|
.btn-cancel {
|
|
border-color: $neutral-600 !important;
|
|
color: $neutral-800 !important;
|
|
text-transform: none;
|
|
font-weight: $font-weight-semibold;
|
|
font-size: 16px;
|
|
line-height: 24px;
|
|
min-width: 100px;
|
|
}
|
|
|
|
.btn-submit {
|
|
background-color: $success-600 !important;
|
|
color: $neutral-100 !important;
|
|
text-transform: none;
|
|
font-weight: $font-weight-semibold;
|
|
font-size: 16px;
|
|
line-height: 24px;
|
|
min-width: 100px;
|
|
}
|
|
|
|
// ============================================
|
|
// PREVIEW DIALOG
|
|
// ============================================
|
|
.btn-preview {
|
|
background-color: $secondary-600 !important;
|
|
color: $neutral-100 !important;
|
|
text-transform: none;
|
|
font-weight: $font-weight-semibold;
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.preview-dialog-card {
|
|
font-family: $font-family-base;
|
|
height: 95vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.preview-dialog-header {
|
|
background: linear-gradient(135deg, $success-600 0%, $success-700 100%);
|
|
color: $neutral-100;
|
|
padding: 16px 24px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.preview-header-content {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.preview-content {
|
|
padding: 0 !important;
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: $neutral-800;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.preview-iframe {
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 80vh;
|
|
border: none;
|
|
}
|
|
|
|
.preview-loading {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: $neutral-100;
|
|
padding: 40px;
|
|
}
|
|
|
|
// ============================================
|
|
// RESPONSIVE
|
|
// ============================================
|
|
@media (max-width: 768px) {
|
|
.header-content {
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
.header-stats {
|
|
width: 100%;
|
|
flex-wrap: wrap;
|
|
}
|
|
}
|
|
</style> |