tabler/preview/pages/tasks-list.astro

---
// Port of preview/pages/tasks-list.html (layout: default)
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
import Button from '@shared/components/Button.astro';
import Icon from '@shared/components/Icon.astro';
import Avatar from '@shared/components/ui/Avatar.astro';
import Badge from '@shared/components/ui/Badge.astro';
import Modal from '@shared/components/modals/Modal.astro';
import tasks from '@data/tasks.json';
import people from '@data/people.json';

interface Person {
	id?: string;
	full_name?: string;
	photo?: string;
	[key: string]: unknown;
}

interface Task {
	name?: string;
	assigned_to?: number;
	due_date?: string;
	'due-date'?: string;
	priority?: string;
	[key: string]: unknown;
}

interface Column {
	name: string;
	tasks: Task[];
}

const columns = (tasks as { columns: Column[] }).columns;
const peopleList = people as Person[];

// add-task modal: assignable people (parts/modals/add-task.html — "5,6,2,3")
const selectedPeople = [5, 6, 2, 3].map((id) => peopleList[id - 1]);
---

<DefaultLayout title="Task List" pageHeader="Task List" pageMenu="extra.tasks.list">
	<div class="row">
		<div class="col-12">
			{
				columns.map((section) => (
					<div class="card mb-4">
						<div class="card-header">
							<h3 class="card-title mb-0">{section.name}</h3>
							<div class="card-actions">
								<Button text="New Task" icon="plus" modalId="add-task" size="sm" />
							</div>
						</div>
						<div class="table-responsive">
							<table class="table table-vcenter card-table table-selectable">
								<thead>
									<tr>
										<th class="w-1">
											<input
												type="checkbox"
												class="form-check-input align-middle table-selectable-check"
												aria-label="Select all tasks"
											/>
										</th>
										<th class="w-50">Name</th>
										<th class="d-none d-xl-table-cell">Assigned To</th>
										<th class="d-none d-xxl-table-cell">Due Date</th>
										<th>Priority</th>
										<th class="text-end">Actions</th>
									</tr>
								</thead>
								<tbody>
									{section.tasks.map((task) => {
										const person = task.assigned_to
											? peopleList[task.assigned_to - 1]
											: undefined;
										return (
											<tr>
												<td>
													<input
														type="checkbox"
														class="form-check-input align-middle table-selectable-check"
														aria-label="Select task"
													/>
												</td>
												<td>{task.name}</td>
												<td>
													{task.assigned_to && person ? (
														<div class="d-flex align-items-center">
															<Avatar personId={task.assigned_to} size="xs" class="me-2" />
															<span>{person.full_name}</span>
														</div>
													) : (
														<span class="text-secondary">Unassigned</span>
													)}
												</td>
												<td class="text-secondary">
													{task.due_date ? (
														<Fragment>
															<Icon name="calendar" class="me-1" />
															{task.due_date}
														</Fragment>
													) : task['due-date'] ? (
														<Fragment>
															<Icon name="calendar" class="me-1" />
															{task['due-date']}
														</Fragment>
													) : (
														<span class="text-muted">—</span>
													)}
												</td>
												<td>
													{task.priority === 'High' ? (
														<Badge text="High" color="red" light />
													) : task.priority === 'Medium' ? (
														<Badge text="Medium" color="yellow" light />
													) : task.priority === 'Low' ? (
														<Badge text="Low" color="blue" light />
													) : (
														<Badge text="—" light />
													)}
												</td>
												<td class="text-end">
													<Button text="View" size="sm" />
												</td>
											</tr>
										);
									})}
								</tbody>
							</table>
						</div>
					</div>
				))
			}
		</div>
	</div>

	<Modal modalId="add-task">
		<div class="modal-header">
			<h4 class="modal-title">Add task</h4>
			<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
		</div>

		<div class="modal-body">
			<form>
				<div class="mb-3">
					<label class="form-label">Name</label>
					<input type="text" class="form-control" placeholder="Task name" />
				</div>
				<div class="mb-3">
					<label class="form-label">Assigned To</label>
					<select class="form-select">
						<option value="">Select person</option>
						{
							selectedPeople.map((person) => (
								<option value={person.id}>{person.full_name}</option>
							))
						}
					</select>
				</div>
				<div class="mb-3">
					<label class="form-label">Priority</label>
					<select class="form-select">
						<option value="Low">Low</option>
						<option value="Medium">Medium</option>
						<option value="High">High</option>
					</select>
				</div>
				<div class="mb-3">
					<label class="form-label">Description</label>
					<textarea class="form-control" rows="3" placeholder="Task description"></textarea>
				</div>
			</form>
		</div>

		<div class="modal-footer">
			<button type="button" class="btn" data-bs-dismiss="modal">Cancel</button>
			<button type="button" class="btn btn-primary ms-auto" data-bs-dismiss="modal">
				Save
			</button>
		</div>
	</Modal>
</DefaultLayout>