Admin Dashboard
A task management dashboard with a sidebar, filterable data table, status and priority badges, and row actions.
Tasks
Here's a list of your tasks for this month.
| Task | Type | Title | Status | Priority | |
|---|---|---|---|---|---|
| TASK-8782 | Feature | You can't compress the program without quantifying the open-source SSD pixel. | In Progress | Medium |
|
| TASK-7878 | Bug | Try to calculate the EXE feed, maybe it will index the multi-byte pixel! | Backlog | Medium |
|
| TASK-7839 | Feature | We need to bypass the neural TCP card! | Todo | High |
|
| TASK-5562 | Feature | The SAS interface is down, bypass the open-source pixel so we can back up the PNG bandwidth! | Backlog | Medium |
|
| TASK-8686 | Bug | I'll parse the wireless SSL protocol, that should driver the API panel! | Canceled | Medium |
|
| TASK-1280 | Documentation | Use the digital TLS panel, then you can transmit the haptic system! | Done | High |
|
| TASK-7262 | Feature | The UTF8 application is down, parse the neural bandwidth so we can back up the PNG firewall! | Done | High |
|
| TASK-1138 | Feature | Generating the driver won't do anything, we need to quantify the 1080p SMTP bandwidth! | In Progress | Medium |
|
| TASK-7184 | Bug | We need to program the back-end THX pixel! | Todo | Low |
|
| TASK-5160 | Documentation | Calculating the bus won't do anything, we need to navigate the back-end JSON protocol! | In Progress | High |
|
Rows per page
Page 1 of 10
<style>
.admin-layout {
display: grid;
grid-template-columns: 220px 1fr;
}
.admin-sidebar {
border-right: 1px solid var(--jazz-neutral-200);
padding: 1rem 0.5rem;
}
.admin-main {
display: flex;
flex-direction: column;
padding: 1.5rem 2rem;
gap: 1rem;
}
.admin-toolbar {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.task-table td:nth-child(3) {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
<div class="admin-layout">
<aside class="admin-sidebar">
<menu>
<li><small>General</small></li>
<li><a class="button ghost" href="#">Dashboard</a></li>
<li><a class="button ghost" href="#" aria-current="page">Tasks</a></li>
<li>
<a class="button ghost" href="#">
Chats
<span class="badge">3</span>
</a>
</li>
<li><small>Settings</small></li>
<li><a class="button ghost" href="#">Settings</a></li>
<li><a class="button ghost" href="#">Help Center</a></li>
</menu>
</aside>
<main class="admin-main">
<div
style="
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
"
>
<div>
<h2 style="margin: 0 0 0.25rem">Tasks</h2>
<p style="color: var(--jazz-neutral-500)">
Here's a list of your tasks for this month.
</p>
</div>
<div style="display: flex; gap: 0.5rem; flex-shrink: 0">
<button class="outlined">
<svg><!-- download --></svg> Import
</button>
<button>
<svg><!-- plus --></svg> Create
</button>
</div>
</div>
<div class="admin-toolbar">
<label>
<svg data-prefix><!-- search --></svg>
<input type="search" placeholder="Filter tasks..." />
</label>
<button class="outlined" popovertarget="status-filter">
<svg><!-- circle-dot --></svg> Status
</button>
<div id="status-filter" popover>
<menu>
<li>
<label
><input type="checkbox" checked name="status" value="todo" />
<svg><!-- circle --></svg> Todo</label
>
</li>
<li>
<label
><input
type="checkbox"
checked
name="status"
value="in-progress"
/>
<svg><!-- loader-2 --></svg> In Progress</label
>
</li>
<li>
<label
><input type="checkbox" checked name="status" value="done" />
<svg><!-- circle-check --></svg> Done</label
>
</li>
<li>
<label
><input type="checkbox" checked name="status" value="canceled" />
<svg><!-- circle-x --></svg> Canceled</label
>
</li>
<li>
<label
><input type="checkbox" checked name="status" value="backlog" />
<svg><!-- circle-dashed --></svg> Backlog</label
>
</li>
</menu>
</div>
<button class="outlined" popovertarget="priority-filter">
<svg><!-- arrow-up --></svg> Priority
</button>
<div id="priority-filter" popover>
<menu>
<li>
<label
><input type="checkbox" checked name="priority" value="high" />
<svg><!-- arrow-up --></svg> High</label
>
</li>
<li>
<label
><input type="checkbox" checked name="priority" value="medium" />
<svg><!-- minus --></svg> Medium</label
>
</li>
<li>
<label
><input type="checkbox" checked name="priority" value="low" />
<svg><!-- arrow-down --></svg> Low</label
>
</li>
</menu>
</div>
<button class="outlined" style="margin-left: auto">
<svg><!-- adjustments-horizontal --></svg> View
</button>
</div>
<table class="task-table" style="--cols: 90px 120px 1fr 130px 100px 51px">
<thead>
<tr>
<th>Task</th>
<th>Type</th>
<th>Title</th>
<th>Status</th>
<th>Priority</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><small>TASK-8782</small></td>
<td><span class="badge color2">Feature</span></td>
<td>You can't compress the program without quantifying...</td>
<td>
<svg><!-- circle --></svg> In Progress
</td>
<td>
<svg><!-- minus --></svg> Medium
</td>
<td>
<button
class="ghost square"
style="anchor-name: --row-1"
popovertarget="row-actions-1"
>
<svg><!-- dots --></svg>
</button>
<div
id="row-actions-1"
popover
style="
position-anchor: --row-1;
top: anchor(bottom);
right: anchor(right);
left: unset;
margin: 0;
"
>
<menu>
<li><button class="ghost">Edit</button></li>
<li><button class="ghost">Duplicate</button></li>
<li><hr /></li>
<li><button class="ghost">Mark as done</button></li>
<li><hr /></li>
<li><button class="ghost destructive">Delete</button></li>
</menu>
</div>
</td>
</tr>
</tbody>
</table>
<small
style="display: flex; align-items: center; justify-content: space-between"
>
<span>0 of 100 row(s) selected.</span>
<div style="display: flex; align-items: center; gap: 1rem">
<span>Rows per page</span>
<select style="width: auto">
<option>10</option>
</select>
<span>Page 1 of 10</span>
<fieldset role="group">
<button class="outlined square" disabled>
<svg><!-- chevrons-left --></svg>
</button>
<button class="outlined square" disabled>
<svg><!-- chevron-left --></svg>
</button>
<button class="outlined square">
<svg><!-- chevron-right --></svg>
</button>
<button class="outlined square">
<svg><!-- chevrons-right --></svg>
</button>
</fieldset>
</div>
</small>
</main>
</div>