init wms

src/assets/images/favicon_io/site.webmanifest

@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

src/assets/images/logo-icon.svg

@@ -0,0 +1,8 @@
+<svg width="62" height="67" viewBox="0 0 62 67" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M30.604 66.378L0.00805664 48.1582V35.7825L30.604 54.0023V66.378Z" fill="#302C4D"/>
+<path d="M61.1996 48.1582L30.604 66.378V54.0023L61.1996 35.7825V48.1582Z" fill="#E66239"/>
+<path d="M30.5955 0L0 18.2198V30.5955L30.5955 12.3757V0Z" fill="#657E92"/>
+<path d="M61.191 18.2198L30.5955 0V12.3757L61.191 30.5955V18.2198Z" fill="#A3B2BE"/>
+<path d="M30.604 48.8457L0.00805664 30.6259V18.2498L30.604 36.47V48.8457Z" fill="#302C4D"/>
+<path d="M61.1996 30.6259L30.604 48.8457V36.47L61.1996 18.2498V30.6259Z" fill="#E66239"/>
+</svg>

src/assets/js/chart.js

@@ -0,0 +1,397 @@
+
+
+
+
+import ApexCharts from 'apexcharts';
+
+document.addEventListener('DOMContentLoaded', () => {
+    if (document.getElementById('salesPurchaseChart')) {
+         var options = {
+      series: [
+        {
+          name: 'Sales',
+          data: [44, 55, 57, 56, 61, 58, 63, 60, 66],
+        },
+        {
+          name: 'Purchase',
+          data: [76, 85, 101, 98, 87, 105, 91, 114, 94],
+        },
+
+      ],
+      colors: ['#f7a085', '#E66239'],
+      chart: {
+        type: 'bar',
+        height: 350,
+        width: '100%',
+        parentHeightOffset: 0,
+        toolbar: {
+          show: false,
+        },
+      },
+      grid: {
+        show: true,
+        borderColor: "#e2e8f0",
+
+      },
+      legend: {
+        show: true,
+        fontFamily: 'Poppins, serif',
+        fontWeight: 500,
+        markers: {
+          size: 5,
+          shape: 'square',
+          strokeWidth: 0,
+          fillColors: undefined,
+          customHTML: undefined,
+          onClick: undefined,
+          offsetX: -2,
+          offsetY: 0,
+        },
+      },
+      plotOptions: {
+        bar: {
+          horizontal: false,
+          columnWidth: '85%',
+          borderRadius: 3,
+          borderRadiusApplication: 'end',
+        },
+      },
+      dataLabels: {
+        enabled: false,
+      },
+      stroke: {
+        show: false,
+        width: 2,
+        colors: ['transparent'],
+      },
+      xaxis: {
+        categories: ['28 Jan', '29 Jan', '30 Jan', '31 Jan', '1 Feb', '2 Feb', '3 Feb', '4 Feb', '5 Feb'],
+        axisBorder: {
+          show: false,
+          color: "#e2e8f0",
+          height: 1,
+          width: '100%',
+          offsetX: 0,
+          offsetY: 0,
+        },
+        axisTicks: {
+          show: false,
+          borderType: 'solid',
+          color: "#e2e8f0",
+          height: 6,
+          offsetX: 0,
+          offsetY: 0,
+        },
+      },
+
+      yaxis: {
+        labels: {
+          formatter: function (e) {
+            return e + 'k';
+          },
+        },
+        title: {
+          text: '$ (thousands)' ,
+        },
+      },
+      fill: {
+        opacity: 1,
+      },
+     tooltip: {
+    			y: {
+    				formatter: function (val) {
+    					return "$ " + val + " thousands"
+    				}
+    			}
+    		},
+    };
+
+var chart = new ApexCharts(document.querySelector("#salesPurchaseChart"), options);
+
+chart.render();
+    }
+      if (document.getElementById('customerChart')) {
+    var options = {
+      series: [44, 55],
+      chart: {
+        height: 200,
+        type: 'radialBar',
+      },
+      colors: ['#5BE49B', '#E66239'],
+      plotOptions: {
+        radialBar: {
+          dataLabels: {
+            name: {
+              fontSize: '22px',
+            },
+            value: {
+              fontSize: '16px',
+            },
+            total: {
+              show: false,
+            },
+          },
+          hollow: {
+            margin: 3,
+            size: '40%',
+            background: 'transparent',
+            image: undefined,
+            imageWidth: 150,
+            imageHeight: 150,
+            imageOffsetX: 0,
+            imageOffsetY: 0,
+            imageClipped: true,
+            position: 'front',
+            dropShadow: {
+              enabled: false,
+              top: 0,
+              left: 0,
+              blur: 3,
+              opacity: 0.5,
+            },
+          },
+          track: {
+            show: true,
+            startAngle: undefined,
+            endAngle: undefined,
+            background: "#f0f0f0",
+            strokeWidth: '45%',
+            opacity: 1,
+            margin: 5,
+            dropShadow: {
+              enabled: false,
+              top: 0,
+              left: 0,
+              blur: 3,
+              opacity: 0.5,
+            },
+          },
+        },
+      },
+      fill: {
+        type: 'gradient',
+        gradient: {
+          shade: 'dark',
+          type: 'vertical',
+          gradientToColors: ['#007867', '#FFD666', '#FFAC82'],
+          stops: [0, 100],
+        },
+      },
+      stroke: {
+        lineCap: 'round',
+      },
+ labels: ['First Time', 'Return' ],
+
+    };
+
+    var chart = new ApexCharts(document.querySelector('#customerChart'), options);
+    chart.render();
+  }
+   if (document.getElementById('salesChart')) {
+   // --- Replace these arrays with your real monthly sales numbers (12 values each) ---
+    const salesThisYear = [42000, 53000, 48000, 61000, 72000, 69000, 74000, 82000, 78000, 86000, 91000, 97000];
+    const salesLastYear = [38000, 45000, 47000, 56000, 65000, 63000, 68000, 70000, 69000, 75000, 80000, 84000];
+
+    // Categories for x-axis (months)
+    const months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
+
+    const options = {
+      chart: {
+        id: 'sales-overview',
+        type: 'area',
+        height: 420,
+        zoom: { enabled: false },
+        toolbar: {
+          show: false,
+        },
+      },
+      colors: ['#E66239', '#198754'],
+      stroke: { width: [3, 2.5], curve: 'smooth' },
+      markers: { size: 4, hover: { sizeOffset: 2 } },
+      series: [
+        { name: 'This Year', data: salesThisYear },
+        { name: 'Last Year', data: salesLastYear }
+      ],
+      fill: {
+        type: 'gradient',
+        gradient: {
+          shadeIntensity: 1,
+          inverseColors: false,
+          opacityFrom: 0.45,
+          opacityTo: 0.05,
+          stops: [20, 60, 100]
+        }
+      },
+      yaxis: {
+        labels: { formatter: function (val) { return formatCurrency(val); } },
+        title: { text: 'Sales (INR)' }
+      },
+      xaxis: {
+        categories: months,
+        tickPlacement: 'on'
+      },
+      tooltip: {
+        shared: true,
+        y: {
+          formatter: function(val) { return formatCurrency(val); }
+        }
+      },
+      legend: {
+        position: 'top',
+        horizontalAlign: 'right'
+      },
+      responsive: [
+        {
+          breakpoint: 640,
+          options: {
+            chart: { height: 340 },
+            legend: { position: 'bottom', horizontalAlign: 'center' }
+          }
+        }
+      ]
+    };
+
+    // mount chart
+    const chart = new ApexCharts(document.querySelector("#salesChart"), options);
+    chart.render();
+
+    // helper: format currency with thousands separators (assumes INR — change locale/currency as needed)
+    function formatCurrency(value) {
+      if (value == null) return '-';
+      // ensure numeric
+      const n = Number(value);
+      return '₹' + n.toLocaleString('en-IN', { maximumFractionDigits: 0 });
+    }
+
+    // Example control: Randomize data (for demo)
+    document.getElementById('btn-random').addEventListener('click', () => {
+      const rand = () => Math.round((Math.random() * 80 + 20) * 1000); // 20k - 100k
+      const newThisYear = Array.from({length: 12}, rand);
+      const newLastYear = Array.from({length: 12}, rand);
+      chart.updateSeries([
+        { name: 'This Year', data: newThisYear },
+        { name: 'Last Year', data: newLastYear }
+      ]);
+    });
+
+    // Example control: Toggle to show only This Year
+    let showingBoth = true;
+    document.getElementById('btn-update').addEventListener('click', () => {
+      if (showingBoth) {
+        chart.updateSeries([{ name: 'This Year', data: salesThisYear }]);
+        document.getElementById('btn-update').textContent = 'Show Comparison';
+      } else {
+        chart.updateSeries([
+          { name: 'This Year', data: salesThisYear },
+          { name: 'Last Year', data: salesLastYear }
+        ]);
+        document.getElementById('btn-update').textContent = 'Show This Year Only';
+      }
+      showingBoth = !showingBoth;
+    });
+
+    // Public function: update chart with new monthly sales data
+    // call updateMonthlySales([arrayOf12], optionalCompareArrayOf12)
+    function updateMonthlySales(currentYearArray, compareYearArray = null) {
+      if (!Array.isArray(currentYearArray) || currentYearArray.length !== 12) {
+        console.warn('updateMonthlySales expects an array of 12 numbers for currentYearArray');
+        return;
+      }
+      const series = [{ name: 'This Year', data: currentYearArray }];
+      if (Array.isArray(compareYearArray) && compareYearArray.length === 12) {
+        series.push({ name: 'Last Year', data: compareYearArray });
+      }
+      chart.updateSeries(series);
+    }
+  }
+  if (document.getElementById('stockMovementChart')) {
+    var options = {
+          series: [{
+          name: 'Stock In',
+          data: [44, 55, 57, 56, 61, 58, 63, 60, 66]
+        }, {
+          name: 'Stock Out',
+          data: [76, 85, 101, 98, 87, 105, 91, 114, 94]
+        }],
+          chart: {
+          type: 'bar',
+          height: 350,
+          toolbar: {
+            show: false
+          },
+        },
+        plotOptions: {
+          bar: {
+            horizontal: false,
+            columnWidth: '55%',
+            borderRadius: 5,
+            borderRadiusApplication: 'end'
+          },
+        },
+        colors: ['#E66239', '#00C951'],
+        dataLabels: {
+          enabled: false
+        },
+        stroke: {
+          show: true,
+          width: 2,
+          colors: ['transparent']
+        },
+        xaxis: {
+          categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
+        },
+        yaxis: {
+          title: {
+            text: '$ (thousands)'
+          }
+        },
+        fill: {
+          opacity: 1
+        },
+        tooltip: {
+          y: {
+            formatter: function (val) {
+              return "$ " + val + " thousands"
+            }
+          }
+        }
+        };
+
+        var chart = new ApexCharts(document.querySelector("#stockMovementChart"), options);
+        chart.render();
+
+
+
+  }
+  if (document.getElementById('stockLevelTrendChart')) {
+    var options = {
+          series: [{
+          name: 'series1',
+          data: [0, 400, 800, 1200, 1600, 2000, 2400]
+        }, ],
+          chart: {
+          height: 350,
+          type: 'area',
+          toolbar: {
+            show: false
+          },
+        },
+        colors: ['#E66239'],
+        dataLabels: {
+          enabled: false
+        },
+        stroke: {
+          curve: 'smooth'
+        },
+       
+        tooltip: {
+          x: {
+            format: 'dd/MM/yy HH:mm'
+          },
+        },
+        };
+
+        var chart = new ApexCharts(document.querySelector("#stockLevelTrendChart"), options);
+        chart.render();
+  }
+});

