<!doctype html>
<html lang="en">
    <head>
        <?php $title = "Kanban Board"; include('./partials/title-meta.php'); ?> <?php include('./partials/head-css.php'); ?>
    </head>

    <body>
        <!-- Begin page -->
        <div class="wrapper">
            <?php include('./partials/topbar.php'); ?> <?php include('./partials/sidenav.php'); ?>

            <!-- ============================================================== -->
            <!-- Start Main Content -->
            <!-- ============================================================== -->

            <div class="content-page">
                <div class="container-fluid">
                    <?php $subtitle = "Apps"; $title = "Kanban Board"; include('./partials/page-title.php'); ?>

                    <div class="outlook-box kanban-app">
                        <div class="card h-100 mb-0 flex-grow-1">
                            <div class="card-header border-light align-items-center gap-2">
                                <!-- Search Bar -->
                                <div class="app-search">
                                    <input type="search" class="form-control" placeholder="Search tasks..." />
                                    <i class="ti ti-search app-search-icon text-muted"></i>
                                </div>

                                <!-- Filter Controls -->
                                <div class="d-flex flex-wrap align-items-center gap-2">
                                    <!-- Department Filter -->
                                    <div class="app-search">
                                        <select class="form-select form-control">
                                            <option selected>Department</option>
                                            <option value="Design">Design</option>
                                            <option value="Development">Development</option>
                                            <option value="UI/UX">UI/UX</option>
                                            <option value="Marketing">Marketing</option>
                                            <option value="Finance">Finance</option>
                                            <option value="QA">QA</option>
                                        </select>
                                        <i class="ti ti-briefcase app-search-icon text-muted"></i>
                                    </div>

                                    <!-- Due Date Filter -->
                                    <div class="app-search">
                                        <select class="form-select form-control">
                                            <option selected>Due Date</option>
                                            <option value="Today">Today</option>
                                            <option value="This Week">This Week</option>
                                            <option value="This Month">This Month</option>
                                        </select>
                                        <i class="ti ti-calendar-clock app-search-icon text-muted"></i>
                                    </div>
                                </div>

                                <!-- Apply Filter Button -->
                                <button type="submit" class="btn btn-secondary ms-lg-auto">
                                    <i class="ti ti-plus me-1"></i>
                                    Add New Card
                                </button>
                            </div>

                            <div class="card-body p-0">
                                <div class="kanban-content bg-light bg-opacity-40">
                                    <!-- TODO Data-->
                                    <div class="kanban-board">
                                        <div class="kanban-item py-2 px-3 d-flex align-items-center">
                                            <h5 class="m-0">To Do (6)</h5>
                                            <a href="#!" class="ms-auto btn btn-sm btn-icon rounded-circle btn-primary">
                                                <i class="ti ti-plus"></i>
                                            </a>
                                        </div>
                                        <div class="kanban-board-group px-3" data-simplebar data-simplebar-md>
                                            <ul data-plugins="sortable">
                                                <li class="kanban-item">
                                                    <div class="card shadow border-light mb-2">
                                                        <div class="card-body">
                                                            <div class="d-flex align-items-center mb-2">
                                                                <span class="badge p-1 badge-soft-success">
                                                                    <i class="ti ti-circle-filled"></i>
                                                                    Design
                                                                </span>
                                                                <div class="ms-auto">
                                                                    <div class="dropdown">
                                                                        <a href="#" class="btn btn-icon btn-sm btn-ghost-light text-muted" data-bs-toggle="dropdown">
                                                                            <i class="ti ti-dots-vertical fs-xl"></i>
                                                                        </a>
                                                                        <ul class="dropdown-menu dropdown-menu-end">
                                                                            <li>
                                                                                <a class="dropdown-item" href="#">
                                                                                    <i class="ti ti-share me-2"></i>
                                                                                    Share
                                                                                </a>
                                                                            </li>
                                                                            <li>
                                                                                <a class="dropdown-item" href="#">
                                                                                    <i class="ti ti-edit me-2"></i>
                                                                                    Edit
                                                                                </a>
                                                                            </li>
                                                                            <li>
                                                                                <a class="dropdown-item" href="#">
                                                                                    <i class="ti ti-ban me-2"></i>
                                                                                    Block
                                                                                </a>
                                                                            </li>
                                                                            <li>
                                                                                <a class="dropdown-item text-danger" href="#">
                                                                                    <i class="ti ti-trash me-2"></i>
                                                                                    Delete
                                                                                </a>
                                                                            </li>
                                                                        </ul>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <h5 class="mb-3">
                                                                <a href="#!" class="link-reset">AI Analytics Dashboard</a>
                                                            </h5>

                                                            <div class="d-flex justify-content-between">
                                                                <div class="avatar-group avatar-group-xs">
                                                                    <div class="avatar">
                                                                        <img src="assets/images/users/user-2.jpg" alt="" class="rounded-circle avatar-xs" />
                                                                    </div>
                                                                    <div class="avatar">
                                                                        <img src="assets/images/users/user-3.jpg" alt="" class="rounded-circle avatar-xs" />
                                                                    </div>
                                                                    <div class="avatar">
                                                                        <img src="assets/images/users/user-5.jpg" alt="" class="rounded-circle avatar-xs" />
                                                                    </div>
                                                                    <div class="avatar">
                                                                        <img src="assets/images/users/user-1.jpg" alt="" class="rounded-circle avatar-xs" />
                                                                    </div>
                                                                </div>
                                                                <div class="d-flex align-items-center gap-2">
                                                                    <i class="ti ti-calendar-clock text-muted fs-lg"></i>
                                                                    <h5 class="fs-base mb-0 fw-medium">25 May, 2025</h5>
                                                                </div>
                                                            </div>

                                                            <div class="mt-3">
                                                                <div class="d-flex align-items-center justify-content-between mb-2">
                                                                    <p class="mb-0 text-muted fw-semibold fs-xxs">Progress</p>
                                                                    <p class="fw-semibold mb-0">65%</p>
                                                                </div>
                                                                <div class="progress" style="height: 5px">
                                                                    <div class="progress-bar bg-success" style="width: 65%"></div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!-- end card-->
                                                </li>

                                                <li class="kanban-item">
                                                    <div class="card shadow border-light mb-2">
                                                        <div class="card-body">
                                                            <div class="d-flex align-items-center mb-2">
                                                                <span class="badge p-1 badge-soft-warning">
                                                                    <i class="ti ti-circle-filled"></i>
                                                                    Development
                                                                </span>
                                                                <div class="ms-auto">
                                                                    <div class="dropdown">
                                                                        <a href="#" class="btn btn-icon btn-sm btn-ghost-light text-muted" data-bs-toggle="dropdown">
                                                                            <i class="ti ti-dots-vertical fs-xl"></i>
                                                                        </a>
                                                                        <ul class="dropdown-menu dropdown-menu-end">
                                                                            <li>
                                                                                <a class="dropdown-item" href="#">
                                                                                    <i class="ti ti-share me-2"></i>
                                                                                    Share
                                                                                </a>
                                                                            </li>
                                                                            <li>
                                                                                <a class="dropdown-item" href="#">
                                                                                    <i class="ti ti-edit me-2"></i>
                                                                                    Edit
                                                                                </a>
                                                                            </li>
                                                                            <li>
                                                                                <a class="dropdown-item" href="#">
                                                                                    <i class="ti ti-ban me-2"></i>
                                                                                    Block
                                                                                </a>
                                                                            </li>
                                                                            <li>
                                                                                <a class="dropdown-item text-danger" href="#">
                                                                                    <i class="ti ti-trash me-2"></i>
                                                                                    Delete
                                                                                </a>
                                                                            </li>
                                                                        </ul>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <h5 class="mb-3">
                                                                <a href="#!" class="link-reset">Marketing Landing Page Redesign</a>
                                                            </h5>

                                                            <div class="mb-3">
                                                                <img src="assets/images/kanban/img-1.png" alt="" class="rounded img-fluid" />
                                                            </div>

                                                            <div class="d-flex justify-content-between">
                                                                <div class="avatar-group avatar-group-xs">
                                                                    <div class="avatar">
                                                                        <img src="assets/images/users/user-6.jpg" alt="" class="rounded-circle avatar-xs" />
                                                                    </div>
                                                                    <div class="avatar">
                                                                        <img src="assets/images/users/user-4.jpg" alt="" class="rounded-circle avatar-xs" />
                                                                    </div>
                                                                    <div class="avatar">
                                                                        <img src="assets/images/users/user-8.jpg" alt="" class="rounded-circle avatar-xs" />
                                                                    </div>
                                                                </div>
                                                                <div class="d-flex align-items-center gap-2">
                                                                    <i class="ti ti-calendar-clock text-muted fs-lg"></i>
                                                                    <h5 class="fs-base mb-0 fw-medium">10 Jun, 2025</h5>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>

                                                <li class="kanban-item">
                                                    <div class="card shadow border-light mb-2">
                                                        <div class="card-body">
                                                            <div class="d-flex align-items-center mb-2">
                                                                <span class="badge p-1 badge-soft-info">
                                                                    <i class="ti ti-circle-filled"></i>
                                                                    UI/UX
                                                                </span>
                                                                <div class="ms-auto">
                                                                    <div class="dropdown">
                                                                        <a href="#" class="btn btn-icon btn-sm btn-ghost-light text-muted" data-bs-toggle="dropdown">
                                                                            <i class="ti ti-dots-vertical fs-xl"></i>
                                                                        </a>
                                                                        <ul class="dropdown-menu dropdown-menu-end">
                                                                            <li>
                                                                                <a class="dropdown-item" href="#">
                                                                                    <i class="ti ti-share me-2"></i>
                                                                                    Share
                                                                                </a>
                                                                            </li>
                                                                            <li>
                                                                                <a class="dropdown-item" href="#">
                                                                                    <i class="ti ti-edit me-2"></i>
                                                                                    Edit
                                                                                </a>
                                                                            </li>
                                                                            <li>
                                                                                <a class="dropdown-item" href="#">
                                                                                    <i class="ti ti-ban me-2"></i>
                                                                                    Block
                                                                                </a>
                                                                            </li>
                                                                            <li>
                                                                                <a class="dropdown-item text-danger" href="#">
                                                                                    <i class="ti ti-trash me-2"></i>
                                                                                    Delete
                                                                                </a>
                                                                            </li>
                                                                        </ul>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <h5 class="mb-3">
                                                                <a href="#!" class="link-reset">E-Commerce Website Redesign</a>
                                                            </h5>

                                                            <div class="d-flex justify-content-between">
                                                                <div class="avatar-group avatar-group-xs">
                                                                    <div class="avatar">
                                                                        <img src="assets/images/users/user-4.jpg" alt="" class="rounded-circle avatar-xs" />
                                                                    </div>
                                                                    <div class="avatar">
                                                                        <img src="assets/images/users/user-6.jpg" alt="" class="rounded-circle avatar-xs" />
                                                                    </div>
                                                                    <div class="avatar">
                                                                        <img src="assets/images/users/user-7.jpg" alt="" class="rounded-circle avatar-xs" />
                                                                    </div>
                                                                    <div class="avatar">
                                                                        <img src="assets/images/users/user-8.jpg" alt="" class="rounded-circle avatar-xs" />
                                                                    </div>
                                                                </div>
                                                                <div class="d-flex align-items-center gap-2">
                                                                    <i class="ti ti-calendar-clock text-muted fs-lg"></i>
                                                                    <h5 class="fs-base mb-0 fw-medium">28 May, 2025</h5>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!-- end card-->
                                                </li>
                                                <!-- end kanban item-->

                                                <li class="kanban-item">
                                                    <div class="card shadow border-light mb-2">
                                                        <div class="card-body">
                                                            <div class="d-flex align-items-center mb-2">
                                                                <span class="badge p-1 badge-soft-warning">
                                                                    <i class="ti ti-circle-filled"></i>
                                                                    App Development
                                                                </span>
                                                                <div class="ms-auto">
                                                                    <div class="dropdown">
                                                                        <a href="#" class="btn btn-icon btn-sm btn-ghost-light text-muted" data-bs-toggle="dropdown">
                                                                            <i class="ti ti-dots-vertical fs-xl"></i>
                                                                        </a>
                                                                        <ul class="dropdown-menu dropdown-menu-end">
                                                                            <li>
                                                                                <a class="dropdown-item" href="#">
                                                                                    <i class="ti ti-share me-2"></i>
                                                                                    Share
                                                                                </a>
                                                                            </li>
                                                                            <li>
                                                                                <a class="dropdown-item" href="#">
                                                                                    <i class="ti ti-edit me-2"></i>
                                                                                    Edit
                                                                                </a>
                                                                            </li>
                                                                            <li>
                                                                                <a class="dropdown-item" href="#">
                                                                                    <i class="ti ti-ban me-2"></i>
                                                                                    Block
                                                                                </a>
                                                                            </li>
                                                                            <li>
                                                                                <a class="dropdown-item text-danger" href="#">
                                                                                    <i class="ti ti-trash me-2"></i>
                                                                                    Delete
                                                                                </a>
                                                                            </li>
                                                                        </ul>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <h5 class="mb-3">
                                                                <a href="#!" class="link-reset">Mobile App Redesign</a>
                                                            </h5>

                                                            <div class="d-flex justify-content-between">
                                                                <div class="avatar-group avatar-group-xs">
                                                                    <div class="avatar">
                                                                        <img src="assets/images/users/user-1.jpg" alt="" class="rounded-circle avatar-xs" />
                                                                    </div>
                                                                    <div class="avatar">
                                                                        <img src="assets/images/users/user-2.jpg" alt="" class="rounded-circle avatar-xs" />
                                                                    </div>
                                                                    <div class="avatar">
                                                                        <img src="assets/images/users/user-3.jpg" alt="" class="rounded-circle avatar-xs" />
                                                                    </div>
                                                                </div>
                                                                <div class="d-flex align-items-center gap-2">
                                                                    <i class="ti ti-calendar-clock text-muted fs-lg"></i>
                                                                    <h5 class="fs-base mb-0 fw-medium">30 May, 2025</h5>
                                                                </div>
                                                            </div>

                                                            <div class="mt-3">
                                                                <div class="d-flex align-items-center justify-content-between mb-2">
                                                                    <p class="mb-0 text-muted fw-semibold fs-xxs">Progress</p>
                                                                    <p class="fw-semibold mb-0">80%</p>
                                                                </div>
                                                                <div class="progress" style="height: 5px">
                                                                    <div class="progress-bar bg-warning" style="width: 80%"></div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!-- end card-->
                                                </li>
                                                <!-- end kanban item-->

                                                <li class="kanban-item">
                                                    <div class="card shadow border-light mb-2">
                                                        <div class="card-body">
                                                            <div class="d-flex align-items-center mb-2">
                                                                <span class="badge p-1 badge-soft-purple">
                                                                    <i class="ti ti-circle-filled"></i>
                                                                    Marketing
                                                                </span>
                                                                <div class="ms-auto">
                                                                    <div class="dropdown">
                                                                        <a href="#" class="btn btn-icon btn-sm btn-ghost-light text-muted" data-bs-toggle="dropdown">
                                                                            <i class="ti ti-dots-vertical fs-xl"></i>
                                                                        </a>
                                                                        <ul class="dropdown-menu dropdown-menu-end">
                                                                            <li>
                                                                                <a class="dropdown-item" href="#">
                                                                                    <i class="ti ti-share me-2"></i>
                                                                                    Share
                                                                                </a>
                                                                            </li>
                                                                            <li>
                                                                                <a class="dropdown-item" href="#">
                                                                                    <i class="ti ti-edit me-2"></i>
                                                                                    Edit
                                                                                </a>
                                                                            </li>
                                                                            <li>
                                                                                <a class="dropdown-item" href="#">
                                                                                    <i class="ti ti-ban me-2"></i>
                                                                                    Block
                                                                                </a>
                                                                            </li>
                                                                            <li>
                                                                                <a class="dropdown-item text-danger" href="#">
                                                                                    <i class="ti ti-trash me-2"></i>
                                                                                    Delete
                                                                                </a>
                                                                            </li>
                                                                        </ul>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <h5 class="mb-3">
                                                                <a href="#!" class="link-reset">CRM System Upgrade</a>
                                                            </h5>

                                                            <div class="mb-3">
                                                                <img src="assets/images/kanban/img-2.png" alt="" class="rounded img-fluid" />
                                                            </div>

                                                            <div class="d-flex justify-content-between">
                                                                <div class="avatar-group avatar-group-xs">
                                                                    <div class="avatar">
                                                                        <img src="assets/images/users/user-4.jpg" alt="" class="rounded-circle avatar-xs" />
                                                                    </div>
                                                                </div>
                                                                <div class="d-flex align-items-center gap-2">
                                                                    <i class="ti ti-calendar-clock text-muted fs-lg"></i>
                                                                    <h5 class="fs-base mb-0 fw-medium">30 May, 2025</h5>
                                                                </div>
                                                            </div>

                                                            <div class="mt-3">
                                                                <div class="d-flex align-items-center justify-content-between mb-2">
                                                                    <p class="mb-0 text-muted fw-semibold fs-xxs">Progress</p>
                                                                    <p class="fw-semibold mb-0">45%</p>
                                                                </div>
                                                                <div class="progress" style="height: 5px">
                                                                    <div class="progress-bar bg-primary" style="width: 45%"></div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!-- end card-->
                                                </li>
                                                <!-- end kanban item-->
                                            </ul>
                                        </div>
                                    </div>
                                    <!-- end TODO Data-->

                                    <!-- IN Progress Data-->
                                    <div class="kanban-board">
                                        <div class="py-2 px-3 d-flex align-items-center">
                                            <h5 class="m-0">In Progress (5)</h5>
                                            <a href="#!" class="ms-auto btn btn-sm btn-icon rounded-circle btn-primary">
                                                <i class="ti ti-plus"></i>
                                            </a>
                                        </div>
                                        <div class="kanban-board-group px-3" data-simplebar data-simplebar-md>
                                            <ul data-plugins="sortable">
                                                <li class="kanban-item">
                                                    <div class="card shadow border-light mb-2">
                                                        <div class="card-body">
                                                            <div class="d-flex align-items-center mb-2">
                                                                <span class="badge p-1 badge-soft-info">
                                                                    <i class="ti ti-circle-filled"></i>
                                                                    Testing
                                                                </span>
                                                                <div class="ms-auto">
                                                                    <div class="dropdown">
                                                                        <a href="#" class="btn btn-icon btn-sm btn-ghost-light text-muted" data-bs-toggle="dropdown">
                                                                            <i class="ti ti-dots-vertical fs-xl"></i>
                                                                        </a>
                                                                        <ul class="dropdown-menu dropdown-menu-end">
                                                                            <li>
                                                                                <a class="dropdown-item" href="#">
                                                                                    <i class="ti ti-share me-2"></i>
                                                                                    Share
                                                                                </a>
                                                                            </li>
                                                                            <li>
                                                                                <a class="dropdown-item" href="#">
                                                                                    <i class="ti ti-edit me-2"></i>
                                                                                    Edit
                                                                                </a>
                                                                            </li>
                                                                            <li>
                                                                                <a class="dropdown-item" href="#">
                                                                                    <i class="ti ti-ban me-2"></i>
                                                                                    Block
                                                                                </a>
                                                                            </li>
                                                                            <li>
                                                                                <a class="dropdown-item text-danger" href="#">
                                                                                    <i class="ti ti-trash me-2"></i>
                                                                                    Delete
                                                                                </a>
                                                                            </li>
                                                                        </ul>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <h5 class="mb-3">
                                                                <a href="#!" class="link-reset">E-commerce Website QA Testing</a>
                                                            </h5>

                                                            <div class="d-flex justify-content-between">
                                                                <div class="avatar-group avatar-group-xs">
                                                                    <div class="avatar">
                                                                        <img src="assets/images/users/user-3.jpg" alt="" class="rounded-circle avatar-xs" />
                                                                    </div>
                                                                    <div class="avatar">
                                                                        <img src="assets/images/users/user-7.jpg" alt="" class="rounded-circle avatar-xs" />
                                                                    </div>
                                                                    <div class="avatar">
                                                                        <img src="assets/images/users/user-9.jpg" alt="" class="rounded-circle avatar-xs" />
                                                                    </div>
                                                                </div>
                                                                <div class="d-flex align-items-center gap-2">
                                                                    <i class="ti ti-calendar-clock text-muted fs-lg"></i>
                                                                    <h5 class="fs-base mb-0 fw-medium">18 Jun, 2025</h5>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!-- end card-->
                                                </li>
                                                <!-- end kanban item-->

                                                <li class="kanban-item">
                                                    <div class="card shadow border-light mb-2">
                                                        <div class="card-body">
                                                            <div class="d-flex align-items-center mb-2">
                                                                <span class="badge p-1 badge-soft-info">
                                                                    <i class="ti ti-circle-filled"></i>
                                                                    UI/UX
                                                                </span>
                                                                <div class="ms-auto">
                                                                    <div class="dropdown">
                                                                        <a href="#" class="btn btn-icon btn-sm btn-ghost-light text-muted" data-bs-toggle="dropdown">
                                                                            <i class="ti ti-dots-vertical fs-xl"></i>
                                                                        </a>
                                                                        <ul class="dropdown-menu dropdown-menu-end">
                                                                            <li>
                                                                                <a class="dropdown-item" href="#">
                                                                                    <i class="ti ti-share me-2"></i>
                                                                                    Share
                                                                                </a>
                                                                            </li>
                                                                            <li>
                                                                                <a class="dropdown-item" href="#">
                                                                                    <i class="ti ti-edit me-2"></i>
                                                                                    Edit
                                                                                </a>
                                                                            </li>
                                                                            <li>
                                                                                <a class="dropdown-item" href="#">
                                                                                    <i class="ti ti-ban me-2"></i>
                                                                                    Block
                                                                                </a>
                                                                            </li>
                                                                            <li>
                                                                                <a class="dropdown-item text-danger" href="#">
                                                                                    <i class="ti ti-trash me-2"></i>
                                                                                    Delete
                                                                                </a>
                                                                            </li>
                                                                        </ul>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <h5 class="mb-3">
                                                                <a href="#!" class="link-reset">Mobile App Redesign</a>
                                                            </h5>

                                                            <div class="d-flex justify-content-between">
                                                                <div class="avatar-group avatar-group-xs">
                                                                    <div class="avatar">
                                                                        <img src="assets/images/users/user-5.jpg" alt="" class="rounded-circle avatar-xs" />
                                                                    </div>
                                                                    <div class="avatar">
                                                                        <img src="assets/images/users/user-2.jpg" alt="" class="rounded-circle avatar-xs" />
                                                                    </div>
                                                                    <div class="avatar">
                                                                        <img src="assets/images/users/user-3.jpg" alt="" class="rounded-circle avatar-xs" />
                                                                    </div>
                                                                    <div class="avatar">
                                                                        <img src="assets/images/users/user-9.jpg" alt="" class="rounded-circle avatar-xs" />
                                                                    </div>
                                                                </div>
                                                                <div class="d-flex align-items-center gap-2">
                                                                    <i class="ti ti-calendar-clock text-muted fs-lg"></i>
                                                                    <h5 class="fs-base mb-0 fw-medium">10 Jun, 2025</h5>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!-- end card-->
                                                </li>
                                                <!-- end kanban item-->

                                                <li class="kanban-item">
                                                    <div class="card shadow border-light mb-2">
                                                        <div class="card-body">
                                                            <div class="d-flex align-items-center mb-2">
                                                                <span class="badge p-1 badge-soft-success">
                                                                    <i class="ti ti-circle-filled"></i>
                                                                    UI/UX Design
                                                                </span>
                                                                <div class="ms-auto">
                                                                    <div class="dropdown">
                                                                        <a href="#" class="btn btn-icon btn-sm btn-ghost-light text-muted" data-bs-toggle="dropdown">
                                                                            <i class="ti ti-dots-vertical fs-xl"></i>
                                                                        </a>
                                                                        <ul class="dropdown-menu dropdown-menu-end">
                                                                            <li>
                                                                                <a class="dropdown-item" href="#">
                                                                                    <i class="ti ti-share me-2"></i>
                                                                                    Share
                                                                                </a>
                                                                            </li>
                                                                            <li>
                                                                                <a class="dropdown-item" href="#">
                                                                                    <i class="ti ti-edit me-2"></i>
                                                                                    Edit
                                                                                </a>
                                                                            </li>
                                                                            <li>
                                                                                <a class="dropdown-item" href="#">
                                                                                    <i class="ti ti-ban me-2"></i>
                                                                                    Block
                                                                                </a>
                                                                            </li>
                                                                            <li>
                                                                                <a class="dropdown-item text-danger" href="#">
                                                                                    <i class="ti ti-trash me-2"></i>
                                                                                    Delete
                                                                                </a>
                                                                            </li>
                                                                        </ul>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <h5 class="mb-3">
                                                                <a href="#!" class="link-reset">Website User Experience Overhaul</a>
                                                            </h5>

                                                            <div class="d-flex justify-content-between">
                                                                <div class="avatar-group avatar-group-xs">
                                                                    <div class="avatar">
                                                                        <img src="assets/images/users/user-4.jpg" alt="" class="rounded-circle avatar-xs" />
                                                                    </div>
                                                                    <div class="avatar">
                                                                        <img src="assets/images/users/user-5.jpg" alt="" class="rounded-circle avatar-xs" />
                                                                    </div>
                                                                    <div class="avatar">
                                                                        <img src="assets/images/users/user-6.jpg" alt="" class="rounded-circle avatar-xs" />
                                                                    </div>
                                                                </div>
                                                                <div class="d-flex align-items-center gap-2">
                                                                    <i class="ti ti-calendar-clock text-muted fs-lg"></i>
                                                                    <h5 class="fs-base mb-0 fw-medium">15 June, 2025</h5>
                                                                </div>
                                                            </div>

                                                            <div class="mt-3">
                                                                <div class="d-flex align-items-center justify-content-between mb-2">
                                                                    <p class="mb-0 text-muted fw-semibold fs-xxs">Progress</p>
                                                                    <p class="fw-semibold mb-0">55%</p>
                                                                </div>
                                                                <div class="progress" style="height: 5px">
                                                                    <div class="progress-bar bg-success" style="width: 55%"></div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!-- end card-->
                                                </li>
                                                <!-- end kanban item-->

                                                <li class="kanban-item">
                                                    <div class="card shadow border-light mb-2">
                                                        <div class="card-body">
                                                            <div class="d-flex align-items-center mb-2">
                                                                <span class="badge p-1 badge-soft-danger">
                                                                    <i class="ti ti-circle-filled"></i>
                                                                    Marketing
                                                                </span>
                                                                <div class="ms-auto">
                                                                    <div class="dropdown">
                                                                        <a href="#" class="btn btn-icon btn-sm btn-ghost-light text-muted" data-bs-toggle="dropdown">
                                                                            <i class="ti ti-dots-vertical fs-xl"></i>
                                                                        </a>
                                                                        <ul class="dropdown-menu dropdown-menu-end">
                                                                            <li>
                                                                                <a class="dropdown-item" href="#">
                                                                                    <i class="ti ti-share me-2"></i>
                                                                                    Share
                                                                                </a>
                                                                            </li>
                                                                            <li>
                                                                                <a class="dropdown-item" href="#">
                                                                                    <i class="ti ti-edit me-2"></i>
                                                                                    Edit
                                                                                </a>
                                                                            </li>
                                                                            <li>
                                                                                <a class="dropdown-item" href="#">
                                                                                    <i class="ti ti-ban me-2"></i>
                                                                                    Block
                                                                                </a>
                                                                            </li>
                                                                            <li>
                                                                                <a class="dropdown-item text-danger" href="#">
                                                                                    <i class="ti ti-trash me-2"></i>
                                                                                    Delete
                                                                                </a>
                                                                            </li>
                                                                        </ul>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <h5 class="mb-3 lh-base">
                                                                <a href="#!" class="link-reset">Customer Engagement Platform Development</a>
                                                            </h5>

                                                            <div class="d-flex justify-content-between">
                                                                <div class="avatar-group avatar-group-xs">
                                                                    <div class="avatar">
                                                                        <img src="assets/images/users/user-5.jpg" alt="" class="rounded-circle avatar-xs" />
                                                                    </div>
                                                                    <div class="avatar">
                                                                        <img src="assets/images/users/user-6.jpg" alt="" class="rounded-circle avatar-xs" />
                                                                    </div>
                                                                </div>
                                                                <div class="d-flex align-items-center gap-2">
                                                                    <i class="ti ti-calendar-clock text-muted fs-lg"></i>
                                                                    <h5 class="fs-base mb-0 fw-medium">10 June, 2025</h5>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!-- end card-->
                                                </li>
                                                <!-- end kanban item-->
                                            </ul>
                                        </div>
                                    </div>
                                    <!-- end IN Progress Data-->

                                    <!-- In Review Data-->
                                    <div class="kanban-board">
                                        <div class="kanban-item py-2 px-3 d-flex align-items-center">
                                            <h5 class="m-0">In Review (3)</h5>
                                            <a href="#!" class="ms-auto btn btn-sm btn-icon rounded-circle btn-primary">
                                                <i class="ti ti-plus"></i>
                                            </a>
                                        </div>
                                        <div class="kanban-board-group px-3" data-simplebar data-simplebar-md>
                                            <ul data-plugins="sortable">
                                                <li class="kanban-item">
                                                    <div class="card shadow border-light mb-2">
                                                        <div class="card-body">
                                                            <div class="d-flex align-items-center mb-2">
                                                                <span class="badge p-1 badge-soft-success">
                                                                    <i class="ti ti-circle-filled"></i>
                                                                    Design
                                                                </span>
                                                                <div class="ms-auto">
                                                                    <div class="dropdown">
                                                                        <a href="#" class="btn btn-icon btn-sm btn-ghost-light text-muted" data-bs-toggle="dropdown">
                                                                            <i class="ti ti-dots-vertical fs-xl"></i>
                                                                        </a>
                                                                        <ul class="dropdown-menu dropdown-menu-end">
                                                                            <li>
                                                                                <a class="dropdown-item" href="#">
                                                                                    <i class="ti ti-share me-2"></i>
                                                                                    Share
                                                                                </a>
                                                                            </li>
                                                                            <li>
                                                                                <a class="dropdown-item" href="#">
                                                                                    <i class="ti ti-edit me-2"></i>
                                                                                    Edit
                                                                                </a>
                                                                            </li>
                                                                            <li>
                                                                                <a class="dropdown-item" href="#">
                                                                                    <i class="ti ti-ban me-2"></i>
                                                                                    Block
                                                                                </a>
                                                                            </li>
                                                                            <li>
                                                                                <a class="dropdown-item text-danger" href="#">
                                                                                    <i class="ti ti-trash me-2"></i>
                                                                                    Delete
                                                                                </a>
                                                                            </li>
                                                                        </ul>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <h5 class="mb-3">
                                                                <a href="#!" class="link-reset">AI Analytics Dashboard</a>
                                                            </h5>

                                                            <div class="mb-3">
                                                                <img src="assets/images/kanban/img-3.png" alt="" class="rounded img-fluid" />
                                                            </div>

                                                            <div class="d-flex justify-content-between">
                                                                <div class="avatar-group avatar-group-xs">
                                                                    <div class="avatar">
                                                                        <img src="assets/images/users/user-2.jpg" alt="" class="rounded-circle avatar-xs" />
                                                                    </div>
                                                                    <div class="avatar">
                                                                        <img src="assets/images/users/user-3.jpg" alt="" class="rounded-circle avatar-xs" />
                                                                    </div>
                                                                    <div class="avatar">
                                                                        <img src="assets/images/users/user-5.jpg" alt="" class="rounded-circle avatar-xs" />
                                                                    </div>
                                                                    <div class="avatar">
                                                                        <img src="assets/images/users/user-1.jpg" alt="" class="rounded-circle avatar-xs" />
                                                                    </div>
                                                                </div>
                                                                <div class="d-flex align-items-center gap-2">
                                                                    <i class="ti ti-calendar-clock text-muted fs-lg"></i>
                                                                    <h5 class="fs-base mb-0 fw-medium">25 May, 2025</h5>
                                                                </div>
                                                            </div>

                                                            <div class="mt-3">
                                                                <div class="d-flex align-items-center justify-content-between mb-2">
                                                                    <p class="mb-0 text-muted fw-semibold fs-xxs">Progress</p>
                                                                    <p class="fw-semibold mb-0">65%</p>
                                                                </div>
                                                                <div class="progress" style="height: 5px">
                                                                    <div class="progress-bar bg-success" style="width: 65%"></div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!-- end card-->
                                                </li>

                                                <li class="kanban-item">
                                                    <div class="card shadow border-light mb-2">
                                                        <div class="card-body">
                                                            <div class="d-flex align-items-center mb-2">
                                                                <span class="badge p-1 badge-soft-warning">
                                                                    <i class="ti ti-circle-filled"></i>
                                                                    Development
                                                                </span>
                                                                <div class="ms-auto">
                                                                    <div class="dropdown">
                                                                        <a href="#" class="btn btn-icon btn-sm btn-ghost-light text-muted" data-bs-toggle="dropdown">
                                                                            <i class="ti ti-dots-vertical fs-xl"></i>
                                                                        </a>
                                                                        <ul class="dropdown-menu dropdown-menu-end">
                                                                            <li>
                                                                                <a class="dropdown-item" href="#">
                                                                                    <i class="ti ti-share me-2"></i>
                                                                                    Share
                                                                                </a>
                                                                            </li>
                                                                            <li>
                                                                                <a class="dropdown-item" href="#">
                                                                                    <i class="ti ti-edit me-2"></i>
                                                                                    Edit
                                                                                </a>
                                                                            </li>
                                                                            <li>
                                                                                <a class="dropdown-item" href="#">
                                                                                    <i class="ti ti-ban me-2"></i>
                                                                                    Block
                                                                                </a>
                                                                            </li>
                                                                            <li>
                                                                                <a class="dropdown-item text-danger" href="#">
                                                                                    <i class="ti ti-trash me-2"></i>
                                                                                    Delete
                                                                                </a>
                                                                            </li>
                                                                        </ul>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <h5 class="mb-3">
                                                                <a href="#!" class="link-reset">Marketing Landing Page Redesign</a>
                                                            </h5>

                                                            <div class="d-flex justify-content-between">
                                                                <div class="avatar-group avatar-group-xs">
                                                                    <div class="avatar">
                                                                        <img src="assets/images/users/user-6.jpg" alt="" class="rounded-circle avatar-xs" />
                                                                    </div>
                                                                    <div class="avatar">
                                                                        <img src="assets/images/users/user-4.jpg" alt="" class="rounded-circle avatar-xs" />
                                                                    </div>
                                                                    <div class="avatar">
                                                                        <img src="assets/images/users/user-8.jpg" alt="" class="rounded-circle avatar-xs" />
                                                                    </div>
                                                                </div>
                                                                <div class="d-flex align-items-center gap-2">
                                                                    <i class="ti ti-calendar-clock text-muted fs-lg"></i>
                                                                    <h5 class="fs-base mb-0 fw-medium">10 Jun, 2025</h5>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>

                                                <li class="kanban-item">
                                                    <div class="card shadow border-light mb-2">
                                                        <div class="card-body">
                                                            <div class="d-flex align-items-center mb-2">
                                                                <span class="badge p-1 badge-soft-info">
                                                                    <i class="ti ti-circle-filled"></i>
                                                                    UI/UX
                                                                </span>
                                                                <div class="ms-auto">
                                                                    <div class="dropdown">
                                                                        <a href="#" class="btn btn-icon btn-sm btn-ghost-light text-muted" data-bs-toggle="dropdown">
                                                                            <i class="ti ti-dots-vertical fs-xl"></i>
                                                                        </a>
                                                                        <ul class="dropdown-menu dropdown-menu-end">
                                                                            <li>
                                                                                <a class="dropdown-item" href="#">
                                                                                    <i class="ti ti-share me-2"></i>
                                                                                    Share
                                                                                </a>
                                                                            </li>
                                                                            <li>
                                                                                <a class="dropdown-item" href="#">
                                                                                    <i class="ti ti-edit me-2"></i>
                                                                                    Edit
                                                                                </a>
                                                                            </li>
                                                                            <li>
                                                                                <a class="dropdown-item" href="#">
                                                                                    <i class="ti ti-ban me-2"></i>
                                                                                    Block
                                                                                </a>
                                                                            </li>
                                                                            <li>
                                                                                <a class="dropdown-item text-danger" href="#">
                                                                                    <i class="ti ti-trash me-2"></i>
                                                                                    Delete
                                                                                </a>
                                                                            </li>
                                                                        </ul>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <h5 class="mb-3">
                                                                <a href="#!" class="link-reset">E-Commerce Website Redesign</a>
                                                            </h5>

                                                            <div class="d-flex justify-content-between">
                                                                <div class="avatar-group avatar-group-xs">
                                                                    <div class="avatar">
                                                                        <img src="assets/images/users/user-4.jpg" alt="" class="rounded-circle avatar-xs" />
                                                                    </div>
                                                                    <div class="avatar">
                                                                        <img src="assets/images/users/user-6.jpg" alt="" class="rounded-circle avatar-xs" />
                                                                    </div>
                                                                    <div class="avatar">
                                                                        <img src="assets/images/users/user-7.jpg" alt="" class="rounded-circle avatar-xs" />
                                                                    </div>
                                                                    <div class="avatar">
                                                                        <img src="assets/images/users/user-8.jpg" alt="" class="rounded-circle avatar-xs" />
                                                                    </div>
                                                                </div>
                                                                <div class="d-flex align-items-center gap-2">
                                                                    <i class="ti ti-calendar-clock text-muted fs-lg"></i>
                                                                    <h5 class="fs-base mb-0 fw-medium">28 May, 2025</h5>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!-- end card-->
                                                </li>
                                                <!-- end kanban item-->
                                            </ul>
                                        </div>
                                    </div>
                                    <!-- end In Review Data-->

                                    <!-- Done Data-->
                                    <div class="kanban-board">
                                        <div class="py-2 px-3 d-flex align-items-center">
                                            <h5 class="m-0">Done (2)</h5>
                                            <a href="#!" class="ms-auto btn btn-sm btn-icon rounded-circle btn-primary">
                                                <i class="ti ti-plus"></i>
                                            </a>
                                        </div>
                                        <div class="kanban-board-group px-3" data-simplebar data-simplebar-md>
                                            <ul data-plugins="sortable">
                                                <li class="kanban-item">
                                                    <div class="card shadow border-light mb-2">
                                                        <div class="card-body">
                                                            <div class="d-flex align-items-center mb-2">
                                                                <span class="badge p-1 badge-soft-info">
                                                                    <i class="ti ti-circle-filled"></i>
                                                                    Testing
                                                                </span>
                                                                <div class="ms-auto">
                                                                    <div class="dropdown">
                                                                        <a href="#" class="btn btn-icon btn-sm btn-ghost-light text-muted" data-bs-toggle="dropdown">
                                                                            <i class="ti ti-dots-vertical fs-xl"></i>
                                                                        </a>
                                                                        <ul class="dropdown-menu dropdown-menu-end">
                                                                            <li>
                                                                                <a class="dropdown-item" href="#">
                                                                                    <i class="ti ti-share me-2"></i>
                                                                                    Share
                                                                                </a>
                                                                            </li>
                                                                            <li>
                                                                                <a class="dropdown-item" href="#">
                                                                                    <i class="ti ti-edit me-2"></i>
                                                                                    Edit
                                                                                </a>
                                                                            </li>
                                                                            <li>
                                                                                <a class="dropdown-item" href="#">
                                                                                    <i class="ti ti-ban me-2"></i>
                                                                                    Block
                                                                                </a>
                                                                            </li>
                                                                            <li>
                                                                                <a class="dropdown-item text-danger" href="#">
                                                                                    <i class="ti ti-trash me-2"></i>
                                                                                    Delete
                                                                                </a>
                                                                            </li>
                                                                        </ul>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <h5 class="mb-3">
                                                                <a href="#!" class="link-reset">E-commerce Website QA Testing</a>
                                                            </h5>

                                                            <div class="d-flex justify-content-between">
                                                                <div class="avatar-group avatar-group-xs">
                                                                    <div class="avatar">
                                                                        <img src="assets/images/users/user-3.jpg" alt="" class="rounded-circle avatar-xs" />
                                                                    </div>
                                                                    <div class="avatar">
                                                                        <img src="assets/images/users/user-7.jpg" alt="" class="rounded-circle avatar-xs" />
                                                                    </div>
                                                                    <div class="avatar">
                                                                        <img src="assets/images/users/user-9.jpg" alt="" class="rounded-circle avatar-xs" />
                                                                    </div>
                                                                </div>
                                                                <div class="d-flex align-items-center gap-2">
                                                                    <i class="ti ti-calendar-clock text-muted fs-lg"></i>
                                                                    <h5 class="fs-base mb-0 fw-medium">18 Jun, 2025</h5>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!-- end card-->
                                                </li>
                                                <!-- end kanban item-->

                                                <li class="kanban-item">
                                                    <div class="card shadow border-light mb-2">
                                                        <div class="card-body">
                                                            <div class="d-flex align-items-center mb-2">
                                                                <span class="badge p-1 badge-soft-info">
                                                                    <i class="ti ti-circle-filled"></i>
                                                                    UI/UX
                                                                </span>
                                                                <div class="ms-auto">
                                                                    <div class="dropdown">
                                                                        <a href="#" class="btn btn-icon btn-sm btn-ghost-light text-muted" data-bs-toggle="dropdown">
                                                                            <i class="ti ti-dots-vertical fs-xl"></i>
                                                                        </a>
                                                                        <ul class="dropdown-menu dropdown-menu-end">
                                                                            <li>
                                                                                <a class="dropdown-item" href="#">
                                                                                    <i class="ti ti-share me-2"></i>
                                                                                    Share
                                                                                </a>
                                                                            </li>
                                                                            <li>
                                                                                <a class="dropdown-item" href="#">
                                                                                    <i class="ti ti-edit me-2"></i>
                                                                                    Edit
                                                                                </a>
                                                                            </li>
                                                                            <li>
                                                                                <a class="dropdown-item" href="#">
                                                                                    <i class="ti ti-ban me-2"></i>
                                                                                    Block
                                                                                </a>
                                                                            </li>
                                                                            <li>
                                                                                <a class="dropdown-item text-danger" href="#">
                                                                                    <i class="ti ti-trash me-2"></i>
                                                                                    Delete
                                                                                </a>
                                                                            </li>
                                                                        </ul>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <h5 class="mb-3">
                                                                <a href="#!" class="link-reset">Mobile App Redesign</a>
                                                            </h5>

                                                            <div class="mb-3">
                                                                <img src="assets/images/kanban/img-4.png" alt="" class="rounded img-fluid" />
                                                            </div>

                                                            <div class="d-flex justify-content-between">
                                                                <div class="avatar-group avatar-group-xs">
                                                                    <div class="avatar">
                                                                        <img src="assets/images/users/user-5.jpg" alt="" class="rounded-circle avatar-xs" />
                                                                    </div>
                                                                    <div class="avatar">
                                                                        <img src="assets/images/users/user-2.jpg" alt="" class="rounded-circle avatar-xs" />
                                                                    </div>
                                                                    <div class="avatar">
                                                                        <img src="assets/images/users/user-3.jpg" alt="" class="rounded-circle avatar-xs" />
                                                                    </div>
                                                                    <div class="avatar">
                                                                        <img src="assets/images/users/user-9.jpg" alt="" class="rounded-circle avatar-xs" />
                                                                    </div>
                                                                </div>
                                                                <div class="d-flex align-items-center gap-2">
                                                                    <i class="ti ti-calendar-clock text-muted fs-lg"></i>
                                                                    <h5 class="fs-base mb-0 fw-medium">10 Jun, 2025</h5>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!-- end card-->
                                                </li>
                                                <!-- end kanban item-->
                                            </ul>
                                        </div>
                                    </div>
                                    <!-- end Done Data-->
                                </div>
                                <!-- End Kanban-content-->
                            </div>
                            <!-- end card-body-->
                        </div>
                        <!-- end card-->
                    </div>
                    <!-- end row-->
                </div>
                <!-- container -->

                <?php include('./partials/footer.php'); ?>
            </div>

            <!-- ============================================================== -->
            <!-- End of Main Content -->
            <!-- ============================================================== -->
        </div>
        <!-- END wrapper -->

        <?php include('./partials/customizer.php'); ?> <?php include('./partials/footer-scripts.php'); ?>

        <!-- Sortable js -->
        <script src="assets/plugins/sortablejs/Sortable.min.js"></script>

        <!-- Kanban Page js -->
        <script src="assets/js/pages/apps-kanban.js"></script>
    </body>
</html>
