@soyfri/template 1.0.0

package/dist/partials/widgets/mixed/MixedWidget3.js

@@ -0,0 +1,207 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MixedWidget3 = void 0;
+var react_1 = __importStar(require("react"));
+var apexcharts_1 = __importDefault(require("apexcharts"));
+var helpers_1 = require("../../../helpers");
+var _utils_1 = require("../../../assets/ts/_utils");
+var Dropdown1_1 = require("../../content/dropdown/Dropdown1");
+var clsx_1 = __importDefault(require("clsx"));
+var ThemeModeProvider_1 = require("../../layout/theme-mode/ThemeModeProvider");
+var MixedWidget3 = function (_a) {
+    var className = _a.className, chartColor = _a.chartColor, chartHeight = _a.chartHeight;
+    var chartRef = (0, react_1.useRef)(null);
+    var mode = (0, ThemeModeProvider_1.useThemeMode)().mode;
+    var refreshChart = function () {
+        if (!chartRef.current) {
+            return;
+        }
+        var chart = new apexcharts_1.default(chartRef.current, chartOptions(chartHeight));
+        if (chart) {
+            chart.render();
+        }
+        return chart;
+    };
+    (0, react_1.useEffect)(function () {
+        var chart = refreshChart();
+        return function () {
+            if (chart) {
+                chart.destroy();
+            }
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [chartRef, mode]);
+    return (react_1.default.createElement("div", { className: "card ".concat(className) },
+        react_1.default.createElement("div", { className: "card-header border-0 bg-".concat(chartColor, " py-5") },
+            react_1.default.createElement("h3", { className: 'card-title fw-bold text-white' }, "Sales Progress"),
+            react_1.default.createElement("div", { className: 'card-toolbar' },
+                react_1.default.createElement("button", { type: 'button', className: (0, clsx_1.default)('btn btn-sm btn-icon btn-color-white btn-active-white', "btn-active-color-".concat(chartColor), 'border-0 me-n3'), "data-kt-menu-trigger": 'click', "data-kt-menu-placement": 'bottom-end', "data-kt-menu-flip": 'top-end' },
+                    react_1.default.createElement(helpers_1.KTIcon, { iconName: 'category', className: 'fs-2' })),
+                react_1.default.createElement(Dropdown1_1.Dropdown1, null))),
+        react_1.default.createElement("div", { className: 'card-body p-0' },
+            react_1.default.createElement("div", { ref: chartRef, className: "mixed-widget-12-chart card-rounded-bottom bg-".concat(chartColor) }),
+            react_1.default.createElement("div", { className: 'card-rounded bg-body mt-n10 position-relative card-px py-15' },
+                react_1.default.createElement("div", { className: 'row g-0 mb-7' },
+                    react_1.default.createElement("div", { className: 'col mx-5' },
+                        react_1.default.createElement("div", { className: 'fs-6 text-gray-500' }, "Avarage Sale"),
+                        react_1.default.createElement("div", { className: 'fs-2 fw-bold text-gray-800' }, "$650")),
+                    react_1.default.createElement("div", { className: 'col mx-5' },
+                        react_1.default.createElement("div", { className: 'fs-6 text-gray-500' }, "Comissions"),
+                        react_1.default.createElement("div", { className: 'fs-2 fw-bold text-gray-800' }, "$29,500"))),
+                react_1.default.createElement("div", { className: 'row g-0' },
+                    react_1.default.createElement("div", { className: 'col mx-5' },
+                        react_1.default.createElement("div", { className: 'fs-6 text-gray-500' }, "Revenue"),
+                        react_1.default.createElement("div", { className: 'fs-2 fw-bold text-gray-800' }, "$55,000")),
+                    react_1.default.createElement("div", { className: 'col mx-5' },
+                        react_1.default.createElement("div", { className: 'fs-6 text-gray-500' }, "Expenses"),
+                        react_1.default.createElement("div", { className: 'fs-2 fw-bold text-gray-800' }, "$1,130,600")))))));
+};
+exports.MixedWidget3 = MixedWidget3;
+var chartOptions = function (chartHeight) {
+    var labelColor = (0, _utils_1.getCSSVariableValue)('--bs-gray-500');
+    var borderColor = (0, _utils_1.getCSSVariableValue)('--bs-gray-200');
+    return {
+        series: [
+            {
+                name: 'Net Profit',
+                data: [35, 65, 75, 55, 45, 60, 55],
+            },
+            {
+                name: 'Revenue',
+                data: [40, 70, 80, 60, 50, 65, 60],
+            },
+        ],
+        chart: {
+            fontFamily: 'inherit',
+            type: 'bar',
+            height: chartHeight,
+            toolbar: {
+                show: false,
+            },
+            sparkline: {
+                enabled: true,
+            },
+        },
+        plotOptions: {
+            bar: {
+                horizontal: false,
+                columnWidth: '30%',
+                borderRadius: 5,
+            },
+        },
+        legend: {
+            show: false,
+        },
+        dataLabels: {
+            enabled: false,
+        },
+        stroke: {
+            show: true,
+            width: 1,
+            colors: ['transparent'],
+        },
+        xaxis: {
+            categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
+            axisBorder: {
+                show: false,
+            },
+            axisTicks: {
+                show: false,
+            },
+            labels: {
+                style: {
+                    colors: labelColor,
+                    fontSize: '12px',
+                },
+            },
+        },
+        yaxis: {
+            min: 0,
+            max: 100,
+            labels: {
+                style: {
+                    colors: labelColor,
+                    fontSize: '12px',
+                },
+            },
+        },
+        fill: {
+            type: ['solid', 'solid'],
+            opacity: [0.25, 1],
+        },
+        states: {
+            normal: {
+                filter: {
+                    type: 'none',
+                    value: 0,
+                },
+            },
+            hover: {
+                filter: {
+                    type: 'none',
+                    value: 0,
+                },
+            },
+            active: {
+                allowMultipleDataPointsSelection: false,
+                filter: {
+                    type: 'none',
+                    value: 0,
+                },
+            },
+        },
+        tooltip: {
+            style: {
+                fontSize: '12px',
+            },
+            y: {
+                formatter: function (val) {
+                    return '$' + val + ' thousands';
+                },
+            },
+            marker: {
+                show: false,
+            },
+        },
+        colors: ['#ffffff', '#ffffff'],
+        grid: {
+            borderColor: borderColor,
+            strokeDashArray: 4,
+            yaxis: {
+                lines: {
+                    show: true,
+                },
+            },
+            padding: {
+                left: 20,
+                right: 20,
+            },
+        },
+    };
+};

package/dist/partials/widgets/mixed/MixedWidget4.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+type Props = {
+    className: string;
+    color: string;
+    image: string;
+    title: string;
+    date: string;
+    progress: string;
+};
+declare const MixedWidget4: React.FC<Props>;
+export { MixedWidget4 };

package/dist/partials/widgets/mixed/MixedWidget4.js

@@ -0,0 +1,43 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MixedWidget4 = void 0;
+var clsx_1 = __importDefault(require("clsx"));
+var react_1 = __importDefault(require("react"));
+var helpers_1 = require("../../../helpers");
+var Dropdown1_1 = require("../../content/dropdown/Dropdown1");
+var MixedWidget4 = function (_a) {
+    var className = _a.className, color = _a.color, image = _a.image, title = _a.title, date = _a.date, progress = _a.progress;
+    return (react_1.default.createElement("div", { className: "card ".concat(className) },
+        react_1.default.createElement("div", { className: 'card-body' },
+            react_1.default.createElement("div", { className: 'd-flex flex-stack' },
+                react_1.default.createElement("div", { className: 'd-flex align-items-center' },
+                    react_1.default.createElement("div", { className: 'symbol symbol-60px me-5' },
+                        react_1.default.createElement("span", { className: (0, clsx_1.default)("symbol-label", "bg-".concat(color, "-light")) },
+                            react_1.default.createElement("img", { src: (0, helpers_1.toAbsoluteUrl)(image), className: 'h-50 align-self-center', alt: '' }))),
+                    react_1.default.createElement("div", { className: 'd-flex flex-column flex-grow-1 my-lg-0 my-2 pr-3' },
+                        react_1.default.createElement("a", { href: '#', className: 'text-gray-900 fw-bold text-hover-primary fs-5' }, title),
+                        react_1.default.createElement("span", { className: 'text-muted fw-semibold' }, date))),
+                react_1.default.createElement("div", { className: 'ms-1' },
+                    react_1.default.createElement("button", { type: 'button', className: 'btn btn-sm btn-icon btn-color-primary btn-active-light-primary', "data-kt-menu-trigger": 'click', "data-kt-menu-placement": 'bottom-end', "data-kt-menu-flip": 'top-end' },
+                        react_1.default.createElement(helpers_1.KTIcon, { iconName: 'category', className: 'fs-2' })),
+                    react_1.default.createElement(Dropdown1_1.Dropdown1, null))),
+            react_1.default.createElement("div", { className: 'd-flex flex-column w-100 mt-12' },
+                react_1.default.createElement("span", { className: 'text-gray-900 me-2 fw-bold pb-3' }, "Progress"),
+                react_1.default.createElement("div", { className: 'progress h-5px w-100' },
+                    react_1.default.createElement("div", { className: "progress-bar bg-".concat(color), role: 'progressbar', style: { width: progress } }))),
+            react_1.default.createElement("div", { className: 'd-flex flex-column mt-10' },
+                react_1.default.createElement("div", { className: 'text-gray-900 me-2 fw-bold pb-4' }, "Team"),
+                react_1.default.createElement("div", { className: 'd-flex' },
+                    react_1.default.createElement("a", { href: '#', className: 'symbol symbol-35px me-2', "data-bs-toggle": 'tooltip', title: 'Ana Stone' },
+                        react_1.default.createElement("img", { src: (0, helpers_1.toAbsoluteUrl)('media/avatars/300-6.jpg'), alt: '' })),
+                    react_1.default.createElement("a", { href: '#', className: 'symbol symbol-35px me-2', "data-bs-toggle": 'tooltip', title: 'Mark Larson' },
+                        react_1.default.createElement("img", { src: (0, helpers_1.toAbsoluteUrl)('media/avatars/300-5.jpg'), alt: '' })),
+                    react_1.default.createElement("a", { href: '#', className: 'symbol symbol-35px me-2', "data-bs-toggle": 'tooltip', title: 'Sam Harris' },
+                        react_1.default.createElement("img", { src: (0, helpers_1.toAbsoluteUrl)('media/avatars/300-9.jpg'), alt: '' })),
+                    react_1.default.createElement("a", { href: '#', className: 'symbol symbol-35px', "data-bs-toggle": 'tooltip', title: 'Alice Micto' },
+                        react_1.default.createElement("img", { src: (0, helpers_1.toAbsoluteUrl)('media/avatars/300-10.jpg'), alt: '' })))))));
+};
+exports.MixedWidget4 = MixedWidget4;

package/dist/partials/widgets/mixed/MixedWidget5.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+type Props = {
+    className: string;
+    time: string;
+    image: string;
+    title: string;
+    description: string;
+};
+declare const MixedWidget5: FC<Props>;
+export { MixedWidget5 };

package/dist/partials/widgets/mixed/MixedWidget5.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MixedWidget5 = void 0;
+var react_1 = __importDefault(require("react"));
+var helpers_1 = require("../../../helpers");
+var MixedWidget5 = function (_a) {
+    var className = _a.className, time = _a.time, image = _a.image, title = _a.title, description = _a.description;
+    return (react_1.default.createElement("div", { className: "card ".concat(className) },
+        react_1.default.createElement("div", { className: 'card-body d-flex flex-column pb-10 pb-lg-15' },
+            react_1.default.createElement("div", { className: 'flex-grow-1' },
+                react_1.default.createElement("div", { className: 'd-flex align-items-center pe-2 mb-5' },
+                    react_1.default.createElement("span", { className: 'text-muted fw-bold fs-5 flex-grow-1' }, time),
+                    react_1.default.createElement("div", { className: 'symbol symbol-50px' },
+                        react_1.default.createElement("span", { className: 'symbol-label bg-light' },
+                            react_1.default.createElement("img", { src: (0, helpers_1.toAbsoluteUrl)(image), className: 'h-50 align-self-center', alt: '' })))),
+                react_1.default.createElement("a", { href: '#', className: 'text-gray-900 fw-bold text-hover-primary fs-4' }, title),
+                react_1.default.createElement("p", { className: 'py-3', dangerouslySetInnerHTML: { __html: description } })),
+            react_1.default.createElement("div", { className: 'd-flex align-items-center' },
+                react_1.default.createElement("a", { href: '#', className: 'symbol symbol-35px me-2', "data-bs-toggle": 'tooltip', title: 'Ana Stone' },
+                    react_1.default.createElement("img", { src: (0, helpers_1.toAbsoluteUrl)('media/avatars/300-6.jpg'), alt: '' })),
+                react_1.default.createElement("a", { href: '#', className: 'symbol symbol-35px me-2', "data-bs-toggle": 'tooltip', title: 'Mark Larson' },
+                    react_1.default.createElement("img", { src: (0, helpers_1.toAbsoluteUrl)('media/avatars/300-5.jpg'), alt: '' })),
+                react_1.default.createElement("a", { href: '#', className: 'symbol symbol-35px me-2', "data-bs-toggle": 'tooltip', title: 'Sam Harris' },
+                    react_1.default.createElement("img", { src: (0, helpers_1.toAbsoluteUrl)('media/avatars/300-9.jpg'), alt: '' }))))));
+};
+exports.MixedWidget5 = MixedWidget5;

package/dist/partials/widgets/mixed/MixedWidget6.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+type Props = {
+    className: string;
+    chartHeight: string;
+    chartColor: string;
+};
+declare const MixedWidget6: FC<Props>;
+export { MixedWidget6 };

package/dist/partials/widgets/mixed/MixedWidget6.js

@@ -0,0 +1,211 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MixedWidget6 = void 0;
+var react_1 = __importStar(require("react"));
+var apexcharts_1 = __importDefault(require("apexcharts"));
+var helpers_1 = require("../../../helpers");
+var _utils_1 = require("../../../assets/ts/_utils");
+var Dropdown1_1 = require("../../content/dropdown/Dropdown1");
+var ThemeModeProvider_1 = require("../../layout/theme-mode/ThemeModeProvider");
+var MixedWidget6 = function (_a) {
+    var className = _a.className, chartHeight = _a.chartHeight, chartColor = _a.chartColor;
+    var chartRef = (0, react_1.useRef)(null);
+    var mode = (0, ThemeModeProvider_1.useThemeMode)().mode;
+    var refreshChart = function () {
+        if (!chartRef.current) {
+            return;
+        }
+        var chart = new apexcharts_1.default(chartRef.current, chartOptions(chartHeight, chartColor));
+        if (chart) {
+            chart.render();
+        }
+        return chart;
+    };
+    (0, react_1.useEffect)(function () {
+        var chart = refreshChart();
+        return function () {
+            if (chart) {
+                chart.destroy();
+            }
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [chartRef, mode]);
+    return (react_1.default.createElement("div", { className: "card ".concat(className) },
+        react_1.default.createElement("div", { className: 'card-header border-0 py-5' },
+            react_1.default.createElement("h3", { className: 'card-title align-items-start flex-column' },
+                react_1.default.createElement("span", { className: 'card-label fw-bold fs-3 mb-1' }, "Sales Overview"),
+                react_1.default.createElement("span", { className: 'text-muted fw-semibold fs-7' }, "Recent sales statistics")),
+            react_1.default.createElement("div", { className: 'card-toolbar' },
+                react_1.default.createElement("button", { type: 'button', className: 'btn btn-sm btn-icon btn-color-primary btn-active-light-primary', "data-kt-menu-trigger": 'click', "data-kt-menu-placement": 'bottom-end', "data-kt-menu-flip": 'top-end' },
+                    react_1.default.createElement(helpers_1.KTIcon, { iconName: 'category', className: 'fs-2' })),
+                react_1.default.createElement(Dropdown1_1.Dropdown1, null))),
+        react_1.default.createElement("div", { className: 'card-body p-0 d-flex flex-column' },
+            react_1.default.createElement("div", { className: 'card-p pt-5 bg-body flex-grow-1' },
+                react_1.default.createElement("div", { className: 'row g-0' },
+                    react_1.default.createElement("div", { className: 'col mr-8' },
+                        react_1.default.createElement("div", { className: 'fs-7 text-muted fw-semibold' }, "Average Sale"),
+                        react_1.default.createElement("div", { className: 'd-flex align-items-center' },
+                            react_1.default.createElement("div", { className: 'fs-4 fw-bold' }, "$650"),
+                            react_1.default.createElement(helpers_1.KTIcon, { iconName: 'arrow-up', className: 'fs-5 text-success ms-1' }))),
+                    react_1.default.createElement("div", { className: 'col' },
+                        react_1.default.createElement("div", { className: 'fs-7 text-muted fw-semibold' }, "Commission"),
+                        react_1.default.createElement("div", { className: 'fs-4 fw-bold' }, "$233,600"))),
+                react_1.default.createElement("div", { className: 'row g-0 mt-8' },
+                    react_1.default.createElement("div", { className: 'col mr-8' },
+                        react_1.default.createElement("div", { className: 'fs-7 text-muted fw-semibold' }, "Annual Taxes 2019"),
+                        react_1.default.createElement("div", { className: 'fs-4 fw-bold' }, "$29,004")),
+                    react_1.default.createElement("div", { className: 'col' },
+                        react_1.default.createElement("div", { className: 'fs-7 text-muted fw-semibold' }, "Annual Income"),
+                        react_1.default.createElement("div", { className: 'd-flex align-items-center' },
+                            react_1.default.createElement("div", { className: 'fs-4 fw-bold' }, "$1,480,00"),
+                            react_1.default.createElement(helpers_1.KTIcon, { iconName: 'arrow-down', className: 'fs-5 text-danger ms-1' }))))),
+            react_1.default.createElement("div", { ref: chartRef, className: 'mixed-widget-3-chart card-rounded-bottom', "data-kt-chart-color": chartColor, style: { height: chartHeight } }))));
+};
+exports.MixedWidget6 = MixedWidget6;
+var chartOptions = function (chartHeight, chartColor) {
+    var labelColor = (0, _utils_1.getCSSVariableValue)('--bs-gray-800');
+    var strokeColor = (0, _utils_1.getCSSVariableValue)('--bs-gray-300');
+    var baseColor = (0, _utils_1.getCSSVariableValue)('--bs-' + chartColor);
+    var lightColor = (0, _utils_1.getCSSVariableValue)('--bs-' + chartColor + '-light');
+    return {
+        series: [
+            {
+                name: 'Net Profit',
+                data: [30, 25, 45, 30, 55, 55],
+            },
+        ],
+        chart: {
+            fontFamily: 'inherit',
+            type: 'area',
+            height: chartHeight,
+            toolbar: {
+                show: false,
+            },
+            zoom: {
+                enabled: false,
+            },
+            sparkline: {
+                enabled: true,
+            },
+        },
+        plotOptions: {},
+        legend: {
+            show: false,
+        },
+        dataLabels: {
+            enabled: false,
+        },
+        fill: {
+            type: 'solid',
+            opacity: 1,
+        },
+        stroke: {
+            curve: 'smooth',
+            show: true,
+            width: 3,
+            colors: [baseColor],
+        },
+        xaxis: {
+            categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
+            axisBorder: {
+                show: false,
+            },
+            axisTicks: {
+                show: false,
+            },
+            labels: {
+                show: false,
+                style: {
+                    colors: labelColor,
+                    fontSize: '12px',
+                },
+            },
+            crosshairs: {
+                show: false,
+                position: 'front',
+                stroke: {
+                    color: strokeColor,
+                    width: 1,
+                    dashArray: 3,
+                },
+            },
+            tooltip: {
+                enabled: false,
+            },
+        },
+        yaxis: {
+            min: 0,
+            max: 60,
+            labels: {
+                show: false,
+                style: {
+                    colors: labelColor,
+                    fontSize: '12px',
+                },
+            },
+        },
+        states: {
+            normal: {
+                filter: {
+                    type: 'none',
+                    value: 0,
+                },
+            },
+            hover: {
+                filter: {
+                    type: 'none',
+                    value: 0,
+                },
+            },
+            active: {
+                allowMultipleDataPointsSelection: false,
+                filter: {
+                    type: 'none',
+                    value: 0,
+                },
+            },
+        },
+        tooltip: {
+            style: {
+                fontSize: '12px',
+            },
+            y: {
+                formatter: function (val) {
+                    return '$' + val + ' thousands';
+                },
+            },
+        },
+        colors: [lightColor],
+        markers: {
+            colors: [lightColor],
+            strokeColors: [baseColor],
+            strokeWidth: 3,
+        },
+    };
+};

package/dist/partials/widgets/mixed/MixedWidget7.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+type Props = {
+    className: string;
+    chartColor: string;
+    chartHeight: string;
+};
+declare const MixedWidget7: React.FC<Props>;
+export { MixedWidget7 };

package/dist/partials/widgets/mixed/MixedWidget7.js

@@ -0,0 +1,125 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MixedWidget7 = void 0;
+var react_1 = __importStar(require("react"));
+var apexcharts_1 = __importDefault(require("apexcharts"));
+var helpers_1 = require("../../../helpers");
+var _utils_1 = require("../../../assets/ts/_utils");
+var Dropdown1_1 = require("../../content/dropdown/Dropdown1");
+var ThemeModeProvider_1 = require("../../layout/theme-mode/ThemeModeProvider");
+var MixedWidget7 = function (_a) {
+    var className = _a.className, chartColor = _a.chartColor, chartHeight = _a.chartHeight;
+    var chartRef = (0, react_1.useRef)(null);
+    var mode = (0, ThemeModeProvider_1.useThemeMode)().mode;
+    var refreshChart = function () {
+        if (!chartRef.current) {
+            return;
+        }
+        var chart = new apexcharts_1.default(chartRef.current, chartOptions(chartColor, chartHeight));
+        if (chart) {
+            chart.render();
+        }
+        return chart;
+    };
+    (0, react_1.useEffect)(function () {
+        var chart = refreshChart();
+        return function () {
+            if (chart) {
+                chart.destroy();
+            }
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [chartRef, mode]);
+    return (react_1.default.createElement("div", { className: "card ".concat(className) },
+        react_1.default.createElement("div", { className: 'card-header border-0 py-5' },
+            react_1.default.createElement("h3", { className: 'card-title align-items-start flex-column' },
+                react_1.default.createElement("span", { className: 'card-label fw-bold fs-3 mb-1' }, "Action Needed"),
+                react_1.default.createElement("span", { className: 'text-muted fw-semibold fs-7' }, "Complete your profile setup")),
+            react_1.default.createElement("div", { className: 'card-toolbar' },
+                react_1.default.createElement("button", { type: 'button', className: 'btn btn-sm btn-icon btn-color-primary btn-active-light-primary', "data-kt-menu-trigger": 'click', "data-kt-menu-placement": 'bottom-end', "data-kt-menu-flip": 'top-end' },
+                    react_1.default.createElement(helpers_1.KTIcon, { iconName: 'category', className: 'fs-2' })),
+                react_1.default.createElement(Dropdown1_1.Dropdown1, null))),
+        react_1.default.createElement("div", { className: 'card-body d-flex flex-column' },
+            react_1.default.createElement("div", { className: 'flex-grow-1' },
+                react_1.default.createElement("div", { ref: chartRef, className: 'mixed-widget-4-chart' })),
+            react_1.default.createElement("div", { className: 'pt-5' },
+                react_1.default.createElement("p", { className: 'text-center fs-6 pb-5 ' },
+                    react_1.default.createElement("span", { className: 'badge badge-light-danger fs-8' }, "Notes:"),
+                    "\u00A0 Current sprint requires stakeholders",
+                    react_1.default.createElement("br", null),
+                    "to approve newly amended policies"),
+                react_1.default.createElement("a", { href: '#', className: "btn btn-".concat(chartColor, " w-100 py-3") }, "Take Action")))));
+};
+exports.MixedWidget7 = MixedWidget7;
+var chartOptions = function (chartColor, chartHeight) {
+    var baseColor = (0, _utils_1.getCSSVariableValue)('--bs-' + chartColor);
+    var lightColor = (0, _utils_1.getCSSVariableValue)('--bs-' + chartColor + '-light');
+    var labelColor = (0, _utils_1.getCSSVariableValue)('--bs-gray-700');
+    return {
+        series: [74],
+        chart: {
+            fontFamily: 'inherit',
+            height: chartHeight,
+            type: 'radialBar',
+        },
+        plotOptions: {
+            radialBar: {
+                hollow: {
+                    margin: 0,
+                    size: '65%',
+                },
+                dataLabels: {
+                    name: {
+                        show: false,
+                        fontWeight: '700',
+                    },
+                    value: {
+                        color: labelColor,
+                        fontSize: '30px',
+                        fontWeight: '700',
+                        offsetY: 12,
+                        show: true,
+                        formatter: function (val) {
+                            return val + '%';
+                        },
+                    },
+                },
+                track: {
+                    background: lightColor,
+                    strokeWidth: '100%',
+                },
+            },
+        },
+        colors: [baseColor],
+        stroke: {
+            lineCap: 'round',
+        },
+        labels: ['Progress'],
+    };
+};