src/assets/js/custom.js

@@ -0,0 +1,7 @@
+
+
+
+
+import "./chart.js";
+import "./sidebar.js"
+import "./dropzone.js"

src/assets/js/dropzone.js

@@ -0,0 +1,17 @@
+import Dropzone from "dropzone";
+
+Dropzone.autoDiscover = false;
+
+document.addEventListener("DOMContentLoaded", function () {
+  const dropzoneEl = document.querySelector('#my-dropzone');
+
+  if (!dropzoneEl) return; // ⛔ Stop if element not found
+
+  new Dropzone(dropzoneEl, {
+    url: 'https://httpbin.org/post',
+    maxFilesize: 5,
+    acceptedFiles: 'image/*',
+    addRemoveLinks: true,
+    autoProcessQueue: true,
+  });
+});

src/assets/js/main.js

@@ -0,0 +1,9 @@
+
+
+// Import Bootstrap JS
+import * as bootstrap from 'bootstrap';
+import './custom.js';
+
+
+// Import SCSS
+import '../scss/style.scss';

src/assets/js/sidebar.js

@@ -0,0 +1,61 @@
+const sidebar = document.getElementById('sidebar');
+    const content = document.getElementById('content');
+    const topbar = document.getElementById('topbar');
+    const toggleBtn = document.getElementById('toggleBtn');
+    const mobileBtn = document.getElementById('mobileBtn');
+    const overlay = document.getElementById('overlay');
+
+    // Desktop collapse
+    if (toggleBtn) {
+      toggleBtn.addEventListener('click', () => {
+        if (sidebar) sidebar.classList.toggle('collapsed');
+        if (content) content.classList.toggle('full');
+        if (topbar) topbar.classList.toggle('full');
+      });
+    }
+
+    // Mobile sidebar open
+    if (mobileBtn) {
+      mobileBtn.addEventListener('click', () => {
+        if (sidebar) sidebar.classList.add('mobile-show');
+        if (overlay) overlay.classList.add('show');
+      });
+    }
+
+    // 🔥 Click outside to close
+    if (overlay) {
+      overlay.addEventListener('click', () => {
+        if (sidebar) sidebar.classList.remove('mobile-show');
+        if (overlay) overlay.classList.remove('show');
+      });
+    }
+
+    // const currentPage = window.location.pathname.split('/').pop() || 'index.html';
+    // const navLinks = document.querySelectorAll('.sidebar .nav-link');
+
+    // if (navLinks.length > 0) {
+    //   navLinks.forEach(link => {
+    //     link.classList.remove('active');
+    //     if (link.getAttribute('href') === currentPage) {
+    //       link.classList.add('active');
+    //     }
+    //   });
+    // }
+
+
+    const currentPath = window.location.pathname.replace(/\/$/, '');
+
+const navLinks = document.querySelectorAll('.sidebar .nav-link');
+
+navLinks.forEach(link => {
+  link.classList.remove('active');
+
+  const linkPath = new URL(link.href).pathname.replace(/\/$/, '');
+
+  if (
+    linkPath === currentPath ||
+    (currentPath === '' && linkPath.endsWith('index.html'))
+  ) {
+    link.classList.add('active');
+  }
+});

