task table fixed

This commit is contained in:
Sibunnayak 2024-11-15 10:50:04 +05:30
parent 1aac5f664f
commit f2ebae81b0

View File

@ -96,116 +96,116 @@ const Tasks = () => {
<div className="col-lg-12">
<div className="card">
<div className="card-body">
<div className="row ml-0 mr-0 mb-10">
<div className="col-lg-1 col-md-2 col-6">
<div className="dataTables_length">
<label className="w-100">
Show
<select
onChange={(e) => {
setItemPerPage(e.target.value);
setCurrentPage(1);
}}
className="form-control"
disabled={loading}
>
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
entries
</label>
</div>
</div>
<div className="col-lg-3 col-md-5 col-12">
<label>TM Name:</label>
<input
type="text"
placeholder="Trade name"
className="form-control"
ref={tmnameRef}
onChange={handleSearchChange}
disabled={loading}
/>
</div>
<div className="col-lg-3 col-md-5 col-12">
<label>SC Name:</label>
<input
type="text"
placeholder="Trade name"
className="form-control"
ref={scnameRef}
onChange={handleSearchChange}
disabled={loading}
/>
</div>
<div className="col-lg-2 col-md-4 col-4">
<label>Start Date:</label>
<input
type="date"
className="form-control"
ref={startDateRef}
onChange={handleSearchChange}
disabled={loading}
/>
</div>
<div className="col-lg-2 col-md-4 col-4">
<label>End Date:</label>
<input
type="date"
className="form-control"
ref={endDateRef}
onChange={handleSearchChange}
disabled={loading}
/>
</div>
<div className="col-lg-1 col-md-4 col-4">
<label>Status:</label>
<select
className="form-control"
ref={statusnameRef}
onChange={handleSearchChange}
disabled={loading}
>
<option value="">All</option>
<option value="New">New</option>
<option value="Pending">Pending</option>
<option value="Completed">Completed</option>
</select>
</div>
</div>
<div className="row ml-0 mr-0 mb-10">
<div className="col-lg-1 col-md-2 col-6">
<div className="dataTables_length">
<label className="w-100">
Show
<select
onChange={(e) => {
setItemPerPage(e.target.value);
setCurrentPage(1);
}}
className="form-control"
disabled={loading}
>
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
entries
</label>
</div>
</div>
<div className="col-lg-3 col-md-5 col-12">
<label>TM Name:</label>
<input
type="text"
placeholder="TM name"
className="form-control"
ref={tmnameRef}
onChange={handleSearchChange}
disabled={loading}
/>
</div>
<div className="col-lg-3 col-md-5 col-12">
<label>SC Name:</label>
<input
type="text"
placeholder="SC name"
className="form-control"
ref={scnameRef}
onChange={handleSearchChange}
disabled={loading}
/>
</div>
<div className="col-lg-2 col-md-4 col-4">
<label>Start Date:</label>
<input
type="date"
className="form-control"
ref={startDateRef}
onChange={handleSearchChange}
disabled={loading}
/>
</div>
<div className="col-lg-2 col-md-4 col-4">
<label>End Date:</label>
<input
type="date"
className="form-control"
ref={endDateRef}
onChange={handleSearchChange}
disabled={loading}
/>
</div>
<div className="col-lg-1 col-md-4 col-4">
<label>Status:</label>
<select
className="form-control"
ref={statusnameRef}
onChange={handleSearchChange}
disabled={loading}
>
<option value="">All</option>
<option value="New">New</option>
<option value="Pending">Pending</option>
<option value="Completed">Completed</option>
</select>
</div>
</div>
<style jsx>{`
@media (max-width: 1200px) {
.col-lg-1 {
flex: 0 0 20%;
max-width: 20%;
}
.col-lg-2 {
flex: 0 0 37%;
max-width: 37%;
}
.col-lg-3 {
flex: 0 0 40%;
max-width: 40%;
}
}
@media (max-width: 768px) {
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-md-2,
.col-md-4,
.col-md-5,
.col-4,
.col-6,
.col-12 {
flex: 0 0 100%;
max-width: 100%;
}
}
`}</style>
<style jsx>{`
@media (max-width: 1200px) {
.col-lg-1 {
flex: 0 0 20%;
max-width: 20%;
}
.col-lg-2 {
flex: 0 0 37%;
max-width: 37%;
}
.col-lg-3 {
flex: 0 0 40%;
max-width: 40%;
}
}
@media (max-width: 768px) {
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-md-2,
.col-md-4,
.col-md-5,
.col-4,
.col-6,
.col-12 {
flex: 0 0 100%;
max-width: 100%;
}
}
`}</style>
<div className="table-responsive table-shoot mt-3">
<table
@ -230,7 +230,7 @@ const Tasks = () => {
className="text-start"
style={{ border: "1px solid" }}
>
Due Date
Task Assigned Date
</th>
<th
className="text-start"
@ -250,6 +250,12 @@ const Tasks = () => {
>
Sales Coordinator
</th>
<th
className="text-start"
style={{ border: "1px solid" }}
>
Due Date
</th>
<th
className="text-start"
style={{ border: "1px solid" }}
@ -283,7 +289,7 @@ const Tasks = () => {
className="text-start"
style={{ border: "1px solid" }}
>
{new Date(task.taskDueDate).toLocaleString(
{new Date(task.createdAt).toLocaleString(
"en-IN",
{
month: "short",
@ -310,6 +316,19 @@ const Tasks = () => {
>
{task.taskAssignedTo.name}
</td>
<td
className="text-start"
style={{ border: "1px solid" }}
>
{new Date(task.taskDueDate).toLocaleString(
"en-IN",
{
month: "short",
day: "numeric",
year: "numeric",
}
)}
</td>
<td
className="text-start"
style={{ border: "1px solid" }}