Project Details

Discover Project Details UI blocks featuring timelines, team info, status updates, and summaries—ideal for dashboards and collaboration pages.

CRM Demo: Default Option Preview

<!DOCTYPE html>
            <html lang="en" dir="" class="relative alv5c ux1hp">
              <head>
                <meta charset="utf-8">
                <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                <title>Preline UI</title>
                <link rel="shortcut icon" href="../../favicon.ico">
                <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
                <link rel="stylesheet" href="../../assets/css/obfuscated.min.css">
                
                <link rel="stylesheet" href="../../assets/vendor/apexcharts/dist/apexcharts.css">
                <style type="text/css">
                  .apexcharts-tooltip.apexcharts-theme-light {
                    background-color: transparent !important;
                    border: none !important;
                    box-shadow: none !important;
                  }
                </style>
              </head>
              <body>
                <div class="p7mth xp67g fsrul mx-auto">
            <div class="jhb8q flex flex-col olnrt zxv30 k9mkq yxawv mzy38 ntfdl dark:bg-neutral-900 dark:border-neutral-700">
              
              <div class="flex o63ej">
                
                <div class="dgznh qrcuv">
                  <div class="dmv3j flex items-center lwq0m">
                    <svg class="n2l26 s1u6m" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_11766_122079)"><path d="M16 32C7.16 32 0 24.84 0 16C0 7.16 7.16 0 16 0C24.84 0 32 7.16 32 16C32 24.84 24.84 32 16 32Z" fill="#FFE01B"/><path d="M11.72 19.28C11.74 19.3 11.74 19.34 11.72 19.38C11.64 19.52 11.48 19.6 11.32 19.58C11.02 19.54 10.8 19.3 10.82 19C10.82 18.8 10.86 18.62 10.92 18.42C11.02 18.18 10.92 17.92 10.72 17.78C10.6 17.7 10.44 17.68 10.3 17.7C10.16 17.72 10.04 17.82 9.96001 17.94C9.90001 18.04 9.86001 18.14 9.84001 18.24C9.84001 18.26 9.82001 18.28 9.82001 18.28C9.78001 18.4 9.70001 18.44 9.64001 18.44C9.62001 18.44 9.58001 18.42 9.56001 18.36C9.50001 18.02 9.62001 17.68 9.84001 17.42C10.04 17.2 10.32 17.1 10.62 17.14C10.92 17.18 11.2 17.38 11.32 17.66C11.46 18 11.42 18.38 11.24 18.7C11.22 18.72 11.22 18.76 11.2 18.78C11.14 18.9 11.12 19.06 11.2 19.18C11.26 19.26 11.34 19.3 11.44 19.3C11.48 19.3 11.52 19.3 11.56 19.28C11.64 19.24 11.7 19.24 11.72 19.28ZM24.94 19.6C24.92 20.22 24.78 20.82 24.56 21.4C23.44 24.1 20.76 25.6 17.56 25.5C14.58 25.42 12.04 23.84 10.94 21.26C10.24 21.24 9.56001 20.96 9.06001 20.5C8.52001 20.04 8.18001 19.4 8.10001 18.7C8.04001 18.22 8.10001 17.74 8.28001 17.28L7.66001 16.76C4.78001 14.36 13.72 4.4 16.56 6.9C16.58 6.92 17.54 7.86 17.54 7.86C17.54 7.86 18.06 7.64 18.08 7.64C20.58 6.6 22.62 7.1 22.62 8.76C22.62 9.62 22.08 10.62 21.2 11.54C21.56 11.9 21.8 12.34 21.92 12.82C22.02 13.16 22.06 13.5 22.08 13.86C22.1 14.22 22.12 15.04 22.12 15.04C22.14 15.04 22.4 15.12 22.48 15.14C23 15.26 23.46 15.48 23.86 15.82C24.08 16.02 24.2 16.3 24.26 16.58C24.32 16.96 24.22 17.34 24 17.64C24.06 17.78 24.1 17.9 24.16 18.04C24.24 18.28 24.28 18.48 24.3 18.5C24.52 18.54 24.94 18.86 24.94 19.6ZM12.34 18.12C12.14 16.86 11.3 16.42 10.72 16.38C10.58 16.38 10.44 16.38 10.28 16.42C9.26001 16.62 8.66001 17.5 8.78001 18.64C8.96001 19.7 9.82001 20.5 10.88 20.56C10.98 20.56 11.08 20.56 11.18 20.54C12.24 20.38 12.5 19.24 12.34 18.12ZM14.1 10.12C14.98 9.4 15.9 8.76 16.88 8.2C16.88 8.2 16.1 7.3 15.86 7.22C14.42 6.82 11.3 8.98 9.30001 11.84C8.50001 13 7.34001 15.04 7.90001 16.08C8.10001 16.32 8.32001 16.52 8.56001 16.72C8.92001 16.2 9.48001 15.84 10.12 15.72C10.9 13.54 12.28 11.6 14.1 10.12ZM17.22 20.1C17.3 20.44 17.56 20.72 17.9 20.8C18.08 20.86 18.24 20.92 18.44 20.94C20.72 21.34 22.86 20.02 23.34 19.7C23.38 19.68 23.4 19.7 23.38 19.74C23.36 19.76 23.34 19.78 23.34 19.8C22.76 20.56 21.18 21.44 19.12 21.44C18.22 21.44 17.32 21.12 17 20.64C16.48 19.88 16.98 18.78 17.82 18.9C17.82 18.9 18.12 18.94 18.2 18.94C19.52 19.06 20.86 18.86 22.08 18.32C23.24 17.78 23.68 17.18 23.62 16.7C23.6 16.56 23.52 16.42 23.42 16.3C23.1 16.04 22.72 15.86 22.32 15.78C22.14 15.72 22.02 15.7 21.88 15.66C21.64 15.58 21.52 15.52 21.5 15.06C21.48 14.86 21.46 14.18 21.44 13.88C21.42 13.38 21.36 12.7 20.94 12.42C20.84 12.34 20.7 12.3 20.58 12.3C20.5 12.3 20.44 12.3 20.36 12.32C20.14 12.36 19.96 12.48 19.8 12.64C19.4 13 18.88 13.18 18.34 13.14C18.04 13.12 17.74 13.08 17.38 13.06C17.32 13.06 17.24 13.06 17.18 13.04C16.22 13.06 15.44 13.78 15.32 14.74C15.12 16.16 16.14 16.88 16.44 17.32C16.48 17.38 16.52 17.44 16.52 17.52C16.52 17.6 16.48 17.68 16.42 17.72C15.6 18.64 15.3 19.92 15.62 21.12C15.66 21.26 15.7 21.4 15.76 21.54C16.5 23.28 18.82 24.1 21.08 23.36C21.38 23.26 21.66 23.14 21.94 23C22.44 22.76 22.88 22.42 23.26 22.02C23.84 21.44 24.22 20.68 24.36 19.86C24.42 19.4 24.32 19.24 24.2 19.16C24.1 19.1 24 19.08 23.88 19.1C23.82 18.74 23.72 18.4 23.58 18.08C22.94 18.56 22.2 18.94 21.42 19.16C20.48 19.42 19.52 19.52 18.54 19.48C17.92 19.42 17.5 19.24 17.34 19.76C18.28 20.08 19.28 20.18 20.28 20.06C20.3 20.06 20.34 20.08 20.34 20.1C20.34 20.12 20.32 20.14 20.3 20.16C20.22 20.14 19.06 20.68 17.22 20.1ZM13.84 11.88C14.6 11.34 15.48 10.96 16.38 10.76C17.42 10.52 18.48 10.52 19.52 10.76C19.56 10.76 19.58 10.7 19.54 10.68C19 10.4 18.42 10.24 17.8 10.22C17.78 10.22 17.76 10.2 17.76 10.18V10.16C17.86 10.04 17.96 9.92 18.08 9.84C18.1 9.82 18.1 9.8 18.08 9.8L18.06 9.78C17.32 9.86 16.62 10.1 15.98 10.52C15.96 10.52 15.94 10.52 15.94 10.52V10.5C15.98 10.32 16.06 10.14 16.16 9.96C16.16 9.94 16.16 9.92 16.14 9.92H16.12C15.22 10.42 14.42 11.08 13.76 11.86C13.74 11.88 13.74 11.9 13.76 11.9C13.8 11.9 13.82 11.9 13.84 11.88ZM19.84 16.7C19.96 16.78 20.14 16.76 20.24 16.64C20.3 16.52 20.22 16.38 20.06 16.3C19.94 16.22 19.76 16.24 19.66 16.36C19.6 16.46 19.68 16.62 19.84 16.7ZM20.34 14.88C20.38 15.08 20.46 15.28 20.58 15.44C20.7 15.42 20.84 15.42 20.96 15.44C21.04 15.22 21.04 14.98 20.98 14.76C20.88 14.34 20.76 14.1 20.52 14.14C20.26 14.18 20.24 14.48 20.34 14.88ZM20.88 15.84C20.72 15.8 20.54 15.88 20.48 16.06C20.44 16.22 20.52 16.4 20.7 16.46C20.88 16.52 21.04 16.42 21.1 16.24C21.1 16.22 21.12 16.18 21.12 16.16C21.12 16 21.02 15.86 20.88 15.84Z" fill="black"/><path d="M16.66 15.8C16.62 15.8 16.6 15.78 16.6 15.76C16.58 15.68 16.7 15.58 16.8 15.48C17.14 15.22 17.6 15.18 17.98 15.34C18.16 15.42 18.32 15.54 18.42 15.7C18.46 15.76 18.46 15.82 18.44 15.84C18.4 15.88 18.3 15.84 18.12 15.76C17.92 15.66 17.68 15.6 17.46 15.62C17.2 15.66 16.92 15.72 16.66 15.8ZM18.38 16.16C18.22 16 18 15.92 17.8 15.96C17.64 15.98 17.5 16.04 17.38 16.14C17.32 16.18 17.28 16.24 17.28 16.32C17.28 16.34 17.28 16.36 17.3 16.36C17.32 16.36 17.32 16.38 17.34 16.38C17.4 16.38 17.46 16.36 17.5 16.34C17.74 16.26 17.98 16.22 18.22 16.26C18.34 16.28 18.38 16.28 18.42 16.24C18.4 16.2 18.4 16.18 18.38 16.16Z" fill="black"/></g><defs><clipPath id="clip0_11766_122079"><rect width="32" height="32" fill="white"/></clipPath></defs></svg>
                    <div class="dgznh">
                      <span class="block tuuss z0e83 dark:text-neutral-500">
                        BlueVista Innovations
                      </span>
                    </div>
                  </div>

