upgade package

src/_digifi/partials/widgets/_new/cards/CardsWidget17.tsx

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

src/_digifi/partials/widgets/_new/cards/CardsWidget20.tsx

@@ -0,0 +1,44 @@
+type Props = {
+  className: string
+  description: string
+  color: string
+  img: string
+}
+
+const CardsWidget20 = ({className, description, color, img}: Props) => (
+  <div
+    className={`card card-flush bgi-no-repeat bgi-size-contain bgi-position-x-end ${className}`}
+    style={{
+      backgroundColor: color,
+      backgroundImage: `url('${img}')`,
+    }}
+  >
+    <div className='card-header pt-5'>
+      <div className='card-title d-flex flex-column'>
+        <span className='fs-2hx fw-bold text-white me-2 lh-1 ls-n2'>69</span>
+
+        <span className='text-white opacity-75 pt-1 fw-semibold fs-6'>{description}</span>
+      </div>
+    </div>
+    <div className='card-body d-flex align-items-end pt-0'>
+      <div className='d-flex align-items-center flex-column mt-3 w-100'>
+        <div className='d-flex justify-content-between fw-bold fs-6 text-white opacity-75 w-100 mt-auto mb-2'>
+          <span>43 Pending</span>
+          <span>72%</span>
+        </div>
+
+        <div className='h-8px mx-3 w-100 bg-white bg-opacity-50 rounded'>
+          <div
+            className='bg-white rounded h-8px'
+            role='progressbar'
+            style={{width: '72%'}}
+            aria-valuenow={50}
+            aria-valuemin={0}
+            aria-valuemax={100}
+          ></div>
+        </div>
+      </div>
+    </div>
+  </div>
+)
+export {CardsWidget20}

src/_digifi/partials/widgets/_new/cards/CardsWidget7.tsx

@@ -0,0 +1,74 @@
+
+import clsx from 'clsx'
+import {toAbsoluteUrl} from '../../../../helpers'
+
+type Props = {
+  className: string
+  description: string
+  icon: boolean
+  stats: number
+  labelColor: string
+  textColor: string
+}
+
+const items: Array<{
+  name: string
+  initials?: string
+  src?: string
+  state?: string
+}> = [
+  {name: 'Alan Warden', initials: 'A', state: 'warning'},
+  {name: 'Michael Eberon', src: toAbsoluteUrl('media/avatars/300-11.jpg')},
+  {name: 'Susan Redwood', initials: 'S', state: 'primary'},
+  {name: 'Melody Macy', src: toAbsoluteUrl('media/avatars/300-2.jpg')},
+  {name: 'Perry Matthew', initials: 'P', state: 'danger'},
+  {name: 'Barry Walter', src: toAbsoluteUrl('media/avatars/300-12.jpg')},
+]
+
+const CardsWidget7 = ({className, description, stats, labelColor, textColor}: Props) => (
+  <div className={`card card-flush ${className}`}>
+    <div className='card-header pt-5'>
+      <div className='card-title d-flex flex-column'>
+        <div className='card-title d-flex flex-column'>
+          <span className='fs-2hx fw-bold text-gray-900 me-2 lh-1 ls-n2'>{stats}</span>
+          <span className='text-gray-500 pt-1 fw-semibold fs-6'>{description}</span>
+        </div>
+      </div>
+    </div>
+    <div className='card-body d-flex flex-column justify-content-end pe-0'>
+      <span className='fs-6 fw-bolder text-gray-800 d-block mb-2'>Today’s Heroes</span>
+      <div className='symbol-group symbol-hover flex-nowrap'>
+        {items.map((item, index) => (
+          <div
+            className='symbol symbol-35px symbol-circle'
+            data-bs-toggle='tooltip'
+            title={item.name}
+            key={`cw7-item-${index}`}
+          >
+            {item.src && <img alt='Pic' src={item.src} />}
+            {item.state && item.initials && (
+              <span
+                className={clsx(
+                  'symbol-label fw-bold',
+                  'bg-' + item.state,
+                  'text-inverse-' + item.state
+                )}
+              >
+                {item.initials}
+              </span>
+            )}
+          </div>
+        ))}
+
+        <a href='#' className='symbol symbol-35px symbol-circle'>
+          <span
+            className={clsx('symbol-label fs-8 fw-bold', 'bg-' + labelColor, 'text-' + textColor)}
+          >
+            +42
+          </span>
+        </a>
+      </div>
+    </div>
+  </div>
+)
+export {CardsWidget7}

