UI Updates

Updated some pages pages to be more consistent.

src/features/owner/components/owner-block-time-button.tsx

@@ -57,9 +57,9 @@ export function OwnerBlockTimeButton({ staffId, staffName, date }: { staffId: st
 
   return (
     <>
-      <Button variant="secondary" size="sm" onClick={() => setOpen(true)}>
+      <Button variant="secondary" size="sm" aria-label="Block Time" onClick={() => setOpen(true)}>
         <CalendarOff className="h-4 w-4" aria-hidden="true" />
-        Block Time
+        <span className="hidden sm:inline">Block Time</span>
       </Button>
       <BottomSheet open={open} onClose={handleClose} title={`Block Time — ${staffName}`}>
         <div className="space-y-4 pb-2">

src/features/owner/components/staff-filter-pills.tsx

@@ -0,0 +1,71 @@
+import Image from "next/image";
+import Link from "next/link";
+import { Users } from "lucide-react";
+import { cn } from "@/lib/utils/cn";
+
+export interface StaffFilterOption {
+  id: string;
+  name: string;
+  avatarUrl?: string | null;
+  /** Working-hours range for the day (e.g. "10:00 AM – 7:00 PM"), or null if off entirely. */
+  hoursLabel: string | null;
+}
+
+const CARD_CLASS = "flex shrink-0 items-center gap-2 rounded-2xl border bg-white px-3 py-2 text-left";
+
+/** Avatar + name + hours cards for filtering the all-staff calendar by barber — an "All Staff" card plus one per active staff member, matching the day grid's own column-header style so the filter row and the grid read as one system. */
+export function StaffFilterPills({
+  options,
+  selectedId,
+  hrefFor,
+}: {
+  options: StaffFilterOption[];
+  /** undefined = "All Staff" selected. */
+  selectedId?: string;
+  hrefFor: (staffId: string | null) => string;
+}) {
+  return (
+    <div className="flex gap-2 overflow-x-auto px-6 py-1">
+      <Link
+        href={hrefFor(null)}
+        aria-current={!selectedId ? "true" : undefined}
+        className={cn(CARD_CLASS, !selectedId ? "border-ink ring-ink ring-1" : "border-line")}
+      >
+        <span className="bg-stone text-muted flex h-9 w-9 shrink-0 items-center justify-center rounded-full border border-line">
+          <Users className="h-4 w-4" aria-hidden="true" />
+        </span>
+        <span className="min-w-0">
+          <p className="text-sm font-bold">All Staff</p>
+          <p className="text-muted text-[10px]">Everyone</p>
+        </span>
+      </Link>
+
+      {options.map((option) => (
+        <Link
+          key={option.id}
+          href={hrefFor(option.id)}
+          aria-current={selectedId === option.id ? "true" : undefined}
+          className={cn(CARD_CLASS, selectedId === option.id ? "border-ink ring-ink ring-1" : "border-line")}
+        >
+          {option.avatarUrl ? (
+            <Image
+              src={option.avatarUrl}
+              alt=""
+              width={36}
+              height={36}
+              className="h-9 w-9 shrink-0 rounded-full border border-line object-cover"
+            />
+          ) : (
+            <div className="bg-stone text-muted flex h-9 w-9 shrink-0 items-center justify-center rounded-full border border-line text-sm font-bold">
+              {option.name.charAt(0)}
+            </div>
+          )}
+          <span className="min-w-0">
+            <p className="truncate text-sm font-bold">{option.name}</p>
+            <p className="text-muted truncate text-[10px]">{option.hoursLabel ?? "Off today"}</p>
+          </span>
+        </Link>
+      ))}
+    </div>
+  );
+}