feat: refine api key permissions and admin routes

apps/web/src/styles/ui.css

@@ -346,6 +346,16 @@
   box-shadow: 0 -1px 0 rgba(16, 24, 40, 0.02);
 }
 
+.shPopoverContent {
+  z-index: 80;
+  overflow: hidden;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  background: var(--popover);
+  color: var(--popover-foreground);
+  box-shadow: var(--shadow-dialog);
+}
+
 .shInput,
 .shTextarea {
   width: 100%;
@@ -517,6 +527,150 @@
 .shBadgeWarning { background: #fbf4e8; color: #8a6116; }
 .shBadgeDestructive { background: #fff3f3; color: #b42318; }
 
+.shCalendar {
+  padding: 10px;
+  background: var(--surface);
+}
+
+.shCalendarRoot,
+.shCalendarMonths,
+.shCalendarMonth,
+.shCalendarWeeks {
+  display: grid;
+  gap: 8px;
+}
+
+.shCalendarCaption {
+  position: relative;
+  display: flex;
+  min-height: 32px;
+  align-items: center;
+  justify-content: center;
+}
+
+.shCalendarCaptionLabel {
+  color: var(--text-strong);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+}
+
+.shCalendarNav {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  pointer-events: none;
+}
+
+.shCalendarNavButton {
+  display: grid;
+  width: 30px;
+  height: 30px;
+  place-items: center;
+  border: 1px solid var(--border);
+  border-radius: var(--control-radius);
+  background: var(--surface);
+  color: var(--text-normal);
+  pointer-events: auto;
+}
+
+.shCalendarNavButton:hover {
+  background: var(--accent);
+}
+
+.shCalendarChevronIcon {
+  display: block;
+}
+
+.shCalendarGrid {
+  border-collapse: collapse;
+}
+
+.shCalendarWeekdays,
+.shCalendarWeek {
+  display: grid;
+  grid-template-columns: repeat(7, 32px);
+  gap: 4px;
+}
+
+.shCalendarWeekday {
+  display: grid;
+  height: 26px;
+  place-items: center;
+  color: var(--text-soft);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+}
+
+.shCalendarDay {
+  display: grid;
+  width: 32px;
+  height: 32px;
+  place-items: center;
+}
+
+.shCalendarDayButton {
+  width: 32px;
+  height: 32px;
+  border: 0;
+  border-radius: var(--control-radius);
+  background: transparent;
+  color: var(--text-normal);
+  font-size: var(--font-size-sm);
+}
+
+.shCalendarDayButton:hover {
+  background: var(--accent);
+}
+
+.shCalendarDayOutside .shCalendarDayButton {
+  color: var(--text-faint);
+}
+
+.shCalendarDayDisabled .shCalendarDayButton {
+  cursor: not-allowed;
+  color: var(--text-faint);
+  opacity: 0.45;
+}
+
+.shCalendarDayToday .shCalendarDayButton {
+  border: 1px solid var(--ring);
+}
+
+.shCalendarDaySelected .shCalendarDayButton {
+  background: var(--primary);
+  color: var(--primary-foreground);
+}
+
+.shCalendarDayHidden {
+  visibility: hidden;
+}
+
+.dateTimePickerTrigger {
+  width: 100%;
+  justify-content: flex-start;
+  text-align: left;
+}
+
+.dateTimePickerTrigger[data-empty="true"] {
+  color: var(--text-soft);
+}
+
+.dateTimePickerPopover {
+  width: auto;
+}
+
+.dateTimePickerFooter {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 34px;
+  gap: 10px;
+  align-items: end;
+  padding: 10px;
+  border-top: 1px solid var(--border);
+  background: var(--surface);
+}
+
 .shTable {
   overflow: auto;
 }