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