<span class="block hw6xt ejo46 dark:text-neutral-200">
                    Redesign of E-commerce Dashboard Mobile App for iOS and Android Devices
                  </span>
                </div>
                
    
                
                <div>
                  <div class="flex flex-wrap lokyk v6f2r">
                    
                    <div class="hs-dropdown [--placement:bottom-right] relative inline-flex">
                      
                      <button id="hs-pro-pdmd1" type="button" class="boqmp inline-flex enhxb items-center u3ov7 tuuss wavyl k9mkq yxawv zxv30 ejo46 ntfdl wsl5v disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden u7q2f dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                        <span class="r8a99">Customers</span>
                        <svg class="n2l26 bnmi1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
                      </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 ahgde te8l0 transition-[opacity,margin] duration opacity-0 hidden zxv30 mzy38 w9ar3 dark:bg-neutral-950" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-pdmd1">
                        <div class="smvag space-y-0.5">
                          <a class="relative group hxfjh l1xlu flex items-center j2p6t d5esf ejo46 lk55v wavyl focus:outline-hidden rjc3l dark:text-neutral-200 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" href="#">
                            <svg class="n2l26 bnmi1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/></svg>
                            Edit
                          </a>
                          <a class="relative group hxfjh l1xlu flex items-center j2p6t d5esf ejo46 lk55v wavyl focus:outline-hidden rjc3l dark:text-neutral-200 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" href="#">
                            <svg class="n2l26 bnmi1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
                            Duplicate
                          </a>
                          <a class="relative group hxfjh l1xlu flex items-center j2p6t d5esf ejo46 lk55v wavyl focus:outline-hidden rjc3l dark:text-neutral-200 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" href="#">
                            <svg class="n2l26 bnmi1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="5" x="2" y="3" rx="1"/><path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"/><path d="M10 12h4"/></svg>
                            Archive
                          </a>
                          <a class="relative group hxfjh l1xlu flex items-center j2p6t d5esf ejo46 lk55v wavyl focus:outline-hidden rjc3l dark:text-neutral-200 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" href="#">
                            <svg class="n2l26 bnmi1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
                            Delete
                          </a>
                        </div>
                      </div>
                      
                    </div>
                    
                  </div>
                </div>
                
              </div>

<div class="khfgm boxle j4iam zy3uc sdn14">
                
                <div>
                  <span class="block urcp3 d5esf z0e83 dark:text-neutral-500">
                    Overall progress: <span class="hw6xt zwetb">Good</span>
                  </span>
      
                  <div class="flex items-center lwq0m">
                    
                    <svg class="n2l26 ubcvn" width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
                      <g transform="translate(32,32)">
                        <g>
                          <rect x="-3" y="-28" width="6" height="12" rx="3" fill="currentColor" transform="rotate(0)" class="zwetb"/>
                          <rect x="-3" y="-28" width="6" height="12" rx="3" fill="currentColor" transform="rotate(30)" class="zwetb"/>
                          <rect x="-3" y="-28" width="6" height="12" rx="3" fill="currentColor" transform="rotate(60)" class="zwetb"/>
                          <rect x="-3" y="-28" width="6" height="12" rx="3" fill="currentColor" transform="rotate(90)" class="zwetb"/>
                          <rect x="-3" y="-28" width="6" height="12" rx="3" fill="currentColor" transform="rotate(120)" class="wiop5 dark:text-neutral-700"/>
                          <rect x="-3" y="-28" width="6" height="12" rx="3" fill="currentColor" transform="rotate(150)" class="wiop5 dark:text-neutral-700"/>
                          <rect x="-3" y="-28" width="6" height="12" rx="3" fill="currentColor" transform="rotate(180)" class="wiop5 dark:text-neutral-700"/>
                          <rect x="-3" y="-28" width="6" height="12" rx="3" fill="currentColor" transform="rotate(210)" class="wiop5 dark:text-neutral-700"/>
                          <rect x="-3" y="-28" width="6" height="12" rx="3" fill="currentColor" transform="rotate(240)" class="wiop5 dark:text-neutral-700"/>
                          <rect x="-3" y="-28" width="6" height="12" rx="3" fill="currentColor" transform="rotate(270)" class="wiop5 dark:text-neutral-700"/>
                          <rect x="-3" y="-28" width="6" height="12" rx="3" fill="currentColor" transform="rotate(300)" class="wiop5 dark:text-neutral-700"/>
                          <rect x="-3" y="-28" width="6" height="12" rx="3" fill="currentColor" transform="rotate(330)" class="wiop5 dark:text-neutral-700"/>
                        </g>
                      </g>
                    </svg>

<span class="flex items-center r2jif d5esf zwetb">
                    <svg class="n2l26 bnmi1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>
                    aligning with timeline
                  </span>
                </div>

<div>
                  <span class="block urcp3 d5esf z0e83 dark:text-neutral-500">
                    Tasks: <span class="hw6xt zwetb">On track</span>
                  </span>

<p class="cd9qe">
                      <span class="hysdx zwetb">59%</span> <span class="z0e83 dark:text-neutral-500">of</span> <span class="hysdx ejo46 dark:text-neutral-200">100</span> <span class="z0e83 dark:text-neutral-500">completed</span>
                  </p>

<div class="nqo4p flex items-center v6f2r">
                    <div class="flex items-center n03hs">
                      <span class="n2l26 lk7kv whhnp inline-block dp6lw mr9qs"></span>
                      <span class="n2l26 lk7kv whhnp inline-block dp6lw mr9qs"></span>
                      <span class="n2l26 lk7kv whhnp inline-block dp6lw mr9qs"></span>
                      <span class="n2l26 lk7kv whhnp inline-block r01ey mr9qs dark:bg-neutral-600"></span>
                      <span class="n2l26 lk7kv whhnp inline-block r01ey mr9qs dark:bg-neutral-600"></span>
                    </div>
                  </div>
                  
                </div>

<div>
                  <span class="block urcp3 d5esf z0e83 dark:text-neutral-500">
                    Project cost: <span class="hw6xt zwetb">Within budget</span>
                  </span>

<div>
                  <span class="block urcp3 d5esf z0e83 dark:text-neutral-500">
                    Time spent: <span class="hw6xt u9tmt">Slightly behind</span>
                  </span>

<div class="eg6px flex flex-col cgrem">
                    
                    <div class="flex items-center r2jif">
                      <span class="flex items-center lwq0m on128 zqruk dark:text-neutral-400">
                        <svg class="n2l26 bnmi1 z0e83 dark:text-neutral-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
                        Total hours:
                      </span>
                      <span class="tuuss ejo46 dark:text-neutral-200">
                        56h 1m
                      </span>
                    </div>

<div class="flex items-center r2jif">
                      <span class="flex items-center lwq0m on128 zqruk dark:text-neutral-400">
                        <svg class="n2l26 bnmi1 z0e83 dark:text-neutral-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg>
                        Days:
                      </span>
                      <span class="tuuss ejo46 dark:text-neutral-200">
                        18
                      </span>
                    </div>
                    
                  </div>
                  
                </div>
                
              </div>
              
            </div>
            </div>
                <script src="../../assets/vendor/preline/dist/index.js?v=3.1.0"></script>
                <script src="../../assets/vendor/lodash/lodash.min.js"></script>
                <script src="../../assets/vendor/apexcharts/dist/apexcharts.min.js"></script>
                
                <script>
                  function buildTooltip(props, options) {
                    const {
                      title,
                      mode,
                      valuePrefix = '$',
                      isValueDivided = true,
                      valuePostfix = '',
                      hasTextLabel = false,
                      invertGroup = false,
                      labelDivider = '',
                      wrapperClasses = 'r8vr5 madsw zxv30 k9mkq yxawv ejo46 wavyl qdmo7 dark:bg-neutral-800 dark:border-neutral-700',
                      wrapperExtClasses = '',
                      seriesClasses = 'on128',
                      seriesExtClasses = '',
                      titleClasses = 'hysdx txx5h lb789 mdim3 ejo46 jnjrn dark:bg-neutral-800! dark:border-neutral-700! dark:text-neutral-200',
                      titleExtClasses = '',
                      markerClasses = 'odtso fg08f zmydb',
                      markerExtClasses = 'hgwpu',
                      valueClasses = 'tnvde z0e83 ms-auto! dark:text-neutral-400',
                      valueExtClasses = '',
                      labelClasses = 'z0e83 dark:text-neutral-400',
                      labelExtClasses = ''
                    } = options;
                    const { dataPointIndex } = props;
                    const { colors } = props.ctx.opts;
                    const series = props.ctx.opts.series;
                    let seriesGroups = '';

series.forEach((single, i) => {
                      const val = props.series[i][dataPointIndex] || (typeof series[i].data[dataPointIndex] !== 'object' ? series[i].data[dataPointIndex] : props.series[i][dataPointIndex]);
                      const label = series[i].name;
                      const groupData = invertGroup ? {
                        left: `${hasTextLabel ? label : ''}${labelDivider}`,
                        right: `${valuePrefix}${val >= 1000 && isValueDivided ? `${val / 1000}k` : val}${valuePostfix}`
                      } : {
                        left: `${valuePrefix}${val >= 1000 && isValueDivided ? `${val / 1000}k` : val}${valuePostfix}`,
                        right: `${hasTextLabel ? label : ''}${labelDivider}`
                      }
                      const labelMarkup = `<span class="apexcharts-tooltip-text-y-label ${labelClasses} ${labelExtClasses}">${groupData.left}</span>`;

seriesGroups += `<div class="apexcharts-tooltip-series-group flex! ${hasTextLabel ? 'o8wyu' : ''} order-${i + 1} ${seriesClasses} ${seriesExtClasses}">
                      <span class="flex items-center">
                        <span class="apexcharts-tooltip-marker ${markerClasses} ${markerExtClasses}" style="background: ${colors[i]}"></span>
                        <div class="apexcharts-tooltip-text">
                          <div class="apexcharts-tooltip-y-group d5s98">
                            <span class="apexcharts-tooltip-text-y-value ${valueClasses} ${valueExtClasses}">${groupData.right}</span>
                          </div>
                        </div>
                      </span>
                      ${labelMarkup}
                    </div>`
                    });

const {
                      title,
                      mode,
                      valuePrefix = '$',
                      isValueDivided = true,
                      valuePostfix = '',
                      hasCategory = true,
                      hasTextLabel = false,
                      labelDivider = '',
                      wrapperClasses = 'r8vr5 madsw zxv30 k9mkq yxawv ejo46 wavyl qdmo7 dark:bg-neutral-800 dark:border-neutral-700',
                      wrapperExtClasses = '',
                      seriesClasses = 'o8wyu xp67g on128',
                      seriesExtClasses = '',
                      titleClasses = 'flex saet7 hysdx txx5h lb789 mdim3 ejo46 jnjrn dark:bg-neutral-800! dark:border-neutral-700! dark:text-neutral-200',
                      titleExtClasses = '',
                      markerClasses = 'odtso fg08f zmydb',
                      markerExtClasses = 'hgwpu',
                      valueClasses = 'tnvde z0e83 ms-auto! dark:text-neutral-400',
                      valueExtClasses = '',
                      labelClasses = 'z0e83 dark:text-neutral-400 fxthc',
                      labelExtClasses = ''
                    } = options;

series.forEach((_, i) => {
                      const val = props.series[i][dataPointIndex] || (typeof series[i].data[dataPointIndex] !== 'object' ? series[i].data[dataPointIndex] : props.series[i][dataPointIndex]);
                      const label = series[i].name;
                      const altValue = series[i].altValue || null;
                      const labelMarkup = `<span class="apexcharts-tooltip-text-y-label ${labelClasses} ${labelExtClasses}">${newCategory} ${label || ''}</span>`;
                      const valueMarkup = altValue || `<span class="apexcharts-tooltip-text-y-value ${valueClasses} ${valueExtClasses}">${valuePrefix}${val >= 1000 && isValueDivided ? `${val / 1000}k` : val}${valuePostfix}${labelDivider}</span>`;

seriesGroups += `<div class="apexcharts-tooltip-series-group ${seriesClasses} flex! order-${i + 1} ${seriesExtClasses}">
                      <span class="flex items-center">
                        <span class="apexcharts-tooltip-marker ${markerClasses} ${markerExtClasses}" style="background: ${colors[i]}"></span>
                        <div class="apexcharts-tooltip-text">
                          <div class="apexcharts-tooltip-y-group d5s98">
                            ${valueMarkup}
                          </div>
                        </div>
                      </span>
                      ${hasTextLabel ? labelMarkup : ''}
                    </div>`
                    });

return `<div class="${mode === 'dark' ? 'dark ' : ''}${wrapperClasses} ${wrapperExtClasses}">
                    <div class="apexcharts-tooltip-title ${titleClasses} ${titleExtClasses}">
                      <span>${title}</span>
                      <span class="flex items-center r2jif ${!isDifferenceIsNull ? (isGrowing ? 'zwetb' : 'h101d') : ''} fxthc">
                        ${!isDifferenceIsNull ? icon : ''}
                        <span class="inline-block tuuss">
                          ${difference.toFixed(1)}%
                        </span>
                      </span>
                    </div>
                    ${seriesGroups}
                  </div>`;
                  }

