skills.rest
Aurelian1974
Aurelian1974COMMUNITY
Explore all skills by this author →
GitHub

ui-status-badge

Renders ERP status badges in React with design-system colors and numeric enum mapping.

Updated Aug 18, 2026
Search Tags:#typescript#react#tailwind css#erp#ui component#enum mapping#status badge
One-click install
npx skills add https://github.com/Aurelian1974/ERPEnterprise --skill ui-status-badge-aurelian1974
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-status-badge
Source: https://github.com/Aurelian1974/ERPEnterprise/tree/main/.github/skills/ui-status-badge
Command: npx skills add https://github.com/Aurelian1974/ERPEnterprise --skill ui-status-badge-aurelian1974

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? ERP interfaces display entity statuses (draft, approved, overdue, etc.) across tables, detail pages, and cards, and inconsistent colors or labels across screens create confusion. This Skill provides a single StatusBadge React component that maps every standard ERP status to the correct design-system colors and Romanian labels. ## Core Features & Use Cases - Standardized Status Rendering: Covers 11 ERP statuses (draft, processing, approved, rejected, cancelled, completed, overdue, locked, active, inactive, pending) with predefined background, text, and border colors. - Numeric Enum Support: Accepts numeric status codes from backend APIs and resolves them via a configurable statusMap, including a ready-made INVOICE_STATUS_MAP for invoice workflows. - Flexible Sizing: Supports sm and md sizes plus custom className overrides via the cn utility. - Use Case: When building an invoice list table, pass the numeric status from your API directly to the badge with INVOICE_STATUS_MAP and get consistent, correctly colored labels without writing per-status logic. ## Quick Start Add a StatusBadge component to my React ERP app that renders the approved status with the correct design-system colors.

Frequently Asked Questions about ui-status-badge

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I display status badges in a React ERP application?▼

Use a StatusBadge component that maps each status key to predefined background, text, and border colors. Pass the status string as a prop, and the component renders a styled span with the correct label and design-system colors.

How to map numeric enum status codes to strings in React?▼

Define a Record<number, StatusType> mapping object and pass it as a statusMap prop. The component checks if the status is a number, resolves it through the map, and falls back to a default like draft when no mapping exists.

Can I use this status badge with Tailwind CSS?▼

Yes, the component uses Tailwind utility classes for layout, padding, and typography, combined with inline styles for the status-specific colors. It also accepts a className prop merged through the cn utility for overrides.

What happens when an unknown status is passed to the badge?▼

If the resolved status key has no entry in the STATUS_CONFIG record, the component returns null and renders nothing. Numeric statuses without a mapping entry fall back to the draft status instead of throwing an error.

What are the limitations of inline-style status badges?▼

Inline styles for colors cannot respond to Tailwind dark-mode variants or theme tokens, so dark-mode support requires extra work. The component also ships with Romanian labels only, so other locales need label customization.

Related Skills

Explore More Software Engineering Skills→
docckerdoccker
1.0k

cc-field-mapping-safety

Validates field mappings, enum mappings, and data synchronization logic during code refactoring.

Community
Intermediate
azadshaikhazadshaikh

datagrid

Generate React datagrid views with filters, sorting, and pagination via Inertia.js.

Community
Advanced
tokijhtokijh

use-design-system/Loader

Renders a customizable, accessible loading indicator with ARIA status attributes.

Community
Basic
WorkSync-DevelopementWorkSync-Developement

theme-css-variables

Enforce CSS variable usage for all theme colors in frontend codebases.

Official
Basic