moein/panel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Moein Moradi
2025-08-04 16:33:07 +03:30
commit f798e8e35c
9595 changed files with 1208683 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

188
resources/js/views/apps/logistics/LogisticsVehicleOverview.vue Normal file
View File

@@ -0,0 +1,188 @@
<script setup>
const vehicleData = [
{
icon: 'tabler-car',
title: 'On the way',
time: '2hr 10min',
percentage: 39.7,
},
{
icon: 'tabler-circle-arrow-down',
title: 'Unloading',
time: '3hr 15min',
percentage: 28.3,
},
{
icon: 'tabler-circle-arrow-up',
title: 'Loading',
time: '1hr 24min',
percentage: 17.4,
},
{
icon: 'tabler-clock',
title: 'Waiting',
time: '5hr 19min',
percentage: 14.6,
},
]
</script>
<template>
<VCard>
<VCardItem title="Vehicles Overview">
<template #append>
<MoreBtn />
</template>
</VCardItem>
<VCardText>
<div class="d-flex mb-6">
<div style="inline-size: 39.7%;">
<div class="vehicle-progress-label position-relative mb-6 text-body-1 d-none d-sm-block">
On the way
</div>
<VProgressLinear
color="rgba(var(--v-theme-on-surface), var(--v-hover-opacity))"
model-value="100"
height="46"
class="rounded-e-0 rounded-lg"
>
<div class="text-start text-sm font-weight-medium">
39.7%
</div>
</VProgressLinear>
</div>
<div style="inline-size: 28.3%;">
<div class="vehicle-progress-label position-relative mb-6 text-body-1 d-none d-sm-block">
Unloading
</div>
<VProgressLinear
color="rgb(var(--v-theme-primary))"
model-value="100"
class="rounded-0"
height="46"
>
<div class="text-white text-sm font-weight-medium text-start">
28.3%
</div>
</VProgressLinear>
</div>
<div style="inline-size: 17.4%;">
<div class="vehicle-progress-label position-relative mb-6 text-body-1 d-none d-sm-block">
Loading
</div>
<VProgressLinear
color="rgb(var(--v-theme-info))"
model-value="100"
height="46"
class="rounded-0"
>
<div class="text-white text-sm font-weight-medium text-start">
17.4%
</div>
</VProgressLinear>
</div>
<div style="inline-size: 14.6%;">
<div class="vehicle-progress-label position-relative mb-6 text-body-1 d-none d-sm-block">
Waiting
</div>
<VProgressLinear
color="rgb(var(--v-tooltip-background))"
model-value="100"
height="46"
class="rounded-s-0 rounded-lg"
>
<div class="text-sm text-surface font-weight-medium text-start">
14.6%
</div>
</VProgressLinear>
</div>
</div>
<VTable class="text-no-wrap">
<tbody>
<tr
v-for="(vehicle, index) in vehicleData"
:key="index"
>
<td
width="70%"
style="padding-inline-start: 0 !important;"
>
<div class="d-flex align-center gap-x-2">
<VIcon
:icon="vehicle.icon"
size="24"
class="text-high-emphasis"
/>
<div class="text-body-1 text-high-emphasis">
{{ vehicle.title }}
</div>
</div>
</td>
<td>
<h6 class="text-h6">
{{ vehicle.time }}
</h6>
</td>
<td>
<div class="text-body-1">
{{ vehicle.percentage }}%
</div>
</td>
</tr>
</tbody>
</VTable>
</VCardText>
</VCard>
</template>
<style lang="scss" scoped>
.vehicle-progress-label {
padding-block-end: 1rem;
&::after {
position: absolute;
display: inline-block;
background-color: rgba(var(--v-theme-on-surface), var(--v-border-opacity));
block-size: 10px;
content: "";
inline-size: 2px;
inset-block-end: 0;
inset-inline-start: 0;
[dir="rtl"] & {
inset-inline: unset 0;
}
}
}
</style>
<style lang="scss">
.v-progress-linear__content {
justify-content: start;
padding-inline-start: 1rem;
}
#shipment-statistics .apexcharts-legend-series {
padding-inline: 16px;
}
@media (max-width: 1080px) {
#shipment-statistics .apexcharts-legend-series {
padding-inline: 12px;
}
.v-progress-linear__content {
padding-inline-start: 0.75rem !important;
}
}
@media (max-width: 576px) {
#shipment-statistics .apexcharts-legend-series {
padding-inline: 8px;
}
.v-progress-linear__content {
padding-inline-start: 0.125rem !important;
}
}
</style>