seriesGroups += `<div class="apexcharts-tooltip-series-group flex! ${seriesClasses} order-${i + 1} ${seriesExtClasses}">
                      <span class="flex items-center">
                        <span class="apexcharts-tooltip-marker ${markerClasses} ${markerExtClasses}" style="background: ${colors[i]}"></span>
                        <div class="apexcharts-tooltip-text on128">
                          <div class="apexcharts-tooltip-y-group d5s98">
                            <span class="apexcharts-tooltip-text-y-value ${valueClasses} ${valueExtClasses}">${newCategory} ${label || ''}${labelDivider}</span>
                          </div>
                        </div>
                      </span>
                      ${hasTextLabel ? labelMarkup : ''}
                    </div>`
                    });

function buildTooltipForDonut({ series, seriesIndex, w }, textColor) {
                    const { globals } = w;
                    const { colors } = globals;

return `<div class="apexcharts-tooltip-series-group" style="background-color: ${colors[seriesIndex]}; display: block;">
                    <div class="apexcharts-tooltip-text" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px;">
                      <div class="apexcharts-tooltip-y-group" style="color: ${textColor[seriesIndex]}">
                        <span class="apexcharts-tooltip-text-y-label">${globals.labels[seriesIndex]}: </span>
                        <span class="apexcharts-tooltip-text-y-value">${series[seriesIndex]}</span>
                      </div>
                    </div>
                  </div>`;
                  }

function buildChart(id, shared, light, dark) {
                    const $chart = document.querySelector(id);
                    let chart = null;

if (!$chart) return false;

const tabpanel = $chart.closest('[role="tabpanel"]');
                    let modeFromBodyClass = null;

Array.from(document.querySelector('html').classList).forEach((cl) => {
                      if (['dark', 'light', 'default'].includes(cl)) modeFromBodyClass = cl;
                    });

const optionsFn = (mode = modeFromBodyClass || localStorage.getItem('hs_theme')) => _.merge(shared(mode), mode === 'dark' ? dark : light);

if ($chart) {
                      chart = new ApexCharts($chart, optionsFn());
                      chart.render();

window.addEventListener('on-hs-appearance-change', (evt) => chart.updateOptions(optionsFn(evt.detail)));

if (tabpanel) tabpanel.addEventListener('on-hs-appearance-change', (evt) => chart.updateOptions(optionsFn(evt.detail)));
                    }

return chart;
                  }
                </script>
                <script>
                  window.addEventListener('load', () => {
                    // Apex Bar Sparkline Charts
                    (function () {
                      const barCharts = [
                        {
                          id: '#hs-pro-cplisbch1',
                          data: [2100, 2000, 2400, 4500, 4700, 3000, 3000, -3500, -4500, 3500, 4000],
                          name: 'Project cost',
                          color: 'oklch(62.7% 0.194 149.214)'
                        },
                        {
                          id: '#hs-pro-cplisbch2',
                          data: [1500, 2500, 3000, 4000, -2000, -1000, 1000, 2500, 3000, -500, 0],
                          name: 'Project cost',
                          color: 'oklch(70.5% 0.213 47.604)'
                        },
                        {
                          id: '#hs-pro-cplisbch3',
                          data: [-500, -1000, -1500, 1000, 1500, 2000, 2500, 2000, 1700, 1100, 0],
                          name: 'Project cost',
                          color: 'oklch(57.7% 0.245 27.325)'
                        }
                      ];

const categories = [
                        '25 January 2023',
                        '26 January 2023',
                        '27 January 2023',
                        '28 January 2023',
                        '29 January 2023',
                        '30 January 2023',
                        '31 January 2023',
                        '1 February 2023',
                        '2 February 2023',
                        '3 February 2023',
                        '4 February 2023'
                      ];

barCharts.forEach(({ id, data, name, color }) => {
                        buildChart(id, (mode) => ({
                          series: [{
                            name,
                            data
                          }],
                          chart: {
                            width: 100,
                            height: 50,
                            type: 'bar',
                            sparkline: {
                              enabled: true
                            }
                          },
                          xaxis: {
                            type: 'category',
                            categories,
                            crosshairs: {
                              show: false
                            }
                          },
                          tooltip: {
                            marker: {
                              show: false
                            },
                            fixed: {
                              enabled: true,
                              position: 'bottomLeft',
                              offsetX: 10,
                              offsetY: -15
                            },
                            custom: function (props) {
                              const { categories } = props.ctx.opts.xaxis;
                              const { dataPointIndex } = props;
                              const title = categories[dataPointIndex].split(' ');
                              const newTitle = `${title[0]} ${title[1]}`;

return buildTooltip(props, {
                                title: newTitle,
                                mode,
                                hasTextLabel: true,
                                wrapperExtClasses: 'inu3s',
                                titleExtClasses: 'f8srl',
                                labelDivider: ':',
                                labelExtClasses: 'fxthc'
                              });
                            }
                          }
                        }), {
                          colors: [color],
                          plotOptions: {
                            bar: {
                              colors: {
                                ranges: [{
                                  from: -5000,
                                  to: 0,
                                  color: 'oklch(87.2% 0.01 258.338)'
                                }]
                              }
                            }
                          },
                          xaxis: {
                            labels: {
                              style: {
                                colors: 'oklch(0.707 0.022 261.325)'
                              }
                            }
                          },
                          yaxis: {
                            labels: {
                              style: {
                                colors: 'oklch(0.707 0.022 261.325)'
                              }
                            }
                          },
                          grid: {
                            borderColor: 'oklch(0.928 0.006 264.531)'
                          }
                        }, {
                          colors: [color],
                          plotOptions: {
                            bar: {
                              colors: {
                                ranges: [{
                                  from: -5000,
                                  to: 0,
                                  color: 'oklch(37.1% 0 0)'
                                }]
                              }
                            }
                          },
                          xaxis: {
                            labels: {
                              style: {
                                colors: 'oklch(0.556 0 0)'
                              }
                            }
                          },
                          yaxis: {
                            labels: {
                              style: {
                                colors: 'oklch(0.556 0 0)'
                              }
                            }
                          },
                          grid: {
                            borderColor: 'oklch(37.1% 0 0)'
                          }
                        });
                      });
                    })();
                  });
                </script>

</body>
            </html>

