@soyfri/template 1.0.0

package/dist/partials/modals/invite-users/InviteUsers.js

@@ -0,0 +1,161 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InviteUsers = void 0;
+var react_1 = __importDefault(require("react"));
+var helpers_1 = require("../../../helpers");
+var InviteUsers = function () {
+    var users = [
+        {
+            avatar: 'media/avatars/300-6.jpg',
+            name: 'Emma Smith',
+            email: 'e.smith@kpmg.com.au',
+            access: '1',
+        },
+        {
+            state: 'danger',
+            name: 'Melody Macy',
+            email: 'melody@altbox.com',
+            access: '1',
+        },
+        {
+            avatar: 'media/avatars/300-1.jpg',
+            name: 'Max Smith',
+            email: 'max@kt.com',
+            access: '3',
+        },
+        {
+            avatar: 'media/avatars/300-1.jpg',
+            name: 'Sean Bean',
+            email: 'sean@dellito.com',
+            access: '2',
+        },
+        {
+            avatar: 'media/avatars/300-25.jpg',
+            name: 'Brian Cox',
+            email: 'brian@exchange.com',
+            access: '3',
+        },
+        {
+            state: 'warning',
+            name: 'Mikaela Collins',
+            email: 'mikaela@pexcom.com',
+            access: '2',
+        },
+        {
+            avatar: 'media/avatars/300-9.jpg',
+            name: 'Francis Mitcham',
+            email: 'f.mitcham@kpmg.com.au',
+            access: '3',
+        },
+        {
+            state: 'danger',
+            name: 'Olivia Wild',
+            email: 'olivia@corpmail.com',
+            access: '2',
+        },
+        {
+            state: 'info',
+            name: 'Neil Owen',
+            email: 'owen.neil@gmail.com',
+            access: '1',
+        },
+        {
+            avatar: 'media/avatars/300-23.jpg',
+            name: 'Dan Wilson',
+            email: 'dam@consilting.com',
+            access: '3',
+        },
+        {
+            state: 'danger',
+            name: 'Emma Bold',
+            email: 'emma@intenso.com',
+            access: '2',
+        },
+        {
+            avatar: 'media/avatars/300-12.jpg',
+            name: 'Ana Crown',
+            email: 'ana.cf@limtel.com',
+            access: '1',
+        },
+        {
+            state: 'primary',
+            name: 'Robert Doe',
+            email: 'robert@benko.com',
+            access: '3',
+        },
+        {
+            avatar: 'media/avatars/300-13.jpg',
+            name: 'John Miller',
+            email: 'miller@mapple.com',
+            access: '3',
+        },
+        {
+            state: 'success',
+            name: 'Lucy Kunic',
+            email: 'lucy.m@fentech.com',
+            access: '2',
+        },
+        {
+            avatar: 'media/avatars/300-21.jpg',
+            name: 'Ethan Wilder',
+            email: 'ethan@loop.com.au',
+            access: '1',
+        },
+        {
+            avatar: 'media/avatars/300-12.jpg',
+            name: 'Ana Crown',
+            email: 'ana.cf@limtel.com',
+            access: '3',
+        },
+    ];
+    return (react_1.default.createElement("div", { className: 'modal fade', id: 'kt_modal_invite_friends', "aria-hidden": 'true' },
+        react_1.default.createElement("div", { className: 'modal-dialog mw-650px' },
+            react_1.default.createElement("div", { className: 'modal-content' },
+                react_1.default.createElement("div", { className: 'modal-header pb-0 border-0 justify-content-end' },
+                    react_1.default.createElement("div", { className: 'btn btn-sm btn-icon btn-active-color-primary', "data-bs-dismiss": 'modal' },
+                        react_1.default.createElement(helpers_1.KTIcon, { iconName: 'cross', className: 'fs-1' }))),
+                react_1.default.createElement("div", { className: 'modal-body scroll-y mx-5 mx-xl-18 pt-0 pb-15' },
+                    react_1.default.createElement("div", { className: 'text-center mb-13' },
+                        react_1.default.createElement("h1", { className: 'mb-3' }, "Invite a Friend"),
+                        react_1.default.createElement("div", { className: 'text-muted fw-bold fs-5' },
+                            "If you need more info, please check out",
+                            react_1.default.createElement("a", { href: '#', className: 'link-primary fw-bolder' },
+                                ' ',
+                                "FAQ Page"),
+                            ".")),
+                    react_1.default.createElement("div", { className: 'btn btn-light-primary fw-bolder w-100 mb-8' },
+                        react_1.default.createElement("img", { alt: 'Logo', src: (0, helpers_1.toAbsoluteUrl)('media/svg/brand-logos/google-icon.svg'), className: 'h-20px me-3' }),
+                        "Invite Gmail Contacts"),
+                    react_1.default.createElement("div", { className: 'separator d-flex flex-center mb-8' },
+                        react_1.default.createElement("span", { className: 'text-uppercase bg-body fs-7 fw-bold text-muted px-3' }, "or")),
+                    react_1.default.createElement("textarea", { className: 'form-control form-control-solid mb-8', rows: 3, placeholder: 'Type or paste emails here' }),
+                    react_1.default.createElement("div", { className: 'mb-10' },
+                        react_1.default.createElement("div", { className: 'fs-6 fw-bold mb-2' }, "Your Invitations"),
+                        react_1.default.createElement("div", { className: 'mh-300px scroll-y me-n7 pe-7' }, users.map(function (user, i) {
+                            return (react_1.default.createElement("div", { className: 'd-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed', key: i },
+                                react_1.default.createElement("div", { className: 'd-flex align-items-center' },
+                                    react_1.default.createElement("div", { className: 'symbol symbol-35px symbol-circle' },
+                                        user.avatar && react_1.default.createElement("img", { alt: 'Pic', src: (0, helpers_1.toAbsoluteUrl)(user.avatar) }),
+                                        user.state && (react_1.default.createElement("div", { className: 'symbol symbol-35px symbol-circle' },
+                                            react_1.default.createElement("span", { className: "symbol-label bg-light-".concat(user.state, " text-").concat(user.state, " fw-bold") }, user.name.charAt(0))))),
+                                    react_1.default.createElement("div", { className: 'ms-5' },
+                                        react_1.default.createElement("a", { href: '#', className: 'fs-5 fw-bolder text-gray-900 text-hover-primary mb-2' }, user.name),
+                                        react_1.default.createElement("div", { className: 'fw-bold text-muted' }, user.email))),
+                                react_1.default.createElement("div", { className: 'ms-2 w-100px' },
+                                    react_1.default.createElement("select", { defaultValue: '2', className: 'form-select form-select-solid form-select-sm select2-hidden-accessible' },
+                                        react_1.default.createElement("option", { value: '1' }, "Guest"),
+                                        react_1.default.createElement("option", { value: '2', "data-select2-id": 'select2-data-12-vz6w' }, "Owner"),
+                                        react_1.default.createElement("option", { value: '3' }, "Can Edit")))));
+                        }))),
+                    react_1.default.createElement("div", { className: 'd-flex flex-stack' },
+                        react_1.default.createElement("div", { className: 'me-5 fw-bold' },
+                            react_1.default.createElement("label", { className: 'fs-6' }, "Adding Users by Team Members"),
+                            react_1.default.createElement("div", { className: 'fs-7 text-muted' }, "If you need more info, please check budget planning")),
+                        react_1.default.createElement("label", { className: 'form-check form-switch form-check-custom form-check-solid' },
+                            react_1.default.createElement("input", { className: 'form-check-input', type: 'checkbox', value: '1' }),
+                            react_1.default.createElement("span", { className: 'form-check-label fw-bold text-muted' }, "Allowed"))))))));
+};
+exports.InviteUsers = InviteUsers;

