# Enum Translation and Badge Styling

This document guides the process of mapping Laravel Enum values to frontend translations and badge styles. This ensures consistent terminology and visual cues across the application.

## 1. Naming Convention

To link Backend Enums with Frontend Translations/Styles, we use a specific key format:

```
[model_snake_case].[column_name].[enum_value_snake_case]
```

- **model_snake_case**: The singular snake_case name of the model (e.g., `user`, `budget_detail`).
- **column_name**: The database column name (e.g., `status`, `type`, `role`).
- **enum_value_snake_case**: The specific value from the Enum, converted to snake_case (e.g., `active`, `pending_approval`).

### Example

For `User` model, `role` column, value `PresidentDirector`:
Key: `user.role.president_director`

## 2. Translation File

**File Path**: `resources/js/locales/id/translations.json` (or other locale folders)

Add the keys and their human-readable translations here.

```json
{
  "user.role.president_director": "Presiden Direktur",
  "user.role.manager": "Manajer",
  "budget.status.draft": "Draf",
  "budget.status.approved": "Disetujui"
}
```

## 3. Badge Style File

**File Path**: `resources/js/locales/badgeStyle.json`

Define the Tailwind CSS classes for badges corresponding to the keys. Use `whitespace-pre` to ensure proper spacing if needed.

```json
{
  "user.role.president_director": "badge-soft bg-purple-100 text-purple-700 ring-purple-200",
  "user.role.manager": "badge-soft bg-blue-100 text-blue-700 ring-blue-200",
  "budget.status.draft": "badge-soft bg-gray-100 text-gray-700 ring-gray-200",
  "budget.status.approved": "badge-soft bg-green-100 text-green-700 ring-green-200"
}
```

## 4. Automation in CRUD Generator

The `MakeCrudCommand` has been updated to automatically inject a `prefix` prop into generated React `Index` tables and `MainForm` selects.

### Logic

The generator detects enum-like columns:

- Columns named `status`.
- Columns configured with type `status` or `badge`.
- Form fields of type `select` that are **not** foreign keys (do not end in `_id`).

For these fields, it injects:

```jsx
prefix: "model_name.column_name"
```

### Frontend Usage

The frontend components (like `Table` or `Status`) use this `prefix` combined with the cell value to look up the translation and badge style.

```javascript
// Pseudo-code in frontend component
const translationKey = `${prefix}.${value}`
const label = t(translationKey)
const className = badgeStyle[translationKey]
```
