Task Management Dashboard - Copy this Html, Bootstrap Component to your project

<div-class="container-mt-5">-<h2-class="mb-4-text-center-text-dark-fw-bold">My-Tasks</h2>-<!---Displaying-the-logged-in-user's-name-and-emoji--->-<div-class="user-info-mb-4-text-center">-<h3-class="text-muted">Welcome,-<span-id="userName"></span>-<span-id="userEmoji">😊</span></h3>-</div>-<div-class="quote-text-center-mb-4">-<h4-class="fw-bold">Quote-of-the-Day</h4>-<p-id="quoteText"-class="fst-italic-text-muted"></p>-<p><strong>--<span-id="quoteAuthor"></span></strong></p>-</div>-<!---Task-Filter-&-Sort--->-<div-class="mb-4-d-flex-flex-wrap-justify-content-between-align-items-center-gap-3">-<!---Priority-Filter--->-<div-class="d-flex-align-items-center">-<label-for="priorityFilter"-class="form-label-mb-0-me-2-fw-semibold">Priority:</label>-<select-id="priorityFilter"-class="form-select-form-select-sm-w-auto">-<option-value="all">All</option>-<option-value="low">Low</option>-<option-value="medium">Medium</option>-<option-value="high">High</option>-</select>-</div>-<!---Search-Input--->-<div-class="input-group-w-50">-<input-type="text"-id="searchInput"-class="form-control-rounded-pill"-placeholder="Search-tasks">-</div>-<!---Date-Range-Filter--->-<div-class="d-flex-align-items-center">-<label-for="dateRangeFilter"-class="form-label-mb-0-me-2-fw-semibold">Date-Range:</label>-<input-type="text"-id="dateRangeFilter"-class="form-control-form-control-sm-w-auto"-placeholder="Select-Date-Range">-</div>-<!---Add-New-Task-Button--->-<button-class="btn-btn-success-btn-sm-rounded-pill-d-flex-align-items-center"-data-bs-toggle="modal"-data-bs-target="#addTaskModal">-<i-class="bi-bi-plus-circle-me-2"></i>-Add-Task-</button>-</div>-<!---Task-Table--->-<div-class="table-responsive-shadow-lg-rounded-3-bg-white-mb-4">-<table-class="table-table-bordered-table-striped-table-hover-align-middle"-id="taskTable">-<thead-class="table-dark-text-center">-<tr>-<th-scope="col">Title</th>-<th-scope="col">Status</th>-<th-scope="col">Start-Time</th>-<th-scope="col">End-Time</th>-<th-scope="col">Priority</th>-<th-scope="col">Actions</th>-</tr>-</thead>-<tbody-id="taskList"-class="text-center">-<!---Dynamic-Task-Rows--->-</tbody>-</table>-</div>-</div>-<!---Add-New-Task-Modal--->-<div-class="modal-fade"-id="addTaskModal"-tabindex="-1"-aria-labelledby="addTaskModalLabel"-aria-hidden="true">-<div-class="modal-dialog">-<div-class="modal-content">-<div-class="modal-header">-<h5-class="modal-title"-id="addTaskModalLabel">Add-New-Task</h5>-<button-type="button"-class="btn-close"-data-bs-dismiss="modal"-aria-label="Close"></button>-</div>-<div-class="modal-body">-<form-id="addTaskForm">-@csrf-<div-class="mb-3">-<label-for="taskTitle"-class="form-label">Title<spam-style="color:red">*</spam></label>-<input-type="text"-class="form-control"-id="taskTitle"-name="title"-required>-</div>-<div-class="mb-3">-<label-for="taskDescription"-class="form-label">Description<spam-style="color:red">*</spam></label>-<textarea-class="form-control"-id="taskDescription"-name="description"-rows="5"-required></textarea>-</div>-<div-class="mb-3">-<label-for="startTime"-class="form-label">Start-Time<spam-style="color:red">*</spam></label>-<input-type="datetime-local"-class="form-control"-id="startTime"-name="start_time"->-</div>-<div-class="mb-3">-<label-for="endTime"-class="form-label">End-Time</label>-<input-type="datetime-local"-class="form-control"-id="endTime"-name="end_time">-</div>-<div-class="mb-3">-<label-for="priority"-class="form-label">Priority<spam-style="color:red">*</spam></label>-<select-class="form-select"-id="priority"-name="priority"-required>-<option-value="low">Low</option>-<option-value="medium">Medium</option>-<option-value="high">High</option>-</select>-</div>-<div-class="mb-3">-<label-for="taskStatus"-class="form-label">Status<spam-style="color:red">*</spam></label>-<select-class="form-select"-id="taskStatus"-name="status"-required>-<option-value="just_started">Just-Started</option>-<option-value="30_percent_completed">30%-Completed</option>-<option-value="60_percent_completed">60%-Completed</option>-<option-value="80_percent_completed">80%-Completed</option>-<option-value="almost_done">Almost-Done</option>-<option-value="completed">Completed</option>-</select>-</div>-<div-class="modal-footer">-<button-type="button"-class="btn-btn-secondary"-data-bs-dismiss="modal">Close</button>-<button-type="submit"-class="btn-btn-primary">Add-Task</button>-</div>-</form>-</div>-</div>-</div>-</div>-<!---Edit-Task-Modal--->-<div-class="modal-fade"-id="editTaskModal"-tabindex="-1"-aria-labelledby="editTaskModalLabel"-aria-hidden="true">-<div-class="modal-dialog">-<div-class="modal-content">-<div-class="modal-header">-<h5-class="modal-title"-id="editTaskModalLabel">Edit-Task</h5>-<button-type="button"-class="btn-close"-data-bs-dismiss="modal"-aria-label="Close"></button>-</div>-<div-class="modal-body">-<form-id="editTaskForm">-@csrf-@method('PUT')-<input-type="hidden"-id="edit_task_id"-name="task_id">-<div-class="mb-3">-<label-for="edit_title"-class="form-label">Title</label>-<input-type="text"-class="form-control"-id="edit_title"-name="title"-required>-</div>-<div-class="mb-3">-<label-for="edit_description"-class="form-label">Description</label>-<textarea-class="form-control"-id="edit_description"-name="description"-rows="5"-required></textarea>-</div>-<div-class="mb-3">-<label-for="edit_start_time"-class="form-label">Start-Time</label>-<input-type="datetime-local"-class="form-control"-id="edit_start_time"-name="start_time"->-</div>-<div-class="mb-3">-<label-for="edit_end_time"-class="form-label">End-Time</label>-<input-type="datetime-local"-class="form-control"-id="edit_end_time"-name="end_time">-</div>-<div-class="mb-3">-<label-for="edit_priority"-class="form-label">Priority</label>-<select-class="form-select"-id="edit_priority"-name="priority"-required>-<option-value="low">Low</option>-<option-value="medium">Medium</option>-<option-value="high">High</option>-</select>-</div>-<div-class="mb-3">-<label-for="edit_status"-class="form-label">Status</label>-<select-class="form-select"-id="edit_status"-name="status"-required>-<option-value="just_started">Just-Started</option>-<option-value="30_percent_completed">30%-Completed</option>-<option-value="60_percent_completed">60%-Completed</option>-<option-value="80_percent_completed">80%-Completed</option>-<option-value="almost_done">Almost-Done</option>-<option-value="completed">Completed</option>-</select>-</div>-<div-class="modal-footer">-<button-type="button"-class="btn-btn-secondary"-data-bs-dismiss="modal">Close</button>-<button-type="submit"-class="btn-btn-primary">Update-Task</button>-</div>-</form>-</div>-</div>-</div>-</div>