<div class="jhb8q flex flex-col olnrt zxv30 k9mkq yxawv mzy38 ntfdl dark:bg-neutral-900 dark:border-neutral-700">
              
              <div class="flex o63ej">
                
                <div class="dgznh qrcuv">
                  <div class="dmv3j flex items-center lwq0m">
                    <svg class="n2l26 s1u6m" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_11766_122079)"><path d="M16 32C7.16 32 0 24.84 0 16C0 7.16 7.16 0 16 0C24.84 0 32 7.16 32 16C32 24.84 24.84 32 16 32Z" fill="#FFE01B"/><path d="M11.72 19.28C11.74 19.3 11.74 19.34 11.72 19.38C11.64 19.52 11.48 19.6 11.32 19.58C11.02 19.54 10.8 19.3 10.82 19C10.82 18.8 10.86 18.62 10.92 18.42C11.02 18.18 10.92 17.92 10.72 17.78C10.6 17.7 10.44 17.68 10.3 17.7C10.16 17.72 10.04 17.82 9.96001 17.94C9.90001 18.04 9.86001 18.14 9.84001 18.24C9.84001 18.26 9.82001 18.28 9.82001 18.28C9.78001 18.4 9.70001 18.44 9.64001 18.44C9.62001 18.44 9.58001 18.42 9.56001 18.36C9.50001 18.02 9.62001 17.68 9.84001 17.42C10.04 17.2 10.32 17.1 10.62 17.14C10.92 17.18 11.2 17.38 11.32 17.66C11.46 18 11.42 18.38 11.24 18.7C11.22 18.72 11.22 18.76 11.2 18.78C11.14 18.9 11.12 19.06 11.2 19.18C11.26 19.26 11.34 19.3 11.44 19.3C11.48 19.3 11.52 19.3 11.56 19.28C11.64 19.24 11.7 19.24 11.72 19.28ZM24.94 19.6C24.92 20.22 24.78 20.82 24.56 21.4C23.44 24.1 20.76 25.6 17.56 25.5C14.58 25.42 12.04 23.84 10.94 21.26C10.24 21.24 9.56001 20.96 9.06001 20.5C8.52001 20.04 8.18001 19.4 8.10001 18.7C8.04001 18.22 8.10001 17.74 8.28001 17.28L7.66001 16.76C4.78001 14.36 13.72 4.4 16.56 6.9C16.58 6.92 17.54 7.86 17.54 7.86C17.54 7.86 18.06 7.64 18.08 7.64C20.58 6.6 22.62 7.1 22.62 8.76C22.62 9.62 22.08 10.62 21.2 11.54C21.56 11.9 21.8 12.34 21.92 12.82C22.02 13.16 22.06 13.5 22.08 13.86C22.1 14.22 22.12 15.04 22.12 15.04C22.14 15.04 22.4 15.12 22.48 15.14C23 15.26 23.46 15.48 23.86 15.82C24.08 16.02 24.2 16.3 24.26 16.58C24.32 16.96 24.22 17.34 24 17.64C24.06 17.78 24.1 17.9 24.16 18.04C24.24 18.28 24.28 18.48 24.3 18.5C24.52 18.54 24.94 18.86 24.94 19.6ZM12.34 18.12C12.14 16.86 11.3 16.42 10.72 16.38C10.58 16.38 10.44 16.38 10.28 16.42C9.26001 16.62 8.66001 17.5 8.78001 18.64C8.96001 19.7 9.82001 20.5 10.88 20.56C10.98 20.56 11.08 20.56 11.18 20.54C12.24 20.38 12.5 19.24 12.34 18.12ZM14.1 10.12C14.98 9.4 15.9 8.76 16.88 8.2C16.88 8.2 16.1 7.3 15.86 7.22C14.42 6.82 11.3 8.98 9.30001 11.84C8.50001 13 7.34001 15.04 7.90001 16.08C8.10001 16.32 8.32001 16.52 8.56001 16.72C8.92001 16.2 9.48001 15.84 10.12 15.72C10.9 13.54 12.28 11.6 14.1 10.12ZM17.22 20.1C17.3 20.44 17.56 20.72 17.9 20.8C18.08 20.86 18.24 20.92 18.44 20.94C20.72 21.34 22.86 20.02 23.34 19.7C23.38 19.68 23.4 19.7 23.38 19.74C23.36 19.76 23.34 19.78 23.34 19.8C22.76 20.56 21.18 21.44 19.12 21.44C18.22 21.44 17.32 21.12 17 20.64C16.48 19.88 16.98 18.78 17.82 18.9C17.82 18.9 18.12 18.94 18.2 18.94C19.52 19.06 20.86 18.86 22.08 18.32C23.24 17.78 23.68 17.18 23.62 16.7C23.6 16.56 23.52 16.42 23.42 16.3C23.1 16.04 22.72 15.86 22.32 15.78C22.14 15.72 22.02 15.7 21.88 15.66C21.64 15.58 21.52 15.52 21.5 15.06C21.48 14.86 21.46 14.18 21.44 13.88C21.42 13.38 21.36 12.7 20.94 12.42C20.84 12.34 20.7 12.3 20.58 12.3C20.5 12.3 20.44 12.3 20.36 12.32C20.14 12.36 19.96 12.48 19.8 12.64C19.4 13 18.88 13.18 18.34 13.14C18.04 13.12 17.74 13.08 17.38 13.06C17.32 13.06 17.24 13.06 17.18 13.04C16.22 13.06 15.44 13.78 15.32 14.74C15.12 16.16 16.14 16.88 16.44 17.32C16.48 17.38 16.52 17.44 16.52 17.52C16.52 17.6 16.48 17.68 16.42 17.72C15.6 18.64 15.3 19.92 15.62 21.12C15.66 21.26 15.7 21.4 15.76 21.54C16.5 23.28 18.82 24.1 21.08 23.36C21.38 23.26 21.66 23.14 21.94 23C22.44 22.76 22.88 22.42 23.26 22.02C23.84 21.44 24.22 20.68 24.36 19.86C24.42 19.4 24.32 19.24 24.2 19.16C24.1 19.1 24 19.08 23.88 19.1C23.82 18.74 23.72 18.4 23.58 18.08C22.94 18.56 22.2 18.94 21.42 19.16C20.48 19.42 19.52 19.52 18.54 19.48C17.92 19.42 17.5 19.24 17.34 19.76C18.28 20.08 19.28 20.18 20.28 20.06C20.3 20.06 20.34 20.08 20.34 20.1C20.34 20.12 20.32 20.14 20.3 20.16C20.22 20.14 19.06 20.68 17.22 20.1ZM13.84 11.88C14.6 11.34 15.48 10.96 16.38 10.76C17.42 10.52 18.48 10.52 19.52 10.76C19.56 10.76 19.58 10.7 19.54 10.68C19 10.4 18.42 10.24 17.8 10.22C17.78 10.22 17.76 10.2 17.76 10.18V10.16C17.86 10.04 17.96 9.92 18.08 9.84C18.1 9.82 18.1 9.8 18.08 9.8L18.06 9.78C17.32 9.86 16.62 10.1 15.98 10.52C15.96 10.52 15.94 10.52 15.94 10.52V10.5C15.98 10.32 16.06 10.14 16.16 9.96C16.16 9.94 16.16 9.92 16.14 9.92H16.12C15.22 10.42 14.42 11.08 13.76 11.86C13.74 11.88 13.74 11.9 13.76 11.9C13.8 11.9 13.82 11.9 13.84 11.88ZM19.84 16.7C19.96 16.78 20.14 16.76 20.24 16.64C20.3 16.52 20.22 16.38 20.06 16.3C19.94 16.22 19.76 16.24 19.66 16.36C19.6 16.46 19.68 16.62 19.84 16.7ZM20.34 14.88C20.38 15.08 20.46 15.28 20.58 15.44C20.7 15.42 20.84 15.42 20.96 15.44C21.04 15.22 21.04 14.98 20.98 14.76C20.88 14.34 20.76 14.1 20.52 14.14C20.26 14.18 20.24 14.48 20.34 14.88ZM20.88 15.84C20.72 15.8 20.54 15.88 20.48 16.06C20.44 16.22 20.52 16.4 20.7 16.46C20.88 16.52 21.04 16.42 21.1 16.24C21.1 16.22 21.12 16.18 21.12 16.16C21.12 16 21.02 15.86 20.88 15.84Z" fill="black"/><path d="M16.66 15.8C16.62 15.8 16.6 15.78 16.6 15.76C16.58 15.68 16.7 15.58 16.8 15.48C17.14 15.22 17.6 15.18 17.98 15.34C18.16 15.42 18.32 15.54 18.42 15.7C18.46 15.76 18.46 15.82 18.44 15.84C18.4 15.88 18.3 15.84 18.12 15.76C17.92 15.66 17.68 15.6 17.46 15.62C17.2 15.66 16.92 15.72 16.66 15.8ZM18.38 16.16C18.22 16 18 15.92 17.8 15.96C17.64 15.98 17.5 16.04 17.38 16.14C17.32 16.18 17.28 16.24 17.28 16.32C17.28 16.34 17.28 16.36 17.3 16.36C17.32 16.36 17.32 16.38 17.34 16.38C17.4 16.38 17.46 16.36 17.5 16.34C17.74 16.26 17.98 16.22 18.22 16.26C18.34 16.28 18.38 16.28 18.42 16.24C18.4 16.2 18.4 16.18 18.38 16.16Z" fill="black"/></g><defs><clipPath id="clip0_11766_122079"><rect width="32" height="32" fill="white"/></clipPath></defs></svg>
                    <div class="dgznh">
                      <span class="block tuuss z0e83 dark:text-neutral-500">
                        BlueVista Innovations
                      </span>
                    </div>
                  </div>

series.forEach((single, i) => {
                  const val = props.series[i][dataPointIndex] || (typeof series[i].data[dataPointIndex] !== 'object' ? series[i].data[dataPointIndex] : props.series[i][dataPointIndex]);
                  const label = series[i].name;
                  const groupData = invertGroup ? {
                    left: `${hasTextLabel ? label : ''}${labelDivider}`,
                    right: `${valuePrefix}${val >= 1000 && isValueDivided ? `${val / 1000}k` : val}${valuePostfix}`
                  } : {
                    left: `${valuePrefix}${val >= 1000 && isValueDivided ? `${val / 1000}k` : val}${valuePostfix}`,
                    right: `${hasTextLabel ? label : ''}${labelDivider}`
                  }
                  const labelMarkup = `<span class="apexcharts-tooltip-text-y-label ${labelClasses} ${labelExtClasses}">${groupData.left}</span>`;

seriesGroups += `<div class="apexcharts-tooltip-series-group flex! ${hasTextLabel ? 'o8wyu' : ''} order-${i + 1} ${seriesClasses} ${seriesExtClasses}">
                  <span class="flex items-center">
                    <span class="apexcharts-tooltip-marker ${markerClasses} ${markerExtClasses}" style="background: ${colors[i]}"></span>
                    <div class="apexcharts-tooltip-text">
                      <div class="apexcharts-tooltip-y-group d5s98">
                        <span class="apexcharts-tooltip-text-y-value ${valueClasses} ${valueExtClasses}">${groupData.right}</span>
                      </div>
                    </div>
                  </span>
                  ${labelMarkup}
                </div>`
                });

const {
                  title,
                  mode,
                  valuePrefix = '$',
                  isValueDivided = true,
                  valuePostfix = '',
                  hasCategory = true,
                  hasTextLabel = false,
                  labelDivider = '',
                  wrapperClasses = 'r8vr5 madsw zxv30 k9mkq yxawv ejo46 wavyl qdmo7 dark:bg-neutral-800 dark:border-neutral-700',
                  wrapperExtClasses = '',
                  seriesClasses = 'o8wyu xp67g on128',
                  seriesExtClasses = '',
                  titleClasses = 'flex saet7 hysdx txx5h lb789 mdim3 ejo46 jnjrn dark:bg-neutral-800! dark:border-neutral-700! dark:text-neutral-200',
                  titleExtClasses = '',
                  markerClasses = 'odtso fg08f zmydb',
                  markerExtClasses = 'hgwpu',
                  valueClasses = 'tnvde z0e83 ms-auto! dark:text-neutral-400',
                  valueExtClasses = '',
                  labelClasses = 'z0e83 dark:text-neutral-400 fxthc',
                  labelExtClasses = ''
                } = options;

series.forEach((_, i) => {
                  const val = props.series[i][dataPointIndex] || (typeof series[i].data[dataPointIndex] !== 'object' ? series[i].data[dataPointIndex] : props.series[i][dataPointIndex]);
                  const label = series[i].name;
                  const altValue = series[i].altValue || null;
                  const labelMarkup = `<span class="apexcharts-tooltip-text-y-label ${labelClasses} ${labelExtClasses}">${newCategory} ${label || ''}</span>`;
                  const valueMarkup = altValue || `<span class="apexcharts-tooltip-text-y-value ${valueClasses} ${valueExtClasses}">${valuePrefix}${val >= 1000 && isValueDivided ? `${val / 1000}k` : val}${valuePostfix}${labelDivider}</span>`;

seriesGroups += `<div class="apexcharts-tooltip-series-group ${seriesClasses} flex! order-${i + 1} ${seriesExtClasses}">
                  <span class="flex items-center">
                    <span class="apexcharts-tooltip-marker ${markerClasses} ${markerExtClasses}" style="background: ${colors[i]}"></span>
                    <div class="apexcharts-tooltip-text">
                      <div class="apexcharts-tooltip-y-group d5s98">
                        ${valueMarkup}
                      </div>
                    </div>
                  </span>
                  ${hasTextLabel ? labelMarkup : ''}
                </div>`
                });

