first commit

2024-05-29 22:34:28 +05:00
commit e63fc41a20
1470 changed files with 174828 additions and 0 deletions
--- a/resources/js/views/pages/cards/card-statistics/CardStatisticsLogistics.vue
+++ b/resources/js/views/pages/cards/card-statistics/CardStatisticsLogistics.vue
@@ -0,0 +1,110 @@
+<script setup>
+const logisticData = ref([
+  {
+    icon: 'ri-car-line',
+    color: 'primary',
+    title: 'On route vehicles',
+    value: 42,
+    change: 18.2,
+    isHover: false,
+  },
+  {
+    icon: 'ri-alert-line',
+    color: 'warning',
+    title: 'Vehicles with errors',
+    value: 8,
+    change: -8.7,
+    isHover: false,
+  },
+  {
+    icon: 'ri-stackshare-line',
+    color: 'error',
+    title: 'Deviated from route',
+    value: 27,
+    change: 4.3,
+    isHover: false,
+  },
+  {
+    icon: 'ri-timer-line',
+    color: 'info',
+    title: 'Late vehicles',
+    value: 13,
+    change: -2.5,
+    isHover: false,
+  },
+])
+</script>
+
+<template>
+  <VRow>
+    <VCol
+      v-for="(data, index) in logisticData"
+      :key="index"
+      cols="12"
+      md="3"
+      sm="6"
+    >
+      <div>
+        <VCard
+          class="logistics-card-statistics cursor-pointer"
+          :style="data.isHover ? `border-block-end-color: rgb(var(--v-theme-${data.color}))` : `border-block-end-color: rgba(var(--v-theme-${data.color}),0.7)`"
+          @mouseenter="data.isHover = true"
+          @mouseleave="data.isHover = false"
+        >
+          <VCardText>
+            <div class="d-flex align-center gap-x-4 mb-2">
+              <VAvatar
+                variant="tonal"
+                :color="data.color"
+                rounded
+              >
+                <VIcon
+                  :icon="data.icon"
+                  size="24"
+                />
+              </VAvatar>
+              <h4 class="text-h4">
+                {{ data.value }}
+              </h4>
+            </div>
+            <h6 class="text-h6 font-weight-regular">
+              {{ data.title }}
+            </h6>
+            <div class="d-flex align-center">
+              <div class="text-body-1 font-weight-medium me-2">
+                {{ data.change }}%
+              </div>
+              <span class="text-sm text-disabled">than last week</span>
+            </div>
+          </VCardText>
+        </VCard>
+      </div>
+    </VCol>
+  </VRow>
+</template>
+
+<style lang="scss" scoped>
+@use "@core-scss/base/mixins" as mixins;
+
+.logistics-card-statistics {
+  border-block-end-style: solid;
+  border-block-end-width: 2px;
+
+  &:hover {
+    border-block-end-width: 3px;
+    margin-block-end: -1px;
+
+    @include mixins.elevation(10);
+
+    transition: all 0.1s ease-out;
+  }
+}
+
+.skin--bordered{
+  .logistics-card-statistics {
+    &:hover {
+      margin-block-end: -2px;
+    }
+  }
+}
+</style>
--- a/resources/js/views/pages/cards/card-statistics/CardStatisticsSessionsBarCharts.vue
+++ b/resources/js/views/pages/cards/card-statistics/CardStatisticsSessionsBarCharts.vue
@@ -0,0 +1,93 @@
+<script setup>
+import { useTheme } from 'vuetify'
+
+const vuetifyTheme = useTheme()
+const currentTheme = computed(() => vuetifyTheme.current.value.colors)
+
+const series = [{
+  name: '2020',
+  data: [
+    45,
+    85,
+    65,
+    50,
+    70,
+  ],
+}]
+
+const chartOptions = computed(() => {
+  const backgroundColor = currentTheme.value['track-bg']
+  
+  return {
+    chart: {
+      type: 'bar',
+      stacked: false,
+      parentHeightOffset: 0,
+      toolbar: { show: false },
+    },
+    grid: {
+      show: false,
+      padding: {
+        top: -10,
+        left: -7,
+        right: 0,
+        bottom: 5,
+      },
+    },
+    colors: [
+      currentTheme.value.error,
+      currentTheme.value.primary,
+      currentTheme.value.error,
+      currentTheme.value.primary,
+      currentTheme.value.primary,
+    ],
+    plotOptions: {
+      bar: {
+        horizontal: false,
+        columnWidth: '20%',
+        borderRadius: 4,
+        distributed: true,
+        colors: {
+          backgroundBarColors: [
+            backgroundColor,
+            backgroundColor,
+            backgroundColor,
+            backgroundColor,
+            backgroundColor,
+          ],
+          backgroundBarRadius: 5,
+        },
+      },
+    },
+    legend: { show: false },
+    dataLabels: { enabled: false },
+    xaxis: {
+      labels: { show: false },
+      axisBorder: { show: false },
+      axisTicks: { show: false },
+    },
+    yaxis: { show: false },
+    tooltip: { enabled: false },
+  }
+})
+</script>
+
+<template>
+  <VCard>
+    <VCardText>
+      <h4 class="text-h4">
+        2,856
+      </h4>
+
+      <VueApexCharts
+        :options="chartOptions"
+        :series="series"
+        :height="110"
+      />
+
+      <h6 class="text-h6 text-center">
+        Sessions
+      </h6>
+    </VCardText>
+  </VCard>
+</template>
--- a/resources/js/views/pages/cards/card-statistics/CardStatisticsSessionsBarWithGapCharts.vue
+++ b/resources/js/views/pages/cards/card-statistics/CardStatisticsSessionsBarWithGapCharts.vue
@@ -0,0 +1,139 @@
+<script setup>
+import { useTheme } from 'vuetify'
+
+const vuetifyTheme = useTheme()
+const currentTheme = computed(() => vuetifyTheme.current.value.colors)
+
+const series = [
+  {
+    name: 'Earning',
+    data: [
+      180,
+      120,
+      284,
+      180,
+      102,
+    ],
+  },
+  {
+    name: 'Expense',
+    data: [
+      -100,
+      -130,
+      -100,
+      -60,
+      -120,
+    ],
+  },
+]
+
+const chartOptions = computed(() => {
+  return {
+    chart: {
+      type: 'bar',
+      stacked: true,
+      parentHeightOffset: 0,
+      toolbar: { show: false },
+    },
+    grid: {
+      show: false,
+      padding: {
+        top: -10,
+        left: -15,
+        right: 0,
+        bottom: 5,
+      },
+      yaxis: { lines: { show: false } },
+    },
+    xaxis: {
+      labels: { show: false },
+      axisTicks: { show: false },
+      axisBorder: { show: false },
+      categories: [
+        'Jan',
+        'Feb',
+        'Mar',
+        'Apr',
+        'May',
+      ],
+    },
+    legend: { show: false },
+    dataLabels: { enabled: false },
+    colors: [
+      currentTheme.value['on-background'],
+      currentTheme.value.error,
+    ],
+    plotOptions: {
+      bar: {
+        borderRadius: 4,
+        columnWidth: '25%',
+        borderRadiusApplication: 'around',
+        borderRadiusWhenStacked: 'all',
+      },
+    },
+    states: {
+      hover: { filter: { type: 'none' } },
+      active: { filter: { type: 'none' } },
+    },
+    yaxis: { labels: { show: false } },
+    stroke: { lineCap: 'round' },
+    tooltip: { enabled: false },
+    responsive: [{
+      breakpoint: 600,
+      options: {
+        chart: { height: 200 },
+        grid: {
+          padding: {
+            top: -12,
+            left: -15,
+            right: 0,
+            bottom: -10,
+          },
+        },
+        plotOptions: {
+          bar: {
+            borderRadius: 4,
+            columnWidth: '20%',
+            borderRadiusApplication: 'around',
+            borderRadiusWhenStacked: 'all',
+          },
+        },
+      },
+    }],
+  }
+})
+</script>
+
+<template>
+  <VCard>
+    <VCardText>
+      <h4 class="text-h4">
+        4,350
+      </h4>
+      <VueApexCharts
+        id="sessions-chart"
+        :options="chartOptions"
+        :series="series"
+        :height="110"
+      />
+
+      <h6 class="text-h6 text-center">
+        Sessions
+      </h6>
+    </VCardText>
+  </VCard>
+</template>
+
+<style lang="scss">
+#sessions-chart {
+  .apexcharts-series {
+    &[seriesName="Earning"] {
+      transform: scaleY(0.965);
+    }
+
+    &[seriesName="Expense"] {
+      transform: scaleY(1.035);
+    }
+  }
+}
+</style>
--- a/resources/js/views/pages/cards/card-statistics/CardStatisticsTotalGrowthAreaCharts.vue
+++ b/resources/js/views/pages/cards/card-statistics/CardStatisticsTotalGrowthAreaCharts.vue
@@ -0,0 +1,89 @@
+<script setup>
+import { useTheme } from 'vuetify'
+
+const vuetifyTheme = useTheme()
+const currentTheme = vuetifyTheme.current.value.colors
+
+const series = [{
+  name: 'Subscribers',
+  data: [
+    28,
+    40,
+    36,
+    52,
+    38,
+    60,
+    55,
+  ],
+}]
+
+const chartOptions = {
+  chart: {
+    parentHeightOffset: 0,
+    toolbar: { show: false },
+    sparkline: { enabled: true },
+  },
+  grid: { show: false },
+  dataLabels: { enabled: false },
+  stroke: {
+    curve: 'smooth',
+    width: 2.5,
+  },
+  fill: {
+    type: 'gradient',
+    gradient: {
+      shadeIntensity: 0.9,
+      opacityFrom: 0.5,
+      opacityTo: 0.1,
+      stops: [
+        0,
+        80,
+        100,
+      ],
+    },
+  },
+  xaxis: {
+    type: 'numeric',
+    lines: { show: false },
+    axisBorder: { show: false },
+    labels: { show: false },
+  },
+  yaxis: [{
+    y: 0,
+    offsetX: 0,
+    offsetY: 0,
+    padding: {
+      left: 0,
+      right: 0,
+    },
+  }],
+  tooltip: { enabled: false },
+  theme: {
+    monochrome: {
+      enabled: true,
+      color: currentTheme.success,
+      shadeTo: 'light',
+      shadeIntensity: 0.65,
+    },
+  },
+}
+</script>
+
+<template>
+  <VCard>
+    <VCardText>
+      <h4 class="text-h4">
+        42.5k
+      </h4>
+      <VueApexCharts
+        type="area"
+        :options="chartOptions"
+        :series="series"
+        :height="110"
+      />
+      <h6 class="text-h6 text-center">
+        Total Growth
+      </h6>
+    </VCardText>
+  </VCard>
+</template>
--- a/resources/js/views/pages/cards/card-statistics/CardStatisticsTotalProfitLineCharts.vue
+++ b/resources/js/views/pages/cards/card-statistics/CardStatisticsTotalProfitLineCharts.vue
@@ -0,0 +1,90 @@
+<script setup>
+import { useTheme } from 'vuetify'
+import { hexToRgb } from '@layouts/utils'
+
+const vuetifyTheme = useTheme()
+
+const series = [{
+  data: [
+    0,
+    20,
+    5,
+    30,
+    15,
+    45,
+  ],
+}]
+
+const chartOptions = computed(() => {
+  const currentTheme = vuetifyTheme.current.value.colors
+  const variableTheme = vuetifyTheme.current.value.variables
+  
+  return {
+    chart: {
+      parentHeightOffset: 0,
+      toolbar: { show: false },
+    },
+    tooltip: { enabled: false },
+    grid: {
+      borderColor: `rgba(${ hexToRgb(String(variableTheme['border-color'])) },${ variableTheme['border-opacity'] })`,
+      strokeDashArray: 6,
+      xaxis: { lines: { show: true } },
+      yaxis: { lines: { show: false } },
+      padding: {
+        top: -10,
+        left: -7,
+        right: 5,
+        bottom: 5,
+      },
+    },
+    stroke: {
+      width: 3,
+      lineCap: 'butt',
+      curve: 'straight',
+    },
+    colors: [currentTheme.primary],
+    markers: {
+      size: 6,
+      offsetY: 4,
+      offsetX: -2,
+      strokeWidth: 3,
+      colors: ['transparent'],
+      strokeColors: 'transparent',
+      discrete: [{
+        size: 5.5,
+        seriesIndex: 0,
+        strokeColor: currentTheme.primary,
+        fillColor: currentTheme.surface,
+        dataPointIndex: series[0].data.length - 1,
+      }],
+      hover: { size: 7 },
+    },
+    xaxis: {
+      labels: { show: false },
+      axisTicks: { show: false },
+      axisBorder: { show: false },
+    },
+    yaxis: { labels: { show: false } },
+  }
+})
+</script>
+
+<template>
+  <VCard>
+    <VCardText>
+      <h4 class="text-h4">
+        $86.4k
+      </h4>
+      <VueApexCharts
+        type="line"
+        :options="chartOptions"
+        :series="series"
+        :height="110"
+      />
+
+      <h6 class="text-h6 text-center">
+        Total Profit
+      </h6>
+    </VCardText>
+  </VCard>
+</template>
--- a/resources/js/views/pages/cards/card-statistics/CardStatisticsTotalRevenueLineCharts.vue
+++ b/resources/js/views/pages/cards/card-statistics/CardStatisticsTotalRevenueLineCharts.vue
@@ -0,0 +1,87 @@
+<script setup>
+import { useTheme } from 'vuetify'
+
+const vuetifyTheme = useTheme()
+
+const series = [{
+  data: [
+    28,
+    58,
+    40,
+    68,
+  ],
+}]
+
+const chartOptions = computed(() => {
+  const currentTheme = vuetifyTheme.current.value.colors
+  
+  return {
+    grid: {
+      show: false,
+      padding: {
+        left: -2,
+        top: -10,
+      },
+    },
+    chart: {
+      parentHeightOffset: 0,
+      type: 'line',
+      offsetX: -8,
+      dropShadow: {
+        enabled: true,
+        top: 10,
+        blur: 4,
+        color: currentTheme.primary,
+        opacity: 0.09,
+      },
+      toolbar: { show: false },
+    },
+    markers: {
+      size: 6,
+      colors: 'transparent',
+      strokeColors: 'transparent',
+      strokeWidth: 4,
+      discrete: [{
+        seriesIndex: 0,
+        dataPointIndex: series[0].data.length - 1,
+        fillColor: currentTheme.surface,
+        strokeColor: currentTheme.primary,
+        size: 6,
+      }],
+      hover: { size: 7 },
+    },
+    stroke: {
+      width: 5,
+      curve: 'smooth',
+      lineCap: 'round',
+    },
+    xaxis: {
+      axisBorder: { show: false },
+      axisTicks: { show: false },
+      labels: { show: false },
+    },
+    yaxis: { labels: { show: false } },
+    tooltip: { enabled: false },
+    colors: [currentTheme.primary],
+  }
+})
+</script>
+
+<template>
+  <VCard>
+    <VCardText>
+      <h4 class="text-h4">
+        $35.4k
+      </h4>
+      <VueApexCharts
+        :options="chartOptions"
+        :series="series"
+        :height="110"
+      />
+
+      <h6 class="text-h6 text-center">
+        Total Revenue
+      </h6>
+    </VCardText>
+  </VCard>
+</template>
--- a/resources/js/views/pages/cards/card-statistics/CardStatisticsTotalRevenueRadialBarCharts.vue
+++ b/resources/js/views/pages/cards/card-statistics/CardStatisticsTotalRevenueRadialBarCharts.vue
@@ -0,0 +1,68 @@
+<script setup>
+import { useTheme } from 'vuetify'
+import { hexToRgb } from '@layouts/utils'
+
+const vuetifyTheme = useTheme()
+const series = [78]
+
+const chartOptions = computed(() => {
+  const currentTheme = vuetifyTheme.current.value.colors
+  const variableTheme = vuetifyTheme.current.value.variables
+  
+  return {
+    chart: { sparkline: { enabled: true } },
+    colors: [currentTheme.info],
+    plotOptions: {
+      radialBar: {
+        startAngle: -90,
+        endAngle: 90,
+        hollow: { size: '65%' },
+        dataLabels: {
+          name: { show: false },
+          value: {
+            fontSize: '1.25rem',
+            fontWeight: '500',
+            offsetY: 0,
+            color: `rgba(${ hexToRgb(currentTheme['on-surface']) },${ variableTheme['high-emphasis-opacity'] })`,
+          },
+        },
+        track: { background: currentTheme['track-bg'] },
+      },
+    },
+    stroke: { lineCap: 'round' },
+  }
+})
+</script>
+
+<template>
+  <VCard>
+    <VCardText>
+      <h4 class="text-h4">
+        135k
+      </h4>
+      <VueApexCharts
+        id="stats-radial-bar-chart"
+        :options="chartOptions"
+        :series="series"
+        type="radialBar"
+        :height="150"
+      />
+
+      <h6 class="text-h6 text-center mt-6">
+        Total sales
+      </h6>
+    </VCardText>
+  </VCard>
+</template>
+
+  <style lang="scss">
+  #stats-radial-bar-chart {
+    .apexcharts-canvas {
+      .apexcharts-text {
+        &.apexcharts-datalabel-value {
+          font-weight: 600;
+        }
+      }
+    }
+  }
+  </style>
--- a/resources/js/views/pages/cards/card-statistics/CardStatisticsTotalSalesCharts.vue
+++ b/resources/js/views/pages/cards/card-statistics/CardStatisticsTotalSalesCharts.vue
@@ -0,0 +1,123 @@
+<script setup>
+import { useTheme } from 'vuetify'
+import { hexToRgb } from '@layouts/utils'
+
+const vuetifyTheme = useTheme()
+const currentTheme = computed(() => vuetifyTheme.current.value.colors)
+
+const chartOptions = computed(() => {
+  const variableTheme = ref(vuetifyTheme.current.value.variables)
+  const secondaryTextColor = `rgba(${ hexToRgb(currentTheme.value['on-surface']) },${ variableTheme.value['medium-emphasis-opacity'] })`
+  const primaryTextColor = `rgba(${ hexToRgb(currentTheme.value['on-surface']) },${ variableTheme.value['high-emphasis-opacity'] })`
+  
+  return {
+    chart: {
+      sparkline: { enabled: true },
+      animations: { enabled: false },
+    },
+    stroke: {
+      width: 5,
+      colors: [currentTheme.value.surface],
+    },
+    legend: { show: false },
+    tooltip: { enabled: true },
+    dataLabels: { enabled: false },
+    colors: [
+      currentTheme.value.primary,
+      currentTheme.value.info,
+      currentTheme.value.warning,
+      currentTheme.value.error,
+    ],
+    labels: [
+      'Comments',
+      'Replies',
+      'Shares',
+      'Likes',
+    ],
+    series: [
+      45,
+      10,
+      18,
+      27,
+    ],
+    grid: {
+      padding: {
+        top: -7,
+        bottom: 5,
+      },
+    },
+    states: {
+      hover: { filter: { type: 'none' } },
+      active: { filter: { type: 'none' } },
+    },
+    plotOptions: {
+      pie: {
+        expandOnClick: false,
+        donut: {
+          size: '75%',
+          labels: {
+            show: true,
+            value: {
+              fontSize: '1.15rem',
+              fontFamily: 'Inter',
+              fontWeight: 500,
+              offsetY: -18,
+              color: primaryTextColor,
+              formatter: o => `${ Number.parseInt(o) }%`,
+            },
+            name: {
+              offsetY: 18,
+              fontFamily: 'Inter',
+            },
+            total: {
+              label: '1 Quarter',
+              show: true,
+              color: secondaryTextColor,
+              fontSize: '0.75rem',
+              fontWeight: 400,
+              formatter: () => '28%',
+            },
+          },
+        },
+      },
+    },
+  }
+})
+</script>
+
+<template>
+  <VCard class="overflow-visible">
+    <VCardText class="d-flex justify-space-between align-center gap-3">
+      <div>
+        <h5 class="text-h5 mb-1">
+          Total Sales
+        </h5>
+
+        <div class="text-body-1 mb-3">
+          Calculated in last 7 days
+        </div>
+        <div class="d-flex align-center flex-wrap">
+          <h4 class="text-h4">
+            $25,980
+          </h4>
+          <div class="d-flex align-center">
+            <VIcon
+              icon="ri-arrow-up-s-line"
+              size="24"
+              color="success"
+            />
+            <span class="text-body-1 text-success">15.6%</span>
+          </div>
+        </div>
+      </div>
+
+      <VueApexCharts
+        type="donut"
+        :options="chartOptions"
+        :height="120"
+        :series="[45, 10, 18, 27]"
+        :width="110"
+      />
+    </VCardText>
+  </VCard>
+</template>
--- a/resources/js/views/pages/cards/card-statistics/CardStatisticsTransactions.vue
+++ b/resources/js/views/pages/cards/card-statistics/CardStatisticsTransactions.vue
@@ -0,0 +1,71 @@
+<script setup>
+const statistics = [
+  {
+    title: 'Sales',
+    stats: '245k',
+    icon: 'ri-pie-chart-2-line',
+    color: 'primary',
+  },
+  {
+    title: 'Customers',
+    stats: '12.5k',
+    icon: 'ri-group-line',
+    color: 'success',
+  },
+  {
+    title: 'Product',
+    stats: '1.54k',
+    icon: 'ri-macbook-line',
+    color: 'warning',
+  },
+  {
+    title: 'Revenue',
+    stats: '$88k',
+    icon: 'ri-money-dollar-circle-line',
+    color: 'info',
+  },
+]
+</script>
+
+<template>
+  <VCard title="Transactions">
+    <template #subtitle>
+      <p class="text-body-1 mb-0">
+        <span class="d-inline-block font-weight-medium text-high-emphasis">Total 48.5% Growth</span> <span class="text-high-emphasis">😎</span> this month
+      </p>
+    </template>
+    <VCardText>
+      <VRow>
+        <VCol
+          v-for="item in statistics"
+          :key="item.title"
+          cols="6"
+          md="3"
+        >
+          <div class="d-flex align-center">
+            <VAvatar
+              :color="item.color"
+              rounded
+              size="40"
+              class="elevation-2 me-3"
+            >
+              <VIcon
+                size="24"
+                :icon="item.icon"
+              />
+            </VAvatar>
+
+            <div class="d-flex flex-column">
+              <div class="text-body-1">
+                {{ item.title }}
+              </div>
+              <h5 class="text-h5">
+                {{ item.stats }}
+              </h5>
+            </div>
+          </div>
+        </VCol>
+      </VRow>
+    </VCardText>
+  </VCard>
+</template>