package/dist/partials/modals/select-location/SelectLocationModal.d.ts

@@ -0,0 +1,11 @@
+import { Dispatch, SetStateAction, FC } from 'react';
+type Props = {
+    data: {
+        location: string;
+        setLocation: Dispatch<SetStateAction<string>>;
+    };
+    show: boolean;
+    handleClose: () => void;
+};
+declare const SelectLocationModal: FC<Props>;
+export { SelectLocationModal };

package/dist/partials/modals/select-location/SelectLocationModal.js

@@ -0,0 +1,58 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectLocationModal = void 0;
+var react_1 = __importStar(require("react"));
+var react_bootstrap_1 = require("react-bootstrap");
+var helpers_1 = require("../../../helpers");
+var SelectLocationModal = function (_a) {
+    var show = _a.show, handleClose = _a.handleClose, data = _a.data;
+    (0, react_1.useEffect)(function () {
+        initMap();
+    }, []);
+    var _b = (0, react_1.useState)(data.location), location = _b[0], setLocation = _b[1];
+    var dissmissLocation = function () {
+        setLocation(data.location);
+        handleClose();
+    };
+    var applyLocation = function () {
+        data.setLocation(location);
+        handleClose();
+    };
+    var initMap = function () { };
+    return (react_1.default.createElement(react_bootstrap_1.Modal, { className: 'modal fade', id: 'kt_modal_select_location', "data-backdrop": 'static', tabIndex: -1, role: 'dialog', show: show, dialogClassName: 'modal-xl', "aria-hidden": 'true', onHide: dissmissLocation },
+        react_1.default.createElement("div", { className: 'modal-content' },
+            react_1.default.createElement("div", { className: 'modal-header' },
+                react_1.default.createElement("h5", { className: 'modal-title' }, "Select Location"),
+                react_1.default.createElement("div", { className: 'btn btn-icon btn-sm btn-active-light-primary ms-2', onClick: dissmissLocation },
+                    react_1.default.createElement(helpers_1.KTIcon, { iconName: 'cross', className: 'fs-2x' }))),
+            react_1.default.createElement("div", { className: 'modal-body' },
+                react_1.default.createElement("input", { type: 'text', value: location, onChange: function (e) { return setLocation(e.target.value); } }),
+                react_1.default.createElement("div", { id: 'kt_modal_select_location_map', className: 'map h-450px' })),
+            react_1.default.createElement("div", { className: 'modal-footer' },
+                react_1.default.createElement("button", { type: 'button', className: 'btn btn-light-primary', onClick: dissmissLocation }, "Cancel"),
+                react_1.default.createElement("button", { id: 'submit', type: 'button', className: 'btn btn-primary', onClick: applyLocation }, "Apply")))));
+};
+exports.SelectLocationModal = SelectLocationModal;

