Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Weekly Review Task List Block for Vue

A Friday review in three cells: what was Completed, what is Carried over with a Carry to next week button and Carry all, and what is New for next week, with previous and next week buttons and an Undo.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Close out the week and open the next one, with this weekly review to-do list block for Vue with Ark UI. A hairline frame holds a week band ("Week of Mon 12 Oct", with previous and next week buttons) over three cells on shared hairlines: Completed, Carried over and New for next week. The first two are worked out from each task's due date and tick, so unticking a finished task moves it to Carried over and ticking a carried one moves it back. "Carry to next week" and "Carry all" add seven days to the due date and the task turns up in the third cell with a Carried Badge; a one-line Undo takes the last carry back. The third cell ends with an add field and the only colored control, a Shine Button. Tasks are Checkbox rows, empty cells use Empty, and the frame is ruled by Guides. On a phone the cells stack. For weekly reviews, retros and any product with a Friday ritual.

FAQ

How do I load my own tasks and weeks?

Replace START with your tasks, each with an id, a title, a done flag, an ISO due date and a carried flag, and list the Mondays you want to browse in WEEKS. A task belongs to the week its due date falls in. Dates are worked out against the AS_OF constant, a fixed "today"; point it at the current date when you use real data.

What stays local, and how do I save for real?

Everything. Ticking, carrying, adding and undoing change state on the page and nothing is sent anywhere, so the review resets when you reload. In your app write each change from toggle, carry, undo and add to your own store.

What does carrying a task do?

It adds seven days to the task's due date and marks it as carried. Because the cells are derived from the dates, the task leaves Carried over and appears in New for next week without any other bookkeeping. Undo subtracts the seven days again and clears the mark.

Can I look at the week before?

Yes. The previous and next buttons step between the weeks in WEEKS; at either end the button stays focusable and the status line says there is no earlier or later week. Carrying from the earlier week moves tasks into the week you were just in.

Is it accessible?

Each checkbox is named by its task title, each Carry button names its task, the three lists are labelled scroll regions that can be focused, and a single polite status line announces each move. Focus returns to the list you were working in when a row leaves it.

How does it look on a phone?

The three cells stack in order, each with the same fixed list height so nothing jumps when a row moves. In the Carried over cell each row puts its due date and its Carry button on a second line.