<app-page-header title="Course Dashboard" title1="Course Dashboard" activeitem="Home" ></app-page-header> <!-- Start::row-1 --> <div class="grid grid-cols-12 gap-x-5"> <div class="col-span-12 md:col-span-6 xxl:col-span-3"> <div class="box"> <div class="box-body relative"> <a aria-label="anchor" href="javascript:void(0);" class="absolute w-full h-full inset-0" ></a> <div class="flex items-center"> <a aria-label="anchor" href="javascript:void(0);" class="ltr:pr-4 rtl:pl-4 block" > <span class="avatar rounded-sm bg-primary/20 text-primary p-3" ><i class="ti ti-wallet text-2xl leading-none"></i ></span> </a> <div class="flex-1 font-semibold"> <h4 class="text-2xl text-gray-800 dark:text-white font-semibold"> $98,450 </h4> <div class="flex justify-between items-center"> <span class="text-gray-500 dark:text-white/70 text-xs" >YTD Earning</span > <span class="text-success text-xs" ><i class="ti ti-trending-up text-base ltr:mr-1 rtl:ml-1"></i >+2.02%</span > </div> </div> </div> </div> </div> </div> <div class="col-span-12 md:col-span-6 xxl:col-span-3"> <div class="box"> <div class="box-body relative"> <a aria-label="anchor" href="javascript:void(0);" class="absolute w-full h-full inset-0" ></a> <div class="flex items-center"> <a aria-label="anchor" href="javascript:void(0);" class="ltr:pr-4 rtl:pl-4 block" > <span class="avatar rounded-sm bg-secondary/20 text-secondary p-3" ><i class="ti ti-users text-2xl leading-none"></i ></span> </a> <div class="flex-1 font-semibold"> <h4 class="text-2xl text-gray-800 dark:text-white font-semibold"> 15,379 </h4> <div class="flex justify-between items-center"> <span class="text-gray-500 dark:text-white/70 text-xs" >Total Students</span > <span class="text-danger text-xs" ><i class="ti ti-trending-down text-base ltr:mr-1 rtl:ml-1"></i >+2.02%</span > </div> </div> </div> </div> </div> </div> <div class="col-span-12 md:col-span-6 xxl:col-span-3"> <div class="box"> <div class="box-body relative"> <a aria-label="anchor" href="javascript:void(0);" class="absolute w-full h-full inset-0" ></a> <div class="flex items-center"> <a aria-label="anchor" href="javascript:void(0);" class="ltr:pr-4 rtl:pl-4 block" > <span class="avatar rounded-sm bg-warning/20 text-warning p-3" ><i class="ti ti-id text-2xl leading-none"></i ></span> </a> <div class="flex-1 font-semibold"> <h4 class="text-2xl text-gray-800 dark:text-white font-semibold"> 377 </h4> <div class="flex justify-between items-center"> <span class="text-gray-500 dark:text-white/70 text-xs" >Total Instructors</span > <span class="text-danger text-xs" ><i class="ti ti-trending-down text-base ltr:mr-1 rtl:ml-1"></i >+2.02%</span > </div> </div> </div> </div> </div> </div> <div class="col-span-12 md:col-span-6 xxl:col-span-3"> <div class="box"> <div class="box-body relative"> <a aria-label="anchor" href="javascript:void(0);" class="absolute w-full h-full inset-0" ></a> <div class="flex items-center"> <a aria-label="anchor" href="javascript:void(0);" class="ltr:pr-4 rtl:pl-4 block" > <span class="avatar rounded-sm bg-danger/20 text-danger p-3" ><i class="ti ti-gift text-2xl leading-none"></i ></span> </a> <div class="flex-1 font-semibold"> <h4 class="text-2xl text-gray-800 dark:text-white font-semibold"> 11,016 </h4> <div class="flex justify-between items-center"> <span class="text-gray-500 dark:text-white/70 text-xs" >Total Courses</span > <span class="text-success text-xs" ><i class="ti ti-trending-up text-base ltr:mr-1 rtl:ml-1"></i >+2.02%</span > </div> </div> </div> </div> </div> </div> </div> <!-- End::row-1 --> <!-- Start::row-2 --> <div class="grid grid-cols-12 gap-x-5"> <div class="col-span-12 xl:col-span-7"> <div class="box"> <div class="box-header"> <div class="sm:flex justify-between"> <h5 class="box-title my-auto">Earnings Report</h5> <div class="inline-flex rounded-md shadow-sm"> <button type="button" class="ti-btn-group text-xs !border-0 py-2 px-3 ti-btn-soft-primary" > 1D </button> <button type="button" class="ti-btn-group text-xs !border-0 py-2 px-3 ti-btn-soft-primary" > 1W </button> <button type="button" class="ti-btn-group text-xs !border-0 py-2 px-3 ti-btn-soft-primary" > 1M </button> <button type="button" class="ti-btn-group text-xs !border-0 py-2 px-3 ti-btn-soft-primary" > 3M </button> <button type="button" class="ti-btn-group text-xs !border-0 py-2 px-3 ti-btn-soft-primary" > 6M </button> <button type="button" class="ti-btn-group text-xs !border-0 py-2 px-3 ti-btn-primary" > 1Y </button> </div> </div> </div> <div class="box-body"> <div id="earningsReport"> <apx-chart [series]="chartOptions.series" [chart]="chartOptions.chart" [yaxis]="chartOptions.yaxis" [xaxis]="chartOptions.xaxis" [labels]="chartOptions.labels" [stroke]="chartOptions.stroke" [title]="chartOptions.title" [dataLabels]="chartOptions.dataLabels" [fill]="chartOptions.fill" [tooltip]="chartOptions.tooltip" [plotOptions]="chartOptions.plotOptions" ></apx-chart> </div> </div> </div> </div> <div class="col-span-12 xl:col-span-5"> <div class="box"> <div class="box-header flex"> <h5 class="box-title my-auto">New Students</h5> <div class="block ltr:ml-auto rtl:mr-auto my-auto"> <button type="button" class="ti-btn m-0 rounded-sm p-1 px-3 !border border-gray-200 text-gray-400 hover:text-gray-500 hover:bg-gray-200 hover:border-gray-200 focus:ring-gray-200 dark:hover:bg-black/30 dark:border-white/10 dark:hover:border-white/20 dark:focus:ring-white/10 dark:focus:ring-offset-white/10" > View All </button> </div> </div> <div class="box-body p-0"> <div class="overflow-auto"> <table class="ti-custom-table ti-custom-table-head"> <thead> <tr> <th scope="col" class="text-center !p-[0.65rem]">Name</th> <th scope="col" class="!p-[0.65rem]">Courses</th> <th scope="col" class="!p-[0.65rem]">Completed</th> <th scope="col" class="!p-[0.65rem]">Actions</th> </tr> </thead> <tbody> <tr *ngFor="let student of Students"> <td class="!p-[0.65rem]"> <div class="flex items-center min-w-[200px]"> <div class="ltr:mr-2 rtl:ml-2 leading-none"> <img src="{{ student.src }}" alt="" class="avatar avatar-xs rounded-full bg-gray-100 dark:bg-black/20" /> </div> <div class="items-center"> <p class="text-sm mb-0 text-gray-800 dark:text-white"> {{ student.name }} </p> <span class="text-xs text-gray-500 dark:text-white/70">{{ student.mail }}</span> </div> </div> </td> <td class="!p-[0.65rem] text-center">{{ student.courses }}</td> <td class="!p-[0.65rem] text-center"> {{ student.completed }} </td> <td class="font-medium space-x-2 rtl:space-x-reverse !p-[0.65rem]" > <div class="hs-tooltip ti-main-tooltip"> <a href="javascript:void(0);" class="m-0 hs-tooltip-toggle relative w-8 h-8 ti-btn rounded-full p-0 transition-none focus:outline-none ti-btn-soft-primary" > <i class="ti ti-eye"></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > View </span> </a> </div> <div class="hs-tooltip ti-main-tooltip"> <a href="javascript:void(0);" class="customer-edit m-0 hs-tooltip-toggle relative w-8 h-8 ti-btn rounded-full p-0 transition-none focus:outline-none ti-btn-soft-secondary" > <i class="ti ti-pencil"></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Edit </span> </a> </div> <div class="hs-tooltip ti-main-tooltip"> <a href="javascript:void(0);" class="m-0 hs-tooltip-toggle relative w-8 h-8 ti-btn rounded-full p-0 transition-none focus:outline-none ti-btn-soft-danger" (click)="click(student.courses)" > <i class="ti ti-trash"></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Delete </span> </a> </div> </td> </tr> </tbody> </table> </div> </div> </div> </div> </div> <!-- End::row-2 --> <!-- Start::row-3 --> <div class="grid grid-cols-12 gap-x-5"> <div class="col-span-12 xxl:col-span-3"> <div class="box"> <div class="box-header"> <div class="flex justify-between"> <h5 class="box-title my-auto">Top Instructors</h5> <div class="block ltr:ml-auto rtl:mr-auto my-auto"> <button type="button" class="ti-btn m-0 rounded-sm p-1 px-3 !border border-gray-200 text-gray-400 hover:text-gray-500 hover:bg-gray-200 hover:border-gray-200 focus:ring-gray-200 dark:hover:bg-black/30 dark:border-white/10 dark:hover:border-white/20 dark:focus:ring-white/10 dark:focus:ring-offset-white/10" > View All </button> </div> </div> </div> <div class="box-body"> <ul class="flex flex-col"> <li class="p-0 mb-6 ti-list-group border-0 text-gray-800 dark:text-white" > <a href="javascript:void(0);" class="w-full"> <div class="flex items-center"> <div class="leading-none"> <img class="avatar avatar-sm rounded-full" src="./assets/img/users/2.jpg" alt="image" /> </div> <div class="flex-auto ltr:ml-2 rtl:mr-2"> <p class="text-sm font-semibold mb-0">John Hny</p> <p class="text-xs text-gray-500 dark:text-white/70 mb-0 !font-normal" > M.tech </p> </div> <div class="block text-end"> <span class="text-sm text-gray-800 dark:text-white font-semibold" >321 Courses</span > <p class="text-xs text-gray-500 dark:text-white/70 !font-normal" > Digital Marketing </p> </div> </div> </a> </li> <li class="p-0 mb-6 ti-list-group border-0 text-gray-800 dark:text-white" > <a href="javascript:void(0);" class="w-full"> <div class="flex items-center"> <div class="leading-none"> <img class="avatar avatar-sm rounded-full" src="./assets/img/users/12.jpg" alt="image" /> </div> <div class="flex-auto ltr:ml-2 rtl:mr-2"> <p class="text-sm font-semibold mb-0">Mortal Yun</p> <p class="text-xs text-gray-500 dark:text-white/70 mb-0 !font-normal" > Phd </p> </div> <div class="block text-end"> <span class="text-sm text-gray-800 dark:text-white font-semibold" >25 Courses</span > <p class="text-xs text-gray-500 dark:text-white/70 !font-normal" > Stocks & Trading </p> </div> </div> </a> </li> <li class="p-0 mb-6 ti-list-group border-0 text-gray-800 dark:text-white" > <a href="javascript:void(0);" class="w-full"> <div class="flex items-center"> <div class="leading-none"> <img class="avatar avatar-sm rounded-full" src="./assets/img/users/13.jpg" alt="image" /> </div> <div class="flex-auto ltr:ml-2 rtl:mr-2"> <p class="text-sm font-semibold mb-0">Trex Con</p> <p class="text-xs text-gray-500 dark:text-white/70 mb-0 !font-normal" > MBBS </p> </div> <div class="block text-end"> <span class="text-sm text-gray-800 dark:text-white font-semibold" >39 Courses</span > <p class="text-xs text-gray-500 dark:text-white/70 !font-normal" > Science </p> </div> </div> </a> </li> <li class="p-0 mb-6 ti-list-group border-0 text-gray-800 dark:text-white" > <a href="javascript:void(0);" class="w-full"> <div class="flex items-center"> <div class="leading-none"> <img class="avatar avatar-sm rounded-full" src="./assets/img/users/3.jpg" alt="image" /> </div> <div class="flex-auto ltr:ml-2 rtl:mr-2"> <p class="text-sm font-semibold mb-0">Saiu Sarah</p> <p class="text-xs text-gray-500 dark:text-white/70 mb-0 !font-normal" > Phd </p> </div> <div class="block text-end"> <span class="text-sm text-gray-800 dark:text-white font-semibold" >11 Courses</span > <p class="text-xs text-gray-500 dark:text-white/70 !font-normal" > Science </p> </div> </div> </a> </li> <li class="p-0 mb-6 ti-list-group border-0 text-gray-800 dark:text-white" > <a href="javascript:void(0);" class="w-full"> <div class="flex items-center"> <div class="leading-none"> <img class="avatar avatar-sm rounded-full" src="./assets/img/users/4.jpg" alt="image" /> </div> <div class="flex-auto ltr:ml-2 rtl:mr-2"> <p class="text-sm font-semibold mb-0">Ion Hao</p> <p class="text-xs text-gray-500 dark:text-white/70 mb-0 !font-normal" > M.tech </p> </div> <div class="block text-end"> <span class="text-sm text-gray-800 dark:text-white font-semibold" >124 Courses</span > <p class="text-xs text-gray-500 dark:text-white/70 !font-normal" > Web Development </p> </div> </div> </a> </li> <li class="p-0 mb-6 ti-list-group border-0 text-gray-800 dark:text-white" > <a href="javascript:void(0);" class="w-full"> <div class="flex items-center"> <div class="leading-none"> <img class="avatar avatar-sm rounded-full" src="./assets/img/users/14.jpg" alt="image" /> </div> <div class="flex-auto ltr:ml-2 rtl:mr-2"> <p class="text-sm font-semibold mb-0">Roman Killon</p> <p class="text-xs text-gray-500 dark:text-white/70 mb-0 !font-normal" > M.tech </p> </div> <div class="block text-end"> <span class="text-sm text-gray-800 dark:text-white font-semibold" >163 Courses</span > <p class="text-xs text-gray-500 dark:text-white/70 !font-normal" > Ui / Ux Designing </p> </div> </div> </a> </li> <li class="p-0 mb-6 ti-list-group border-0 text-gray-800 dark:text-white" > <a href="javascript:void(0);" class="w-full"> <div class="flex items-center"> <div class="leading-none"> <img class="avatar avatar-sm rounded-full" src="./assets/img/users/5.jpg" alt="image" /> </div> <div class="flex-auto ltr:ml-2 rtl:mr-2"> <p class="text-sm font-semibold mb-0">Suzika Stallone</p> <p class="text-xs text-gray-500 dark:text-white/70 mb-0 !font-normal" > Phd </p> </div> <div class="block text-end"> <span class="text-sm text-gray-800 dark:text-white font-semibold" >110 Courses</span > <p class="text-xs text-gray-500 dark:text-white/70 !font-normal" > Machine Leadning </p> </div> </div> </a> </li> <li class="p-0 mb-0 ti-list-group border-0 text-gray-800 dark:text-white" > <a href="javascript:void(0);" class="w-full"> <div class="flex items-center"> <div class="leading-none"> <img class="avatar avatar-sm rounded-full" src="./assets/img/users/15.jpg" alt="image" /> </div> <div class="flex-auto ltr:ml-2 rtl:mr-2"> <p class="text-sm font-semibold mb-0">Robert Lewis</p> <p class="text-xs text-gray-500 dark:text-white/70 mb-0 !font-normal" > Phd </p> </div> <div class="block text-end"> <span class="text-sm text-gray-800 dark:text-white font-semibold" >150 Courses</span > <p class="text-xs text-gray-500 dark:text-white/70 !font-normal" > Java Development </p> </div> </div> </a> </li> </ul> </div> </div> </div> <div class="col-span-12 xxl:col-span-6"> <div class="box"> <div class="box-header"> <div class="flex justify-between"> <h5 class="box-title my-auto">Popular Courses</h5> <div class="block ltr:ml-auto rtl:mr-auto my-auto"> <button type="button" class="ti-btn m-0 rounded-sm p-1 px-3 !border border-gray-200 text-gray-400 hover:text-gray-500 hover:bg-gray-200 hover:border-gray-200 focus:ring-gray-200 dark:hover:bg-black/30 dark:border-white/10 dark:hover:border-white/20 dark:focus:ring-white/10 dark:focus:ring-offset-white/10" > View All </button> </div> </div> </div> <div class="box-body"> <ul class="flex flex-col"> <li class="mb-6 !rounded-sm ti-list-group text-gray-800 dark:text-white w-full" > <div class="sm:flex items-center w-full"> <a href="javascript:void(0);" class="ltr:pr-4 rtl:pl-4 inline-block" > <img src="./assets/img/media/1.jpg" alt="img" class="avatar w-28 h-28 rounded-sm" /> </a> <div class="mt-4 sm:mt-0 flex-1 font-semibold"> <a href="javascript:void(0);" class="text-gray-500 dark:text-white/70 block mb-1 font-medium text-xs" title="Category" ><i class="ri-price-tag-3-line text-xs"></i> UI/UX</a > <a href="javascript:void(0);" class="block mb-3 text-sm font-semibold" >CSS Zero to Hero Class-11: What are Pseudo Classes In CSS? How To Write Pseudo Classes?</a > <div class="sm:flex justify-between items-center"> <div class="flex items-center" title="Instructor"> <a href="javascript:void(0);" class="ltr:pr-2 rtl:pl-2"> <img src="./assets/img/users/3.jpg" alt="img" class="avatar avatar-xs rounded-full" /> </a> <a href="javascript:void(0);" class="flex-1 text-gray-500 dark:text-white/70" >Natasha Sil</a > </div> <div class="min-w-fit text-xs text-gray-500 dark:text-white/70 inline-flex" > <span class="ltr:mr-2 rtl:ml-2 my-auto">2,189 Views</span> <span ><i class="ri-star-fill text-warning"></i > (4.2)</span > </div> </div> </div> </div> </li> <li class="mb-6 !rounded-sm ti-list-group text-gray-800 dark:text-white w-full" > <div class="sm:flex items-center w-full"> <a href="javascript:void(0);" class="ltr:pr-4 rtl:pl-4 inline-block" > <img src="./assets/img/media/4.jpg" alt="img" class="avatar w-28 h-28 rounded-sm" /> </a> <div class="mt-4 sm:mt-0 flex-1 font-semibold"> <a href="javascript:void(0);" class="text-gray-500 dark:text-white/70 block mb-1 font-medium text-xs" title="Category" ><i class="ri-price-tag-3-line text-xs"></i> Marketing</a > <a href="javascript:void(0);" class="block mb-3 text-sm font-semibold" >Marketing Class-27: What Is Marketing? How Marketing Helpful To Business? Basic Introduction To Marketing.</a > <div class="sm:flex justify-between items-center"> <div class="flex items-center" title="Instructor"> <a href="javascript:void(0);" class="ltr:pr-2 rtl:pl-2"> <img src="./assets/img/users/4.jpg" alt="img" class="avatar avatar-xs rounded-full" /> </a> <a href="javascript:void(0);" class="flex-1 text-gray-500 dark:text-white/70" >Mosh Nah</a > </div> <div class="min-w-fit text-xs text-gray-500 dark:text-white/70 inline-flex" > <span class="ltr:mr-2 rtl:ml-2 my-auto">1,116 Views</span> <span ><i class="ri-star-fill text-warning"></i > (4.5)</span > </div> </div> </div> </div> </li> <li class="mb-0 !rounded-sm ti-list-group text-gray-800 dark:text-white w-full" > <div class="sm:flex items-center w-full"> <a href="javascript:void(0);" class="ltr:pr-4 rtl:pl-4 inline-block" > <img src="./assets/img/media/23.jpg" alt="img" class="avatar w-28 h-28 rounded-sm" /> </a> <div class="mt-4 sm:mt-0 flex-1 font-semibold"> <a href="javascript:void(0);" class="text-gray-500 dark:text-white/70 block mb-1 font-medium text-xs" title="Category" ><i class="ri-price-tag-3-line text-xs"></i> Programming</a > <a href="javascript:void(0);" class="block mb-3 text-sm font-semibold" >Learn Python-16: What Is The Difference Between Shallow Copy and Deep Copy? Implementing Deep Copy In Python.</a > <div class="sm:flex justify-between items-center"> <div class="flex items-center" title="Instructor"> <a href="javascript:void(0);" class="ltr:pr-2 rtl:pl-2"> <img src="./assets/img/users/12.jpg" alt="img" class="avatar avatar-xs rounded-full" /> </a> <a href="javascript:void(0);" class="flex-1 text-gray-500 dark:text-white/70" >Telsko Navin</a > </div> <div class="min-w-fit text-xs text-gray-500 dark:text-white/70 inline-flex" > <span class="ltr:mr-2 rtl:ml-2 my-auto">2,125 Views</span> <span ><i class="ri-star-fill text-warning"></i > (4.8)</span > </div> </div> </div> </div> </li> </ul> </div> </div> </div> <div class="col-span-12 xxl:col-span-3"> <div class="box"> <div class="box-header"> <div class="flex justify-between"> <h5 class="box-title my-auto">Top Categories</h5> <div class="block ltr:ml-auto rtl:mr-auto my-auto"> <button type="button" class="ti-btn m-0 rounded-sm p-1 px-3 !border border-gray-200 text-gray-400 hover:text-gray-500 hover:bg-gray-200 hover:border-gray-200 focus:ring-gray-200 dark:hover:bg-black/30 dark:border-white/10 dark:hover:border-white/20 dark:focus:ring-white/10 dark:focus:ring-offset-white/10" > View All </button> </div> </div> </div> <div class="box-body"> <ul class="flex flex-col"> <li class="p-0 mb-6 ti-list-group border-0 text-gray-800 dark:text-white" > <a href="javascript:void(0);" class="w-full"> <div class="flex items-center"> <span class="avatar rounded-sm bg-primary/20 text-primary p-3" ><i class="ri-dashboard-line text-2xl leading-none"></i ></span> <div class="flex-auto ltr:ml-3 rtl:mr-3"> <p class="text-sm font-semibold mb-0">UI / UX Design</p> <p class="text-xs text-gray-500 dark:text-white/70 mb-0"> 10,000 + Courses </p> </div> <div> <span class="text-sm text-gray-800 dark:text-white font-semibold" >$199.99</span > </div> </div> </a> </li> <li class="p-0 mb-6 ti-list-group border-0 text-gray-800 dark:text-white" > <a href="javascript:void(0);" class="w-full"> <div class="flex items-center"> <span class="avatar rounded-sm bg-secondary/20 text-secondary p-3" ><i class="ri-advertisement-line text-2xl leading-none"></i ></span> <div class="flex-auto ltr:ml-3 rtl:mr-3"> <p class="text-sm font-semibold mb-0">Digital Marketing</p> <p class="text-xs text-gray-500 dark:text-white/70 mb-0"> 90 + Courses </p> </div> <div> <span class="text-sm text-gray-800 dark:text-white font-semibold" >$599.99</span > </div> </div> </a> </li> <li class="p-0 mb-6 ti-list-group border-0 text-gray-800 dark:text-white" > <a href="javascript:void(0);" class="w-full"> <div class="flex items-center"> <span class="avatar rounded-sm bg-success/20 text-success p-3" ><i class="ri-code-box-line text-2xl leading-none"></i ></span> <div class="flex-auto ltr:ml-3 rtl:mr-3"> <p class="text-sm font-semibold mb-0">Web Development</p> <p class="text-xs text-gray-500 dark:text-white/70 mb-0"> 250 + Courses </p> </div> <div> <span class="text-sm text-gray-800 dark:text-white font-semibold" >$299.99</span > </div> </div> </a> </li> <li class="p-0 mb-6 ti-list-group border-0 text-gray-800 dark:text-white" > <a href="javascript:void(0);" class="w-full"> <div class="flex items-center"> <span class="avatar rounded-sm bg-warning/20 text-warning p-3" ><i class="ri-bar-chart-2-line text-2xl leading-none"></i ></span> <div class="flex-auto ltr:ml-3 rtl:mr-3"> <p class="text-sm font-semibold mb-0">Stocks & Trading</p> <p class="text-xs text-gray-500 dark:text-white/70 mb-0"> 100 + Courses </p> </div> <div> <span class="text-sm text-gray-800 dark:text-white font-semibold" >$999.99</span > </div> </div> </a> </li> <li class="p-0 mb-6 ti-list-group border-0 text-gray-800 dark:text-white" > <a href="javascript:void(0);" class="w-full"> <div class="flex items-center"> <span class="avatar rounded-sm bg-danger/20 text-danger p-3" ><i class="ri-angularjs-line text-2xl leading-none"></i ></span> <div class="flex-auto ltr:ml-3 rtl:mr-3"> <p class="text-sm font-semibold mb-0">Angular Course</p> <p class="text-xs text-gray-500 dark:text-white/70 mb-0"> 300 + Courses </p> </div> <div> <span class="text-sm text-gray-800 dark:text-white font-semibold" >$399.99</span > </div> </div> </a> </li> <li class="p-0 mb-6 ti-list-group border-0 text-gray-800 dark:text-white" > <a href="javascript:void(0);" class="w-full"> <div class="flex items-center"> <span class="avatar rounded-sm bg-info/20 text-info p-3" ><i class="ri-reactjs-line text-2xl leading-none"></i ></span> <div class="flex-auto ltr:ml-3 rtl:mr-3"> <p class="text-sm font-semibold mb-0">React Course</p> <p class="text-xs text-gray-500 dark:text-white/70 mb-0"> 150 + Courses </p> </div> <div> <span class="text-sm text-gray-800 dark:text-white font-semibold" >$599.99</span > </div> </div> </a> </li> <li class="p-0 mb-0 ti-list-group border-0 text-gray-800 dark:text-white" > <a href="javascript:void(0);" class="w-full"> <div class="flex items-center"> <span class="avatar rounded-sm bg-pink-500/20 text-pink-500 p-3" ><i class="ri-database-2-line text-2xl leading-none"></i ></span> <div class="flex-auto ltr:ml-3 rtl:mr-3"> <p class="text-sm font-semibold mb-0">Full Stack Course</p> <p class="text-xs text-gray-500 dark:text-white/70 mb-0"> 500 + Courses </p> </div> <div> <span class="text-sm text-gray-800 dark:text-white font-semibold" >$199.99</span > </div> </div> </a> </li> </ul> </div> </div> </div> </div> <!-- End::row-3 --> <!-- Start::row-4 --> <div class="grid grid-cols-12 gap-x-5"> <div class="col-span-12"> <div class="box"> <div class="box-header"> <div class="flex"> <h5 class="box-title my-auto">Course List</h5> <div class="hs-dropdown ti-dropdown block ltr:ml-auto rtl:mr-auto my-auto" > <button type="button" class="hs-dropdown-toggle ti-dropdown-toggle rounded-sm p-1 px-3 !border border-gray-200 text-gray-400 hover:text-gray-500 hover:bg-gray-200 hover:border-gray-200 focus:ring-gray-200 dark:hover:bg-black/30 dark:border-white/10 dark:hover:border-white/20 dark:focus:ring-white/10 dark:focus:ring-offset-white/10" > View All <i class="ti ti-chevron-down"></i> </button> <div class="hs-dropdown-menu ti-dropdown-menu hidden"> <a class="ti-dropdown-item" href="javascript:void(0)">Download</a> <a class="ti-dropdown-item" href="javascript:void(0)">Import</a> <a class="ti-dropdown-item" href="javascript:void(0)">Export</a> </div> </div> </div> </div> <div class="box-body"> <div class="table-bordered rounded-sm ti-custom-table-head overflow-auto" > <table class="ti-custom-table ti-custom-table-head whitespace-nowrap"> <thead class="bg-gray-50 dark:bg-black/20"> <tr class=""> <th scope="col" class="dark:text-white/80">S.no</th> <th scope="col" class="dark:text-white/80">Course</th> <th scope="col" class="dark:text-white/80">Category</th> <th scope="col" class="dark:text-white/80">Classes</th> <th scope="col" class="dark:text-white/80">Last Updated</th> <th scope="col" class="dark:text-white/80">Instructor</th> <th scope="col" class="dark:text-white/80">Students</th> <th scope="col" class="dark:text-white/80">Actions</th> </tr> </thead> <tbody class=""> <tr class="" *ngFor="let course of Courses"> <td>{{ course.id }}</td> <td> <div class="flex space-x-3 rtl:space-x-reverse text-start"> <img class="avatar avatar-sm rounded-sm" src="{{ course.src }}" alt="Image Description" /> <div class="block my-auto"> <p class="block text-sm font-semibold my-auto text-gray-800 dark:text-white min-w-[400px]" > {{ course.text }} </p> </div> </div> </td> <td>{{ course.category }}</td> <td>{{ course.classes }}</td> <td>{{ course.date }}</td> <td>{{ course.instructor }}</td> <td>{{ course.students }}</td> <td class="font-medium space-x-2 rtl:space-x-reverse"> <div class="hs-tooltip ti-main-tooltip"> <a href="javascript:void(0);" class="m-0 hs-tooltip-toggle relative w-8 h-8 ti-btn rounded-full p-0 transition-none focus:outline-none ti-btn-soft-primary" > <i class="ti ti-eye"></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700 hidden" role="tooltip" data-popper-placement="top" style=" position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1686px, -243px); " > View </span> </a> </div> <div class="hs-tooltip ti-main-tooltip"> <a href="javascript:void(0);" class="m-0 hs-tooltip-toggle relative w-8 h-8 ti-btn rounded-full p-0 transition-none focus:outline-none ti-btn-soft-secondary" > <i class="ti ti-pencil"></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700 hidden" role="tooltip" data-popper-placement="top" style=" position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1686px, -243px); " > Edit </span> </a> </div> <div class="hs-tooltip ti-main-tooltip"> <a href="javascript:void(0);" class="m-0 hs-tooltip-toggle relative w-8 h-8 ti-btn rounded-full p-0 transition-none focus:outline-none ti-btn-soft-danger" (click)="click1(course.id)" > <i class="ti ti-trash"></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Delete </span> </a> </div> </td> </tr> </tbody> </table> </div> </div> <div class="box-footer"> <div class="sm:flex items-center"> <div class=""> showing 5 Entries <i class="ri-arrow-right-line ml-2 font-semibold"></i> </div> <div class="ltr:ml-auto rtl:mr-auto"> <nav class="flex justify-center items-center space-x-2 rtl:space-x-reverse" > <a class="text-gray-500 hover:text-primary e py-1 px-2 leading-none inline-flex items-center gap-2 rounded-sm" href="javascript:void(0);" > <span aria-hidden="true">Prev</span> <span class="sr-only">Previous</span> </a> <a class="bg-primary text-white py-1 px-2 leading-none inline-flex items-center text-sm font-medium rounded-sm" href="javascript:void(0);" aria-current="page" >1</a > <a class="text-gray-500 hover:text-primary e py-1 px-2 leading-none inline-flex items-center text-sm font-medium rounded-sm" href="javascript:void(0);" >2</a > <a class="text-gray-500 hover:text-primary e py-1 px-2 leading-none inline-flex items-center text-sm font-medium rounded-sm" href="javascript:void(0);" >3</a > <a class="text-gray-500 hover:text-primary e py-1 px-2 leading-none inline-flex items-center gap-2 rounded-sm" href="javascript:void(0);" > <span class="sr-only">Next</span> <span aria-hidden="true">Next</span> </a> </nav> </div> </div> </div> </div> </div> </div> <!-- End::row-4 -->