#97スコア 4.5/5飲食・レストラン

AI に飲食店のシフト管理を作らせてみた — シフト表は ScheduleGrid の本丸、でも「過不足タイル」は手組み（やってみた #97）

ルート: /restaurant-shifts
デスクトップ表示
モバイル表示

375px のビューポートで撮影。縦長のページはフレーム内をスクロールします。

解説記事

AI に飲食店のシフト管理を作らせてみた — シフト表は ScheduleGrid の本丸、でも「過不足タイル」は手組み（やってみた #97）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。飲食・レストラン 3枚目——週次シフト管理（スタッフ×曜日のシフト表＋人員過不足＋人件費）。

#96リアルタイム運営とは別の、週次の労務系。観測：ScheduleGrid（シフト表の本丸）＋StatGroup の継続再利用＋StatusTile族の再出現。

結果 — 4.5/5

tsc/build 緑・375px 横溢れゼロ・0 console error。週次シフト表・人員過不足・人件費・スタッフ個別ドリルイン。

観測 — シフト表は ScheduleGrid、人件費は StatGroup＋formatCurrency

cold AI に「(a)スタッフ×曜日シフト表 (b)サマリ指標行 (c)人物セル (d)時間帯の必要vs配置タイル」を聞いた：

(a)(b)(c) は全部既製——ScheduleGrid（「JSDoc が literally 『shift rosters (staff×days)』」・per-cell tone・通し/未確定/休・sticky 行ヘッダ・[contain:paint] で広い表が375pxを破らない・「headline win」）・StatGroup（人件費サマリ・「the summary metric strip, verbatim」）・PersonCell（スタッフ）。Meter(配置/必要 fill-is-good＋人件費率 higher-is-worse target)・formatCurrency/formatPercent（JPY/ja-JP 既定・「fintech 画面が再発明し続けたのを内蔵」）も既製。

ScheduleGrid（教育#70→介護→飲食予約#95→シフト#97）と StatGroup（#95→#96→#97 飲食3連続）が、業界も用途も越えて再利用。スタッフ×曜日のシフト表は ScheduleGrid のド本命用途。

唯一の手組み＝(d) 人員過不足タイル（StatusTile族 2回目）

(d) 時間帯の必要vs配置タイルだけ手組み＝Card+Badge(充足/欠員)+Meter+手書きの7セル曜日別ミニグリッド（充足/欠員の緑赤）で。「required-vs-actual capacity の component が無い・N期間の per-period status-dot strip primitive も無い——Meter は週合計を綺麗に出すが7日分の内訳は出ない」。

→ #344 に追記（ops-tile族 2回目）。#96 のフロア StatusTile（状態を持つモノ）と #97 の coverage タイル（必要vs配置をN期間で）は同じ ops-tile 族の2つの顔。cold AI 曰く「any capacity vs demand over N periods view」。#96＋#97＝族として2回独立手組み＝あと1回で3回ルール。StatusTile＋CoverageMeter/per-period strip をまとめて scope する候補。

起票（追記）

  • 🟢 *VariantKey 型が barrel 未export（BadgeVariantKey が無く NonNullable<BadgeProps["variant"]> に・variant マップを型付けできない・#330）。
  • 🔵 ScheduleGrid が calendar 系と名前で競合・docs が PascalCase で404（kebab /schedule-grid が正・「source JSDoc が docs より有用」・#325）。

今回 src build なし（4.5/5・ScheduleGrid/StatGroup/PersonCell/Meter/formatCurrency 再利用が成果）。

学び — ops-tile 族が、3回ルールに近づいている

人物階層（PersonCell→RelationshipRow→StatGroup）に続き、ops の水平階層が立ち上がりつつある：#96 フロアの StatusTile（状態を持つモノを1タイル）、#97 シフトの CoverageMeter（必要vs配置をN期間で）。どちらも「状態/容量を持つ何かを1タイル」で、飲食/医療(病床)/物流(ドック)/製造(設備) を横断する。族として2回独立手組み＝3回目で結晶化する。一方で ScheduleGrid/StatGroup/formatCurrency の越境が示すとおり、表・指標・金額の骨格はもう揃っている——cold-test は「次に作る水平階層」を、また業界横断の反復から1段見つけた。

次回予告（やってみた #98）

  • 飲食4-5枚目（売上ダッシュボード/在庫発注 など）or 次業界。StatusTile族 3回目＝build トリガーの観測。

試す

<!-- 公開前: 相互URL差込／スクショ確定／EN(dev.to)ミラー -->

使用した @gunjo/ui コンポーネント

この画面のソースが直接 import している部品です。

AlertAlertDescriptionAlertTitleBadgeBadgePropsButtonCardCardContentCardDescriptionCardHeaderCardTitleContainerMetadataListMeterPersonCellProgressScheduleCellScheduleCellToneScheduleGridSeparatorSheetSheetContentSheetDescriptionSheetHeaderSheetTitleStatGroupTabsTabsContentTabsListTabsTriggerTag

cold AI が組み上げた実コード

ファイル名をクリックでソースを展開できます。