package/dist/partials/modals/upgrade-plan/UpgradePlan.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+declare const UpgradePlan: FC;
+export { UpgradePlan };

package/dist/partials/modals/upgrade-plan/UpgradePlan.js

@@ -0,0 +1,230 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UpgradePlan = void 0;
+var react_1 = __importStar(require("react"));
+var helpers_1 = require("../../../helpers");
+var plans = [
+    {
+        title: 'Startup',
+        subTitle: 'Best for startups',
+        description: 'Optimal for 10+ team size and new startup',
+        priceMonth: '39',
+        priceAnnual: '399',
+        default: true,
+        custom: false,
+        features: [
+            {
+                title: 'Up to 10 Active Users',
+                supported: true,
+            },
+            {
+                title: 'Up to 30 Project Integrations',
+                supported: true,
+            },
+            {
+                title: 'Analytics Module',
+                supported: true,
+            },
+            {
+                title: 'Finance Module',
+                supported: false,
+            },
+            {
+                title: 'Accounting Module',
+                supported: false,
+            },
+            {
+                title: 'Network Platform',
+                supported: false,
+            },
+            {
+                title: 'Unlimited Cloud Space',
+                supported: false,
+            },
+        ],
+    },
+    {
+        title: 'Advanced',
+        subTitle: 'Best for 100+ team size',
+        description: 'Optimal for 100+ team size and grown company',
+        priceMonth: '339',
+        priceAnnual: '3399',
+        default: false,
+        custom: false,
+        features: [
+            {
+                title: 'Up to 10 Active Users',
+                supported: true,
+            },
+            {
+                title: 'Up to 30 Project Integrations',
+                supported: true,
+            },
+            {
+                title: 'Analytics Module',
+                supported: true,
+            },
+            {
+                title: 'Finance Module',
+                supported: true,
+            },
+            {
+                title: 'Accounting Module',
+                supported: true,
+            },
+            {
+                title: 'Network Platform',
+                supported: false,
+            },
+            {
+                title: 'Unlimited Cloud Space',
+                supported: false,
+            },
+        ],
+    },
+    {
+        title: 'Enterprise',
+        subTitle: 'Best value for 1000+ team',
+        description: 'Optimal for 1000+ team and enterpise',
+        priceMonth: '999',
+        priceAnnual: '9999',
+        label: 'Most popular',
+        default: false,
+        custom: false,
+        features: [
+            {
+                title: 'Up to 10 Active Users',
+                supported: true,
+            },
+            {
+                title: 'Up to 30 Project Integrations',
+                supported: true,
+            },
+            {
+                title: 'Analytics Module',
+                supported: true,
+            },
+            {
+                title: 'Finance Module',
+                supported: true,
+            },
+            {
+                title: 'Accounting Module',
+                supported: true,
+            },
+            {
+                title: 'Network Platform',
+                supported: true,
+            },
+            {
+                title: 'Unlimited Cloud Space',
+                supported: true,
+            },
+        ],
+    },
+    {
+        title: 'Custom',
+        subTitle: 'Requet a custom license',
+        default: false,
+        custom: true,
+    },
+];
+var UpgradePlan = function () {
+    var _a = (0, react_1.useState)('month'), currentState = _a[0], setCurrentState = _a[1];
+    var _b = (0, react_1.useState)('Startup'), selected = _b[0], setSelected = _b[1];
+    return (react_1.default.createElement("div", { className: 'modal fade', id: 'kt_modal_upgrade_plan', "aria-hidden": 'true' },
+        react_1.default.createElement("div", { className: 'modal-dialog modal-xl' },
+            react_1.default.createElement("div", { className: 'modal-content rounded' },
+                react_1.default.createElement("div", { className: 'modal-header justify-content-end border-0 pb-0' },
+                    react_1.default.createElement("div", { className: 'btn btn-sm btn-icon btn-active-color-primary', "data-bs-dismiss": 'modal' },
+                        react_1.default.createElement(helpers_1.KTIcon, { iconName: 'cross', className: 'fs-1' }))),
+                react_1.default.createElement("div", { className: 'modal-body pt-0 pb-15 px-5 px-xl-20' },
+                    react_1.default.createElement("div", { className: 'mb-13 text-center' },
+                        react_1.default.createElement("h1", { className: 'mb-3' }, "Upgrade a Plan"),
+                        react_1.default.createElement("div", { className: 'text-muted fw-bold fs-5' },
+                            "If you need more info, please check",
+                            ' ',
+                            react_1.default.createElement("a", { href: '#', className: 'link-primary fw-bolder' }, "Pricing Guidelines"),
+                            ".")),
+                    react_1.default.createElement("div", { className: 'd-flex flex-column' },
+                        react_1.default.createElement("div", { className: 'nav-group nav-group-outline mx-auto', "data-kt-buttons": 'true' },
+                            react_1.default.createElement("a", { href: '#', className: 'btn btn-color-gray-500 btn-active btn-active-secondary px-6 py-3 me-2 ' +
+                                    (currentState === 'month' && 'active'), onClick: function () {
+                                    setCurrentState('month');
+                                }, "data-kt-plan": 'month' }, "Monthly"),
+                            react_1.default.createElement("a", { href: '#', className: 'btn btn-color-gray-500 btn-active btn-active-secondary px-6 py-3 me-2 ' +
+                                    (currentState === 'annual' && 'active'), onClick: function () {
+                                    setCurrentState('annual');
+                                }, "data-kt-plan": 'annual' }, "Annual")),
+                        react_1.default.createElement("div", { className: 'row mt-10' },
+                            react_1.default.createElement("div", { className: 'col-lg-6 mb-10 mb-lg-0' },
+                                react_1.default.createElement("div", { className: 'nav flex-column' }, plans.map(function (plan, index) {
+                                    return (react_1.default.createElement("div", { onClick: function () {
+                                            setSelected(plan.title);
+                                        }, className: "nav-link btn btn-outline btn-outline-dashed btn-color-dark d-flex flex-stack text-start p-6 " +
+                                            (index !== plans.length - 1 && 'mb-6 ') +
+                                            (plan.default && 'active ') +
+                                            (!plan.custom && 'btn-active btn-active-primary '), "data-bs-toggle": 'tab', "data-bs-target": "#kt_upgrade_plan_".concat(index), key: index },
+                                        react_1.default.createElement("div", { className: 'd-flex align-items-center me-2' },
+                                            react_1.default.createElement("div", { className: 'form-check form-check-custom form-check-solid form-check-success me-6' },
+                                                react_1.default.createElement("input", { className: 'form-check-input', type: 'radio', name: 'plan', value: plan.title, checked: selected === plan.title, onChange: function (e) { return setSelected(e.target.value); } })),
+                                            react_1.default.createElement("div", { className: 'flex-grow-1' },
+                                                react_1.default.createElement("h2", { className: 'd-flex align-items-center fs-2 fw-bolder flex-wrap' },
+                                                    plan.title,
+                                                    plan.label && (react_1.default.createElement("span", { className: 'badge badge-light-success ms-2 fs-7' }, plan.label))),
+                                                react_1.default.createElement("div", { className: 'fw-bold opacity-50' }, plan.subTitle))),
+                                        react_1.default.createElement("div", { className: 'ms-5' },
+                                            plan.custom && (react_1.default.createElement("button", { className: 'btn btn-sm btn-primary' }, "Contact Us")),
+                                            !plan.custom && (react_1.default.createElement(react_1.default.Fragment, null,
+                                                react_1.default.createElement("span", { className: 'mb-2' }, "$"),
+                                                react_1.default.createElement("span", { className: 'fs-3x fw-bolder' }, currentState === 'month' ? plan.priceMonth : plan.priceAnnual),
+                                                react_1.default.createElement("span", { className: 'fs-7 opacity-50' },
+                                                    "/",
+                                                    react_1.default.createElement("span", { "data-kt-element": 'period' }, "Mon")))))));
+                                }))),
+                            react_1.default.createElement("div", { className: 'col-lg-6' },
+                                react_1.default.createElement("div", { className: 'tab-content rounded h-100 bg-light p-10' }, plans.map(function (plan, index) {
+                                    return (react_1.default.createElement("div", { key: "custom".concat(index) }, plan.title === selected && !plan.custom && (react_1.default.createElement(react_1.default.Fragment, null,
+                                        react_1.default.createElement("div", { className: "tab-pane fade" + (plan.default && 'show active'), id: "kt_upgrade_plan_".concat(index), key: index },
+                                            react_1.default.createElement("div", { className: 'pb-5' },
+                                                react_1.default.createElement("h2", { className: 'fw-bolder text-gray-900' }, "What\u2019s in Startup Plan?"),
+                                                react_1.default.createElement("div", { className: 'text-gray-500 fw-bold' }, plan.description)),
+                                            react_1.default.createElement("div", { className: 'pt-1' }, plan.features.map(function (feature, i) {
+                                                return (react_1.default.createElement("div", { className: "d-flex align-items-center" +
+                                                        (i !== plan.features.length - 1 && ' mb-7'), key: "".concat(i, "-").concat(feature.title) },
+                                                    feature.supported && (react_1.default.createElement(react_1.default.Fragment, null,
+                                                        react_1.default.createElement("span", { className: 'fw-bold fs-5 text-gray-700 flex-grow-1' }, feature.title),
+                                                        react_1.default.createElement(helpers_1.KTIcon, { iconName: 'check-circle', className: 'fs-1 text-success' }))),
+                                                    !feature.supported && (react_1.default.createElement(react_1.default.Fragment, null,
+                                                        react_1.default.createElement("span", { className: 'fw-bold fs-5 text-gray-500 flex-grow-1' }, feature.title),
+                                                        react_1.default.createElement(helpers_1.KTIcon, { iconName: 'cross-circle', className: 'fs-1' })))));
+                                            })))))));
+                                }))))),
+                    react_1.default.createElement("div", { className: 'd-flex flex-center flex-row-fluid pt-12' },
+                        react_1.default.createElement("button", { type: 'reset', className: 'btn btn-light me-3', "data-bs-dismiss": 'modal' }, "Cancel"),
+                        react_1.default.createElement("button", { type: 'submit', className: 'btn btn-primary' }, "Upgrade Plan")))))));
+};
+exports.UpgradePlan = UpgradePlan;