src/assets/scss/_avatar.scss

@@ -0,0 +1,153 @@
+// Avatar
+.avatar {
+  position: relative;
+  display: inline-block;
+  width: 3rem;
+  height: 3rem;
+}
+
+// Avatar Size
+.avatar-xs {
+  width: $avatar-size-xs;
+  height: $avatar-size-xs;
+}
+
+.avatar-sm {
+  width: $avatar-size-sm;
+  height: $avatar-size-sm;
+}
+
+.avatar-md {
+  width: $avatar-size-md;
+  height: $avatar-size-md;
+}
+
+.avatar-lg {
+  width: $avatar-size-lg;
+  height: $avatar-size-lg;
+}
+
+.avatar-xl {
+  width: $avatar-size-xl;
+  height: $avatar-size-xl;
+}
+
+.avatar-xxl {
+  width: $avatar-size-xxl;
+  height: $avatar-size-xxl;
+}
+
+// Avatar img
+.avatar img {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+  object-fit: cover;
+}
+
+.avatar-indicators {
+  position: relative;
+}
+
+.avatar-indicators:before {
+  content: '';
+  position: absolute;
+  bottom: 0px;
+  right: 5%;
+  width: 30%;
+  height: 30%;
+  border-radius: 50%;
+  border: 2px solid var(--#{$prefix}white);
+  display: table;
+}
+
+.avatar-xxl.avatar-indicators:before {
+  bottom: 5px;
+  right: 17%;
+  width: 16%;
+  height: 16%;
+}
+
+// Avatar indicators
+.avatar-offline:before {
+  background-color: var(--#{$prefix}gray-400);
+}
+
+.avatar-online:before {
+  background-color: $success;
+}
+
+.avatar-away:before {
+  background-color: $warning;
+}
+
+.avatar-busy:before {
+  background-color: $danger;
+}
+
+.avatar-info:before {
+  background-color: $info;
+}
+
+// Avatar intials
+.avatar-initials {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  text-transform: uppercase;
+}
+
+// Color varient
+.avatar-primary .avatar-initials {
+  color: var(--#{$prefix}white);
+  background-color: $primary;
+}
+.avatar-secondary .avatar-initials {
+  color: var(--#{$prefix}white);
+  background-color: $secondary;
+}
+.avatar-success .avatar-initials {
+  color: var(--#{$prefix}white);
+  background-color: $success;
+}
+.avatar-warning .avatar-initials {
+  color: var(--#{$prefix}white);
+  background-color: $warning;
+}
+.avatar-info .avatar-initials {
+  color: var(--#{$prefix}white);
+  background-color: $info;
+}
+.avatar-danger .avatar-initials {
+  color: var(--#{$prefix}white);
+  background-color: $danger;
+}
+.avatar-light .avatar-initials {
+  color: var(--#{$prefix}white);
+  background-color: $light;
+}
+.avatar-dark .avatar-initials {
+  color: var(--#{$prefix}white);
+  background-color: $dark;
+}
+
+// Avatar Group
+.avatar-group .avatar + .avatar {
+  margin-left: -1.2rem;
+}
+
+.avatar-group .avatar:hover {
+  z-index: 2;
+}
+
+// Avatar border
+.avatar-group img,
+.avatar-group .avatar .avatar-initials {
+  border: 2px solid var(--#{$prefix}white);
+}

src/assets/scss/_border.scss

@@ -0,0 +1,34 @@
+// Border dashed
+
+.border-dashed {
+  --ds-border-style: dashed;
+}
+
+.timeline-vertical {
+  position: relative;
+  .timeline-item {
+    .timeline-bar {
+      position: absolute;
+      height: 100px;
+      left: 5px;
+      top: 24px;
+    }
+  }
+}
+.timeline-vertical-height {
+  .timeline-item {
+    .timeline-bar {
+      height: calc(100% - 1rem) !important;
+    }
+  }
+}
+
+// vr border
+.vr {
+  display: inline-block;
+  align-self: stretch;
+  width: $vr-border-width;
+  min-height: 1em;
+  background-color: var(--#{$prefix}border-color) !important;
+  opacity: $hr-opacity;
+}

src/assets/scss/_button.scss

@@ -0,0 +1,34 @@
+.btn-icon {
+  position: relative;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -ms-flex-align: center;
+  align-items: center;
+  font-size: 0.92969rem;
+  font-weight: 400;
+  width: 2.5rem;
+  height: 2.5rem;
+  padding: 0;
+}
+
+.btn-icon.btn-xs {
+  font-size: 0.75rem;
+  width: 1.75rem;
+  height: 1.75rem;
+}
+
+.btn-icon.btn-sm {
+  font-size: 0.875rem;
+  width: 2.1875rem;
+  height: 2.1875rem;
+}
+
+.btn-icon.btn-lg {
+  font-size: 1rem;
+  width: 3.36875rem;
+  height: 3.36875rem;
+}

src/assets/scss/_custom.scss

@@ -0,0 +1,143 @@
+
+.overlay {
+	position: fixed;
+	inset: 0;
+	background: rgba(0,0,0,.45);
+	backdrop-filter: blur(1px);
+	display: none;
+	z-index: 1030;
+}
+.overlay.show {
+	display: block;
+}
+.sidebar {
+	width: 240px;
+	background: $white;
+	transition: width .3s, left .3s;
+  border-right: 1px solid $gray-200;
+	height: 100vh;
+	position: fixed;
+	top: 0;
+	left: 0;
+	padding-top: 60px;
+	z-index: 1030;
+	.nav-text-space {
+		padding: 12px 16px;
+	}
+	.nav-link {
+		color: $gray-800;
+		padding: 8px 10px;
+		display: flex;
+		align-items: center;
+    font-size: 14px;
+    font-weight: 400;
+		gap: 12px;
+		white-space: nowrap;
+    margin: 1px 12px;
+    border-radius: 8px;
+
+		&:hover {
+			color: $primary;
+      background-color: rgba($primary, 0.095);
+		}
+			&.active {
+			color: $primary;
+      background-color: rgba($primary, 0.095);
+		}
+    .ti {
+      font-size: 18px;
+    }
+	}
+	.nav-text {
+		transition: opacity .2s;
+	}
+	.logo-area {
+		position: absolute;
+		top: 0;
+		left: 0;
+		height: 60px;
+		width: 100%;
+		background: $white;
+		display: flex;
+		align-items: center;
+		gap: 10px;
+		padding-left: 16px;
+		color: $gray-800;
+    border-bottom: 1px solid $gray-200;
+	}
+}
+/* width */
+::-webkit-scrollbar {
+  width: 4px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: #f1f1f1; 
+}
+ 
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: #888; 
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #555; 
+}
+.sidebar.collapsed {
+	.nav-text-space {
+		padding: 0px;
+	}
+	width: 60px;
+	.nav-link{
+		margin: 0 0px;
+		background-color: transparent;
+		padding: 8px 18px;
+	}
+	.nav-text {
+		display: none;
+	}
+	.logo-text {
+		display: none;
+	}
+}
+.topbar {
+	height: 60px;
+	margin-left: 240px;
+	// transition: margin-left .3s;
+}
+.topbar.full {
+	margin-left: 60px;
+}
+.content {
+	margin-left: 240px;
+	// transition: margin-left .3s;
+	// padding: 20px;
+}
+.content.full {
+	margin-left: 60px;
+}
+@media (max-width: 992px) {
+	.sidebar {
+		left: -240px;
+	}
+	.sidebar.mobile-show {
+		left: 0;
+	}
+	.topbar {
+		margin-left: 0 !important;
+		width: 100% !important;
+	}
+	.content {
+		margin-left: 0 !important;
+	}
+}
+
+
+@import "./avatar";
+@import "./button";
+@import "./icon-shape";
+@import "./utilities";
+@import "./dropzone";
+@import "./table";

src/assets/scss/_dropzone.scss

@@ -0,0 +1,53 @@
+@import "dropzone/dist/dropzone.css";
+
+// Dropzone
+.dropzone {
+  background: var(--#{$prefix}light) !important ;
+  .dz-message {
+    padding: 3rem !important;
+    margin: 0 !important;
+  }
+
+  .dz-remove {
+    :hover {
+      text-decoration: none;
+    }
+  }
+}
+
+// dropzone js
+
+.profile-dropzone {
+  height: 3rem;
+  width: 105px;
+  border: 2px dashed var(--#{$prefix}gray-300);
+  border-radius: 0.5rem;
+  min-height: 105px;
+  position: relative;
+  padding: 0;
+  .dz-message {
+    display: none;
+  }
+  .dz-preview {
+    margin: 0;
+    .dz-image {
+      position: absolute;
+      display: inline-block;
+      vertical-align: top;
+      margin: 0;
+      min-height: 60px;
+      height: 100px;
+      width: 100px;
+      top: 0;
+      left: 0;
+      border-radius: 0.5rem;
+    }
+    .dz-error-mark {
+      margin-left: 23px;
+      margin-top: -27px;
+    }
+  }
+}
+.dropzone .dz-preview .dz-remove:hover {
+  text-decoration: none;
+}

src/assets/scss/_icon-shape.scss

@@ -0,0 +1,50 @@
+// Icon shape
+
+.icon-xxs {
+  width: $icon-size-xxs;
+  height: $icon-size-xxs;
+  line-height: $icon-size-xxs;
+}
+.icon-xs {
+  width: $icon-size-xs;
+  height: $icon-size-xs;
+  line-height: $icon-size-xs;
+}
+.icon-sm {
+  width: $icon-size-sm;
+  height: $icon-size-sm;
+  line-height: $icon-size-sm;
+}
+.icon-md {
+  width: $icon-size-md;
+  height: $icon-size-md;
+  line-height: $icon-size-md;
+}
+.icon-lg {
+  width: $icon-size-lg;
+  height: $icon-size-lg;
+  line-height: $icon-size-lg;
+}
+.icon-xl {
+  width: $icon-size-xl;
+  height: $icon-size-xl;
+  line-height: $icon-size-xl;
+}
+.icon-xxl {
+  width: $icon-size-xxl;
+  height: $icon-size-xxl;
+  line-height: $icon-size-xxl;
+}
+
+.icon-xxxl {
+  width: $icon-size-xxxl;
+  height: $icon-size-xxxl;
+  line-height: $icon-size-xxxl;
+}
+.icon-shape {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  vertical-align: middle;
+}

src/assets/scss/_table.scss

@@ -0,0 +1,68 @@
+// Table
+table tr:last-child td {
+  border-bottom-width: 0px;
+}
+
+// Table centered
+.table-centered td,
+.table-centered th {
+  vertical-align: middle !important;
+}
+
+.table {
+  & thead {
+    background-color: var(--#{$prefix}gray-100);
+  }
+  & th {
+    border: 0px;
+    color: var(--#{$prefix}gray-600);
+  }
+}
+
+thead,
+tbody,
+tfoot,
+tr,
+td,
+th {
+  border-color: inherit;
+  border-style: solid;
+  border-width: 0;
+}
+
+.table-responsive {
+  /* width */
+  &::-webkit-scrollbar {
+    height: 6px;
+  }
+
+  /* Track */
+  &::-webkit-scrollbar-track {
+    background: var(--#{$prefix}gray-100);
+    border-radius: $border-radius-xl;
+  }
+
+  /* Handle */
+  &::-webkit-scrollbar-thumb {
+    background: var(--#{$prefix}gray-300);
+    border-radius: $border-radius-xl;
+  }
+
+  /* Handle on hover */
+  &::-webkit-scrollbar-thumb:hover {
+    background: var(--#{$prefix}gray-300);
+  }
+}
+
+.table-checkbox {
+  tbody {
+    tr:has(.form-check-input:checked) {
+      background-color: rgba(var(--#{$prefix}primary-rgb), $alpha: 0.15);
+    }
+  }
+}
+
+.table-hover > tbody > tr:hover:has(.form-check-input:checked) > * {
+  --ds-table-color-state: rgba(var(--#{$prefix}primary-rgb), $alpha: 1);
+  --ds-table-bg-state: rgba(var(--#{$prefix}primary-rgb), $alpha: 0.75); // Slightly darker on hover
+}

src/assets/scss/_utilities.scss

@@ -0,0 +1,102 @@
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/variables-dark";
+@import "bootstrap/scss/maps";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/utilities";
+
+$utilities: map-merge(
+  $utilities,
+  (
+    "font-size": (
+  rfs: true,
+  responsive: true,
+  property: font-size,
+  class: fs,
+  values: $font-sizes
+),
+"position": (
+  property: position,
+   responsive: true,
+  values: static relative absolute fixed sticky
+),
+"top": (
+  property: top,
+   responsive: true,
+  values: $position-values
+),
+"bottom": (
+  property: bottom,
+   responsive: true,
+  values: $position-values
+),
+"start": (
+  property: left,
+  class: start,
+   responsive: true,
+  
+  values: $position-values
+),
+"end": (
+  property: right,
+  class: end,
+   responsive: true,
+  values: $position-values
+),
+"translate-middle": (
+  property: transform,
+  class: translate-middle,
+   responsive: true,
+  values: (
+    null: translate(-50%, -50%),
+    x: translateX(-50%),
+    y: translateY(-50%),
+  )
+),
+"border": (
+    property: border,
+    responsive: true,
+    values: (
+      null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
+      0: 0
+    )
+  ),
+  "border-top": (
+    property: border-top,
+    responsive: true,
+    values: (
+      null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
+      0: 0
+    )
+  ),
+
+  "border-end": (
+    property: border-right,
+    responsive: true,
+    class: border-end,
+    values: (
+      null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
+      0: 0
+    )
+  ),
+  "border-bottom": (
+    property: border-bottom,
+    responsive: true,
+    values: (
+      null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
+      0: 0
+    )
+  ),
+  "border-start": (
+    property: border-left,
+    responsive: true,
+    class: border-start,
+    values: (
+      null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
+      0: 0
+    )
+  ),
+  )
+);
+
+@import "bootstrap/scss/utilities/api";

src/assets/scss/_variables.scss

@@ -0,0 +1,145 @@
+// Example: override Bootstrap color variables
+
+$gray-50: #fafafa !default;
+$gray-100: #f5f5f5 !default;
+$gray-200: #e5e5e5 !default;
+$gray-300: #d4d4d4 !default;
+$gray-400: #a3a3a3 !default;
+$gray-500: #737373 !default;
+$gray-600: #525252 !default;
+$gray-700: #404040 !default;
+$gray-800: #262626 !default;
+$gray-900: #171717 !default;
+$gray-950: #0a0a0a !default;
+
+$orange:       #E66239 !default;
+$red:          #FB2C36 !default;
+$green:        #00C951 !default;
+$cyan:         #00B8DB !default;
+$yellow:       #F0B100 !default;
+
+
+$primary:       $orange !default;
+$secondary:     $gray-600 !default;
+$success:       $green !default;
+$info:          $cyan !default;
+$warning:       $yellow !default;
+$danger:        $red !default;
+
+$min-contrast-ratio:   2.5 !default;
+$link-hover-decoration:                   none !default;
+$link-color:                              $gray-700 !default;
+$link-hover-color:                        $primary !default;
+
+
+$light: $gray-100 !default;
+$border-color: $gray-200 !default;
+$border-color-translucent:   $gray-200 !default;
+
+$enable-negative-margins: true !default;
+$enable-rounded:              true !default;
+
+$headings-font-weight: 400 !default;
+$grid-gutter-width:           2.5rem !default;
+
+// scss-docs-start position-map
+$position-values: (
+   0: 0,
+   10: 10%,
+   25: 25%,
+   50: 50%,
+    60: 60%,
+    65:65%,
+    70: 70%,
+   75: 75%,
+   100: 100%,
+   auto: auto
+) !default;
+// scss-docs-end position-map
+
+
+// scss-docs-start spacer-variables-maps
+$spacer: 1rem !default;
+$spacers: (
+   0: 0,
+   1: $spacer * 0.25,
+   // 4px
+   2: $spacer * 0.5,
+   // 8px
+   3: $spacer * 0.75,
+   // 16px
+   4: $spacer * 1,
+   // 24px
+   5: $spacer * 1.25,
+   // 32px
+   6: $spacer * 1.5,
+   // 40px
+   7: $spacer * 1.75,
+   // 48px
+   8: $spacer * 2,
+   // 64px
+   9: $spacer * 2.5,
+   // 80px
+   10: $spacer * 3,
+   // 96px
+   11: $spacer * 3.5,
+   // 128px
+   12: $spacer * 4,
+   // 160px
+   13: $spacer * 4.5,
+   // 192px
+   14: $spacer * 5,
+   // 240px
+   15: $spacer * 6
+   // 288px
+) !default;
+// scss-docs-end spacer-variables-maps
+
+$font-family-base: 'Poppins', sans-serif !default;
+$font-size-root:              null !default;
+$font-size-base:              .875rem !default; // Assumes the browser default, typically `16px`
+$font-size-sm:                $font-size-base * .85 !default;
+$font-size-lg:                $font-size-base * 1.25 !default;
+
+$font-xs: 0.75rem !default;
+
+$h1-font-size:                $font-size-base * 2.5 !default;
+$h2-font-size:                $font-size-base * 2 !default;
+$h3-font-size:                $font-size-base * 1.75 !default;
+$h4-font-size:                $font-size-base * 1.5 !default;
+$h5-font-size:                $font-size-base * 1.25 !default;
+$h6-font-size:                $font-size-base !default;
+
+// scss-docs-start border-radius-variables
+
+
+
+
+$input-btn-padding-y: 0.5rem !default;
+$input-btn-padding-x: .875rem !default;
+$table-th-font-weight:         400!default;
+
+
+
+$link-decoration:                         none !default;
+
+$link-hover-decoration:                   underline !default;
+
+
+// Icon
+$icon-size-xxs: 1rem !default;
+$icon-size-xs: 1.5rem !default;
+$icon-size-sm: 2rem !default;
+$icon-size-md: 2.5rem !default;
+$icon-size-lg: 3rem !default;
+$icon-size-xl: 3.5rem !default;
+$icon-size-xxl: 4rem !default;
+$icon-size-xxxl: 7rem !default;
+
+// Avatar
+$avatar-size-xs: 1.5rem !default;
+$avatar-size-sm: 2rem !default;
+$avatar-size-md: 2.5rem !default;
+$avatar-size-lg: 3.5rem !default;
+$avatar-size-xl: 5rem !default;
+$avatar-size-xxl: 7.5rem !default;

src/assets/scss/style.scss

@@ -0,0 +1,14 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+
+@import url('https://cdnjs.cloudflare.com/ajax/libs/tabler-icons/3.35.0/tabler-icons.min.css');
+// Import Bootstrap functions first
+@import "bootstrap/scss/functions";
+
+// Override Bootstrap variables here
+@import "./variables";
+
+// Import Bootstrap
+@import "bootstrap/scss/bootstrap";
+
+// Custom styles
+@import "./custom";