tabler/preview/pages/tasks-list.astro

---
import CardActions from '@ui/CardActions.astro'
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import Button from '@ui/Button.astro'
import Icon from '@ui/Icon.astro'
import Avatar from '@ui/Avatar.astro'
import Badge from '@ui/Badge.astro'
import Modal from '@shared/components/modals/Modal.astro'
import CaptureModal from '@shared/components/CaptureModal.astro'
import FormGroup from '@ui/FormGroup.astro'
import tasks from '@data/tasks.json'
import people from '@data/people.json'
import { requireIndex } from '@shared/lib/array'

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[]

// Assignable people for the add-task modal.
const selectedPeople = [5, 6, 2, 3].map((id) => requireIndex(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>
              <CardActions>
                <Button text="New Task" icon="plus" modalId="add-task" size="sm" />
              </CardActions>
            </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>

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

      <div class="modal-body">
        <form>
          <FormGroup label="Name" for="tasks-list-add-task-name">
            <input type="text" class="form-control" id="tasks-list-add-task-name" placeholder="Task name" />
          </FormGroup>
          <FormGroup label="Assigned To" for="tasks-list-add-task-assigned">
            <select class="form-select" id="tasks-list-add-task-assigned">
              <option value="">Select person</option>
              {selectedPeople.map((person) => <option value={person.id}>{person.full_name}</option>)}
            </select>
          </FormGroup>
          <FormGroup label="Priority" for="tasks-list-add-task-priority">
            <select class="form-select" id="tasks-list-add-task-priority">
              <option value="Low">Low</option>
              <option value="Medium">Medium</option>
              <option value="High">High</option>
            </select>
          </FormGroup>
          <FormGroup label="Description" for="tasks-list-add-task-description">
            <textarea class="form-control" id="tasks-list-add-task-description" rows="3" placeholder="Task description"></textarea>
          </FormGroup>
        </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>
  </CaptureModal>
</DefaultLayout>