package/dist/partials/widgets/_new/cards/CardsWidget17.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+type Props = {
+    className: string;
+    chartSize?: number;
+    chartLine?: number;
+    chartRotate?: number;
+};
+declare const CardsWidget17: FC<Props>;
+export { CardsWidget17 };

package/dist/partials/widgets/_new/cards/CardsWidget17.js

@@ -0,0 +1,122 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CardsWidget17 = void 0;
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+var react_1 = __importStar(require("react"));
+var helpers_1 = require("../../../../helpers");
+var _utils_1 = require("../../../../assets/ts/_utils");
+var ThemeModeProvider_1 = require("../../../layout/theme-mode/ThemeModeProvider");
+var CardsWidget17 = function (_a) {
+    var className = _a.className, _b = _a.chartSize, chartSize = _b === void 0 ? 70 : _b, _c = _a.chartLine, chartLine = _c === void 0 ? 11 : _c, _d = _a.chartRotate, chartRotate = _d === void 0 ? 145 : _d;
+    var chartRef = (0, react_1.useRef)(null);
+    var mode = (0, ThemeModeProvider_1.useThemeMode)().mode;
+    (0, react_1.useEffect)(function () {
+        refreshChart();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [mode]);
+    var refreshChart = function () {
+        if (!chartRef.current) {
+            return;
+        }
+        setTimeout(function () {
+            initChart(chartSize, chartLine, chartRotate);
+        }, 10);
+    };
+    return (react_1.default.createElement("div", { className: "card card-flush ".concat(className) },
+        react_1.default.createElement("div", { className: 'card-header pt-5' },
+            react_1.default.createElement("div", { className: 'card-title d-flex flex-column' },
+                react_1.default.createElement("div", { className: 'd-flex align-items-center' },
+                    react_1.default.createElement("span", { className: 'fs-4 fw-semibold text-gray-500 me-1 align-self-start' }, "$"),
+                    react_1.default.createElement("span", { className: 'fs-2hx fw-bold text-gray-900 me-2 lh-1 ls-n2' }, "69,700"),
+                    react_1.default.createElement("span", { className: 'badge badge-light-success fs-base' },
+                        react_1.default.createElement(helpers_1.KTIcon, { iconName: 'arrow-up', className: 'fs-5 text-success ms-n1' }),
+                        " 2.2%")),
+                react_1.default.createElement("span", { className: 'text-gray-500 pt-1 fw-semibold fs-6' }, "Projects Earnings in April"))),
+        react_1.default.createElement("div", { className: 'card-body pt-2 pb-4 d-flex flex-wrap align-items-center' },
+            react_1.default.createElement("div", { className: 'd-flex flex-center me-5 pt-2' },
+                react_1.default.createElement("div", { id: 'kt_card_widget_17_chart', ref: chartRef, style: { minWidth: chartSize + 'px', minHeight: chartSize + 'px' }, "data-kt-size": chartSize, "data-kt-line": chartLine })),
+            react_1.default.createElement("div", { className: 'd-flex flex-column content-justify-center flex-row-fluid' },
+                react_1.default.createElement("div", { className: 'd-flex fw-semibold align-items-center' },
+                    react_1.default.createElement("div", { className: 'bullet w-8px h-3px rounded-2 bg-success me-3' }),
+                    react_1.default.createElement("div", { className: 'text-gray-500 flex-grow-1 me-4' }, "Leaf CRM"),
+                    react_1.default.createElement("div", { className: 'fw-bolder text-gray-700 text-xxl-end' }, "$7,660")),
+                react_1.default.createElement("div", { className: 'd-flex fw-semibold align-items-center my-3' },
+                    react_1.default.createElement("div", { className: 'bullet w-8px h-3px rounded-2 bg-primary me-3' }),
+                    react_1.default.createElement("div", { className: 'text-gray-500 flex-grow-1 me-4' }, "Mivy App"),
+                    react_1.default.createElement("div", { className: 'fw-bolder text-gray-700 text-xxl-end' }, "$2,820")),
+                react_1.default.createElement("div", { className: 'd-flex fw-semibold align-items-center' },
+                    react_1.default.createElement("div", { className: 'bullet w-8px h-3px rounded-2 me-3', style: { backgroundColor: '#E4E6EF' } }),
+                    react_1.default.createElement("div", { className: 'text-gray-500 flex-grow-1 me-4' }, "Others"),
+                    react_1.default.createElement("div", { className: ' fw-bolder text-gray-700 text-xxl-end' }, "$45,257"))))));
+};
+exports.CardsWidget17 = CardsWidget17;
+var initChart = function (chartSize, chartLine, chartRotate) {
+    if (chartSize === void 0) { chartSize = 70; }
+    if (chartLine === void 0) { chartLine = 11; }
+    if (chartRotate === void 0) { chartRotate = 145; }
+    var el = document.getElementById('kt_card_widget_17_chart');
+    if (!el) {
+        return;
+    }
+    el.innerHTML = '';
+    var options = {
+        size: chartSize,
+        lineWidth: chartLine,
+        rotate: chartRotate,
+        //percent:  el.getAttribute('data-kt-percent') ,
+    };
+    var canvas = document.createElement('canvas');
+    var span = document.createElement('span');
+    //@ts-ignore
+    if (typeof G_vmlCanvasManager !== 'undefined') {
+        //@ts-ignore
+        G_vmlCanvasManager.initElement(canvas);
+    }
+    var ctx = canvas.getContext('2d');
+    canvas.width = canvas.height = options.size;
+    el.appendChild(span);
+    el.appendChild(canvas);
+    ctx === null || ctx === void 0 ? void 0 : ctx.translate(options.size / 2, options.size / 2); // change center
+    ctx === null || ctx === void 0 ? void 0 : ctx.rotate((-1 / 2 + options.rotate / 180) * Math.PI); // rotate -90 deg
+    //imd = ctx.getImageData(0, 0, 240, 240);
+    var radius = (options.size - options.lineWidth) / 2;
+    var drawCircle = function (color, lineWidth, percent) {
+        percent = Math.min(Math.max(0, percent || 1), 1);
+        if (!ctx) {
+            return;
+        }
+        ctx.beginPath();
+        ctx.arc(0, 0, radius, 0, Math.PI * 2 * percent, false);
+        ctx.strokeStyle = color;
+        ctx.lineCap = 'round'; // butt, round or square
+        ctx.lineWidth = lineWidth;
+        ctx.stroke();
+    };
+    // Init 2
+    drawCircle('#E4E6EF', options.lineWidth, 100 / 100);
+    drawCircle((0, _utils_1.getCSSVariableValue)('--bs-primary'), options.lineWidth, 100 / 150);
+    drawCircle((0, _utils_1.getCSSVariableValue)('--bs-success'), options.lineWidth, 100 / 250);
+};

package/dist/partials/widgets/_new/cards/CardsWidget20.d.ts

@@ -0,0 +1,9 @@
+type Props = {
+    className: string;
+    description: string;
+    color: string;
+    img: string;
+};
+import React from 'react';
+declare const CardsWidget20: ({ className, description, color, img }: Props) => React.JSX.Element;
+export { CardsWidget20 };

package/dist/partials/widgets/_new/cards/CardsWidget20.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CardsWidget20 = void 0;
+var react_1 = __importDefault(require("react"));
+var CardsWidget20 = function (_a) {
+    var className = _a.className, description = _a.description, color = _a.color, img = _a.img;
+    return (react_1.default.createElement("div", { className: "card card-flush bgi-no-repeat bgi-size-contain bgi-position-x-end ".concat(className), style: {
+            backgroundColor: color,
+            backgroundImage: "url('".concat(img, "')"),
+        } },
+        react_1.default.createElement("div", { className: 'card-header pt-5' },
+            react_1.default.createElement("div", { className: 'card-title d-flex flex-column' },
+                react_1.default.createElement("span", { className: 'fs-2hx fw-bold text-white me-2 lh-1 ls-n2' }, "69"),
+                react_1.default.createElement("span", { className: 'text-white opacity-75 pt-1 fw-semibold fs-6' }, description))),
+        react_1.default.createElement("div", { className: 'card-body d-flex align-items-end pt-0' },
+            react_1.default.createElement("div", { className: 'd-flex align-items-center flex-column mt-3 w-100' },
+                react_1.default.createElement("div", { className: 'd-flex justify-content-between fw-bold fs-6 text-white opacity-75 w-100 mt-auto mb-2' },
+                    react_1.default.createElement("span", null, "43 Pending"),
+                    react_1.default.createElement("span", null, "72%")),
+                react_1.default.createElement("div", { className: 'h-8px mx-3 w-100 bg-white bg-opacity-50 rounded' },
+                    react_1.default.createElement("div", { className: 'bg-white rounded h-8px', role: 'progressbar', style: { width: '72%' }, "aria-valuenow": 50, "aria-valuemin": 0, "aria-valuemax": 100 }))))));
+};
+exports.CardsWidget20 = CardsWidget20;