ekoetki/public/template/ticket.html

2695 lines
191 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="Multipurpose, super flexible, powerful, clean modern responsive bootstrap 5 admin template"
name="description">
<meta content="admin template, ki-admin admin template, dashboard template, flat admin template, responsive admin template, web app"
name="keywords">
<meta content="la-themes" name="author">
<link href="../assets/images/logo/favicon.png" rel="icon" type="image/x-icon">
<link href="../assets/images/logo/favicon.png" rel="shortcut icon" type="image/x-icon">
<title>Ticket | ki-admin - Premium Admin Template</title>
<!--font-awesome-css-->
<link href="../assets/vendor/fontawesome/css/all.css" rel="stylesheet">
<!-- Fonts -->
<link href="https://fonts.googleapis.com" rel="preconnect">
<link crossorigin href="https://fonts.gstatic.com" rel="preconnect">
<link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap"
rel="stylesheet">
<!-- tabler icons-->
<link href="../assets/vendor/tabler-icons/tabler-icons.css" rel="stylesheet" type="text/css">
<!--flag Icon css-->
<link href="../assets/vendor/flag-icons-master/flag-icon.css" rel="stylesheet" type="text/css">
<!-- slick css -->
<link href="../assets/vendor/slick/slick.css" rel="stylesheet">
<link href="../assets/vendor/slick/slick-theme.css" rel="stylesheet">
<!-- Bootstrap css-->
<link href="../assets/vendor/bootstrap/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- Data Table css-->
<link href="../assets/vendor/datatable/jquery.dataTables.min.css" rel="stylesheet" type="text/css">
<link href="../assets/vendor/datatable/datatable2/buttons.dataTables.min.css" rel="stylesheet" type="text/css">
<!-- simplebar css-->
<link href="../assets/vendor/simplebar/simplebar.css" rel="stylesheet" type="text/css">
<!-- App css-->
<link href="../assets/css/style.css" rel="stylesheet" type="text/css">
<!-- Responsive css-->
<link href="../assets/css/responsive.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="app-wrapper">
<div class="loader-wrapper">
<div class="loader_24"></div>
</div>
<!-- Menu Navigation starts -->
<nav>
<div class="app-logo">
<a class="logo d-inline-block" href="index.html">
<img alt="#" src="../assets/images/logo/1.png">
</a>
<span class="bg-light-primary toggle-semi-nav d-flex-center">
<i class="ti ti-chevron-right"></i>
</span>
<div class="d-flex align-items-center nav-profile p-3">
<span class="h-45 w-45 d-flex-center b-r-10 position-relative bg-danger m-auto">
<img alt="avatar" class="img-fluid b-r-10" src="../assets/images/avatar/woman.jpg">
<span class="position-absolute top-0 end-0 p-1 bg-success border border-light rounded-circle"></span>
</span>
<div class="flex-grow-1 ps-2">
<h6 class="text-primary mb-0"> Ninfa Monaldo</h6>
<p class="text-muted f-s-12 mb-0">Web Developer</p>
</div>
<div class="dropdown profile-menu-dropdown">
<a aria-expanded="false" data-bs-auto-close="true" data-bs-placement="top" data-bs-toggle="dropdown"
role="button">
<i class="ti ti-settings fs-5"></i>
</a>
<ul class="dropdown-menu">
<li class="dropdown-item">
<a class="f-w-500" href="profile.html" target="_blank">
<i class="ph-duotone ph-user-circle pe-1 f-s-20"></i> Profile Details
</a>
</li>
<li class="dropdown-item">
<a class="f-w-500" href="setting.html" target="_blank">
<i class="ph-duotone ph-gear pe-1 f-s-20"></i> Settings
</a>
</li>
<li class="dropdown-item">
<div class="d-flex align-items-center justify-content-between">
<div>
<a class="f-w-500" href="ticket.html#">
<i class="ph-duotone ph-detective pe-1 f-s-20"></i> Incognito
</a>
</div>
<div class="flex-shrink-0">
<div class="form-check form-switch">
<input class="form-check-input form-check-primary" id="incognitoSwitch"
type="checkbox">
</div>
</div>
</div>
</li>
<li class="dropdown-item">
<a class="mb-0 text-secondary f-w-500" href="sign_up.html" target="_blank">
<i class="ph-bold ph-plus pe-1 f-s-20"></i> Add account
</a>
</li>
<li class="app-divider-v dotted py-1"></li>
<li class="dropdown-item">
<a class="mb-0 text-danger" href="sign_in.html" target="_blank">
<i class="ph-duotone ph-sign-out pe-1 f-s-20"></i> Log Out
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="app-nav" id="app-simple-bar">
<ul class="main-nav p-0 mt-2">
<li class="menu-title">
<span>Dashboard</span>
</li>
<li>
<a aria-expanded="false" data-bs-toggle="collapse" href="ticket.html#dashboard">
<svg stroke="currentColor" stroke-width="1.5">
<use xlink:href="../assets/svg/_sprite.svg#home"></use>
</svg>
dashboard
<span class="badge bg-danger badge-dashboard badge-notification ms-2">New</span>
</a>
<ul class="collapse" id="dashboard">
<li><a href="index.html">Ecommerce</a></li>
<li><a href="project_dashboard.html">Project</a></li>
</ul>
</li>
<li>
<a aria-expanded="false" data-bs-toggle="collapse" href="ticket.html#apps">
<svg stroke="currentColor" stroke-width="1.5">
<use xlink:href="../assets/svg/_sprite.svg#stack"></use>
</svg>
Apps
</a>
<ul class="collapse" id="apps">
<li><a href="calendar.html">Calender</a></li>
<li class="another-level">
<a aria-expanded="false" data-bs-toggle="collapse" href="ticket.html#Profile-page">
Profile
</a>
<ul class="collapse" id="Profile-page">
<li><a href="profile.html">Profile</a></li>
<li><a href="setting.html">Setting</a></li>
</ul>
</li>
<li class="another-level">
<a aria-expanded="false" data-bs-toggle="collapse" href="ticket.html#projects-page">
Projects Page
</a>
<ul class="collapse" id="projects-page">
<li><a href="project_app.html">projects</a></li>
<li><a href="project_details.html">projects Details</a></li>
</ul>
</li>
<li><a href="to_do.html">To-Do</a></li>
<li><a href="team.html">Team</a></li>
<li><a href="api.html">API</a></li>
<li class="another-level">
<a aria-expanded="false" data-bs-toggle="collapse" href="ticket.html#ticket-page">
Ticket
</a>
<ul class="collapse" id="ticket-page">
<li><a href="ticket.html">Ticket</a></li>
<li><a href="ticket_details.html">Ticket Details</a></li>
</ul>
</li>
<li class="another-level">
<a aria-expanded="false" data-bs-toggle="collapse" href="ticket.html#email-page">
Email Page
</a>
<ul class="collapse" id="email-page">
<li><a href="email.html"> Email</a></li>
<li><a href="read_email.html">Read Email</a></li>
</ul>
</li>
<li class="another-level">
<a aria-expanded="false" data-bs-toggle="collapse" href="ticket.html#e-shop">
E-shop
</a>
<ul class="collapse" id="e-shop">
<li><a href="cart.html">Cart</a></li>
<li><a href="product.html">Product</a></li>
<li><a href="add_product.html">Add Product</a></li>
<li><a href="product_details.html">Product-Details</a></li>
<li><a href="product_list.html">Product list</a></li>
<li><a href="orders.html">Orders</a></li>
<li><a href="orders_details.html">Orders Details</a></li>
<li><a href="orders_list.html">Orders List</a></li>
<li><a href="checkout.html">Check out</a></li>
<li><a href="wishlist.html">Wishlist</a></li>
</ul>
</li>
<li><a href="invoice.html">Invoice</a></li>
<li><a href="chat.html">Chat</a></li>
<li><a href="file_manager.html">File manager</a></li>
<li><a href="bookmark.html">Bookmark</a></li>
<li><a href="kanban_board.html">Kanban board</a></li>
<li><a href="timeline.html">Timeline</a></li>
<li><a href="faq.html">FAQS</a></li>
<li><a href="pricing.html">Pricing</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li class="another-level">
<a aria-expanded="false" data-bs-toggle="collapse" href="ticket.html#blog-page">
Blog Page
</a>
<ul class="collapse" id="blog-page">
<li><a href="blog.html">Blog</a></li>
<li><a href="blog_read_more.html">Blog Details</a></li>
<li><a href="add_blog.html">Add Blog</a></li>
</ul>
</li>
</ul>
</li>
<li class="no-sub">
<a href="widget.html">
<svg stroke="currentColor" stroke-width="1.5">
<use xlink:href="../assets/svg/_sprite.svg#squares"></use>
</svg>
Widgets
</a>
</li>
<li class="menu-title"><span>Component</span></li>
<li>
<a aria-expanded="false" data-bs-toggle="collapse" href="ticket.html#ui-kits">
<svg stroke="currentColor" stroke-width="1.5">
<use xlink:href="../assets/svg/_sprite.svg#briefcase"></use>
</svg>
UI kits
</a>
<ul class="collapse" id="ui-kits">
<li><a href="cheatsheet.html">Cheatsheet</a></li>
<li><a href="alert.html">Alert</a></li>
<li><a href="badges.html">Badges</a></li>
<li><a href="buttons.html">Buttons</a></li>
<li><a href="cards.html">Cards</a></li>
<li><a href="dropdown.html">Dropdown</a></li>
<li><a href="grid.html">Grid</a></li>
<li><a href="avatar.html">Avatar</a></li>
<li><a href="tabs.html">Tabs</a></li>
<li><a href="accordions.html">Accordions</a></li>
<li><a href="progress.html">Progress</a></li>
<li><a href="notifications.html">Notifications</a></li>
<li><a href="list.html">Lists</a></li>
<li><a href="helper_classes.html">Helper Classes</a></li>
<li><a href="background.html">Background</a></li>
<li><a href="divider.html">Divider</a></li>
<li><a href="ribbons.html">Ribbons</a></li>
<li><a href="editor.html">Editor </a></li>
<li><a href="collapse.html">Collapse</a></li>
<li><a href="footer-page.html">Footer</a></li>
<li><a href="shadow.html">Shadow</a></li>
<li><a href="wrapper.html">Wrapper</a></li>
<li><a href="bullet.html">Bullet</a></li>
<li><a href="placeholder.html">Placeholder</a></li>
<li><a href="alignment.html">Alignment Thing</a></li>
</ul>
</li>
<li>
<a aria-expanded="false" data-bs-toggle="collapse" href="ticket.html#advance-ui">
<svg stroke="currentColor" stroke-width="1.5">
<use xlink:href="../assets/svg/_sprite.svg#briefcase-advance"></use>
</svg>
Advance UI
<span class=" badge rounded-pill bg-warning badge-notification ms-2">
12+
<span class="visually-hidden">unread messages</span>
</span>
</a>
<ul class="collapse" id="advance-ui">
<li><a href="modals.html">Modals</a></li>
<li><a href="offcanvas.html">Offcanvas Toggle</a></li>
<li><a href="sweetalert.html">Sweat Alert</a></li>
<li><a href="scrollbar.html">Scrollbar</a></li>
<li><a href="spinners.html">Spinners</a></li>
<li><a href="animation.html">Animation</a></li>
<li><a href="video_embed.html">Video Embed</a></li>
<li><a href="tour.html">Tour</a></li>
<li><a href="slick.html">Slider</a></li>
<li><a href="bootstrap_slider.html">Bootstrap Slider</a></li>
<li><a href="scrollpy.html">Scrollpy</a></li>
<li><a href="tooltips_popovers.html">Tooltip & Popovers</a></li>
<li><a href="ratings.html">Rating</a></li>
<li><a href="prismjs.html">Prismjs</a></li>
<li><a href="count_down.html">Count Down</a></li>
<li><a href="count_up.html"> Count up </a></li>
<li><a href="draggable.html">Draggable</a></li>
<li><a href="tree-view.html">Tree View</a></li>
<li><a href="block_ui.html">Block Ui </a></li>
</ul>
</li>
<li>
<a aria-expanded="false" data-bs-toggle="collapse" href="ticket.html#icons">
<svg stroke="currentColor" stroke-width="1.5">
<use xlink:href="../assets/svg/_sprite.svg#gift"></use>
</svg>
Icons
</a>
<ul class="collapse" id="icons">
<li><a href="fontawesome.html">Fontawesome</a></li>
<li><a href="flag_icons.html">Flag</a></li>
<li><a href="tabler-icons.html">Tabler</a></li>
<li><a href="weather_icon.html">Weather</a></li>
<li><a href="animated_icon.html">Animated</a></li>
<li><a href="iconoir_icon.html">Iconoir</a></li>
<li><a href="phosphor.html">Phosphor</a></li>
</ul>
</li>
<li class="no-sub">
<a href="misc.html">
<svg stroke="currentColor" stroke-width="1.5">
<use xlink:href="../assets/svg/_sprite.svg#rectangle"></use>
</svg>
Misc
</a>
</li>
<li class="menu-title"><span>Map & Charts </span></li>
<li>
<a aria-expanded="false" data-bs-toggle="collapse" href="ticket.html#maps">
<svg stroke="currentColor" stroke-width="1.5">
<use xlink:href="../assets/svg/_sprite.svg#location"></use>
</svg>
Map
</a>
<ul class="collapse" id="maps">
<li><a href="google-map.html">Google Maps</a></li>
<li><a href="leaflet-map.html">Leaflet map</a></li>
</ul>
</li>
<li>
<a aria-expanded="false" data-bs-toggle="collapse" href="ticket.html#chart">
<svg stroke="currentColor" stroke-width="1.5">
<use xlink:href="../assets/svg/_sprite.svg#chart"></use>
</svg>
Chart
</a>
<ul class="collapse" id="chart">
<li><a href="chart_js.html">Chart js</a></li>
<li class="another-level">
<a aria-expanded="false" data-bs-toggle="collapse" href="ticket.html#apexcharts-page">
Apexcharts
</a>
<ul class="collapse" id="apexcharts-page">
<li><a href="line.html">Line</a></li>
<li><a href="area_charts.html">Area</a></li>
<li><a href="column.html">Column</a></li>
<li><a href="bar.html">Bar</a></li>
<li><a href="mixed.html">Mixed</a></li>
<li><a href="timeline_range_charts.html">Timeline & Range-Bars</a></li>
<li><a href="candlestick_charts.html">Candlestick</a></li>
<li><a href="boxplot.html">Boxplot</a></li>
<li><a href="bubble.html">Bubble</a></li>
<li><a href="scatter.html">Scatter</a></li>
<li><a href="heatmap.html">Heatmap</a></li>
<li><a href="treemap.html">Treemap</a></li>
<li><a href="pie_charts.html">Pie</a></li>
<li><a href="radial_bar.html">Radial bar</a></li>
<li><a href="radar_chart.html">Radar</a></li>
</ul>
</li>
</ul>
</li>
<li class="menu-title"><span>Table & forms </span></li>
<li>
<a aria-expanded="false" data-bs-toggle="collapse" href="ticket.html#table">
<svg stroke="currentColor" stroke-width="1.5">
<use xlink:href="../assets/svg/_sprite.svg#table"></use>
</svg>
Table
</a>
<ul class="collapse" id="table">
<li><a href="basic_table.html">BasicTable</a></li>
<li><a href="data_table.html">Data Table</a></li>
<li><a href="list_table.html">List Js</a></li>
<li><a href="advance_table.html">Advance Table</a></li>
</ul>
</li>
<li>
<a aria-expanded="false" data-bs-toggle="collapse" href="ticket.html#forms">
<svg stroke="currentColor" stroke-width="1.5">
<use xlink:href="../assets/svg/_sprite.svg#wallet"></use>
</svg>
Forms elements
</a>
<ul class="collapse" id="forms">
<li><a href="form_validation.html">Form Validation</a></li>
<li><a href="base_inputs.html">Base Input</a></li>
<li><a href="checkbox_radio.html">Checkbox & Radio</a></li>
<li><a href="input_groups.html">Input Groups</a></li>
<li><a href="input_masks.html">Input Masks</a></li>
<li><a href="floating_labels.html">Floating Labels</a></li>
<li><a href="date_picker.html">Datetimepicker</a></li>
<li><a href="touch_spin.html">Touch spin</a></li>
<li><a href="select.html">Select2</a></li>
<li><a href="switch.html">Switch</a></li>
<li><a href="range_slider.html">Range Slider</a></li>
<li><a href="typeahead.html">Typeahead</a></li>
<li><a href="textarea.html">Textarea</a></li>
<li><a href="clipboard.html">Clipboard</a></li>
<li><a href="file_upload.html">File Upload</a></li>
<li><a href="dual_list_boxes.html">Dual List Boxes</a></li>
<li><a href="default_forms.html">Default Forms</a></li>
</ul>
</li>
<li>
<a aria-expanded="false" data-bs-toggle="collapse" href="ticket.html#ready_to_use">
<svg stroke="currentColor" stroke-width="1.5">
<use xlink:href="../assets/svg/_sprite.svg#newspaper"></use>
</svg>
Ready to use
<span class="badge text-bg-success badge-notification ms-2">2</span>
</a>
<ul class="collapse" id="ready_to_use">
<li><a href="form_wizards.html">Form wizards</a></li>
<li><a href="form_wizard_1.html">Form wizards 1</a></li>
<li><a href="form_wizard_2.html">Form wizards 2</a></li>
<li><a href="ready_to_use_form.html">Ready To Use Form</a></li>
<li><a href="ready_to_use_table.html">Ready To Use Tables</a></li>
</ul>
</li>
<li class="menu-title"><span>Pages</span></li>
<li>
<a aria-expanded="false" data-bs-toggle="collapse" href="ticket.html#auth_pages">
<svg stroke="currentColor" stroke-width="1.5">
<use xlink:href="../assets/svg/_sprite.svg#window"></use>
</svg>
Auth Pages
</a>
<ul class="collapse" id="auth_pages">
<li><a href="sign_in.html">Sign In</a></li>
<li><a href="sign_in_1.html">Sign In with Bg-image</a></li>
<li><a href="sign_up.html">Sign Up</a></li>
<li><a href="sign_up_1.html">Sign Up with Bg-image</a></li>
<li><a href="password_reset.html">Password Reset</a></li>
<li><a href="password_reset_1.html">Password Reset with Bg-image</a></li>
<li><a href="password_create.html">Password Create</a></li>
<li><a href="password_create_1.html">Password Create with Bg-image</a></li>
<li><a href="lock_screen.html">Lock Screen</a></li>
<li><a href="lock_screen_1.html">Lock Screen with Bg-image</a></li>
<li><a href="two_step_verification.html">Two-Step Verification</a></li>
<li><a href="two_step_verification_1.html">Two-Step Verification with Bg-image</a></li>
</ul>
</li>
<li>
<a aria-expanded="false" data-bs-toggle="collapse" href="ticket.html#error_pages">
<svg stroke="currentColor" stroke-width="1.5">
<use xlink:href="../assets/svg/_sprite.svg#exclamation-circle"></use>
</svg>
Error Pages
</a>
<ul class="collapse" id="error_pages">
<li><a href="error_400.html">Bad Request </a></li>
<li><a href="error_403.html">Forbidden </a></li>
<li><a href="error_404.html">Not Found</a></li>
<li><a href="error_500.html">Internal Server</a></li>
<li><a href="error_503.html">Service Unavailable</a></li>
</ul>
</li>
<li>
<a aria-expanded="false" data-bs-toggle="collapse" href="ticket.html#other_pages">
<svg stroke="currentColor" stroke-width="1.5">
<use xlink:href="../assets/svg/_sprite.svg#document"></use>
</svg>
Other Pages
</a>
<ul class="collapse" id="other_pages">
<li><a href="blank.html">Blank</a></li>
<li><a href="maintenance.html">Maintenance</a></li>
<li><a href="landing.html">Landing Page</a></li>
<li><a href="coming_soon.html">Coming Soon</a></li>
<li><a href="sitemap.html">Sitemap</a></li>
<li><a href="privacy_policy.html">Privacy Policy</a></li>
<li><a href="terms_condition.html">Terms &amp; Condition</a></li>
</ul>
</li>
<li class="menu-title"><span>Others</span></li>
<li>
<a aria-expanded="false" data-bs-toggle="collapse" href="ticket.html#level">
<svg stroke="currentColor" stroke-width="1.5">
<use xlink:href="../assets/svg/_sprite.svg#arrow-down"></use>
</svg>
2 level
</a>
<ul class="collapse" id="level">
<li><a href="ticket.html#">Blank</a></li>
<li class="another-level">
<a aria-expanded="false" data-bs-toggle="collapse" href="ticket.html#level2">
Another level
</a>
<ul class="collapse" id="level2">
<li><a href="blank.html">Blank</a></li>
</ul>
</li>
</ul>
</li>
<li class="no-sub">
<a href="https://phpstack-1384472-5121645.cloudwaysapps.com/document/html/ki-admin/index.html">
<svg stroke="currentColor" stroke-width="1.5">
<use xlink:href="../assets/svg/_sprite.svg#document-text"></use>
</svg>
Document
</a>
</li>
<li class="no-sub">
<a href="mailto:teqlathemes@gmail.com">
<svg stroke="currentColor" stroke-width="1.5">
<use xlink:href="../assets/svg/_sprite.svg#chat-bubble"></use>
</svg>
Support
</a>
</li>
</ul>
</div>
<div class="menu-navs">
<span class="menu-previous"><i class="ti ti-chevron-left"></i></span>
<span class="menu-next"><i class="ti ti-chevron-right"></i></span>
</div>
</nav>
<!-- Menu Navigation ends -->
<div class="app-content">
<div class="">
<!-- Header Section starts -->
<header class="header-main">
<div class="container-fluid">
<div class="row">
<div class="col-8 col-sm-6 d-flex align-items-center header-left p-0">
<span class="header-toggle ">
<i class="ph ph-squares-four"></i>
</span>
<div class="header-searchbar w-100">
<form action="ticket.html#" class="mx-sm-3 app-form app-icon-form ">
<div class="position-relative">
<input aria-label="Search" class="form-control" placeholder="Search..."
type="search">
<i class="ti ti-search text-dark"></i>
</div>
</form>
</div>
</div>
<div class="col-4 col-sm-6 d-flex align-items-center justify-content-end header-right p-0">
<ul class="d-flex align-items-center">
<li class="header-language">
<div class="flex-shrink-0 dropdown" id="lang_selector">
<a aria-expanded="false" class="d-block head-icon ps-0"
data-bs-toggle="dropdown"
href="ticket.html#">
<div class="lang-flag lang-en ">
<span class="flag rounded-circle overflow-hidden">
<i class=""></i>
</span>
</div>
</a>
<ul class="dropdown-menu language-dropdown header-card border-0">
<li class="lang lang-en selected dropdown-item p-2" data-bs-placement="top"
data-bs-toggle="tooltip" title="US">
<span class="d-flex align-items-center">
<i class="flag-icon flag-icon-usa flag-icon-squared rounded-circle f-s-20"></i>
<span class="ps-2">US</span>
</span>
</li>
<li class="lang lang-pt dropdown-item p-2" title="FR">
<span class="d-flex align-items-center">
<i class="flag-icon flag-icon-fra flag-icon-squared rounded-circle f-s-20"></i>
<span class="ps-2">France</span>
</span>
</li>
<li class="lang lang-es dropdown-item p-2" title="UK">
<span class="d-flex align-items-center">
<i class="flag-icon flag-icon-gbr flag-icon-squared rounded-circle f-s-20"></i>
<span class="ps-2">UK</span>
</span>
</li>
<li class="lang lang-es dropdown-item p-2" title="IT">
<span class="d-flex align-items-center">
<i class="flag-icon flag-icon-ita flag-icon-squared rounded-circle f-s-20"></i>
<span class="ps-2">Italy</span>
</span>
</li>
</ul>
</div>
</li>
<li class="header-apps">
<a aria-controls="appscanvasRights"
class="d-block head-icon bg-light-dark rounded-circle f-s-22 p-2"
data-bs-target="#appscanvasRights" data-bs-toggle="offcanvas"
href="ticket.html#" role="button">
<i class="ph ph-bounding-box"></i>
</a>
<div aria-labelledby="appscanvasRightsLabel"
class="offcanvas offcanvas-end header-apps-canvas"
id="appscanvasRights"
tabindex="-1">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="appscanvasRightsLabel">Shortcut</h5>
<div class="app-dropdown flex-shrink-0">
<a aria-expanded="false" class=" p-1" data-bs-auto-close="outside"
data-bs-toggle="dropdown"
href="ticket.html#"
role="button">
<i class="ph-bold ph-faders-horizontal f-s-20"></i>
</a>
<ul class="dropdown-menu mb-3">
<li class="dropdown-item">
<a href="setting.html" target="_blank">
Privacy Settings
</a>
</li>
<li class="dropdown-item">
<a href="setting.html" target="_blank">
Account Settings
</a>
</li>
<li class="dropdown-item">
<a href="setting.html" target="_blank">
Accessibility
</a>
</li>
<li class="dropdown-divider"></li>
<li class="dropdown-item border-0">
<a aria-expanded="false" data-bs-toggle="dropdown" href="ticket.html#"
role="button">
More Settings
</a>
<ul class="dropdown-menu sub-menu">
<li class="dropdown-item">
<a href="setting.html" target="_blank">
Backup and Restore
</a>
</li>
<li class="dropdown-item">
<a href="setting.html" target="_blank">
<span>Data Usage</span>
</a>
</li>
<li class="dropdown-item">
<a href="setting.html" target="_blank">
<span>Theme</span>
</a>
</li>
<li class="dropdown-item d-flex align-items-center justify-content-between">
<a href="ticket.html#">
<p class="mb-0">Notification</p>
</a>
<div class="flex-shrink-0">
<div class="form-check form-switch">
<input class="form-check-input form-check-primary"
id="notificationSwitch"
type="checkbox">
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="offcanvas-body app-scroll">
<div class="row row-cols-3 g-2">
<div class="d-flex-center text-center">
<a class="text-light-primary w-100 rounded-3 py-3 px-2 "
href="product.html"
target="_blank">
<span>
<i class="ph-light ph-shopping-bag-open f-s-30"></i>
</span>
<p class="mb-0 f-w-500 text-dark">E-shop</p>
</a>
</div>
<div class="d-flex-center text-center">
<a class="text-light-danger w-100 rounded-3 py-3 px-2 "
href="email.html"
target="_blank">
<span>
<i class="ph-light ph-envelope f-s-30"></i>
</span>
<p class="mb-0 f-w-500 text-dark">Email</p>
</a>
</div>
<div class="d-flex-center text-center">
<a class="text-light-success w-100 rounded-3 py-3 px-2 "
href="chat.html"
target="_blank">
<span>
<i class="ph-light ph-chat-circle-text f-s-30"></i>
</span>
<p class="mb-0 f-w-500 text-dark">Chat</p>
</a>
</div>
<div class="d-flex-center text-center">
<a class="text-light-warning w-100 rounded-3 py-3 px-2 "
href="project_app.html"
target="_blank">
<span>
<i class="ph-light ph-projector-screen-chart f-s-30"></i>
</span>
<p class="mb-0 f-w-500 text-dark">Project</p>
</a>
</div>
<div class="d-flex-center text-center">
<a class="text-light-info w-100 rounded-3 py-3 px-2 "
href="invoice.html"
target="_blank">
<span>
<i class="ph-light ph-scroll f-s-30"></i>
</span>
<p class="mb-0 f-w-500 text-dark">Invoice</p>
</a>
</div>
<div class="d-flex-center text-center">
<a class="text-light-dark w-100 rounded-3 py-3 px-2 "
href="blog.html"
target="_blank">
<span>
<i class="ph-light ph-notebook f-s-30"></i>
</span>
<p class="mb-0 f-w-500 text-dark">Blog</p>
</a>
</div>
<div class="d-flex-center text-center">
<a class="text-light-danger w-100 rounded-3 py-3 px-2 "
href="calendar.html"
target="_blank">
<span>
<i class="ph-light ph-calendar f-s-30"></i>
</span>
<p class="mb-0 f-w-500 text-dark">Calender</p>
</a>
</div>
<div class="d-flex-center text-center">
<a class="text-light-warning w-100 rounded-3 py-3 px-2 "
href="file_manager.html"
target="_blank">
<span>
<i class="ph-light ph-folder-open f-s-30"></i>
</span>
<p class="mb-0 f-w-500 text-dark txt-ellipsis-1">File
Manager</p>
</a>
</div>
<div class="d-flex-center text-center">
<a class="text-light-primary w-100 rounded-3 py-3 px-2 "
href="gallery.html"
target="_blank">
<span>
<i class="ph-light ph-google-photos-logo f-s-30"></i>
</span>
<p class="mb-0 f-w-500 text-dark">Gallery</p>
</a>
</div>
<div class="d-flex-center text-center">
<a class="text-light-success w-100 rounded-3 py-3 px-2 "
href="profile.html"
target="_blank">
<span>
<i class="ph-light ph-users-three f-s-30"></i>
</span>
<p class="mb-0 f-w-500 text-dark">Profile</p>
</a>
</div>
<div class="d-flex-center text-center">
<a class="text-light-secondary w-100 rounded-3 py-3 px-2 "
href="kanban_board.html"
target="_blank">
<span>
<i class="ph-light ph-selection-foreground f-s-30"></i>
</span>
<p class="mb-0 f-w-500 text-dark">Task Board</p>
</a>
</div>
<div class="d-flex-center text-center">
<a class="d-flex-center text-light-secondary w-100 h-100 rounded-3 p-2 dashed-1-secondary"
href="kanban_board.html"
target="_blank">
<span>
<i class="ph-light ph-plus f-s-30"></i>
</span>
</a>
</div>
</div>
</div>
</div>
</li>
<li class="header-cart">
<a aria-controls="cartcanvasRight"
class="d-block head-icon position-relative bg-light-dark rounded-circle f-s-22 p-2"
data-bs-target="#cartcanvasRight"
data-bs-toggle="offcanvas"
href="ticket.html#" role="button">
<i class="ph ph-shopping-cart-simple"></i>
<span
class="position-absolute translate-middle badge rounded-pill bg-danger badge-notification">4</span>
</a>
<div aria-labelledby="cartcanvasRightLabel"
class="offcanvas offcanvas-end header-cart-canvas"
id="cartcanvasRight"
tabindex="-1">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="cartcanvasRightLabel">Cart</h5>
<button aria-label="Close" class="btn-close" data-bs-dismiss="offcanvas"
type="button"></button>
</div>
<div class="offcanvas-body app-scroll p-0">
<div class="head-container">
<div class="head-box">
<span class="b-1-light bg-light-primary h-45 w-45 d-flex-center b-r-6">
<img alt="cart" class="img-fluid p-1"
src="../assets/images/header/cart/01.png">
</span>
<div class="flex-grow-1 ms-2">
<a class="mb-0 f-w-600 f-s-16" href="product_details.html"
target="_blank"> Backpacks (3<i
class="ti ti-star-filled text-warning f-s-12"></i>)
</a>
<div>
<span class="text-dark"><span
class="text-secondary f-w-400">size</span> : M</span>
<span class="text-dark ms-2"><span
class="text-secondary f-w-400">color</span> :Pink</span>
</div>
</div>
<div class="text-end">
<i class="ph ph-trash f-s-18 text-danger close-btn"></i>
<p class="text-muted f-w-500 mb-0">$600.50 x 1</p>
</div>
</div>
<div class="head-box">
<span class="b-1-light bg-light-primary h-45 w-45 d-flex-center b-r-6">
<img alt="cart" class="img-fluid p-1"
src="../assets/images/header/cart/05.png">
</span>
<div class="flex-grow-1 ms-2">
<a class="mb-0 f-w-600 f-s-16" href="product_details.html"
target="_blank"> Women's Watch (4<i
class="ti ti-star-filled text-warning f-s-12"></i>)</a>
<div>
<span class="text-dark"><span
class="text-secondary f-w-400">size</span> : S</span>
<span class="text-dark ms-2"><span
class="text-secondary f-w-400">color</span> :Rose Gold</span>
</div>
</div>
<div class="text-end">
<i class="ph ph-trash f-s-18 text-danger close-btn"></i>
<p class="text-muted f-w-500 mb-0">$519.10 x 2</p>
</div>
</div>
<div class="head-box">
<span class="b-1-light bg-light-primary h-45 w-45 d-flex-center b-r-6">
<img alt="cart" class="img-fluid p-1"
src="../assets/images/header/cart/04.png">
</span>
<div class="flex-grow-1 ms-2">
<a class="mb-0 f-w-600 f-s-16" href="product_details.html"
target="_blank">Sandals (5 <i
class="ti ti-star-filled text-warning f-s-12"></i>)</a>
<div>
<span class="text-dark"><span
class="text-secondary f-w-400">size</span> : 8</span>
<span class="text-dark ms-2"><span
class="text-secondary f-w-400">color</span> :White</span>
</div>
</div>
<div class="text-end">
<i class="ph ph-trash f-s-18 text-danger close-btn"></i>
<p class="text-muted f-w-500 mb-0">$390 x 2</p>
</div>
</div>
<div class="head-box ">
<span class="b-1-light bg-light-primary h-45 w-45 d-flex-center b-r-6">
<img alt="cart" class="img-fluid p-1"
src="../assets/images/header/cart/03.png">
</span>
<div class="flex-grow-1 ms-2">
<a class="mb-0 f-w-600 f-s-16" href="product_details.html"
target="_blank"> Jackets (3<i
class="ti ti-star-filled text-warning f-s-12"></i>)</a>
<div>
<span class="text-dark"><span
class="text-secondary f-w-400">size</span> : XL</span>
<span class="text-dark ms-2"><span
class="text-secondary f-w-400">color</span> :Blue</span>
</div>
</div>
<div class="text-end">
<i class="ph ph-trash f-s-18 text-danger close-btn"></i>
<p class="text-muted f-w-500 mb-0">$300.00 x 2</p>
</div>
</div>
<div class="head-box ">
<span class="b-1-light bg-light-primary h-45 w-45 d-flex-center b-r-6">
<img alt="cart" class="img-fluid p-1"
src="../assets/images/header/cart/02.png">
</span>
<div class="flex-grow-1 ms-2">
<a class="mb-0 f-w-600 f-s-16" href="product_details.html"
target="_blank"> Shoes (3<i
class="ti ti-star-filled text-warning f-s-12"></i>)</a>
<div>
<span class="text-dark"><span
class="text-secondary f-w-400">size</span> : 9</span>
<span class="text-dark ms-2"><span
class="text-secondary f-w-400">color</span> :White</span>
</div>
</div>
<div class="text-end">
<i class="ph ph-trash f-s-18 text-danger close-btn"></i>
<p class="text-muted f-w-500 mb-0">$450.00 x 1</p>
</div>
</div>
<div class="hidden-massage py-4 px-3">
<div>
<i class="ph-duotone ph-shopping-bag-open f-s-50 text-primary"></i>
<h6 class="mb-0">Your Cart is Empty</h6>
<p class="text-secondary mb-0">Add some items :)</p>
<a class="btn btn-light-primary btn-xs mt-2"
href="product_details.html">Shop
Now</a>
</div>
</div>
</div>
</div>
<div class="offcanvas-footer">
<div class="head-box-footer p-3">
<div class="mb-4">
<h6 class="text-muted f-w-600">Total <span
class="float-end text-primary">$3,468.00</span></h6>
</div>
<div class="header-cart-btn">
<a class="btn btn-primary" href="cart.html" role="button"
target="_blank">
<i class="ti ti-eye"></i> View Cart</a>
<a class="btn btn-success" href="checkout.html" role="button"
target="_blank">
Checkout <i class="ti ti-shopping-cart"></i></a>
</div>
</div>
</div>
</div>
</li>
<li class="header-dark">
<div class="sun-logo head-icon bg-light-dark rounded-circle f-s-22 p-2">
<i class="ph ph-moon-stars"></i>
</div>
<div class="moon-logo head-icon bg-light-dark rounded-circle f-s-22 p-2">
<i class="ph ph-sun-dim"></i>
</div>
</li>
<li class="header-notification">
<a aria-controls="notificationcanvasRight"
class="d-block head-icon position-relative bg-light-dark rounded-circle f-s-22 p-2"
data-bs-target="#notificationcanvasRight"
data-bs-toggle="offcanvas"
href="ticket.html#"
role="button">
<i class="ph ph-bell"></i>
<span
class="position-absolute translate-middle p-1 bg-primary border border-light rounded-circle animate__animated animate__fadeIn animate__infinite animate__slower"></span>
</a>
<div aria-labelledby="notificationcanvasRightLabel"
class="offcanvas offcanvas-end header-notification-canvas"
id="notificationcanvasRight" tabindex="-1">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="notificationcanvasRightLabel">
Notification</h5>
<button aria-label="Close" class="btn-close" data-bs-dismiss="offcanvas"
type="button"></button>
</div>
<div class="offcanvas-body app-scroll p-0">
<div class="head-container">
<div class="notification-message head-box">
<div class="message-content-box flex-grow-1 pe-2">
<a class="f-s-15 text-dark mb-0"
href="read_email.html"><span
class="f-w-500 text-dark">Gene Hart</span> wants to
edit <span
class="f-w-500 text-dark">Report.doc</span></a>
<div>
<a class="d-inline-block f-w-500 text-success me-1"
href="ticket.html#">Approve</a>
<a class="d-inline-block f-w-500 text-danger"
href="ticket.html#">Deny</a>
</div>
</div>
<div class="text-end">
<i class="ph ph-trash f-s-18 text-danger close-btn"></i>
<div>
<span class="badge text-light-primary"> sep 23 </span>
</div>
</div>
</div>
<div class="notification-message head-box">
<div class="message-content-box flex-grow-1 pe-2">
<a class="f-s-15 text-dark mb-0" href="read_email.html">Hey
<span
class="f-w-500 text-dark">Emery McKenzie</span>,
get ready: Your order from <span
class="f-w-500 text-dark">@Shopper.com</span></a>
</div>
<div class="text-end">
<i class="ph ph-trash f-s-18 text-danger close-btn"></i>
<div>
<span class="badge text-light-primary"> sep 23 </span>
</div>
</div>
</div>
<div class="notification-message head-box">
<div class="message-content-box flex-grow-1 pe-2">
<a class="f-s-15 text-dark mb-0"
href="read_email.html"><span
class="f-w-500 text-dark">Simon Young</span> shared
a file called <span
class="f-w-500 text-dark">Dropdown.pdf</span></a>
</div>
<div class="text-end">
<i class="ph ph-trash f-s-18 text-danger close-btn"></i>
<div>
<span class="badge text-light-primary"> 30 min</span>
</div>
</div>
</div>
<div class="notification-message head-box">
<div class="message-content-box flex-grow-1 pe-2">
<a class="f-s-15 text-dark mb-0"
href="read_email.html"><span
class="f-w-500 text-dark">Becky G. Hayes</span> has
added a comment to <span
class="f-w-500 text-dark">Final_Report.pdf</span></a>
</div>
<div class="text-end">
<i class="ph ph-trash f-s-18 text-danger close-btn"></i>
<div>
<span class="badge text-light-primary"> 45 min</span>
</div>
</div>
</div>
<div class="notification-message head-box">
<div class="message-content-box flex-grow-1 pe-2">
<a class="f-s-15 text-dark mb-0 "
href="read_email.html"><span
class="f-w-600 text-dark">@Romaine</span>
invited you to a meeting
</a>
<div>
<a class="d-inline-block f-w-500 text-success me-1"
href="ticket.html#">Join</a>
<a class="d-inline-block f-w-500 text-danger" href="ticket.html#">Decline</a>
</div>
</div>
<div class="text-end">
<i class="ph ph-trash f-s-18 text-danger close-btn"></i>
<div>
<span class="badge text-light-primary"> 1 hour ago </span>
</div>
</div>
</div>
<div class="hidden-massage py-4 px-3">
<div>
<i class="ph-duotone ph-bell-ringing f-s-50 text-primary"></i>
</div>
<div>
<h6 class="mb-0">Notification Not Found</h6>
<p class="text-dark">When you have any notifications added
here,will
appear here.
</p>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</header>
<!-- Header Section ends -->
<!-- Body main section starts -->
<main>
<div class="container-fluid">
<!-- Breadcrumb start -->
<div class="row m-1">
<div class="col-12 ">
<h4 class="main-title">Ticket</h4>
<ul class="app-line-breadcrumbs mb-3">
<li class="">
<a class="f-s-14 f-w-500" href="ticket.html#">
<span>
<i class="ph-duotone ph-stack f-s-16"></i> Apps
</span>
</a>
</li>
<li>
<a class="f-s-14 f-w-500" href="ticket.html#">Ticket</a>
</li>
<li class="active">
<a class="f-s-14 f-w-500" href="ticket.html#">Ticket</a>
</li>
</ul>
</div>
</div>
<!-- Breadcrumb end -->
<!-- Ticket start -->
<div class="row ticket-app">
<div class="col-lg-6">
<div class="row">
<div class="col-sm-6">
<div class="card ticket-card bg-primary">
<div class="card-body">
<i class="ph-bold ph-circle circle-bg-img"></i>
<div class="h-50 w-50 d-flex-center b-r-15 bg-white mb-3">
<i class="ph-bold ph-ticket f-s-25 text-primary"></i>
</div>
<p class="f-s-16">All Tickets</p>
<div class="d-flex justify-content-between align-items-center">
<h3 class="text-white">185</h3>
<ul class="avatar-group">
<li class="h-45 w-45 d-flex-center b-r-50 text-bg-danger b-2-light position-relative"
data-bs-title="Sabrina Torres" data-bs-toggle="tooltip">
<span
class="position-absolute top-0 start-2 p-1 bg-danger border border-light rounded-circle"></span>
<img alt="" class="img-fluid b-r-50 overflow-hidden"
src="../assets/images/avatar/4.png">
</li>
<li class="h-45 w-45 d-flex-center b-r-50 text-bg-success b-2-light position-relative"
data-bs-title="Sabrina Torres" data-bs-toggle="tooltip">
<span
class="position-absolute top-0 start-2 p-1 bg-success border border-light rounded-circle"></span>
<img alt="" class="img-fluid b-r-50 overflow-hidden"
src="https://phpstack-1384472-5121645.cloudwaysapps.com/template/html/ki-admin/assets/images/avatar/1.png">
</li>
<li class="h-45 w-45 d-flex-center b-r-50 text-bg-warning b-2-light position-relative"
data-bs-title="Sabrina Torres" data-bs-toggle="tooltip">
<span
class="position-absolute top-0 start-2 p-1 bg-warning border border-light rounded-circle"></span>
<img alt="" class="img-fluid b-r-50 overflow-hidden"
src="../assets/images/avatar/2.png">
</li>
<li class="h-45 w-45 d-flex-center b-r-50 text-bg-info b-2-light position-relative"
data-bs-title="Sabrina Torres" data-bs-toggle="tooltip">
<span
class="position-absolute top-0 start-2 p-1 bg-info border border-light rounded-circle"></span>
<img alt="" class="img-fluid b-r-50 overflow-hidden"
src="../assets/images/avatar/3.png">
</li>
<li class="bg-white text-dark h-35 w-35 d-flex-center b-r-50"
data-bs-title="5 More"
data-bs-toggle="tooltip">
5+
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card ticket-card bg-info">
<div class="card-body">
<i class="ph-bold ph-circle circle-bg-img"></i>
<div class="h-50 w-50 d-flex-center b-r-15 bg-white mb-3">
<i class="ph-bold ph-clock-countdown f-s-25 text-info"></i>
</div>
<p class="f-s-16">Pending Tickets</p>
<div class="d-flex justify-content-between align-items-center">
<h3 class="text-white">185</h3>
<ul class="avatar-group">
<li class="h-45 w-45 d-flex-center b-r-50 text-bg-danger b-2-light position-relative"
data-bs-title="Sabrina Torres" data-bs-toggle="tooltip">
<span
class="position-absolute top-0 start-2 p-1 bg-danger border border-light rounded-circle"></span>
<img alt="" class="img-fluid b-r-50 overflow-hidden"
src="../assets/images/avatar/4.png">
</li>
<li class="h-45 w-45 d-flex-center b-r-50 text-bg-success b-2-light position-relative"
data-bs-title="Sabrina Torres" data-bs-toggle="tooltip">
<span
class="position-absolute top-0 start-2 p-1 bg-success border border-light rounded-circle"></span>
<img alt="" class="img-fluid b-r-50 overflow-hidden"
src="https://phpstack-1384472-5121645.cloudwaysapps.com/template/html/ki-admin/assets/images/avatar/1.png">
</li>
<li class="h-45 w-45 d-flex-center b-r-50 text-bg-warning b-2-light position-relative"
data-bs-title="Sabrina Torres" data-bs-toggle="tooltip">
<span
class="position-absolute top-0 start-2 p-1 bg-warning border border-light rounded-circle"></span>
<img alt="" class="img-fluid b-r-50 overflow-hidden"
src="../assets/images/avatar/2.png">
</li>
<li class="h-45 w-45 d-flex-center b-r-50 text-bg-info b-2-light position-relative"
data-bs-title="Sabrina Torres" data-bs-toggle="tooltip">
<span
class="position-absolute top-0 start-2 p-1 bg-info border border-light rounded-circle"></span>
<img alt="" class="img-fluid b-r-50 overflow-hidden"
src="../assets/images/avatar/3.png">
</li>
<li class="bg-white text-dark h-35 w-35 d-flex-center b-r-50"
data-bs-title="5 More"
data-bs-toggle="tooltip">
5+
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card ticket-card bg-success">
<div class="card-body">
<i class="ph-bold ph-circle circle-bg-img"></i>
<div class="h-50 w-50 d-flex-center b-r-15 bg-white mb-3">
<i class="ph-bold ph-file-cloud f-s-25 text-success"></i>
</div>
<p class="f-s-16">Completed Tickets</p>
<div class="d-flex justify-content-between align-items-center">
<h3 class="text-white">185</h3>
<ul class="avatar-group">
<li class="h-45 w-45 d-flex-center b-r-50 text-bg-danger b-2-light position-relative"
data-bs-title="Sabrina Torres" data-bs-toggle="tooltip">
<span
class="position-absolute top-0 start-2 p-1 bg-danger border border-light rounded-circle"></span>
<img alt="" class="img-fluid b-r-50 overflow-hidden"
src="../assets/images/avatar/4.png">
</li>
<li class="h-45 w-45 d-flex-center b-r-50 text-bg-success b-2-light position-relative"
data-bs-title="Sabrina Torres" data-bs-toggle="tooltip">
<span
class="position-absolute top-0 start-2 p-1 bg-success border border-light rounded-circle"></span>
<img alt="" class="img-fluid b-r-50 overflow-hidden"
src="https://phpstack-1384472-5121645.cloudwaysapps.com/template/html/ki-admin/assets/images/avatar/1.png">
</li>
<li class="h-45 w-45 d-flex-center b-r-50 text-bg-warning b-2-light position-relative"
data-bs-title="Sabrina Torres" data-bs-toggle="tooltip">
<span
class="position-absolute top-0 start-2 p-1 bg-warning border border-light rounded-circle"></span>
<img alt="" class="img-fluid b-r-50 overflow-hidden"
src="../assets/images/avatar/2.png">
</li>
<li class="h-45 w-45 d-flex-center b-r-50 text-bg-info b-2-light position-relative"
data-bs-title="Sabrina Torres" data-bs-toggle="tooltip">
<span
class="position-absolute top-0 start-2 p-1 bg-info border border-light rounded-circle"></span>
<img alt="" class="img-fluid b-r-50 overflow-hidden"
src="../assets/images/avatar/3.png">
</li>
<li class="bg-white text-dark h-35 w-35 d-flex-center b-r-50"
data-bs-title="5 More"
data-bs-toggle="tooltip">
5+
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card ticket-card bg-warning">
<div class="card-body">
<i class="ph-bold ph-circle circle-bg-img"></i>
<div class="h-50 w-50 d-flex-center b-r-15 bg-white mb-3">
<i class="ph-bold ph-file-x f-s-25 text-warning"></i>
</div>
<p class="f-s-16">Cancelled Tickets</p>
<div class="d-flex justify-content-between align-items-center">
<h3 class="text-white">185</h3>
<ul class="avatar-group">
<li class="h-45 w-45 d-flex-center b-r-50 text-bg-danger b-2-light position-relative"
data-bs-title="Sabrina Torres" data-bs-toggle="tooltip">
<span
class="position-absolute top-0 start-2 p-1 bg-danger border border-light rounded-circle"></span>
<img alt="" class="img-fluid b-r-50 overflow-hidden"
src="../assets/images/avatar/4.png">
</li>
<li class="h-45 w-45 d-flex-center b-r-50 text-bg-success b-2-light position-relative"
data-bs-title="Sabrina Torres" data-bs-toggle="tooltip">
<span
class="position-absolute top-0 start-2 p-1 bg-success border border-light rounded-circle"></span>
<img alt="" class="img-fluid b-r-50 overflow-hidden"
src="https://phpstack-1384472-5121645.cloudwaysapps.com/template/html/ki-admin/assets/images/avatar/1.png">
</li>
<li class="h-45 w-45 d-flex-center b-r-50 text-bg-warning b-2-light position-relative"
data-bs-title="Sabrina Torres" data-bs-toggle="tooltip">
<span
class="position-absolute top-0 start-2 p-1 bg-warning border border-light rounded-circle"></span>
<img alt="" class="img-fluid b-r-50 overflow-hidden"
src="../assets/images/avatar/2.png">
</li>
<li class="h-45 w-45 d-flex-center b-r-50 text-bg-info b-2-light position-relative"
data-bs-title="Sabrina Torres" data-bs-toggle="tooltip">
<span
class="position-absolute top-0 start-2 p-1 bg-info border border-light rounded-circle"></span>
<img alt="" class="img-fluid b-r-50 overflow-hidden"
src="../assets/images/avatar/3.png">
</li>
<li class="bg-white text-dark h-35 w-35 d-flex-center b-r-50"
data-bs-title="5 More"
data-bs-toggle="tooltip">
5+
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card create-ticket-card">
<div class="card-body">
<div class="col-xl-12">
<div class="row align-items-center">
<div class="col-sm-7 col-12">
<div class="ticket-create">
<h5 class=" mb-2 ">The Ticket Component</h5>
<p class="mb-5 mt-3 text-secondary"> Provide a more detailed
explanation of the issue. Describe
what is happening versus what should happen. If its a feature
request, explain the
desired outcome and why it's needed.</p>
<button class="btn btn-primary" data-bs-toggle="modal"
id="create_ticket_key"
type="button">Create Ticket
</button>
</div>
</div>
<div class="col-sm-5 col-12">
<img alt="" class="img-fluid w-300 d-block m-auto"
src="../assets/images/icons/ticket.png">
</div>
</div>
</div>
</div>
</div>
<h5 class="ms-3 mb-2">Top Catagory</h5>
<ul class="ticket-slider ">
<li>
<div class="ticket-catagory p-3">
<h6 class="mb-0">laptop issues</h6>
<span class="badge text-light-success">64</span>
</div>
</li>
<li>
<div class="ticket-catagory p-3">
<h6 class="mb-0">Card issues</h6>
<span class="badge text-light-success">52</span>
</div>
</li>
<li>
<div class="ticket-catagory p-3">
<h6 class="mb-0">Admin issues</h6>
<span class="badge text-light-success">32</span>
</div>
</li>
<li>
<div class="ticket-catagory p-3">
<h6 class="mb-0">laptop issues</h6>
<span class="badge text-light-success">20</span>
</div>
</li>
</ul>
</div>
<!-- start create ticket modal -->
<div aria-hidden="true" aria-labelledby="ticketModalLabel" class="modal fade" id="ticketModal"
tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header bg-primary">
<h1 class="modal-title fs-5 text-white" id="ticketModalLabel">Add Ticket</h1>
<button aria-label="Close" class="btn-close m-0" data-bs-dismiss="modal"
type="button"></button>
</div>
<div class="modal-body">
<div class="ticket-form">
<div class="row">
<div class="col-12">
<div class="mb-3">
<label class="form-label">Title</label>
<input class="form-control" id="titlename" placeholder="Title"
type="text">
</div>
</div>
<div class="col-12">
<div class="mb-3">
<label class="form-label">Client</label>
<input class="form-control" id="clientname" placeholder="client"
type="text">
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label class="form-label" for="priority">Priority</label>
<select class="form-select" id="priority">
<option selected="">Select Priority</option>
<option value="Medium">Medium</option>
<option value="Lower">Lower</option>
<option value="High">High</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label class="form-label" for="status">Status</label>
<select class="form-select" id="status">
<option selected="">Select Status</option>
<option value="open">open</option>
<option value="inprogress">inprogress</option>
<option value="closed">closed</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label class="form-label">Date</label>
<input class="form-control" id="datename" name="trip-start"
type="date">
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label class="form-label">Due Date</label>
<input class="form-control" id="duename" type="date">
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" data-bs-dismiss="modal" type="button">Close
</button>
<button class="btn btn-primary" id="ticketkey" type="button">Save changes
</button>
</div>
</div>
</div>
</div>
<!-- end create ticket modal -->
<!-- TICKET DETAIL tabel 5 -->
<div class="col-12">
<div class="card">
<div class="card-body px-0">
<div class="table-responsive app-scroll app-datatable-default">
<table class="w-100 display ticket-app-table" id="ticketdatatable">
<thead>
<tr>
<th>
<div class="checkbox-wrapper">
<label class="check-box m-0">
<input id="select-all1" type="checkbox">
<span class="checkmark outline-secondary"></span>
</label>
</div>
</th>
<th>Id</th>
<th>Agent</th>
<th>Priority</th>
<th>Title</th>
<th>Status</th>
<th>Date</th>
<th>Due Date</th>
<th>Action</th>
</tr>
</thead>
<tbody id="ticket_key_body">
<tr>
<td>
<div class="checkbox-wrapper">
<label class="check-box m-0">
<input type="checkbox">
<span class="checkmark outline-secondary"></span>
</label>
</div>
</td>
<td>AR 2044</td>
<td>
<div class="d-flex align-items-center">
<div class="h-30 w-30 d-flex-center b-r-50 overflow-hidden text-bg-primary me-2">
<img alt="" class="img-fluid"
src="../assets/images/avatar/1.png">
</div>
Gavin Cortez
</div>
</td>
<td><span class="badge text-outline-warning">Medium</span></td>
<td>Bug Report</td>
<td><span class="badge text-outline-success">in progress</span></td>
<td>1 jan 2024</td>
<td>3 feb 2024</td>
<td>
<div class="btn-group dropdown-icon-none">
<button aria-expanded="false"
class="btn border-0 icon-btn b-r-4 dropdown-toggle active"
data-bs-auto-close="true" data-bs-toggle="dropdown"
type="button">
<i class="ti ti-dots-vertical"></i>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="ticket_details.html"><i
class="ti ti-eye text-primary me-2"></i> View
</a></li>
<li><a class="dropdown-item"
data-bs-target="#ticketeditModal"
data-bs-toggle="modal"
href="ticket.html#"><i
class="ti ti-edit text-success me-2"></i>
Edit </a></li>
<li><a class="dropdown-item delete-btn" href="ticket.html#"><i
class="ti ti-trash text-danger me-2"></i> Delete
</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<div class="checkbox-wrapper">
<label class="check-box m-0">
<input type="checkbox">
<span class="checkmark outline-secondary"></span>
</label>
</div>
</td>
<td>AR 1763</td>
<td>
<div class="d-flex align-items-center">
<div class="h-30 w-30 d-flex-center b-r-50 overflow-hidden text-bg-dark me-2">
<img alt="" class="img-fluid"
src="../assets/images/avatar/14.png">
</div>
Martena Mccray
</div>
</td>
<td>
<span class="badge text-outline-danger">lower</span>
</td>
<td>Feature Request</td>
<td><span class="badge text-outline-info">closed</span></td>
<td>8 jan 2024</td>
<td>10 mar 2024</td>
<td>
<div class="btn-group dropdown-icon-none">
<button aria-expanded="false"
class="btn border-0 icon-btn b-r-4 dropdown-toggle active"
data-bs-auto-close="true" data-bs-toggle="dropdown"
type="button">
<i class="ti ti-dots-vertical"></i>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="ticket_details.html"><i
class="ti ti-eye text-primary me-2"></i> View
</a></li>
<li><a class="dropdown-item"
data-bs-target="#ticketeditModal"
data-bs-toggle="modal"
href="ticket.html#"><i
class="ti ti-edit text-success me-2"></i>
Edit </a></li>
<li><a class="dropdown-item delete-btn" href="ticket.html#"><i
class="ti ti-trash text-danger me-2"></i> Delete
</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<div class="checkbox-wrapper">
<label class="check-box m-0">
<input type="checkbox">
<span class="checkmark outline-secondary"></span>
</label>
</div>
</td>
<td>AR 7452</td>
<td>
<div class="d-flex align-items-center">
<div class="h-30 w-30 d-flex-center b-r-50 overflow-hidden text-bg-info me-2">
<img alt="" class="img-fluid"
src="../assets/images/avatar/10.png">
</div>
Gavin Joyce
</div>
</td>
<td><span class="badge text-outline-success">High</span></td>
<td>Performance Issue</td>
<td><span class="badge text-outline-success">in progress</span></td>
<td>14 jan 2024</td>
<td>30 jan 2024</td>
<td>
<div class="btn-group dropdown-icon-none">
<button aria-expanded="false"
class="btn border-0 icon-btn b-r-4 dropdown-toggle active"
data-bs-auto-close="true" data-bs-toggle="dropdown"
type="button">
<i class="ti ti-dots-vertical"></i>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="ticket_details.html"><i
class="ti ti-eye text-primary me-2"></i> View
</a></li>
<li><a class="dropdown-item"
data-bs-target="#ticketeditModal"
data-bs-toggle="modal"
href="ticket.html#"><i
class="ti ti-edit text-success me-2"></i>
Edit </a></li>
<li><a class="dropdown-item delete-btn" href="ticket.html#"><i
class="ti ti-trash text-danger me-2"></i> Delete
</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<div class="checkbox-wrapper">
<label class="check-box m-0">
<input type="checkbox">
<span class="checkmark outline-secondary"></span>
</label>
</div>
</td>
<td>AR 1023</td>
<td>
<div class="d-flex align-items-center">
<div class="h-30 w-30 d-flex-center b-r-50 overflow-hidden text-bg-dark me-2">
<img alt="" class="img-fluid"
src="../assets/images/avatar/2.png">
</div>
Gloria Little
</div>
</td>
<td><span class="badge text-outline-warning">Medium</span></td>
<td>Security Concern</td>
<td><span class="badge text-outline-primary">open</span></td>
<td>6 hours ago</td>
<td>12 feb 2024</td>
<td>
<div class="btn-group dropdown-icon-none">
<button aria-expanded="false"
class="btn border-0 icon-btn b-r-4 dropdown-toggle active"
data-bs-auto-close="true" data-bs-toggle="dropdown"
type="button">
<i class="ti ti-dots-vertical"></i>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="ticket_details.html"><i
class="ti ti-eye text-primary me-2"></i> View
</a></li>
<li><a class="dropdown-item"
data-bs-target="#ticketeditModal"
data-bs-toggle="modal"
href="ticket.html#"><i
class="ti ti-edit text-success me-2"></i>
Edit </a></li>
<li><a class="dropdown-item delete-btn" href="ticket.html#"><i
class="ti ti-trash text-danger me-2"></i> Delete
</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<div class="checkbox-wrapper">
<label class="check-box m-0">
<input type="checkbox">
<span class="checkmark outline-secondary"></span>
</label>
</div>
</td>
<td>AR 2305</td>
<td>
<div class="d-flex align-items-center">
<div class="h-30 w-30 d-flex-center b-r-50 overflow-hidden text-bg-dark me-2">
<img alt="" class="img-fluid"
src="../assets/images/avatar/08.png">
</div>
Jena Gaines
</div>
</td>
<td><span class="badge text-outline-success">High</span></td>
<td>User Access/Permissions</td>
<td><span class="badge text-outline-info">closed</span></td>
<td>6 hours ago</td>
<td>16 jan 2024</td>
<td>
<div class="btn-group dropdown-icon-none">
<button aria-expanded="false"
class="btn border-0 icon-btn b-r-4 dropdown-toggle active"
data-bs-auto-close="true" data-bs-toggle="dropdown"
type="button">
<i class="ti ti-dots-vertical"></i>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="ticket_details.html"><i
class="ti ti-eye text-primary me-2"></i> View
</a></li>
<li><a class="dropdown-item"
data-bs-target="#ticketeditModal"
data-bs-toggle="modal"
href="ticket.html#"><i
class="ti ti-edit text-success me-2"></i>
Edit </a></li>
<li><a class="dropdown-item delete-btn" href="ticket.html#"><i
class="ti ti-trash text-danger me-2"></i> Delete
</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<div class="checkbox-wrapper">
<label class="check-box m-0">
<input type="checkbox">
<span class="checkmark outline-secondary"></span>
</label>
</div>
</td>
<td>AR2058</td>
<td>
<div class="d-flex align-items-center">
<div class="h-30 w-30 d-flex-center b-r-50 overflow-hidden text-bg-dark me-2">
<img alt="" class="img-fluid"
src="../assets/images/avatar/11.png">
</div>
Jenette Caldwell
</div>
</td>
<td><span class="badge text-outline-danger">lower</span></td>
<td>System Outage or Downtime</td>
<td><span class="badge text-outline-primary">open</span></td>
<td>20 jan 2024</td>
<td>21 feb 2024</td>
<td>
<div class="btn-group dropdown-icon-none">
<button aria-expanded="false"
class="btn border-0 icon-btn b-r-4 dropdown-toggle active"
data-bs-auto-close="true" data-bs-toggle="dropdown"
type="button">
<i class="ti ti-dots-vertical"></i>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="ticket_details.html"><i
class="ti ti-eye text-primary me-2"></i> View
</a></li>
<li><a class="dropdown-item"
data-bs-target="#ticketeditModal"
data-bs-toggle="modal"
href="ticket.html#"><i
class="ti ti-edit text-success me-2"></i>
Edit </a></li>
<li><a class="dropdown-item delete-btn" href="ticket.html#"><i
class="ti ti-trash text-danger me-2"></i> Delete
</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<div class="checkbox-wrapper">
<label class="check-box m-0">
<input type="checkbox">
<span class="checkmark outline-secondary"></span>
</label>
</div>
</td>
<td>AR 1935</td>
<td>
<div class="d-flex align-items-center">
<div class="h-30 w-30 d-flex-center b-r-50 overflow-hidden text-bg-dark me-2">
<img alt="" class="img-fluid"
src="../assets/images/avatar/4.png">
</div>
Jennifer Acosta
</div>
</td>
<td><span class="badge text-outline-warning">Medium</span></td>
<td>Data Issue</td>
<td><span class="badge text-outline-primary">open</span></td>
<td>7 June 2024</td>
<td>8 july 2024</td>
<td>
<div class="btn-group dropdown-icon-none">
<button aria-expanded="false"
class="btn border-0 icon-btn b-r-4 dropdown-toggle active"
data-bs-auto-close="true" data-bs-toggle="dropdown"
type="button">
<i class="ti ti-dots-vertical"></i>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="ticket_details.html"><i
class="ti ti-eye text-primary me-2"></i> View
</a></li>
<li><a class="dropdown-item"
data-bs-target="#ticketeditModal"
data-bs-toggle="modal"
href="ticket.html#"><i
class="ti ti-edit text-success me-2"></i>
Edit </a></li>
<li><a class="dropdown-item delete-btn" href="ticket.html#"><i
class="ti ti-trash text-danger me-2"></i> Delete
</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<div class="checkbox-wrapper">
<label class="check-box m-0">
<input type="checkbox">
<span class="checkmark outline-secondary"></span>
</label>
</div>
</td>
<td>AR 3056</td>
<td>
<div class="d-flex align-items-center">
<div class="h-30 w-30 d-flex-center b-r-50 overflow-hidden text-bg-dark me-2">
<img alt="" class="img-fluid"
src="../assets/images/avatar/2.png">
</div>
Jennifer Chang
</div>
</td>
<td><span class="badge text-outline-success">High</span></td>
<td>Integration Issue</td>
<td><span class="badge text-outline-success">in progress</span></td>
<td>10 hours ago</td>
<td>7 aug 2024</td>
<td>
<div class="btn-group dropdown-icon-none">
<button aria-expanded="false"
class="btn border-0 icon-btn b-r-4 dropdown-toggle active"
data-bs-auto-close="true" data-bs-toggle="dropdown"
type="button">
<i class="ti ti-dots-vertical"></i>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="ticket_details.html"><i
class="ti ti-eye text-primary me-2"></i> View
</a></li>
<li><a class="dropdown-item"
data-bs-target="#ticketeditModal"
data-bs-toggle="modal"
href="ticket.html#"><i
class="ti ti-edit text-success me-2"></i>
Edit </a></li>
<li><a class="dropdown-item delete-btn" href="ticket.html#"><i
class="ti ti-trash text-danger me-2"></i> Delete
</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<div class="checkbox-wrapper">
<label class="check-box m-0">
<input type="checkbox">
<span class="checkmark outline-secondary"></span>
</label>
</div>
</td>
<td>AR 0358</td>
<td>
<div class="d-flex align-items-center">
<div class="h-30 w-30 d-flex-center b-r-50 overflow-hidden text-bg-dark me-2">
<img alt="" class="img-fluid"
src="../assets/images/avatar/3.png">
</div>
Michael Silva
</div>
</td>
<td><span class="badge text-outline-warning">Medium</span></td>
<td>User Interface Issue</td>
<td><span class="badge text-outline-primary">open</span></td>
<td>14 June 2024</td>
<td>16 feb 2024</td>
<td>
<div class="btn-group dropdown-icon-none">
<button aria-expanded="false"
class="btn border-0 icon-btn b-r-4 dropdown-toggle active"
data-bs-auto-close="true" data-bs-toggle="dropdown"
type="button">
<i class="ti ti-dots-vertical"></i>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="ticket_details.html"><i
class="ti ti-eye text-primary me-2"></i> View
</a></li>
<li><a class="dropdown-item"
data-bs-target="#ticketeditModal"
data-bs-toggle="modal"
href="ticket.html#"><i
class="ti ti-edit text-success me-2"></i>
Edit </a></li>
<li><a class="dropdown-item delete-btn" href="ticket.html#"><i
class="ti ti-trash text-danger me-2"></i> Delete
</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<div class="checkbox-wrapper">
<label class="check-box m-0">
<input type="checkbox">
<span class="checkmark outline-secondary"></span>
</label>
</div>
</td>
<td>AR 4590</td>
<td>
<div class="d-flex align-items-center">
<div class="h-30 w-30 d-flex-center b-r-50 overflow-hidden text-bg-dark me-2">
<img alt="" class="img-fluid"
src="../assets/images/avatar/4.png">
</div>
Michelle House
</div>
</td>
<td><span class="badge text-outline-danger">lower</span></td>
<td>General Inquiry or Request</td>
<td><span class="badge text-outline-info">closed</span></td>
<td>4 July 2024</td>
<td>5 aug 2024</td>
<td>
<div class="btn-group dropdown-icon-none">
<button aria-expanded="false"
class="btn border-0 icon-btn b-r-4 dropdown-toggle active"
data-bs-auto-close="true" data-bs-toggle="dropdown"
type="button">
<i class="ti ti-dots-vertical"></i>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="ticket_details.html"><i
class="ti ti-eye text-primary me-2"></i> View
</a></li>
<li><a class="dropdown-item"
data-bs-target="#ticketeditModal"
data-bs-toggle="modal"
href="ticket.html#"><i
class="ti ti-edit text-success me-2"></i>
Edit </a></li>
<li><a class="dropdown-item delete-btn" href="ticket.html#"><i
class="ti ti-trash text-danger me-2"></i> Delete
</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<div class="checkbox-wrapper">
<label class="check-box m-0">
<input type="checkbox">
<span class="checkmark outline-secondary"></span>
</label>
</div>
</td>
<td>AR 6085</td>
<td>
<div class="d-flex align-items-center">
<div class="h-30 w-30 d-flex-center b-r-50 overflow-hidden text-bg-dark me-2">
<img alt="" class="img-fluid"
src="../assets/images/avatar/5.png">
</div>
Olivia Liang
</div>
</td>
<td><span class="badge text-outline-danger">lower</span></td>
<td>Technical Issues</td>
<td><span class="badge text-outline-success">in progress</span></td>
<td>19 August 2024</td>
<td>30 sep 2024</td>
<td>
<div class="btn-group dropdown-icon-none">
<button aria-expanded="false"
class="btn border-0 icon-btn b-r-4 dropdown-toggle active"
data-bs-auto-close="true" data-bs-toggle="dropdown"
type="button">
<i class="ti ti-dots-vertical"></i>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="ticket_details.html"><i
class="ti ti-eye text-primary me-2"></i> View
</a></li>
<li><a class="dropdown-item"
data-bs-target="#ticketeditModal"
data-bs-toggle="modal"
href="ticket.html#"><i
class="ti ti-edit text-success me-2"></i>
Edit </a></li>
<li><a class="dropdown-item delete-btn" href="ticket.html#"><i
class="ti ti-trash text-danger me-2"></i> Delete
</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<div class="checkbox-wrapper">
<label class="check-box m-0">
<input type="checkbox">
<span class="checkmark outline-secondary"></span>
</label>
</div>
</td>
<td>AR 0378</td>
<td>
<div class="d-flex align-items-center">
<div class="h-30 w-30 d-flex-center b-r-50 overflow-hidden text-bg-dark me-2">
<img alt="" class="img-fluid"
src="../assets/images/avatar/14.png">
</div>
Quinn Flynn
</div>
</td>
<td><span class="badge text-outline-success">High</span></td>
<td>Enhancement Requests</td>
<td><span class="badge text-outline-primary">open</span></td>
<td>12 Sep 2024</td>
<td>13 oct 2024</td>
<td>
<div class="btn-group dropdown-icon-none">
<button aria-expanded="false"
class="btn border-0 icon-btn b-r-4 dropdown-toggle active"
data-bs-auto-close="true" data-bs-toggle="dropdown"
type="button">
<i class="ti ti-dots-vertical"></i>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="ticket_details.html"><i
class="ti ti-eye text-primary me-2"></i> View
</a></li>
<li><a class="dropdown-item"
data-bs-target="#ticketeditModal"
data-bs-toggle="modal"
href="ticket.html#"><i
class="ti ti-edit text-success me-2"></i>
Edit </a></li>
<li><a class="dropdown-item delete-btn" href="ticket.html#"><i
class="ti ti-trash text-danger me-2"></i> Delete
</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<div class="checkbox-wrapper">
<label class="check-box m-0">
<input type="checkbox">
<span class="checkmark outline-secondary"></span>
</label>
</div>
</td>
<td>AR 9065</td>
<td>
<div class="d-flex align-items-center">
<div class="h-30 w-30 d-flex-center b-r-50 overflow-hidden text-bg-dark me-2">
<img alt="" class="img-fluid"
src="../assets/images/avatar/2.png">
</div>
Prescott Bartlett
</div>
</td>
<td><span class="badge text-outline-warning">Medium</span></td>
<td>Performance and Reliability</td>
<td><span class="badge text-outline-success">in progress</span></td>
<td>6 hours ago</td>
<td>2 apr 2024</td>
<td>
<div class="btn-group dropdown-icon-none">
<button aria-expanded="false"
class="btn border-0 icon-btn b-r-4 dropdown-toggle active"
data-bs-auto-close="true" data-bs-toggle="dropdown"
type="button">
<i class="ti ti-dots-vertical"></i>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="ticket_details.html"><i
class="ti ti-eye text-primary me-2"></i> View
</a></li>
<li><a class="dropdown-item"
data-bs-target="#ticketeditModal"
data-bs-toggle="modal"
href="ticket.html#"><i
class="ti ti-edit text-success me-2"></i>
Edit </a></li>
<li><a class="dropdown-item delete-btn" href="ticket.html#"><i
class="ti ti-trash text-danger me-2"></i> Delete
</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<div class="checkbox-wrapper">
<label class="check-box m-0">
<input type="checkbox">
<span class="checkmark outline-secondary"></span>
</label>
</div>
</td>
<td>AR 7806</td>
<td>
<div class="d-flex align-items-center">
<div class="h-30 w-30 d-flex-center b-r-50 overflow-hidden text-bg-dark me-2">
<img alt="" class="img-fluid"
src="../assets/images/avatar/3.png">
</div>
Suki Burks
</div>
</td>
<td><span class="badge text-outline-success">High</span></td>
<td>Security and Compliance</td>
<td><span class="badge text-outline-info">closed</span></td>
<td>2 Sep 2024</td>
<td>15 oct 2024</td>
<td>
<div class="btn-group dropdown-icon-none">
<button aria-expanded="false"
class="btn border-0 icon-btn b-r-4 dropdown-toggle active"
data-bs-auto-close="true" data-bs-toggle="dropdown"
type="button">
<i class="ti ti-dots-vertical"></i>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="ticket_details.html"><i
class="ti ti-eye text-primary me-2"></i> View
</a></li>
<li><a class="dropdown-item"
data-bs-target="#ticketeditModal"
data-bs-toggle="modal"
href="ticket.html#"><i
class="ti ti-edit text-success me-2"></i>
Edit </a></li>
<li><a class="dropdown-item delete-btn" href="ticket.html#"><i
class="ti ti-trash text-danger me-2"></i> Delete
</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<div class="checkbox-wrapper">
<label class="check-box m-0">
<input type="checkbox">
<span class="checkmark outline-secondary"></span>
</label>
</div>
</td>
<td>AR 0379</td>
<td>
<div class="d-flex align-items-center">
<div class="h-30 w-30 d-flex-center b-r-50 overflow-hidden text-bg-dark me-2">
<img alt="" class="img-fluid"
src="../assets/images/avatar/4.png">
</div>
Tatyana Fitzpatrick
</div>
</td>
<td><span class="badge text-outline-success">High</span></td>
<td>Access and Permissions</td>
<td><span class="badge text-outline-info">closed</span></td>
<td>19 July 2024</td>
<td>20 aug 2024</td>
<td>
<div class="btn-group dropdown-icon-none">
<button aria-expanded="false"
class="btn border-0 icon-btn b-r-4 dropdown-toggle active"
data-bs-auto-close="true" data-bs-toggle="dropdown"
type="button">
<i class="ti ti-dots-vertical"></i>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="ticket_details.html"><i
class="ti ti-eye text-primary me-2"></i> View
</a></li>
<li><a class="dropdown-item"
data-bs-target="#ticketeditModal"
data-bs-toggle="modal"
href="ticket.html#"><i
class="ti ti-edit text-success me-2"></i>
Edit </a></li>
<li><a class="dropdown-item delete-btn" href="ticket.html#"><i
class="ti ti-trash text-danger me-2"></i> Delete
</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<div class="checkbox-wrapper">
<label class="check-box m-0">
<input type="checkbox">
<span class="checkmark outline-secondary"></span>
</label>
</div>
</td>
<td>AR 0485</td>
<td>
<div class="d-flex align-items-center">
<div class="h-30 w-30 d-flex-center b-r-50 overflow-hidden text-bg-dark me-2">
<img alt="" class="img-fluid"
src="../assets/images/avatar/08.png">
</div>
Yuri Berry
</div>
</td>
<td><span class="badge text-outline-danger">lower</span></td>
<td>Service Outages</td>
<td><span class="badge text-outline-success">in progress</span></td>
<td>11 July 2024</td>
<td>30 aug 2024</td>
<td>
<div class="btn-group dropdown-icon-none">
<button aria-expanded="false"
class="btn border-0 icon-btn b-r-4 dropdown-toggle active"
data-bs-auto-close="true" data-bs-toggle="dropdown"
type="button">
<i class="ti ti-dots-vertical"></i>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="ticket_details.html"><i
class="ti ti-eye text-primary me-2"></i> View
</a></li>
<li><a class="dropdown-item"
data-bs-target="#ticketeditModal"
data-bs-toggle="modal"
href="ticket.html#"><i
class="ti ti-edit text-success me-2"></i>
Edit </a></li>
<li><a class="dropdown-item delete-btn" href="ticket.html#"><i
class="ti ti-trash text-danger me-2"></i> Delete
</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<div class="checkbox-wrapper">
<label class="check-box m-0">
<input type="checkbox">
<span class="checkmark outline-secondary"></span>
</label>
</div>
</td>
<td>AR 7506</td>
<td>
<div class="d-flex align-items-center">
<div class="h-30 w-30 d-flex-center b-r-50 overflow-hidden text-bg-dark me-2">
<img alt="" class="img-fluid"
src="../assets/images/avatar/1.png">
</div>
Zorita Serrano
</div>
</td>
<td><span class="badge text-outline-danger">lower</span></td>
<td>Data Integrity and Reports</td>
<td><span class="badge text-outline-info">closed</span></td>
<td>23 June 2024</td>
<td>12 aug 2024</td>
<td>
<div class="btn-group dropdown-icon-none">
<button aria-expanded="false"
class="btn border-0 icon-btn b-r-4 dropdown-toggle active"
data-bs-auto-close="true" data-bs-toggle="dropdown"
type="button">
<i class="ti ti-dots-vertical"></i>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="ticket_details.html"><i
class="ti ti-eye text-primary me-2"></i> View
</a></li>
<li><a class="dropdown-item"
data-bs-target="#ticketeditModal"
data-bs-toggle="modal"
href="ticket.html#"><i
class="ti ti-edit text-success me-2"></i>
Edit </a></li>
<li><a class="dropdown-item delete-btn" href="ticket.html#"><i
class="ti ti-trash text-danger me-2"></i> Delete
</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<div class="checkbox-wrapper">
<label class="check-box m-0">
<input type="checkbox">
<span class="checkmark outline-secondary"></span>
</label>
</div>
</td>
<td>AR 7450</td>
<td>
<div class="d-flex align-items-center">
<div class="h-30 w-30 d-flex-center b-r-50 overflow-hidden text-bg-dark me-2">
<img alt="" class="img-fluid"
src="../assets/images/avatar/10.png">
</div>
Jonas Alexander
</div>
</td>
<td><span class="badge text-outline-danger">lower</span></td>
<td>Integration and Third-party Services</td>
<td><span class="badge text-outline-primary">open</span></td>
<td>10 hours ago</td>
<td>2 feb 2024</td>
<td>
<div class="btn-group dropdown-icon-none">
<button aria-expanded="false"
class="btn border-0 icon-btn b-r-4 dropdown-toggle active"
data-bs-auto-close="true" data-bs-toggle="dropdown"
type="button">
<i class="ti ti-dots-vertical"></i>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="ticket_details.html"><i
class="ti ti-eye text-primary me-2"></i> View
</a></li>
<li><a class="dropdown-item"
data-bs-target="#ticketeditModal"
data-bs-toggle="modal"
href="ticket.html#"><i
class="ti ti-edit text-success me-2"></i>
Edit </a></li>
<li><a class="dropdown-item delete-btn" href="ticket.html#"><i
class="ti ti-trash text-danger me-2"></i> Delete
</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<div class="checkbox-wrapper">
<label class="check-box m-0">
<input type="checkbox">
<span class="checkmark outline-secondary"></span>
</label>
</div>
</td>
<td>AR 6034</td>
<td>
<div class="d-flex align-items-center">
<div class="h-30 w-30 d-flex-center b-r-50 overflow-hidden text-bg-dark me-2">
<img alt="" class="img-fluid"
src="../assets/images/avatar/3.png">
</div>
Howard Hatfield
</div>
</td>
<td><span class="badge text-outline-danger">lower</span></td>
<td>Improvements and Feedback</td>
<td><span class="badge text-outline-primary">open</span></td>
<td>23 June 2024</td>
<td>24 sep 2024</td>
<td>
<div class="btn-group dropdown-icon-none">
<button aria-expanded="false"
class="btn border-0 icon-btn b-r-4 dropdown-toggle active"
data-bs-auto-close="true" data-bs-toggle="dropdown"
type="button">
<i class="ti ti-dots-vertical"></i>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="ticket_details.html"><i
class="ti ti-eye text-primary me-2"></i> View
</a></li>
<li><a class="dropdown-item"
data-bs-target="#ticketeditModal"
data-bs-toggle="modal"
href="ticket.html#"><i
class="ti ti-edit text-success me-2"></i>
Edit </a></li>
<li><a class="dropdown-item delete-btn" href="ticket.html#"><i
class="ti ti-trash text-danger me-2"></i> Delete
</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<div class="checkbox-wrapper">
<label class="check-box m-0">
<input type="checkbox">
<span class="checkmark outline-secondary"></span>
</label>
</div>
</td>
<td>AR 0224</td>
<td>
<div class="d-flex align-items-center">
<div class="h-30 w-30 d-flex-center b-r-50 overflow-hidden text-bg-dark me-2">
<img alt="" class="img-fluid"
src="../assets/images/avatar/4.png">
</div>
Sakura Yamamoto
</div>
</td>
<td><span class="badge text-outline-success">High</span></td>
<td>Miscellaneous and General Inquiries</td>
<td><span class="badge text-outline-primary">open</span></td>
<td>10 hours ago</td>
<td>10 nov 2024</td>
<td>
<div class="btn-group dropdown-icon-none">
<button aria-expanded="false"
class="btn border-0 icon-btn b-r-4 dropdown-toggle active"
data-bs-auto-close="true" data-bs-toggle="dropdown"
type="button">
<i class="ti ti-dots-vertical"></i>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="ticket_details.html"><i
class="ti ti-eye text-primary me-2"></i> View
</a></li>
<li><a class="dropdown-item"
data-bs-target="#ticketeditModal"
data-bs-toggle="modal"
href="ticket.html#"><i
class="ti ti-edit text-success me-2"></i>
Edit </a></li>
<li><a class="dropdown-item delete-btn" href="ticket.html#"><i
class="ti ti-trash text-danger me-2"></i> Delete
</a></li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- ticket table end -->
</div>
<!-- Ticket end -->
</div>
</main>
</div>
</div>
<!-- Body main section ends -->
<!-- tap on top -->
<div class="go-top">
<span class="progress-value">
<i class="ti ti-arrow-up"></i>
</span>
</div>
<!-- Footer Section starts-->
<footer>
<div class="container-fluid">
<div class="row">
<div class="col-md-9 col-12">
<p class="footer-text f-w-600 mb-0">Copyright © 2025 ki-admin. All rights reserved 💖 V1.0.0</p>
</div>
<div class="col-md-3">
<div class="footer-text text-end">
<a class="f-w-500 text-primary" href="mailto:teqlathemes@gmail.com"> Need Help <i
class="ti ti-help"></i></a>
</div>
</div>
</div>
</div>
</footer>
<!-- Footer Section ends-->
</div>
<!-- delete modal -->
<div aria-hidden="true" class="modal fade" id="apiDeletModal" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-body">
<img alt="" class="img-fluid" src="../assets/images/icons/delete-icon.png">
<div class="text-center">
<h4 class="text-danger f-w-600">Are You Sure?</h4>
<p class="text-secondary f-s-16">You won't be able to revert this!</p>
</div>
<div class="text-center mt-3">
<button class="btn btn-secondary" data-bs-dismiss="modal" type="button">Close</button>
<button class="btn btn-primary" id="confirmDelete" type="button">Yes,Delet it</button>
</div>
</div>
</div>
</div>
</div>
<!-- edit modal -->
<div aria-hidden="true" aria-labelledby="ticketeditModalLabel" class="modal fade" id="ticketeditModal" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="ticketeditModalLabel">Edit Ticket</h1>
<button aria-label="Close" class="btn-close" data-bs-dismiss="modal" type="button"></button>
</div>
<div class="modal-body">
<div class="ticket-form">
<div class="row">
<div class="col-12">
<div class="mb-3">
<label class="form-label">Title</label>
<input class="form-control" placeholder="Performance Issue" type="text">
</div>
</div>
<div class="col-12">
<div class="mb-3">
<label class="form-label">Client</label>
<input class="form-control" placeholder="Michelle House" type="text">
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label class="form-label" for="priority">Priority</label>
<select class="form-select">
<option selected="">Select Priority</option>
<option value="Medium">Medium</option>
<option value="Lower">Lower</option>
<option value="High">High</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label class="form-label" for="status">Status</label>
<select class="form-select">
<option selected="">Select Status</option>
<option value="open">open</option>
<option value="inprogress">inprogress</option>
<option value="closed">closed</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label class="form-label">Date</label>
<input class="form-control" name="trip-start" type="date">
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label class="form-label">Due Date</label>
<input class="form-control" type="date">
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" data-bs-dismiss="modal" type="button">Close</button>
<button class="btn btn-primary" data-bs-dismiss="modal" type="button">Save changes</button>
</div>
</div>
</div>
</div>
<!--customizer-->
<div id="customizer"></div>
<!-- latest jquery-->
<script src="../assets/js/jquery-3.6.3.min.js"></script>
<!-- Simple bar js-->
<script src="../assets/vendor/simplebar/simplebar.js"></script>
<!-- latest jquery-->
<script src="../assets/vendor/datatable/jquery.dataTables.min.js"></script>
<!-- Bootstrap js-->
<script src="../assets/vendor/bootstrap/bootstrap.bundle.min.js"></script>
<!-- Simple bar js-->
<script src="../assets/vendor/simplebar/simplebar.js"></script>
<!-- slick-file -->
<script src="../assets/vendor/slick/slick.min.js"></script>
<!-- api js -->
<script src="../assets/js/ticket.js"></script>
<!-- phosphor js -->
<script src="../assets/vendor/phosphor/phosphor.js"></script>
<!-- App js-->
<script src="../assets/js/script.js"></script>
<!-- Customizer js-->
<script src="../assets/js/customizer.js"></script>
</body>
</html>