src/_digifi/partials/widgets/_new/engage/EngageWidget10.tsx

@@ -0,0 +1,55 @@
+
+import {Link} from 'react-router-dom'
+import {toAbsoluteUrl} from '../../../../helpers'
+
+type Props = {
+  className: string
+}
+
+const EngageWidget10 = ({className}: Props) => (
+  <div className={`card card-flush ${className}`}>
+    <div
+      className='card-body d-flex flex-column justify-content-between mt-9 bgi-no-repeat bgi-size-cover bgi-position-x-center pb-0'
+      style={{
+        backgroundPosition: '100% 50%',
+        backgroundImage: `url('${toAbsoluteUrl('media/stock/900x600/42.png')}')`,
+      }}
+    >
+      <div className='mb-10'>
+        <div className='fs-2hx fw-bold text-gray-800 text-center mb-13'>
+          <span className='me-2'>
+            Try our all new Enviroment with
+            <br />
+            <span className='position-relative d-inline-block text-danger'>
+              <Link
+                to='/crafted/pages/profile/overview'
+                className='text-danger
+              opacity-75-hover'
+              >
+                Pro Plan
+              </Link>
+
+              <span className='position-absolute opacity-15 bottom-0 start-0 border-4 border-danger border-bottom w-100'></span>
+            </span>
+          </span>
+          for Free
+        </div>
+
+        <div className='text-center'>
+          <a href='#'>Upgrade Now</a>
+        </div>
+      </div>
+      <img
+        className='mx-auto h-150px h-lg-200px  theme-light-show'
+        src={toAbsoluteUrl('media/illustrations/misc/upgrade.svg')}
+        alt=''
+      />
+      <img
+        className='mx-auto h-150px h-lg-200px  theme-dark-show'
+        src={toAbsoluteUrl('media/illustrations/misc/upgrade-dark.svg')}
+        alt=''
+      />
+    </div>
+  </div>
+)
+export {EngageWidget10}

src/_digifi/partials/widgets/_new/lists/ListsWidget26.tsx

@@ -0,0 +1,41 @@
+
+import {Fragment} from 'react'
+import {KTIcon} from '../../../../helpers'
+
+type Props = {
+  className: string
+}
+
+const rows: Array<{description: string}> = [
+  {description: 'Avg. Client Rating'},
+  {description: 'Instagram Followers'},
+  {description: 'Google Ads CPC'},
+]
+
+const ListsWidget26 = ({className}: Props) => (
+  <div className={`card card-flush ${className}`}>
+    <div className='card-header pt-5'>
+      <h3 className='card-title text-gray-800 fw-bold'>External Links</h3>
+      <div className='card-toolbar'></div>
+    </div>
+    <div className='card-body pt-5'>
+      {rows.map((row, index) => (
+        <Fragment key={`lw26-rows-${index}`}>
+          <div className='d-flex flex-stack'>
+            <a href='#' className='text-primary fw-semibold fs-6 me-2'>
+              {row.description}
+            </a>
+            <button
+              type='button'
+              className='btn btn-icon btn-sm h-auto btn-color-gray-500 btn-active-color-primary justify-content-end'
+            >
+              <KTIcon iconName='exit-right-corner' className='fs-2' />
+            </button>
+          </div>
+          {rows.length - 1 > index && <div className='separator separator-dashed my-3' />}
+        </Fragment>
+      ))}
+    </div>
+  </div>
+)
+export {ListsWidget26}