Daily Weekly Monthly Cadence

Workflow50: Daily Weekly Monthly Cadence

An operating rhythm split into three hairline columns for daily, weekly and monthly routines, each row carrying its timing and either an owner or an accent chip where nobody is needed.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/workflow50?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/workflow50?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/workflow50.tsx plus the badge23 and button21 components it uses for the eyebrow and the action.

Quick start

The installed file exports workflow50Demo alongside the block: the exact props behind the preview above. Spread it to get a working rhythm in one line.

import { Workflow50, workflow50Demo } from "@/components/beste/block/workflow50";

export default function RhythmPage() {
  return <Workflow50 {...workflow50Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Workflow50 } from "@/components/beste/block/workflow50";

export default function RhythmPage() {
  return (
    <Workflow50
      badge={{ label: "The operating rhythm" }}
      heading="What a practice actually has to do, and how often"
      description="Three columns, and most of what sits in them runs on its own."
      automaticLabel="Automatic"
      cadences={[
        {
          label: "Every day",
          summary: "About fifteen minutes of human attention.",
          routines: [
            { when: "07:45", task: "Open the clinic list for the day", owner: "Reception" },
            {
              when: "08:00",
              task: "Reminders go out for tomorrow",
              owner: "Nobody",
              automatic: true,
            },
          ],
        },
        {
          label: "Every month",
          summary: "An afternoon at most, and it is reading rather than rebuilding.",
          routines: [
            { when: "Day 2", task: "Insurer reconciliation reviewed", owner: "Finance" },
          ],
        },
      ]}
      closing="Nine of the fourteen rows above have nobody's name against them."
      button={{ label: "See the full operating guide", href: "/docs/operating" }}
    />
  );
}

Props

type ActionLink = {
  label: string;
  href: string;
};

type Routine = {
  when: string;
  task: string;
  owner: string;
  automatic?: boolean;
};

type Cadence = {
  label: string;
  summary: string;
  routines: Routine[];
};

Behavior notes

• automatic replaces the owner line with the accent chip rather than appending to it, so an automatic routine never shows a name. The demo still sets owner: "Nobody" on those rows, which is ignored, so the field can carry a fallback if you drop the flag later.
• The chip renders only when both routine.automatic is true and automaticLabel is set, so the label can be removed globally without editing every routine.
• summary is required on each cadence and states the real cost of that rhythm, which is the argument the closing line then totals.
• The closing count in the demo is authored, not computed. The block never counts automatic rows, so keeping that sentence accurate is on you.
• Columns are flex flex-col with the routine list marked flex-1, so all three end level regardless of how many rows each holds.
• The grid lines are the gap, not borders: gap-px over a bg-border container with bg-card columns, clipped by the container's overflow-hidden.
• Routine rows carry border-t, so rules appear between rows and above the first one in each column.
• The layout is lg:grid-cols-3 only, so the three cadences stack full width on tablet where three columns of rows would be cramped.