Initial commit

resources/js/views/dashboards/crm/CrmEarningReportsYearlyOverview.vue

@@ -0,0 +1,627 @@
+<script setup>
+import { useTheme } from "vuetify";
+import { hexToRgb } from "@layouts/utils";
+
+const vuetifyTheme = useTheme();
+const currentTab = ref(0);
+const refVueApexChart = ref();
+
+const cardBackgroundStyle = computed(() => {
+  const currentTheme = vuetifyTheme.current.value.colors;
+  const primaryColor = currentTheme.primary;
+
+  const createGradientColor = (color, opacity = 0.08) => {
+    if (color.includes("rgba")) {
+      return color.replace(/[\d\.]+\)$/g, `${opacity})`);
+    }
+    if (color.startsWith("#")) {
+      return `rgba(${hexToRgb(color)}, ${opacity})`;
+    }
+    if (color.includes("rgb")) {
+      return color.replace("rgb", "rgba").replace(")", `, ${opacity})`);
+    }
+    return `rgba(${hexToRgb(color)}, ${opacity})`;
+  };
+
+  const gradientColor1 = createGradientColor(primaryColor, 0.12);
+  const gradientColor2 = createGradientColor(primaryColor, 0.04);
+
+  return {
+    background: `linear-gradient(135deg, 
+      ${gradientColor1} 0%, 
+      ${gradientColor2} 50%,
+      ${gradientColor1} 100%)`,
+  };
+});
+
+const chartConfigs = computed(() => {
+  const currentTheme = vuetifyTheme.current.value.colors;
+  const variableTheme = vuetifyTheme.current.value.variables;
+  const labelPrimaryColor = `rgba(${hexToRgb(currentTheme.primary)},${
+    variableTheme["dragged-opacity"]
+  })`;
+  const legendColor = `rgba(${hexToRgb(currentTheme["on-background"])},${
+    variableTheme["high-emphasis-opacity"]
+  })`;
+  const borderColor = `rgba(${hexToRgb(
+    String(variableTheme["border-color"])
+  )},${variableTheme["border-opacity"]})`;
+  const labelColor = `rgba(${hexToRgb(currentTheme["on-surface"])},${
+    variableTheme["disabled-opacity"]
+  })`;
+
+  return [
+    {
+      title: "Orders",
+      icon: "tabler-shopping-cart",
+      chartOptions: {
+        chart: {
+          parentHeightOffset: 0,
+          type: "bar",
+          toolbar: { show: false },
+        },
+        plotOptions: {
+          bar: {
+            columnWidth: "32%",
+            borderRadiusApplication: "end",
+            borderRadius: 4,
+            distributed: true,
+            dataLabels: { position: "top" },
+          },
+        },
+        grid: {
+          show: false,
+          padding: {
+            top: 0,
+            bottom: 0,
+            left: -10,
+            right: -10,
+          },
+        },
+        colors: [
+          labelPrimaryColor,
+          labelPrimaryColor,
+          `rgba(${hexToRgb(currentTheme.primary)}, 1)`,
+          labelPrimaryColor,
+          labelPrimaryColor,
+          labelPrimaryColor,
+          labelPrimaryColor,
+          labelPrimaryColor,
+          labelPrimaryColor,
+        ],
+        dataLabels: {
+          enabled: true,
+          formatter(val) {
+            return `${val}k`;
+          },
+          offsetY: -25,
+          style: {
+            fontSize: "15px",
+            colors: [legendColor],
+            fontWeight: "600",
+            fontFamily: "Public Sans",
+          },
+        },
+        legend: { show: false },
+        tooltip: { enabled: false },
+        xaxis: {
+          categories: [
+            "Jan",
+            "Feb",
+            "Mar",
+            "Apr",
+            "May",
+            "Jun",
+            "Jul",
+            "Aug",
+            "Sep",
+          ],
+          axisBorder: {
+            show: true,
+            color: borderColor,
+          },
+          axisTicks: { show: false },
+          labels: {
+            style: {
+              colors: labelColor,
+              fontSize: "13px",
+              fontFamily: "Public Sans",
+            },
+          },
+        },
+        yaxis: {
+          labels: {
+            offsetX: -15,
+            formatter(val) {
+              return `${val / 1}k`;
+            },
+            style: {
+              fontSize: "13px",
+              colors: labelColor,
+              fontFamily: "Public Sans",
+            },
+            min: 0,
+            max: 60000,
+            tickAmount: 6,
+          },
+        },
+        responsive: [
+          {
+            breakpoint: 1441,
+            options: { plotOptions: { bar: { columnWidth: "41%" } } },
+          },
+          {
+            breakpoint: 590,
+            options: {
+              plotOptions: { bar: { columnWidth: "61%" } },
+              yaxis: { labels: { show: false } },
+              grid: {
+                padding: {
+                  right: 0,
+                  left: -20,
+                },
+              },
+              dataLabels: {
+                style: {
+                  fontSize: "12px",
+                  fontWeight: "400",
+                },
+              },
+            },
+          },
+        ],
+      },
+      series: [
+        {
+          data: [28, 10, 45, 38, 15, 30, 35, 30, 8],
+        },
+      ],
+    },
+    {
+      title: "Sales",
+      icon: "tabler-chart-bar",
+      chartOptions: {
+        chart: {
+          parentHeightOffset: 0,
+          type: "bar",
+          toolbar: { show: false },
+        },
+        plotOptions: {
+          bar: {
+            columnWidth: "32%",
+            borderRadiusApplication: "end",
+            borderRadius: 4,
+            distributed: true,
+            dataLabels: { position: "top" },
+          },
+        },
+        grid: {
+          show: false,
+          padding: {
+            top: 0,
+            bottom: 0,
+            left: -10,
+            right: -10,
+          },
+        },
+        colors: [
+          labelPrimaryColor,
+          labelPrimaryColor,
+          labelPrimaryColor,
+          labelPrimaryColor,
+          labelPrimaryColor,
+          labelPrimaryColor,
+          `rgba(${hexToRgb(currentTheme.primary)}, 1)`,
+          labelPrimaryColor,
+          labelPrimaryColor,
+        ],
+        dataLabels: {
+          enabled: true,
+          formatter(val) {
+            return `${val}k`;
+          },
+          offsetY: -25,
+          style: {
+            fontSize: "15px",
+            colors: [legendColor],
+            fontWeight: "600",
+            fontFamily: "Public Sans",
+          },
+        },
+        legend: { show: false },
+        tooltip: { enabled: false },
+        xaxis: {
+          categories: [
+            "Jan",
+            "Feb",
+            "Mar",
+            "Apr",
+            "May",
+            "Jun",
+            "Jul",
+            "Aug",
+            "Sep",
+          ],
+          axisBorder: {
+            show: true,
+            color: borderColor,
+          },
+          axisTicks: { show: false },
+          labels: {
+            style: {
+              colors: labelColor,
+              fontSize: "13px",
+              fontFamily: "Public Sans",
+            },
+          },
+        },
+        yaxis: {
+          labels: {
+            offsetX: -15,
+            formatter(val) {
+              return `${val / 1}k`;
+            },
+            style: {
+              fontSize: "13px",
+              colors: labelColor,
+              fontFamily: "Public Sans",
+            },
+            min: 0,
+            max: 60000,
+            tickAmount: 6,
+          },
+        },
+        responsive: [
+          {
+            breakpoint: 1441,
+            options: { plotOptions: { bar: { columnWidth: "41%" } } },
+          },
+          {
+            breakpoint: 590,
+            options: {
+              plotOptions: { bar: { columnWidth: "61%" } },
+              grid: { padding: { right: 0 } },
+              dataLabels: {
+                style: {
+                  fontSize: "12px",
+                  fontWeight: "400",
+                },
+              },
+              yaxis: { labels: { show: false } },
+            },
+          },
+        ],
+      },
+      series: [
+        {
+          data: [35, 25, 15, 40, 42, 25, 48, 8, 30],
+        },
+      ],
+    },
+    {
+      title: "Profit",
+      icon: "tabler-currency-dollar",
+      chartOptions: {
+        chart: {
+          parentHeightOffset: 0,
+          type: "bar",
+          toolbar: { show: false },
+        },
+        plotOptions: {
+          bar: {
+            columnWidth: "32%",
+            borderRadiusApplication: "end",
+            borderRadius: 4,
+            distributed: true,
+            dataLabels: { position: "top" },
+          },
+        },
+        grid: {
+          show: false,
+          padding: {
+            top: 0,
+            bottom: 0,
+            left: -10,
+            right: -10,
+          },
+        },
+        colors: [
+          labelPrimaryColor,
+          labelPrimaryColor,
+          labelPrimaryColor,
+          labelPrimaryColor,
+          `rgba(${hexToRgb(currentTheme.primary)}, 1)`,
+          labelPrimaryColor,
+          labelPrimaryColor,
+          labelPrimaryColor,
+          labelPrimaryColor,
+        ],
+        dataLabels: {
+          enabled: true,
+          formatter(val) {
+            return `${val}k`;
+          },
+          offsetY: -25,
+          style: {
+            fontSize: "15px",
+            colors: [legendColor],
+            fontWeight: "600",
+            fontFamily: "Public Sans",
+          },
+        },
+        legend: { show: false },
+        tooltip: { enabled: false },
+        xaxis: {
+          categories: [
+            "Jan",
+            "Feb",
+            "Mar",
+            "Apr",
+            "May",
+            "Jun",
+            "Jul",
+            "Aug",
+            "Sep",
+          ],
+          axisBorder: {
+            show: true,
+            color: borderColor,
+          },
+          axisTicks: { show: false },
+          labels: {
+            style: {
+              colors: labelColor,
+              fontSize: "13px",
+              fontFamily: "Public Sans",
+            },
+          },
+        },
+        yaxis: {
+          labels: {
+            offsetX: -15,
+            formatter(val) {
+              return `${val / 1}k`;
+            },
+            style: {
+              fontSize: "13px",
+              colors: labelColor,
+              fontFamily: "Public Sans",
+            },
+            min: 0,
+            max: 60000,
+            tickAmount: 6,
+          },
+        },
+        responsive: [
+          {
+            breakpoint: 1441,
+            options: { plotOptions: { bar: { columnWidth: "41%" } } },
+          },
+          {
+            breakpoint: 590,
+            options: {
+              plotOptions: { bar: { columnWidth: "61%" } },
+              grid: { padding: { right: 0 } },
+              dataLabels: {
+                style: {
+                  fontSize: "12px",
+                  fontWeight: "400",
+                },
+              },
+              yaxis: { labels: { show: false } },
+            },
+          },
+        ],
+      },
+      series: [
+        {
+          data: [10, 22, 27, 33, 42, 32, 27, 22, 8],
+        },
+      ],
+    },
+    {
+      title: "Income",
+      icon: "tabler-chart-pie-2",
+      chartOptions: {
+        chart: {
+          parentHeightOffset: 0,
+          type: "bar",
+          toolbar: { show: false },
+        },
+        plotOptions: {
+          bar: {
+            columnWidth: "32%",
+            borderRadius: 6,
+            distributed: true,
+            borderRadiusApplication: "end",
+            dataLabels: { position: "top" },
+          },
+        },
+        grid: {
+          show: false,
+          padding: {
+            top: 0,
+            bottom: 0,
+            left: -10,
+            right: -10,
+          },
+        },
+        colors: [
+          labelPrimaryColor,
+          labelPrimaryColor,
+          labelPrimaryColor,
+          labelPrimaryColor,
+          labelPrimaryColor,
+          labelPrimaryColor,
+          labelPrimaryColor,
+          labelPrimaryColor,
+          `rgba(${hexToRgb(currentTheme.primary)}, 1)`,
+        ],
+        dataLabels: {
+          enabled: true,
+          formatter(val) {
+            return `${val}k`;
+          },
+          offsetY: -25,
+          style: {
+            fontSize: "15px",
+            colors: [legendColor],
+            fontWeight: "600",
+            fontFamily: "Public Sans",
+          },
+        },
+        legend: { show: false },
+        tooltip: { enabled: false },
+        xaxis: {
+          categories: [
+            "Jan",
+            "Feb",
+            "Mar",
+            "Apr",
+            "May",
+            "Jun",
+            "Jul",
+            "Aug",
+            "Sep",
+          ],
+          axisBorder: {
+            show: true,
+            color: borderColor,
+          },
+          axisTicks: { show: false },
+          labels: {
+            style: {
+              colors: labelColor,
+              fontSize: "13px",
+              fontFamily: "Public Sans",
+            },
+          },
+        },
+        yaxis: {
+          labels: {
+            offsetX: -15,
+            formatter(val) {
+              return `${val / 1}k`;
+            },
+            style: {
+              fontSize: "13px",
+              colors: labelColor,
+              fontFamily: "Public Sans",
+            },
+            min: 0,
+            max: 60000,
+            tickAmount: 6,
+          },
+        },
+        responsive: [
+          {
+            breakpoint: 1441,
+            options: { plotOptions: { bar: { columnWidth: "41%" } } },
+          },
+          {
+            breakpoint: 590,
+            options: {
+              plotOptions: { bar: { columnWidth: "50%" } },
+              dataLabels: {
+                style: {
+                  fontSize: "12px",
+                  fontWeight: "400",
+                },
+              },
+              grid: { padding: { right: 0 } },
+              yaxis: { labels: { show: false } },
+            },
+          },
+        ],
+      },
+      series: [
+        {
+          data: [5, 9, 12, 18, 20, 25, 30, 36, 48],
+        },
+      ],
+    },
+  ];
+});
+
+const moreList = [
+  {
+    title: "View More",
+    value: "View More",
+  },
+  {
+    title: "Delete",
+    value: "Delete",
+  },
+];
+</script>
+
+<template>
+  <VCard
+    title="Earning Reports"
+    subtitle="Yearly Earnings Overview"
+    :style="cardBackgroundStyle"
+  >
+    <template #append>
+      <div class="mt-n4 me-n2">
+        <MoreBtn size="small" :menu-list="moreList" />
+      </div>
+    </template>
+
+    <VCardText>
+      <VSlideGroup v-model="currentTab" show-arrows mandatory class="mb-10">
+        <VSlideGroupItem
+          v-for="(report, index) in chartConfigs"
+          :key="report.title"
+          v-slot="{ isSelected, toggle }"
+          :value="index"
+        >
+          <div
+            style="block-size: 100px; inline-size: 110px"
+            :style="
+              isSelected
+                ? 'border-color:rgb(var(--v-theme-primary)) !important'
+                : ''
+            "
+            :class="isSelected ? 'border' : 'border border-dashed'"
+            class="d-flex flex-column justify-center align-center cursor-pointer rounded py-4 px-5 me-4"
+            @click="toggle"
+          >
+            <VAvatar
+              rounded
+              size="38"
+              :color="isSelected ? 'primary' : ''"
+              variant="tonal"
+              class="mb-2"
+            >
+              <VIcon size="22" :icon="report.icon" />
+            </VAvatar>
+            <h6 class="text-base font-weight-medium mb-0">
+              {{ report.title }}
+            </h6>
+          </div>
+        </VSlideGroupItem>
+
+        <!-- 👉 slider more -->
+        <VSlideGroupItem>
+          <div
+            style="block-size: 100px; inline-size: 110px"
+            class="d-flex flex-column justify-center align-center rounded border border-dashed py-4 px-5"
+          >
+            <VAvatar rounded size="38" variant="tonal">
+              <VIcon size="22" icon="tabler-plus" />
+            </VAvatar>
+          </div>
+        </VSlideGroupItem>
+      </VSlideGroup>
+
+      <VueApexCharts
+        ref="refVueApexChart"
+        :key="currentTab"
+        :options="chartConfigs[Number(currentTab)].chartOptions"
+        :series="chartConfigs[Number(currentTab)].series"
+        height="230"
+        class="mt-3"
+      />
+    </VCardText>
+  </VCard>
+</template>