diff --git a/package-lock.json b/package-lock.json index 08ac4e0..add0731 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,18 +9,30 @@ "version": "1.0.0", "license": "ISC", "dependencies": { - "admin-lte": "^4.0.0-rc7" + "@floating-ui/dom": "^1.7.4", + "@fullcalendar/core": "^6.1.19", + "@fullcalendar/daygrid": "^6.1.19", + "@fullcalendar/interaction": "^6.1.19", + "@fullcalendar/list": "^6.1.19", + "@fullcalendar/timegrid": "^6.1.19", + "admin-lte": "^4.0.0-rc7", + "alpinejs": "^3.14.9", + "apexcharts": "^5.3.5", + "flatpickr": "^4.6.13", + "jsvectormap": "^1.7.0", + "prismjs": "^1.30.0", + "swiper": "^12.0.3" }, "devDependencies": { "@popperjs/core": "^2.11.8", - "@tailwindcss/vite": "^4.0.0", + "@tailwindcss/vite": "^4.1.12", "axios": "^1.11.0", "bootstrap": "^5.3.8", "bootstrap-icons": "^1.13.1", "concurrently": "^9.0.1", "laravel-vite-plugin": "^2.1.0", "sass": "^1.56.1", - "tailwindcss": "^4.0.0", + "tailwindcss": "^4.1.12", "vite": "^7.3.1" } }, @@ -440,6 +452,79 @@ "node": ">=18" } }, + "node_modules/@floating-ui/core": { + "version": "1.7.5", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.5.tgz", + "integrity": "sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==", + "license": "MIT", + "dependencies": { + "@floating-ui/utils": "^0.2.11" + } + }, + "node_modules/@floating-ui/dom": { + "version": "1.7.6", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.6.tgz", + "integrity": "sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==", + "license": "MIT", + "dependencies": { + "@floating-ui/core": "^1.7.5", + "@floating-ui/utils": "^0.2.11" + } + }, + "node_modules/@floating-ui/utils": { + "version": "0.2.11", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.11.tgz", + "integrity": "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==", + "license": "MIT" + }, + "node_modules/@fullcalendar/core": { + "version": "6.1.20", + "resolved": "https://registry.npmjs.org/@fullcalendar/core/-/core-6.1.20.tgz", + "integrity": "sha512-1cukXLlePFiJ8YKXn/4tMKsy0etxYLCkXk8nUCFi11nRONF2Ba2CD5b21/ovtOO2tL6afTJfwmc1ed3HG7eB1g==", + "license": "MIT", + "dependencies": { + "preact": "~10.12.1" + } + }, + "node_modules/@fullcalendar/daygrid": { + "version": "6.1.20", + "resolved": "https://registry.npmjs.org/@fullcalendar/daygrid/-/daygrid-6.1.20.tgz", + "integrity": "sha512-AO9vqhkLP77EesmJzuU+IGXgxNulsA8mgQHynclJ8U70vSwAVnbcLG9qftiTAFSlZjiY/NvhE7sflve6cJelyQ==", + "license": "MIT", + "peerDependencies": { + "@fullcalendar/core": "~6.1.20" + } + }, + "node_modules/@fullcalendar/interaction": { + "version": "6.1.20", + "resolved": "https://registry.npmjs.org/@fullcalendar/interaction/-/interaction-6.1.20.tgz", + "integrity": "sha512-p6txmc5txL0bMiPaJxe2ip6o0T384TyoD2KGdsU6UjZ5yoBlaY+dg7kxfnYKpYMzEJLG58n+URrHr2PgNL2fyA==", + "license": "MIT", + "peerDependencies": { + "@fullcalendar/core": "~6.1.20" + } + }, + "node_modules/@fullcalendar/list": { + "version": "6.1.20", + "resolved": "https://registry.npmjs.org/@fullcalendar/list/-/list-6.1.20.tgz", + "integrity": "sha512-7Hzkbb7uuSqrXwTyD0Ld/7SwWNxPD6SlU548vtkIpH55rZ4qquwtwYdMPgorHos5OynHA4OUrZNcH51CjrCf2g==", + "license": "MIT", + "peerDependencies": { + "@fullcalendar/core": "~6.1.20" + } + }, + "node_modules/@fullcalendar/timegrid": { + "version": "6.1.20", + "resolved": "https://registry.npmjs.org/@fullcalendar/timegrid/-/timegrid-6.1.20.tgz", + "integrity": "sha512-4H+/MWbz3ntA50lrPif+7TsvMeX3R1GSYjiLULz0+zEJ7/Yfd9pupZmAwUs/PBpA6aAcFmeRr0laWfcz1a9V1A==", + "license": "MIT", + "dependencies": { + "@fullcalendar/daygrid": "~6.1.20" + }, + "peerDependencies": { + "@fullcalendar/core": "~6.1.20" + } + }, "node_modules/@jridgewell/gen-mapping": { "version": "0.3.13", "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz", @@ -1380,12 +1465,36 @@ "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==", "dev": true }, + "node_modules/@vue/reactivity": { + "version": "3.1.5", + "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.1.5.tgz", + "integrity": "sha512-1tdfLmNjWG6t/CsPldh+foumYFo3cpyCHgBYQ34ylaMsJ+SNHQ1kApMIa8jN+i593zQuaw3AdWH0nJTARzCFhg==", + "license": "MIT", + "dependencies": { + "@vue/shared": "3.1.5" + } + }, + "node_modules/@vue/shared": { + "version": "3.1.5", + "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.1.5.tgz", + "integrity": "sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA==", + "license": "MIT" + }, "node_modules/admin-lte": { "version": "4.0.0-rc7", "resolved": "https://registry.npmjs.org/admin-lte/-/admin-lte-4.0.0-rc7.tgz", "integrity": "sha512-v7JYiuxONrpXxvoRVhFJuLpZ9xoBvQ1bHkE1lanVR8+/AqBATWXU3vOO0TAWOoxhG6/26JkU5otXq0Z2SRQjZQ==", "license": "MIT" }, + "node_modules/alpinejs": { + "version": "3.15.8", + "resolved": "https://registry.npmjs.org/alpinejs/-/alpinejs-3.15.8.tgz", + "integrity": "sha512-zxIfCRTBGvF1CCLIOMQOxAyBuqibxSEwS6Jm1a3HGA9rgrJVcjEWlwLcQTVGAWGS8YhAsTRLVrtQ5a5QT9bSSQ==", + "license": "MIT", + "dependencies": { + "@vue/reactivity": "~3.1.1" + } + }, "node_modules/ansi-regex": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", @@ -1410,6 +1519,12 @@ "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, + "node_modules/apexcharts": { + "version": "5.10.4", + "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-5.10.4.tgz", + "integrity": "sha512-gt0VUqZ2+mr25ScbUcKZgJr96jKYm4vjOcxEWCEh/E5F4dWqhyo3dBhPRvNNnkKiWxkMd2cBwj3ZYH3rK39fkA==", + "license": "SEE LICENSE IN LICENSE" + }, "node_modules/asynckit": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", @@ -1751,6 +1866,12 @@ } } }, + "node_modules/flatpickr": { + "version": "4.6.13", + "resolved": "https://registry.npmjs.org/flatpickr/-/flatpickr-4.6.13.tgz", + "integrity": "sha512-97PMG/aywoYpB4IvbvUJi0RQi8vearvU0oov1WW3k0WZPBMrTQVqekSX5CjSG/M4Q3i6A/0FKXC7RyAoAUUSPw==", + "license": "MIT" + }, "node_modules/follow-redirects": { "version": "1.15.11", "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.11.tgz", @@ -1969,6 +2090,12 @@ "jiti": "lib/jiti-cli.mjs" } }, + "node_modules/jsvectormap": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/jsvectormap/-/jsvectormap-1.7.0.tgz", + "integrity": "sha512-8VmL3Uuen08Es9xb2N6Wdc32TrQDGPXYCIdTB126jAhTJsYd/4r4Mc63VQA3qHxG0p4zeCI8sFO5XRsdjljMJg==", + "license": "MIT" + }, "node_modules/laravel-vite-plugin": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/laravel-vite-plugin/-/laravel-vite-plugin-2.1.0.tgz", @@ -2348,6 +2475,25 @@ "node": "^10 || ^12 || >=14" } }, + "node_modules/preact": { + "version": "10.12.1", + "resolved": "https://registry.npmjs.org/preact/-/preact-10.12.1.tgz", + "integrity": "sha512-l8386ixSsBdbreOAkqtrwqHwdvR35ID8c3rKPa8lCWuO86dBi32QWHV4vfsZK1utLLFMvw+Z5Ad4XLkZzchscg==", + "license": "MIT", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/preact" + } + }, + "node_modules/prismjs": { + "version": "1.30.0", + "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.30.0.tgz", + "integrity": "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==", + "license": "MIT", + "engines": { + "node": ">=6" + } + }, "node_modules/proxy-from-env": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", @@ -2511,6 +2657,25 @@ "url": "https://github.com/chalk/supports-color?sponsor=1" } }, + "node_modules/swiper": { + "version": "12.1.2", + "resolved": "https://registry.npmjs.org/swiper/-/swiper-12.1.2.tgz", + "integrity": "sha512-4gILrI3vXZqoZh71I1PALqukCFgk+gpOwe1tOvz5uE9kHtl2gTDzmYflYCwWvR4LOvCrJi6UEEU+gnuW5BtkgQ==", + "funding": [ + { + "type": "patreon", + "url": "https://www.patreon.com/swiperjs" + }, + { + "type": "open_collective", + "url": "http://opencollective.com/swiper" + } + ], + "license": "MIT", + "engines": { + "node": ">= 4.7.0" + } + }, "node_modules/tailwindcss": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.2.0.tgz", diff --git a/package.json b/package.json index 62df891..3d02113 100644 --- a/package.json +++ b/package.json @@ -8,18 +8,30 @@ }, "devDependencies": { "@popperjs/core": "^2.11.8", - "@tailwindcss/vite": "^4.0.0", + "@tailwindcss/vite": "^4.1.12", "axios": "^1.11.0", "bootstrap": "^5.3.8", "bootstrap-icons": "^1.13.1", "concurrently": "^9.0.1", "laravel-vite-plugin": "^2.1.0", "sass": "^1.56.1", - "tailwindcss": "^4.0.0", + "tailwindcss": "^4.1.12", "vite": "^7.3.1" }, "dependencies": { - "admin-lte": "^4.0.0-rc7" + "@floating-ui/dom": "^1.7.4", + "@fullcalendar/core": "^6.1.19", + "@fullcalendar/daygrid": "^6.1.19", + "@fullcalendar/interaction": "^6.1.19", + "@fullcalendar/list": "^6.1.19", + "@fullcalendar/timegrid": "^6.1.19", + "admin-lte": "^4.0.0-rc7", + "alpinejs": "^3.14.9", + "apexcharts": "^5.3.5", + "flatpickr": "^4.6.13", + "jsvectormap": "^1.7.0", + "prismjs": "^1.30.0", + "swiper": "^12.0.3" }, "name": "alliance-services", "version": "1.0.0", diff --git a/resources/css/app.css b/resources/css/app.css new file mode 100644 index 0000000..6316922 --- /dev/null +++ b/resources/css/app.css @@ -0,0 +1,882 @@ +@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap') layer(base); +@import 'prismjs/themes/prism.min.css'; +@import 'tailwindcss'; + + +@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php'; +@source '../../storage/framework/views/*.php'; +@source '../**/*.blade.php'; +@source '../**/*.js'; + + +@custom-variant dark (&:is(.dark *)); + +@theme { + --font-*: initial; + --font-outfit: Outfit, sans-serif; + + --breakpoint-*: initial; + --breakpoint-2xsm: 375px; + --breakpoint-xsm: 425px; + --breakpoint-3xl: 2000px; + --breakpoint-sm: 640px; + --breakpoint-md: 768px; + --breakpoint-lg: 1024px; + --breakpoint-xl: 1280px; + --breakpoint-2xl: 1536px; + + --text-title-2xl: 72px; + --text-title-2xl--line-height: 90px; + --text-title-xl: 60px; + --text-title-xl--line-height: 72px; + --text-title-lg: 48px; + --text-title-lg--line-height: 60px; + --text-title-md: 36px; + --text-title-md--line-height: 44px; + --text-title-sm: 30px; + --text-title-sm--line-height: 38px; + --text-theme-xl: 20px; + --text-theme-xl--line-height: 30px; + --text-theme-sm: 14px; + --text-theme-sm--line-height: 20px; + --text-theme-xs: 12px; + --text-theme-xs--line-height: 18px; + + --color-current: currentColor; + --color-transparent: transparent; + --color-white: #ffffff; + --color-black: #101828; + + --color-brand-25: #f2f7ff; + --color-brand-50: #ecf3ff; + --color-brand-100: #dde9ff; + --color-brand-200: #c2d6ff; + --color-brand-300: #9cb9ff; + --color-brand-400: #7592ff; + --color-brand-500: #465fff; + --color-brand-600: #3641f5; + --color-brand-700: #2a31d8; + --color-brand-800: #252dae; + --color-brand-900: #262e89; + --color-brand-950: #161950; + + --color-blue-light-25: #f5fbff; + --color-blue-light-50: #f0f9ff; + --color-blue-light-100: #e0f2fe; + --color-blue-light-200: #b9e6fe; + --color-blue-light-300: #7cd4fd; + --color-blue-light-400: #36bffa; + --color-blue-light-500: #0ba5ec; + --color-blue-light-600: #0086c9; + --color-blue-light-700: #026aa2; + --color-blue-light-800: #065986; + --color-blue-light-900: #0b4a6f; + --color-blue-light-950: #062c41; + + --color-gray-25: #fcfcfd; + --color-gray-50: #f9fafb; + --color-gray-100: #f2f4f7; + --color-gray-200: #e4e7ec; + --color-gray-300: #d0d5dd; + --color-gray-400: #98a2b3; + --color-gray-500: #667085; + --color-gray-600: #475467; + --color-gray-700: #344054; + --color-gray-800: #1d2939; + --color-gray-900: #101828; + --color-gray-950: #0c111d; + --color-gray-dark: #1a2231; + + --color-orange-25: #fffaf5; + --color-orange-50: #fff6ed; + --color-orange-100: #ffead5; + --color-orange-200: #fddcab; + --color-orange-300: #feb273; + --color-orange-400: #fd853a; + --color-orange-500: #fb6514; + --color-orange-600: #ec4a0a; + --color-orange-700: #c4320a; + --color-orange-800: #9c2a10; + --color-orange-900: #7e2410; + --color-orange-950: #511c10; + + --color-success-25: #f6fef9; + --color-success-50: #ecfdf3; + --color-success-100: #d1fadf; + --color-success-200: #a6f4c5; + --color-success-300: #6ce9a6; + --color-success-400: #32d583; + --color-success-500: #12b76a; + --color-success-600: #039855; + --color-success-700: #027a48; + --color-success-800: #05603a; + --color-success-900: #054f31; + --color-success-950: #053321; + + --color-error-25: #fffbfa; + --color-error-50: #fef3f2; + --color-error-100: #fee4e2; + --color-error-200: #fecdca; + --color-error-300: #fda29b; + --color-error-400: #f97066; + --color-error-500: #f04438; + --color-error-600: #d92d20; + --color-error-700: #b42318; + --color-error-800: #912018; + --color-error-900: #7a271a; + --color-error-950: #55160c; + + --color-warning-25: #fffcf5; + --color-warning-50: #fffaeb; + --color-warning-100: #fef0c7; + --color-warning-200: #fedf89; + --color-warning-300: #fec84b; + --color-warning-400: #fdb022; + --color-warning-500: #f79009; + --color-warning-600: #dc6803; + --color-warning-700: #b54708; + --color-warning-800: #93370d; + --color-warning-900: #7a2e0e; + --color-warning-950: #4e1d09; + + --color-theme-pink-500: #ee46bc; + + --color-theme-purple-500: #7a5af8; + + --shadow-theme-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06); + --shadow-theme-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), + 0px 4px 6px -2px rgba(16, 24, 40, 0.03); + --shadow-theme-sm: 0px 1px 3px 0px rgba(16, 24, 40, 0.1), 0px 1px 2px 0px rgba(16, 24, 40, 0.06); + --shadow-theme-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.05); + --shadow-theme-xl: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), + 0px 8px 8px -4px rgba(16, 24, 40, 0.03); + --shadow-datepicker: -5px 0 0 #262d3c, 5px 0 0 #262d3c; + --shadow-focus-ring: 0px 0px 0px 4px rgba(70, 95, 255, 0.12); + --shadow-slider-navigation: 0px 1px 2px 0px rgba(16, 24, 40, 0.1), + 0px 1px 3px 0px rgba(16, 24, 40, 0.1); + --shadow-tooltip: 0px 4px 6px -2px rgba(16, 24, 40, 0.05), + -8px 0px 20px 8px rgba(16, 24, 40, 0.05); + + --drop-shadow-4xl: 0 35px 35px rgba(0, 0, 0, 0.25), 0 45px 65px rgba(0, 0, 0, 0.15); + + --z-index-1: 1; + --z-index-9: 9; + --z-index-99: 99; + --z-index-999: 999; + --z-index-9999: 9999; + --z-index-99999: 99999; + --z-index-999999: 999999; +} + +/* + The default border color has changed to `currentColor` in Tailwind CSS v4, + so we've added these compatibility styles to make sure everything still + looks the same as it did with Tailwind CSS v3. + + If we ever want to remove these styles, we need to add an explicit border + color utility to any element that depends on these defaults. +*/ +@layer base { + *, + ::after, + ::before, + ::backdrop, + ::file-selector-button { + border-color: var(--color-gray-200, currentColor); + } + button:not(:disabled), + [role='button']:not(:disabled) { + cursor: pointer; + } + body { + @apply relative font-normal font-outfit z-1 bg-gray-50; + } +} + +@utility menu-item { + @apply relative flex items-center w-full gap-3 px-3 py-2 font-medium rounded-lg text-theme-sm; +} + +@utility menu-item-active { + @apply bg-brand-50 text-brand-500 dark:bg-brand-500/[0.12] dark:text-brand-400; +} + +@utility menu-item-inactive { + @apply text-gray-700 hover:bg-gray-100 group-hover:text-gray-700 dark:text-gray-300 dark:hover:bg-white/5 dark:hover:text-gray-300; +} + +@utility menu-item-icon { + @apply text-gray-500 group-hover:text-gray-700 dark:text-gray-400; +} + +@utility menu-item-icon-active { + @apply text-brand-500 dark:text-brand-400; +} + +@utility menu-item-icon-inactive { + @apply text-gray-500 group-hover:text-gray-700 dark:text-gray-400 dark:group-hover:text-gray-300; +} + +@utility menu-item-arrow { + @apply relative; +} + +@utility menu-item-arrow-active { + @apply rotate-180 text-brand-500 dark:text-brand-400; +} + +@utility menu-item-arrow-inactive { + @apply text-gray-500 group-hover:text-gray-700 dark:text-gray-400 dark:group-hover:text-gray-300; +} + +@utility menu-dropdown-item { + @apply relative flex items-center gap-3 rounded-lg px-3 py-2.5 text-theme-sm font-medium; +} + +@utility menu-dropdown-item-active { + @apply bg-brand-50 text-brand-500 dark:bg-brand-500/[0.12] dark:text-brand-400; +} + +@utility menu-dropdown-item-inactive { + @apply text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-white/5; +} + +@utility menu-dropdown-item { + @apply text-theme-sm relative flex items-center gap-3 rounded-lg px-3 py-2.5 font-medium; +} + +@utility menu-dropdown-item-active { + @apply bg-brand-50 text-brand-500 dark:bg-brand-500/[0.12] dark:text-brand-400; +} + +@utility menu-dropdown-item-inactive { + @apply text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-white/5; +} + +@utility menu-dropdown-badge { + @apply text-success-600 dark:text-success-500 block rounded-full px-2.5 py-0.5 text-xs font-medium uppercase; +} + +@utility menu-dropdown-badge-active { + @apply bg-success-100 dark:bg-success-500/20; +} + +@utility menu-dropdown-badge-inactive { + @apply bg-success-50 group-hover:bg-success-100 dark:bg-success-500/15 dark:group-hover:bg-success-500/20; +} + +@utility menu-dropdown-badge-pro { + @apply text-brand-600 dark:text-brand-500 block rounded-full px-2.5 py-0.5 text-xs font-medium uppercase; +} + +@utility menu-dropdown-badge-pro-active { + @apply bg-brand-100 dark:bg-brand-500/20; +} + +@utility menu-dropdown-badge-pro-inactive { + @apply bg-brand-50 group-hover:bg-brand-100 dark:bg-brand-500/15 dark:group-hover:bg-brand-500/20; +} + +@utility no-scrollbar { + /* Chrome, Safari and Opera */ + &::-webkit-scrollbar { + display: none; + } + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ +} + +@utility custom-scrollbar { + &::-webkit-scrollbar { + @apply size-1.5; + } + + &::-webkit-scrollbar-track { + @apply rounded-full; + } + + &::-webkit-scrollbar-thumb { + @apply bg-gray-200 rounded-full dark:bg-gray-700; + } +} +.dark .custom-scrollbar::-webkit-scrollbar-thumb { + background-color: #344054; +} +@layer utilities { + /* For Remove Date Icon */ + input[type='date']::-webkit-inner-spin-button, + input[type='time']::-webkit-inner-spin-button, + input[type='date']::-webkit-calendar-picker-indicator, + input[type='time']::-webkit-calendar-picker-indicator { + display: none; + -webkit-appearance: none; + } +} + +.sidebar:hover { + width: 290px; +} +.sidebar:hover .logo { + display: block; +} +.sidebar:hover .logo-icon { + display: none; +} +.sidebar:hover .sidebar-header { + justify-content: space-between; +} +.sidebar:hover .menu-group-title { + display: block; +} +.sidebar:hover .menu-group-icon { + display: none; +} + +.sidebar:hover .menu-item-text { + display: inline; +} + +.sidebar:hover .menu-item-arrow { + display: block; +} + +.sidebar:hover .menu-dropdown { + display: flex; +} + +.tableCheckbox:checked ~ span span { + @apply opacity-100; +} +.tableCheckbox:checked ~ span { + @apply border-brand-500 bg-brand-500; +} + +/* third-party libraries CSS */ +.apexcharts-legend-text { + @apply !text-gray-700 dark:!text-gray-400; +} + +.apexcharts-text { + @apply !fill-gray-700 dark:!fill-gray-400; +} + +.apexcharts-tooltip.apexcharts-theme-light { + @apply gap-1 !rounded-lg !border-gray-200 p-3 !shadow-theme-sm dark:!border-gray-800 dark:!bg-gray-900; +} + +/* .apexcharts-tooltip-marker { + @apply !mr-1.5 !h-1.5 !w-1.5; +} */ +.apexcharts-legend-text { + @apply !pl-5 !text-gray-700 dark:!text-gray-400; +} +.apexcharts-tooltip-series-group { + @apply !p-0; +} +.apexcharts-tooltip-y-group { + @apply !p-0; +} +.apexcharts-tooltip-title { + @apply !mb-0 !border-b-0 !bg-transparent !p-0 !text-[10px] !leading-4 !text-gray-800 dark:!text-white/90; +} +.apexcharts-tooltip-text { + @apply !text-theme-xs !text-gray-700 dark:!text-white/90; +} +.apexcharts-tooltip-text-y-value { + @apply !font-medium; +} + +.apexcharts-gridline { + @apply !stroke-gray-100 dark:!stroke-gray-800; +} +#chartTwo .apexcharts-datalabels-group { + @apply !-translate-y-24; +} + +#chartSeven .apexcharts-datalabels-group .apexcharts-text, +#chartTwo .apexcharts-datalabels-group .apexcharts-text, +#chartThirteen .apexcharts-datalabels-group .apexcharts-text, +#chartTwelve .apexcharts-datalabels-group .apexcharts-text { + @apply !fill-gray-800 !font-semibold dark:!fill-white/90; +} + +#chartSixteen .apexcharts-legend { + @apply !p-0 !pl-6; +} + +.jvm-container { + @apply !bg-gray-50 dark:!bg-gray-900; +} +.jvm-region.jvm-element { + @apply !fill-gray-300 hover:!fill-brand-500 dark:!fill-gray-700 dark:hover:!fill-brand-500; +} +.jvm-marker.jvm-element { + @apply !stroke-gray-200 dark:!stroke-gray-800; +} + +.stocks-slider-outer .swiper-button-next:after, +.stocks-slider-outer .swiper-button-prev:after { + @apply hidden; +} + +.stocks-slider-outer .swiper-button-next, +.stocks-slider-outer .swiper-button-prev { + @apply static! mt-0 h-8 w-9 rounded-full border border-gray-200 !text-gray-700 transition hover:bg-gray-100 dark:border-gray-800 dark:bg-gray-800 dark:text-gray-400!; +} + +.stocks-slider-outer .swiper-button-next.swiper-button-disabled, +.stocks-slider-outer .swiper-button-prev.swiper-button-disabled { + @apply bg-white opacity-50 dark:bg-gray-900; +} + +.stocks-slider-outer .swiper-button-next svg, +.stocks-slider-outer .swiper-button-prev svg { + @apply !h-auto !w-auto; + fill: none; +} + +.flatpickr-wrapper { + @apply w-full; +} +.flatpickr-calendar { + @apply mt-2 !rounded-xl bg-black !p-5 !border !border-transparent dark:!border-white/5 !text-gray-500 dark:!bg-gray-dark dark:!text-gray-400 dark:!shadow-theme-xl 2xsm:!w-auto; +} +.flatpickr-time input { + background-color: #f9fafb !important; +} +.flatpickr-months .flatpickr-prev-month:hover svg, +.flatpickr-months .flatpickr-next-month:hover svg { + @apply stroke-brand-500; +} +.flatpickr-calendar.arrowTop:before, +.flatpickr-calendar.arrowTop:after { + @apply hidden; +} +.flatpickr-current-month .cur-month, +.flatpickr-current-month input.cur-year { + @apply !h-auto !pt-0 !text-lg !font-medium !text-gray-800 dark:!text-white/90; +} + +.flatpickr-prev-month, +.flatpickr-next-month { + @apply !p-0; +} + +.flatpickr-weekdays { + @apply h-auto mt-6 mb-4; +} + +.flatpickr-weekday { + @apply !text-theme-sm !font-medium !text-gray-500 dark:!text-gray-400; +} + +.flatpickr-day { + @apply !flex !items-center !text-theme-sm !font-medium !text-gray-800 dark:!text-white/90 dark:hover:!border-gray-300 dark:hover:!bg-gray-900; +} +.flatpickr-day.nextMonthDay, +.flatpickr-day.prevMonthDay { + @apply !text-gray-400; +} +.flatpickr-months .flatpickr-prev-month, +.flatpickr-months .flatpickr-next-month { + @apply !top-7 dark:!fill-white dark:!text-white; +} +.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month, +.flatpickr-months .flatpickr-next-month.flatpickr-prev-month { + @apply !left-7; +} +.flatpickr-months .flatpickr-prev-month.flatpickr-next-month, +.flatpickr-months .flatpickr-next-month.flatpickr-next-month { + @apply !right-7; +} +span.flatpickr-weekday, +.flatpickr-months .flatpickr-month { + @apply dark:!fill-white dark:!text-white; +} +.flatpickr-day.inRange { + box-shadow: + -5px 0 0 #f9fafb, + 5px 0 0 #f9fafb !important; + @apply dark:!shadow-datepicker; +} +.flatpickr-day.inRange, +.flatpickr-day.prevMonthDay.inRange, +.flatpickr-day.nextMonthDay.inRange, +.flatpickr-day.today.inRange, +.flatpickr-day.prevMonthDay.today.inRange, +.flatpickr-day.nextMonthDay.today.inRange, +.flatpickr-day:hover, +.flatpickr-day.prevMonthDay:hover, +.flatpickr-day.nextMonthDay:hover, +.flatpickr-day:focus, +.flatpickr-day.prevMonthDay:focus, +.flatpickr-day.nextMonthDay:focus { + @apply !border-gray-50 !bg-gray-50 dark:!border-0 dark:!border-white/5 dark:!bg-white/5; +} +.flatpickr-day.selected, +.flatpickr-day.startRange, +.flatpickr-day.selected, +.flatpickr-day.endRange { + @apply !text-white dark:!text-white; +} +.flatpickr-day.selected, +.flatpickr-day.startRange, +.flatpickr-day.endRange, +.flatpickr-day.selected.inRange, +.flatpickr-day.startRange.inRange, +.flatpickr-day.endRange.inRange, +.flatpickr-day.selected:focus, +.flatpickr-day.startRange:focus, +.flatpickr-day.endRange:focus, +.flatpickr-day.selected:hover, +.flatpickr-day.startRange:hover, +.flatpickr-day.endRange:hover, +.flatpickr-day.selected.prevMonthDay, +.flatpickr-day.startRange.prevMonthDay, +.flatpickr-day.endRange.prevMonthDay, +.flatpickr-day.selected.nextMonthDay, +.flatpickr-day.startRange.nextMonthDay, +.flatpickr-day.endRange.nextMonthDay { + background: #465fff; + @apply !border-brand-500 !bg-brand-500 hover:!border-brand-500 hover:!bg-brand-500; +} +.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n + 1)), +.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n + 1)), +.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n + 1)) { + box-shadow: -10px 0 0 #465fff; +} + +.flatpickr-months .flatpickr-prev-month svg, +.flatpickr-months .flatpickr-next-month svg, +.flatpickr-months .flatpickr-prev-month, +.flatpickr-months .flatpickr-next-month { + @apply hover:!fill-none; +} +.flatpickr-months .flatpickr-prev-month:hover svg, +.flatpickr-months .flatpickr-next-month:hover svg { + fill: none !important; +} + +.flatpickr-calendar.static { + @apply right-0; +} +.flatpickr-calendar.hasTime { + width: 300px !important; +} +.flatpickr-calendar.hasTime .flatpickr-time { + border: transparent !important; +} +.fc .fc-view-harness { + @apply max-w-full overflow-x-auto custom-scrollbar; +} +.fc-dayGridMonth-view.fc-view.fc-daygrid { + @apply min-w-[718px]; +} +.fc .fc-scrollgrid-section > * { + border-right-width: 0; + border-bottom-width: 0; +} +.fc .fc-scrollgrid { + border-left-width: 0; +} +.fc .fc-toolbar.fc-header-toolbar { + @apply flex-col gap-4 px-6 pt-6 sm:flex-row; +} +.fc-button-group { + @apply gap-2; +} +.fc-button-group .fc-button { + @apply flex h-10 w-10 items-center justify-center !rounded-lg border border-gray-200 bg-transparent hover:border-gray-200 hover:bg-gray-50 focus:shadow-none active:!border-gray-200 active:!bg-transparent active:!shadow-none dark:border-gray-800 dark:hover:border-gray-800 dark:hover:bg-gray-900 dark:active:!border-gray-800; +} + +.fc-button-group .fc-button.fc-prev-button:before { + @apply inline-block mt-1; + content: url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.0068 6L9.75684 12.25L16.0068 18.5' stroke='%23344054' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); +} +.fc-button-group .fc-button.fc-next-button:before { + @apply inline-block mt-1; + content: url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.50684 19L15.7568 12.75L9.50684 6.5' stroke='%23344054' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); +} +.dark .fc-button-group .fc-button.fc-prev-button:before { + content: url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.0068 6L9.75684 12.25L16.0068 18.5' stroke='%2398A2B3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); +} +.dark .fc-button-group .fc-button.fc-next-button:before { + content: url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.50684 19L15.7568 12.75L9.50684 6.5' stroke='%2398A2B3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); +} +.fc-button-group .fc-button .fc-icon { + @apply hidden; +} +.fc-addEventButton-button { + @apply !rounded-lg !border-0 !bg-brand-500 !px-4 !py-2.5 !text-sm !font-medium hover:!bg-brand-600 focus:!shadow-none; +} +.fc-toolbar-title { + @apply !text-lg !font-medium text-gray-800 dark:text-white/90; +} +.fc-header-toolbar.fc-toolbar .fc-toolbar-chunk:last-child { + @apply rounded-lg bg-gray-100 p-0.5 dark:bg-gray-900; +} +.fc-header-toolbar.fc-toolbar .fc-toolbar-chunk:last-child .fc-button { + @apply !h-auto !w-auto rounded-md !border-0 bg-transparent !px-5 !py-2 text-sm font-medium text-gray-500 hover:text-gray-700 focus:!shadow-none dark:text-gray-400; +} +.fc-header-toolbar.fc-toolbar .fc-toolbar-chunk:last-child .fc-button.fc-button-active { + @apply text-gray-900 bg-white dark:bg-gray-800 dark:text-white; +} +.fc-theme-standard th { + @apply !border-x-0 border-t !border-gray-200 bg-gray-50 !text-left dark:!border-gray-800 dark:bg-gray-900; +} +.fc-theme-standard td, +.fc-theme-standard .fc-scrollgrid { + @apply !border-gray-200 dark:!border-gray-800; +} +.fc .fc-col-header-cell-cushion { + @apply !px-5 !py-4 text-sm font-medium uppercase text-gray-400; +} +.fc .fc-daygrid-day.fc-day-today { + @apply bg-transparent; +} +.fc .fc-daygrid-day { + @apply p-2; +} +.fc .fc-daygrid-day.fc-day-today .fc-scrollgrid-sync-inner { + @apply rounded-sm bg-gray-100 dark:bg-white/[0.03]; +} +.fc .fc-daygrid-day-number { + @apply !p-3 text-sm font-medium text-gray-700 dark:text-gray-400; +} +.fc .fc-daygrid-day-top { + @apply flex-row!; +} +.fc .fc-day-other .fc-daygrid-day-top { + opacity: 1; +} +.fc .fc-day-other .fc-daygrid-day-top .fc-daygrid-day-number { + @apply text-gray-400 dark:text-white/30; +} +.event-fc-color { + @apply rounded-lg py-2.5 pl-4 pr-3; +} +.event-fc-color .fc-event-title { + @apply p-0 text-sm font-normal text-gray-700; +} +.fc-daygrid-event-dot { + @apply w-1 h-5 ml-0 mr-3 border-none rounded-sm; +} +.fc-event { + @apply focus:shadow-none; +} +.fc-daygrid-event.fc-event-start { + @apply !ml-3; +} +.event-fc-color.fc-bg-success { + @apply border-success-50 bg-success-50; +} +.event-fc-color.fc-bg-danger { + @apply border-error-50 bg-error-50; +} +.event-fc-color.fc-bg-primary { + @apply border-brand-50 bg-brand-50; +} +.event-fc-color.fc-bg-warning { + @apply border-orange-50 bg-orange-50; +} +.event-fc-color.fc-bg-success .fc-daygrid-event-dot { + @apply bg-success-500; +} +.event-fc-color.fc-bg-danger .fc-daygrid-event-dot { + @apply bg-error-500; +} +.event-fc-color.fc-bg-primary .fc-daygrid-event-dot { + @apply bg-brand-500; +} +.event-fc-color.fc-bg-warning .fc-daygrid-event-dot { + @apply bg-orange-500; +} +.fc-direction-ltr .fc-timegrid-slot-label-frame { + @apply px-3 py-1.5 text-left text-sm font-medium text-gray-500 dark:text-gray-400; +} +.fc .fc-timegrid-axis-cushion { + @apply text-sm font-medium text-gray-500 dark:text-gray-400; +} + +.input-date-icon::-webkit-inner-spin-button, +.input-date-icon::-webkit-calendar-picker-indicator { + opacity: 0; + -webkit-appearance: none; +} + +.swiper-button-prev svg, +.swiper-button-next svg { + @apply !h-auto w-auto!; +} + +.carouselTwo .swiper-button-next:after, +.carouselTwo .swiper-button-prev:after, +.carouselFour .swiper-button-next:after, +.carouselFour .swiper-button-prev:after { + @apply hidden; +} +.carouselTwo .swiper-button-next.swiper-button-disabled, +.carouselTwo .swiper-button-prev.swiper-button-disabled, +.carouselFour .swiper-button-next.swiper-button-disabled, +.carouselFour .swiper-button-prev.swiper-button-disabled { + @apply bg-white/60 opacity-100!; +} +.carouselTwo .swiper-button-next, +.carouselTwo .swiper-button-prev, +.carouselFour .swiper-button-next, +.carouselFour .swiper-button-prev { + @apply h-10 w-10 rounded-full border-[0.5px] border-white/10 bg-white/90 !text-gray-700 shadow-slider-navigation backdrop-blur-[10px]; +} + +.carouselTwo .swiper-button-prev, +.carouselFour .swiper-button-prev { + @apply !left-3 sm:!left-4; +} + +.carouselTwo .swiper-button-next, +.carouselFour .swiper-button-next { + @apply !right-3 sm:!right-4; +} + +.carouselThree .swiper-pagination, +.carouselFour .swiper-pagination { + @apply !bottom-3 !left-1/2 inline-flex !w-auto -translate-x-1/2 items-center gap-1.5 rounded-[40px] border-[0.5px] border-white/10 bg-white/60 px-2 py-1.5 shadow-slider-navigation backdrop-blur-[10px] sm:!bottom-5; +} + +.carouselThree .swiper-pagination-bullet, +.carouselFour .swiper-pagination-bullet { + @apply !m-0 h-2.5 w-2.5 bg-white opacity-100 shadow-theme-xs duration-200 ease-in-out; +} + +.carouselThree .swiper-pagination-bullet-active, +.carouselFour .swiper-pagination-bullet-active { + @apply w-6.5 rounded-xl; +} + +.form-check-input:checked ~ span { + @apply border-[6px] border-brand-500 dark:border-brand-500; +} + +.taskCheckbox:checked ~ .box span { + @apply opacity-100; +} +.taskCheckbox:checked ~ p { + @apply text-gray-400 line-through; +} +.taskCheckbox:checked ~ .box { + @apply border-brand-500 bg-brand-500 dark:border-brand-500; +} + +.task { + transition: all 0.2s ease; /* Smooth transition for visual effects */ +} + +.task.is-dragging { + border-radius: 0.75rem; + box-shadow: + 0px 1px 3px 0px rgba(16, 24, 40, 0.1), + 0px 1px 2px 0px rgba(16, 24, 40, 0.06); + opacity: 0.8; + cursor: grabbing; /* Changes the cursor to indicate dragging */ +} + + +.custom-calendar .fc-h-event { + background-color: #0000; + border: none; + color: black; +} + +.simplebar-scrollbar:before { + @apply !bg-gray-200 !rounded-full dark:!bg-gray-700 !opacity-100; +} + +.dark .simplebar-scrollbar::before { + @apply !bg-gray-700; +} + +.simplebar-scrollbar.simplebar-visible:before { + @apply opacity-100; +} + +.social-button { + @apply flex h-11 w-11 items-center justify-center gap-2 rounded-full border border-gray-300 bg-white text-sm font-medium text-gray-700 shadow-theme-xs hover:bg-gray-50 hover:text-gray-800 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03] dark:hover:text-gray-200; +} + +.edit-button { + @apply flex w-full items-center justify-center gap-2 rounded-full border border-gray-300 bg-white px-4 py-3 text-sm font-medium text-gray-700 shadow-theme-xs hover:bg-gray-50 hover:text-gray-800 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03] dark:hover:text-gray-200 lg:inline-flex lg:w-auto; +} + +/* Code Editor */ +code[class*='language-'], +pre[class*='language-'] { + text-shadow: none; + color: #344054; + overflow: hidden !important; + font-size: 14px; + margin: 0; + padding: 0; + white-space: pre-wrap; + word-wrap: break-word; + text-align: justify; +} + +.dark code[class*='language-'], +.dark pre[class*='language-'] { + text-shadow: none; + color: #98a2b3; +} +.language-html { + background-color: #ffffff !important; +} +.dark .language-html { + background-color: #ffffff00 !important; +} +.token { + text-shadow: none; + font-size: 14px; +} +.token.doctype-tag, +.token.name { + color: #018001; +} +.token.tag { + color: #267f99; +} +.token.selector { + color: #267f99; +} +.token.property { + color: #0070c1; +} +.token.language-css { + color: #1b00ff; +} +.token.attr-name { + color: #98a2b3; +} +.token.attr-value { + color: #a31615; +} +.token.punctuation { + color: #344054; +} +.dark .token.punctuation { + color: #98a2b3; +} +.custom-datepicker .flatpickr-calendar.static.open { + left: 0; + right: auto; +} + +.swiper-button-prev, .swiper-button-next { + svg { + fill: none !important; + } +} + +@media screen and (max-width: 525px) { + .flatpickr-calendar.static { + margin-right: -60px !important; + } +} \ No newline at end of file diff --git a/resources/js/app.js b/resources/js/app.js index eb10405..cb520ed 100644 --- a/resources/js/app.js +++ b/resources/js/app.js @@ -1 +1,51 @@ -import './bootstrap'; \ No newline at end of file +import './bootstrap'; +import Alpine from 'alpinejs'; +import ApexCharts from 'apexcharts'; + +// flatpickr +import flatpickr from 'flatpickr'; +import 'flatpickr/dist/flatpickr.min.css'; +// FullCalendar +import { Calendar } from '@fullcalendar/core'; + + + +window.Alpine = Alpine; +window.ApexCharts = ApexCharts; +window.flatpickr = flatpickr; +window.FullCalendar = Calendar; + +Alpine.start(); + +// Initialize components on DOM ready +document.addEventListener('DOMContentLoaded', () => { + // Map imports + if (document.querySelector('#mapOne')) { + import('./components/map').then(module => module.initMap()); + } + + // Chart imports + if (document.querySelector('#chartOne')) { + import('./components/chart/chart-1').then(module => module.initChartOne()); + } + if (document.querySelector('#chartTwo')) { + import('./components/chart/chart-2').then(module => module.initChartTwo()); + } + if (document.querySelector('#chartThree')) { + import('./components/chart/chart-3').then(module => module.initChartThree()); + } + if (document.querySelector('#chartSix')) { + import('./components/chart/chart-6').then(module => module.initChartSix()); + } + if (document.querySelector('#chartEight')) { + import('./components/chart/chart-8').then(module => module.initChartEight()); + } + if (document.querySelector('#chartThirteen')) { + import('./components/chart/chart-13').then(module => module.initChartThirteen()); + } + + // Calendar init + if (document.querySelector('#calendar')) { + import('./components/calendar-init').then(module => module.calendarInit()); + } +}); diff --git a/resources/js/bootstrap.js b/resources/js/bootstrap.js index 1f5ea05..5f1390b 100644 --- a/resources/js/bootstrap.js +++ b/resources/js/bootstrap.js @@ -1,4 +1,4 @@ import axios from 'axios'; window.axios = axios; -window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'; \ No newline at end of file +window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'; diff --git a/resources/js/components/calendar-init.js b/resources/js/components/calendar-init.js new file mode 100644 index 0000000..c071a22 --- /dev/null +++ b/resources/js/components/calendar-init.js @@ -0,0 +1,352 @@ + + +import { Calendar } from "@fullcalendar/core"; +import dayGridPlugin from "@fullcalendar/daygrid"; +import listPlugin from "@fullcalendar/list"; +import timeGridPlugin from "@fullcalendar/timegrid"; +import interactionPlugin from "@fullcalendar/interaction"; + +export function calendarInit() { + const calendarWrapper = document.querySelector("#calendar"); + + if (calendarWrapper) { + // Calendar Date variable + const newDate = new Date(); + const getDynamicMonth = () => { + const month = newDate.getMonth() + 1; + return month < 10 ? `0${month}` : `${month}`; + }; + + // Calendar Modal Elements + const getModalTitleEl = document.querySelector("#event-title"); + const getModalStartDateEl = document.querySelector("#event-start-date"); + const getModalEndDateEl = document.querySelector("#event-end-date"); + const getModalAddBtnEl = document.querySelector(".btn-add-event"); + const getModalUpdateBtnEl = document.querySelector(".btn-update-event"); + const getModalHeaderEl = document.querySelector("#eventModalLabel"); + + const calendarsEvents = { + Danger: "danger", + Success: "success", + Primary: "primary", + Warning: "warning", + }; + + // Calendar Elements and options + const calendarEl = document.querySelector("#calendar"); + + const calendarHeaderToolbar = { + left: "prev,next addEventButton", + center: "title", + right: "dayGridMonth,timeGridWeek,timeGridDay", + }; + + const calendarEventsList = [ + { + id: "1", + title: "Event Conf.", + start: `${newDate.getFullYear()}-${getDynamicMonth()}-01`, + extendedProps: { calendar: "Danger" }, + }, + { + id: "2", + title: "Seminar #4", + start: `${newDate.getFullYear()}-${getDynamicMonth()}-07`, + end: `${newDate.getFullYear()}-${getDynamicMonth()}-10`, + extendedProps: { calendar: "Success" }, + }, + { + id: "3", + title: "Meeting #5", + start: `${newDate.getFullYear()}-${getDynamicMonth()}-09T16:00:00`, + extendedProps: { calendar: "Primary" }, + }, + { + id: "4", + title: "Submission #1", + start: `${newDate.getFullYear()}-${getDynamicMonth()}-16T16:00:00`, + extendedProps: { calendar: "Warning" }, + }, + { + id: "5", + title: "Seminar #6", + start: `${newDate.getFullYear()}-${getDynamicMonth()}-11`, + end: `${newDate.getFullYear()}-${getDynamicMonth()}-13`, + extendedProps: { calendar: "Danger" }, + }, + ]; + + // Modal Functions + const openModal = () => { + const modal = document.getElementById("eventModal"); + if (modal) { + modal.style.display = "flex"; + document.body.style.overflow = "hidden"; // Prevent background scroll + } + }; + + const closeModal = () => { + const modal = document.getElementById("eventModal"); + if (modal) { + modal.style.display = "none"; + document.body.style.overflow = ""; // Restore scroll + } + resetModalFields(); + }; + + // Reset modal fields + function resetModalFields() { + if (getModalTitleEl) getModalTitleEl.value = ""; + if (getModalStartDateEl) getModalStartDateEl.value = ""; + if (getModalEndDateEl) getModalEndDateEl.value = ""; + + const getModalIfCheckedRadioBtnEl = document.querySelector( + 'input[name="event-level"]:checked' + ); + if (getModalIfCheckedRadioBtnEl) { + getModalIfCheckedRadioBtnEl.checked = false; + } + } + + // Calendar Select function (when user clicks/drags on calendar) + const calendarSelect = (info) => { + resetModalFields(); + + // Update modal header + if (getModalHeaderEl) { + getModalHeaderEl.textContent = "Add Event"; + } + + // Show Add button, hide Update button + if (getModalAddBtnEl) getModalAddBtnEl.style.display = "flex"; + if (getModalUpdateBtnEl) getModalUpdateBtnEl.style.display = "none"; + + // Set dates from selection + if (getModalStartDateEl) getModalStartDateEl.value = info.startStr; + if (getModalEndDateEl) { + getModalEndDateEl.value = info.endStr || info.startStr; + } + + openModal(); + }; + + // Calendar AddEvent button click + const calendarAddEvent = () => { + resetModalFields(); + + // Update modal header + if (getModalHeaderEl) { + getModalHeaderEl.textContent = "Add Event"; + } + + // Show Add button, hide Update button + if (getModalAddBtnEl) getModalAddBtnEl.style.display = "flex"; + if (getModalUpdateBtnEl) getModalUpdateBtnEl.style.display = "none"; + + // Set default start date to today + const currentDate = new Date(); + const yyyy = currentDate.getFullYear(); + const mm = String(currentDate.getMonth() + 1).padStart(2, "0"); + const dd = String(currentDate.getDate()).padStart(2, "0"); + const combineDate = `${yyyy}-${mm}-${dd}`; + + if (getModalStartDateEl) getModalStartDateEl.value = combineDate; + + openModal(); + }; + + // Calendar Event Click function (when user clicks existing event) + const calendarEventClick = (info) => { + const eventObj = info.event; + + if (eventObj.url) { + window.open(eventObj.url); + info.jsEvent.preventDefault(); + } else { + resetModalFields(); + + // Update modal header + if (getModalHeaderEl) { + getModalHeaderEl.textContent = "Edit Event"; + } + + // Get event details + const getModalEventId = eventObj.id; + const getModalEventLevel = eventObj.extendedProps.calendar; + + // Set form values + if (getModalTitleEl) getModalTitleEl.value = eventObj.title; + if (getModalStartDateEl) { + getModalStartDateEl.value = eventObj.startStr.split("T")[0]; + } + if (getModalEndDateEl) { + getModalEndDateEl.value = eventObj.endStr + ? eventObj.endStr.split("T")[0] + : ""; + } + + // Check the correct radio button + const getModalCheckedRadioBtnEl = document.querySelector( + `input[value="${getModalEventLevel}"]` + ); + if (getModalCheckedRadioBtnEl) { + getModalCheckedRadioBtnEl.checked = true; + } + + // Store event ID for update + if (getModalUpdateBtnEl) { + getModalUpdateBtnEl.dataset.fcEventPublicId = getModalEventId; + } + + // Hide Add button, show Update button + if (getModalAddBtnEl) getModalAddBtnEl.style.display = "none"; + if (getModalUpdateBtnEl) getModalUpdateBtnEl.style.display = "flex"; + + openModal(); + } + }; + + // Initialize Calendar + const calendar = new Calendar(calendarEl, { + plugins: [dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin], + selectable: true, + initialView: "dayGridMonth", + initialDate: `${newDate.getFullYear()}-${getDynamicMonth()}-07`, + headerToolbar: calendarHeaderToolbar, + events: calendarEventsList, + select: calendarSelect, + eventClick: calendarEventClick, + displayEventTime: false, // Hide time display + customButtons: { + addEventButton: { + text: "Add Event +", + click: calendarAddEvent, + }, + }, + // eventClassNames({ event: calendarEvent }) { + // const getColorValue = + // calendarsEvents[calendarEvent._def.extendedProps.calendar]; + // return [`event-fc-color`, `fc-bg-${getColorValue}`]; + // }, + // Optional: Custom event content without time + eventContent(eventInfo) { + const colorClass = `fc-bg-${eventInfo.event.extendedProps.calendar.toLowerCase()}` + return { + html: ` +
+
+
${eventInfo.timeText}
+
${eventInfo.event.title}
+
+ `, + } + }, + }); + + // Update Calendar Event + // if (getModalUpdateBtnEl) { + // getModalUpdateBtnEl.addEventListener("click", () => { + // const getPublicID = getModalUpdateBtnEl.dataset.fcEventPublicId; + // const getTitleUpdatedValue = getModalTitleEl.value; + // const setModalStartDateValue = getModalStartDateEl.value; + // const setModalEndDateValue = getModalEndDateEl.value; + // const getEvent = calendar.getEventById(getPublicID); + // const getModalUpdatedCheckedRadioBtnEl = document.querySelector( + // 'input[name="event-level"]:checked' + // ); + + // const getModalUpdatedCheckedRadioBtnValue = + // getModalUpdatedCheckedRadioBtnEl + // ? getModalUpdatedCheckedRadioBtnEl.value + // : ""; + + // if (getEvent) { + // getEvent.setProp("title", getTitleUpdatedValue); + // getEvent.setDates(setModalStartDateValue, setModalEndDateValue); + // getEvent.setExtendedProp("calendar", getModalUpdatedCheckedRadioBtnValue); + // } + + // closeModal(); + // }); + // } + if (getModalUpdateBtnEl) { + getModalUpdateBtnEl.addEventListener("click", () => { + const getPublicID = getModalUpdateBtnEl.dataset.fcEventPublicId; + const getTitleUpdatedValue = getModalTitleEl.value; + const setModalStartDateValue = getModalStartDateEl.value; + const setModalEndDateValue = getModalEndDateEl.value; + const getEvent = calendar.getEventById(getPublicID); + const getModalUpdatedCheckedRadioBtnEl = document.querySelector( + 'input[name="event-level"]:checked' + ); + + const getModalUpdatedCheckedRadioBtnValue = + getModalUpdatedCheckedRadioBtnEl + ? getModalUpdatedCheckedRadioBtnEl.value + : ""; + + if (getEvent) { + // Remove the old event + getEvent.remove(); + + // Add updated event with all properties + calendar.addEvent({ + id: getPublicID, + title: getTitleUpdatedValue, + start: setModalStartDateValue, + end: setModalEndDateValue, + allDay: true, + extendedProps: { calendar: getModalUpdatedCheckedRadioBtnValue }, + }); + } + + closeModal(); + }); + } + + // Add Calendar Event + if (getModalAddBtnEl) { + getModalAddBtnEl.addEventListener("click", () => { + const getModalCheckedRadioBtnEl = document.querySelector( + 'input[name="event-level"]:checked' + ); + + const getTitleValue = getModalTitleEl.value; + const setModalStartDateValue = getModalStartDateEl.value; + const setModalEndDateValue = getModalEndDateEl.value; + const getModalCheckedRadioBtnValue = getModalCheckedRadioBtnEl + ? getModalCheckedRadioBtnEl.value + : ""; + + calendar.addEvent({ + id: Date.now().toString(), + title: getTitleValue, + start: setModalStartDateValue, + end: setModalEndDateValue, + allDay: true, + extendedProps: { calendar: getModalCheckedRadioBtnValue }, + }); + + closeModal(); + }); + } + + // Render Calendar + calendar.render(); + + // Close modal event listeners + document.querySelectorAll(".modal-close-btn").forEach((btn) => { + btn.addEventListener("click", closeModal); + }); + + // Close when clicking outside modal + window.addEventListener("click", (event) => { + const modal = document.getElementById("eventModal"); + if (event.target === modal) { + closeModal(); + } + }); + } +} + +export default calendarInit; diff --git a/resources/js/components/chart/chart-1.js b/resources/js/components/chart/chart-1.js new file mode 100644 index 0000000..a3342f4 --- /dev/null +++ b/resources/js/components/chart/chart-1.js @@ -0,0 +1,100 @@ + + +export const initChartOne = () => { + const chartElement = document.querySelector('#chartOne'); + if (!chartElement) return; + + const chartOneOptions = { + series: [{ + name: "Sales", + data: [168, 385, 201, 298, 187, 195, 291, 110, 215, 390, 280, 112], + },], + colors: ["#465fff"], + chart: { + fontFamily: "Outfit, sans-serif", + type: "bar", + height: 180, + toolbar: { + show: false, + }, + }, + plotOptions: { + bar: { + horizontal: false, + columnWidth: "39%", + borderRadius: 5, + borderRadiusApplication: "end", + }, + }, + dataLabels: { + enabled: false, + }, + stroke: { + show: true, + width: 4, + colors: ["transparent"], + }, + xaxis: { + categories: [ + "Jan", + "Feb", + "Mar", + "Apr", + "May", + "Jun", + "Jul", + "Aug", + "Sep", + "Oct", + "Nov", + "Dec", + ], + axisBorder: { + show: false, + }, + axisTicks: { + show: false, + }, + }, + legend: { + show: true, + position: "top", + horizontalAlign: "left", + fontFamily: "Outfit", + markers: { + radius: 99, + }, + }, + yaxis: { + title: false, + }, + grid: { + yaxis: { + lines: { + show: true, + }, + }, + }, + fill: { + opacity: 1, + }, + + tooltip: { + x: { + show: false, + }, + y: { + formatter: function (val) { + return val; + }, + }, + }, + }; + + const chart = new ApexCharts(chartElement, chartOneOptions); + chart.render(); + + return chart; +}; + +export default initChartOne; diff --git a/resources/js/components/chart/chart-13.js b/resources/js/components/chart/chart-13.js new file mode 100644 index 0000000..9c46684 --- /dev/null +++ b/resources/js/components/chart/chart-13.js @@ -0,0 +1,332 @@ + +export function initChartThirteen() { + const chartThirteenEl = document.querySelector("#chartThirteen"); + if (chartThirteenEl) { + const data = [ + [1746153600000, 30.95], + [1746240000000, 31.34], + [1746326400000, 31.18], + [1746412800000, 31.05], + [1746672000000, 31.0], + [1746758400000, 30.95], + [1746844800000, 31.24], + [1746931200000, 31.29], + [1747017600000, 31.85], + [1747276800000, 31.86], + [1747363200000, 32.28], + [1747449600000, 32.1], + [1747536000000, 32.65], + [1747622400000, 32.21], + [1747881600000, 32.35], + [1747968000000, 32.44], + [1748054400000, 32.46], + [1748140800000, 32.86], + [1748227200000, 32.75], + [1748572800000, 32.54], + [1748659200000, 32.33], + [1748745600000, 32.97], + [1748832000000, 33.41], + [1749091200000, 33.27], + [1749177600000, 33.27], + [1749264000000, 32.89], + [1749350400000, 33.1], + [1749436800000, 33.73], + [1749696000000, 33.22], + [1749782400000, 31.99], + [1749868800000, 32.41], + [1749955200000, 33.05], + [1750041600000, 33.64], + [1750300800000, 33.56], + [1750387200000, 34.22], + [1750473600000, 33.77], + [1750560000000, 34.17], + [1750646400000, 33.82], + [1750905600000, 34.51], + [1750992000000, 33.16], + [1751078400000, 33.56], + [1751164800000, 33.71], + [1751251200000, 33.81], + [1751506800000, 34.4], + [1751593200000, 34.63], + [1751679600000, 34.46], + [1751766000000, 34.48], + [1751852400000, 34.31], + [1752111600000, 34.7], + [1752198000000, 34.31], + [1752284400000, 33.46], + [1752370800000, 33.59], + [1752716400000, 33.22], + [1752802800000, 32.61], + [1752889200000, 33.01], + [1752975600000, 33.55], + [1753062000000, 33.18], + [1753321200000, 32.84], + [1753407600000, 33.84], + [1753494000000, 33.39], + [1753580400000, 32.91], + [1753666800000, 33.06], + [1753926000000, 32.62], + [1754012400000, 32.4], + [1754098800000, 33.13], + [1754185200000, 33.26], + [1754271600000, 33.58], + [1754530800000, 33.55], + [1754617200000, 33.77], + [1754703600000, 33.76], + [1754790000000, 33.32], + [1754876400000, 32.61], + [1755135600000, 32.52], + [1755222000000, 32.67], + [1755308400000, 32.52], + [1755394800000, 31.92], + [1755481200000, 32.2], + [1755740400000, 32.23], + [1755826800000, 32.33], + [1755913200000, 32.36], + [1755999600000, 32.01], + [1756086000000, 31.31], + [1756345200000, 32.01], + [1756431600000, 32.01], + [1756518000000, 32.18], + [1756604400000, 31.54], + [1756690800000, 31.6], + [1757036400000, 32.05], + [1757122800000, 31.29], + [1757209200000, 31.05], + [1757295600000, 29.82], + [1757554800000, 30.31], + [1757641200000, 30.7], + [1757727600000, 31.69], + [1757814000000, 31.32], + [1757900400000, 31.65], + [1758159600000, 31.13], + [1758246000000, 31.77], + [1758332400000, 31.79], + [1758418800000, 31.67], + [1758505200000, 32.39], + [1758764400000, 32.63], + [1758850800000, 32.89], + [1758937200000, 31.99], + [1759023600000, 31.23], + [1759110000000, 31.57], + [1759369200000, 30.84], + [1759455600000, 31.07], + [1759542000000, 31.41], + [1759628400000, 31.17], + [1759714800000, 32.37], + [1759974000000, 32.19], + [1760060400000, 32.51], + [1760233200000, 32.53], + [1760319600000, 31.37], + [1760578800000, 30.43], + [1760665200000, 30.44], + [1760751600000, 30.2], + [1760838000000, 30.14], + [1760924400000, 30.65], + [1761183600000, 30.4], + [1761270000000, 30.65], + [1761356400000, 31.43], + [1761442800000, 31.89], + [1761529200000, 31.38], + [1761788400000, 30.64], + [1761874800000, 30.02], + [1761961200000, 30.33], + [1762047600000, 30.95], + [1762134000000, 31.89], + [1762393200000, 31.01], + [1762479600000, 30.88], + [1762566000000, 30.69], + [1762652400000, 30.58], + [1762738800000, 32.02], + [1762998000000, 32.14], + [1763084400000, 32.37], + [1763170800000, 32.51], + [1763257200000, 32.65], + [1763343600000, 32.64], + [1763602800000, 32.27], + [1763689200000, 32.1], + [1763775600000, 32.91], + [1763862000000, 33.65], + [1763948400000, 33.8], + [1764207600000, 33.92], + [1764294000000, 33.75], + [1764380400000, 33.84], + [1764466800000, 33.5], + [1764553200000, 32.26], + [1764812400000, 32.32], + [1764898800000, 32.06], + [1764985200000, 31.96], + [1765071600000, 31.46], + [1765158000000, 31.27], + [1765503600000, 31.43], + [1765590000000, 32.26], + [1765676400000, 32.79], + [1765762800000, 32.46], + [1766022000000, 32.13], + [1766108400000, 32.43], + [1766194800000, 32.42], + [1766281200000, 32.81], + [1766367600000, 33.34], + [1766626800000, 33.41], + [1766713200000, 32.57], + [1766799600000, 33.12], + [1766886000000, 34.53], + [1766972400000, 33.83], + [1767231600000, 33.41], + [1767318000000, 32.9], + [1767404400000, 32.53], + [1767490800000, 32.8], + [1767577200000, 32.44], + [1767836400000, 32.62], + [1767922800000, 32.57], + [1768009200000, 32.6], + [1768095600000, 32.68], + [1768182000000, 32.47], + [1768441200000, 32.23], + [1768527600000, 31.68], + [1768614000000, 31.51], + [1768700400000, 31.78], + [1768786800000, 31.94], + [1769046000000, 32.33], + [1769132400000, 33.24], + [1769218800000, 33.44], + [1769305200000, 33.48], + [1769391600000, 33.24], + [1769650800000, 33.49], + [1769737200000, 33.31], + [1769823600000, 33.36], + [1769910000000, 33.4], + [1769996400000, 34.01], + [1770432000000, 34.02], + [1770518400000, 34.36], + [1770604800000, 34.39], + [1770864000000, 34.24], + [1770950400000, 34.39], + [1771036800000, 33.47], + [1771123200000, 32.98], + [1771209600000, 32.9], + [1771468800000, 32.7], + [1771555200000, 32.54], + [1771641600000, 32.23], + [1771728000000, 32.64], + [1771814400000, 32.65], + [1772073600000, 32.92], + [1772160000000, 32.64], + [1772246400000, 32.84], + [1772419200000, 33.4], + [1772678400000, 33.3], + [1772764800000, 33.18], + [1772851200000, 33.88], + [1772937600000, 34.09], + [1773024000000, 34.61], + [1773283200000, 34.7], + [1773369600000, 35.3], + [1773456000000, 35.4], + [1773542400000, 35.14], + [1773628800000, 35.48], + [1773888000000, 35.75], + [1773974400000, 35.54], + [1774060800000, 35.96], + [1774147200000, 35.53], + [1774233600000, 37.56], + [1774492800000, 37.42], + [1774579200000, 37.49], + [1774665600000, 38.09], + [1774752000000, 37.87], + ]; + + const chartOptions = { + series: [ + { + name: "Portfolio Performance", + data: data, + }, + ], + legend: { + show: false, + position: "top", + horizontalAlign: "left", + }, + colors: ["#465FFF"], + chart: { + fontFamily: "Outfit, sans-serif", + height: 335, + id: "area-datetime", + type: "area", + toolbar: { + show: false, + }, + }, + + stroke: { + curve: "straight", + width: ["1", "1"], + }, + + dataLabels: { + enabled: false, + }, + + markers: { + size: 0, + }, + + labels: { + show: false, + position: "top", + }, + + xaxis: { + type: "datetime", + tickAmount: 10, + axisBorder: { + show: false, + }, + axisTicks: { + show: false, + }, + tooltip: false, + }, + + tooltip: { + x: { + format: "dd MMM yyyy", + }, + }, + + fill: { + gradient: { + enabled: true, + opacityFrom: 0.55, + opacityTo: 0, + }, + }, + + grid: { + xaxis: { + lines: { + show: false, + }, + }, + yaxis: { + lines: { + show: true, + }, + }, + }, + + yaxis: { + title: { + style: { + fontSize: "0px", + }, + }, + }, + }; + const chartThirteen = new ApexCharts(chartThirteenEl, chartOptions); + chartThirteen.render(); + return chartThirteen; + } +} + +export default initChartThirteen; diff --git a/resources/js/components/chart/chart-2.js b/resources/js/components/chart/chart-2.js new file mode 100644 index 0000000..3ea1425 --- /dev/null +++ b/resources/js/components/chart/chart-2.js @@ -0,0 +1,61 @@ + +export const initChartTwo = () => { + const chartElement = document.querySelector('#chartTwo'); + + if (chartElement) { + const chartTwoOptions = { + series: [75.55], + colors: ["#465FFF"], + chart: { + fontFamily: "Outfit, sans-serif", + type: "radialBar", + height: 330, + sparkline: { + enabled: true, + }, + }, + plotOptions: { + radialBar: { + startAngle: -90, + endAngle: 90, + hollow: { + size: "80%", + }, + track: { + background: "#E4E7EC", + strokeWidth: "100%", + margin: 5, // margin is in pixels + }, + dataLabels: { + name: { + show: false, + }, + value: { + fontSize: "36px", + fontWeight: "600", + offsetY: 60, + color: "#1D2939", + formatter: function (val) { + return val + "%"; + }, + }, + }, + }, + }, + fill: { + type: "solid", + colors: ["#465FFF"], + }, + stroke: { + lineCap: "round", + }, + labels: ["Progress"], + }; + + const chart = new ApexCharts(chartElement, chartTwoOptions); + chart.render(); + return chart; + } +} + +export default initChartTwo; diff --git a/resources/js/components/chart/chart-3.js b/resources/js/components/chart/chart-3.js new file mode 100644 index 0000000..ed19072 --- /dev/null +++ b/resources/js/components/chart/chart-3.js @@ -0,0 +1,107 @@ + +export const initChartThree = () => { + const chartElement = document.querySelector('#chartThree'); + + if (chartElement) { + const chartThreeOptions = { + series: [{ + name: "Sales", + data: [180, 190, 170, 160, 175, 165, 170, 205, 230, 210, 240, 235], + }, + { + name: "Revenue", + data: [40, 30, 50, 40, 55, 40, 70, 100, 110, 120, 150, 140], + }, + ], + legend: { + show: false, + position: "top", + horizontalAlign: "left", + }, + colors: ["#465FFF", "#9CB9FF"], + chart: { + fontFamily: "Outfit, sans-serif", + height: 310, + type: "area", + toolbar: { + show: false, + }, + }, + fill: { + gradient: { + enabled: true, + opacityFrom: 0.55, + opacityTo: 0, + }, + }, + stroke: { + curve: "straight", + width: ["2", "2"], + }, + markers: { + size: 0, + }, + labels: { + show: false, + position: "top", + }, + grid: { + xaxis: { + lines: { + show: false, + }, + }, + yaxis: { + lines: { + show: true, + }, + }, + }, + dataLabels: { + enabled: false, + }, + tooltip: { + x: { + format: "dd MMM yyyy", + }, + }, + xaxis: { + type: "category", + categories: [ + "Jan", + "Feb", + "Mar", + "Apr", + "May", + "Jun", + "Jul", + "Aug", + "Sep", + "Oct", + "Nov", + "Dec", + ], + axisBorder: { + show: false, + }, + axisTicks: { + show: false, + }, + tooltip: false, + }, + yaxis: { + title: { + style: { + fontSize: "0px", + }, + }, + }, + }; + + const chart = new ApexCharts(chartElement, chartThreeOptions); + chart.render(); + return chart; + } +} + +export default initChartThree; diff --git a/resources/js/components/chart/chart-6.js b/resources/js/components/chart/chart-6.js new file mode 100644 index 0000000..e829b17 --- /dev/null +++ b/resources/js/components/chart/chart-6.js @@ -0,0 +1,107 @@ + + +export function initChartSix() { + const chartSixEl = document.querySelector('#chartSix'); + if (chartSixEl) { + const chartSixOptions = { + series: [ + { + name: "Direct", + data: [44, 55, 41, 67, 22, 43, 55, 41], + }, + { + name: "Referral", + data: [13, 23, 20, 8, 13, 27, 13, 23], + }, + { + name: "Organic Search", + data: [11, 17, 15, 15, 21, 14, 18, 20], + }, + { + name: "Social", + data: [21, 7, 25, 13, 22, 8, 18, 20], + }, + ], + colors: ["#2a31d8", "#465fff", "#7592ff", "#c2d6ff"], + chart: { + fontFamily: "Outfit, sans-serif", + type: "bar", + stacked: true, + height: 315, + toolbar: { + show: false, + }, + zoom: { + enabled: false, + }, + }, + plotOptions: { + bar: { + horizontal: false, + columnWidth: "39%", + borderRadius: 10, + borderRadiusApplication: "end", + borderRadiusWhenStacked: "last", + }, + }, + dataLabels: { + enabled: false, + }, + xaxis: { + categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug"], + axisBorder: { + show: false, + }, + axisTicks: { + show: false, + }, + }, + legend: { + show: true, + position: "top", + horizontalAlign: "left", + fontFamily: "Outfit", + fontSize: "14px", + fontWeight: 400, + markers: { + size: 5, + shape: "circle", + radius: 999, + strokeWidth: 0, + }, + itemMargin: { + horizontal: 10, + vertical: 0, + }, + }, + yaxis: { + title: false, + }, + grid: { + yaxis: { + lines: { + show: true, + }, + }, + }, + fill: { + opacity: 1, + }, + + tooltip: { + x: { + show: false, + }, + y: { + formatter: function (val) { + return val; + }, + }, + }, + }; + + const chartSix = new ApexCharts(chartSixEl, chartSixOptions); + chartSix.render(); + return chartSix; + } +} diff --git a/resources/js/components/chart/chart-8.js b/resources/js/components/chart/chart-8.js new file mode 100644 index 0000000..14f8efa --- /dev/null +++ b/resources/js/components/chart/chart-8.js @@ -0,0 +1,108 @@ + +export function initChartEight() { + const chartEightEl = document.querySelector('#chartEight'); + if (chartEightEl) { + const chartEightOptions = { + series: [ + { + name: "Sales", + data: [180, 190, 170, 160, 175, 165, 170, 205, 230, 210, 240, 235], + }, + { + name: "Revenue", + data: [40, 30, 50, 40, 55, 40, 70, 100, 110, 120, 150, 140], + }, + ], + legend: { + show: false, + position: "top", + horizontalAlign: "left", + }, + colors: ["#465FFF", "#9CB9FF"], + chart: { + fontFamily: "Outfit, sans-serif", + height: 310, + type: "area", + toolbar: { + show: false, + }, + }, + fill: { + gradient: { + enabled: true, + opacityFrom: 0.55, + opacityTo: 0, + }, + }, + stroke: { + curve: "smooth", + width: ["2", "2"], + }, + + markers: { + size: 0, + }, + labels: { + show: false, + position: "top", + }, + grid: { + xaxis: { + lines: { + show: false, + }, + }, + yaxis: { + lines: { + show: true, + }, + }, + }, + dataLabels: { + enabled: false, + }, + tooltip: { + x: { + format: "dd MMM yyyy", + }, + }, + xaxis: { + type: "category", + categories: [ + "Jan", + "Feb", + "Mar", + "Apr", + "May", + "Jun", + "Jul", + "Aug", + "Sep", + "Oct", + "Nov", + "Dec", + ], + axisBorder: { + show: false, + }, + axisTicks: { + show: false, + }, + tooltip: false, + }, + yaxis: { + title: { + style: { + fontSize: "0px", + }, + }, + }, + }; + + const chartEight = new ApexCharts(chartEightEl, chartEightOptions); + chartEight.render(); + + return chartEight; + } +} +export default initChartEight; diff --git a/resources/js/components/map.js b/resources/js/components/map.js new file mode 100644 index 0000000..efad7cf --- /dev/null +++ b/resources/js/components/map.js @@ -0,0 +1,63 @@ +import jsVectorMap from 'jsvectormap'; +import 'jsvectormap/dist/maps/world'; +import 'jsvectormap/dist/jsvectormap.min.css'; + +export const initMap = () => { + const mapSelectorOne = document.querySelectorAll('#mapOne'); + + if (mapSelectorOne.length) { + const mapOne = new jsVectorMap({ + selector: "#mapOne", + map: "world", + zoomButtons: false, + regionStyle: { + initial: { + fontFamily: "Outfit", + fill: "#D9D9D9", + }, + hover: { + fillOpacity: 1, + fill: "#465fff", + }, + }, + markers: [ + { + name: "Egypt", + coords: [26.8206, 30.8025], + }, + { + name: "United Kingdom", + coords: [55.3781, 3.436], + }, + { + name: "United States", + coords: [37.0902, -95.7129], + }, + ], + + markerStyle: { + initial: { + strokeWidth: 1, + fill: "#465fff", + fillOpacity: 1, + r: 4, + }, + hover: { + fill: "#465fff", + fillOpacity: 1, + }, + selected: {}, + selectedHover: {}, + }, + + onRegionTooltipShow: function (event, tooltip, code) { + tooltip.text( + tooltip.text() + (code === "EG" ? " (Hello Russia)" : ""), + true // This second parameter enables HTML + ); + }, + }); + } +}; + +export default initMap; diff --git a/resources/sass/_variables.scss b/resources/sass/_variables.scss deleted file mode 100644 index 172daaa..0000000 --- a/resources/sass/_variables.scss +++ /dev/null @@ -1,7 +0,0 @@ -// Body -$body-bg: #f8fafc; - -// Typography -$font-family-sans-serif: 'Nunito', sans-serif; -$font-size-base: 0.9rem; -$line-height-base: 1.6; diff --git a/resources/sass/app.scss b/resources/sass/app.scss deleted file mode 100644 index 1026a0b..0000000 --- a/resources/sass/app.scss +++ /dev/null @@ -1,8 +0,0 @@ -// Fonts -@import url('https://fonts.bunny.net/css?family=Nunito'); - -// Variables -@import 'variables'; - -// Bootstrap -@import 'bootstrap/scss/bootstrap'; diff --git a/vite.config.js b/vite.config.js index dbbf333..2b18453 100644 --- a/vite.config.js +++ b/vite.config.js @@ -1,14 +1,13 @@ import { defineConfig } from 'vite'; import laravel from 'laravel-vite-plugin'; +import tailwindcss from '@tailwindcss/vite'; export default defineConfig({ plugins: [ laravel({ - input: [ - 'resources/sass/app.scss', - 'resources/js/app.js', - ], + input: ['resources/css/app.css', 'resources/js/app.js'], refresh: true, }), + tailwindcss(), ], -}); +}); \ No newline at end of file