return `<div class="${mode === 'dark' ? 'dark ' : ''}${wrapperClasses} ${wrapperExtClasses}">
                <div class="apexcharts-tooltip-title ${titleClasses} ${titleExtClasses}">
                  <span>${title}</span>
                  <span class="flex items-center r2jif ${!isDifferenceIsNull ? (isGrowing ? 'zwetb' : 'h101d') : ''} fxthc">
                    ${!isDifferenceIsNull ? icon : ''}
                    <span class="inline-block tuuss">
                      ${difference.toFixed(1)}%
                    </span>
                  </span>
                </div>
                ${seriesGroups}
              </div>`;
              }

const {
                  title,
                  mode,
                  valuePrefix = '$',
                  isValueDivided = true,
                  valuePostfix = '',
                  hasCategory = true,
                  hasTextLabel = false,
                  labelDivider = '',
                  wrapperClasses = 'r8vr5 madsw zxv30 k9mkq yxawv ejo46 wavyl qdmo7 dark:bg-neutral-800 dark:border-neutral-700',
                  wrapperExtClasses = '',
                  seriesClasses = 'o8wyu xp67g on128',
                  seriesExtClasses = '',
                  titleClasses = 'flex saet7 hysdx txx5h lb789 mdim3 ejo46 jnjrn dark:bg-neutral-800! dark:border-neutral-700! dark:text-neutral-200',
                  titleExtClasses = '',
                  markerClasses = 'odtso fg08f zmydb',
                  markerExtClasses = 'hgwpu',
                  valueClasses = 'tnvde z0e83 ms-auto! dark:text-neutral-400',
                  valueExtClasses = '',
                  labelClasses = 'z0e83 dark:text-neutral-400 fxthc',
                  labelExtClasses = ''
                } = options;

seriesGroups += `<div class="apexcharts-tooltip-series-group flex! ${seriesClasses} order-${i + 1} ${seriesExtClasses}">
                  <span class="flex items-center">
                    <span class="apexcharts-tooltip-marker ${markerClasses} ${markerExtClasses}" style="background: ${colors[i]}"></span>
                    <div class="apexcharts-tooltip-text on128">
                      <div class="apexcharts-tooltip-y-group d5s98">
                        <span class="apexcharts-tooltip-text-y-value ${valueClasses} ${valueExtClasses}">${newCategory} ${label || ''}${labelDivider}</span>
                      </div>
                    </div>
                  </span>
                  ${hasTextLabel ? labelMarkup : ''}
                </div>`
                });

return `<div class="${mode === 'dark' ? 'dark ' : ''}${wrapperClasses} ${wrapperExtClasses}">
                <div class="apexcharts-tooltip-title ${titleClasses} ${titleExtClasses}">
                  <span>${title}</span>
                  <span class="flex items-center r2jif ${!isDifferenceIsNull ? (isGrowing ? 'zwetb' : 'h101d') : ''} fxthc">
                    ${!isDifferenceIsNull ? icon : ''}
                    <span class="inline-block tuuss">
                      ${difference.toFixed(1)}%
                    </span>
                  </span>
                </div>
                ${seriesGroups}
              </div>`;
              }

function buildTooltipForDonut({ series, seriesIndex, w }, textColor) {
                const { globals } = w;
                const { colors } = globals;

return `<div class="apexcharts-tooltip-series-group" style="background-color: ${colors[seriesIndex]}; display: block;">
                <div class="apexcharts-tooltip-text" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px;">
                  <div class="apexcharts-tooltip-y-group" style="color: ${textColor[seriesIndex]}">
                    <span class="apexcharts-tooltip-text-y-label">${globals.labels[seriesIndex]}: </span>
                    <span class="apexcharts-tooltip-text-y-value">${series[seriesIndex]}</span>
                  </div>
                </div>
              </div>`;
              }

function buildChart(id, shared, light, dark) {
                const $chart = document.querySelector(id);
                let chart = null;

if (!$chart) return false;

const tabpanel = $chart.closest('[role="tabpanel"]');
                let modeFromBodyClass = null;

Array.from(document.querySelector('html').classList).forEach((cl) => {
                  if (['dark', 'light', 'default'].includes(cl)) modeFromBodyClass = cl;
                });

const optionsFn = (mode = modeFromBodyClass || localStorage.getItem('hs_theme')) => _.merge(shared(mode), mode === 'dark' ? dark : light);

if ($chart) {
                  chart = new ApexCharts($chart, optionsFn());
                  chart.render();

window.addEventListener('on-hs-appearance-change', (evt) => chart.updateOptions(optionsFn(evt.detail)));

if (tabpanel) tabpanel.addEventListener('on-hs-appearance-change', (evt) => chart.updateOptions(optionsFn(evt.detail)));
                }

return chart;
              }
            </script>
            <script>
              window.addEventListener('load', () => {
                // Apex Bar Sparkline Charts
                (function () {
                  const barCharts = [
                    {
                      id: '#hs-pro-cplisbch1',
                      data: [2100, 2000, 2400, 4500, 4700, 3000, 3000, -3500, -4500, 3500, 4000],
                      name: 'Project cost',
                      color: 'oklch(62.7% 0.194 149.214)'
                    },
                    {
                      id: '#hs-pro-cplisbch2',
                      data: [1500, 2500, 3000, 4000, -2000, -1000, 1000, 2500, 3000, -500, 0],
                      name: 'Project cost',
                      color: 'oklch(70.5% 0.213 47.604)'
                    },
                    {
                      id: '#hs-pro-cplisbch3',
                      data: [-500, -1000, -1500, 1000, 1500, 2000, 2500, 2000, 1700, 1100, 0],
                      name: 'Project cost',
                      color: 'oklch(57.7% 0.245 27.325)'
                    }
                  ];

const categories = [
                    '25 January 2023',
                    '26 January 2023',
                    '27 January 2023',
                    '28 January 2023',
                    '29 January 2023',
                    '30 January 2023',
                    '31 January 2023',
                    '1 February 2023',
                    '2 February 2023',
                    '3 February 2023',
                    '4 February 2023'
                  ];

barCharts.forEach(({ id, data, name, color }) => {
                    buildChart(id, (mode) => ({
                      series: [{
                        name,
                        data
                      }],
                      chart: {
                        width: 100,
                        height: 50,
                        type: 'bar',
                        sparkline: {
                          enabled: true
                        }
                      },
                      xaxis: {
                        type: 'category',
                        categories,
                        crosshairs: {
                          show: false
                        }
                      },
                      tooltip: {
                        marker: {
                          show: false
                        },
                        fixed: {
                          enabled: true,
                          position: 'bottomLeft',
                          offsetX: 10,
                          offsetY: -15
                        },
                        custom: function (props) {
                          const { categories } = props.ctx.opts.xaxis;
                          const { dataPointIndex } = props;
                          const title = categories[dataPointIndex].split(' ');
                          const newTitle = `${title[0]} ${title[1]}`;

return buildTooltip(props, {
                            title: newTitle,
                            mode,
                            hasTextLabel: true,
                            wrapperExtClasses: 'inu3s',
                            titleExtClasses: 'f8srl',
                            labelDivider: ':',
                            labelExtClasses: 'fxthc'
                          });
                        }
                      }
                    }), {
                      colors: [color],
                      plotOptions: {
                        bar: {
                          colors: {
                            ranges: [{
                              from: -5000,
                              to: 0,
                              color: 'oklch(87.2% 0.01 258.338)'
                            }]
                          }
                        }
                      },
                      xaxis: {
                        labels: {
                          style: {
                            colors: 'oklch(0.707 0.022 261.325)'
                          }
                        }
                      },
                      yaxis: {
                        labels: {
                          style: {
                            colors: 'oklch(0.707 0.022 261.325)'
                          }
                        }
                      },
                      grid: {
                        borderColor: 'oklch(0.928 0.006 264.531)'
                      }
                    }, {
                      colors: [color],
                      plotOptions: {
                        bar: {
                          colors: {
                            ranges: [{
                              from: -5000,
                              to: 0,
                              color: 'oklch(37.1% 0 0)'
                            }]
                          }
                        }
                      },
                      xaxis: {
                        labels: {
                          style: {
                            colors: 'oklch(0.556 0 0)'
                          }
                        }
                      },
                      yaxis: {
                        labels: {
                          style: {
                            colors: 'oklch(0.556 0 0)'
                          }
                        }
                      },
                      grid: {
                        borderColor: 'oklch(37.1% 0 0)'
                      }
                    });
                  });
                })();
              });
            </script>

CRM Demo: Alternative Listing Option Preview

<span class="block hw6xt ejo46 dark:text-neutral-200">
                  AI-Powered Customer Service Platform Development
                </span>
              </div>
              
            </div>

<div class="khfgm boxle fl5mu sdn14">
              
              <div>
                <span class="block urcp3 d5esf z0e83 dark:text-neutral-500">
                  Overall progress: <span class="hw6xt u9tmt">Medium</span>
                </span>
      
                <div class="flex items-center lwq0m">
                  
                  <svg class="n2l26 ubcvn" width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
                    <g transform="translate(32,32)">
                      <g>
                        <rect x="-3" y="-28" width="6" height="12" rx="3" fill="currentColor" transform="rotate(0)" class="u9tmt"/>
                        <rect x="-3" y="-28" width="6" height="12" rx="3" fill="currentColor" transform="rotate(30)" class="u9tmt"/>
                        <rect x="-3" y="-28" width="6" height="12" rx="3" fill="currentColor" transform="rotate(60)" class="u9tmt"/>
                        <rect x="-3" y="-28" width="6" height="12" rx="3" fill="currentColor" transform="rotate(90)" class="u9tmt"/>
                        <rect x="-3" y="-28" width="6" height="12" rx="3" fill="currentColor" transform="rotate(120)" class="u9tmt"/>
                        <rect x="-3" y="-28" width="6" height="12" rx="3" fill="currentColor" transform="rotate(150)" class="wiop5 dark:text-neutral-700"/>
                        <rect x="-3" y="-28" width="6" height="12" rx="3" fill="currentColor" transform="rotate(180)" class="wiop5 dark:text-neutral-700"/>
                        <rect x="-3" y="-28" width="6" height="12" rx="3" fill="currentColor" transform="rotate(210)" class="wiop5 dark:text-neutral-700"/>
                        <rect x="-3" y="-28" width="6" height="12" rx="3" fill="currentColor" transform="rotate(240)" class="wiop5 dark:text-neutral-700"/>
                        <rect x="-3" y="-28" width="6" height="12" rx="3" fill="currentColor" transform="rotate(270)" class="wiop5 dark:text-neutral-700"/>
                        <rect x="-3" y="-28" width="6" height="12" rx="3" fill="currentColor" transform="rotate(300)" class="wiop5 dark:text-neutral-700"/>
                        <rect x="-3" y="-28" width="6" height="12" rx="3" fill="currentColor" transform="rotate(330)" class="wiop5 dark:text-neutral-700"/>
                      </g>
                    </g>
                  </svg>

