feat: Frontend CSS refactoring and test improvements
Frontend: - Refactored CSS architecture with new utility classes - Updated dashboard components styling - Improved responsive grid system - Enhanced typography and variables - Updated E2E and integration tests Added: - Claude Code slash commands for validation - SSH tunnel and start test scripts 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -12,11 +12,14 @@
|
||||
<span class="company-name">{{ selectedCompanyName }}</span>
|
||||
<span class="company-code">{{ selectedCompanyCode }}</span>
|
||||
</div>
|
||||
<i class="pi pi-chevron-down" :class="{ 'rotate-180': dropdownOpen }"></i>
|
||||
<i
|
||||
class="pi pi-chevron-down"
|
||||
:class="{ 'rotate-180': dropdownOpen }"
|
||||
></i>
|
||||
</button>
|
||||
|
||||
<div
|
||||
v-show="dropdownOpen"
|
||||
<div
|
||||
v-show="dropdownOpen"
|
||||
class="company-dropdown-panel"
|
||||
:class="{ 'panel-open': dropdownOpen }"
|
||||
>
|
||||
@@ -30,7 +33,7 @@
|
||||
placeholder="Search companies..."
|
||||
class="search-input"
|
||||
@keydown="handleKeyDown"
|
||||
>
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -41,7 +44,7 @@
|
||||
class="company-item"
|
||||
:class="{
|
||||
active: company.id_firma === selectedCompany?.id_firma,
|
||||
'keyboard-highlighted': isHighlighted(index)
|
||||
'keyboard-highlighted': isHighlighted(index),
|
||||
}"
|
||||
@click="selectCompany(company)"
|
||||
@mouseenter="highlightedIndex = index"
|
||||
@@ -51,10 +54,15 @@
|
||||
<div class="company-sub-info">
|
||||
<span class="company-cui">CUI: {{ company.fiscal_code }}</span>
|
||||
<span class="company-separator">•</span>
|
||||
<span class="company-status" :class="company.status">{{ company.status }}</span>
|
||||
<span class="company-status" :class="company.status">{{
|
||||
company.status
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<i v-if="company.id_firma === selectedCompany?.id_firma" class="pi pi-check company-selected-icon"></i>
|
||||
<i
|
||||
v-if="company.id_firma === selectedCompany?.id_firma"
|
||||
class="pi pi-check company-selected-icon"
|
||||
></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -68,178 +76,193 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, computed, onMounted, onUnmounted, nextTick, watch } from 'vue'
|
||||
import { useCompanyStore } from '../../stores/companies'
|
||||
import { ref, computed, onMounted, onUnmounted, nextTick, watch } from "vue";
|
||||
import { useCompanyStore } from "../../stores/companies";
|
||||
|
||||
export default {
|
||||
name: 'CompanySelectorMini',
|
||||
name: "CompanySelectorMini",
|
||||
props: {
|
||||
modelValue: {
|
||||
type: Object,
|
||||
default: null
|
||||
}
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
emits: ['update:modelValue', 'company-changed'],
|
||||
emits: ["update:modelValue", "company-changed"],
|
||||
setup(props, { emit }) {
|
||||
const companiesStore = useCompanyStore()
|
||||
const dropdown = ref(null)
|
||||
const dropdownContainer = ref(null)
|
||||
const searchInput = ref(null)
|
||||
const dropdownOpen = ref(false)
|
||||
const searchQuery = ref('')
|
||||
const highlightedIndex = ref(-1)
|
||||
const companiesStore = useCompanyStore();
|
||||
const dropdown = ref(null);
|
||||
const dropdownContainer = ref(null);
|
||||
const searchInput = ref(null);
|
||||
const dropdownOpen = ref(false);
|
||||
const searchQuery = ref("");
|
||||
const highlightedIndex = ref(-1);
|
||||
|
||||
const selectedCompany = computed({
|
||||
get: () => props.modelValue || companiesStore.selectedCompany,
|
||||
set: (value) => {
|
||||
emit('update:modelValue', value)
|
||||
companiesStore.setSelectedCompany(value)
|
||||
}
|
||||
})
|
||||
emit("update:modelValue", value);
|
||||
companiesStore.setSelectedCompany(value);
|
||||
},
|
||||
});
|
||||
|
||||
const selectedCompanyName = computed(() => {
|
||||
return selectedCompany.value?.name || 'Select Company'
|
||||
})
|
||||
return selectedCompany.value?.name || "Select Company";
|
||||
});
|
||||
|
||||
const selectedCompanyCode = computed(() => {
|
||||
return selectedCompany.value?.fiscal_code ? `CUI: ${selectedCompany.value.fiscal_code}` : ''
|
||||
})
|
||||
return selectedCompany.value?.fiscal_code
|
||||
? `CUI: ${selectedCompany.value.fiscal_code}`
|
||||
: "";
|
||||
});
|
||||
|
||||
const filteredCompanies = computed(() => {
|
||||
const companies = companiesStore.companies || []
|
||||
if (!searchQuery.value || searchQuery.value.trim() === '') {
|
||||
return companies
|
||||
const companies = companiesStore.companies || [];
|
||||
if (!searchQuery.value || searchQuery.value.trim() === "") {
|
||||
return companies;
|
||||
}
|
||||
|
||||
const query = searchQuery.value.toLowerCase().trim()
|
||||
return companies.filter(company =>
|
||||
company.name?.toLowerCase().includes(query) ||
|
||||
company.fiscal_code?.toLowerCase().includes(query)
|
||||
)
|
||||
})
|
||||
const query = searchQuery.value.toLowerCase().trim();
|
||||
return companies.filter(
|
||||
(company) =>
|
||||
company.name?.toLowerCase().includes(query) ||
|
||||
company.fiscal_code?.toLowerCase().includes(query),
|
||||
);
|
||||
});
|
||||
|
||||
const toggleDropdown = async () => {
|
||||
dropdownOpen.value = !dropdownOpen.value
|
||||
dropdownOpen.value = !dropdownOpen.value;
|
||||
if (dropdownOpen.value) {
|
||||
searchQuery.value = ''
|
||||
highlightedIndex.value = -1
|
||||
searchQuery.value = "";
|
||||
highlightedIndex.value = -1;
|
||||
// Focus on search input after dropdown opens
|
||||
await nextTick()
|
||||
searchInput.value?.focus()
|
||||
await nextTick();
|
||||
searchInput.value?.focus();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const closeDropdown = () => {
|
||||
dropdownOpen.value = false
|
||||
searchQuery.value = ''
|
||||
}
|
||||
dropdownOpen.value = false;
|
||||
searchQuery.value = "";
|
||||
};
|
||||
|
||||
const selectCompany = (company) => {
|
||||
selectedCompany.value = company
|
||||
emit('company-changed', company)
|
||||
closeDropdown()
|
||||
}
|
||||
selectedCompany.value = company;
|
||||
emit("company-changed", company);
|
||||
closeDropdown();
|
||||
};
|
||||
|
||||
const scrollToHighlighted = () => {
|
||||
nextTick(() => {
|
||||
const highlightedElement = document.querySelector('.company-item.keyboard-highlighted')
|
||||
const highlightedElement = document.querySelector(
|
||||
".company-item.keyboard-highlighted",
|
||||
);
|
||||
if (highlightedElement) {
|
||||
highlightedElement.scrollIntoView({ block: 'nearest', behavior: 'smooth' })
|
||||
highlightedElement.scrollIntoView({
|
||||
block: "nearest",
|
||||
behavior: "smooth",
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleKeyDown = (event) => {
|
||||
if (!dropdownOpen.value || filteredCompanies.value.length === 0) return
|
||||
if (!dropdownOpen.value || filteredCompanies.value.length === 0) return;
|
||||
|
||||
switch(event.key) {
|
||||
case 'ArrowDown':
|
||||
event.preventDefault()
|
||||
highlightedIndex.value = (highlightedIndex.value + 1) % filteredCompanies.value.length
|
||||
scrollToHighlighted()
|
||||
break
|
||||
switch (event.key) {
|
||||
case "ArrowDown":
|
||||
event.preventDefault();
|
||||
highlightedIndex.value =
|
||||
(highlightedIndex.value + 1) % filteredCompanies.value.length;
|
||||
scrollToHighlighted();
|
||||
break;
|
||||
|
||||
case 'ArrowUp':
|
||||
event.preventDefault()
|
||||
case "ArrowUp":
|
||||
event.preventDefault();
|
||||
if (highlightedIndex.value <= 0) {
|
||||
highlightedIndex.value = filteredCompanies.value.length - 1
|
||||
highlightedIndex.value = filteredCompanies.value.length - 1;
|
||||
} else {
|
||||
highlightedIndex.value--
|
||||
highlightedIndex.value--;
|
||||
}
|
||||
scrollToHighlighted()
|
||||
break
|
||||
scrollToHighlighted();
|
||||
break;
|
||||
|
||||
case 'Enter':
|
||||
event.preventDefault()
|
||||
if (highlightedIndex.value >= 0 && highlightedIndex.value < filteredCompanies.value.length) {
|
||||
selectCompany(filteredCompanies.value[highlightedIndex.value])
|
||||
case "Enter":
|
||||
event.preventDefault();
|
||||
if (
|
||||
highlightedIndex.value >= 0 &&
|
||||
highlightedIndex.value < filteredCompanies.value.length
|
||||
) {
|
||||
selectCompany(filteredCompanies.value[highlightedIndex.value]);
|
||||
}
|
||||
break
|
||||
break;
|
||||
|
||||
case 'Escape':
|
||||
closeDropdown()
|
||||
break
|
||||
case "Escape":
|
||||
closeDropdown();
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const isHighlighted = (index) => {
|
||||
return index === highlightedIndex.value
|
||||
}
|
||||
return index === highlightedIndex.value;
|
||||
};
|
||||
|
||||
const openWithShortcut = async () => {
|
||||
// Scroll to selector
|
||||
if (dropdownContainer.value) {
|
||||
dropdownContainer.value.scrollIntoView({ behavior: 'smooth', block: 'start' })
|
||||
dropdownContainer.value.scrollIntoView({
|
||||
behavior: "smooth",
|
||||
block: "start",
|
||||
});
|
||||
}
|
||||
|
||||
// Wait for scroll to complete
|
||||
await new Promise(resolve => setTimeout(resolve, 300))
|
||||
await new Promise((resolve) => setTimeout(resolve, 300));
|
||||
|
||||
// Open dropdown and focus
|
||||
if (!dropdownOpen.value) {
|
||||
dropdownOpen.value = true
|
||||
highlightedIndex.value = -1
|
||||
searchQuery.value = ''
|
||||
await nextTick()
|
||||
searchInput.value?.focus()
|
||||
dropdownOpen.value = true;
|
||||
highlightedIndex.value = -1;
|
||||
searchQuery.value = "";
|
||||
await nextTick();
|
||||
searchInput.value?.focus();
|
||||
} else {
|
||||
// If already open, just focus
|
||||
searchInput.value?.focus()
|
||||
searchInput.value?.focus();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleGlobalKeyDown = (event) => {
|
||||
// Check for Alt+Q (left-hand shortcut)
|
||||
if (event.altKey && event.key === 'q') {
|
||||
event.preventDefault()
|
||||
openWithShortcut()
|
||||
if (event.altKey && event.key === "q") {
|
||||
event.preventDefault();
|
||||
openWithShortcut();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleClickOutside = (event) => {
|
||||
if (dropdown.value && !dropdown.value.contains(event.target)) {
|
||||
closeDropdown()
|
||||
closeDropdown();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Watch for search query changes and reset highlighted index
|
||||
watch(searchQuery, () => {
|
||||
highlightedIndex.value = -1
|
||||
})
|
||||
highlightedIndex.value = -1;
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
document.addEventListener('click', handleClickOutside)
|
||||
document.addEventListener('keydown', handleGlobalKeyDown)
|
||||
document.addEventListener("click", handleClickOutside);
|
||||
document.addEventListener("keydown", handleGlobalKeyDown);
|
||||
// Load companies if not already loaded
|
||||
if (companiesStore.companies.length === 0) {
|
||||
companiesStore.loadCompanies()
|
||||
companiesStore.loadCompanies();
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener('click', handleClickOutside)
|
||||
document.removeEventListener('keydown', handleGlobalKeyDown)
|
||||
})
|
||||
document.removeEventListener("click", handleClickOutside);
|
||||
document.removeEventListener("keydown", handleGlobalKeyDown);
|
||||
});
|
||||
|
||||
return {
|
||||
dropdown,
|
||||
@@ -256,10 +279,10 @@ export default {
|
||||
closeDropdown,
|
||||
selectCompany,
|
||||
handleKeyDown,
|
||||
isHighlighted
|
||||
}
|
||||
}
|
||||
}
|
||||
isHighlighted,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@@ -477,15 +500,15 @@ export default {
|
||||
max-width: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.company-trigger {
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
|
||||
.company-dropdown-panel {
|
||||
left: -16px;
|
||||
right: -16px;
|
||||
width: calc(100% + 32px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -4,7 +4,11 @@
|
||||
<h2 class="section-title">Date Detaliate</h2>
|
||||
<div class="section-controls">
|
||||
<!-- Selector tip date -->
|
||||
<select v-model="selectedType" @change="loadData" class="data-type-select">
|
||||
<select
|
||||
v-model="selectedType"
|
||||
@change="loadData"
|
||||
class="data-type-select"
|
||||
>
|
||||
<option value="clients">Clienți</option>
|
||||
<option value="suppliers">Furnizori</option>
|
||||
<option value="treasury">Trezorerie</option>
|
||||
@@ -18,7 +22,7 @@
|
||||
type="text"
|
||||
placeholder="Căutare..."
|
||||
class="search-input"
|
||||
>
|
||||
/>
|
||||
<i class="pi pi-search"></i>
|
||||
</div>
|
||||
|
||||
@@ -54,16 +58,35 @@
|
||||
<!-- Clients/Suppliers - grouped with expand/collapse -->
|
||||
<template v-for="group in paginatedGroups" :key="group.name">
|
||||
<!-- Single invoice: show direct row -->
|
||||
<tr v-if="group.facturi.length === 1"
|
||||
class="single-invoice-row"
|
||||
:class="{ 'row-restant': group.hasRestant }">
|
||||
<td><strong>{{ group.name }}</strong></td>
|
||||
<tr
|
||||
v-if="group.facturi.length === 1"
|
||||
class="single-invoice-row"
|
||||
:class="{ 'row-restant': group.hasRestant }"
|
||||
>
|
||||
<td>
|
||||
<strong>{{ group.name }}</strong>
|
||||
</td>
|
||||
<td>{{ group.facturi[0].numar_document }}</td>
|
||||
<td>{{ formatValue(group.facturi[0].data_document, 'date') }}</td>
|
||||
<td>{{ formatValue(group.facturi[0].data_scadenta, 'date') }}</td>
|
||||
<td>{{ formatValue(group.facturi[0].facturat, 'currency') }}</td>
|
||||
<td>{{ formatValue(group.facturi[0][selectedType === 'clients' ? 'incasat' : 'achitat'], 'currency') }}</td>
|
||||
<td :class="{ 'sold-restant': group.facturi[0].status === 'Restant' }">{{ formatValue(group.facturi[0].sold, 'currency') }}</td>
|
||||
<td>{{ formatValue(group.facturi[0].data_document, "date") }}</td>
|
||||
<td>{{ formatValue(group.facturi[0].data_scadenta, "date") }}</td>
|
||||
<td>{{ formatValue(group.facturi[0].facturat, "currency") }}</td>
|
||||
<td>
|
||||
{{
|
||||
formatValue(
|
||||
group.facturi[0][
|
||||
selectedType === "clients" ? "incasat" : "achitat"
|
||||
],
|
||||
"currency",
|
||||
)
|
||||
}}
|
||||
</td>
|
||||
<td
|
||||
:class="{
|
||||
'sold-restant': group.facturi[0].status === 'Restant',
|
||||
}"
|
||||
>
|
||||
{{ formatValue(group.facturi[0].sold, "currency") }}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Multiple invoices: show expand/collapse -->
|
||||
@@ -76,11 +99,18 @@
|
||||
>
|
||||
<td class="group-name-cell">
|
||||
<strong>{{ group.name }}</strong>
|
||||
<span class="facturi-count">({{ group.facturi.length }})</span>
|
||||
<span class="facturi-count"
|
||||
>({{ group.facturi.length }})</span
|
||||
>
|
||||
</td>
|
||||
<td colspan="5"></td>
|
||||
<td class="subtotal-cell" :class="{ 'sold-restant': group.hasRestant }">
|
||||
<strong>{{ formatValue(group.totalSold, 'currency') }}</strong>
|
||||
<td
|
||||
class="subtotal-cell"
|
||||
:class="{ 'sold-restant': group.hasRestant }"
|
||||
>
|
||||
<strong>{{
|
||||
formatValue(group.totalSold, "currency")
|
||||
}}</strong>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@@ -92,13 +122,35 @@
|
||||
class="detail-row"
|
||||
:class="getRowClass(factura)"
|
||||
>
|
||||
<td class="detail-name">{{ factura.client || factura.furnizor || '' }}</td>
|
||||
<td class="detail-name">
|
||||
{{ factura.client || factura.furnizor || "" }}
|
||||
</td>
|
||||
<td>{{ factura.numar_document }}</td>
|
||||
<td>{{ formatValue(factura.data_document, 'date') }}</td>
|
||||
<td>{{ formatValue(factura.data_scadenta, 'date') }}</td>
|
||||
<td>{{ formatValue(factura[selectedType === 'clients' ? 'facturat' : 'facturat'], 'currency') }}</td>
|
||||
<td>{{ formatValue(factura[selectedType === 'clients' ? 'incasat' : 'achitat'], 'currency') }}</td>
|
||||
<td :class="{ 'sold-restant': factura.status === 'Restant' }">{{ formatValue(factura.sold, 'currency') }}</td>
|
||||
<td>{{ formatValue(factura.data_document, "date") }}</td>
|
||||
<td>{{ formatValue(factura.data_scadenta, "date") }}</td>
|
||||
<td>
|
||||
{{
|
||||
formatValue(
|
||||
factura[
|
||||
selectedType === "clients" ? "facturat" : "facturat"
|
||||
],
|
||||
"currency",
|
||||
)
|
||||
}}
|
||||
</td>
|
||||
<td>
|
||||
{{
|
||||
formatValue(
|
||||
factura[
|
||||
selectedType === "clients" ? "incasat" : "achitat"
|
||||
],
|
||||
"currency",
|
||||
)
|
||||
}}
|
||||
</td>
|
||||
<td :class="{ 'sold-restant': factura.status === 'Restant' }">
|
||||
{{ formatValue(factura.sold, "currency") }}
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</template>
|
||||
@@ -130,259 +182,282 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, watch, onMounted } from 'vue'
|
||||
import { useDashboardStore } from '@/stores/dashboard'
|
||||
import { useCompanyStore } from '@/stores/companies'
|
||||
import { useToast } from 'primevue/usetoast'
|
||||
import Paginator from 'primevue/paginator'
|
||||
import * as XLSX from 'xlsx'
|
||||
import jsPDF from 'jspdf'
|
||||
import 'jspdf-autotable'
|
||||
import { ref, computed, watch, onMounted } from "vue";
|
||||
import { useDashboardStore } from "@/stores/dashboard";
|
||||
import { useCompanyStore } from "@/stores/companies";
|
||||
import { useToast } from "primevue/usetoast";
|
||||
import Paginator from "primevue/paginator";
|
||||
import * as XLSX from "xlsx";
|
||||
import jsPDF from "jspdf";
|
||||
import "jspdf-autotable";
|
||||
|
||||
const dashboardStore = useDashboardStore()
|
||||
const companyStore = useCompanyStore()
|
||||
const toast = useToast()
|
||||
const dashboardStore = useDashboardStore();
|
||||
const companyStore = useCompanyStore();
|
||||
const toast = useToast();
|
||||
|
||||
// State
|
||||
const selectedType = ref('clients')
|
||||
const searchTerm = ref('')
|
||||
const data = ref([])
|
||||
const firstRow = ref(0)
|
||||
const rowsPerPage = ref(25)
|
||||
const expandedClients = ref(new Set())
|
||||
const selectedType = ref("clients");
|
||||
const searchTerm = ref("");
|
||||
const data = ref([]);
|
||||
const firstRow = ref(0);
|
||||
const rowsPerPage = ref(25);
|
||||
const expandedClients = ref(new Set());
|
||||
|
||||
// Columns configuration based on type
|
||||
const columns = computed(() => {
|
||||
switch(selectedType.value) {
|
||||
case 'clients':
|
||||
switch (selectedType.value) {
|
||||
case "clients":
|
||||
return [
|
||||
{ field: 'client', header: 'Client', type: 'text' },
|
||||
{ field: 'numar_document', header: 'Nr. Document', type: 'text' },
|
||||
{ field: 'data_document', header: 'Data Document', type: 'date' },
|
||||
{ field: 'data_scadenta', header: 'Data Scadență', type: 'date' },
|
||||
{ field: 'facturat', header: 'Facturat', type: 'currency', showTotal: true },
|
||||
{ field: 'incasat', header: 'Încasat', type: 'currency', showTotal: true },
|
||||
{ field: 'sold', header: 'Sold', type: 'currency', showTotal: true }
|
||||
]
|
||||
case 'suppliers':
|
||||
{ field: "client", header: "Client", type: "text" },
|
||||
{ field: "numar_document", header: "Nr. Document", type: "text" },
|
||||
{ field: "data_document", header: "Data Document", type: "date" },
|
||||
{ field: "data_scadenta", header: "Data Scadență", type: "date" },
|
||||
{
|
||||
field: "facturat",
|
||||
header: "Facturat",
|
||||
type: "currency",
|
||||
showTotal: true,
|
||||
},
|
||||
{
|
||||
field: "incasat",
|
||||
header: "Încasat",
|
||||
type: "currency",
|
||||
showTotal: true,
|
||||
},
|
||||
{ field: "sold", header: "Sold", type: "currency", showTotal: true },
|
||||
];
|
||||
case "suppliers":
|
||||
return [
|
||||
{ field: 'furnizor', header: 'Furnizor', type: 'text' },
|
||||
{ field: 'numar_document', header: 'Nr. Document', type: 'text' },
|
||||
{ field: 'data_document', header: 'Data Document', type: 'date' },
|
||||
{ field: 'data_scadenta', header: 'Data Scadență', type: 'date' },
|
||||
{ field: 'facturat', header: 'Facturat', type: 'currency', showTotal: true },
|
||||
{ field: 'achitat', header: 'Achitat', type: 'currency', showTotal: true },
|
||||
{ field: 'sold', header: 'Sold', type: 'currency', showTotal: true }
|
||||
]
|
||||
case 'treasury':
|
||||
{ field: "furnizor", header: "Furnizor", type: "text" },
|
||||
{ field: "numar_document", header: "Nr. Document", type: "text" },
|
||||
{ field: "data_document", header: "Data Document", type: "date" },
|
||||
{ field: "data_scadenta", header: "Data Scadență", type: "date" },
|
||||
{
|
||||
field: "facturat",
|
||||
header: "Facturat",
|
||||
type: "currency",
|
||||
showTotal: true,
|
||||
},
|
||||
{
|
||||
field: "achitat",
|
||||
header: "Achitat",
|
||||
type: "currency",
|
||||
showTotal: true,
|
||||
},
|
||||
{ field: "sold", header: "Sold", type: "currency", showTotal: true },
|
||||
];
|
||||
case "treasury":
|
||||
return [
|
||||
{ field: 'cont', header: 'Cont', type: 'text' },
|
||||
{ field: 'nume_cont', header: 'Nume Cont', type: 'text' },
|
||||
{ field: 'sold', header: 'Sold', type: 'currency', showTotal: true },
|
||||
{ field: 'valuta', header: 'Valută', type: 'text' },
|
||||
{ field: 'tip', header: 'Tip', type: 'text' }
|
||||
]
|
||||
{ field: "cont", header: "Cont", type: "text" },
|
||||
{ field: "nume_cont", header: "Nume Cont", type: "text" },
|
||||
{ field: "sold", header: "Sold", type: "currency", showTotal: true },
|
||||
{ field: "valuta", header: "Valută", type: "text" },
|
||||
{ field: "tip", header: "Tip", type: "text" },
|
||||
];
|
||||
default:
|
||||
return []
|
||||
return [];
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
// Display columns for header (without first column for grouped tables)
|
||||
const displayColumns = computed(() => {
|
||||
if (selectedType.value === 'treasury') {
|
||||
return columns.value
|
||||
if (selectedType.value === "treasury") {
|
||||
return columns.value;
|
||||
}
|
||||
// For clients/suppliers, keep all columns in header
|
||||
return columns.value
|
||||
})
|
||||
return columns.value;
|
||||
});
|
||||
|
||||
// Filtered data based on search
|
||||
const filteredData = computed(() => {
|
||||
if (!searchTerm.value) return data.value
|
||||
if (!searchTerm.value) return data.value;
|
||||
|
||||
return data.value.filter(row => {
|
||||
return Object.values(row).some(val =>
|
||||
String(val).toLowerCase().includes(searchTerm.value.toLowerCase())
|
||||
)
|
||||
})
|
||||
})
|
||||
return data.value.filter((row) => {
|
||||
return Object.values(row).some((val) =>
|
||||
String(val).toLowerCase().includes(searchTerm.value.toLowerCase()),
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
// Group data by client/supplier
|
||||
const groupedData = computed(() => {
|
||||
if (selectedType.value === 'treasury') {
|
||||
return []
|
||||
if (selectedType.value === "treasury") {
|
||||
return [];
|
||||
}
|
||||
|
||||
const groups = {}
|
||||
const nameField = selectedType.value === 'clients' ? 'client' : 'furnizor'
|
||||
const groups = {};
|
||||
const nameField = selectedType.value === "clients" ? "client" : "furnizor";
|
||||
|
||||
filteredData.value.forEach(row => {
|
||||
const clientName = row[nameField]
|
||||
if (!clientName) return
|
||||
filteredData.value.forEach((row) => {
|
||||
const clientName = row[nameField];
|
||||
if (!clientName) return;
|
||||
|
||||
if (!groups[clientName]) {
|
||||
groups[clientName] = {
|
||||
name: clientName,
|
||||
facturi: [],
|
||||
totalSold: 0,
|
||||
hasRestant: false
|
||||
}
|
||||
hasRestant: false,
|
||||
};
|
||||
}
|
||||
|
||||
groups[clientName].facturi.push(row)
|
||||
groups[clientName].totalSold += (row.sold || 0)
|
||||
if (row.status === 'Restant') {
|
||||
groups[clientName].hasRestant = true
|
||||
groups[clientName].facturi.push(row);
|
||||
groups[clientName].totalSold += row.sold || 0;
|
||||
if (row.status === "Restant") {
|
||||
groups[clientName].hasRestant = true;
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
return Object.values(groups)
|
||||
})
|
||||
return Object.values(groups);
|
||||
});
|
||||
|
||||
// Paginated groups
|
||||
const paginatedGroups = computed(() => {
|
||||
if (selectedType.value === 'treasury') {
|
||||
return []
|
||||
if (selectedType.value === "treasury") {
|
||||
return [];
|
||||
}
|
||||
const start = firstRow.value
|
||||
const end = start + rowsPerPage.value
|
||||
return groupedData.value.slice(start, end)
|
||||
})
|
||||
const start = firstRow.value;
|
||||
const end = start + rowsPerPage.value;
|
||||
return groupedData.value.slice(start, end);
|
||||
});
|
||||
|
||||
// Paginated data (for treasury)
|
||||
const paginatedData = computed(() => {
|
||||
if (selectedType.value !== 'treasury') {
|
||||
return []
|
||||
if (selectedType.value !== "treasury") {
|
||||
return [];
|
||||
}
|
||||
const end = firstRow.value + rowsPerPage.value
|
||||
return filteredData.value.slice(firstRow.value, end)
|
||||
})
|
||||
const end = firstRow.value + rowsPerPage.value;
|
||||
return filteredData.value.slice(firstRow.value, end);
|
||||
});
|
||||
|
||||
// Total records for paginator
|
||||
const totalRecords = computed(() => {
|
||||
if (selectedType.value === 'treasury') {
|
||||
return filteredData.value.length
|
||||
if (selectedType.value === "treasury") {
|
||||
return filteredData.value.length;
|
||||
}
|
||||
return groupedData.value.length
|
||||
})
|
||||
return groupedData.value.length;
|
||||
});
|
||||
|
||||
// Expand/collapse functions
|
||||
const toggleClient = (clientName) => {
|
||||
if (expandedClients.value.has(clientName)) {
|
||||
expandedClients.value.delete(clientName)
|
||||
expandedClients.value.delete(clientName);
|
||||
} else {
|
||||
expandedClients.value.add(clientName)
|
||||
expandedClients.value.add(clientName);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const isExpanded = (clientName) => {
|
||||
return expandedClients.value.has(clientName)
|
||||
}
|
||||
return expandedClients.value.has(clientName);
|
||||
};
|
||||
|
||||
const getRowClass = (row) => {
|
||||
if (row.status === 'Restant') return 'row-restant'
|
||||
return 'row-in-termen'
|
||||
}
|
||||
if (row.status === "Restant") return "row-restant";
|
||||
return "row-in-termen";
|
||||
};
|
||||
|
||||
// Methods
|
||||
const loadData = async () => {
|
||||
try {
|
||||
if (!companyStore.selectedCompany) {
|
||||
toast.add({
|
||||
severity: 'warn',
|
||||
summary: 'Atenție',
|
||||
detail: 'Vă rugăm să selectați o companie',
|
||||
life: 3000
|
||||
})
|
||||
return
|
||||
severity: "warn",
|
||||
summary: "Atenție",
|
||||
detail: "Vă rugăm să selectați o companie",
|
||||
life: 3000,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const response = await dashboardStore.loadDetailedData(
|
||||
selectedType.value,
|
||||
companyStore.selectedCompany.id_firma
|
||||
)
|
||||
data.value = response.data
|
||||
companyStore.selectedCompany.id_firma,
|
||||
);
|
||||
data.value = response.data;
|
||||
// Reset expanded state when loading new data
|
||||
expandedClients.value.clear()
|
||||
expandedClients.value.clear();
|
||||
} catch (error) {
|
||||
toast.add({
|
||||
severity: 'error',
|
||||
summary: 'Eroare',
|
||||
detail: 'Nu s-au putut încărca datele detaliate'
|
||||
})
|
||||
severity: "error",
|
||||
summary: "Eroare",
|
||||
detail: "Nu s-au putut încărca datele detaliate",
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const formatValue = (value, type) => {
|
||||
switch(type) {
|
||||
case 'currency':
|
||||
return new Intl.NumberFormat('ro-RO', {
|
||||
style: 'currency',
|
||||
currency: 'RON'
|
||||
}).format(value || 0)
|
||||
case 'date':
|
||||
if (!value) return '-'
|
||||
switch (type) {
|
||||
case "currency":
|
||||
return new Intl.NumberFormat("ro-RO", {
|
||||
style: "currency",
|
||||
currency: "RON",
|
||||
}).format(value || 0);
|
||||
case "date":
|
||||
if (!value) return "-";
|
||||
// Handle Oracle date format (YYYY-MM-DD or Date object)
|
||||
const date = new Date(value)
|
||||
if (isNaN(date.getTime())) return value // Return original if invalid
|
||||
return date.toLocaleDateString('ro-RO', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric'
|
||||
})
|
||||
case 'badge':
|
||||
return value
|
||||
const date = new Date(value);
|
||||
if (isNaN(date.getTime())) return value; // Return original if invalid
|
||||
return date.toLocaleDateString("ro-RO", {
|
||||
day: "2-digit",
|
||||
month: "2-digit",
|
||||
year: "numeric",
|
||||
});
|
||||
case "badge":
|
||||
return value;
|
||||
default:
|
||||
return value
|
||||
return value;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const calculateTotal = (field) => {
|
||||
return filteredData.value.reduce((sum, row) => sum + (row[field] || 0), 0)
|
||||
}
|
||||
return filteredData.value.reduce((sum, row) => sum + (row[field] || 0), 0);
|
||||
};
|
||||
|
||||
const handleSearch = () => {
|
||||
firstRow.value = 0 // Reset pagination on search
|
||||
expandedClients.value.clear() // Reset expanded state on search
|
||||
}
|
||||
firstRow.value = 0; // Reset pagination on search
|
||||
expandedClients.value.clear(); // Reset expanded state on search
|
||||
};
|
||||
|
||||
const exportExcel = () => {
|
||||
const ws = XLSX.utils.json_to_sheet(filteredData.value)
|
||||
const wb = XLSX.utils.book_new()
|
||||
XLSX.utils.book_append_sheet(wb, ws, selectedType.value)
|
||||
XLSX.writeFile(wb, `${selectedType.value}_${new Date().toISOString()}.xlsx`)
|
||||
}
|
||||
const ws = XLSX.utils.json_to_sheet(filteredData.value);
|
||||
const wb = XLSX.utils.book_new();
|
||||
XLSX.utils.book_append_sheet(wb, ws, selectedType.value);
|
||||
XLSX.writeFile(wb, `${selectedType.value}_${new Date().toISOString()}.xlsx`);
|
||||
};
|
||||
|
||||
const exportPDF = () => {
|
||||
const doc = new jsPDF()
|
||||
const tableColumns = columns.value.map(c => c.header)
|
||||
const tableRows = filteredData.value.map(row =>
|
||||
columns.value.map(c => formatValue(row[c.field], c.type))
|
||||
)
|
||||
const doc = new jsPDF();
|
||||
const tableColumns = columns.value.map((c) => c.header);
|
||||
const tableRows = filteredData.value.map((row) =>
|
||||
columns.value.map((c) => formatValue(row[c.field], c.type)),
|
||||
);
|
||||
|
||||
doc.autoTable({
|
||||
head: [tableColumns],
|
||||
body: tableRows,
|
||||
theme: 'grid'
|
||||
})
|
||||
theme: "grid",
|
||||
});
|
||||
|
||||
doc.save(`${selectedType.value}_${new Date().toISOString()}.pdf`)
|
||||
}
|
||||
doc.save(`${selectedType.value}_${new Date().toISOString()}.pdf`);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
loadData()
|
||||
})
|
||||
loadData();
|
||||
});
|
||||
|
||||
watch(selectedType, () => {
|
||||
loadData()
|
||||
})
|
||||
loadData();
|
||||
});
|
||||
|
||||
// Watch for company changes to reload data
|
||||
watch(() => companyStore.selectedCompany, (newCompany) => {
|
||||
if (newCompany) {
|
||||
loadData()
|
||||
}
|
||||
})
|
||||
watch(
|
||||
() => companyStore.selectedCompany,
|
||||
(newCompany) => {
|
||||
if (newCompany) {
|
||||
loadData();
|
||||
}
|
||||
},
|
||||
);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@@ -486,7 +561,12 @@ watch(() => companyStore.selectedCompany, (newCompany) => {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
min-width: 600px;
|
||||
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
||||
font-family:
|
||||
system-ui,
|
||||
-apple-system,
|
||||
"Segoe UI",
|
||||
Roboto,
|
||||
sans-serif;
|
||||
font-size: 12px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="trend-chart">
|
||||
<canvas
|
||||
<canvas
|
||||
ref="chartCanvas"
|
||||
:width="width"
|
||||
:height="height"
|
||||
@@ -10,7 +10,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onBeforeUnmount, watch, nextTick } from 'vue'
|
||||
import { ref, onMounted, onBeforeUnmount, watch, nextTick } from "vue";
|
||||
import {
|
||||
Chart,
|
||||
CategoryScale,
|
||||
@@ -23,8 +23,8 @@ import {
|
||||
Title,
|
||||
Tooltip,
|
||||
Legend,
|
||||
Filler
|
||||
} from 'chart.js'
|
||||
Filler,
|
||||
} from "chart.js";
|
||||
|
||||
// Register Chart.js components
|
||||
Chart.register(
|
||||
@@ -38,8 +38,8 @@ Chart.register(
|
||||
Title,
|
||||
Tooltip,
|
||||
Legend,
|
||||
Filler
|
||||
)
|
||||
Filler,
|
||||
);
|
||||
|
||||
// Props definition
|
||||
const props = defineProps({
|
||||
@@ -48,50 +48,50 @@ const props = defineProps({
|
||||
required: true,
|
||||
default: () => ({
|
||||
labels: [],
|
||||
datasets: []
|
||||
})
|
||||
datasets: [],
|
||||
}),
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'line',
|
||||
validator: (value) => ['line', 'bar', 'area'].includes(value)
|
||||
default: "line",
|
||||
validator: (value) => ["line", "bar", "area"].includes(value),
|
||||
},
|
||||
compare: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
default: false,
|
||||
},
|
||||
width: {
|
||||
type: Number,
|
||||
default: 400
|
||||
default: 400,
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 200
|
||||
default: 200,
|
||||
},
|
||||
options: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
})
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
|
||||
// Refs
|
||||
const chartCanvas = ref(null)
|
||||
const chartInstance = ref(null)
|
||||
const chartCanvas = ref(null);
|
||||
const chartInstance = ref(null);
|
||||
|
||||
// Romanian currency formatter
|
||||
const formatCurrency = (value) => {
|
||||
return new Intl.NumberFormat('ro-RO', {
|
||||
style: 'currency',
|
||||
currency: 'RON',
|
||||
return new Intl.NumberFormat("ro-RO", {
|
||||
style: "currency",
|
||||
currency: "RON",
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 0
|
||||
}).format(value)
|
||||
}
|
||||
maximumFractionDigits: 0,
|
||||
}).format(value);
|
||||
};
|
||||
|
||||
// Chart configuration
|
||||
const getChartConfig = () => {
|
||||
const chartType = props.type === 'area' ? 'line' : props.type
|
||||
|
||||
const chartType = props.type === "area" ? "line" : props.type;
|
||||
|
||||
const config = {
|
||||
type: chartType,
|
||||
data: {
|
||||
@@ -99,28 +99,34 @@ const getChartConfig = () => {
|
||||
datasets: (props.data.datasets || []).map((dataset, index) => {
|
||||
const baseConfig = {
|
||||
...dataset,
|
||||
borderWidth: props.type === 'line' || props.type === 'area' ? 2 : 0,
|
||||
borderWidth: props.type === "line" || props.type === "area" ? 2 : 0,
|
||||
pointBackgroundColor: dataset.borderColor || dataset.backgroundColor,
|
||||
pointBorderColor: dataset.borderColor || dataset.backgroundColor,
|
||||
pointRadius: props.type === 'line' || props.type === 'area' ? 4 : 0,
|
||||
pointHoverRadius: props.type === 'line' || props.type === 'area' ? 6 : 0
|
||||
}
|
||||
pointRadius: props.type === "line" || props.type === "area" ? 4 : 0,
|
||||
pointHoverRadius:
|
||||
props.type === "line" || props.type === "area" ? 6 : 0,
|
||||
};
|
||||
|
||||
// Area chart specific configuration
|
||||
if (props.type === 'area') {
|
||||
baseConfig.fill = true
|
||||
baseConfig.backgroundColor = dataset.backgroundColor ||
|
||||
(dataset.borderColor ? dataset.borderColor.replace('rgb', 'rgba').replace(')', ', 0.1)') : 'rgba(54, 162, 235, 0.1)')
|
||||
if (props.type === "area") {
|
||||
baseConfig.fill = true;
|
||||
baseConfig.backgroundColor =
|
||||
dataset.backgroundColor ||
|
||||
(dataset.borderColor
|
||||
? dataset.borderColor
|
||||
.replace("rgb", "rgba")
|
||||
.replace(")", ", 0.1)")
|
||||
: "rgba(54, 162, 235, 0.1)");
|
||||
}
|
||||
|
||||
// Bar chart specific configuration
|
||||
if (props.type === 'bar') {
|
||||
baseConfig.borderRadius = 4
|
||||
baseConfig.borderSkipped = false
|
||||
if (props.type === "bar") {
|
||||
baseConfig.borderRadius = 4;
|
||||
baseConfig.borderSkipped = false;
|
||||
}
|
||||
|
||||
return baseConfig
|
||||
})
|
||||
return baseConfig;
|
||||
}),
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
@@ -128,164 +134,164 @@ const getChartConfig = () => {
|
||||
plugins: {
|
||||
legend: {
|
||||
display: props.compare,
|
||||
position: 'top',
|
||||
position: "top",
|
||||
labels: {
|
||||
usePointStyle: true,
|
||||
padding: 20,
|
||||
font: {
|
||||
size: 12
|
||||
}
|
||||
}
|
||||
size: 12,
|
||||
},
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
mode: 'index',
|
||||
mode: "index",
|
||||
intersect: false,
|
||||
callbacks: {
|
||||
label: function(context) {
|
||||
let label = context.dataset.label || ''
|
||||
label: function (context) {
|
||||
let label = context.dataset.label || "";
|
||||
if (label) {
|
||||
label += ': '
|
||||
label += ": ";
|
||||
}
|
||||
if (context.parsed.y !== null) {
|
||||
label += formatCurrency(context.parsed.y)
|
||||
label += formatCurrency(context.parsed.y);
|
||||
}
|
||||
return label
|
||||
}
|
||||
return label;
|
||||
},
|
||||
},
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.8)',
|
||||
titleColor: '#fff',
|
||||
bodyColor: '#fff',
|
||||
borderColor: 'rgba(255, 255, 255, 0.1)',
|
||||
borderWidth: 1
|
||||
}
|
||||
backgroundColor: "rgba(0, 0, 0, 0.8)",
|
||||
titleColor: "#fff",
|
||||
bodyColor: "#fff",
|
||||
borderColor: "rgba(255, 255, 255, 0.1)",
|
||||
borderWidth: 1,
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
display: true,
|
||||
grid: {
|
||||
display: false
|
||||
display: false,
|
||||
},
|
||||
ticks: {
|
||||
font: {
|
||||
size: 11
|
||||
size: 11,
|
||||
},
|
||||
color: '#6b7280'
|
||||
}
|
||||
color: "#6b7280",
|
||||
},
|
||||
},
|
||||
y: {
|
||||
display: true,
|
||||
beginAtZero: true,
|
||||
grid: {
|
||||
color: 'rgba(0, 0, 0, 0.05)'
|
||||
color: "rgba(0, 0, 0, 0.05)",
|
||||
},
|
||||
ticks: {
|
||||
font: {
|
||||
size: 11
|
||||
size: 11,
|
||||
},
|
||||
color: '#6b7280',
|
||||
callback: function(value) {
|
||||
return formatCurrency(value)
|
||||
}
|
||||
}
|
||||
}
|
||||
color: "#6b7280",
|
||||
callback: function (value) {
|
||||
return formatCurrency(value);
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
interaction: {
|
||||
mode: 'index',
|
||||
intersect: false
|
||||
mode: "index",
|
||||
intersect: false,
|
||||
},
|
||||
hover: {
|
||||
mode: 'index',
|
||||
intersect: false
|
||||
mode: "index",
|
||||
intersect: false,
|
||||
},
|
||||
// Merge with custom options
|
||||
...props.options
|
||||
}
|
||||
}
|
||||
...props.options,
|
||||
},
|
||||
};
|
||||
|
||||
return config
|
||||
}
|
||||
return config;
|
||||
};
|
||||
|
||||
// Create chart instance
|
||||
const createChart = () => {
|
||||
if (!chartCanvas.value) return
|
||||
if (!chartCanvas.value) return;
|
||||
|
||||
const config = getChartConfig();
|
||||
|
||||
const config = getChartConfig()
|
||||
|
||||
// Deep clone the entire config to break Vue reactivity circular references
|
||||
const clonedConfig = JSON.parse(JSON.stringify(config))
|
||||
|
||||
chartInstance.value = new Chart(chartCanvas.value, clonedConfig)
|
||||
}
|
||||
const clonedConfig = JSON.parse(JSON.stringify(config));
|
||||
|
||||
chartInstance.value = new Chart(chartCanvas.value, clonedConfig);
|
||||
};
|
||||
|
||||
// Destroy chart instance
|
||||
const destroyChart = () => {
|
||||
if (chartInstance.value) {
|
||||
chartInstance.value.destroy()
|
||||
chartInstance.value = null
|
||||
chartInstance.value.destroy();
|
||||
chartInstance.value = null;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Update chart data
|
||||
const updateChart = () => {
|
||||
if (!chartInstance.value) return
|
||||
if (!chartInstance.value) return;
|
||||
|
||||
const config = getChartConfig();
|
||||
|
||||
const config = getChartConfig()
|
||||
|
||||
// Deep clone the data to break Vue reactivity circular references
|
||||
const clonedData = JSON.parse(JSON.stringify(config.data))
|
||||
|
||||
const clonedData = JSON.parse(JSON.stringify(config.data));
|
||||
|
||||
// Update data
|
||||
chartInstance.value.data = clonedData
|
||||
|
||||
chartInstance.value.data = clonedData;
|
||||
|
||||
// Update options (clone options too to be safe)
|
||||
chartInstance.value.options = JSON.parse(JSON.stringify(config.options))
|
||||
|
||||
chartInstance.value.options = JSON.parse(JSON.stringify(config.options));
|
||||
|
||||
// Re-render
|
||||
chartInstance.value.update('none')
|
||||
}
|
||||
chartInstance.value.update("none");
|
||||
};
|
||||
|
||||
// Recreate chart completely
|
||||
const recreateChart = async () => {
|
||||
destroyChart()
|
||||
await nextTick()
|
||||
createChart()
|
||||
}
|
||||
destroyChart();
|
||||
await nextTick();
|
||||
createChart();
|
||||
};
|
||||
|
||||
// Watch for prop changes
|
||||
watch(
|
||||
() => [props.data, props.type, props.compare, props.options],
|
||||
async (newValues, oldValues) => {
|
||||
// Skip if chart is not initialized
|
||||
if (!chartInstance.value) return
|
||||
|
||||
if (!chartInstance.value) return;
|
||||
|
||||
// If chart type changed, recreate completely
|
||||
if (newValues[1] !== oldValues[1]) {
|
||||
await recreateChart()
|
||||
await recreateChart();
|
||||
} else {
|
||||
// Otherwise just update
|
||||
updateChart()
|
||||
updateChart();
|
||||
}
|
||||
},
|
||||
{ deep: true }
|
||||
)
|
||||
{ deep: true },
|
||||
);
|
||||
|
||||
// Lifecycle hooks
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
createChart()
|
||||
})
|
||||
})
|
||||
createChart();
|
||||
});
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
destroyChart()
|
||||
})
|
||||
destroyChart();
|
||||
});
|
||||
|
||||
// Expose methods for parent components
|
||||
defineExpose({
|
||||
updateChart,
|
||||
recreateChart,
|
||||
chartInstance: () => chartInstance.value
|
||||
})
|
||||
chartInstance: () => chartInstance.value,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@@ -313,4 +319,4 @@ defineExpose({
|
||||
min-height: 120px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -5,8 +5,8 @@
|
||||
<div class="header-content">
|
||||
<h3 class="card-title">📅 Cash Flow Previzionat</h3>
|
||||
<div class="period-selector">
|
||||
<select
|
||||
v-model="selectedPeriod"
|
||||
<select
|
||||
v-model="selectedPeriod"
|
||||
@change="handlePeriodChange"
|
||||
class="period-select"
|
||||
>
|
||||
@@ -29,13 +29,18 @@
|
||||
<div v-else-if="error" class="error-state">
|
||||
<div class="error-icon">⚠️</div>
|
||||
<p>{{ error }}</p>
|
||||
<button @click="loadCashFlowData" class="retry-btn">Încearcă din nou</button>
|
||||
<button @click="loadCashFlowData" class="retry-btn">
|
||||
Încearcă din nou
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Cash Flow Content -->
|
||||
<div v-else class="cashflow-content">
|
||||
<!-- Chart Container -->
|
||||
<div class="cashflow-bars" v-if="chartData && chartData.periods.length > 0">
|
||||
<div
|
||||
class="cashflow-bars"
|
||||
v-if="chartData && chartData.periods.length > 0"
|
||||
>
|
||||
<div class="chart-header">
|
||||
<div class="chart-legend">
|
||||
<div class="legend-item">
|
||||
@@ -48,13 +53,13 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Chart.js Canvas -->
|
||||
<div class="chart-canvas-container">
|
||||
<canvas
|
||||
<canvas
|
||||
ref="cashflowChart"
|
||||
v-if="chartData?.periods?.length"
|
||||
width="400"
|
||||
width="400"
|
||||
height="200"
|
||||
></canvas>
|
||||
</div>
|
||||
@@ -69,21 +74,29 @@
|
||||
<!-- Cash Flow Summary -->
|
||||
<div v-if="chartData" class="cashflow-summary">
|
||||
<div class="summary-row">
|
||||
<div class="summary-item net-flow" :class="getNetFlowClass(chartData.netTotal)">
|
||||
<div
|
||||
class="summary-item net-flow"
|
||||
:class="getNetFlowClass(chartData.netTotal)"
|
||||
>
|
||||
<span class="summary-label">Net Total:</span>
|
||||
<span class="summary-value">{{ formatCurrency(chartData.netTotal) }}</span>
|
||||
<span class="summary-value">{{
|
||||
formatCurrency(chartData.netTotal)
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Critical Days Warnings -->
|
||||
<div v-if="chartData.criticalDays && chartData.criticalDays.length > 0" class="warnings">
|
||||
<div
|
||||
v-if="chartData.criticalDays && chartData.criticalDays.length > 0"
|
||||
class="warnings"
|
||||
>
|
||||
<div class="warning-header">
|
||||
<span class="warning-icon">⚠️</span>
|
||||
<span class="warning-title">Zile Critice</span>
|
||||
</div>
|
||||
<div class="critical-days">
|
||||
<span
|
||||
v-for="day in chartData.criticalDays"
|
||||
<span
|
||||
v-for="day in chartData.criticalDays"
|
||||
:key="day"
|
||||
class="critical-day"
|
||||
>
|
||||
@@ -97,285 +110,291 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue'
|
||||
import { Chart, registerables } from 'chart.js'
|
||||
import { useDashboardStore } from '../../../stores/dashboard'
|
||||
import { ref, computed, onMounted, onUnmounted, watch, nextTick } from "vue";
|
||||
import { Chart, registerables } from "chart.js";
|
||||
import { useDashboardStore } from "../../../stores/dashboard";
|
||||
|
||||
// Register Chart.js components
|
||||
Chart.register(...registerables)
|
||||
Chart.register(...registerables);
|
||||
|
||||
// Props
|
||||
const props = defineProps({
|
||||
companyId: {
|
||||
type: Number,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
// Emits
|
||||
const emit = defineEmits(['periodChanged'])
|
||||
const emit = defineEmits(["periodChanged"]);
|
||||
|
||||
// Store
|
||||
const dashboardStore = useDashboardStore()
|
||||
const dashboardStore = useDashboardStore();
|
||||
|
||||
// State
|
||||
const selectedPeriod = ref('7d')
|
||||
const isLoading = ref(false)
|
||||
const error = ref(null)
|
||||
const chartData = ref(null)
|
||||
const cashflowChart = ref(null)
|
||||
const chartInstance = ref(null)
|
||||
const selectedPeriod = ref("7d");
|
||||
const isLoading = ref(false);
|
||||
const error = ref(null);
|
||||
const chartData = ref(null);
|
||||
const cashflowChart = ref(null);
|
||||
const chartInstance = ref(null);
|
||||
|
||||
// Computed
|
||||
const maxValue = computed(() => {
|
||||
if (!chartData.value) return 1
|
||||
|
||||
if (!chartData.value) return 1;
|
||||
|
||||
const allValues = [
|
||||
...chartData.value.inflows,
|
||||
...chartData.value.outflows.map(Math.abs)
|
||||
].filter(v => v > 0)
|
||||
|
||||
return Math.max(...allValues, 1)
|
||||
})
|
||||
...chartData.value.outflows.map(Math.abs),
|
||||
].filter((v) => v > 0);
|
||||
|
||||
return Math.max(...allValues, 1);
|
||||
});
|
||||
|
||||
// Methods
|
||||
const formatCurrency = (amount) => {
|
||||
if (!amount && amount !== 0) return '0,00 RON'
|
||||
const numAmount = typeof amount === 'string' ? parseFloat(amount) : amount
|
||||
if (isNaN(numAmount)) return '0,00 RON'
|
||||
|
||||
if (!amount && amount !== 0) return "0,00 RON";
|
||||
const numAmount = typeof amount === "string" ? parseFloat(amount) : amount;
|
||||
if (isNaN(numAmount)) return "0,00 RON";
|
||||
|
||||
try {
|
||||
return new Intl.NumberFormat('ro-RO', {
|
||||
style: 'currency',
|
||||
currency: 'RON',
|
||||
return new Intl.NumberFormat("ro-RO", {
|
||||
style: "currency",
|
||||
currency: "RON",
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 0
|
||||
}).format(numAmount)
|
||||
maximumFractionDigits: 0,
|
||||
}).format(numAmount);
|
||||
} catch (error) {
|
||||
return `${numAmount.toLocaleString('ro-RO', { minimumFractionDigits: 0, maximumFractionDigits: 0 })} RON`
|
||||
return `${numAmount.toLocaleString("ro-RO", { minimumFractionDigits: 0, maximumFractionDigits: 0 })} RON`;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const formatCurrencyShort = (amount) => {
|
||||
if (!amount && amount !== 0) return '0'
|
||||
const numAmount = typeof amount === 'string' ? parseFloat(amount) : amount
|
||||
if (isNaN(numAmount)) return '0'
|
||||
|
||||
const absAmount = Math.abs(numAmount)
|
||||
|
||||
if (!amount && amount !== 0) return "0";
|
||||
const numAmount = typeof amount === "string" ? parseFloat(amount) : amount;
|
||||
if (isNaN(numAmount)) return "0";
|
||||
|
||||
const absAmount = Math.abs(numAmount);
|
||||
|
||||
if (absAmount >= 1000000) {
|
||||
return `${(numAmount / 1000000).toFixed(1)}M`
|
||||
return `${(numAmount / 1000000).toFixed(1)}M`;
|
||||
} else if (absAmount >= 1000) {
|
||||
return `${(numAmount / 1000).toFixed(0)}k`
|
||||
return `${(numAmount / 1000).toFixed(0)}k`;
|
||||
}
|
||||
|
||||
return numAmount.toLocaleString('ro-RO', { minimumFractionDigits: 0, maximumFractionDigits: 0 })
|
||||
}
|
||||
|
||||
return numAmount.toLocaleString("ro-RO", {
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 0,
|
||||
});
|
||||
};
|
||||
|
||||
const initializeChart = async () => {
|
||||
if (!cashflowChart.value || !chartData.value) return
|
||||
|
||||
if (!cashflowChart.value || !chartData.value) return;
|
||||
|
||||
// Destroy existing chart instance
|
||||
if (chartInstance.value) {
|
||||
chartInstance.value.destroy()
|
||||
chartInstance.value = null
|
||||
chartInstance.value.destroy();
|
||||
chartInstance.value = null;
|
||||
}
|
||||
|
||||
await nextTick()
|
||||
|
||||
const ctx = cashflowChart.value.getContext('2d')
|
||||
|
||||
|
||||
await nextTick();
|
||||
|
||||
const ctx = cashflowChart.value.getContext("2d");
|
||||
|
||||
chartInstance.value = new Chart(ctx, {
|
||||
type: 'line',
|
||||
type: "line",
|
||||
data: {
|
||||
labels: chartData.value.periods,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Încasări',
|
||||
label: "Încasări",
|
||||
data: chartData.value.inflows,
|
||||
borderColor: 'rgb(34, 197, 94)',
|
||||
backgroundColor: 'rgba(34, 197, 94, 0.1)',
|
||||
borderColor: "rgb(34, 197, 94)",
|
||||
backgroundColor: "rgba(34, 197, 94, 0.1)",
|
||||
borderWidth: 2,
|
||||
fill: false,
|
||||
tension: 0.4,
|
||||
pointBackgroundColor: 'rgb(34, 197, 94)',
|
||||
pointBorderColor: '#ffffff',
|
||||
pointBackgroundColor: "rgb(34, 197, 94)",
|
||||
pointBorderColor: "#ffffff",
|
||||
pointBorderWidth: 2,
|
||||
pointRadius: 5,
|
||||
pointHoverRadius: 7
|
||||
pointHoverRadius: 7,
|
||||
},
|
||||
{
|
||||
label: 'Plăți',
|
||||
label: "Plăți",
|
||||
data: chartData.value.outflows.map(Math.abs),
|
||||
borderColor: 'rgb(239, 68, 68)',
|
||||
backgroundColor: 'rgba(239, 68, 68, 0.1)',
|
||||
borderColor: "rgb(239, 68, 68)",
|
||||
backgroundColor: "rgba(239, 68, 68, 0.1)",
|
||||
borderWidth: 2,
|
||||
fill: false,
|
||||
tension: 0.4,
|
||||
pointBackgroundColor: 'rgb(239, 68, 68)',
|
||||
pointBorderColor: '#ffffff',
|
||||
pointBackgroundColor: "rgb(239, 68, 68)",
|
||||
pointBorderColor: "#ffffff",
|
||||
pointBorderWidth: 2,
|
||||
pointRadius: 5,
|
||||
pointHoverRadius: 7
|
||||
pointHoverRadius: 7,
|
||||
},
|
||||
{
|
||||
label: 'Net Flow',
|
||||
label: "Net Flow",
|
||||
data: chartData.value.netFlow,
|
||||
borderColor: 'rgb(99, 102, 241)',
|
||||
backgroundColor: 'rgba(99, 102, 241, 0.1)',
|
||||
borderColor: "rgb(99, 102, 241)",
|
||||
backgroundColor: "rgba(99, 102, 241, 0.1)",
|
||||
borderWidth: 2,
|
||||
fill: false,
|
||||
tension: 0.4,
|
||||
pointBackgroundColor: 'rgb(99, 102, 241)',
|
||||
pointBorderColor: '#ffffff',
|
||||
pointBackgroundColor: "rgb(99, 102, 241)",
|
||||
pointBorderColor: "#ffffff",
|
||||
pointBorderWidth: 2,
|
||||
pointRadius: 5,
|
||||
pointHoverRadius: 7
|
||||
}
|
||||
]
|
||||
pointHoverRadius: 7,
|
||||
},
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
interaction: {
|
||||
mode: 'index',
|
||||
intersect: false
|
||||
mode: "index",
|
||||
intersect: false,
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
position: 'top',
|
||||
position: "top",
|
||||
labels: {
|
||||
usePointStyle: true,
|
||||
padding: 20,
|
||||
font: {
|
||||
size: 12,
|
||||
weight: '500'
|
||||
}
|
||||
}
|
||||
weight: "500",
|
||||
},
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.8)',
|
||||
titleColor: '#ffffff',
|
||||
bodyColor: '#ffffff',
|
||||
borderColor: 'rgba(255, 255, 255, 0.2)',
|
||||
backgroundColor: "rgba(0, 0, 0, 0.8)",
|
||||
titleColor: "#ffffff",
|
||||
bodyColor: "#ffffff",
|
||||
borderColor: "rgba(255, 255, 255, 0.2)",
|
||||
borderWidth: 1,
|
||||
cornerRadius: 8,
|
||||
displayColors: true,
|
||||
callbacks: {
|
||||
label: function(context) {
|
||||
const label = context.dataset.label
|
||||
const value = context.parsed.y
|
||||
return `${label}: ${formatCurrency(value)}`
|
||||
}
|
||||
}
|
||||
}
|
||||
label: function (context) {
|
||||
const label = context.dataset.label;
|
||||
const value = context.parsed.y;
|
||||
return `${label}: ${formatCurrency(value)}`;
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
display: true,
|
||||
grid: {
|
||||
display: false
|
||||
display: false,
|
||||
},
|
||||
ticks: {
|
||||
font: {
|
||||
size: 11
|
||||
size: 11,
|
||||
},
|
||||
color: 'rgba(107, 114, 128, 0.8)'
|
||||
}
|
||||
color: "rgba(107, 114, 128, 0.8)",
|
||||
},
|
||||
},
|
||||
y: {
|
||||
display: true,
|
||||
grid: {
|
||||
color: 'rgba(107, 114, 128, 0.1)',
|
||||
drawBorder: false
|
||||
color: "rgba(107, 114, 128, 0.1)",
|
||||
drawBorder: false,
|
||||
},
|
||||
ticks: {
|
||||
font: {
|
||||
size: 11
|
||||
size: 11,
|
||||
},
|
||||
color: 'rgba(107, 114, 128, 0.8)',
|
||||
callback: function(value) {
|
||||
return formatCurrencyShort(value)
|
||||
}
|
||||
}
|
||||
}
|
||||
color: "rgba(107, 114, 128, 0.8)",
|
||||
callback: function (value) {
|
||||
return formatCurrencyShort(value);
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderJoinStyle: 'round'
|
||||
borderJoinStyle: "round",
|
||||
},
|
||||
point: {
|
||||
hoverBorderWidth: 3
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
hoverBorderWidth: 3,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const getNetFlowClass = (amount) => {
|
||||
if (!amount && amount !== 0) return 'neutral'
|
||||
const numAmount = typeof amount === 'string' ? parseFloat(amount) : amount
|
||||
return numAmount > 0 ? 'positive' : numAmount < 0 ? 'negative' : 'neutral'
|
||||
}
|
||||
if (!amount && amount !== 0) return "neutral";
|
||||
const numAmount = typeof amount === "string" ? parseFloat(amount) : amount;
|
||||
return numAmount > 0 ? "positive" : numAmount < 0 ? "negative" : "neutral";
|
||||
};
|
||||
|
||||
const handlePeriodChange = () => {
|
||||
emit('periodChanged', selectedPeriod.value)
|
||||
loadCashFlowData()
|
||||
}
|
||||
emit("periodChanged", selectedPeriod.value);
|
||||
loadCashFlowData();
|
||||
};
|
||||
|
||||
const loadCashFlowData = async () => {
|
||||
if (!props.companyId) return
|
||||
|
||||
isLoading.value = true
|
||||
error.value = null
|
||||
|
||||
if (!props.companyId) return;
|
||||
|
||||
isLoading.value = true;
|
||||
error.value = null;
|
||||
|
||||
try {
|
||||
const result = await dashboardStore.loadCashFlowData(props.companyId, selectedPeriod.value)
|
||||
|
||||
const result = await dashboardStore.loadCashFlowData(
|
||||
props.companyId,
|
||||
selectedPeriod.value,
|
||||
);
|
||||
|
||||
if (result.success) {
|
||||
chartData.value = result.data
|
||||
await nextTick()
|
||||
initializeChart()
|
||||
chartData.value = result.data;
|
||||
await nextTick();
|
||||
initializeChart();
|
||||
} else {
|
||||
error.value = result.error || 'Nu s-au putut încărca datele'
|
||||
error.value = result.error || "Nu s-au putut încărca datele";
|
||||
// Fallback to mock data for development
|
||||
chartData.value = generateMockData()
|
||||
await nextTick()
|
||||
initializeChart()
|
||||
chartData.value = generateMockData();
|
||||
await nextTick();
|
||||
initializeChart();
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Error loading cash flow data:', err)
|
||||
error.value = 'Eroare la încărcarea datelor'
|
||||
console.error("Error loading cash flow data:", err);
|
||||
error.value = "Eroare la încărcarea datelor";
|
||||
// Fallback to mock data for development
|
||||
chartData.value = generateMockData()
|
||||
await nextTick()
|
||||
initializeChart()
|
||||
chartData.value = generateMockData();
|
||||
await nextTick();
|
||||
initializeChart();
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
isLoading.value = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const generateMockData = () => {
|
||||
const periods = {
|
||||
'7d': ['Luni', 'Marți', 'Miercuri', 'Joi', 'Vineri', 'Sâmbătă', 'Duminică'],
|
||||
'1m': ['S1', 'S2', 'S3', 'S4'],
|
||||
'3m': ['Luna 1', 'Luna 2', 'Luna 3'],
|
||||
'6m': ['Trim 1', 'Trim 2']
|
||||
}
|
||||
|
||||
const periodLabels = periods[selectedPeriod.value] || periods['7d']
|
||||
const inflows = periodLabels.map(() => Math.random() * 500000 + 100000)
|
||||
const outflows = periodLabels.map(() => -(Math.random() * 400000 + 50000))
|
||||
const netFlow = inflows.map((inflow, i) => inflow + outflows[i])
|
||||
"7d": ["Luni", "Marți", "Miercuri", "Joi", "Vineri", "Sâmbătă", "Duminică"],
|
||||
"1m": ["S1", "S2", "S3", "S4"],
|
||||
"3m": ["Luna 1", "Luna 2", "Luna 3"],
|
||||
"6m": ["Trim 1", "Trim 2"],
|
||||
};
|
||||
|
||||
const periodLabels = periods[selectedPeriod.value] || periods["7d"];
|
||||
const inflows = periodLabels.map(() => Math.random() * 500000 + 100000);
|
||||
const outflows = periodLabels.map(() => -(Math.random() * 400000 + 50000));
|
||||
const netFlow = inflows.map((inflow, i) => inflow + outflows[i]);
|
||||
const cumulative = netFlow.reduce((acc, val, i) => {
|
||||
acc.push((acc[i - 1] || 0) + val)
|
||||
return acc
|
||||
}, [])
|
||||
|
||||
acc.push((acc[i - 1] || 0) + val);
|
||||
return acc;
|
||||
}, []);
|
||||
|
||||
const criticalDays = netFlow
|
||||
.map((net, i) => net < -50000 ? periodLabels[i] : null)
|
||||
.filter(Boolean)
|
||||
|
||||
.map((net, i) => (net < -50000 ? periodLabels[i] : null))
|
||||
.filter(Boolean);
|
||||
|
||||
return {
|
||||
periods: periodLabels,
|
||||
inflows,
|
||||
@@ -383,38 +402,46 @@ const generateMockData = () => {
|
||||
netFlow,
|
||||
cumulative,
|
||||
criticalDays,
|
||||
netTotal: netFlow.reduce((sum, val) => sum + val, 0)
|
||||
}
|
||||
}
|
||||
netTotal: netFlow.reduce((sum, val) => sum + val, 0),
|
||||
};
|
||||
};
|
||||
|
||||
// Watchers
|
||||
watch(() => props.companyId, (newId) => {
|
||||
if (newId) {
|
||||
loadCashFlowData()
|
||||
}
|
||||
}, { immediate: true })
|
||||
watch(
|
||||
() => props.companyId,
|
||||
(newId) => {
|
||||
if (newId) {
|
||||
loadCashFlowData();
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
watch(chartData, (newData) => {
|
||||
if (newData) {
|
||||
nextTick(() => {
|
||||
initializeChart()
|
||||
})
|
||||
}
|
||||
}, { deep: true })
|
||||
watch(
|
||||
chartData,
|
||||
(newData) => {
|
||||
if (newData) {
|
||||
nextTick(() => {
|
||||
initializeChart();
|
||||
});
|
||||
}
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
|
||||
// Lifecycle
|
||||
onMounted(() => {
|
||||
if (props.companyId) {
|
||||
loadCashFlowData()
|
||||
loadCashFlowData();
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
if (chartInstance.value) {
|
||||
chartInstance.value.destroy()
|
||||
chartInstance.value = null
|
||||
chartInstance.value.destroy();
|
||||
chartInstance.value = null;
|
||||
}
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@@ -687,12 +714,12 @@ onUnmounted(() => {
|
||||
align-items: stretch;
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
|
||||
.chart-legend {
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
|
||||
.chart-canvas-container {
|
||||
height: 200px;
|
||||
}
|
||||
@@ -702,23 +729,23 @@ onUnmounted(() => {
|
||||
.cashflow-card {
|
||||
min-height: 350px;
|
||||
}
|
||||
|
||||
|
||||
.card-header,
|
||||
.cashflow-bars,
|
||||
.cashflow-summary {
|
||||
padding: var(--space-md);
|
||||
}
|
||||
|
||||
|
||||
.chart-canvas-container {
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
|
||||
.summary-item {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
gap: var(--space-xs);
|
||||
}
|
||||
|
||||
|
||||
.summary-value {
|
||||
font-size: var(--text-base);
|
||||
}
|
||||
@@ -730,13 +757,13 @@ onUnmounted(() => {
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
|
||||
.chart-canvas-container {
|
||||
height: 160px;
|
||||
}
|
||||
|
||||
|
||||
.critical-days {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -44,493 +44,524 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, watch, onMounted, onBeforeUnmount, nextTick } from 'vue'
|
||||
import { Chart, registerables } from 'chart.js'
|
||||
import {
|
||||
ref,
|
||||
computed,
|
||||
watch,
|
||||
onMounted,
|
||||
onBeforeUnmount,
|
||||
nextTick,
|
||||
} from "vue";
|
||||
import { Chart, registerables } from "chart.js";
|
||||
|
||||
Chart.register(...registerables)
|
||||
Chart.register(...registerables);
|
||||
|
||||
const props = defineProps({
|
||||
inflowsValue: {
|
||||
type: Number,
|
||||
default: 0
|
||||
default: 0,
|
||||
},
|
||||
outflowsValue: {
|
||||
type: Number,
|
||||
default: 0
|
||||
default: 0,
|
||||
},
|
||||
inflowsTrend: {
|
||||
type: Object,
|
||||
default: null
|
||||
default: null,
|
||||
},
|
||||
outflowsTrend: {
|
||||
type: Object,
|
||||
default: null
|
||||
default: null,
|
||||
},
|
||||
inflowsSparkline: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
default: () => [],
|
||||
},
|
||||
outflowsSparkline: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
default: () => [],
|
||||
},
|
||||
inflowsPreviousSparkline: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
default: () => [],
|
||||
},
|
||||
outflowsPreviousSparkline: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
default: () => [],
|
||||
},
|
||||
sparklineLabels: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
default: () => [],
|
||||
},
|
||||
previousSparklineLabels: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
})
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
|
||||
// Refs pentru 2 canvas-uri separate
|
||||
const inflowsCanvas = ref(null)
|
||||
const outflowsCanvas = ref(null)
|
||||
let inflowsChartInstance = null
|
||||
let outflowsChartInstance = null
|
||||
const inflowsCanvas = ref(null);
|
||||
const outflowsCanvas = ref(null);
|
||||
let inflowsChartInstance = null;
|
||||
let outflowsChartInstance = null;
|
||||
|
||||
// Format currency
|
||||
const formatCurrency = (amount) => {
|
||||
if (!amount && amount !== 0) return '0 RON'
|
||||
return new Intl.NumberFormat('ro-RO', {
|
||||
style: 'currency',
|
||||
currency: 'RON',
|
||||
if (!amount && amount !== 0) return "0 RON";
|
||||
return new Intl.NumberFormat("ro-RO", {
|
||||
style: "currency",
|
||||
currency: "RON",
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 0
|
||||
}).format(Math.abs(amount))
|
||||
}
|
||||
maximumFractionDigits: 0,
|
||||
}).format(Math.abs(amount));
|
||||
};
|
||||
|
||||
// Check if sparkline data exists
|
||||
const hasSparklineData = computed(() => {
|
||||
return props.inflowsSparkline.length > 0 && props.outflowsSparkline.length > 0
|
||||
})
|
||||
return (
|
||||
props.inflowsSparkline.length > 0 && props.outflowsSparkline.length > 0
|
||||
);
|
||||
});
|
||||
|
||||
// Initialize Încasări chart
|
||||
const initializeInflowsChart = async () => {
|
||||
if (!inflowsCanvas.value || props.inflowsSparkline.length === 0) {
|
||||
return
|
||||
return;
|
||||
}
|
||||
|
||||
// Destroy existing chart
|
||||
if (inflowsChartInstance) {
|
||||
inflowsChartInstance.destroy()
|
||||
inflowsChartInstance = null
|
||||
inflowsChartInstance.destroy();
|
||||
inflowsChartInstance = null;
|
||||
}
|
||||
|
||||
await nextTick()
|
||||
await nextTick();
|
||||
|
||||
const ctx = inflowsCanvas.value.getContext('2d')
|
||||
const ctx = inflowsCanvas.value.getContext("2d");
|
||||
|
||||
// Generate labels
|
||||
const labels = props.sparklineLabels.length > 0
|
||||
? props.sparklineLabels
|
||||
: props.inflowsSparkline.map((_, i) => `L${i + 1}`)
|
||||
const labels =
|
||||
props.sparklineLabels.length > 0
|
||||
? props.sparklineLabels
|
||||
: props.inflowsSparkline.map((_, i) => `L${i + 1}`);
|
||||
|
||||
// Prepare datasets
|
||||
const datasets = [{
|
||||
label: 'Încasări (curent)',
|
||||
data: props.inflowsSparkline,
|
||||
borderColor: '#10b981',
|
||||
backgroundColor: 'rgba(16, 185, 129, 0.1)',
|
||||
borderWidth: 2,
|
||||
fill: true,
|
||||
tension: 0.4,
|
||||
pointRadius: 0,
|
||||
pointHoverRadius: 4,
|
||||
pointHoverBackgroundColor: '#10b981',
|
||||
pointHoverBorderColor: '#ffffff',
|
||||
pointHoverBorderWidth: 2
|
||||
}]
|
||||
const datasets = [
|
||||
{
|
||||
label: "Încasări (curent)",
|
||||
data: props.inflowsSparkline,
|
||||
borderColor: "#10b981",
|
||||
backgroundColor: "rgba(16, 185, 129, 0.1)",
|
||||
borderWidth: 2,
|
||||
fill: true,
|
||||
tension: 0.4,
|
||||
pointRadius: 0,
|
||||
pointHoverRadius: 4,
|
||||
pointHoverBackgroundColor: "#10b981",
|
||||
pointHoverBorderColor: "#ffffff",
|
||||
pointHoverBorderWidth: 2,
|
||||
},
|
||||
];
|
||||
|
||||
// Add previous year dataset if available
|
||||
if (props.inflowsPreviousSparkline && props.inflowsPreviousSparkline.length > 0) {
|
||||
if (
|
||||
props.inflowsPreviousSparkline &&
|
||||
props.inflowsPreviousSparkline.length > 0
|
||||
) {
|
||||
datasets.push({
|
||||
label: 'Încasări (anul precedent)',
|
||||
label: "Încasări (anul precedent)",
|
||||
data: props.inflowsPreviousSparkline,
|
||||
borderColor: 'rgba(16, 185, 129, 0.4)',
|
||||
backgroundColor: 'rgba(16, 185, 129, 0.05)',
|
||||
borderColor: "rgba(16, 185, 129, 0.4)",
|
||||
backgroundColor: "rgba(16, 185, 129, 0.05)",
|
||||
borderWidth: 2,
|
||||
borderDash: [5, 5],
|
||||
fill: false,
|
||||
tension: 0.4,
|
||||
pointRadius: 0,
|
||||
pointHoverRadius: 4,
|
||||
pointHoverBackgroundColor: 'rgba(16, 185, 129, 0.4)',
|
||||
pointHoverBorderColor: '#ffffff',
|
||||
pointHoverBorderWidth: 2
|
||||
})
|
||||
pointHoverBackgroundColor: "rgba(16, 185, 129, 0.4)",
|
||||
pointHoverBorderColor: "#ffffff",
|
||||
pointHoverBorderWidth: 2,
|
||||
});
|
||||
}
|
||||
|
||||
// Calculate limits including both datasets
|
||||
const allDataPoints = [...props.inflowsSparkline]
|
||||
if (props.inflowsPreviousSparkline && props.inflowsPreviousSparkline.length > 0) {
|
||||
allDataPoints.push(...props.inflowsPreviousSparkline)
|
||||
const allDataPoints = [...props.inflowsSparkline];
|
||||
if (
|
||||
props.inflowsPreviousSparkline &&
|
||||
props.inflowsPreviousSparkline.length > 0
|
||||
) {
|
||||
allDataPoints.push(...props.inflowsPreviousSparkline);
|
||||
}
|
||||
const dataMin = Math.min(...allDataPoints)
|
||||
const dataMax = Math.max(...allDataPoints)
|
||||
const dataRange = dataMax - dataMin
|
||||
const dataMean = allDataPoints.reduce((sum, val) => sum + val, 0) / allDataPoints.length
|
||||
const dataMin = Math.min(...allDataPoints);
|
||||
const dataMax = Math.max(...allDataPoints);
|
||||
const dataRange = dataMax - dataMin;
|
||||
const dataMean =
|
||||
allDataPoints.reduce((sum, val) => sum + val, 0) / allDataPoints.length;
|
||||
|
||||
// CORECT: Forțăm range minim SIMETRIC, apoi adăugăm padding
|
||||
const minVisibleRange = dataMean * 0.25 // 25% din medie = range minim vizibil
|
||||
const center = (dataMin + dataMax) / 2
|
||||
const targetRange = Math.max(dataRange, minVisibleRange)
|
||||
const minVisibleRange = dataMean * 0.25; // 25% din medie = range minim vizibil
|
||||
const center = (dataMin + dataMax) / 2;
|
||||
const targetRange = Math.max(dataRange, minVisibleRange);
|
||||
|
||||
// Calculează limite simetric față de centru
|
||||
let calculatedMin = center - targetRange / 2
|
||||
let calculatedMax = center + targetRange / 2
|
||||
let calculatedMin = center - targetRange / 2;
|
||||
let calculatedMax = center + targetRange / 2;
|
||||
|
||||
// Adaugă padding PESTE range-ul asigurat (nu înăuntru!)
|
||||
const paddingAmount = targetRange * 0.10 // 10% padding suplimentar
|
||||
const paddingAmount = targetRange * 0.1; // 10% padding suplimentar
|
||||
|
||||
// Aplică limitele finale (nu permite negative dacă toate datele sunt pozitive)
|
||||
const allPositive = dataMin >= 0
|
||||
const yMin = allPositive ? Math.max(0, calculatedMin - paddingAmount) : calculatedMin - paddingAmount
|
||||
const yMax = calculatedMax + paddingAmount
|
||||
const allPositive = dataMin >= 0;
|
||||
const yMin = allPositive
|
||||
? Math.max(0, calculatedMin - paddingAmount)
|
||||
: calculatedMin - paddingAmount;
|
||||
const yMax = calculatedMax + paddingAmount;
|
||||
|
||||
inflowsChartInstance = new Chart(ctx, {
|
||||
type: 'line',
|
||||
type: "line",
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: datasets
|
||||
datasets: datasets,
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
interaction: {
|
||||
intersect: false,
|
||||
mode: 'index'
|
||||
mode: "index",
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
display: datasets.length > 1,
|
||||
position: 'top',
|
||||
align: 'end',
|
||||
position: "top",
|
||||
align: "end",
|
||||
labels: {
|
||||
boxWidth: 12,
|
||||
boxHeight: 12,
|
||||
padding: 8,
|
||||
font: {
|
||||
size: 10,
|
||||
family: 'Inter, -apple-system, BlinkMacSystemFont, sans-serif'
|
||||
family: "Inter, -apple-system, BlinkMacSystemFont, sans-serif",
|
||||
},
|
||||
color: 'rgba(107, 114, 128, 0.9)',
|
||||
color: "rgba(107, 114, 128, 0.9)",
|
||||
usePointStyle: true,
|
||||
pointStyle: 'line'
|
||||
}
|
||||
pointStyle: "line",
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.8)',
|
||||
titleColor: '#ffffff',
|
||||
bodyColor: '#ffffff',
|
||||
borderColor: 'rgba(255, 255, 255, 0.2)',
|
||||
backgroundColor: "rgba(0, 0, 0, 0.8)",
|
||||
titleColor: "#ffffff",
|
||||
bodyColor: "#ffffff",
|
||||
borderColor: "rgba(255, 255, 255, 0.2)",
|
||||
borderWidth: 1,
|
||||
cornerRadius: 6,
|
||||
displayColors: true,
|
||||
callbacks: {
|
||||
title: (context) => context[0].label || '',
|
||||
title: (context) => context[0].label || "",
|
||||
label: (context) => {
|
||||
const value = context.parsed.y
|
||||
const label = context.dataset.label || ''
|
||||
const formattedValue = new Intl.NumberFormat('ro-RO', {
|
||||
style: 'currency',
|
||||
currency: 'RON',
|
||||
const value = context.parsed.y;
|
||||
const label = context.dataset.label || "";
|
||||
const formattedValue = new Intl.NumberFormat("ro-RO", {
|
||||
style: "currency",
|
||||
currency: "RON",
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 0
|
||||
}).format(value)
|
||||
return `${label}: ${formattedValue}`
|
||||
}
|
||||
}
|
||||
}
|
||||
maximumFractionDigits: 0,
|
||||
}).format(value);
|
||||
return `${label}: ${formattedValue}`;
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
display: true,
|
||||
grid: {
|
||||
display: false,
|
||||
drawBorder: false
|
||||
drawBorder: false,
|
||||
},
|
||||
ticks: {
|
||||
color: 'rgba(107, 114, 128, 0.7)',
|
||||
color: "rgba(107, 114, 128, 0.7)",
|
||||
font: {
|
||||
size: 10,
|
||||
family: 'Inter, -apple-system, BlinkMacSystemFont, sans-serif'
|
||||
family: "Inter, -apple-system, BlinkMacSystemFont, sans-serif",
|
||||
},
|
||||
maxRotation: 45,
|
||||
minRotation: 45,
|
||||
maxTicksLimit: 6
|
||||
maxTicksLimit: 6,
|
||||
},
|
||||
border: {
|
||||
display: false
|
||||
}
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
y: {
|
||||
display: true,
|
||||
min: yMin,
|
||||
max: yMax,
|
||||
grid: {
|
||||
color: 'rgba(107, 114, 128, 0.1)',
|
||||
drawBorder: false
|
||||
color: "rgba(107, 114, 128, 0.1)",
|
||||
drawBorder: false,
|
||||
},
|
||||
ticks: {
|
||||
color: '#10b981',
|
||||
color: "#10b981",
|
||||
font: {
|
||||
size: 11,
|
||||
family: 'Inter, -apple-system, BlinkMacSystemFont, sans-serif'
|
||||
family: "Inter, -apple-system, BlinkMacSystemFont, sans-serif",
|
||||
},
|
||||
maxTicksLimit: 3,
|
||||
callback: function(value) {
|
||||
callback: function (value) {
|
||||
if (value >= 1000000) {
|
||||
return (value / 1000000).toFixed(1) + 'M'
|
||||
return (value / 1000000).toFixed(1) + "M";
|
||||
} else if (value >= 1000) {
|
||||
return (value / 1000).toFixed(0) + 'k'
|
||||
return (value / 1000).toFixed(0) + "k";
|
||||
}
|
||||
return value.toFixed(0)
|
||||
}
|
||||
return value.toFixed(0);
|
||||
},
|
||||
},
|
||||
border: {
|
||||
display: false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
// Initialize Plăți chart
|
||||
const initializeOutflowsChart = async () => {
|
||||
if (!outflowsCanvas.value || props.outflowsSparkline.length === 0) {
|
||||
return
|
||||
return;
|
||||
}
|
||||
|
||||
// Destroy existing chart
|
||||
if (outflowsChartInstance) {
|
||||
outflowsChartInstance.destroy()
|
||||
outflowsChartInstance = null
|
||||
outflowsChartInstance.destroy();
|
||||
outflowsChartInstance = null;
|
||||
}
|
||||
|
||||
await nextTick()
|
||||
await nextTick();
|
||||
|
||||
const ctx = outflowsCanvas.value.getContext('2d')
|
||||
const ctx = outflowsCanvas.value.getContext("2d");
|
||||
|
||||
// Generate labels
|
||||
const labels = props.sparklineLabels.length > 0
|
||||
? props.sparklineLabels
|
||||
: props.outflowsSparkline.map((_, i) => `L${i + 1}`)
|
||||
const labels =
|
||||
props.sparklineLabels.length > 0
|
||||
? props.sparklineLabels
|
||||
: props.outflowsSparkline.map((_, i) => `L${i + 1}`);
|
||||
|
||||
// Prepare datasets
|
||||
const datasets = [{
|
||||
label: 'Plăți (curent)',
|
||||
data: props.outflowsSparkline,
|
||||
borderColor: '#ef4444',
|
||||
backgroundColor: 'rgba(239, 68, 68, 0.1)',
|
||||
borderWidth: 2,
|
||||
fill: true,
|
||||
tension: 0.4,
|
||||
pointRadius: 0,
|
||||
pointHoverRadius: 4,
|
||||
pointHoverBackgroundColor: '#ef4444',
|
||||
pointHoverBorderColor: '#ffffff',
|
||||
pointHoverBorderWidth: 2
|
||||
}]
|
||||
const datasets = [
|
||||
{
|
||||
label: "Plăți (curent)",
|
||||
data: props.outflowsSparkline,
|
||||
borderColor: "#ef4444",
|
||||
backgroundColor: "rgba(239, 68, 68, 0.1)",
|
||||
borderWidth: 2,
|
||||
fill: true,
|
||||
tension: 0.4,
|
||||
pointRadius: 0,
|
||||
pointHoverRadius: 4,
|
||||
pointHoverBackgroundColor: "#ef4444",
|
||||
pointHoverBorderColor: "#ffffff",
|
||||
pointHoverBorderWidth: 2,
|
||||
},
|
||||
];
|
||||
|
||||
// Add previous year dataset if available
|
||||
if (props.outflowsPreviousSparkline && props.outflowsPreviousSparkline.length > 0) {
|
||||
if (
|
||||
props.outflowsPreviousSparkline &&
|
||||
props.outflowsPreviousSparkline.length > 0
|
||||
) {
|
||||
datasets.push({
|
||||
label: 'Plăți (anul precedent)',
|
||||
label: "Plăți (anul precedent)",
|
||||
data: props.outflowsPreviousSparkline,
|
||||
borderColor: 'rgba(239, 68, 68, 0.4)',
|
||||
backgroundColor: 'rgba(239, 68, 68, 0.05)',
|
||||
borderColor: "rgba(239, 68, 68, 0.4)",
|
||||
backgroundColor: "rgba(239, 68, 68, 0.05)",
|
||||
borderWidth: 2,
|
||||
borderDash: [5, 5],
|
||||
fill: false,
|
||||
tension: 0.4,
|
||||
pointRadius: 0,
|
||||
pointHoverRadius: 4,
|
||||
pointHoverBackgroundColor: 'rgba(239, 68, 68, 0.4)',
|
||||
pointHoverBorderColor: '#ffffff',
|
||||
pointHoverBorderWidth: 2
|
||||
})
|
||||
pointHoverBackgroundColor: "rgba(239, 68, 68, 0.4)",
|
||||
pointHoverBorderColor: "#ffffff",
|
||||
pointHoverBorderWidth: 2,
|
||||
});
|
||||
}
|
||||
|
||||
// Calculate limits including both datasets
|
||||
const allDataPoints = [...props.outflowsSparkline]
|
||||
if (props.outflowsPreviousSparkline && props.outflowsPreviousSparkline.length > 0) {
|
||||
allDataPoints.push(...props.outflowsPreviousSparkline)
|
||||
const allDataPoints = [...props.outflowsSparkline];
|
||||
if (
|
||||
props.outflowsPreviousSparkline &&
|
||||
props.outflowsPreviousSparkline.length > 0
|
||||
) {
|
||||
allDataPoints.push(...props.outflowsPreviousSparkline);
|
||||
}
|
||||
const dataMin = Math.min(...allDataPoints)
|
||||
const dataMax = Math.max(...allDataPoints)
|
||||
const dataRange = dataMax - dataMin
|
||||
const dataMean = allDataPoints.reduce((sum, val) => sum + val, 0) / allDataPoints.length
|
||||
const dataMin = Math.min(...allDataPoints);
|
||||
const dataMax = Math.max(...allDataPoints);
|
||||
const dataRange = dataMax - dataMin;
|
||||
const dataMean =
|
||||
allDataPoints.reduce((sum, val) => sum + val, 0) / allDataPoints.length;
|
||||
|
||||
// CORECT: Forțăm range minim SIMETRIC, apoi adăugăm padding
|
||||
const minVisibleRange = dataMean * 0.25 // 25% din medie = range minim vizibil
|
||||
const center = (dataMin + dataMax) / 2
|
||||
const targetRange = Math.max(dataRange, minVisibleRange)
|
||||
const minVisibleRange = dataMean * 0.25; // 25% din medie = range minim vizibil
|
||||
const center = (dataMin + dataMax) / 2;
|
||||
const targetRange = Math.max(dataRange, minVisibleRange);
|
||||
|
||||
// Calculează limite simetric față de centru
|
||||
let calculatedMin = center - targetRange / 2
|
||||
let calculatedMax = center + targetRange / 2
|
||||
let calculatedMin = center - targetRange / 2;
|
||||
let calculatedMax = center + targetRange / 2;
|
||||
|
||||
// Adaugă padding PESTE range-ul asigurat (nu înăuntru!)
|
||||
const paddingAmount = targetRange * 0.10 // 10% padding suplimentar
|
||||
const paddingAmount = targetRange * 0.1; // 10% padding suplimentar
|
||||
|
||||
// Aplică limitele finale (nu permite negative dacă toate datele sunt pozitive)
|
||||
const allPositive = dataMin >= 0
|
||||
const yMin = allPositive ? Math.max(0, calculatedMin - paddingAmount) : calculatedMin - paddingAmount
|
||||
const yMax = calculatedMax + paddingAmount
|
||||
const allPositive = dataMin >= 0;
|
||||
const yMin = allPositive
|
||||
? Math.max(0, calculatedMin - paddingAmount)
|
||||
: calculatedMin - paddingAmount;
|
||||
const yMax = calculatedMax + paddingAmount;
|
||||
|
||||
outflowsChartInstance = new Chart(ctx, {
|
||||
type: 'line',
|
||||
type: "line",
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: datasets
|
||||
datasets: datasets,
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
interaction: {
|
||||
intersect: false,
|
||||
mode: 'index'
|
||||
mode: "index",
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
display: datasets.length > 1,
|
||||
position: 'top',
|
||||
align: 'end',
|
||||
position: "top",
|
||||
align: "end",
|
||||
labels: {
|
||||
boxWidth: 12,
|
||||
boxHeight: 12,
|
||||
padding: 8,
|
||||
font: {
|
||||
size: 10,
|
||||
family: 'Inter, -apple-system, BlinkMacSystemFont, sans-serif'
|
||||
family: "Inter, -apple-system, BlinkMacSystemFont, sans-serif",
|
||||
},
|
||||
color: 'rgba(107, 114, 128, 0.9)',
|
||||
color: "rgba(107, 114, 128, 0.9)",
|
||||
usePointStyle: true,
|
||||
pointStyle: 'line'
|
||||
}
|
||||
pointStyle: "line",
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.8)',
|
||||
titleColor: '#ffffff',
|
||||
bodyColor: '#ffffff',
|
||||
borderColor: 'rgba(255, 255, 255, 0.2)',
|
||||
backgroundColor: "rgba(0, 0, 0, 0.8)",
|
||||
titleColor: "#ffffff",
|
||||
bodyColor: "#ffffff",
|
||||
borderColor: "rgba(255, 255, 255, 0.2)",
|
||||
borderWidth: 1,
|
||||
cornerRadius: 6,
|
||||
displayColors: true,
|
||||
callbacks: {
|
||||
title: (context) => context[0].label || '',
|
||||
title: (context) => context[0].label || "",
|
||||
label: (context) => {
|
||||
const value = context.parsed.y
|
||||
const label = context.dataset.label || ''
|
||||
const formattedValue = new Intl.NumberFormat('ro-RO', {
|
||||
style: 'currency',
|
||||
currency: 'RON',
|
||||
const value = context.parsed.y;
|
||||
const label = context.dataset.label || "";
|
||||
const formattedValue = new Intl.NumberFormat("ro-RO", {
|
||||
style: "currency",
|
||||
currency: "RON",
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 0
|
||||
}).format(value)
|
||||
return `${label}: ${formattedValue}`
|
||||
}
|
||||
}
|
||||
}
|
||||
maximumFractionDigits: 0,
|
||||
}).format(value);
|
||||
return `${label}: ${formattedValue}`;
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
display: true,
|
||||
grid: {
|
||||
display: false,
|
||||
drawBorder: false
|
||||
drawBorder: false,
|
||||
},
|
||||
ticks: {
|
||||
color: 'rgba(107, 114, 128, 0.7)',
|
||||
color: "rgba(107, 114, 128, 0.7)",
|
||||
font: {
|
||||
size: 10,
|
||||
family: 'Inter, -apple-system, BlinkMacSystemFont, sans-serif'
|
||||
family: "Inter, -apple-system, BlinkMacSystemFont, sans-serif",
|
||||
},
|
||||
maxRotation: 45,
|
||||
minRotation: 45,
|
||||
maxTicksLimit: 6
|
||||
maxTicksLimit: 6,
|
||||
},
|
||||
border: {
|
||||
display: false
|
||||
}
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
y: {
|
||||
display: true,
|
||||
min: yMin,
|
||||
max: yMax,
|
||||
grid: {
|
||||
color: 'rgba(107, 114, 128, 0.1)',
|
||||
drawBorder: false
|
||||
color: "rgba(107, 114, 128, 0.1)",
|
||||
drawBorder: false,
|
||||
},
|
||||
ticks: {
|
||||
color: '#ef4444',
|
||||
color: "#ef4444",
|
||||
font: {
|
||||
size: 11,
|
||||
family: 'Inter, -apple-system, BlinkMacSystemFont, sans-serif'
|
||||
family: "Inter, -apple-system, BlinkMacSystemFont, sans-serif",
|
||||
},
|
||||
maxTicksLimit: 3,
|
||||
callback: function(value) {
|
||||
callback: function (value) {
|
||||
if (value >= 1000000) {
|
||||
return (value / 1000000).toFixed(1) + 'M'
|
||||
return (value / 1000000).toFixed(1) + "M";
|
||||
} else if (value >= 1000) {
|
||||
return (value / 1000).toFixed(0) + 'k'
|
||||
return (value / 1000).toFixed(0) + "k";
|
||||
}
|
||||
return value.toFixed(0)
|
||||
}
|
||||
return value.toFixed(0);
|
||||
},
|
||||
},
|
||||
border: {
|
||||
display: false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
// Watch for data changes
|
||||
watch(() => [
|
||||
props.inflowsSparkline,
|
||||
props.outflowsSparkline,
|
||||
props.sparklineLabels,
|
||||
props.inflowsPreviousSparkline,
|
||||
props.outflowsPreviousSparkline,
|
||||
props.previousSparklineLabels
|
||||
], async () => {
|
||||
await Promise.all([
|
||||
initializeInflowsChart(),
|
||||
initializeOutflowsChart()
|
||||
])
|
||||
}, { deep: true })
|
||||
watch(
|
||||
() => [
|
||||
props.inflowsSparkline,
|
||||
props.outflowsSparkline,
|
||||
props.sparklineLabels,
|
||||
props.inflowsPreviousSparkline,
|
||||
props.outflowsPreviousSparkline,
|
||||
props.previousSparklineLabels,
|
||||
],
|
||||
async () => {
|
||||
await Promise.all([initializeInflowsChart(), initializeOutflowsChart()]);
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
|
||||
// Lifecycle hooks
|
||||
onMounted(async () => {
|
||||
await Promise.all([
|
||||
initializeInflowsChart(),
|
||||
initializeOutflowsChart()
|
||||
])
|
||||
})
|
||||
await Promise.all([initializeInflowsChart(), initializeOutflowsChart()]);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (inflowsChartInstance) {
|
||||
inflowsChartInstance.destroy()
|
||||
inflowsChartInstance = null
|
||||
inflowsChartInstance.destroy();
|
||||
inflowsChartInstance = null;
|
||||
}
|
||||
if (outflowsChartInstance) {
|
||||
outflowsChartInstance.destroy()
|
||||
outflowsChartInstance = null
|
||||
outflowsChartInstance.destroy();
|
||||
outflowsChartInstance = null;
|
||||
}
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@@ -7,7 +7,11 @@
|
||||
{{ formatCurrency(total) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="value-trend trend-indicator" :class="getTrendClass(trend)" v-if="trend">
|
||||
<div
|
||||
class="value-trend trend-indicator"
|
||||
:class="getTrendClass(trend)"
|
||||
v-if="trend"
|
||||
>
|
||||
<span class="trend-icon">{{ getTrendIcon(trend) }}</span>
|
||||
<span class="trend-value">{{ Math.round(Math.abs(trend.value)) }}%</span>
|
||||
</div>
|
||||
@@ -24,22 +28,33 @@
|
||||
<!-- În termen -->
|
||||
<div class="breakdown-item">
|
||||
<span class="breakdown-label">În termen</span>
|
||||
<span class="breakdown-value">{{ formatCurrency(breakdown.in_termen?.total || 0) }}</span>
|
||||
<span class="breakdown-value">{{
|
||||
formatCurrency(breakdown.in_termen?.total || 0)
|
||||
}}</span>
|
||||
</div>
|
||||
|
||||
<!-- Restant cu sub-perioade -->
|
||||
<div class="breakdown-group">
|
||||
<div class="breakdown-header" @click="toggleRestantExpanded">
|
||||
<div class="breakdown-header-left">
|
||||
<i class="pi pi-chevron-right breakdown-toggle" :class="{ expanded: isRestantExpanded }"></i>
|
||||
<i
|
||||
class="pi pi-chevron-right breakdown-toggle"
|
||||
:class="{ expanded: isRestantExpanded }"
|
||||
></i>
|
||||
<span class="breakdown-label">Restant</span>
|
||||
</div>
|
||||
<span class="breakdown-value">{{ formatCurrency(breakdown.restant?.total || 0) }}</span>
|
||||
<span class="breakdown-value">{{
|
||||
formatCurrency(breakdown.restant?.total || 0)
|
||||
}}</span>
|
||||
</div>
|
||||
|
||||
<!-- Perioade restante -->
|
||||
<div v-show="isRestantExpanded" class="breakdown-subitems slide-down">
|
||||
<div class="breakdown-subitem" v-for="(value, key) in breakdown.restant?.perioade" :key="key">
|
||||
<div
|
||||
class="breakdown-subitem"
|
||||
v-for="(value, key) in breakdown.restant?.perioade"
|
||||
:key="key"
|
||||
>
|
||||
<span class="breakdown-sublabel">{{ formatPeriodLabel(key) }}</span>
|
||||
<span class="breakdown-subvalue">{{ formatCurrency(value) }}</span>
|
||||
</div>
|
||||
@@ -50,316 +65,342 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, watch, onMounted, onBeforeUnmount, nextTick } from 'vue'
|
||||
import { Chart, registerables } from 'chart.js'
|
||||
import {
|
||||
ref,
|
||||
computed,
|
||||
watch,
|
||||
onMounted,
|
||||
onBeforeUnmount,
|
||||
nextTick,
|
||||
} from "vue";
|
||||
import { Chart, registerables } from "chart.js";
|
||||
|
||||
Chart.register(...registerables)
|
||||
Chart.register(...registerables);
|
||||
|
||||
const props = defineProps({
|
||||
total: {
|
||||
type: Number,
|
||||
required: true
|
||||
required: true,
|
||||
},
|
||||
trend: {
|
||||
type: Object,
|
||||
default: null
|
||||
default: null,
|
||||
},
|
||||
sparklineData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
default: () => [],
|
||||
},
|
||||
previousSparklineData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
default: () => [],
|
||||
},
|
||||
sparklineLabels: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
default: () => [],
|
||||
},
|
||||
previousSparklineLabels: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
default: () => [],
|
||||
},
|
||||
breakdown: {
|
||||
type: Object,
|
||||
default: null
|
||||
}
|
||||
})
|
||||
default: null,
|
||||
},
|
||||
});
|
||||
|
||||
// Refs
|
||||
const chartCanvas = ref(null)
|
||||
let chartInstance = null
|
||||
const isRestantExpanded = ref(false)
|
||||
const chartCanvas = ref(null);
|
||||
let chartInstance = null;
|
||||
const isRestantExpanded = ref(false);
|
||||
|
||||
// Toggle functions
|
||||
const toggleRestantExpanded = () => {
|
||||
isRestantExpanded.value = !isRestantExpanded.value
|
||||
}
|
||||
isRestantExpanded.value = !isRestantExpanded.value;
|
||||
};
|
||||
|
||||
// Format currency
|
||||
const formatCurrency = (amount) => {
|
||||
if (!amount && amount !== 0) return '0 RON'
|
||||
return new Intl.NumberFormat('ro-RO', {
|
||||
style: 'currency',
|
||||
currency: 'RON',
|
||||
if (!amount && amount !== 0) return "0 RON";
|
||||
return new Intl.NumberFormat("ro-RO", {
|
||||
style: "currency",
|
||||
currency: "RON",
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 0
|
||||
}).format(Math.abs(amount))
|
||||
}
|
||||
maximumFractionDigits: 0,
|
||||
}).format(Math.abs(amount));
|
||||
};
|
||||
|
||||
// Format period label
|
||||
const formatPeriodLabel = (key) => {
|
||||
const labelMap = {
|
||||
'7_zile': '7 zile',
|
||||
'14_zile': '14 zile',
|
||||
'30_zile': '30 zile',
|
||||
'60_zile': '60 zile',
|
||||
'90_zile': '90 zile',
|
||||
'peste_90_zile': 'Peste 90 zile'
|
||||
}
|
||||
return labelMap[key] || key
|
||||
}
|
||||
"7_zile": "7 zile",
|
||||
"14_zile": "14 zile",
|
||||
"30_zile": "30 zile",
|
||||
"60_zile": "60 zile",
|
||||
"90_zile": "90 zile",
|
||||
peste_90_zile: "Peste 90 zile",
|
||||
};
|
||||
return labelMap[key] || key;
|
||||
};
|
||||
|
||||
// Balance class
|
||||
const getBalanceClass = (amount) => {
|
||||
if (!amount && amount !== 0) return 'neutral'
|
||||
const numAmount = typeof amount === 'string' ? parseFloat(amount) : amount
|
||||
return numAmount > 0 ? 'positive' : numAmount < 0 ? 'negative' : 'neutral'
|
||||
}
|
||||
if (!amount && amount !== 0) return "neutral";
|
||||
const numAmount = typeof amount === "string" ? parseFloat(amount) : amount;
|
||||
return numAmount > 0 ? "positive" : numAmount < 0 ? "negative" : "neutral";
|
||||
};
|
||||
|
||||
// Trend class
|
||||
const getTrendClass = (trend) => {
|
||||
if (!trend) return ''
|
||||
if (!trend) return "";
|
||||
return {
|
||||
'trend-up': trend.direction === 'up',
|
||||
'trend-down': trend.direction === 'down',
|
||||
'trend-neutral': trend.direction === 'neutral'
|
||||
}
|
||||
}
|
||||
"trend-up": trend.direction === "up",
|
||||
"trend-down": trend.direction === "down",
|
||||
"trend-neutral": trend.direction === "neutral",
|
||||
};
|
||||
};
|
||||
|
||||
// Trend icon
|
||||
const getTrendIcon = (trend) => {
|
||||
if (!trend) return ''
|
||||
if (!trend) return "";
|
||||
switch (trend.direction) {
|
||||
case 'up': return '▲'
|
||||
case 'down': return '▼'
|
||||
case 'neutral': return '▶'
|
||||
default: return ''
|
||||
case "up":
|
||||
return "▲";
|
||||
case "down":
|
||||
return "▼";
|
||||
case "neutral":
|
||||
return "▶";
|
||||
default:
|
||||
return "";
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Check if sparkline data exists
|
||||
const hasSparklineData = computed(() => {
|
||||
return props.sparklineData && props.sparklineData.length > 0
|
||||
})
|
||||
return props.sparklineData && props.sparklineData.length > 0;
|
||||
});
|
||||
|
||||
// Initialize chart
|
||||
const initializeChart = async () => {
|
||||
if (!chartCanvas.value || !hasSparklineData.value) {
|
||||
return
|
||||
return;
|
||||
}
|
||||
|
||||
// Destroy existing chart
|
||||
if (chartInstance) {
|
||||
chartInstance.destroy()
|
||||
chartInstance = null
|
||||
chartInstance.destroy();
|
||||
chartInstance = null;
|
||||
}
|
||||
|
||||
await nextTick()
|
||||
await nextTick();
|
||||
|
||||
const ctx = chartCanvas.value.getContext('2d')
|
||||
const ctx = chartCanvas.value.getContext("2d");
|
||||
|
||||
// Generate labels
|
||||
const labels = props.sparklineLabels.length > 0
|
||||
? props.sparklineLabels
|
||||
: props.sparklineData.map((_, i) => `L${i + 1}`)
|
||||
const labels =
|
||||
props.sparklineLabels.length > 0
|
||||
? props.sparklineLabels
|
||||
: props.sparklineData.map((_, i) => `L${i + 1}`);
|
||||
|
||||
// Calculate limits including both datasets
|
||||
const allDataPoints = [...props.sparklineData]
|
||||
const allDataPoints = [...props.sparklineData];
|
||||
if (props.previousSparklineData && props.previousSparklineData.length > 0) {
|
||||
allDataPoints.push(...props.previousSparklineData)
|
||||
allDataPoints.push(...props.previousSparklineData);
|
||||
}
|
||||
const dataMin = Math.min(...allDataPoints)
|
||||
const dataMax = Math.max(...allDataPoints)
|
||||
const dataRange = dataMax - dataMin
|
||||
const dataMean = allDataPoints.reduce((sum, val) => sum + val, 0) / allDataPoints.length
|
||||
const dataMin = Math.min(...allDataPoints);
|
||||
const dataMax = Math.max(...allDataPoints);
|
||||
const dataRange = dataMax - dataMin;
|
||||
const dataMean =
|
||||
allDataPoints.reduce((sum, val) => sum + val, 0) / allDataPoints.length;
|
||||
|
||||
// CORECT: Forțăm range minim SIMETRIC, apoi adăugăm padding
|
||||
const minVisibleRange = dataMean * 0.25 // 25% din medie = range minim vizibil
|
||||
const center = (dataMin + dataMax) / 2
|
||||
const targetRange = Math.max(dataRange, minVisibleRange)
|
||||
const minVisibleRange = dataMean * 0.25; // 25% din medie = range minim vizibil
|
||||
const center = (dataMin + dataMax) / 2;
|
||||
const targetRange = Math.max(dataRange, minVisibleRange);
|
||||
|
||||
// Calculează limite simetric față de centru
|
||||
let calculatedMin = center - targetRange / 2
|
||||
let calculatedMax = center + targetRange / 2
|
||||
let calculatedMin = center - targetRange / 2;
|
||||
let calculatedMax = center + targetRange / 2;
|
||||
|
||||
// Adaugă padding PESTE range-ul asigurat (nu înăuntru!)
|
||||
const paddingAmount = targetRange * 0.10 // 10% padding suplimentar
|
||||
const paddingAmount = targetRange * 0.1; // 10% padding suplimentar
|
||||
|
||||
// Aplică limitele finale (nu permite negative dacă toate datele sunt pozitive)
|
||||
const allPositive = dataMin >= 0
|
||||
const yMin = allPositive ? Math.max(0, calculatedMin - paddingAmount) : calculatedMin - paddingAmount
|
||||
const yMax = calculatedMax + paddingAmount
|
||||
const allPositive = dataMin >= 0;
|
||||
const yMin = allPositive
|
||||
? Math.max(0, calculatedMin - paddingAmount)
|
||||
: calculatedMin - paddingAmount;
|
||||
const yMax = calculatedMax + paddingAmount;
|
||||
|
||||
// Prepare datasets
|
||||
const datasets = [{
|
||||
label: 'Clienți (curent)',
|
||||
data: props.sparklineData,
|
||||
borderColor: '#10b981',
|
||||
backgroundColor: 'rgba(16, 185, 129, 0.1)',
|
||||
borderWidth: 2,
|
||||
fill: true,
|
||||
tension: 0.4,
|
||||
pointRadius: 0,
|
||||
pointHoverRadius: 4,
|
||||
pointHoverBackgroundColor: '#10b981',
|
||||
pointHoverBorderColor: '#ffffff',
|
||||
pointHoverBorderWidth: 2
|
||||
}]
|
||||
const datasets = [
|
||||
{
|
||||
label: "Clienți (curent)",
|
||||
data: props.sparklineData,
|
||||
borderColor: "#10b981",
|
||||
backgroundColor: "rgba(16, 185, 129, 0.1)",
|
||||
borderWidth: 2,
|
||||
fill: true,
|
||||
tension: 0.4,
|
||||
pointRadius: 0,
|
||||
pointHoverRadius: 4,
|
||||
pointHoverBackgroundColor: "#10b981",
|
||||
pointHoverBorderColor: "#ffffff",
|
||||
pointHoverBorderWidth: 2,
|
||||
},
|
||||
];
|
||||
|
||||
// Add previous year dataset if available
|
||||
if (props.previousSparklineData && props.previousSparklineData.length > 0) {
|
||||
datasets.push({
|
||||
label: 'Clienți (anul precedent)',
|
||||
label: "Clienți (anul precedent)",
|
||||
data: props.previousSparklineData,
|
||||
borderColor: 'rgba(16, 185, 129, 0.4)',
|
||||
backgroundColor: 'rgba(16, 185, 129, 0.05)',
|
||||
borderColor: "rgba(16, 185, 129, 0.4)",
|
||||
backgroundColor: "rgba(16, 185, 129, 0.05)",
|
||||
borderWidth: 2,
|
||||
borderDash: [5, 5],
|
||||
fill: false,
|
||||
tension: 0.4,
|
||||
pointRadius: 0,
|
||||
pointHoverRadius: 4,
|
||||
pointHoverBackgroundColor: 'rgba(16, 185, 129, 0.6)',
|
||||
pointHoverBorderColor: '#ffffff',
|
||||
pointHoverBorderWidth: 2
|
||||
})
|
||||
pointHoverBackgroundColor: "rgba(16, 185, 129, 0.6)",
|
||||
pointHoverBorderColor: "#ffffff",
|
||||
pointHoverBorderWidth: 2,
|
||||
});
|
||||
}
|
||||
|
||||
chartInstance = new Chart(ctx, {
|
||||
type: 'line',
|
||||
type: "line",
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: datasets
|
||||
datasets: datasets,
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
interaction: {
|
||||
intersect: false,
|
||||
mode: 'index'
|
||||
mode: "index",
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
align: 'end',
|
||||
position: "top",
|
||||
align: "end",
|
||||
labels: {
|
||||
boxWidth: 12,
|
||||
boxHeight: 12,
|
||||
padding: 8,
|
||||
font: {
|
||||
size: 10,
|
||||
family: 'Inter, -apple-system, BlinkMacSystemFont, sans-serif'
|
||||
family: "Inter, -apple-system, BlinkMacSystemFont, sans-serif",
|
||||
},
|
||||
color: 'rgba(107, 114, 128, 0.8)',
|
||||
usePointStyle: true
|
||||
}
|
||||
color: "rgba(107, 114, 128, 0.8)",
|
||||
usePointStyle: true,
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.8)',
|
||||
titleColor: '#ffffff',
|
||||
bodyColor: '#ffffff',
|
||||
borderColor: 'rgba(255, 255, 255, 0.2)',
|
||||
backgroundColor: "rgba(0, 0, 0, 0.8)",
|
||||
titleColor: "#ffffff",
|
||||
bodyColor: "#ffffff",
|
||||
borderColor: "rgba(255, 255, 255, 0.2)",
|
||||
borderWidth: 1,
|
||||
cornerRadius: 6,
|
||||
displayColors: true,
|
||||
callbacks: {
|
||||
title: (context) => context[0].label || '',
|
||||
title: (context) => context[0].label || "",
|
||||
label: (context) => {
|
||||
const value = context.parsed.y
|
||||
const label = context.dataset.label || ''
|
||||
const formattedValue = new Intl.NumberFormat('ro-RO', {
|
||||
style: 'currency',
|
||||
currency: 'RON',
|
||||
const value = context.parsed.y;
|
||||
const label = context.dataset.label || "";
|
||||
const formattedValue = new Intl.NumberFormat("ro-RO", {
|
||||
style: "currency",
|
||||
currency: "RON",
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 0
|
||||
}).format(value)
|
||||
return `${label}: ${formattedValue}`
|
||||
}
|
||||
}
|
||||
}
|
||||
maximumFractionDigits: 0,
|
||||
}).format(value);
|
||||
return `${label}: ${formattedValue}`;
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
display: true,
|
||||
grid: {
|
||||
display: false,
|
||||
drawBorder: false
|
||||
drawBorder: false,
|
||||
},
|
||||
ticks: {
|
||||
color: 'rgba(107, 114, 128, 0.7)',
|
||||
color: "rgba(107, 114, 128, 0.7)",
|
||||
font: {
|
||||
size: 10,
|
||||
family: 'Inter, -apple-system, BlinkMacSystemFont, sans-serif'
|
||||
family: "Inter, -apple-system, BlinkMacSystemFont, sans-serif",
|
||||
},
|
||||
maxRotation: 45,
|
||||
minRotation: 45,
|
||||
maxTicksLimit: 6
|
||||
maxTicksLimit: 6,
|
||||
},
|
||||
border: {
|
||||
display: false
|
||||
}
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
y: {
|
||||
display: true,
|
||||
min: yMin,
|
||||
max: yMax,
|
||||
grid: {
|
||||
color: 'rgba(107, 114, 128, 0.1)',
|
||||
drawBorder: false
|
||||
color: "rgba(107, 114, 128, 0.1)",
|
||||
drawBorder: false,
|
||||
},
|
||||
ticks: {
|
||||
color: '#10b981',
|
||||
color: "#10b981",
|
||||
font: {
|
||||
size: 11,
|
||||
family: 'Inter, -apple-system, BlinkMacSystemFont, sans-serif'
|
||||
family: "Inter, -apple-system, BlinkMacSystemFont, sans-serif",
|
||||
},
|
||||
maxTicksLimit: 3,
|
||||
callback: function(value) {
|
||||
callback: function (value) {
|
||||
if (value >= 1000000) {
|
||||
return (value / 1000000).toFixed(1) + 'M'
|
||||
return (value / 1000000).toFixed(1) + "M";
|
||||
} else if (value >= 1000) {
|
||||
return (value / 1000).toFixed(0) + 'k'
|
||||
return (value / 1000).toFixed(0) + "k";
|
||||
}
|
||||
return value.toFixed(0)
|
||||
}
|
||||
return value.toFixed(0);
|
||||
},
|
||||
},
|
||||
border: {
|
||||
display: false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
// Watch for data changes
|
||||
watch(() => [props.sparklineData, props.previousSparklineData, props.sparklineLabels, props.previousSparklineLabels], async () => {
|
||||
await initializeChart()
|
||||
}, { deep: true })
|
||||
watch(
|
||||
() => [
|
||||
props.sparklineData,
|
||||
props.previousSparklineData,
|
||||
props.sparklineLabels,
|
||||
props.previousSparklineLabels,
|
||||
],
|
||||
async () => {
|
||||
await initializeChart();
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
|
||||
// Lifecycle hooks
|
||||
onMounted(async () => {
|
||||
await initializeChart()
|
||||
})
|
||||
await initializeChart();
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (chartInstance) {
|
||||
chartInstance.destroy()
|
||||
chartInstance = null
|
||||
chartInstance.destroy();
|
||||
chartInstance = null;
|
||||
}
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@@ -14,9 +14,15 @@
|
||||
<div class="value-amount" :class="getBalanceClass(clientiTotal)">
|
||||
{{ formatCurrency(clientiTotal) }}
|
||||
</div>
|
||||
<div class="value-trend" :class="getTrendClass(clientiTrend)" v-if="clientiTrend">
|
||||
<div
|
||||
class="value-trend"
|
||||
:class="getTrendClass(clientiTrend)"
|
||||
v-if="clientiTrend"
|
||||
>
|
||||
<span class="trend-icon">{{ getTrendIcon(clientiTrend) }}</span>
|
||||
<span class="trend-value">{{ Math.round(Math.abs(clientiTrend.value)) }}%</span>
|
||||
<span class="trend-value"
|
||||
>{{ Math.round(Math.abs(clientiTrend.value)) }}%</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -29,9 +35,15 @@
|
||||
<div class="value-amount" :class="getBalanceClass(furnizoriTotal)">
|
||||
{{ formatCurrency(furnizoriTotal) }}
|
||||
</div>
|
||||
<div class="value-trend" :class="getTrendClass(furnizoriTrend)" v-if="furnizoriTrend">
|
||||
<div
|
||||
class="value-trend"
|
||||
:class="getTrendClass(furnizoriTrend)"
|
||||
v-if="furnizoriTrend"
|
||||
>
|
||||
<span class="trend-icon">{{ getTrendIcon(furnizoriTrend) }}</span>
|
||||
<span class="trend-value">{{ Math.round(Math.abs(furnizoriTrend.value)) }}%</span>
|
||||
<span class="trend-value"
|
||||
>{{ Math.round(Math.abs(furnizoriTrend.value)) }}%</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -61,10 +73,14 @@
|
||||
<div class="breakdown-group">
|
||||
<div class="breakdown-header" @click="toggleClientiExpanded">
|
||||
<div class="breakdown-header-left">
|
||||
<span class="collapse-icon">{{ isClientiExpanded ? '▼' : '▶' }}</span>
|
||||
<span class="collapse-icon">{{
|
||||
isClientiExpanded ? "▼" : "▶"
|
||||
}}</span>
|
||||
<span class="breakdown-label">Clienți - Detaliere</span>
|
||||
</div>
|
||||
<span class="breakdown-value">{{ formatCurrency(breakdown.clienti.total) }}</span>
|
||||
<span class="breakdown-value">{{
|
||||
formatCurrency(breakdown.clienti.total)
|
||||
}}</span>
|
||||
</div>
|
||||
|
||||
<!-- Clienți Sub-items -->
|
||||
@@ -72,22 +88,35 @@
|
||||
<!-- În termen -->
|
||||
<div class="breakdown-subitem">
|
||||
<span class="breakdown-sublabel">În termen</span>
|
||||
<span class="breakdown-subvalue">{{ formatCurrency(breakdown.clienti.in_termen.total) }}</span>
|
||||
<span class="breakdown-subvalue">{{
|
||||
formatCurrency(breakdown.clienti.in_termen.total)
|
||||
}}</span>
|
||||
</div>
|
||||
|
||||
<!-- Restant cu sub-perioade -->
|
||||
<div class="breakdown-subitem-group">
|
||||
<div class="breakdown-subitem-header" @click="toggleClientiRestantExpanded">
|
||||
<div
|
||||
class="breakdown-subitem-header"
|
||||
@click="toggleClientiRestantExpanded"
|
||||
>
|
||||
<div class="subitem-header-left">
|
||||
<span class="collapse-icon-small">{{ isClientiRestantExpanded ? '▼' : '▶' }}</span>
|
||||
<span class="collapse-icon-small">{{
|
||||
isClientiRestantExpanded ? "▼" : "▶"
|
||||
}}</span>
|
||||
<span class="breakdown-sublabel">Restant</span>
|
||||
</div>
|
||||
<span class="breakdown-subvalue">{{ formatCurrency(breakdown.clienti.restant.total) }}</span>
|
||||
<span class="breakdown-subvalue">{{
|
||||
formatCurrency(breakdown.clienti.restant.total)
|
||||
}}</span>
|
||||
</div>
|
||||
|
||||
<!-- Perioade restante -->
|
||||
<div v-show="isClientiRestantExpanded" class="breakdown-perioade">
|
||||
<div class="perioada-item" v-for="(value, key) in breakdown.clienti.restant.perioade" :key="key">
|
||||
<div
|
||||
class="perioada-item"
|
||||
v-for="(value, key) in breakdown.clienti.restant.perioade"
|
||||
:key="key"
|
||||
>
|
||||
<span class="perioada-label">{{ formatPeriodLabel(key) }}</span>
|
||||
<span class="perioada-value">{{ formatCurrency(value) }}</span>
|
||||
</div>
|
||||
@@ -100,10 +129,14 @@
|
||||
<div class="breakdown-group">
|
||||
<div class="breakdown-header" @click="toggleFurnizoriExpanded">
|
||||
<div class="breakdown-header-left">
|
||||
<span class="collapse-icon">{{ isFurnizoriExpanded ? '▼' : '▶' }}</span>
|
||||
<span class="collapse-icon">{{
|
||||
isFurnizoriExpanded ? "▼" : "▶"
|
||||
}}</span>
|
||||
<span class="breakdown-label">Furnizori - Detaliere</span>
|
||||
</div>
|
||||
<span class="breakdown-value">{{ formatCurrency(breakdown.furnizori.total) }}</span>
|
||||
<span class="breakdown-value">{{
|
||||
formatCurrency(breakdown.furnizori.total)
|
||||
}}</span>
|
||||
</div>
|
||||
|
||||
<!-- Furnizori Sub-items -->
|
||||
@@ -111,22 +144,35 @@
|
||||
<!-- În termen -->
|
||||
<div class="breakdown-subitem">
|
||||
<span class="breakdown-sublabel">În termen</span>
|
||||
<span class="breakdown-subvalue">{{ formatCurrency(breakdown.furnizori.in_termen.total) }}</span>
|
||||
<span class="breakdown-subvalue">{{
|
||||
formatCurrency(breakdown.furnizori.in_termen.total)
|
||||
}}</span>
|
||||
</div>
|
||||
|
||||
<!-- Restant cu sub-perioade -->
|
||||
<div class="breakdown-subitem-group">
|
||||
<div class="breakdown-subitem-header" @click="toggleFurnizoriRestantExpanded">
|
||||
<div
|
||||
class="breakdown-subitem-header"
|
||||
@click="toggleFurnizoriRestantExpanded"
|
||||
>
|
||||
<div class="subitem-header-left">
|
||||
<span class="collapse-icon-small">{{ isFurnizoriRestantExpanded ? '▼' : '▶' }}</span>
|
||||
<span class="collapse-icon-small">{{
|
||||
isFurnizoriRestantExpanded ? "▼" : "▶"
|
||||
}}</span>
|
||||
<span class="breakdown-sublabel">Restant</span>
|
||||
</div>
|
||||
<span class="breakdown-subvalue">{{ formatCurrency(breakdown.furnizori.restant.total) }}</span>
|
||||
<span class="breakdown-subvalue">{{
|
||||
formatCurrency(breakdown.furnizori.restant.total)
|
||||
}}</span>
|
||||
</div>
|
||||
|
||||
<!-- Perioade restante -->
|
||||
<div v-show="isFurnizoriRestantExpanded" class="breakdown-perioade">
|
||||
<div class="perioada-item" v-for="(value, key) in breakdown.furnizori.restant.perioade" :key="key">
|
||||
<div
|
||||
class="perioada-item"
|
||||
v-for="(value, key) in breakdown.furnizori.restant.perioade"
|
||||
:key="key"
|
||||
>
|
||||
<span class="perioada-label">{{ formatPeriodLabel(key) }}</span>
|
||||
<span class="perioada-value">{{ formatCurrency(value) }}</span>
|
||||
</div>
|
||||
@@ -139,428 +185,446 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, watch, onMounted, onBeforeUnmount, nextTick } from 'vue'
|
||||
import { Chart, registerables } from 'chart.js'
|
||||
import {
|
||||
ref,
|
||||
computed,
|
||||
watch,
|
||||
onMounted,
|
||||
onBeforeUnmount,
|
||||
nextTick,
|
||||
} from "vue";
|
||||
import { Chart, registerables } from "chart.js";
|
||||
|
||||
Chart.register(...registerables)
|
||||
Chart.register(...registerables);
|
||||
|
||||
const props = defineProps({
|
||||
clientiTotal: {
|
||||
type: Number,
|
||||
required: true
|
||||
required: true,
|
||||
},
|
||||
furnizoriTotal: {
|
||||
type: Number,
|
||||
required: true
|
||||
required: true,
|
||||
},
|
||||
clientiTrend: {
|
||||
type: Object,
|
||||
default: null
|
||||
default: null,
|
||||
},
|
||||
furnizoriTrend: {
|
||||
type: Object,
|
||||
default: null
|
||||
default: null,
|
||||
},
|
||||
clientiSparklineData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
default: () => [],
|
||||
},
|
||||
furnizoriSparklineData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
default: () => [],
|
||||
},
|
||||
sparklineLabels: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
default: () => [],
|
||||
},
|
||||
breakdown: {
|
||||
type: Object,
|
||||
default: null
|
||||
}
|
||||
})
|
||||
default: null,
|
||||
},
|
||||
});
|
||||
|
||||
// Refs pentru 2 canvas-uri separate
|
||||
const clientiCanvas = ref(null)
|
||||
const furnizoriCanvas = ref(null)
|
||||
let clientiChartInstance = null
|
||||
let furnizoriChartInstance = null
|
||||
const isClientiExpanded = ref(false)
|
||||
const isFurnizoriExpanded = ref(false)
|
||||
const isClientiRestantExpanded = ref(false)
|
||||
const isFurnizoriRestantExpanded = ref(false)
|
||||
const clientiCanvas = ref(null);
|
||||
const furnizoriCanvas = ref(null);
|
||||
let clientiChartInstance = null;
|
||||
let furnizoriChartInstance = null;
|
||||
const isClientiExpanded = ref(false);
|
||||
const isFurnizoriExpanded = ref(false);
|
||||
const isClientiRestantExpanded = ref(false);
|
||||
const isFurnizoriRestantExpanded = ref(false);
|
||||
|
||||
// Toggle functions
|
||||
const toggleClientiExpanded = () => {
|
||||
isClientiExpanded.value = !isClientiExpanded.value
|
||||
}
|
||||
isClientiExpanded.value = !isClientiExpanded.value;
|
||||
};
|
||||
|
||||
const toggleFurnizoriExpanded = () => {
|
||||
isFurnizoriExpanded.value = !isFurnizoriExpanded.value
|
||||
}
|
||||
isFurnizoriExpanded.value = !isFurnizoriExpanded.value;
|
||||
};
|
||||
|
||||
const toggleClientiRestantExpanded = () => {
|
||||
isClientiRestantExpanded.value = !isClientiRestantExpanded.value
|
||||
}
|
||||
isClientiRestantExpanded.value = !isClientiRestantExpanded.value;
|
||||
};
|
||||
|
||||
const toggleFurnizoriRestantExpanded = () => {
|
||||
isFurnizoriRestantExpanded.value = !isFurnizoriRestantExpanded.value
|
||||
}
|
||||
isFurnizoriRestantExpanded.value = !isFurnizoriRestantExpanded.value;
|
||||
};
|
||||
|
||||
// Format currency
|
||||
const formatCurrency = (amount) => {
|
||||
if (!amount && amount !== 0) return '0 RON'
|
||||
return new Intl.NumberFormat('ro-RO', {
|
||||
style: 'currency',
|
||||
currency: 'RON',
|
||||
if (!amount && amount !== 0) return "0 RON";
|
||||
return new Intl.NumberFormat("ro-RO", {
|
||||
style: "currency",
|
||||
currency: "RON",
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 0
|
||||
}).format(Math.abs(amount))
|
||||
}
|
||||
maximumFractionDigits: 0,
|
||||
}).format(Math.abs(amount));
|
||||
};
|
||||
|
||||
// Format period label
|
||||
const formatPeriodLabel = (key) => {
|
||||
const labelMap = {
|
||||
'7_zile': '7 zile',
|
||||
'14_zile': '14 zile',
|
||||
'30_zile': '30 zile',
|
||||
'60_zile': '60 zile',
|
||||
'90_zile': '90 zile',
|
||||
'peste_90_zile': 'Peste 90 zile'
|
||||
}
|
||||
return labelMap[key] || key
|
||||
}
|
||||
"7_zile": "7 zile",
|
||||
"14_zile": "14 zile",
|
||||
"30_zile": "30 zile",
|
||||
"60_zile": "60 zile",
|
||||
"90_zile": "90 zile",
|
||||
peste_90_zile: "Peste 90 zile",
|
||||
};
|
||||
return labelMap[key] || key;
|
||||
};
|
||||
|
||||
// Balance class
|
||||
const getBalanceClass = (amount) => {
|
||||
if (!amount && amount !== 0) return 'neutral'
|
||||
const numAmount = typeof amount === 'string' ? parseFloat(amount) : amount
|
||||
return numAmount > 0 ? 'positive' : numAmount < 0 ? 'negative' : 'neutral'
|
||||
}
|
||||
if (!amount && amount !== 0) return "neutral";
|
||||
const numAmount = typeof amount === "string" ? parseFloat(amount) : amount;
|
||||
return numAmount > 0 ? "positive" : numAmount < 0 ? "negative" : "neutral";
|
||||
};
|
||||
|
||||
// Trend class
|
||||
const getTrendClass = (trend) => {
|
||||
if (!trend) return ''
|
||||
if (!trend) return "";
|
||||
return {
|
||||
'trend-up': trend.direction === 'up',
|
||||
'trend-down': trend.direction === 'down',
|
||||
'trend-neutral': trend.direction === 'neutral'
|
||||
}
|
||||
}
|
||||
"trend-up": trend.direction === "up",
|
||||
"trend-down": trend.direction === "down",
|
||||
"trend-neutral": trend.direction === "neutral",
|
||||
};
|
||||
};
|
||||
|
||||
// Trend icon
|
||||
const getTrendIcon = (trend) => {
|
||||
if (!trend) return ''
|
||||
if (!trend) return "";
|
||||
switch (trend.direction) {
|
||||
case 'up': return '▲'
|
||||
case 'down': return '▼'
|
||||
case 'neutral': return '▶'
|
||||
default: return ''
|
||||
case "up":
|
||||
return "▲";
|
||||
case "down":
|
||||
return "▼";
|
||||
case "neutral":
|
||||
return "▶";
|
||||
default:
|
||||
return "";
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Check if sparkline data exists
|
||||
const hasSparklineData = computed(() => {
|
||||
return props.clientiSparklineData.length > 0 && props.furnizoriSparklineData.length > 0
|
||||
})
|
||||
return (
|
||||
props.clientiSparklineData.length > 0 &&
|
||||
props.furnizoriSparklineData.length > 0
|
||||
);
|
||||
});
|
||||
|
||||
// Initialize Clienți chart
|
||||
const initializeClientiChart = async () => {
|
||||
if (!clientiCanvas.value || props.clientiSparklineData.length === 0) {
|
||||
return
|
||||
return;
|
||||
}
|
||||
|
||||
// Destroy existing chart
|
||||
if (clientiChartInstance) {
|
||||
clientiChartInstance.destroy()
|
||||
clientiChartInstance = null
|
||||
clientiChartInstance.destroy();
|
||||
clientiChartInstance = null;
|
||||
}
|
||||
|
||||
await nextTick()
|
||||
await nextTick();
|
||||
|
||||
const ctx = clientiCanvas.value.getContext('2d')
|
||||
const ctx = clientiCanvas.value.getContext("2d");
|
||||
|
||||
// Generate labels
|
||||
const labels = props.sparklineLabels.length > 0
|
||||
? props.sparklineLabels
|
||||
: props.clientiSparklineData.map((_, i) => `L${i + 1}`)
|
||||
const labels =
|
||||
props.sparklineLabels.length > 0
|
||||
? props.sparklineLabels
|
||||
: props.clientiSparklineData.map((_, i) => `L${i + 1}`);
|
||||
|
||||
// Calculează limite pentru clienți
|
||||
const clientiMin = Math.min(...props.clientiSparklineData)
|
||||
const clientiMax = Math.max(...props.clientiSparklineData)
|
||||
const clientiRange = clientiMax - clientiMin
|
||||
const clientiPadding = clientiRange * 0.05
|
||||
const clientiMin = Math.min(...props.clientiSparklineData);
|
||||
const clientiMax = Math.max(...props.clientiSparklineData);
|
||||
const clientiRange = clientiMax - clientiMin;
|
||||
const clientiPadding = clientiRange * 0.05;
|
||||
|
||||
clientiChartInstance = new Chart(ctx, {
|
||||
type: 'line',
|
||||
type: "line",
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Clienți',
|
||||
label: "Clienți",
|
||||
data: props.clientiSparklineData,
|
||||
borderColor: '#10b981',
|
||||
backgroundColor: 'rgba(16, 185, 129, 0.1)',
|
||||
borderColor: "#10b981",
|
||||
backgroundColor: "rgba(16, 185, 129, 0.1)",
|
||||
borderWidth: 2,
|
||||
fill: true,
|
||||
tension: 0.4,
|
||||
pointRadius: 0, // Ascunde punctele pentru a economisi spațiu
|
||||
pointRadius: 0, // Ascunde punctele pentru a economisi spațiu
|
||||
pointHoverRadius: 4,
|
||||
pointHoverBackgroundColor: '#10b981',
|
||||
pointHoverBorderColor: '#ffffff',
|
||||
pointHoverBorderWidth: 2
|
||||
}
|
||||
]
|
||||
pointHoverBackgroundColor: "#10b981",
|
||||
pointHoverBorderColor: "#ffffff",
|
||||
pointHoverBorderWidth: 2,
|
||||
},
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
interaction: {
|
||||
intersect: false,
|
||||
mode: 'index'
|
||||
mode: "index",
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false // Ascunde legenda - e clar din label că e "Clienți"
|
||||
display: false, // Ascunde legenda - e clar din label că e "Clienți"
|
||||
},
|
||||
tooltip: {
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.8)',
|
||||
titleColor: '#ffffff',
|
||||
bodyColor: '#ffffff',
|
||||
borderColor: 'rgba(255, 255, 255, 0.2)',
|
||||
backgroundColor: "rgba(0, 0, 0, 0.8)",
|
||||
titleColor: "#ffffff",
|
||||
bodyColor: "#ffffff",
|
||||
borderColor: "rgba(255, 255, 255, 0.2)",
|
||||
borderWidth: 1,
|
||||
cornerRadius: 6,
|
||||
displayColors: false,
|
||||
callbacks: {
|
||||
title: (context) => context[0].label || '',
|
||||
title: (context) => context[0].label || "",
|
||||
label: (context) => {
|
||||
const value = context.parsed.y
|
||||
const formatted = new Intl.NumberFormat('ro-RO', {
|
||||
style: 'currency',
|
||||
currency: 'RON',
|
||||
const value = context.parsed.y;
|
||||
const formatted = new Intl.NumberFormat("ro-RO", {
|
||||
style: "currency",
|
||||
currency: "RON",
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 0
|
||||
}).format(value)
|
||||
return formatted
|
||||
}
|
||||
}
|
||||
}
|
||||
maximumFractionDigits: 0,
|
||||
}).format(value);
|
||||
return formatted;
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
display: true,
|
||||
grid: {
|
||||
display: false,
|
||||
drawBorder: false
|
||||
drawBorder: false,
|
||||
},
|
||||
ticks: {
|
||||
color: 'rgba(107, 114, 128, 0.7)',
|
||||
color: "rgba(107, 114, 128, 0.7)",
|
||||
font: {
|
||||
size: 10,
|
||||
family: 'Inter, -apple-system, BlinkMacSystemFont, sans-serif'
|
||||
family: "Inter, -apple-system, BlinkMacSystemFont, sans-serif",
|
||||
},
|
||||
maxRotation: 45,
|
||||
minRotation: 45,
|
||||
maxTicksLimit: 6
|
||||
maxTicksLimit: 6,
|
||||
},
|
||||
border: {
|
||||
display: false
|
||||
}
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
y: {
|
||||
display: true,
|
||||
min: clientiMin - clientiPadding,
|
||||
max: clientiMax + clientiPadding,
|
||||
grid: {
|
||||
color: 'rgba(107, 114, 128, 0.1)',
|
||||
drawBorder: false
|
||||
color: "rgba(107, 114, 128, 0.1)",
|
||||
drawBorder: false,
|
||||
},
|
||||
ticks: {
|
||||
color: '#10b981',
|
||||
color: "#10b981",
|
||||
font: {
|
||||
size: 11,
|
||||
family: 'Inter, -apple-system, BlinkMacSystemFont, sans-serif'
|
||||
family: "Inter, -apple-system, BlinkMacSystemFont, sans-serif",
|
||||
},
|
||||
maxTicksLimit: 3,
|
||||
callback: function(value) {
|
||||
callback: function (value) {
|
||||
if (value >= 1000000) {
|
||||
return (value / 1000000).toFixed(1) + 'M'
|
||||
return (value / 1000000).toFixed(1) + "M";
|
||||
} else if (value >= 1000) {
|
||||
return (value / 1000).toFixed(0) + 'k'
|
||||
return (value / 1000).toFixed(0) + "k";
|
||||
}
|
||||
return value.toFixed(0)
|
||||
}
|
||||
return value.toFixed(0);
|
||||
},
|
||||
},
|
||||
border: {
|
||||
display: false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
// Initialize Furnizori chart
|
||||
const initializeFurnizoriChart = async () => {
|
||||
if (!furnizoriCanvas.value || props.furnizoriSparklineData.length === 0) {
|
||||
return
|
||||
return;
|
||||
}
|
||||
|
||||
// Destroy existing chart
|
||||
if (furnizoriChartInstance) {
|
||||
furnizoriChartInstance.destroy()
|
||||
furnizoriChartInstance = null
|
||||
furnizoriChartInstance.destroy();
|
||||
furnizoriChartInstance = null;
|
||||
}
|
||||
|
||||
await nextTick()
|
||||
await nextTick();
|
||||
|
||||
const ctx = furnizoriCanvas.value.getContext('2d')
|
||||
const ctx = furnizoriCanvas.value.getContext("2d");
|
||||
|
||||
// Generate labels
|
||||
const labels = props.sparklineLabels.length > 0
|
||||
? props.sparklineLabels
|
||||
: props.furnizoriSparklineData.map((_, i) => `L${i + 1}`)
|
||||
const labels =
|
||||
props.sparklineLabels.length > 0
|
||||
? props.sparklineLabels
|
||||
: props.furnizoriSparklineData.map((_, i) => `L${i + 1}`);
|
||||
|
||||
// Calculează limite pentru furnizori
|
||||
const furnizoriMin = Math.min(...props.furnizoriSparklineData)
|
||||
const furnizoriMax = Math.max(...props.furnizoriSparklineData)
|
||||
const furnizoriRange = furnizoriMax - furnizoriMin
|
||||
const furnizoriPadding = furnizoriRange * 0.05
|
||||
const furnizoriMin = Math.min(...props.furnizoriSparklineData);
|
||||
const furnizoriMax = Math.max(...props.furnizoriSparklineData);
|
||||
const furnizoriRange = furnizoriMax - furnizoriMin;
|
||||
const furnizoriPadding = furnizoriRange * 0.05;
|
||||
|
||||
furnizoriChartInstance = new Chart(ctx, {
|
||||
type: 'line',
|
||||
type: "line",
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Furnizori',
|
||||
label: "Furnizori",
|
||||
data: props.furnizoriSparklineData,
|
||||
borderColor: '#ef4444',
|
||||
backgroundColor: 'rgba(239, 68, 68, 0.1)',
|
||||
borderColor: "#ef4444",
|
||||
backgroundColor: "rgba(239, 68, 68, 0.1)",
|
||||
borderWidth: 2,
|
||||
fill: true,
|
||||
tension: 0.4,
|
||||
pointRadius: 0,
|
||||
pointHoverRadius: 4,
|
||||
pointHoverBackgroundColor: '#ef4444',
|
||||
pointHoverBorderColor: '#ffffff',
|
||||
pointHoverBorderWidth: 2
|
||||
}
|
||||
]
|
||||
pointHoverBackgroundColor: "#ef4444",
|
||||
pointHoverBorderColor: "#ffffff",
|
||||
pointHoverBorderWidth: 2,
|
||||
},
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
interaction: {
|
||||
intersect: false,
|
||||
mode: 'index'
|
||||
mode: "index",
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false
|
||||
display: false,
|
||||
},
|
||||
tooltip: {
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.8)',
|
||||
titleColor: '#ffffff',
|
||||
bodyColor: '#ffffff',
|
||||
borderColor: 'rgba(255, 255, 255, 0.2)',
|
||||
backgroundColor: "rgba(0, 0, 0, 0.8)",
|
||||
titleColor: "#ffffff",
|
||||
bodyColor: "#ffffff",
|
||||
borderColor: "rgba(255, 255, 255, 0.2)",
|
||||
borderWidth: 1,
|
||||
cornerRadius: 6,
|
||||
displayColors: false,
|
||||
callbacks: {
|
||||
title: (context) => context[0].label || '',
|
||||
title: (context) => context[0].label || "",
|
||||
label: (context) => {
|
||||
const value = context.parsed.y
|
||||
const formatted = new Intl.NumberFormat('ro-RO', {
|
||||
style: 'currency',
|
||||
currency: 'RON',
|
||||
const value = context.parsed.y;
|
||||
const formatted = new Intl.NumberFormat("ro-RO", {
|
||||
style: "currency",
|
||||
currency: "RON",
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 0
|
||||
}).format(value)
|
||||
return formatted
|
||||
}
|
||||
}
|
||||
}
|
||||
maximumFractionDigits: 0,
|
||||
}).format(value);
|
||||
return formatted;
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
display: true,
|
||||
grid: {
|
||||
display: false,
|
||||
drawBorder: false
|
||||
drawBorder: false,
|
||||
},
|
||||
ticks: {
|
||||
color: 'rgba(107, 114, 128, 0.7)',
|
||||
color: "rgba(107, 114, 128, 0.7)",
|
||||
font: {
|
||||
size: 10,
|
||||
family: 'Inter, -apple-system, BlinkMacSystemFont, sans-serif'
|
||||
family: "Inter, -apple-system, BlinkMacSystemFont, sans-serif",
|
||||
},
|
||||
maxRotation: 45,
|
||||
minRotation: 45,
|
||||
maxTicksLimit: 6
|
||||
maxTicksLimit: 6,
|
||||
},
|
||||
border: {
|
||||
display: false
|
||||
}
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
y: {
|
||||
display: true,
|
||||
min: furnizoriMin - furnizoriPadding,
|
||||
max: furnizoriMax + furnizoriPadding,
|
||||
grid: {
|
||||
color: 'rgba(107, 114, 128, 0.1)',
|
||||
drawBorder: false
|
||||
color: "rgba(107, 114, 128, 0.1)",
|
||||
drawBorder: false,
|
||||
},
|
||||
ticks: {
|
||||
color: '#ef4444',
|
||||
color: "#ef4444",
|
||||
font: {
|
||||
size: 11,
|
||||
family: 'Inter, -apple-system, BlinkMacSystemFont, sans-serif'
|
||||
family: "Inter, -apple-system, BlinkMacSystemFont, sans-serif",
|
||||
},
|
||||
maxTicksLimit: 3,
|
||||
callback: function(value) {
|
||||
callback: function (value) {
|
||||
if (value >= 1000000) {
|
||||
return (value / 1000000).toFixed(1) + 'M'
|
||||
return (value / 1000000).toFixed(1) + "M";
|
||||
} else if (value >= 1000) {
|
||||
return (value / 1000).toFixed(0) + 'k'
|
||||
return (value / 1000).toFixed(0) + "k";
|
||||
}
|
||||
return value.toFixed(0)
|
||||
}
|
||||
return value.toFixed(0);
|
||||
},
|
||||
},
|
||||
border: {
|
||||
display: false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
// Watch for data changes
|
||||
watch(() => [props.clientiSparklineData, props.furnizoriSparklineData, props.sparklineLabels], async () => {
|
||||
await Promise.all([
|
||||
initializeClientiChart(),
|
||||
initializeFurnizoriChart()
|
||||
])
|
||||
}, { deep: true })
|
||||
watch(
|
||||
() => [
|
||||
props.clientiSparklineData,
|
||||
props.furnizoriSparklineData,
|
||||
props.sparklineLabels,
|
||||
],
|
||||
async () => {
|
||||
await Promise.all([initializeClientiChart(), initializeFurnizoriChart()]);
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
|
||||
// Lifecycle hooks
|
||||
onMounted(async () => {
|
||||
await Promise.all([
|
||||
initializeClientiChart(),
|
||||
initializeFurnizoriChart()
|
||||
])
|
||||
})
|
||||
await Promise.all([initializeClientiChart(), initializeFurnizoriChart()]);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (clientiChartInstance) {
|
||||
clientiChartInstance.destroy()
|
||||
clientiChartInstance = null
|
||||
clientiChartInstance.destroy();
|
||||
clientiChartInstance = null;
|
||||
}
|
||||
if (furnizoriChartInstance) {
|
||||
furnizoriChartInstance.destroy()
|
||||
furnizoriChartInstance = null
|
||||
furnizoriChartInstance.destroy();
|
||||
furnizoriChartInstance = null;
|
||||
}
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@@ -709,16 +773,16 @@ onBeforeUnmount(() => {
|
||||
|
||||
/* Culori distinctive pentru label-uri */
|
||||
.sparkline-wrapper:first-child .sparkline-label {
|
||||
color: #10b981; /* Verde pentru Clienți */
|
||||
color: #10b981; /* Verde pentru Clienți */
|
||||
}
|
||||
|
||||
.sparkline-wrapper:last-child .sparkline-label {
|
||||
color: #ef4444; /* Roșu pentru Furnizori */
|
||||
color: #ef4444; /* Roșu pentru Furnizori */
|
||||
}
|
||||
|
||||
.sparkline-chart {
|
||||
width: 100%;
|
||||
height: 120px; /* Înălțime mărită pentru fiecare grafic individual */
|
||||
height: 120px; /* Înălțime mărită pentru fiecare grafic individual */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
@@ -7,7 +7,11 @@
|
||||
{{ formatCurrency(total) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="value-trend trend-indicator" :class="getTrendClass(trend)" v-if="trend">
|
||||
<div
|
||||
class="value-trend trend-indicator"
|
||||
:class="getTrendClass(trend)"
|
||||
v-if="trend"
|
||||
>
|
||||
<span class="trend-icon">{{ getTrendIcon(trend) }}</span>
|
||||
<span class="trend-value">{{ Math.round(Math.abs(trend.value)) }}%</span>
|
||||
</div>
|
||||
@@ -24,22 +28,33 @@
|
||||
<!-- În termen -->
|
||||
<div class="breakdown-item">
|
||||
<span class="breakdown-label">În termen</span>
|
||||
<span class="breakdown-value">{{ formatCurrency(breakdown.in_termen?.total || 0) }}</span>
|
||||
<span class="breakdown-value">{{
|
||||
formatCurrency(breakdown.in_termen?.total || 0)
|
||||
}}</span>
|
||||
</div>
|
||||
|
||||
<!-- Restant cu sub-perioade -->
|
||||
<div class="breakdown-group">
|
||||
<div class="breakdown-header" @click="toggleRestantExpanded">
|
||||
<div class="breakdown-header-left">
|
||||
<i class="pi pi-chevron-right breakdown-toggle" :class="{ expanded: isRestantExpanded }"></i>
|
||||
<i
|
||||
class="pi pi-chevron-right breakdown-toggle"
|
||||
:class="{ expanded: isRestantExpanded }"
|
||||
></i>
|
||||
<span class="breakdown-label">Restant</span>
|
||||
</div>
|
||||
<span class="breakdown-value">{{ formatCurrency(breakdown.restant?.total || 0) }}</span>
|
||||
<span class="breakdown-value">{{
|
||||
formatCurrency(breakdown.restant?.total || 0)
|
||||
}}</span>
|
||||
</div>
|
||||
|
||||
<!-- Perioade restante -->
|
||||
<div v-show="isRestantExpanded" class="breakdown-subitems slide-down">
|
||||
<div class="breakdown-subitem" v-for="(value, key) in breakdown.restant?.perioade" :key="key">
|
||||
<div
|
||||
class="breakdown-subitem"
|
||||
v-for="(value, key) in breakdown.restant?.perioade"
|
||||
:key="key"
|
||||
>
|
||||
<span class="breakdown-sublabel">{{ formatPeriodLabel(key) }}</span>
|
||||
<span class="breakdown-subvalue">{{ formatCurrency(value) }}</span>
|
||||
</div>
|
||||
@@ -50,316 +65,342 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, watch, onMounted, onBeforeUnmount, nextTick } from 'vue'
|
||||
import { Chart, registerables } from 'chart.js'
|
||||
import {
|
||||
ref,
|
||||
computed,
|
||||
watch,
|
||||
onMounted,
|
||||
onBeforeUnmount,
|
||||
nextTick,
|
||||
} from "vue";
|
||||
import { Chart, registerables } from "chart.js";
|
||||
|
||||
Chart.register(...registerables)
|
||||
Chart.register(...registerables);
|
||||
|
||||
const props = defineProps({
|
||||
total: {
|
||||
type: Number,
|
||||
required: true
|
||||
required: true,
|
||||
},
|
||||
trend: {
|
||||
type: Object,
|
||||
default: null
|
||||
default: null,
|
||||
},
|
||||
sparklineData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
default: () => [],
|
||||
},
|
||||
previousSparklineData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
default: () => [],
|
||||
},
|
||||
sparklineLabels: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
default: () => [],
|
||||
},
|
||||
previousSparklineLabels: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
default: () => [],
|
||||
},
|
||||
breakdown: {
|
||||
type: Object,
|
||||
default: null
|
||||
}
|
||||
})
|
||||
default: null,
|
||||
},
|
||||
});
|
||||
|
||||
// Refs
|
||||
const chartCanvas = ref(null)
|
||||
let chartInstance = null
|
||||
const isRestantExpanded = ref(false)
|
||||
const chartCanvas = ref(null);
|
||||
let chartInstance = null;
|
||||
const isRestantExpanded = ref(false);
|
||||
|
||||
// Toggle functions
|
||||
const toggleRestantExpanded = () => {
|
||||
isRestantExpanded.value = !isRestantExpanded.value
|
||||
}
|
||||
isRestantExpanded.value = !isRestantExpanded.value;
|
||||
};
|
||||
|
||||
// Format currency
|
||||
const formatCurrency = (amount) => {
|
||||
if (!amount && amount !== 0) return '0 RON'
|
||||
return new Intl.NumberFormat('ro-RO', {
|
||||
style: 'currency',
|
||||
currency: 'RON',
|
||||
if (!amount && amount !== 0) return "0 RON";
|
||||
return new Intl.NumberFormat("ro-RO", {
|
||||
style: "currency",
|
||||
currency: "RON",
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 0
|
||||
}).format(Math.abs(amount))
|
||||
}
|
||||
maximumFractionDigits: 0,
|
||||
}).format(Math.abs(amount));
|
||||
};
|
||||
|
||||
// Format period label
|
||||
const formatPeriodLabel = (key) => {
|
||||
const labelMap = {
|
||||
'7_zile': '7 zile',
|
||||
'14_zile': '14 zile',
|
||||
'30_zile': '30 zile',
|
||||
'60_zile': '60 zile',
|
||||
'90_zile': '90 zile',
|
||||
'peste_90_zile': 'Peste 90 zile'
|
||||
}
|
||||
return labelMap[key] || key
|
||||
}
|
||||
"7_zile": "7 zile",
|
||||
"14_zile": "14 zile",
|
||||
"30_zile": "30 zile",
|
||||
"60_zile": "60 zile",
|
||||
"90_zile": "90 zile",
|
||||
peste_90_zile: "Peste 90 zile",
|
||||
};
|
||||
return labelMap[key] || key;
|
||||
};
|
||||
|
||||
// Balance class
|
||||
const getBalanceClass = (amount) => {
|
||||
if (!amount && amount !== 0) return 'neutral'
|
||||
const numAmount = typeof amount === 'string' ? parseFloat(amount) : amount
|
||||
return numAmount > 0 ? 'positive' : numAmount < 0 ? 'negative' : 'neutral'
|
||||
}
|
||||
if (!amount && amount !== 0) return "neutral";
|
||||
const numAmount = typeof amount === "string" ? parseFloat(amount) : amount;
|
||||
return numAmount > 0 ? "positive" : numAmount < 0 ? "negative" : "neutral";
|
||||
};
|
||||
|
||||
// Trend class
|
||||
const getTrendClass = (trend) => {
|
||||
if (!trend) return ''
|
||||
if (!trend) return "";
|
||||
return {
|
||||
'trend-up': trend.direction === 'up',
|
||||
'trend-down': trend.direction === 'down',
|
||||
'trend-neutral': trend.direction === 'neutral'
|
||||
}
|
||||
}
|
||||
"trend-up": trend.direction === "up",
|
||||
"trend-down": trend.direction === "down",
|
||||
"trend-neutral": trend.direction === "neutral",
|
||||
};
|
||||
};
|
||||
|
||||
// Trend icon
|
||||
const getTrendIcon = (trend) => {
|
||||
if (!trend) return ''
|
||||
if (!trend) return "";
|
||||
switch (trend.direction) {
|
||||
case 'up': return '▲'
|
||||
case 'down': return '▼'
|
||||
case 'neutral': return '▶'
|
||||
default: return ''
|
||||
case "up":
|
||||
return "▲";
|
||||
case "down":
|
||||
return "▼";
|
||||
case "neutral":
|
||||
return "▶";
|
||||
default:
|
||||
return "";
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Check if sparkline data exists
|
||||
const hasSparklineData = computed(() => {
|
||||
return props.sparklineData && props.sparklineData.length > 0
|
||||
})
|
||||
return props.sparklineData && props.sparklineData.length > 0;
|
||||
});
|
||||
|
||||
// Initialize chart
|
||||
const initializeChart = async () => {
|
||||
if (!chartCanvas.value || !hasSparklineData.value) {
|
||||
return
|
||||
return;
|
||||
}
|
||||
|
||||
// Destroy existing chart
|
||||
if (chartInstance) {
|
||||
chartInstance.destroy()
|
||||
chartInstance = null
|
||||
chartInstance.destroy();
|
||||
chartInstance = null;
|
||||
}
|
||||
|
||||
await nextTick()
|
||||
await nextTick();
|
||||
|
||||
const ctx = chartCanvas.value.getContext('2d')
|
||||
const ctx = chartCanvas.value.getContext("2d");
|
||||
|
||||
// Generate labels
|
||||
const labels = props.sparklineLabels.length > 0
|
||||
? props.sparklineLabels
|
||||
: props.sparklineData.map((_, i) => `L${i + 1}`)
|
||||
const labels =
|
||||
props.sparklineLabels.length > 0
|
||||
? props.sparklineLabels
|
||||
: props.sparklineData.map((_, i) => `L${i + 1}`);
|
||||
|
||||
// Calculate limits including both datasets
|
||||
const allDataPoints = [...props.sparklineData]
|
||||
const allDataPoints = [...props.sparklineData];
|
||||
if (props.previousSparklineData && props.previousSparklineData.length > 0) {
|
||||
allDataPoints.push(...props.previousSparklineData)
|
||||
allDataPoints.push(...props.previousSparklineData);
|
||||
}
|
||||
const dataMin = Math.min(...allDataPoints)
|
||||
const dataMax = Math.max(...allDataPoints)
|
||||
const dataRange = dataMax - dataMin
|
||||
const dataMean = allDataPoints.reduce((sum, val) => sum + val, 0) / allDataPoints.length
|
||||
const dataMin = Math.min(...allDataPoints);
|
||||
const dataMax = Math.max(...allDataPoints);
|
||||
const dataRange = dataMax - dataMin;
|
||||
const dataMean =
|
||||
allDataPoints.reduce((sum, val) => sum + val, 0) / allDataPoints.length;
|
||||
|
||||
// CORECT: Forțăm range minim SIMETRIC, apoi adăugăm padding
|
||||
const minVisibleRange = dataMean * 0.25 // 25% din medie = range minim vizibil
|
||||
const center = (dataMin + dataMax) / 2
|
||||
const targetRange = Math.max(dataRange, minVisibleRange)
|
||||
const minVisibleRange = dataMean * 0.25; // 25% din medie = range minim vizibil
|
||||
const center = (dataMin + dataMax) / 2;
|
||||
const targetRange = Math.max(dataRange, minVisibleRange);
|
||||
|
||||
// Calculează limite simetric față de centru
|
||||
let calculatedMin = center - targetRange / 2
|
||||
let calculatedMax = center + targetRange / 2
|
||||
let calculatedMin = center - targetRange / 2;
|
||||
let calculatedMax = center + targetRange / 2;
|
||||
|
||||
// Adaugă padding PESTE range-ul asigurat (nu înăuntru!)
|
||||
const paddingAmount = targetRange * 0.10 // 10% padding suplimentar
|
||||
const paddingAmount = targetRange * 0.1; // 10% padding suplimentar
|
||||
|
||||
// Aplică limitele finale (nu permite negative dacă toate datele sunt pozitive)
|
||||
const allPositive = dataMin >= 0
|
||||
const yMin = allPositive ? Math.max(0, calculatedMin - paddingAmount) : calculatedMin - paddingAmount
|
||||
const yMax = calculatedMax + paddingAmount
|
||||
const allPositive = dataMin >= 0;
|
||||
const yMin = allPositive
|
||||
? Math.max(0, calculatedMin - paddingAmount)
|
||||
: calculatedMin - paddingAmount;
|
||||
const yMax = calculatedMax + paddingAmount;
|
||||
|
||||
// Prepare datasets
|
||||
const datasets = [{
|
||||
label: 'Furnizori (curent)',
|
||||
data: props.sparklineData,
|
||||
borderColor: '#ef4444',
|
||||
backgroundColor: 'rgba(239, 68, 68, 0.1)',
|
||||
borderWidth: 2,
|
||||
fill: true,
|
||||
tension: 0.4,
|
||||
pointRadius: 0,
|
||||
pointHoverRadius: 4,
|
||||
pointHoverBackgroundColor: '#ef4444',
|
||||
pointHoverBorderColor: '#ffffff',
|
||||
pointHoverBorderWidth: 2
|
||||
}]
|
||||
const datasets = [
|
||||
{
|
||||
label: "Furnizori (curent)",
|
||||
data: props.sparklineData,
|
||||
borderColor: "#ef4444",
|
||||
backgroundColor: "rgba(239, 68, 68, 0.1)",
|
||||
borderWidth: 2,
|
||||
fill: true,
|
||||
tension: 0.4,
|
||||
pointRadius: 0,
|
||||
pointHoverRadius: 4,
|
||||
pointHoverBackgroundColor: "#ef4444",
|
||||
pointHoverBorderColor: "#ffffff",
|
||||
pointHoverBorderWidth: 2,
|
||||
},
|
||||
];
|
||||
|
||||
// Add previous year dataset if available
|
||||
if (props.previousSparklineData && props.previousSparklineData.length > 0) {
|
||||
datasets.push({
|
||||
label: 'Furnizori (anul precedent)',
|
||||
label: "Furnizori (anul precedent)",
|
||||
data: props.previousSparklineData,
|
||||
borderColor: 'rgba(239, 68, 68, 0.4)',
|
||||
backgroundColor: 'rgba(239, 68, 68, 0.05)',
|
||||
borderColor: "rgba(239, 68, 68, 0.4)",
|
||||
backgroundColor: "rgba(239, 68, 68, 0.05)",
|
||||
borderWidth: 2,
|
||||
borderDash: [5, 5],
|
||||
fill: false,
|
||||
tension: 0.4,
|
||||
pointRadius: 0,
|
||||
pointHoverRadius: 4,
|
||||
pointHoverBackgroundColor: 'rgba(239, 68, 68, 0.6)',
|
||||
pointHoverBorderColor: '#ffffff',
|
||||
pointHoverBorderWidth: 2
|
||||
})
|
||||
pointHoverBackgroundColor: "rgba(239, 68, 68, 0.6)",
|
||||
pointHoverBorderColor: "#ffffff",
|
||||
pointHoverBorderWidth: 2,
|
||||
});
|
||||
}
|
||||
|
||||
chartInstance = new Chart(ctx, {
|
||||
type: 'line',
|
||||
type: "line",
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: datasets
|
||||
datasets: datasets,
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
interaction: {
|
||||
intersect: false,
|
||||
mode: 'index'
|
||||
mode: "index",
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
align: 'end',
|
||||
position: "top",
|
||||
align: "end",
|
||||
labels: {
|
||||
boxWidth: 12,
|
||||
boxHeight: 12,
|
||||
padding: 8,
|
||||
font: {
|
||||
size: 10,
|
||||
family: 'Inter, -apple-system, BlinkMacSystemFont, sans-serif'
|
||||
family: "Inter, -apple-system, BlinkMacSystemFont, sans-serif",
|
||||
},
|
||||
color: 'rgba(107, 114, 128, 0.8)',
|
||||
usePointStyle: true
|
||||
}
|
||||
color: "rgba(107, 114, 128, 0.8)",
|
||||
usePointStyle: true,
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.8)',
|
||||
titleColor: '#ffffff',
|
||||
bodyColor: '#ffffff',
|
||||
borderColor: 'rgba(255, 255, 255, 0.2)',
|
||||
backgroundColor: "rgba(0, 0, 0, 0.8)",
|
||||
titleColor: "#ffffff",
|
||||
bodyColor: "#ffffff",
|
||||
borderColor: "rgba(255, 255, 255, 0.2)",
|
||||
borderWidth: 1,
|
||||
cornerRadius: 6,
|
||||
displayColors: true,
|
||||
callbacks: {
|
||||
title: (context) => context[0].label || '',
|
||||
title: (context) => context[0].label || "",
|
||||
label: (context) => {
|
||||
const value = context.parsed.y
|
||||
const label = context.dataset.label || ''
|
||||
const formattedValue = new Intl.NumberFormat('ro-RO', {
|
||||
style: 'currency',
|
||||
currency: 'RON',
|
||||
const value = context.parsed.y;
|
||||
const label = context.dataset.label || "";
|
||||
const formattedValue = new Intl.NumberFormat("ro-RO", {
|
||||
style: "currency",
|
||||
currency: "RON",
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 0
|
||||
}).format(value)
|
||||
return `${label}: ${formattedValue}`
|
||||
}
|
||||
}
|
||||
}
|
||||
maximumFractionDigits: 0,
|
||||
}).format(value);
|
||||
return `${label}: ${formattedValue}`;
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
display: true,
|
||||
grid: {
|
||||
display: false,
|
||||
drawBorder: false
|
||||
drawBorder: false,
|
||||
},
|
||||
ticks: {
|
||||
color: 'rgba(107, 114, 128, 0.7)',
|
||||
color: "rgba(107, 114, 128, 0.7)",
|
||||
font: {
|
||||
size: 10,
|
||||
family: 'Inter, -apple-system, BlinkMacSystemFont, sans-serif'
|
||||
family: "Inter, -apple-system, BlinkMacSystemFont, sans-serif",
|
||||
},
|
||||
maxRotation: 45,
|
||||
minRotation: 45,
|
||||
maxTicksLimit: 6
|
||||
maxTicksLimit: 6,
|
||||
},
|
||||
border: {
|
||||
display: false
|
||||
}
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
y: {
|
||||
display: true,
|
||||
min: yMin,
|
||||
max: yMax,
|
||||
grid: {
|
||||
color: 'rgba(107, 114, 128, 0.1)',
|
||||
drawBorder: false
|
||||
color: "rgba(107, 114, 128, 0.1)",
|
||||
drawBorder: false,
|
||||
},
|
||||
ticks: {
|
||||
color: '#ef4444',
|
||||
color: "#ef4444",
|
||||
font: {
|
||||
size: 11,
|
||||
family: 'Inter, -apple-system, BlinkMacSystemFont, sans-serif'
|
||||
family: "Inter, -apple-system, BlinkMacSystemFont, sans-serif",
|
||||
},
|
||||
maxTicksLimit: 3,
|
||||
callback: function(value) {
|
||||
callback: function (value) {
|
||||
if (value >= 1000000) {
|
||||
return (value / 1000000).toFixed(1) + 'M'
|
||||
return (value / 1000000).toFixed(1) + "M";
|
||||
} else if (value >= 1000) {
|
||||
return (value / 1000).toFixed(0) + 'k'
|
||||
return (value / 1000).toFixed(0) + "k";
|
||||
}
|
||||
return value.toFixed(0)
|
||||
}
|
||||
return value.toFixed(0);
|
||||
},
|
||||
},
|
||||
border: {
|
||||
display: false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
// Watch for data changes
|
||||
watch(() => [props.sparklineData, props.previousSparklineData, props.sparklineLabels, props.previousSparklineLabels], async () => {
|
||||
await initializeChart()
|
||||
}, { deep: true })
|
||||
watch(
|
||||
() => [
|
||||
props.sparklineData,
|
||||
props.previousSparklineData,
|
||||
props.sparklineLabels,
|
||||
props.previousSparklineLabels,
|
||||
],
|
||||
async () => {
|
||||
await initializeChart();
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
|
||||
// Lifecycle hooks
|
||||
onMounted(async () => {
|
||||
await initializeChart()
|
||||
})
|
||||
await initializeChart();
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (chartInstance) {
|
||||
chartInstance.destroy()
|
||||
chartInstance = null
|
||||
chartInstance.destroy();
|
||||
chartInstance = null;
|
||||
}
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@@ -36,11 +36,14 @@
|
||||
<span class="total-amount">{{ formatCurrency(clientsTotal) }}</span>
|
||||
</h4>
|
||||
<div class="maturity-list">
|
||||
<div
|
||||
v-for="(client, index) in clientsData"
|
||||
<div
|
||||
v-for="(client, index) in clientsData"
|
||||
:key="`client-${index}`"
|
||||
class="maturity-item"
|
||||
:class="{ 'overdue': client.daysOverdue > 0, 'critical': client.daysOverdue > 30 }"
|
||||
:class="{
|
||||
overdue: client.daysOverdue > 0,
|
||||
critical: client.daysOverdue > 30,
|
||||
}"
|
||||
>
|
||||
<div class="item-info">
|
||||
<span class="client-name">{{ client.name }}</span>
|
||||
@@ -55,12 +58,16 @@
|
||||
</div>
|
||||
<div class="amount-bar">
|
||||
<div class="bar-container">
|
||||
<div
|
||||
<div
|
||||
class="bar-fill clients-bar"
|
||||
:style="{ width: getBarWidth(client.amount, maxClientAmount) + '%' }"
|
||||
:style="{
|
||||
width: getBarWidth(client.amount, maxClientAmount) + '%',
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
<span class="amount-value">{{ formatCurrency(client.amount) }}</span>
|
||||
<span class="amount-value">{{
|
||||
formatCurrency(client.amount)
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="clientsData.length === 0" class="empty-state">
|
||||
@@ -79,11 +86,14 @@
|
||||
<span class="total-amount">{{ formatCurrency(suppliersTotal) }}</span>
|
||||
</h4>
|
||||
<div class="maturity-list">
|
||||
<div
|
||||
v-for="(supplier, index) in suppliersData"
|
||||
<div
|
||||
v-for="(supplier, index) in suppliersData"
|
||||
:key="`supplier-${index}`"
|
||||
class="maturity-item"
|
||||
:class="{ 'overdue': supplier.daysOverdue > 0, 'critical': supplier.daysOverdue > 30 }"
|
||||
:class="{
|
||||
overdue: supplier.daysOverdue > 0,
|
||||
critical: supplier.daysOverdue > 30,
|
||||
}"
|
||||
>
|
||||
<div class="item-info">
|
||||
<span class="supplier-name">{{ supplier.name }}</span>
|
||||
@@ -98,12 +108,17 @@
|
||||
</div>
|
||||
<div class="amount-bar">
|
||||
<div class="bar-container">
|
||||
<div
|
||||
<div
|
||||
class="bar-fill suppliers-bar"
|
||||
:style="{ width: getBarWidth(supplier.amount, maxSupplierAmount) + '%' }"
|
||||
:style="{
|
||||
width:
|
||||
getBarWidth(supplier.amount, maxSupplierAmount) + '%',
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
<span class="amount-value">{{ formatCurrency(supplier.amount) }}</span>
|
||||
<span class="amount-value">{{
|
||||
formatCurrency(supplier.amount)
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="suppliersData.length === 0" class="empty-state">
|
||||
@@ -144,8 +159,16 @@
|
||||
<div class="last-updated">
|
||||
<span class="update-label">Actualizat:</span>
|
||||
<span class="update-time">{{ formatLastUpdated(lastUpdated) }}</span>
|
||||
<button @click="refreshData" class="refresh-btn" :disabled="isLoading" title="Reîmprospătează datele">
|
||||
<i class="pi pi-refresh refresh-icon" :class="{ 'spinning': isLoading }"></i>
|
||||
<button
|
||||
@click="refreshData"
|
||||
class="refresh-btn"
|
||||
:disabled="isLoading"
|
||||
title="Reîmprospătează datele"
|
||||
>
|
||||
<i
|
||||
class="pi pi-refresh refresh-icon"
|
||||
:class="{ spinning: isLoading }"
|
||||
></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -153,155 +176,166 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, watch } from 'vue'
|
||||
import { useDashboardStore } from '../../../stores/dashboard'
|
||||
import { ref, computed, onMounted, watch } from "vue";
|
||||
import { useDashboardStore } from "../../../stores/dashboard";
|
||||
|
||||
// Props
|
||||
const props = defineProps({
|
||||
companyId: {
|
||||
type: [Number, String],
|
||||
required: true
|
||||
}
|
||||
})
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
// Emits
|
||||
const emit = defineEmits(['periodChanged'])
|
||||
const emit = defineEmits(["periodChanged"]);
|
||||
|
||||
// Store
|
||||
const dashboardStore = useDashboardStore()
|
||||
const dashboardStore = useDashboardStore();
|
||||
|
||||
// Reactive state
|
||||
const selectedPeriod = ref('1m')
|
||||
const isLoading = ref(false)
|
||||
const error = ref(null)
|
||||
const lastUpdated = ref(null)
|
||||
const selectedPeriod = ref("1m");
|
||||
const isLoading = ref(false);
|
||||
const error = ref(null);
|
||||
const lastUpdated = ref(null);
|
||||
|
||||
// Mock data structure - in production this would come from API
|
||||
const maturityData = ref({
|
||||
clients: [],
|
||||
suppliers: [],
|
||||
balance: 0,
|
||||
recommendations: []
|
||||
})
|
||||
recommendations: [],
|
||||
});
|
||||
|
||||
// Romanian currency formatter
|
||||
const formatCurrency = (value) => {
|
||||
if (value === null || value === undefined) return '0,00 RON'
|
||||
return new Intl.NumberFormat('ro-RO', {
|
||||
style: 'currency',
|
||||
currency: 'RON',
|
||||
if (value === null || value === undefined) return "0,00 RON";
|
||||
return new Intl.NumberFormat("ro-RO", {
|
||||
style: "currency",
|
||||
currency: "RON",
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 0
|
||||
}).format(value)
|
||||
}
|
||||
maximumFractionDigits: 0,
|
||||
}).format(value);
|
||||
};
|
||||
|
||||
// Computed properties
|
||||
const clientsData = computed(() => maturityData.value.clients || [])
|
||||
const suppliersData = computed(() => maturityData.value.suppliers || [])
|
||||
const recommendations = computed(() => maturityData.value.recommendations || [])
|
||||
const clientsData = computed(() => maturityData.value.clients || []);
|
||||
const suppliersData = computed(() => maturityData.value.suppliers || []);
|
||||
const recommendations = computed(
|
||||
() => maturityData.value.recommendations || [],
|
||||
);
|
||||
|
||||
const clientsTotal = computed(() =>
|
||||
clientsData.value.reduce((sum, client) => sum + (client.amount || 0), 0)
|
||||
)
|
||||
const clientsTotal = computed(() =>
|
||||
clientsData.value.reduce((sum, client) => sum + (client.amount || 0), 0),
|
||||
);
|
||||
|
||||
const suppliersTotal = computed(() =>
|
||||
suppliersData.value.reduce((sum, supplier) => sum + (supplier.amount || 0), 0)
|
||||
)
|
||||
const suppliersTotal = computed(() =>
|
||||
suppliersData.value.reduce(
|
||||
(sum, supplier) => sum + (supplier.amount || 0),
|
||||
0,
|
||||
),
|
||||
);
|
||||
|
||||
const balance = computed(() => clientsTotal.value - suppliersTotal.value)
|
||||
const balance = computed(() => clientsTotal.value - suppliersTotal.value);
|
||||
|
||||
const balanceClass = computed(() =>
|
||||
balance.value < 0 ? 'deficit' : 'surplus'
|
||||
)
|
||||
const balanceClass = computed(() =>
|
||||
balance.value < 0 ? "deficit" : "surplus",
|
||||
);
|
||||
|
||||
const balanceIcon = computed(() =>
|
||||
balance.value < 0 ? '📉' : '📈'
|
||||
)
|
||||
const balanceIcon = computed(() => (balance.value < 0 ? "📉" : "📈"));
|
||||
|
||||
const balanceLabel = computed(() =>
|
||||
balance.value < 0 ? 'Deficit estimat:' : 'Surplus estimat:'
|
||||
)
|
||||
const balanceLabel = computed(() =>
|
||||
balance.value < 0 ? "Deficit estimat:" : "Surplus estimat:",
|
||||
);
|
||||
|
||||
const maxClientAmount = computed(() =>
|
||||
Math.max(...clientsData.value.map(c => c.amount || 0), 1)
|
||||
)
|
||||
const maxClientAmount = computed(() =>
|
||||
Math.max(...clientsData.value.map((c) => c.amount || 0), 1),
|
||||
);
|
||||
|
||||
const maxSupplierAmount = computed(() =>
|
||||
Math.max(...suppliersData.value.map(s => s.amount || 0), 1)
|
||||
)
|
||||
const maxSupplierAmount = computed(() =>
|
||||
Math.max(...suppliersData.value.map((s) => s.amount || 0), 1),
|
||||
);
|
||||
|
||||
// Methods
|
||||
const getBarWidth = (amount, maxAmount) => {
|
||||
return maxAmount > 0 ? Math.min((amount / maxAmount) * 100, 100) : 0
|
||||
}
|
||||
return maxAmount > 0 ? Math.min((amount / maxAmount) * 100, 100) : 0;
|
||||
};
|
||||
|
||||
const getPeriodLabel = (period) => {
|
||||
const labels = {
|
||||
'7d': 'Toate restanțele + următoarele 7 zile',
|
||||
'1m': 'Toate restanțele + următoarea lună',
|
||||
'3m': 'Toate restanțele + următoarele 3 luni',
|
||||
'6m': 'Toate restanțele + următoarele 6 luni',
|
||||
'12m': 'Toate restanțele + următorul an',
|
||||
'all': 'Toate soldurile (fără filtru)'
|
||||
}
|
||||
return labels[period] || period
|
||||
}
|
||||
"7d": "Toate restanțele + următoarele 7 zile",
|
||||
"1m": "Toate restanțele + următoarea lună",
|
||||
"3m": "Toate restanțele + următoarele 3 luni",
|
||||
"6m": "Toate restanțele + următoarele 6 luni",
|
||||
"12m": "Toate restanțele + următorul an",
|
||||
all: "Toate soldurile (fără filtru)",
|
||||
};
|
||||
return labels[period] || period;
|
||||
};
|
||||
|
||||
const formatLastUpdated = (timestamp) => {
|
||||
if (!timestamp) return 'Necunoscut'
|
||||
return new Date(timestamp).toLocaleString('ro-RO')
|
||||
}
|
||||
if (!timestamp) return "Necunoscut";
|
||||
return new Date(timestamp).toLocaleString("ro-RO");
|
||||
};
|
||||
|
||||
const handlePeriodChange = () => {
|
||||
emit('periodChanged', selectedPeriod.value)
|
||||
loadData()
|
||||
}
|
||||
emit("periodChanged", selectedPeriod.value);
|
||||
loadData();
|
||||
};
|
||||
|
||||
const refreshData = () => {
|
||||
loadData(true)
|
||||
}
|
||||
loadData(true);
|
||||
};
|
||||
|
||||
const loadData = async (forceRefresh = false) => {
|
||||
if (!props.companyId) {
|
||||
error.value = 'ID firmă necunoscut'
|
||||
return
|
||||
error.value = "ID firmă necunoscut";
|
||||
return;
|
||||
}
|
||||
|
||||
isLoading.value = true
|
||||
error.value = null
|
||||
isLoading.value = true;
|
||||
error.value = null;
|
||||
|
||||
try {
|
||||
// Apelăm API-ul real pentru a obține datele de scadențe
|
||||
const response = await dashboardStore.loadMaturityData(props.companyId, selectedPeriod.value)
|
||||
const response = await dashboardStore.loadMaturityData(
|
||||
props.companyId,
|
||||
selectedPeriod.value,
|
||||
);
|
||||
|
||||
if (response && response.success) {
|
||||
maturityData.value = response.data
|
||||
lastUpdated.value = new Date()
|
||||
maturityData.value = response.data;
|
||||
lastUpdated.value = new Date();
|
||||
} else {
|
||||
throw new Error(response?.error || 'Eroare la încărcarea datelor')
|
||||
throw new Error(response?.error || "Eroare la încărcarea datelor");
|
||||
}
|
||||
|
||||
} catch (err) {
|
||||
console.error('Failed to load maturity data:', err)
|
||||
error.value = err.message || 'Eroare la încărcarea datelor. Vă rugăm încercați din nou.'
|
||||
console.error("Failed to load maturity data:", err);
|
||||
error.value =
|
||||
err.message ||
|
||||
"Eroare la încărcarea datelor. Vă rugăm încercați din nou.";
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
isLoading.value = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Watchers
|
||||
watch(() => props.companyId, (newCompanyId) => {
|
||||
if (newCompanyId) {
|
||||
loadData()
|
||||
}
|
||||
}, { immediate: false })
|
||||
watch(
|
||||
() => props.companyId,
|
||||
(newCompanyId) => {
|
||||
if (newCompanyId) {
|
||||
loadData();
|
||||
}
|
||||
},
|
||||
{ immediate: false },
|
||||
);
|
||||
|
||||
// Lifecycle
|
||||
onMounted(() => {
|
||||
if (props.companyId) {
|
||||
loadData()
|
||||
loadData();
|
||||
}
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@@ -693,8 +727,12 @@ onMounted(() => {
|
||||
|
||||
/* Animations */
|
||||
@keyframes spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@@ -703,7 +741,7 @@ onMounted(() => {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--space-md, 1rem);
|
||||
}
|
||||
|
||||
|
||||
.comparison-divider {
|
||||
display: none;
|
||||
}
|
||||
@@ -715,42 +753,42 @@ onMounted(() => {
|
||||
gap: var(--space-sm, 0.5rem);
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
|
||||
.card-header h3 {
|
||||
text-align: center;
|
||||
font-size: var(--text-base, 1rem);
|
||||
}
|
||||
|
||||
|
||||
.period-selector {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.maturity-comparison {
|
||||
padding: var(--space-md, 0.75rem);
|
||||
}
|
||||
|
||||
|
||||
.balance-content {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
.recommendations {
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.card-footer {
|
||||
flex-direction: column;
|
||||
gap: var(--space-sm, 0.5rem);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
.side-title {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-xs, 0.25rem);
|
||||
}
|
||||
|
||||
|
||||
.total-amount {
|
||||
align-self: flex-end;
|
||||
}
|
||||
@@ -760,16 +798,16 @@ onMounted(() => {
|
||||
.maturity-card {
|
||||
margin: 0 -var(--space-sm, 0.5rem);
|
||||
}
|
||||
|
||||
|
||||
.card-header,
|
||||
.maturity-comparison,
|
||||
.balance-indicator,
|
||||
.card-footer {
|
||||
padding: var(--space-md, 0.75rem);
|
||||
}
|
||||
|
||||
|
||||
.maturity-list {
|
||||
max-height: 200px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -14,21 +14,26 @@
|
||||
<!-- Trend indicator -->
|
||||
<div class="trend-indicator" :class="trendClass" v-if="trend">
|
||||
<span class="trend-icon">{{ trendIcon }}</span>
|
||||
<span class="trend-value">{{ Math.round(Math.abs(trend.value), 2) }}%</span>
|
||||
<span class="trend-value"
|
||||
>{{ Math.round(Math.abs(trend.value), 2) }}%</span
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Sparkline mini-chart - STACKED BELOW (Best Practice) -->
|
||||
<div class="sparkline-container" v-if="sparklineData && sparklineData.length > 0">
|
||||
<canvas
|
||||
ref="sparklineCanvas"
|
||||
class="sparkline-canvas"
|
||||
></canvas>
|
||||
<div
|
||||
class="sparkline-container"
|
||||
v-if="sparklineData && sparklineData.length > 0"
|
||||
>
|
||||
<canvas ref="sparklineCanvas" class="sparkline-canvas"></canvas>
|
||||
</div>
|
||||
|
||||
<!-- Breakdown display section - Suport ierarhic -->
|
||||
<div class="metric-breakdown" v-if="breakdown">
|
||||
<div v-for="(value, key) in breakdown" :key="key" class="breakdown-section">
|
||||
|
||||
<div
|
||||
v-for="(value, key) in breakdown"
|
||||
:key="key"
|
||||
class="breakdown-section"
|
||||
>
|
||||
<!-- Valoare simplă (backward compatible) -->
|
||||
<div v-if="!isHierarchical(value)" class="breakdown-item">
|
||||
<span class="breakdown-label">{{ formatBreakdownLabel(key) }}:</span>
|
||||
@@ -39,342 +44,399 @@
|
||||
<div v-else class="breakdown-group">
|
||||
<div class="breakdown-header" @click="() => toggleExpanded(key)">
|
||||
<div class="breakdown-header-left">
|
||||
<i class="pi pi-chevron-right breakdown-toggle" :class="{ 'expanded': isItemExpanded(key) }"></i>
|
||||
<span class="breakdown-label">{{ formatBreakdownLabel(key) }}:</span>
|
||||
<i
|
||||
class="pi pi-chevron-right breakdown-toggle"
|
||||
:class="{ expanded: isItemExpanded(key) }"
|
||||
></i>
|
||||
<span class="breakdown-label"
|
||||
>{{ formatBreakdownLabel(key) }}:</span
|
||||
>
|
||||
</div>
|
||||
<span class="breakdown-value">{{ formatCurrency(value.total) }}</span>
|
||||
<span class="breakdown-value">{{
|
||||
formatCurrency(value.total)
|
||||
}}</span>
|
||||
</div>
|
||||
|
||||
<!-- Sub-items (collapsible) -->
|
||||
<div v-if="value.items && value.items.length > 0" v-show="isItemExpanded(key)" class="breakdown-subitems slide-down">
|
||||
<div v-for="(item, idx) in value.items" :key="idx" class="breakdown-subitem">
|
||||
<div
|
||||
v-if="value.items && value.items.length > 0"
|
||||
v-show="isItemExpanded(key)"
|
||||
class="breakdown-subitems slide-down"
|
||||
>
|
||||
<div
|
||||
v-for="(item, idx) in value.items"
|
||||
:key="idx"
|
||||
class="breakdown-subitem"
|
||||
>
|
||||
<span class="breakdown-sublabel">
|
||||
{{ item.nume }} <span v-if="item.cont" class="breakdown-cont">({{ item.cont }})</span>
|
||||
{{ item.nume }}
|
||||
<span v-if="item.cont" class="breakdown-cont"
|
||||
>({{ item.cont }})</span
|
||||
>
|
||||
</span>
|
||||
<span class="breakdown-subvalue">{{ formatCurrency(item.sold) }}</span>
|
||||
<span class="breakdown-subvalue">{{
|
||||
formatCurrency(item.sold)
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref, watch, onMounted, onBeforeUnmount, nextTick } from 'vue'
|
||||
import { Chart, registerables } from 'chart.js'
|
||||
import {
|
||||
computed,
|
||||
ref,
|
||||
watch,
|
||||
onMounted,
|
||||
onBeforeUnmount,
|
||||
nextTick,
|
||||
} from "vue";
|
||||
import { Chart, registerables } from "chart.js";
|
||||
|
||||
// Register Chart.js components
|
||||
Chart.register(...registerables)
|
||||
Chart.register(...registerables);
|
||||
|
||||
// Props definition with validation
|
||||
const props = defineProps({
|
||||
icon: {
|
||||
type: String,
|
||||
required: true,
|
||||
validator: (value) => value.length > 0
|
||||
validator: (value) => value.length > 0,
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
required: true,
|
||||
validator: (value) => value.length > 0
|
||||
validator: (value) => value.length > 0,
|
||||
},
|
||||
value: {
|
||||
type: Number,
|
||||
required: true
|
||||
required: true,
|
||||
},
|
||||
trend: {
|
||||
type: Object,
|
||||
default: null,
|
||||
validator: (value) => {
|
||||
if (value === null) return true
|
||||
return typeof value.value === 'number' &&
|
||||
['up', 'down', 'neutral'].includes(value.direction)
|
||||
}
|
||||
if (value === null) return true;
|
||||
return (
|
||||
typeof value.value === "number" &&
|
||||
["up", "down", "neutral"].includes(value.direction)
|
||||
);
|
||||
},
|
||||
},
|
||||
sparklineData: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
validator: (value) => {
|
||||
return value.every(item => typeof item === 'number')
|
||||
}
|
||||
return value.every((item) => typeof item === "number");
|
||||
},
|
||||
},
|
||||
sparklineLabels: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
default: () => [],
|
||||
},
|
||||
breakdown: {
|
||||
type: Object,
|
||||
required: false,
|
||||
default: null
|
||||
}
|
||||
})
|
||||
default: null,
|
||||
},
|
||||
});
|
||||
|
||||
// Refs
|
||||
const sparklineCanvas = ref(null)
|
||||
let chartInstance = null
|
||||
const expandedStates = ref({})
|
||||
const sparklineCanvas = ref(null);
|
||||
let chartInstance = null;
|
||||
const expandedStates = ref({});
|
||||
|
||||
// Toggle breakdown expansion for a specific key
|
||||
const toggleExpanded = (key) => {
|
||||
expandedStates.value[key] = !expandedStates.value[key]
|
||||
}
|
||||
expandedStates.value[key] = !expandedStates.value[key];
|
||||
};
|
||||
|
||||
// Check if a specific breakdown item is expanded
|
||||
const isItemExpanded = (key) => {
|
||||
return !!expandedStates.value[key]
|
||||
}
|
||||
return !!expandedStates.value[key];
|
||||
};
|
||||
|
||||
// Format currency value
|
||||
const formatCurrency = (amount) => {
|
||||
if (!amount && amount !== 0) return '0 RON'
|
||||
|
||||
return new Intl.NumberFormat('ro-RO', {
|
||||
style: 'currency',
|
||||
currency: 'RON',
|
||||
if (!amount && amount !== 0) return "0 RON";
|
||||
|
||||
return new Intl.NumberFormat("ro-RO", {
|
||||
style: "currency",
|
||||
currency: "RON",
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 0
|
||||
}).format(Math.abs(amount)).replace('RON', 'RON')
|
||||
}
|
||||
maximumFractionDigits: 0,
|
||||
})
|
||||
.format(Math.abs(amount))
|
||||
.replace("RON", "RON");
|
||||
};
|
||||
|
||||
// Format breakdown label
|
||||
const formatBreakdownLabel = (key) => {
|
||||
const labelMap = {
|
||||
'casa': 'Casă',
|
||||
'banca': 'Bancă',
|
||||
'clienti': 'Clienți',
|
||||
'furnizori': 'Furnizori',
|
||||
'clienti_in_termen': 'Clienți în termen',
|
||||
'clienti_restanti': 'Clienți restanți',
|
||||
'furnizori_termen': 'Furnizori în termen',
|
||||
'furnizori_scadent': 'Furnizori scadenți',
|
||||
'numerar': 'Numerar',
|
||||
'cont': 'Cont',
|
||||
'depozit': 'Depozit',
|
||||
'credit': 'Credit',
|
||||
'debit': 'Debit',
|
||||
'sold': 'Sold',
|
||||
'total': 'Total'
|
||||
}
|
||||
casa: "Casă",
|
||||
banca: "Bancă",
|
||||
clienti: "Clienți",
|
||||
furnizori: "Furnizori",
|
||||
clienti_in_termen: "Clienți în termen",
|
||||
clienti_restanti: "Clienți restanți",
|
||||
furnizori_termen: "Furnizori în termen",
|
||||
furnizori_scadent: "Furnizori scadenți",
|
||||
numerar: "Numerar",
|
||||
cont: "Cont",
|
||||
depozit: "Depozit",
|
||||
credit: "Credit",
|
||||
debit: "Debit",
|
||||
sold: "Sold",
|
||||
total: "Total",
|
||||
};
|
||||
|
||||
return labelMap[key.toLowerCase()] || key.charAt(0).toUpperCase() + key.slice(1)
|
||||
}
|
||||
return (
|
||||
labelMap[key.toLowerCase()] || key.charAt(0).toUpperCase() + key.slice(1)
|
||||
);
|
||||
};
|
||||
|
||||
// Check if value is hierarchical (has total and items)
|
||||
const isHierarchical = (value) => {
|
||||
return value !== null &&
|
||||
typeof value === 'object' &&
|
||||
'total' in value &&
|
||||
'items' in value
|
||||
}
|
||||
return (
|
||||
value !== null &&
|
||||
typeof value === "object" &&
|
||||
"total" in value &&
|
||||
"items" in value
|
||||
);
|
||||
};
|
||||
|
||||
// Computed properties for styling
|
||||
const iconClass = computed(() => {
|
||||
return `icon-${props.title.toLowerCase().replace(/\s+/g, '-')}`
|
||||
})
|
||||
return `icon-${props.title.toLowerCase().replace(/\s+/g, "-")}`;
|
||||
});
|
||||
|
||||
const valueClass = computed(() => {
|
||||
if (!props.value && props.value !== 0) return ''
|
||||
return props.value < 0 ? 'negative' : 'positive'
|
||||
})
|
||||
if (!props.value && props.value !== 0) return "";
|
||||
return props.value < 0 ? "negative" : "positive";
|
||||
});
|
||||
|
||||
const trendClass = computed(() => {
|
||||
if (!props.trend) return ''
|
||||
|
||||
if (!props.trend) return "";
|
||||
|
||||
return {
|
||||
'trend-up': props.trend.direction === 'up',
|
||||
'trend-down': props.trend.direction === 'down',
|
||||
'trend-neutral': props.trend.direction === 'neutral'
|
||||
}
|
||||
})
|
||||
"trend-up": props.trend.direction === "up",
|
||||
"trend-down": props.trend.direction === "down",
|
||||
"trend-neutral": props.trend.direction === "neutral",
|
||||
};
|
||||
});
|
||||
|
||||
const trendIcon = computed(() => {
|
||||
if (!props.trend) return ''
|
||||
|
||||
if (!props.trend) return "";
|
||||
|
||||
switch (props.trend.direction) {
|
||||
case 'up': return '▲'
|
||||
case 'down': return '▼'
|
||||
case 'neutral': return '▶'
|
||||
default: return ''
|
||||
case "up":
|
||||
return "▲";
|
||||
case "down":
|
||||
return "▼";
|
||||
case "neutral":
|
||||
return "▶";
|
||||
default:
|
||||
return "";
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
// Sparkline color based on trend
|
||||
const sparklineColor = computed(() => {
|
||||
if (!props.trend) {
|
||||
return '#3b82f6' // Primary blue
|
||||
return "#3b82f6"; // Primary blue
|
||||
}
|
||||
|
||||
switch (props.trend.direction) {
|
||||
case 'up':
|
||||
return '#10b981' // Success green
|
||||
case 'down':
|
||||
return '#ef4444' // Danger red
|
||||
case "up":
|
||||
return "#10b981"; // Success green
|
||||
case "down":
|
||||
return "#ef4444"; // Danger red
|
||||
default:
|
||||
return '#3b82f6' // Primary blue
|
||||
return "#3b82f6"; // Primary blue
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
// Initialize Chart.js sparkline
|
||||
const initializeSparkline = async () => {
|
||||
if (!sparklineCanvas.value || !props.sparklineData || props.sparklineData.length === 0) {
|
||||
return
|
||||
if (
|
||||
!sparklineCanvas.value ||
|
||||
!props.sparklineData ||
|
||||
props.sparklineData.length === 0
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Destroy existing chart instance
|
||||
if (chartInstance) {
|
||||
chartInstance.destroy()
|
||||
chartInstance = null
|
||||
chartInstance.destroy();
|
||||
chartInstance = null;
|
||||
}
|
||||
|
||||
await nextTick()
|
||||
await nextTick();
|
||||
|
||||
const ctx = sparklineCanvas.value.getContext('2d')
|
||||
const color = sparklineColor.value
|
||||
const ctx = sparklineCanvas.value.getContext("2d");
|
||||
const color = sparklineColor.value;
|
||||
|
||||
// Generate labels: use provided labels or generate generic ones
|
||||
const labels = props.sparklineLabels.length > 0
|
||||
? props.sparklineLabels
|
||||
: props.sparklineData.map((_, i) => `L${i + 1}`)
|
||||
const labels =
|
||||
props.sparklineLabels.length > 0
|
||||
? props.sparklineLabels
|
||||
: props.sparklineData.map((_, i) => `L${i + 1}`);
|
||||
|
||||
chartInstance = new Chart(ctx, {
|
||||
type: 'line',
|
||||
type: "line",
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [{
|
||||
data: props.sparklineData,
|
||||
borderColor: color,
|
||||
backgroundColor: `${color}20`, // 20 = 12.5% opacity in hex
|
||||
borderWidth: 2,
|
||||
fill: true,
|
||||
tension: 0.4,
|
||||
pointRadius: 0, // Hide points by default
|
||||
pointHoverRadius: 4,
|
||||
pointHoverBackgroundColor: color,
|
||||
pointHoverBorderColor: '#ffffff',
|
||||
pointHoverBorderWidth: 2
|
||||
}]
|
||||
datasets: [
|
||||
{
|
||||
data: props.sparklineData,
|
||||
borderColor: color,
|
||||
backgroundColor: `${color}20`, // 20 = 12.5% opacity in hex
|
||||
borderWidth: 2,
|
||||
fill: true,
|
||||
tension: 0.4,
|
||||
pointRadius: 0, // Hide points by default
|
||||
pointHoverRadius: 4,
|
||||
pointHoverBackgroundColor: color,
|
||||
pointHoverBorderColor: "#ffffff",
|
||||
pointHoverBorderWidth: 2,
|
||||
},
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
interaction: {
|
||||
intersect: false,
|
||||
mode: 'index'
|
||||
mode: "index",
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false
|
||||
display: false,
|
||||
},
|
||||
tooltip: {
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.8)',
|
||||
titleColor: '#ffffff',
|
||||
bodyColor: '#ffffff',
|
||||
borderColor: 'rgba(255, 255, 255, 0.2)',
|
||||
backgroundColor: "rgba(0, 0, 0, 0.8)",
|
||||
titleColor: "#ffffff",
|
||||
bodyColor: "#ffffff",
|
||||
borderColor: "rgba(255, 255, 255, 0.2)",
|
||||
borderWidth: 1,
|
||||
cornerRadius: 6,
|
||||
displayColors: false,
|
||||
callbacks: {
|
||||
title: (context) => {
|
||||
// Show period label in tooltip
|
||||
return context[0].label || ''
|
||||
return context[0].label || "";
|
||||
},
|
||||
label: (context) => {
|
||||
const value = context.parsed.y
|
||||
return new Intl.NumberFormat('ro-RO', {
|
||||
style: 'currency',
|
||||
currency: 'RON',
|
||||
const value = context.parsed.y;
|
||||
return new Intl.NumberFormat("ro-RO", {
|
||||
style: "currency",
|
||||
currency: "RON",
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 0
|
||||
}).format(value)
|
||||
}
|
||||
}
|
||||
}
|
||||
maximumFractionDigits: 0,
|
||||
}).format(value);
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
display: true,
|
||||
grid: {
|
||||
display: false,
|
||||
drawBorder: false
|
||||
drawBorder: false,
|
||||
},
|
||||
ticks: {
|
||||
color: 'rgba(107, 114, 128, 0.7)',
|
||||
color: "rgba(107, 114, 128, 0.7)",
|
||||
font: {
|
||||
size: 9,
|
||||
family: 'Inter, -apple-system, BlinkMacSystemFont, sans-serif'
|
||||
family: "Inter, -apple-system, BlinkMacSystemFont, sans-serif",
|
||||
},
|
||||
maxRotation: 45,
|
||||
minRotation: 45,
|
||||
maxTicksLimit: 6
|
||||
maxTicksLimit: 6,
|
||||
},
|
||||
border: {
|
||||
display: false
|
||||
}
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
y: {
|
||||
display: true,
|
||||
grid: {
|
||||
color: 'rgba(107, 114, 128, 0.1)',
|
||||
drawBorder: false
|
||||
color: "rgba(107, 114, 128, 0.1)",
|
||||
drawBorder: false,
|
||||
},
|
||||
ticks: {
|
||||
color: 'rgba(107, 114, 128, 0.7)',
|
||||
color: "rgba(107, 114, 128, 0.7)",
|
||||
font: {
|
||||
size: 9,
|
||||
family: 'Inter, -apple-system, BlinkMacSystemFont, sans-serif'
|
||||
family: "Inter, -apple-system, BlinkMacSystemFont, sans-serif",
|
||||
},
|
||||
maxTicksLimit: 4,
|
||||
callback: function(value) {
|
||||
callback: function (value) {
|
||||
// Format as compact currency
|
||||
if (value >= 1000000) {
|
||||
return (value / 1000000).toFixed(1) + 'M'
|
||||
return (value / 1000000).toFixed(1) + "M";
|
||||
} else if (value >= 1000) {
|
||||
return (value / 1000).toFixed(0) + 'k'
|
||||
return (value / 1000).toFixed(0) + "k";
|
||||
}
|
||||
return value.toFixed(0)
|
||||
}
|
||||
return value.toFixed(0);
|
||||
},
|
||||
},
|
||||
border: {
|
||||
display: false
|
||||
}
|
||||
}
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderCapStyle: 'round',
|
||||
borderJoinStyle: 'round'
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
borderCapStyle: "round",
|
||||
borderJoinStyle: "round",
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
// Watch for data changes
|
||||
watch(() => props.sparklineData, async () => {
|
||||
await initializeSparkline()
|
||||
}, { deep: true })
|
||||
watch(
|
||||
() => props.sparklineData,
|
||||
async () => {
|
||||
await initializeSparkline();
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
|
||||
watch(() => props.sparklineLabels, async () => {
|
||||
await initializeSparkline()
|
||||
}, { deep: true })
|
||||
watch(
|
||||
() => props.sparklineLabels,
|
||||
async () => {
|
||||
await initializeSparkline();
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
|
||||
watch(() => props.trend, async () => {
|
||||
await initializeSparkline()
|
||||
}, { deep: true })
|
||||
watch(
|
||||
() => props.trend,
|
||||
async () => {
|
||||
await initializeSparkline();
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
|
||||
// Lifecycle hooks
|
||||
onMounted(async () => {
|
||||
await initializeSparkline()
|
||||
})
|
||||
await initializeSparkline();
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (chartInstance) {
|
||||
chartInstance.destroy()
|
||||
chartInstance = null
|
||||
chartInstance.destroy();
|
||||
chartInstance = null;
|
||||
}
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@@ -452,4 +514,4 @@ onBeforeUnmount(() => {
|
||||
opacity: 0.7;
|
||||
margin-left: var(--space-xs);
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -7,8 +7,8 @@
|
||||
<h3 class="card-title">Performanță & Cash Flow</h3>
|
||||
</div>
|
||||
<div class="period-selector">
|
||||
<select
|
||||
v-model="selectedPeriod"
|
||||
<select
|
||||
v-model="selectedPeriod"
|
||||
@change="handlePeriodChange"
|
||||
class="period-select"
|
||||
:disabled="isLoading"
|
||||
@@ -24,7 +24,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="card-body">
|
||||
<!-- Loading State -->
|
||||
<div v-if="isLoading" class="loading-state">
|
||||
@@ -50,7 +50,9 @@
|
||||
<div class="placeholder-content">
|
||||
<i class="pi pi-chart-line placeholder-icon"></i>
|
||||
<span class="placeholder-text">Grafic încasări vs plăți</span>
|
||||
<small class="placeholder-subtitle">Datele vor fi afișate aici</small>
|
||||
<small class="placeholder-subtitle"
|
||||
>Datele vor fi afișate aici</small
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="chart-content">
|
||||
@@ -58,19 +60,23 @@
|
||||
<div class="legend-item">
|
||||
<span class="legend-color income"></span>
|
||||
<span class="legend-label">Încasări</span>
|
||||
<span class="legend-value">{{ formatCurrency(totalIncome) }}</span>
|
||||
<span class="legend-value">{{
|
||||
formatCurrency(totalIncome)
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<span class="legend-color expenses"></span>
|
||||
<span class="legend-label">Plăți</span>
|
||||
<span class="legend-value">{{ formatCurrency(totalExpenses) }}</span>
|
||||
<span class="legend-value">{{
|
||||
formatCurrency(totalExpenses)
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-canvas-container">
|
||||
<canvas
|
||||
ref="performanceChart"
|
||||
<canvas
|
||||
ref="performanceChart"
|
||||
v-if="chartData?.labels?.length"
|
||||
width="400"
|
||||
width="400"
|
||||
height="200"
|
||||
></canvas>
|
||||
</div>
|
||||
@@ -84,12 +90,15 @@
|
||||
<div class="indicator-icon">💰</div>
|
||||
<div class="indicator-content">
|
||||
<div class="indicator-label">Rata încasare</div>
|
||||
<div class="indicator-value" :class="getRateClass(performanceData.rataIncasare)">
|
||||
<div
|
||||
class="indicator-value"
|
||||
:class="getRateClass(performanceData.rataIncasare)"
|
||||
>
|
||||
{{ performanceData.rataIncasare || 0 }}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="indicator-card">
|
||||
<div class="indicator-icon">⏱️</div>
|
||||
<div class="indicator-content">
|
||||
@@ -99,12 +108,15 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="indicator-card">
|
||||
<div class="indicator-icon">📈</div>
|
||||
<div class="indicator-content">
|
||||
<div class="indicator-label">Trend</div>
|
||||
<div class="indicator-value" :class="getTrendClass(performanceData.trend)">
|
||||
<div
|
||||
class="indicator-value"
|
||||
:class="getTrendClass(performanceData.trend)"
|
||||
>
|
||||
<i :class="getTrendIcon(performanceData.trend)"></i>
|
||||
{{ getTrendText(performanceData.trend) }}
|
||||
</div>
|
||||
@@ -115,7 +127,12 @@
|
||||
<div class="indicator-icon">💼</div>
|
||||
<div class="indicator-content">
|
||||
<div class="indicator-label">Capital lucru</div>
|
||||
<div class="indicator-value" :class="getWorkingCapitalClass(performanceData.workingCapital)">
|
||||
<div
|
||||
class="indicator-value"
|
||||
:class="
|
||||
getWorkingCapitalClass(performanceData.workingCapital)
|
||||
"
|
||||
>
|
||||
{{ formatCurrency(performanceData.workingCapital || 0) }}
|
||||
</div>
|
||||
</div>
|
||||
@@ -128,390 +145,416 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, watch, onMounted, onBeforeUnmount, nextTick } from 'vue'
|
||||
import { Chart, registerables } from 'chart.js'
|
||||
import { useDashboardStore } from '../../../stores/dashboard'
|
||||
import {
|
||||
ref,
|
||||
computed,
|
||||
watch,
|
||||
onMounted,
|
||||
onBeforeUnmount,
|
||||
nextTick,
|
||||
} from "vue";
|
||||
import { Chart, registerables } from "chart.js";
|
||||
import { useDashboardStore } from "../../../stores/dashboard";
|
||||
|
||||
// Register Chart.js components
|
||||
Chart.register(...registerables)
|
||||
Chart.register(...registerables);
|
||||
|
||||
// Props
|
||||
const props = defineProps({
|
||||
companyId: {
|
||||
type: [Number, String],
|
||||
required: true
|
||||
}
|
||||
})
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
// Emits
|
||||
const emit = defineEmits(['periodChanged'])
|
||||
const emit = defineEmits(["periodChanged"]);
|
||||
|
||||
// State
|
||||
const selectedPeriod = ref('7d')
|
||||
const isLoading = ref(false)
|
||||
const error = ref(null)
|
||||
const performanceChart = ref(null)
|
||||
let chartInstance = null
|
||||
const selectedPeriod = ref("7d");
|
||||
const isLoading = ref(false);
|
||||
const error = ref(null);
|
||||
const performanceChart = ref(null);
|
||||
let chartInstance = null;
|
||||
|
||||
// Store
|
||||
const dashboardStore = useDashboardStore()
|
||||
const dashboardStore = useDashboardStore();
|
||||
|
||||
// Sample data (will be replaced with actual API data)
|
||||
const performanceData = ref({
|
||||
rataIncasare: 85.2,
|
||||
cashConversion: 45,
|
||||
trend: 'up',
|
||||
workingCapital: 125000
|
||||
})
|
||||
trend: "up",
|
||||
workingCapital: 125000,
|
||||
});
|
||||
|
||||
const chartData = ref({
|
||||
labels: ['Lun', 'Mar', 'Mie', 'Joi', 'Vin', 'Sâm', 'Dum'],
|
||||
labels: ["Lun", "Mar", "Mie", "Joi", "Vin", "Sâm", "Dum"],
|
||||
income: [12000, 15000, 8000, 22000, 18000, 14000, 16000],
|
||||
expenses: [8000, 12000, 15000, 16000, 14000, 11000, 13000]
|
||||
})
|
||||
expenses: [8000, 12000, 15000, 16000, 14000, 11000, 13000],
|
||||
});
|
||||
|
||||
// Computed
|
||||
const totalIncome = computed(() => {
|
||||
return chartData.value.income?.reduce((sum, val) => sum + val, 0) || 0
|
||||
})
|
||||
return chartData.value.income?.reduce((sum, val) => sum + val, 0) || 0;
|
||||
});
|
||||
|
||||
const totalExpenses = computed(() => {
|
||||
return chartData.value.expenses?.reduce((sum, val) => sum + val, 0) || 0
|
||||
})
|
||||
return chartData.value.expenses?.reduce((sum, val) => sum + val, 0) || 0;
|
||||
});
|
||||
|
||||
const maxValue = computed(() => {
|
||||
const allValues = [...(chartData.value.income || []), ...(chartData.value.expenses || [])]
|
||||
return Math.max(...allValues, 0)
|
||||
})
|
||||
const allValues = [
|
||||
...(chartData.value.income || []),
|
||||
...(chartData.value.expenses || []),
|
||||
];
|
||||
return Math.max(...allValues, 0);
|
||||
});
|
||||
|
||||
// Methods
|
||||
const handlePeriodChange = () => {
|
||||
emit('periodChanged', selectedPeriod.value)
|
||||
loadPerformanceData()
|
||||
}
|
||||
emit("periodChanged", selectedPeriod.value);
|
||||
loadPerformanceData();
|
||||
};
|
||||
|
||||
const loadPerformanceData = async () => {
|
||||
if (!props.companyId) return
|
||||
if (!props.companyId) return;
|
||||
|
||||
isLoading.value = true
|
||||
error.value = null
|
||||
isLoading.value = true;
|
||||
error.value = null;
|
||||
|
||||
try {
|
||||
// This will be replaced with actual API call
|
||||
// const result = await dashboardStore.loadPerformanceData(props.companyId, selectedPeriod.value)
|
||||
|
||||
|
||||
// Simulate API call
|
||||
await new Promise(resolve => setTimeout(resolve, 1000))
|
||||
|
||||
await new Promise((resolve) => setTimeout(resolve, 1000));
|
||||
|
||||
// Mock data based on period
|
||||
const mockData = {
|
||||
'7d': {
|
||||
"7d": {
|
||||
rataIncasare: 85.2,
|
||||
cashConversion: 45,
|
||||
trend: 'up',
|
||||
trend: "up",
|
||||
workingCapital: 125000,
|
||||
chartData: {
|
||||
labels: ['Lun', 'Mar', 'Mie', 'Joi', 'Vin', 'Sâm', 'Dum'],
|
||||
labels: ["Lun", "Mar", "Mie", "Joi", "Vin", "Sâm", "Dum"],
|
||||
income: [12000, 15000, 8000, 22000, 18000, 14000, 16000],
|
||||
expenses: [8000, 12000, 15000, 16000, 14000, 11000, 13000]
|
||||
}
|
||||
expenses: [8000, 12000, 15000, 16000, 14000, 11000, 13000],
|
||||
},
|
||||
},
|
||||
'1m': {
|
||||
"1m": {
|
||||
rataIncasare: 78.5,
|
||||
cashConversion: 52,
|
||||
trend: 'stable',
|
||||
trend: "stable",
|
||||
workingCapital: 89000,
|
||||
chartData: {
|
||||
labels: ['S1', 'S2', 'S3', 'S4'],
|
||||
labels: ["S1", "S2", "S3", "S4"],
|
||||
income: [45000, 52000, 38000, 48000],
|
||||
expenses: [42000, 47000, 51000, 45000]
|
||||
}
|
||||
expenses: [42000, 47000, 51000, 45000],
|
||||
},
|
||||
},
|
||||
'3m': {
|
||||
"3m": {
|
||||
rataIncasare: 82.1,
|
||||
cashConversion: 38,
|
||||
trend: 'up',
|
||||
trend: "up",
|
||||
workingCapital: 156000,
|
||||
chartData: {
|
||||
labels: ['Ian', 'Feb', 'Mar'],
|
||||
labels: ["Ian", "Feb", "Mar"],
|
||||
income: [165000, 182000, 155000],
|
||||
expenses: [158000, 162000, 168000]
|
||||
}
|
||||
expenses: [158000, 162000, 168000],
|
||||
},
|
||||
},
|
||||
'6m': {
|
||||
"6m": {
|
||||
rataIncasare: 79.8,
|
||||
cashConversion: 41,
|
||||
trend: 'down',
|
||||
trend: "down",
|
||||
workingCapital: 98000,
|
||||
chartData: {
|
||||
labels: ['Oct', 'Noi', 'Dec', 'Ian', 'Feb', 'Mar'],
|
||||
labels: ["Oct", "Noi", "Dec", "Ian", "Feb", "Mar"],
|
||||
income: [145000, 162000, 185000, 165000, 182000, 155000],
|
||||
expenses: [152000, 158000, 172000, 158000, 162000, 168000]
|
||||
}
|
||||
expenses: [152000, 158000, 172000, 158000, 162000, 168000],
|
||||
},
|
||||
},
|
||||
'ytd': {
|
||||
ytd: {
|
||||
rataIncasare: 81.3,
|
||||
cashConversion: 43,
|
||||
trend: 'stable',
|
||||
trend: "stable",
|
||||
workingCapital: 142000,
|
||||
chartData: {
|
||||
labels: ['Q1', 'Q2', 'Q3'],
|
||||
labels: ["Q1", "Q2", "Q3"],
|
||||
income: [502000, 485000, 456000],
|
||||
expenses: [488000, 512000, 478000]
|
||||
}
|
||||
expenses: [488000, 512000, 478000],
|
||||
},
|
||||
},
|
||||
'12m': {
|
||||
"12m": {
|
||||
rataIncasare: 83.7,
|
||||
cashConversion: 39,
|
||||
trend: 'up',
|
||||
trend: "up",
|
||||
workingCapital: 178000,
|
||||
chartData: {
|
||||
labels: ['T1', 'T2', 'T3', 'T4'],
|
||||
labels: ["T1", "T2", "T3", "T4"],
|
||||
income: [1456000, 1523000, 1387000, 1612000],
|
||||
expenses: [1423000, 1498000, 1456000, 1534000]
|
||||
}
|
||||
}
|
||||
}
|
||||
expenses: [1423000, 1498000, 1456000, 1534000],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const data = mockData[selectedPeriod.value] || mockData["7d"];
|
||||
performanceData.value = data;
|
||||
chartData.value = data.chartData;
|
||||
|
||||
const data = mockData[selectedPeriod.value] || mockData['7d']
|
||||
performanceData.value = data
|
||||
chartData.value = data.chartData
|
||||
|
||||
// Initialize or update chart after data is loaded
|
||||
await nextTick()
|
||||
await updateChart()
|
||||
|
||||
await nextTick();
|
||||
await updateChart();
|
||||
} catch (err) {
|
||||
console.error('Failed to load performance data:', err)
|
||||
error.value = 'Nu s-au putut încărca datele de performanță'
|
||||
console.error("Failed to load performance data:", err);
|
||||
error.value = "Nu s-au putut încărca datele de performanță";
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
isLoading.value = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const retryLoad = () => {
|
||||
loadPerformanceData()
|
||||
}
|
||||
loadPerformanceData();
|
||||
};
|
||||
|
||||
const formatCurrency = (value) => {
|
||||
if (value === null || value === undefined) return '0 RON'
|
||||
return new Intl.NumberFormat('ro-RO', {
|
||||
style: 'currency',
|
||||
currency: 'RON',
|
||||
if (value === null || value === undefined) return "0 RON";
|
||||
return new Intl.NumberFormat("ro-RO", {
|
||||
style: "currency",
|
||||
currency: "RON",
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 0
|
||||
}).format(value)
|
||||
}
|
||||
maximumFractionDigits: 0,
|
||||
}).format(value);
|
||||
};
|
||||
|
||||
const initializeChart = async () => {
|
||||
if (!performanceChart.value || !chartData.value?.labels?.length) return
|
||||
|
||||
if (!performanceChart.value || !chartData.value?.labels?.length) return;
|
||||
|
||||
// Destroy existing chart instance
|
||||
if (chartInstance) {
|
||||
chartInstance.destroy()
|
||||
chartInstance = null
|
||||
chartInstance.destroy();
|
||||
chartInstance = null;
|
||||
}
|
||||
|
||||
await nextTick()
|
||||
|
||||
const ctx = performanceChart.value.getContext('2d')
|
||||
|
||||
|
||||
await nextTick();
|
||||
|
||||
const ctx = performanceChart.value.getContext("2d");
|
||||
|
||||
chartInstance = new Chart(ctx, {
|
||||
type: 'line',
|
||||
type: "line",
|
||||
data: {
|
||||
labels: chartData.value.labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Încasări',
|
||||
label: "Încasări",
|
||||
data: chartData.value.income,
|
||||
borderColor: 'rgba(16, 185, 129, 1)', // var(--color-success)
|
||||
backgroundColor: 'rgba(16, 185, 129, 0.1)',
|
||||
borderColor: "rgba(16, 185, 129, 1)", // var(--color-success)
|
||||
backgroundColor: "rgba(16, 185, 129, 0.1)",
|
||||
borderWidth: 2,
|
||||
fill: true,
|
||||
tension: 0.4,
|
||||
pointBackgroundColor: 'rgba(16, 185, 129, 1)',
|
||||
pointBorderColor: '#ffffff',
|
||||
pointBackgroundColor: "rgba(16, 185, 129, 1)",
|
||||
pointBorderColor: "#ffffff",
|
||||
pointBorderWidth: 2,
|
||||
pointRadius: 4,
|
||||
pointHoverRadius: 6
|
||||
pointHoverRadius: 6,
|
||||
},
|
||||
{
|
||||
label: 'Plăți',
|
||||
label: "Plăți",
|
||||
data: chartData.value.expenses,
|
||||
borderColor: 'rgba(239, 68, 68, 1)', // var(--color-error)
|
||||
backgroundColor: 'rgba(239, 68, 68, 0.1)',
|
||||
borderColor: "rgba(239, 68, 68, 1)", // var(--color-error)
|
||||
backgroundColor: "rgba(239, 68, 68, 0.1)",
|
||||
borderWidth: 2,
|
||||
fill: true,
|
||||
tension: 0.4,
|
||||
pointBackgroundColor: 'rgba(239, 68, 68, 1)',
|
||||
pointBorderColor: '#ffffff',
|
||||
pointBackgroundColor: "rgba(239, 68, 68, 1)",
|
||||
pointBorderColor: "#ffffff",
|
||||
pointBorderWidth: 2,
|
||||
pointRadius: 4,
|
||||
pointHoverRadius: 6
|
||||
}
|
||||
]
|
||||
pointHoverRadius: 6,
|
||||
},
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
interaction: {
|
||||
intersect: false,
|
||||
mode: 'index'
|
||||
mode: "index",
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false // We have our own custom legend
|
||||
display: false, // We have our own custom legend
|
||||
},
|
||||
tooltip: {
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.8)',
|
||||
titleColor: '#ffffff',
|
||||
bodyColor: '#ffffff',
|
||||
borderColor: 'rgba(255, 255, 255, 0.1)',
|
||||
backgroundColor: "rgba(0, 0, 0, 0.8)",
|
||||
titleColor: "#ffffff",
|
||||
bodyColor: "#ffffff",
|
||||
borderColor: "rgba(255, 255, 255, 0.1)",
|
||||
borderWidth: 1,
|
||||
cornerRadius: 8,
|
||||
displayColors: true,
|
||||
callbacks: {
|
||||
label: function(context) {
|
||||
const value = context.parsed.y
|
||||
const formattedValue = new Intl.NumberFormat('ro-RO', {
|
||||
style: 'currency',
|
||||
currency: 'RON',
|
||||
label: function (context) {
|
||||
const value = context.parsed.y;
|
||||
const formattedValue = new Intl.NumberFormat("ro-RO", {
|
||||
style: "currency",
|
||||
currency: "RON",
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 0
|
||||
}).format(value)
|
||||
return `${context.dataset.label}: ${formattedValue}`
|
||||
}
|
||||
}
|
||||
}
|
||||
maximumFractionDigits: 0,
|
||||
}).format(value);
|
||||
return `${context.dataset.label}: ${formattedValue}`;
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
grid: {
|
||||
display: false
|
||||
display: false,
|
||||
},
|
||||
border: {
|
||||
display: false
|
||||
display: false,
|
||||
},
|
||||
ticks: {
|
||||
color: 'rgba(107, 114, 128, 0.8)',
|
||||
color: "rgba(107, 114, 128, 0.8)",
|
||||
font: {
|
||||
size: 12,
|
||||
family: 'Inter, -apple-system, BlinkMacSystemFont, sans-serif'
|
||||
}
|
||||
}
|
||||
family: "Inter, -apple-system, BlinkMacSystemFont, sans-serif",
|
||||
},
|
||||
},
|
||||
},
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
grid: {
|
||||
color: 'rgba(107, 114, 128, 0.1)',
|
||||
drawBorder: false
|
||||
color: "rgba(107, 114, 128, 0.1)",
|
||||
drawBorder: false,
|
||||
},
|
||||
border: {
|
||||
display: false
|
||||
display: false,
|
||||
},
|
||||
ticks: {
|
||||
color: 'rgba(107, 114, 128, 0.8)',
|
||||
color: "rgba(107, 114, 128, 0.8)",
|
||||
font: {
|
||||
size: 12,
|
||||
family: 'Inter, -apple-system, BlinkMacSystemFont, sans-serif'
|
||||
family: "Inter, -apple-system, BlinkMacSystemFont, sans-serif",
|
||||
},
|
||||
callback: function(value) {
|
||||
return new Intl.NumberFormat('ro-RO', {
|
||||
style: 'currency',
|
||||
currency: 'RON',
|
||||
callback: function (value) {
|
||||
return new Intl.NumberFormat("ro-RO", {
|
||||
style: "currency",
|
||||
currency: "RON",
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 0,
|
||||
notation: 'compact'
|
||||
}).format(value)
|
||||
}
|
||||
}
|
||||
}
|
||||
notation: "compact",
|
||||
}).format(value);
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderCapStyle: 'round',
|
||||
borderJoinStyle: 'round'
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
borderCapStyle: "round",
|
||||
borderJoinStyle: "round",
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const updateChart = async () => {
|
||||
if (chartInstance && chartData.value?.labels?.length) {
|
||||
chartInstance.data.labels = chartData.value.labels
|
||||
chartInstance.data.datasets[0].data = chartData.value.income
|
||||
chartInstance.data.datasets[1].data = chartData.value.expenses
|
||||
chartInstance.update('active')
|
||||
chartInstance.data.labels = chartData.value.labels;
|
||||
chartInstance.data.datasets[0].data = chartData.value.income;
|
||||
chartInstance.data.datasets[1].data = chartData.value.expenses;
|
||||
chartInstance.update("active");
|
||||
} else {
|
||||
await initializeChart()
|
||||
await initializeChart();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const getRateClass = (rate) => {
|
||||
if (rate >= 85) return 'rate-excellent'
|
||||
if (rate >= 75) return 'rate-good'
|
||||
if (rate >= 60) return 'rate-average'
|
||||
return 'rate-poor'
|
||||
}
|
||||
if (rate >= 85) return "rate-excellent";
|
||||
if (rate >= 75) return "rate-good";
|
||||
if (rate >= 60) return "rate-average";
|
||||
return "rate-poor";
|
||||
};
|
||||
|
||||
const getTrendClass = (trend) => {
|
||||
switch (trend) {
|
||||
case 'up': return 'trend-up'
|
||||
case 'down': return 'trend-down'
|
||||
default: return 'trend-stable'
|
||||
case "up":
|
||||
return "trend-up";
|
||||
case "down":
|
||||
return "trend-down";
|
||||
default:
|
||||
return "trend-stable";
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const getTrendIcon = (trend) => {
|
||||
switch (trend) {
|
||||
case 'up': return 'pi pi-arrow-up'
|
||||
case 'down': return 'pi pi-arrow-down'
|
||||
default: return 'pi pi-minus'
|
||||
case "up":
|
||||
return "pi pi-arrow-up";
|
||||
case "down":
|
||||
return "pi pi-arrow-down";
|
||||
default:
|
||||
return "pi pi-minus";
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const getTrendText = (trend) => {
|
||||
switch (trend) {
|
||||
case 'up': return 'Crescător'
|
||||
case 'down': return 'Descrescător'
|
||||
default: return 'Stabil'
|
||||
case "up":
|
||||
return "Crescător";
|
||||
case "down":
|
||||
return "Descrescător";
|
||||
default:
|
||||
return "Stabil";
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const getWorkingCapitalClass = (value) => {
|
||||
if (value > 100000) return 'capital-positive'
|
||||
if (value > 0) return 'capital-neutral'
|
||||
return 'capital-negative'
|
||||
}
|
||||
if (value > 100000) return "capital-positive";
|
||||
if (value > 0) return "capital-neutral";
|
||||
return "capital-negative";
|
||||
};
|
||||
|
||||
// Watchers
|
||||
watch(() => props.companyId, (newId) => {
|
||||
if (newId) {
|
||||
loadPerformanceData()
|
||||
}
|
||||
}, { immediate: true })
|
||||
watch(
|
||||
() => props.companyId,
|
||||
(newId) => {
|
||||
if (newId) {
|
||||
loadPerformanceData();
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
watch(chartData, async () => {
|
||||
if (chartData.value?.labels?.length) {
|
||||
await nextTick()
|
||||
await updateChart()
|
||||
}
|
||||
}, { deep: true })
|
||||
watch(
|
||||
chartData,
|
||||
async () => {
|
||||
if (chartData.value?.labels?.length) {
|
||||
await nextTick();
|
||||
await updateChart();
|
||||
}
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
|
||||
// Lifecycle
|
||||
onMounted(async () => {
|
||||
if (props.companyId) {
|
||||
await loadPerformanceData()
|
||||
await loadPerformanceData();
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (chartInstance) {
|
||||
chartInstance.destroy()
|
||||
chartInstance = null
|
||||
chartInstance.destroy();
|
||||
chartInstance = null;
|
||||
}
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@@ -635,7 +678,9 @@ onBeforeUnmount(() => {
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Error State */
|
||||
@@ -837,55 +882,75 @@ onBeforeUnmount(() => {
|
||||
}
|
||||
|
||||
/* Indicator Value Colors */
|
||||
.rate-excellent { color: var(--color-success); }
|
||||
.rate-good { color: #10b981; }
|
||||
.rate-average { color: var(--color-warning); }
|
||||
.rate-poor { color: var(--color-error); }
|
||||
.rate-excellent {
|
||||
color: var(--color-success);
|
||||
}
|
||||
.rate-good {
|
||||
color: #10b981;
|
||||
}
|
||||
.rate-average {
|
||||
color: var(--color-warning);
|
||||
}
|
||||
.rate-poor {
|
||||
color: var(--color-error);
|
||||
}
|
||||
|
||||
.trend-up { color: var(--color-success); }
|
||||
.trend-down { color: var(--color-error); }
|
||||
.trend-stable { color: var(--color-secondary); }
|
||||
.trend-up {
|
||||
color: var(--color-success);
|
||||
}
|
||||
.trend-down {
|
||||
color: var(--color-error);
|
||||
}
|
||||
.trend-stable {
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
|
||||
.capital-positive { color: var(--color-success); }
|
||||
.capital-neutral { color: var(--color-warning); }
|
||||
.capital-negative { color: var(--color-error); }
|
||||
.capital-positive {
|
||||
color: var(--color-success);
|
||||
}
|
||||
.capital-neutral {
|
||||
color: var(--color-warning);
|
||||
}
|
||||
.capital-negative {
|
||||
color: var(--color-error);
|
||||
}
|
||||
|
||||
/* Mobile Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.card-header {
|
||||
padding: var(--space-md);
|
||||
}
|
||||
|
||||
|
||||
.card-body {
|
||||
padding: var(--space-md);
|
||||
}
|
||||
|
||||
|
||||
.header-content {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
|
||||
.indicators-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
|
||||
.indicator-card {
|
||||
padding: var(--space-sm);
|
||||
}
|
||||
|
||||
|
||||
.indicator-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
font-size: var(--text-base);
|
||||
}
|
||||
|
||||
|
||||
.chart-canvas-container {
|
||||
height: 160px;
|
||||
padding: var(--space-md);
|
||||
}
|
||||
|
||||
|
||||
.chart-legend {
|
||||
flex-direction: column;
|
||||
gap: var(--space-xs);
|
||||
@@ -898,18 +963,18 @@ onBeforeUnmount(() => {
|
||||
.card-body {
|
||||
padding: var(--space-sm);
|
||||
}
|
||||
|
||||
|
||||
.card-title {
|
||||
font-size: var(--text-base);
|
||||
}
|
||||
|
||||
|
||||
.indicator-value {
|
||||
font-size: var(--text-base);
|
||||
}
|
||||
|
||||
|
||||
.loading-state,
|
||||
.error-state {
|
||||
padding: var(--space-lg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -42,12 +42,18 @@
|
||||
</div>
|
||||
|
||||
<!-- Breakdown section -->
|
||||
<div class="breakdown-section" v-if="casaItems.length > 0 || bancaItems.length > 0">
|
||||
<div
|
||||
class="breakdown-section"
|
||||
v-if="casaItems.length > 0 || bancaItems.length > 0"
|
||||
>
|
||||
<!-- Casa Breakdown -->
|
||||
<div class="breakdown-group" v-if="casaItems.length > 0">
|
||||
<div class="breakdown-header" @click="toggleCasaExpanded">
|
||||
<div class="breakdown-header-left">
|
||||
<i class="pi pi-chevron-right breakdown-toggle" :class="{ expanded: isCasaExpanded }"></i>
|
||||
<i
|
||||
class="pi pi-chevron-right breakdown-toggle"
|
||||
:class="{ expanded: isCasaExpanded }"
|
||||
></i>
|
||||
<span class="breakdown-label">Casa</span>
|
||||
</div>
|
||||
<span class="breakdown-value">{{ formatCurrency(casaTotal) }}</span>
|
||||
@@ -55,12 +61,20 @@
|
||||
|
||||
<!-- Casa Sub-items -->
|
||||
<div v-show="isCasaExpanded" class="breakdown-subitems slide-down">
|
||||
<div v-for="(item, idx) in casaItems" :key="idx" class="breakdown-subitem">
|
||||
<div
|
||||
v-for="(item, idx) in casaItems"
|
||||
:key="idx"
|
||||
class="breakdown-subitem"
|
||||
>
|
||||
<span class="breakdown-sublabel">
|
||||
{{ item.nume || `Cont ${item.cont}` }}
|
||||
<span v-if="item.cont" class="breakdown-cont">({{ item.cont }})</span>
|
||||
<span v-if="item.cont" class="breakdown-cont"
|
||||
>({{ item.cont }})</span
|
||||
>
|
||||
</span>
|
||||
<span class="breakdown-subvalue">{{ formatCurrency(item.sold) }}</span>
|
||||
<span class="breakdown-subvalue">{{
|
||||
formatCurrency(item.sold)
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -69,7 +83,10 @@
|
||||
<div class="breakdown-group" v-if="bancaItems.length > 0">
|
||||
<div class="breakdown-header" @click="toggleBancaExpanded">
|
||||
<div class="breakdown-header-left">
|
||||
<i class="pi pi-chevron-right breakdown-toggle" :class="{ expanded: isBancaExpanded }"></i>
|
||||
<i
|
||||
class="pi pi-chevron-right breakdown-toggle"
|
||||
:class="{ expanded: isBancaExpanded }"
|
||||
></i>
|
||||
<span class="breakdown-label">Bancă</span>
|
||||
</div>
|
||||
<span class="breakdown-value">{{ formatCurrency(bancaTotal) }}</span>
|
||||
@@ -77,12 +94,20 @@
|
||||
|
||||
<!-- Bancă Sub-items -->
|
||||
<div v-show="isBancaExpanded" class="breakdown-subitems slide-down">
|
||||
<div v-for="(item, idx) in bancaItems" :key="idx" class="breakdown-subitem">
|
||||
<div
|
||||
v-for="(item, idx) in bancaItems"
|
||||
:key="idx"
|
||||
class="breakdown-subitem"
|
||||
>
|
||||
<span class="breakdown-sublabel">
|
||||
{{ item.nume || `Cont ${item.cont}` }}
|
||||
<span v-if="item.cont" class="breakdown-cont">({{ item.cont }})</span>
|
||||
<span v-if="item.cont" class="breakdown-cont"
|
||||
>({{ item.cont }})</span
|
||||
>
|
||||
</span>
|
||||
<span class="breakdown-subvalue">{{ formatCurrency(item.sold) }}</span>
|
||||
<span class="breakdown-subvalue">{{
|
||||
formatCurrency(item.sold)
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -91,474 +116,499 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, watch, onMounted, onBeforeUnmount, nextTick } from 'vue'
|
||||
import { Chart, registerables } from 'chart.js'
|
||||
import {
|
||||
ref,
|
||||
computed,
|
||||
watch,
|
||||
onMounted,
|
||||
onBeforeUnmount,
|
||||
nextTick,
|
||||
} from "vue";
|
||||
import { Chart, registerables } from "chart.js";
|
||||
|
||||
Chart.register(...registerables)
|
||||
Chart.register(...registerables);
|
||||
|
||||
const props = defineProps({
|
||||
casaTotal: {
|
||||
type: Number,
|
||||
default: 0
|
||||
default: 0,
|
||||
},
|
||||
bancaTotal: {
|
||||
type: Number,
|
||||
default: 0
|
||||
default: 0,
|
||||
},
|
||||
casaItems: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
default: () => [],
|
||||
},
|
||||
bancaItems: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
default: () => [],
|
||||
},
|
||||
casaSparklineData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
default: () => [],
|
||||
},
|
||||
bancaSparklineData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
default: () => [],
|
||||
},
|
||||
casaPreviousSparklineData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
default: () => [],
|
||||
},
|
||||
bancaPreviousSparklineData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
default: () => [],
|
||||
},
|
||||
sparklineLabels: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
default: () => [],
|
||||
},
|
||||
previousSparklineLabels: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
default: () => [],
|
||||
},
|
||||
trend: {
|
||||
type: Object,
|
||||
default: null
|
||||
}
|
||||
})
|
||||
default: null,
|
||||
},
|
||||
});
|
||||
|
||||
// Refs pentru 2 canvas-uri separate
|
||||
const casaCanvas = ref(null)
|
||||
const bancaCanvas = ref(null)
|
||||
let casaChartInstance = null
|
||||
let bancaChartInstance = null
|
||||
const isCasaExpanded = ref(false)
|
||||
const isBancaExpanded = ref(false)
|
||||
const casaCanvas = ref(null);
|
||||
const bancaCanvas = ref(null);
|
||||
let casaChartInstance = null;
|
||||
let bancaChartInstance = null;
|
||||
const isCasaExpanded = ref(false);
|
||||
const isBancaExpanded = ref(false);
|
||||
|
||||
// Toggle functions
|
||||
const toggleCasaExpanded = () => {
|
||||
isCasaExpanded.value = !isCasaExpanded.value
|
||||
}
|
||||
isCasaExpanded.value = !isCasaExpanded.value;
|
||||
};
|
||||
|
||||
const toggleBancaExpanded = () => {
|
||||
isBancaExpanded.value = !isBancaExpanded.value
|
||||
}
|
||||
isBancaExpanded.value = !isBancaExpanded.value;
|
||||
};
|
||||
|
||||
// Format currency
|
||||
const formatCurrency = (amount) => {
|
||||
if (!amount && amount !== 0) return '0 RON'
|
||||
return new Intl.NumberFormat('ro-RO', {
|
||||
style: 'currency',
|
||||
currency: 'RON',
|
||||
if (!amount && amount !== 0) return "0 RON";
|
||||
return new Intl.NumberFormat("ro-RO", {
|
||||
style: "currency",
|
||||
currency: "RON",
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 0
|
||||
}).format(Math.abs(amount))
|
||||
}
|
||||
maximumFractionDigits: 0,
|
||||
}).format(Math.abs(amount));
|
||||
};
|
||||
|
||||
// Check if sparkline data exists
|
||||
const hasSparklineData = computed(() => {
|
||||
return props.casaSparklineData.length > 0 && props.bancaSparklineData.length > 0
|
||||
})
|
||||
return (
|
||||
props.casaSparklineData.length > 0 && props.bancaSparklineData.length > 0
|
||||
);
|
||||
});
|
||||
|
||||
// Initialize Casa chart
|
||||
const initializeCasaChart = async () => {
|
||||
if (!casaCanvas.value || props.casaSparklineData.length === 0) {
|
||||
return
|
||||
return;
|
||||
}
|
||||
|
||||
// Destroy existing chart
|
||||
if (casaChartInstance) {
|
||||
casaChartInstance.destroy()
|
||||
casaChartInstance = null
|
||||
casaChartInstance.destroy();
|
||||
casaChartInstance = null;
|
||||
}
|
||||
|
||||
await nextTick()
|
||||
await nextTick();
|
||||
|
||||
const ctx = casaCanvas.value.getContext('2d')
|
||||
const ctx = casaCanvas.value.getContext("2d");
|
||||
|
||||
// Generate labels
|
||||
const labels = props.sparklineLabels.length > 0
|
||||
? props.sparklineLabels
|
||||
: props.casaSparklineData.map((_, i) => `L${i + 1}`)
|
||||
const labels =
|
||||
props.sparklineLabels.length > 0
|
||||
? props.sparklineLabels
|
||||
: props.casaSparklineData.map((_, i) => `L${i + 1}`);
|
||||
|
||||
// Prepare datasets
|
||||
const datasets = [{
|
||||
label: 'Casa (curent)',
|
||||
data: props.casaSparklineData,
|
||||
borderColor: '#10b981',
|
||||
backgroundColor: 'rgba(16, 185, 129, 0.1)',
|
||||
borderWidth: 2,
|
||||
fill: true,
|
||||
tension: 0.4,
|
||||
pointRadius: 0,
|
||||
pointHoverRadius: 4,
|
||||
pointHoverBackgroundColor: '#10b981',
|
||||
pointHoverBorderColor: '#ffffff',
|
||||
pointHoverBorderWidth: 2
|
||||
}]
|
||||
const datasets = [
|
||||
{
|
||||
label: "Casa (curent)",
|
||||
data: props.casaSparklineData,
|
||||
borderColor: "#10b981",
|
||||
backgroundColor: "rgba(16, 185, 129, 0.1)",
|
||||
borderWidth: 2,
|
||||
fill: true,
|
||||
tension: 0.4,
|
||||
pointRadius: 0,
|
||||
pointHoverRadius: 4,
|
||||
pointHoverBackgroundColor: "#10b981",
|
||||
pointHoverBorderColor: "#ffffff",
|
||||
pointHoverBorderWidth: 2,
|
||||
},
|
||||
];
|
||||
|
||||
// Add previous year dataset if available
|
||||
if (props.casaPreviousSparklineData && props.casaPreviousSparklineData.length > 0) {
|
||||
if (
|
||||
props.casaPreviousSparklineData &&
|
||||
props.casaPreviousSparklineData.length > 0
|
||||
) {
|
||||
datasets.push({
|
||||
label: 'Casa (anul precedent)',
|
||||
label: "Casa (anul precedent)",
|
||||
data: props.casaPreviousSparklineData,
|
||||
borderColor: 'rgba(16, 185, 129, 0.4)',
|
||||
backgroundColor: 'rgba(16, 185, 129, 0.05)',
|
||||
borderColor: "rgba(16, 185, 129, 0.4)",
|
||||
backgroundColor: "rgba(16, 185, 129, 0.05)",
|
||||
borderWidth: 2,
|
||||
borderDash: [5, 5],
|
||||
fill: false,
|
||||
tension: 0.4,
|
||||
pointRadius: 0,
|
||||
pointHoverRadius: 4,
|
||||
pointHoverBackgroundColor: 'rgba(16, 185, 129, 0.4)',
|
||||
pointHoverBorderColor: '#ffffff',
|
||||
pointHoverBorderWidth: 2
|
||||
})
|
||||
pointHoverBackgroundColor: "rgba(16, 185, 129, 0.4)",
|
||||
pointHoverBorderColor: "#ffffff",
|
||||
pointHoverBorderWidth: 2,
|
||||
});
|
||||
}
|
||||
|
||||
// Calculate limits including both datasets
|
||||
const allDataPoints = [...props.casaSparklineData]
|
||||
if (props.casaPreviousSparklineData && props.casaPreviousSparklineData.length > 0) {
|
||||
allDataPoints.push(...props.casaPreviousSparklineData)
|
||||
const allDataPoints = [...props.casaSparklineData];
|
||||
if (
|
||||
props.casaPreviousSparklineData &&
|
||||
props.casaPreviousSparklineData.length > 0
|
||||
) {
|
||||
allDataPoints.push(...props.casaPreviousSparklineData);
|
||||
}
|
||||
const dataMin = Math.min(...allDataPoints)
|
||||
const dataMax = Math.max(...allDataPoints)
|
||||
const dataRange = dataMax - dataMin
|
||||
const dataPadding = dataRange * 0.05
|
||||
const dataMin = Math.min(...allDataPoints);
|
||||
const dataMax = Math.max(...allDataPoints);
|
||||
const dataRange = dataMax - dataMin;
|
||||
const dataPadding = dataRange * 0.05;
|
||||
|
||||
casaChartInstance = new Chart(ctx, {
|
||||
type: 'line',
|
||||
type: "line",
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: datasets
|
||||
datasets: datasets,
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
interaction: {
|
||||
intersect: false,
|
||||
mode: 'index'
|
||||
mode: "index",
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
display: datasets.length > 1,
|
||||
position: 'top',
|
||||
align: 'end',
|
||||
position: "top",
|
||||
align: "end",
|
||||
labels: {
|
||||
boxWidth: 12,
|
||||
boxHeight: 12,
|
||||
padding: 8,
|
||||
font: {
|
||||
size: 10,
|
||||
family: 'Inter, -apple-system, BlinkMacSystemFont, sans-serif'
|
||||
family: "Inter, -apple-system, BlinkMacSystemFont, sans-serif",
|
||||
},
|
||||
color: 'rgba(107, 114, 128, 0.9)',
|
||||
color: "rgba(107, 114, 128, 0.9)",
|
||||
usePointStyle: true,
|
||||
pointStyle: 'line'
|
||||
}
|
||||
pointStyle: "line",
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.8)',
|
||||
titleColor: '#ffffff',
|
||||
bodyColor: '#ffffff',
|
||||
borderColor: 'rgba(255, 255, 255, 0.2)',
|
||||
backgroundColor: "rgba(0, 0, 0, 0.8)",
|
||||
titleColor: "#ffffff",
|
||||
bodyColor: "#ffffff",
|
||||
borderColor: "rgba(255, 255, 255, 0.2)",
|
||||
borderWidth: 1,
|
||||
cornerRadius: 6,
|
||||
displayColors: true,
|
||||
callbacks: {
|
||||
title: (context) => context[0].label || '',
|
||||
title: (context) => context[0].label || "",
|
||||
label: (context) => {
|
||||
const value = context.parsed.y
|
||||
const label = context.dataset.label || ''
|
||||
const formattedValue = new Intl.NumberFormat('ro-RO', {
|
||||
style: 'currency',
|
||||
currency: 'RON',
|
||||
const value = context.parsed.y;
|
||||
const label = context.dataset.label || "";
|
||||
const formattedValue = new Intl.NumberFormat("ro-RO", {
|
||||
style: "currency",
|
||||
currency: "RON",
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 0
|
||||
}).format(value)
|
||||
return `${label}: ${formattedValue}`
|
||||
}
|
||||
}
|
||||
}
|
||||
maximumFractionDigits: 0,
|
||||
}).format(value);
|
||||
return `${label}: ${formattedValue}`;
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
display: true,
|
||||
grid: {
|
||||
display: false,
|
||||
drawBorder: false
|
||||
drawBorder: false,
|
||||
},
|
||||
ticks: {
|
||||
color: 'rgba(107, 114, 128, 0.7)',
|
||||
color: "rgba(107, 114, 128, 0.7)",
|
||||
font: {
|
||||
size: 10,
|
||||
family: 'Inter, -apple-system, BlinkMacSystemFont, sans-serif'
|
||||
family: "Inter, -apple-system, BlinkMacSystemFont, sans-serif",
|
||||
},
|
||||
maxRotation: 45,
|
||||
minRotation: 45,
|
||||
maxTicksLimit: 6
|
||||
maxTicksLimit: 6,
|
||||
},
|
||||
border: {
|
||||
display: false
|
||||
}
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
y: {
|
||||
display: true,
|
||||
min: dataMin - dataPadding,
|
||||
max: dataMax + dataPadding,
|
||||
grid: {
|
||||
color: 'rgba(107, 114, 128, 0.1)',
|
||||
drawBorder: false
|
||||
color: "rgba(107, 114, 128, 0.1)",
|
||||
drawBorder: false,
|
||||
},
|
||||
ticks: {
|
||||
color: '#10b981',
|
||||
color: "#10b981",
|
||||
font: {
|
||||
size: 11,
|
||||
family: 'Inter, -apple-system, BlinkMacSystemFont, sans-serif'
|
||||
family: "Inter, -apple-system, BlinkMacSystemFont, sans-serif",
|
||||
},
|
||||
maxTicksLimit: 3,
|
||||
callback: function(value) {
|
||||
callback: function (value) {
|
||||
if (value >= 1000000) {
|
||||
return (value / 1000000).toFixed(1) + 'M'
|
||||
return (value / 1000000).toFixed(1) + "M";
|
||||
} else if (value >= 1000) {
|
||||
return (value / 1000).toFixed(0) + 'k'
|
||||
return (value / 1000).toFixed(0) + "k";
|
||||
}
|
||||
return value.toFixed(0)
|
||||
}
|
||||
return value.toFixed(0);
|
||||
},
|
||||
},
|
||||
border: {
|
||||
display: false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
// Initialize Bancă chart
|
||||
const initializeBancaChart = async () => {
|
||||
if (!bancaCanvas.value || props.bancaSparklineData.length === 0) {
|
||||
return
|
||||
return;
|
||||
}
|
||||
|
||||
// Destroy existing chart
|
||||
if (bancaChartInstance) {
|
||||
bancaChartInstance.destroy()
|
||||
bancaChartInstance = null
|
||||
bancaChartInstance.destroy();
|
||||
bancaChartInstance = null;
|
||||
}
|
||||
|
||||
await nextTick()
|
||||
await nextTick();
|
||||
|
||||
const ctx = bancaCanvas.value.getContext('2d')
|
||||
const ctx = bancaCanvas.value.getContext("2d");
|
||||
|
||||
// Generate labels
|
||||
const labels = props.sparklineLabels.length > 0
|
||||
? props.sparklineLabels
|
||||
: props.bancaSparklineData.map((_, i) => `L${i + 1}`)
|
||||
const labels =
|
||||
props.sparklineLabels.length > 0
|
||||
? props.sparklineLabels
|
||||
: props.bancaSparklineData.map((_, i) => `L${i + 1}`);
|
||||
|
||||
// Prepare datasets
|
||||
const datasets = [{
|
||||
label: 'Bancă (curent)',
|
||||
data: props.bancaSparklineData,
|
||||
borderColor: '#3b82f6',
|
||||
backgroundColor: 'rgba(59, 130, 246, 0.1)',
|
||||
borderWidth: 2,
|
||||
fill: true,
|
||||
tension: 0.4,
|
||||
pointRadius: 0,
|
||||
pointHoverRadius: 4,
|
||||
pointHoverBackgroundColor: '#3b82f6',
|
||||
pointHoverBorderColor: '#ffffff',
|
||||
pointHoverBorderWidth: 2
|
||||
}]
|
||||
const datasets = [
|
||||
{
|
||||
label: "Bancă (curent)",
|
||||
data: props.bancaSparklineData,
|
||||
borderColor: "#3b82f6",
|
||||
backgroundColor: "rgba(59, 130, 246, 0.1)",
|
||||
borderWidth: 2,
|
||||
fill: true,
|
||||
tension: 0.4,
|
||||
pointRadius: 0,
|
||||
pointHoverRadius: 4,
|
||||
pointHoverBackgroundColor: "#3b82f6",
|
||||
pointHoverBorderColor: "#ffffff",
|
||||
pointHoverBorderWidth: 2,
|
||||
},
|
||||
];
|
||||
|
||||
// Add previous year dataset if available
|
||||
if (props.bancaPreviousSparklineData && props.bancaPreviousSparklineData.length > 0) {
|
||||
if (
|
||||
props.bancaPreviousSparklineData &&
|
||||
props.bancaPreviousSparklineData.length > 0
|
||||
) {
|
||||
datasets.push({
|
||||
label: 'Bancă (anul precedent)',
|
||||
label: "Bancă (anul precedent)",
|
||||
data: props.bancaPreviousSparklineData,
|
||||
borderColor: 'rgba(59, 130, 246, 0.4)',
|
||||
backgroundColor: 'rgba(59, 130, 246, 0.05)',
|
||||
borderColor: "rgba(59, 130, 246, 0.4)",
|
||||
backgroundColor: "rgba(59, 130, 246, 0.05)",
|
||||
borderWidth: 2,
|
||||
borderDash: [5, 5],
|
||||
fill: false,
|
||||
tension: 0.4,
|
||||
pointRadius: 0,
|
||||
pointHoverRadius: 4,
|
||||
pointHoverBackgroundColor: 'rgba(59, 130, 246, 0.4)',
|
||||
pointHoverBorderColor: '#ffffff',
|
||||
pointHoverBorderWidth: 2
|
||||
})
|
||||
pointHoverBackgroundColor: "rgba(59, 130, 246, 0.4)",
|
||||
pointHoverBorderColor: "#ffffff",
|
||||
pointHoverBorderWidth: 2,
|
||||
});
|
||||
}
|
||||
|
||||
// Calculate limits including both datasets
|
||||
const allDataPoints = [...props.bancaSparklineData]
|
||||
if (props.bancaPreviousSparklineData && props.bancaPreviousSparklineData.length > 0) {
|
||||
allDataPoints.push(...props.bancaPreviousSparklineData)
|
||||
const allDataPoints = [...props.bancaSparklineData];
|
||||
if (
|
||||
props.bancaPreviousSparklineData &&
|
||||
props.bancaPreviousSparklineData.length > 0
|
||||
) {
|
||||
allDataPoints.push(...props.bancaPreviousSparklineData);
|
||||
}
|
||||
const dataMin = Math.min(...allDataPoints)
|
||||
const dataMax = Math.max(...allDataPoints)
|
||||
const dataRange = dataMax - dataMin
|
||||
const dataPadding = dataRange * 0.05
|
||||
const dataMin = Math.min(...allDataPoints);
|
||||
const dataMax = Math.max(...allDataPoints);
|
||||
const dataRange = dataMax - dataMin;
|
||||
const dataPadding = dataRange * 0.05;
|
||||
|
||||
bancaChartInstance = new Chart(ctx, {
|
||||
type: 'line',
|
||||
type: "line",
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: datasets
|
||||
datasets: datasets,
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
interaction: {
|
||||
intersect: false,
|
||||
mode: 'index'
|
||||
mode: "index",
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
display: datasets.length > 1,
|
||||
position: 'top',
|
||||
align: 'end',
|
||||
position: "top",
|
||||
align: "end",
|
||||
labels: {
|
||||
boxWidth: 12,
|
||||
boxHeight: 12,
|
||||
padding: 8,
|
||||
font: {
|
||||
size: 10,
|
||||
family: 'Inter, -apple-system, BlinkMacSystemFont, sans-serif'
|
||||
family: "Inter, -apple-system, BlinkMacSystemFont, sans-serif",
|
||||
},
|
||||
color: 'rgba(107, 114, 128, 0.9)',
|
||||
color: "rgba(107, 114, 128, 0.9)",
|
||||
usePointStyle: true,
|
||||
pointStyle: 'line'
|
||||
}
|
||||
pointStyle: "line",
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.8)',
|
||||
titleColor: '#ffffff',
|
||||
bodyColor: '#ffffff',
|
||||
borderColor: 'rgba(255, 255, 255, 0.2)',
|
||||
backgroundColor: "rgba(0, 0, 0, 0.8)",
|
||||
titleColor: "#ffffff",
|
||||
bodyColor: "#ffffff",
|
||||
borderColor: "rgba(255, 255, 255, 0.2)",
|
||||
borderWidth: 1,
|
||||
cornerRadius: 6,
|
||||
displayColors: true,
|
||||
callbacks: {
|
||||
title: (context) => context[0].label || '',
|
||||
title: (context) => context[0].label || "",
|
||||
label: (context) => {
|
||||
const value = context.parsed.y
|
||||
const label = context.dataset.label || ''
|
||||
const formattedValue = new Intl.NumberFormat('ro-RO', {
|
||||
style: 'currency',
|
||||
currency: 'RON',
|
||||
const value = context.parsed.y;
|
||||
const label = context.dataset.label || "";
|
||||
const formattedValue = new Intl.NumberFormat("ro-RO", {
|
||||
style: "currency",
|
||||
currency: "RON",
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 0
|
||||
}).format(value)
|
||||
return `${label}: ${formattedValue}`
|
||||
}
|
||||
}
|
||||
}
|
||||
maximumFractionDigits: 0,
|
||||
}).format(value);
|
||||
return `${label}: ${formattedValue}`;
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
display: true,
|
||||
grid: {
|
||||
display: false,
|
||||
drawBorder: false
|
||||
drawBorder: false,
|
||||
},
|
||||
ticks: {
|
||||
color: 'rgba(107, 114, 128, 0.7)',
|
||||
color: "rgba(107, 114, 128, 0.7)",
|
||||
font: {
|
||||
size: 10,
|
||||
family: 'Inter, -apple-system, BlinkMacSystemFont, sans-serif'
|
||||
family: "Inter, -apple-system, BlinkMacSystemFont, sans-serif",
|
||||
},
|
||||
maxRotation: 45,
|
||||
minRotation: 45,
|
||||
maxTicksLimit: 6
|
||||
maxTicksLimit: 6,
|
||||
},
|
||||
border: {
|
||||
display: false
|
||||
}
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
y: {
|
||||
display: true,
|
||||
min: dataMin - dataPadding,
|
||||
max: dataMax + dataPadding,
|
||||
grid: {
|
||||
color: 'rgba(107, 114, 128, 0.1)',
|
||||
drawBorder: false
|
||||
color: "rgba(107, 114, 128, 0.1)",
|
||||
drawBorder: false,
|
||||
},
|
||||
ticks: {
|
||||
color: '#3b82f6',
|
||||
color: "#3b82f6",
|
||||
font: {
|
||||
size: 11,
|
||||
family: 'Inter, -apple-system, BlinkMacSystemFont, sans-serif'
|
||||
family: "Inter, -apple-system, BlinkMacSystemFont, sans-serif",
|
||||
},
|
||||
maxTicksLimit: 3,
|
||||
callback: function(value) {
|
||||
callback: function (value) {
|
||||
if (value >= 1000000) {
|
||||
return (value / 1000000).toFixed(1) + 'M'
|
||||
return (value / 1000000).toFixed(1) + "M";
|
||||
} else if (value >= 1000) {
|
||||
return (value / 1000).toFixed(0) + 'k'
|
||||
return (value / 1000).toFixed(0) + "k";
|
||||
}
|
||||
return value.toFixed(0)
|
||||
}
|
||||
return value.toFixed(0);
|
||||
},
|
||||
},
|
||||
border: {
|
||||
display: false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
// Watch for data changes
|
||||
watch(() => [
|
||||
props.casaSparklineData,
|
||||
props.bancaSparklineData,
|
||||
props.sparklineLabels,
|
||||
props.casaPreviousSparklineData,
|
||||
props.bancaPreviousSparklineData,
|
||||
props.previousSparklineLabels
|
||||
], async () => {
|
||||
await Promise.all([
|
||||
initializeCasaChart(),
|
||||
initializeBancaChart()
|
||||
])
|
||||
}, { deep: true })
|
||||
watch(
|
||||
() => [
|
||||
props.casaSparklineData,
|
||||
props.bancaSparklineData,
|
||||
props.sparklineLabels,
|
||||
props.casaPreviousSparklineData,
|
||||
props.bancaPreviousSparklineData,
|
||||
props.previousSparklineLabels,
|
||||
],
|
||||
async () => {
|
||||
await Promise.all([initializeCasaChart(), initializeBancaChart()]);
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
|
||||
// Lifecycle hooks
|
||||
onMounted(async () => {
|
||||
await Promise.all([
|
||||
initializeCasaChart(),
|
||||
initializeBancaChart()
|
||||
])
|
||||
})
|
||||
await Promise.all([initializeCasaChart(), initializeBancaChart()]);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (casaChartInstance) {
|
||||
casaChartInstance.destroy()
|
||||
casaChartInstance = null
|
||||
casaChartInstance.destroy();
|
||||
casaChartInstance = null;
|
||||
}
|
||||
if (bancaChartInstance) {
|
||||
bancaChartInstance.destroy()
|
||||
bancaChartInstance = null
|
||||
bancaChartInstance.destroy();
|
||||
bancaChartInstance = null;
|
||||
}
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@@ -3,8 +3,8 @@
|
||||
<nav class="header-nav">
|
||||
<!-- Left side: Brand + Hamburger -->
|
||||
<div class="flex items-center gap-4">
|
||||
<button
|
||||
class="hamburger-btn"
|
||||
<button
|
||||
class="hamburger-btn"
|
||||
:class="{ active: menuOpen }"
|
||||
@click="toggleMenu"
|
||||
aria-label="Toggle navigation menu"
|
||||
@@ -13,7 +13,7 @@
|
||||
<span class="hamburger-line"></span>
|
||||
<span class="hamburger-line"></span>
|
||||
</button>
|
||||
|
||||
|
||||
<router-link to="/dashboard" class="header-brand">
|
||||
<span>ROA2WEB</span>
|
||||
</router-link>
|
||||
@@ -21,23 +21,30 @@
|
||||
|
||||
<!-- Right side: Company + User -->
|
||||
<div class="header-actions">
|
||||
<CompanySelectorMini
|
||||
v-model="selectedCompany"
|
||||
<CompanySelectorMini
|
||||
v-model="selectedCompany"
|
||||
@company-changed="onCompanyChanged"
|
||||
/>
|
||||
<div class="user-menu-container">
|
||||
<div class="header-user" @click="toggleUserMenu">
|
||||
<i class="pi pi-user"></i>
|
||||
<span class="desktop-only">{{ currentUser?.username || 'User' }}</span>
|
||||
<i class="pi pi-chevron-down" :class="{ 'rotate-180': userMenuOpen }"></i>
|
||||
<span class="desktop-only">{{
|
||||
currentUser?.username || "User"
|
||||
}}</span>
|
||||
<i
|
||||
class="pi pi-chevron-down"
|
||||
:class="{ 'rotate-180': userMenuOpen }"
|
||||
></i>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- User Dropdown Menu -->
|
||||
<div v-if="userMenuOpen" class="user-dropdown">
|
||||
<div class="user-dropdown-header">
|
||||
<div class="user-info">
|
||||
<div class="user-name">{{ currentUser?.username || 'User' }}</div>
|
||||
<div class="user-email">{{ currentUser?.email || '' }}</div>
|
||||
<div class="user-name">
|
||||
{{ currentUser?.username || "User" }}
|
||||
</div>
|
||||
<div class="user-email">{{ currentUser?.email || "" }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="user-dropdown-divider"></div>
|
||||
@@ -54,79 +61,79 @@
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
<!-- Overlay for user menu -->
|
||||
<div
|
||||
v-if="userMenuOpen"
|
||||
class="user-menu-overlay"
|
||||
<div
|
||||
v-if="userMenuOpen"
|
||||
class="user-menu-overlay"
|
||||
@click="closeUserMenu"
|
||||
></div>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, computed } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import CompanySelectorMini from '../dashboard/CompanySelectorMini.vue'
|
||||
import { useCompanyStore } from '../../stores/companies'
|
||||
import { useAuthStore } from '../../stores/auth'
|
||||
import { ref, computed } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import CompanySelectorMini from "../dashboard/CompanySelectorMini.vue";
|
||||
import { useCompanyStore } from "../../stores/companies";
|
||||
import { useAuthStore } from "../../stores/auth";
|
||||
|
||||
export default {
|
||||
name: 'DashboardHeader',
|
||||
name: "DashboardHeader",
|
||||
components: {
|
||||
CompanySelectorMini
|
||||
CompanySelectorMini,
|
||||
},
|
||||
emits: ['menu-toggle', 'company-changed'],
|
||||
emits: ["menu-toggle", "company-changed"],
|
||||
setup(props, { emit }) {
|
||||
const router = useRouter()
|
||||
const companiesStore = useCompanyStore()
|
||||
const authStore = useAuthStore()
|
||||
|
||||
const menuOpen = ref(false)
|
||||
const userMenuOpen = ref(false)
|
||||
|
||||
const router = useRouter();
|
||||
const companiesStore = useCompanyStore();
|
||||
const authStore = useAuthStore();
|
||||
|
||||
const menuOpen = ref(false);
|
||||
const userMenuOpen = ref(false);
|
||||
|
||||
const selectedCompany = computed({
|
||||
get: () => companiesStore.selectedCompany,
|
||||
set: (value) => companiesStore.setSelectedCompany(value)
|
||||
})
|
||||
set: (value) => companiesStore.setSelectedCompany(value),
|
||||
});
|
||||
|
||||
const currentUser = computed(() => authStore.currentUser)
|
||||
const currentUser = computed(() => authStore.currentUser);
|
||||
|
||||
const toggleMenu = () => {
|
||||
menuOpen.value = !menuOpen.value
|
||||
emit('menu-toggle', menuOpen.value)
|
||||
}
|
||||
menuOpen.value = !menuOpen.value;
|
||||
emit("menu-toggle", menuOpen.value);
|
||||
};
|
||||
|
||||
const toggleUserMenu = () => {
|
||||
userMenuOpen.value = !userMenuOpen.value
|
||||
}
|
||||
userMenuOpen.value = !userMenuOpen.value;
|
||||
};
|
||||
|
||||
const closeUserMenu = () => {
|
||||
userMenuOpen.value = false
|
||||
}
|
||||
userMenuOpen.value = false;
|
||||
};
|
||||
|
||||
const onCompanyChanged = (company) => {
|
||||
emit('company-changed', company)
|
||||
}
|
||||
emit("company-changed", company);
|
||||
};
|
||||
|
||||
const navigateToTelegram = async () => {
|
||||
try {
|
||||
closeUserMenu()
|
||||
await router.push('/telegram')
|
||||
closeUserMenu();
|
||||
await router.push("/telegram");
|
||||
} catch (error) {
|
||||
console.error('Navigation error:', error)
|
||||
console.error("Navigation error:", error);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleLogout = async () => {
|
||||
try {
|
||||
authStore.logout()
|
||||
closeUserMenu()
|
||||
await router.push('/login')
|
||||
authStore.logout();
|
||||
closeUserMenu();
|
||||
await router.push("/login");
|
||||
} catch (error) {
|
||||
console.error('Logout error:', error)
|
||||
console.error("Logout error:", error);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
menuOpen,
|
||||
@@ -138,10 +145,10 @@ export default {
|
||||
closeUserMenu,
|
||||
onCompanyChanged,
|
||||
navigateToTelegram,
|
||||
handleLogout
|
||||
}
|
||||
}
|
||||
}
|
||||
handleLogout,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@@ -282,13 +289,13 @@ export default {
|
||||
.user-dropdown {
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
|
||||
.user-dropdown-header {
|
||||
padding: var(--space-sm);
|
||||
}
|
||||
|
||||
|
||||
.user-dropdown-item {
|
||||
padding: var(--space-sm);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- Menu Overlay -->
|
||||
<div
|
||||
class="slide-menu-overlay"
|
||||
<div
|
||||
class="slide-menu-overlay"
|
||||
:class="{ open: isOpen }"
|
||||
@click="closeMenu"
|
||||
></div>
|
||||
|
||||
|
||||
<!-- Slide Menu -->
|
||||
<nav class="slide-menu" :class="{ open: isOpen }">
|
||||
<!-- Navigation Section -->
|
||||
@@ -14,8 +14,8 @@
|
||||
<h3 class="menu-title">Navigation</h3>
|
||||
<ul class="menu-list">
|
||||
<li class="menu-item">
|
||||
<router-link
|
||||
to="/dashboard"
|
||||
<router-link
|
||||
to="/dashboard"
|
||||
class="menu-link"
|
||||
:class="{ active: $route.name === 'Dashboard' }"
|
||||
@click="closeMenu"
|
||||
@@ -25,8 +25,8 @@
|
||||
</router-link>
|
||||
</li>
|
||||
<li class="menu-item">
|
||||
<router-link
|
||||
to="/invoices"
|
||||
<router-link
|
||||
to="/invoices"
|
||||
class="menu-link"
|
||||
:class="{ active: $route.name === 'Invoices' }"
|
||||
@click="closeMenu"
|
||||
@@ -94,22 +94,22 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'HamburgerMenu',
|
||||
name: "HamburgerMenu",
|
||||
props: {
|
||||
isOpen: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
emits: ['close'],
|
||||
emits: ["close"],
|
||||
setup(props, { emit }) {
|
||||
const closeMenu = () => {
|
||||
emit('close')
|
||||
}
|
||||
emit("close");
|
||||
};
|
||||
|
||||
return {
|
||||
closeMenu
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
closeMenu,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user