Hartmut
d1a21a79b2
Phase 1 — globals.css: add ~45 new dark-mode override rules covering 250+ component instances at once: - bg-*-50 (red/green/blue/yellow/amber/purple/indigo/orange/brand/emerald) - border-*-200 (colored alert/badge borders) - hover:bg-*-50/100 (colored hover states) - text-amber-700/orange-600/green-600/emerald-700/brand-700 (missing overrides) - divide-gray-50 (ChargeabilityWidget sticky section dividers) Phase 2 — targeted component fixes: - Button.tsx: add dark variants to secondary (bg-gray-800) and ghost variants - DynamicFieldEditor.tsx: add dark variants to INPUT_NORMAL and INPUT_ERROR constants - WidgetContainer.tsx: replace slate-900 (blue-tinted) gradient with neutral surface-card values (rgb 22,23,26 / 16,17,19) - status-styles.ts: add explicit dark variants to PROJECT_STATUS_BADGE and ORDER_TYPE_BADGE (consistent with other badge maps in same file) Phase 3 — dashboard widget tables: - TopValueWidget: dark thead, tbody divider, row hover - DemandWidget: dark thead, tbody divider, row hover - ChargeabilityWidget: dark sticky h3 headers (bg-white→surface-card), border-gray-100 thead rows, divide-gray-50 tbodys Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
79 lines
3.2 KiB
TypeScript
79 lines
3.2 KiB
TypeScript
/**
|
|
* Consolidated badge / pill style maps for status and type columns.
|
|
* Single source of truth — imported by every table that renders status badges.
|
|
*/
|
|
|
|
export const ALLOCATION_STATUS_BADGE: Record<string, string> = {
|
|
ACTIVE: "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400",
|
|
PROPOSED: "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400",
|
|
CONFIRMED: "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400",
|
|
COMPLETED: "bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400",
|
|
CANCELLED: "bg-red-100 text-red-600 dark:bg-red-900/30 dark:text-red-400",
|
|
};
|
|
|
|
export const VACATION_STATUS_BADGE: Record<string, string> = {
|
|
PENDING: "bg-amber-100 text-amber-700 dark:bg-yellow-900/30 dark:text-yellow-400",
|
|
APPROVED: "bg-emerald-100 text-emerald-700 dark:bg-green-900/30 dark:text-green-400",
|
|
REJECTED: "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400",
|
|
CANCELLED: "bg-gray-100 text-gray-500 dark:bg-gray-700 dark:text-gray-400",
|
|
};
|
|
|
|
export const VACATION_TYPE_LABELS: Record<string, string> = {
|
|
ANNUAL: "Annual Leave",
|
|
SICK: "Sick Leave",
|
|
PUBLIC_HOLIDAY: "Public Holiday",
|
|
OTHER: "Other",
|
|
};
|
|
|
|
export const VACATION_TYPE_BADGE: Record<string, string> = {
|
|
ANNUAL: "bg-brand-100 text-brand-700 dark:bg-brand-900/30 dark:text-brand-400",
|
|
SICK: "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400",
|
|
PUBLIC_HOLIDAY: "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400",
|
|
OTHER: "bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400",
|
|
};
|
|
|
|
export const PROJECT_STATUS_BADGE: Record<string, string> = {
|
|
DRAFT: "bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300",
|
|
ACTIVE: "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400",
|
|
ON_HOLD: "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400",
|
|
COMPLETED: "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400",
|
|
CANCELLED: "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400",
|
|
};
|
|
|
|
export const ORDER_TYPE_BADGE: Record<string, string> = {
|
|
BD: "bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400",
|
|
CHARGEABLE: "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400",
|
|
INTERNAL: "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400",
|
|
OVERHEAD: "bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300",
|
|
};
|
|
|
|
/** Vacation overlay colors for timeline bars */
|
|
export const VACATION_TIMELINE_COLORS: Record<string, string> = {
|
|
ANNUAL: "bg-orange-400/40",
|
|
SICK: "bg-red-500/40",
|
|
PUBLIC_HOLIDAY: "bg-violet-400/40",
|
|
OTHER: "bg-amber-400/40",
|
|
};
|
|
|
|
export const VACATION_TIMELINE_BORDER: Record<string, string> = {
|
|
ANNUAL: "border-orange-500",
|
|
SICK: "border-red-600",
|
|
PUBLIC_HOLIDAY: "border-violet-500",
|
|
OTHER: "border-amber-500",
|
|
};
|
|
|
|
export const VACATION_TYPE_LABELS_SHORT: Record<string, string> = {
|
|
ANNUAL: "Annual",
|
|
SICK: "Sick",
|
|
PUBLIC_HOLIDAY: "Holiday",
|
|
OTHER: "Other",
|
|
};
|
|
|
|
/** Vacation calendar dot/bar colors */
|
|
export const VACATION_CALENDAR_COLORS: Record<string, string> = {
|
|
ANNUAL: "bg-brand-500",
|
|
SICK: "bg-red-400",
|
|
PUBLIC_HOLIDAY: "bg-emerald-500",
|
|
OTHER: "bg-purple-400",
|
|
};
|