<span class="flex items-center r2jif d5esf u9tmt">
                  <svg class="n2l26 bnmi1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 13a6 6 0 1 0 12 0 4 4 0 1 0-8 0 2 2 0 0 0 4 0"/><circle cx="10" cy="13" r="8"/><path d="M2 21h12c4.4 0 8-3.6 8-8V7a2 2 0 1 0-4 0v6"/><path d="M18 3 19.1 5.2"/><path d="M22 3 20.9 5.2"/></svg>
                  slowling progressing
                </span>
              </div>

<div>
                <span class="block urcp3 d5esf z0e83 dark:text-neutral-500">
                  Tasks: <span class="hw6xt j28t5 dark:text-blue-500">In progress</span>
                </span>

<p class="cd9qe">
                   <span class="hysdx j28t5 dark:text-blue-500">22%</span>  <span class="z0e83 dark:text-neutral-500">of</span> <span class="hysdx ejo46 dark:text-neutral-200">100</span> <span class="z0e83 dark:text-neutral-500">completed</span>
                </p>

<div class="nqo4p flex items-center v6f2r">
                  <div class="flex items-center n03hs">
                    <span class="n2l26 lk7kv whhnp inline-block o0y3u mr9qs dark:text-blue-500"></span>
                    <span class="n2l26 lk7kv whhnp inline-block o0y3u mr9qs dark:text-blue-500"></span>
                    <span class="n2l26 lk7kv whhnp inline-block r01ey mr9qs dark:bg-neutral-600"></span>
                    <span class="n2l26 lk7kv whhnp inline-block r01ey mr9qs dark:bg-neutral-600"></span>
                    <span class="n2l26 lk7kv whhnp inline-block r01ey mr9qs dark:bg-neutral-600"></span>
                  </div>
                </div>
                
              </div>

<div>
                <span class="block urcp3 d5esf z0e83 dark:text-neutral-500">
                  Project cost: <span class="hw6xt u9tmt">Approaching Limit</span>
                </span>

<div id="hs-pro-cplisbch2"></div>
              </div>
              
            </div>
            
          </div>
          </div>
              <script src="../../assets/vendor/preline/dist/index.js?v=3.1.0"></script>
              <script src="../../assets/vendor/lodash/lodash.min.js"></script>
              <script src="../../assets/vendor/apexcharts/dist/apexcharts.min.js"></script>
              
              <script>
                function buildTooltip(props, options) {
                  const {
                    title,
                    mode,
                    valuePrefix = '$',
                    isValueDivided = true,
                    valuePostfix = '',
                    hasTextLabel = false,
                    invertGroup = false,
                    labelDivider = '',
                    wrapperClasses = 'r8vr5 madsw zxv30 k9mkq yxawv ejo46 wavyl qdmo7 dark:bg-neutral-800 dark:border-neutral-700',
                    wrapperExtClasses = '',
                    seriesClasses = 'on128',
                    seriesExtClasses = '',
                    titleClasses = 'hysdx txx5h lb789 mdim3 ejo46 jnjrn dark:bg-neutral-800! dark:border-neutral-700! dark:text-neutral-200',
                    titleExtClasses = '',
                    markerClasses = 'odtso fg08f zmydb',
                    markerExtClasses = 'hgwpu',
                    valueClasses = 'tnvde z0e83 ms-auto! dark:text-neutral-400',
                    valueExtClasses = '',
                    labelClasses = 'z0e83 dark:text-neutral-400',
                    labelExtClasses = ''
                  } = options;
                  const { dataPointIndex } = props;
                  const { colors } = props.ctx.opts;
                  const series = props.ctx.opts.series;
                  let seriesGroups = '';

series.forEach((single, i) => {
                    const val = props.series[i][dataPointIndex] || (typeof series[i].data[dataPointIndex] !== 'object' ? series[i].data[dataPointIndex] : props.series[i][dataPointIndex]);
                    const label = series[i].name;
                    const groupData = invertGroup ? {
                      left: `${hasTextLabel ? label : ''}${labelDivider}`,
                      right: `${valuePrefix}${val >= 1000 && isValueDivided ? `${val / 1000}k` : val}${valuePostfix}`
                    } : {
                      left: `${valuePrefix}${val >= 1000 && isValueDivided ? `${val / 1000}k` : val}${valuePostfix}`,
                      right: `${hasTextLabel ? label : ''}${labelDivider}`
                    }
                    const labelMarkup = `<span class="apexcharts-tooltip-text-y-label ${labelClasses} ${labelExtClasses}">${groupData.left}</span>`;

seriesGroups += `<div class="apexcharts-tooltip-series-group flex! ${hasTextLabel ? 'o8wyu' : ''} order-${i + 1} ${seriesClasses} ${seriesExtClasses}">
                    <span class="flex items-center">
                      <span class="apexcharts-tooltip-marker ${markerClasses} ${markerExtClasses}" style="background: ${colors[i]}"></span>
                      <div class="apexcharts-tooltip-text">
                        <div class="apexcharts-tooltip-y-group d5s98">
                          <span class="apexcharts-tooltip-text-y-value ${valueClasses} ${valueExtClasses}">${groupData.right}</span>
                        </div>
                      </div>
                    </span>
                    ${labelMarkup}
                  </div>`
                  });

const {
                    title,
                    mode,
                    valuePrefix = '$',
                    isValueDivided = true,
                    valuePostfix = '',
                    hasCategory = true,
                    hasTextLabel = false,
                    labelDivider = '',
                    wrapperClasses = 'r8vr5 madsw zxv30 k9mkq yxawv ejo46 wavyl qdmo7 dark:bg-neutral-800 dark:border-neutral-700',
                    wrapperExtClasses = '',
                    seriesClasses = 'o8wyu xp67g on128',
                    seriesExtClasses = '',
                    titleClasses = 'flex saet7 hysdx txx5h lb789 mdim3 ejo46 jnjrn dark:bg-neutral-800! dark:border-neutral-700! dark:text-neutral-200',
                    titleExtClasses = '',
                    markerClasses = 'odtso fg08f zmydb',
                    markerExtClasses = 'hgwpu',
                    valueClasses = 'tnvde z0e83 ms-auto! dark:text-neutral-400',
                    valueExtClasses = '',
                    labelClasses = 'z0e83 dark:text-neutral-400 fxthc',
                    labelExtClasses = ''
                  } = options;

series.forEach((_, i) => {
                    const val = props.series[i][dataPointIndex] || (typeof series[i].data[dataPointIndex] !== 'object' ? series[i].data[dataPointIndex] : props.series[i][dataPointIndex]);
                    const label = series[i].name;
                    const altValue = series[i].altValue || null;
                    const labelMarkup = `<span class="apexcharts-tooltip-text-y-label ${labelClasses} ${labelExtClasses}">${newCategory} ${label || ''}</span>`;
                    const valueMarkup = altValue || `<span class="apexcharts-tooltip-text-y-value ${valueClasses} ${valueExtClasses}">${valuePrefix}${val >= 1000 && isValueDivided ? `${val / 1000}k` : val}${valuePostfix}${labelDivider}</span>`;

seriesGroups += `<div class="apexcharts-tooltip-series-group ${seriesClasses} flex! order-${i + 1} ${seriesExtClasses}">
                    <span class="flex items-center">
                      <span class="apexcharts-tooltip-marker ${markerClasses} ${markerExtClasses}" style="background: ${colors[i]}"></span>
                      <div class="apexcharts-tooltip-text">
                        <div class="apexcharts-tooltip-y-group d5s98">
                          ${valueMarkup}
                        </div>
                      </div>
                    </span>
                    ${hasTextLabel ? labelMarkup : ''}
                  </div>`
                  });

return `<div class="${mode === 'dark' ? 'dark ' : ''}${wrapperClasses} ${wrapperExtClasses}">
                  <div class="apexcharts-tooltip-title ${titleClasses} ${titleExtClasses}">
                    <span>${title}</span>
                    <span class="flex items-center r2jif ${!isDifferenceIsNull ? (isGrowing ? 'zwetb' : 'h101d') : ''} fxthc">
                      ${!isDifferenceIsNull ? icon : ''}
                      <span class="inline-block tuuss">
                        ${difference.toFixed(1)}%
                      </span>
                    </span>
                  </div>
                  ${seriesGroups}
                </div>`;
                }

const {
                    title,
                    mode,
                    valuePrefix = '$',
                    isValueDivided = true,
                    valuePostfix = '',
                    hasCategory = true,
                    hasTextLabel = false,
                    labelDivider = '',
                    wrapperClasses = 'r8vr5 madsw zxv30 k9mkq yxawv ejo46 wavyl qdmo7 dark:bg-neutral-800 dark:border-neutral-700',
                    wrapperExtClasses = '',
                    seriesClasses = 'o8wyu xp67g on128',
                    seriesExtClasses = '',
                    titleClasses = 'flex saet7 hysdx txx5h lb789 mdim3 ejo46 jnjrn dark:bg-neutral-800! dark:border-neutral-700! dark:text-neutral-200',
                    titleExtClasses = '',
                    markerClasses = 'odtso fg08f zmydb',
                    markerExtClasses = 'hgwpu',
                    valueClasses = 'tnvde z0e83 ms-auto! dark:text-neutral-400',
                    valueExtClasses = '',
                    labelClasses = 'z0e83 dark:text-neutral-400 fxthc',
                    labelExtClasses = ''
                  } = options;

seriesGroups += `<div class="apexcharts-tooltip-series-group flex! ${seriesClasses} order-${i + 1} ${seriesExtClasses}">
                    <span class="flex items-center">
                      <span class="apexcharts-tooltip-marker ${markerClasses} ${markerExtClasses}" style="background: ${colors[i]}"></span>
                      <div class="apexcharts-tooltip-text on128">
                        <div class="apexcharts-tooltip-y-group d5s98">
                          <span class="apexcharts-tooltip-text-y-value ${valueClasses} ${valueExtClasses}">${newCategory} ${label || ''}${labelDivider}</span>
                        </div>
                      </div>
                    </span>
                    ${hasTextLabel ? labelMarkup : ''}
                  </div>`
                  });

