> ## Documentation Index
> Fetch the complete documentation index at: https://dhanurgo.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Component Patterns

> Reusable UI component patterns with exact design system values

# Component Patterns

This page documents the standard component patterns used across HostMetrics. All components follow the project's muted, elegant aesthetic using exact hex values — never generic Tailwind color classes.

## Cards / Widgets

The standard card is the most common container in the app:

```tsx theme={null}
<div className="bg-white rounded-xl border border-[#e8e6e1] overflow-hidden">
  <div className="px-5 py-4 border-b border-[#e8e6e1]">
    <h3 className="font-semibold text-[#1a1a1a]">Title</h3>
    <p className="text-xs text-[#8c8c8c]">Subtitle or description</p>
  </div>
  <div className="p-5">
    {/* Card content */}
  </div>
</div>
```

Key details:

* Background: `bg-white`
* Border: `border border-[#e8e6e1]`
* Border radius: `rounded-xl`
* Header padding: `px-5 py-4`
* Body padding: `p-5`
* Header divider: `border-b border-[#e8e6e1]`

## Tables

Tables follow a consistent structure with muted headers and hover states:

```tsx theme={null}
<table className="w-full">
  <thead className="bg-[#fafaf8] border-b border-[#e8e6e1]">
    <tr className="text-left text-xs font-medium text-[#8c8c8c] uppercase tracking-wide">
      <th className="px-4 py-3">Column A</th>
      <th className="px-4 py-3">Column B</th>
      <th className="px-4 py-3">Column C</th>
    </tr>
  </thead>
  <tbody className="divide-y divide-[#e8e6e1]">
    <tr className="hover:bg-[#f0efe9]">
      <td className="px-4 py-3 text-sm text-[#4a4a4a]">Value</td>
      <td className="px-4 py-3 text-sm text-[#4a4a4a]">Value</td>
      <td className="px-4 py-3 text-sm text-[#4a4a4a]">Value</td>
    </tr>
  </tbody>
</table>
```

Key details:

* Header background: `bg-[#fafaf8]`
* Header text: `text-xs font-medium text-[#8c8c8c] uppercase tracking-wide`
* Cell padding: `px-4 py-3`
* Cell text: `text-sm text-[#4a4a4a]`
* Row dividers: `divide-y divide-[#e8e6e1]`
* Hover state: `hover:bg-[#f0efe9]`

## Status Badges

Four badge variants cover all status states in the app:

### Success / Positive

Used for: matched, completed, overpaid, active.

```tsx theme={null}
<span className="px-2 py-0.5 rounded-full text-xs font-medium bg-[#f0f5ed] text-[#6b7c5c]">
  Completed
</span>
```

### Error / Negative

Used for: failed, underpaid, critical, overdue.

```tsx theme={null}
<span className="px-2 py-0.5 rounded-full text-xs font-medium bg-[#fef2f2] text-[#b45454]">
  Overdue
</span>
```

### Warning / Pending

Used for: pending, in progress, expiring soon.

```tsx theme={null}
<span className="px-2 py-0.5 rounded-full text-xs font-medium bg-[#f5f0e6] text-[#8b7355]">
  Pending
</span>
```

### Neutral / Info

Used for: inactive, informational, default.

```tsx theme={null}
<span className="px-2 py-0.5 rounded-full text-xs font-medium bg-[#fafaf8] text-[#8c8c8c]">
  Inactive
</span>
```

### Badge Summary Table

| Variant | Background | Text Color | Use Cases                            |
| ------- | ---------- | ---------- | ------------------------------------ |
| Success | `#f0f5ed`  | `#6b7c5c`  | Completed, matched, active, overpaid |
| Error   | `#fef2f2`  | `#b45454`  | Failed, overdue, underpaid, critical |
| Warning | `#f5f0e6`  | `#8b7355`  | Pending, in progress, expiring       |
| Neutral | `#fafaf8`  | `#8c8c8c`  | Inactive, info, default              |

## Buttons

### Primary Action

```tsx theme={null}
<Button className="bg-[#6b7c5c] hover:bg-[#5a6b4d] text-white">
  Save Changes
</Button>
```

### Secondary / Outline

```tsx theme={null}
<Button variant="outline" className="border-[#e8e6e1] hover:bg-[#f0efe9]">
  Cancel
</Button>
```

### Destructive

```tsx theme={null}
<Button className="bg-[#b45454] hover:bg-[#9a4444] text-white">
  Delete
</Button>
```

## Currency Display

Currency values use consistent formatting with color-coded positive/negative amounts:

```tsx theme={null}
// Positive amount
<span className="text-[#6b7c5c] tabular-nums">+$1,250.00</span>

// Negative amount
<span className="text-[#b45454] tabular-nums">-$85.50</span>

// Neutral amount
<span className="text-[#4a4a4a] tabular-nums">$500.00</span>
```

Always apply `tabular-nums` for proper alignment in tables and lists. Use the shared currency formatter:

```typescript theme={null}
const formatCurrency = (num: number): string => {
  const formatted = Math.abs(num).toLocaleString("en-US", {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
  });
  return num < 0 ? `-$${formatted}` : `$${formatted}`;
};
```

## Empty States

When a table or list has no data, show a centered message:

```tsx theme={null}
<div className="text-center py-12">
  <FileText className="w-10 h-10 text-[#8c8c8c] mx-auto mb-3" />
  <p className="text-sm text-[#8c8c8c]">No trips found</p>
  <p className="text-xs text-[#8c8c8c] mt-1">Import a CSV to get started</p>
</div>
```

## Loading States

Use skeleton placeholders that match the content layout:

```tsx theme={null}
<div className="animate-pulse space-y-3">
  <div className="h-4 bg-[#e8e6e1] rounded w-1/3" />
  <div className="h-4 bg-[#e8e6e1] rounded w-2/3" />
  <div className="h-4 bg-[#e8e6e1] rounded w-1/2" />
</div>
```

## Form Inputs

Form fields use the shadcn/ui `Input` and `Label` components with consistent styling:

```tsx theme={null}
<div className="space-y-1.5">
  <Label className="text-xs text-[#8c8c8c] uppercase tracking-wide">
    Vehicle Name
  </Label>
  <Input
    className="border-[#e8e6e1] focus:border-[#6b7c5c] focus:ring-[#6b7c5c]"
    placeholder="e.g., 2023 Tesla Model 3"
  />
</div>
```