return `<div class="${mode === 'dark' ? 'dark ' : ''}${wrapperClasses} ${wrapperExtClasses}">
                  <div class="apexcharts-tooltip-title ${titleClasses} ${titleExtClasses}">
                    <span>${title}</span>
                    <span class="flex items-center r2jif ${!isDifferenceIsNull ? (isGrowing ? 'zwetb' : 'h101d') : ''} fxthc">
                      ${!isDifferenceIsNull ? icon : ''}
                      <span class="inline-block tuuss">
                        ${difference.toFixed(1)}%
                      </span>
                    </span>
                  </div>
                  ${seriesGroups}
                </div>`;
                }

function buildTooltipForDonut({ series, seriesIndex, w }, textColor) {
                  const { globals } = w;
                  const { colors } = globals;

return `<div class="apexcharts-tooltip-series-group" style="background-color: ${colors[seriesIndex]}; display: block;">
                  <div class="apexcharts-tooltip-text" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px;">
                    <div class="apexcharts-tooltip-y-group" style="color: ${textColor[seriesIndex]}">
                      <span class="apexcharts-tooltip-text-y-label">${globals.labels[seriesIndex]}: </span>
                      <span class="apexcharts-tooltip-text-y-value">${series[seriesIndex]}</span>
                    </div>
                  </div>
                </div>`;
                }

function buildChart(id, shared, light, dark) {
                  const $chart = document.querySelector(id);
                  let chart = null;

if (!$chart) return false;

const tabpanel = $chart.closest('[role="tabpanel"]');
                  let modeFromBodyClass = null;

Array.from(document.querySelector('html').classList).forEach((cl) => {
                    if (['dark', 'light', 'default'].includes(cl)) modeFromBodyClass = cl;
                  });

const optionsFn = (mode = modeFromBodyClass || localStorage.getItem('hs_theme')) => _.merge(shared(mode), mode === 'dark' ? dark : light);

if ($chart) {
                    chart = new ApexCharts($chart, optionsFn());
                    chart.render();

window.addEventListener('on-hs-appearance-change', (evt) => chart.updateOptions(optionsFn(evt.detail)));

if (tabpanel) tabpanel.addEventListener('on-hs-appearance-change', (evt) => chart.updateOptions(optionsFn(evt.detail)));
                  }

return chart;
                }
              </script>
              <script>
                window.addEventListener('load', () => {
                  // Apex Bar Sparkline Charts
                  (function () {
                    const barCharts = [
                      {
                        id: '#hs-pro-cplisbch1',
                        data: [2100, 2000, 2400, 4500, 4700, 3000, 3000, -3500, -4500, 3500, 4000],
                        name: 'Project cost',
                        color: 'oklch(62.7% 0.194 149.214)'
                      },
                      {
                        id: '#hs-pro-cplisbch2',
                        data: [1500, 2500, 3000, 4000, -2000, -1000, 1000, 2500, 3000, -500, 0],
                        name: 'Project cost',
                        color: 'oklch(70.5% 0.213 47.604)'
                      },
                      {
                        id: '#hs-pro-cplisbch3',
                        data: [-500, -1000, -1500, 1000, 1500, 2000, 2500, 2000, 1700, 1100, 0],
                        name: 'Project cost',
                        color: 'oklch(57.7% 0.245 27.325)'
                      }
                    ];

const categories = [
                      '25 January 2023',
                      '26 January 2023',
                      '27 January 2023',
                      '28 January 2023',
                      '29 January 2023',
                      '30 January 2023',
                      '31 January 2023',
                      '1 February 2023',
                      '2 February 2023',
                      '3 February 2023',
                      '4 February 2023'
                    ];

barCharts.forEach(({ id, data, name, color }) => {
                      buildChart(id, (mode) => ({
                        series: [{
                          name,
                          data
                        }],
                        chart: {
                          width: 100,
                          height: 50,
                          type: 'bar',
                          sparkline: {
                            enabled: true
                          }
                        },
                        xaxis: {
                          type: 'category',
                          categories,
                          crosshairs: {
                            show: false
                          }
                        },
                        tooltip: {
                          marker: {
                            show: false
                          },
                          fixed: {
                            enabled: true,
                            position: 'bottomLeft',
                            offsetX: 10,
                            offsetY: -15
                          },
                          custom: function (props) {
                            const { categories } = props.ctx.opts.xaxis;
                            const { dataPointIndex } = props;
                            const title = categories[dataPointIndex].split(' ');
                            const newTitle = `${title[0]} ${title[1]}`;

return buildTooltip(props, {
                              title: newTitle,
                              mode,
                              hasTextLabel: true,
                              wrapperExtClasses: 'inu3s',
                              titleExtClasses: 'f8srl',
                              labelDivider: ':',
                              labelExtClasses: 'fxthc'
                            });
                          }
                        }
                      }), {
                        colors: [color],
                        plotOptions: {
                          bar: {
                            colors: {
                              ranges: [{
                                from: -5000,
                                to: 0,
                                color: 'oklch(87.2% 0.01 258.338)'
                              }]
                            }
                          }
                        },
                        xaxis: {
                          labels: {
                            style: {
                              colors: 'oklch(0.707 0.022 261.325)'
                            }
                          }
                        },
                        yaxis: {
                          labels: {
                            style: {
                              colors: 'oklch(0.707 0.022 261.325)'
                            }
                          }
                        },
                        grid: {
                          borderColor: 'oklch(0.928 0.006 264.531)'
                        }
                      }, {
                        colors: [color],
                        plotOptions: {
                          bar: {
                            colors: {
                              ranges: [{
                                from: -5000,
                                to: 0,
                                color: 'oklch(37.1% 0 0)'
                              }]
                            }
                          }
                        },
                        xaxis: {
                          labels: {
                            style: {
                              colors: 'oklch(0.556 0 0)'
                            }
                          }
                        },
                        yaxis: {
                          labels: {
                            style: {
                              colors: 'oklch(0.556 0 0)'
                            }
                          }
                        },
                        grid: {
                          borderColor: 'oklch(37.1% 0 0)'
                        }
                      });
                    });
                  })();
                });
              </script>

</body>
          </html>

<div class="jhb8q flex flex-col lg:flex-row sdn14 zxv30 k9mkq yxawv mzy38 ntfdl dark:bg-neutral-900 dark:border-neutral-700">
            
            <div class="flex o63ej">
              
              <div class="xp67g cvoid">
                <div class="dmv3j flex items-center lwq0m">
                  <svg class="n2l26 s1u6m" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.34318 0.00012207H24.6569C28.725 0.00012207 32 3.27516 32 7.34327V24.657C32 28.7251 28.725 32.0001 24.6569 32.0001H7.34318C3.27507 32.0001 2.52724e-05 28.7251 2.52724e-05 24.657V7.34327C2.52724e-05 3.27516 3.27507 0.00012207 7.34318 0.00012207Z" fill="url(#paint0_linear_5465123)"/><path d="M7.01113 9.1001C6.84252 9.1001 6.68368 9.12919 6.53335 9.18899L9.54446 12.289L12.5889 15.4446L12.6445 15.5112L12.8222 15.689L13 15.8779L15.6111 18.5557C15.6546 18.5827 15.7806 18.6994 15.879 18.7486C16.0058 18.812 16.1432 18.8704 16.2849 18.8754C16.4377 18.8809 16.594 18.8371 16.7315 18.7702C16.8345 18.7201 16.8803 18.6483 17 18.5557L20.0222 15.4334L26.0222 9.25566C25.8332 9.15324 25.6239 9.1001 25.4 9.1001H7.01113ZM6.08891 9.47788C5.7678 9.78214 5.56668 10.2395 5.56668 10.7557V20.9334C5.56668 21.3513 5.7009 21.731 5.92224 22.0223L6.34446 21.6223L9.48891 18.5668L12.2778 15.8668L12.2222 15.8001L9.16668 12.6557L6.11113 9.5001L6.08891 9.47788ZM26.4222 9.57788L20.4 15.8001L20.3445 15.8557L23.2445 18.6668L26.3889 21.7223L26.5778 21.9001C26.7471 21.6285 26.8445 21.2938 26.8445 20.9334V10.7557C26.8445 10.2955 26.685 9.87817 26.4222 9.57788ZM12.6333 16.2334L9.85557 18.9334L6.70002 21.989L6.30002 22.3779C6.5109 22.5137 6.75088 22.6001 7.01113 22.6001H25.4C25.7129 22.6001 25.9967 22.4797 26.2334 22.289L26.0334 22.089L22.8778 19.0334L19.9778 16.2334L17.3667 18.9223C17.2254 19.016 17.1309 19.1199 16.9929 19.1837C16.7709 19.2864 16.5275 19.3733 16.2828 19.3696C16.0375 19.3658 15.797 19.2698 15.5768 19.1615C15.4663 19.1072 15.4074 19.0531 15.2778 18.9446L12.6333 16.2334Z" fill="white"/><defs><linearGradient id="paint0_linear_5465123" x1="16.2241" y1="31.8717" x2="16.2552" y2="0.386437" gradientUnits="userSpaceOnUse"><stop stop-color="#70EFFF"/><stop offset="1" stop-color="#5770FF"/></linearGradient></defs></svg>
                  <div class="dgznh">
                    <span class="block tuuss z0e83 dark:text-neutral-500">
                      Lumen Systems
                    </span>
                  </div>
                </div>

series.forEach((single, i) => {
                const val = props.series[i][dataPointIndex] || (typeof series[i].data[dataPointIndex] !== 'object' ? series[i].data[dataPointIndex] : props.series[i][dataPointIndex]);
                const label = series[i].name;
                const groupData = invertGroup ? {
                  left: `${hasTextLabel ? label : ''}${labelDivider}`,
                  right: `${valuePrefix}${val >= 1000 && isValueDivided ? `${val / 1000}k` : val}${valuePostfix}`
                } : {
                  left: `${valuePrefix}${val >= 1000 && isValueDivided ? `${val / 1000}k` : val}${valuePostfix}`,
                  right: `${hasTextLabel ? label : ''}${labelDivider}`
                }
                const labelMarkup = `<span class="apexcharts-tooltip-text-y-label ${labelClasses} ${labelExtClasses}">${groupData.left}</span>`;

seriesGroups += `<div class="apexcharts-tooltip-series-group flex! ${hasTextLabel ? 'o8wyu' : ''} order-${i + 1} ${seriesClasses} ${seriesExtClasses}">
                <span class="flex items-center">
                  <span class="apexcharts-tooltip-marker ${markerClasses} ${markerExtClasses}" style="background: ${colors[i]}"></span>
                  <div class="apexcharts-tooltip-text">
                    <div class="apexcharts-tooltip-y-group d5s98">
                      <span class="apexcharts-tooltip-text-y-value ${valueClasses} ${valueExtClasses}">${groupData.right}</span>
                    </div>
                  </div>
                </span>
                ${labelMarkup}
              </div>`
              });

const {
                title,
                mode,
                valuePrefix = '$',
                isValueDivided = true,
                valuePostfix = '',
                hasCategory = true,
                hasTextLabel = false,
                labelDivider = '',
                wrapperClasses = 'r8vr5 madsw zxv30 k9mkq yxawv ejo46 wavyl qdmo7 dark:bg-neutral-800 dark:border-neutral-700',
                wrapperExtClasses = '',
                seriesClasses = 'o8wyu xp67g on128',
                seriesExtClasses = '',
                titleClasses = 'flex saet7 hysdx txx5h lb789 mdim3 ejo46 jnjrn dark:bg-neutral-800! dark:border-neutral-700! dark:text-neutral-200',
                titleExtClasses = '',
                markerClasses = 'odtso fg08f zmydb',
                markerExtClasses = 'hgwpu',
                valueClasses = 'tnvde z0e83 ms-auto! dark:text-neutral-400',
                valueExtClasses = '',
                labelClasses = 'z0e83 dark:text-neutral-400 fxthc',
                labelExtClasses = ''
              } = options;

series.forEach((_, i) => {
                const val = props.series[i][dataPointIndex] || (typeof series[i].data[dataPointIndex] !== 'object' ? series[i].data[dataPointIndex] : props.series[i][dataPointIndex]);
                const label = series[i].name;
                const altValue = series[i].altValue || null;
                const labelMarkup = `<span class="apexcharts-tooltip-text-y-label ${labelClasses} ${labelExtClasses}">${newCategory} ${label || ''}</span>`;
                const valueMarkup = altValue || `<span class="apexcharts-tooltip-text-y-value ${valueClasses} ${valueExtClasses}">${valuePrefix}${val >= 1000 && isValueDivided ? `${val / 1000}k` : val}${valuePostfix}${labelDivider}</span>`;

seriesGroups += `<div class="apexcharts-tooltip-series-group ${seriesClasses} flex! order-${i + 1} ${seriesExtClasses}">
                <span class="flex items-center">
                  <span class="apexcharts-tooltip-marker ${markerClasses} ${markerExtClasses}" style="background: ${colors[i]}"></span>
                  <div class="apexcharts-tooltip-text">
                    <div class="apexcharts-tooltip-y-group d5s98">
                      ${valueMarkup}
                    </div>
                  </div>
                </span>
                ${hasTextLabel ? labelMarkup : ''}
              </div>`
              });

return `<div class="${mode === 'dark' ? 'dark ' : ''}${wrapperClasses} ${wrapperExtClasses}">
              <div class="apexcharts-tooltip-title ${titleClasses} ${titleExtClasses}">
                <span>${title}</span>
                <span class="flex items-center r2jif ${!isDifferenceIsNull ? (isGrowing ? 'zwetb' : 'h101d') : ''} fxthc">
                  ${!isDifferenceIsNull ? icon : ''}
                  <span class="inline-block tuuss">
                    ${difference.toFixed(1)}%
                  </span>
                </span>
              </div>
              ${seriesGroups}
            </div>`;
            }

const {
                title,
                mode,
                valuePrefix = '$',
                isValueDivided = true,
                valuePostfix = '',
                hasCategory = true,
                hasTextLabel = false,
                labelDivider = '',
                wrapperClasses = 'r8vr5 madsw zxv30 k9mkq yxawv ejo46 wavyl qdmo7 dark:bg-neutral-800 dark:border-neutral-700',
                wrapperExtClasses = '',
                seriesClasses = 'o8wyu xp67g on128',
                seriesExtClasses = '',
                titleClasses = 'flex saet7 hysdx txx5h lb789 mdim3 ejo46 jnjrn dark:bg-neutral-800! dark:border-neutral-700! dark:text-neutral-200',
                titleExtClasses = '',
                markerClasses = 'odtso fg08f zmydb',
                markerExtClasses = 'hgwpu',
                valueClasses = 'tnvde z0e83 ms-auto! dark:text-neutral-400',
                valueExtClasses = '',
                labelClasses = 'z0e83 dark:text-neutral-400 fxthc',
                labelExtClasses = ''
              } = options;

seriesGroups += `<div class="apexcharts-tooltip-series-group flex! ${seriesClasses} order-${i + 1} ${seriesExtClasses}">
                <span class="flex items-center">
                  <span class="apexcharts-tooltip-marker ${markerClasses} ${markerExtClasses}" style="background: ${colors[i]}"></span>
                  <div class="apexcharts-tooltip-text on128">
                    <div class="apexcharts-tooltip-y-group d5s98">
                      <span class="apexcharts-tooltip-text-y-value ${valueClasses} ${valueExtClasses}">${newCategory} ${label || ''}${labelDivider}</span>
                    </div>
                  </div>
                </span>
                ${hasTextLabel ? labelMarkup : ''}
              </div>`
              });

return `<div class="${mode === 'dark' ? 'dark ' : ''}${wrapperClasses} ${wrapperExtClasses}">
              <div class="apexcharts-tooltip-title ${titleClasses} ${titleExtClasses}">
                <span>${title}</span>
                <span class="flex items-center r2jif ${!isDifferenceIsNull ? (isGrowing ? 'zwetb' : 'h101d') : ''} fxthc">
                  ${!isDifferenceIsNull ? icon : ''}
                  <span class="inline-block tuuss">
                    ${difference.toFixed(1)}%
                  </span>
                </span>
              </div>
              ${seriesGroups}
            </div>`;
            }

function buildTooltipForDonut({ series, seriesIndex, w }, textColor) {
              const { globals } = w;
              const { colors } = globals;

return `<div class="apexcharts-tooltip-series-group" style="background-color: ${colors[seriesIndex]}; display: block;">
              <div class="apexcharts-tooltip-text" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px;">
                <div class="apexcharts-tooltip-y-group" style="color: ${textColor[seriesIndex]}">
                  <span class="apexcharts-tooltip-text-y-label">${globals.labels[seriesIndex]}: </span>
                  <span class="apexcharts-tooltip-text-y-value">${series[seriesIndex]}</span>
                </div>
              </div>
            </div>`;
            }

function buildChart(id, shared, light, dark) {
              const $chart = document.querySelector(id);
              let chart = null;

if (!$chart) return false;

const tabpanel = $chart.closest('[role="tabpanel"]');
              let modeFromBodyClass = null;

Array.from(document.querySelector('html').classList).forEach((cl) => {
                if (['dark', 'light', 'default'].includes(cl)) modeFromBodyClass = cl;
              });

const optionsFn = (mode = modeFromBodyClass || localStorage.getItem('hs_theme')) => _.merge(shared(mode), mode === 'dark' ? dark : light);

if ($chart) {
                chart = new ApexCharts($chart, optionsFn());
                chart.render();

window.addEventListener('on-hs-appearance-change', (evt) => chart.updateOptions(optionsFn(evt.detail)));

if (tabpanel) tabpanel.addEventListener('on-hs-appearance-change', (evt) => chart.updateOptions(optionsFn(evt.detail)));
              }

return chart;
            }
          </script>
          <script>
            window.addEventListener('load', () => {
              // Apex Bar Sparkline Charts
              (function () {
                const barCharts = [
                  {
                    id: '#hs-pro-cplisbch1',
                    data: [2100, 2000, 2400, 4500, 4700, 3000, 3000, -3500, -4500, 3500, 4000],
                    name: 'Project cost',
                    color: 'oklch(62.7% 0.194 149.214)'
                  },
                  {
                    id: '#hs-pro-cplisbch2',
                    data: [1500, 2500, 3000, 4000, -2000, -1000, 1000, 2500, 3000, -500, 0],
                    name: 'Project cost',
                    color: 'oklch(70.5% 0.213 47.604)'
                  },
                  {
                    id: '#hs-pro-cplisbch3',
                    data: [-500, -1000, -1500, 1000, 1500, 2000, 2500, 2000, 1700, 1100, 0],
                    name: 'Project cost',
                    color: 'oklch(57.7% 0.245 27.325)'
                  }
                ];

const categories = [
                  '25 January 2023',
                  '26 January 2023',
                  '27 January 2023',
                  '28 January 2023',
                  '29 January 2023',
                  '30 January 2023',
                  '31 January 2023',
                  '1 February 2023',
                  '2 February 2023',
                  '3 February 2023',
                  '4 February 2023'
                ];

barCharts.forEach(({ id, data, name, color }) => {
                  buildChart(id, (mode) => ({
                    series: [{
                      name,
                      data
                    }],
                    chart: {
                      width: 100,
                      height: 50,
                      type: 'bar',
                      sparkline: {
                        enabled: true
                      }
                    },
                    xaxis: {
                      type: 'category',
                      categories,
                      crosshairs: {
                        show: false
                      }
                    },
                    tooltip: {
                      marker: {
                        show: false
                      },
                      fixed: {
                        enabled: true,
                        position: 'bottomLeft',
                        offsetX: 10,
                        offsetY: -15
                      },
                      custom: function (props) {
                        const { categories } = props.ctx.opts.xaxis;
                        const { dataPointIndex } = props;
                        const title = categories[dataPointIndex].split(' ');
                        const newTitle = `${title[0]} ${title[1]}`;

return buildTooltip(props, {
                          title: newTitle,
                          mode,
                          hasTextLabel: true,
                          wrapperExtClasses: 'inu3s',
                          titleExtClasses: 'f8srl',
                          labelDivider: ':',
                          labelExtClasses: 'fxthc'
                        });
                      }
                    }
                  }), {
                    colors: [color],
                    plotOptions: {
                      bar: {
                        colors: {
                          ranges: [{
                            from: -5000,
                            to: 0,
                            color: 'oklch(87.2% 0.01 258.338)'
                          }]
                        }
                      }
                    },
                    xaxis: {
                      labels: {
                        style: {
                          colors: 'oklch(0.707 0.022 261.325)'
                        }
                      }
                    },
                    yaxis: {
                      labels: {
                        style: {
                          colors: 'oklch(0.707 0.022 261.325)'
                        }
                      }
                    },
                    grid: {
                      borderColor: 'oklch(0.928 0.006 264.531)'
                    }
                  }, {
                    colors: [color],
                    plotOptions: {
                      bar: {
                        colors: {
                          ranges: [{
                            from: -5000,
                            to: 0,
                            color: 'oklch(37.1% 0 0)'
                          }]
                        }
                      }
                    },
                    xaxis: {
                      labels: {
                        style: {
                          colors: 'oklch(0.556 0 0)'
                        }
                      }
                    },
                    yaxis: {
                      labels: {
                        style: {
                          colors: 'oklch(0.556 0 0)'
                        }
                      }
                    },
                    grid: {
                      borderColor: 'oklch(37.1% 0 0)'
                    }
                  });
                });
              })();
            });
          </script>

Get all the latest Preline updates and news.

Project Details

CRM Demo: Default Option Preview

CRM Demo: Alternative Listing Option Preview

Subscribe

All examples