<!-- source-hash: c41a33e86906d6bdb122fe05e0b8b30c -->
A React client component that renders a styled card UI for displaying device information, including OS type, organization, status, last seen timestamp, and tags.

## Key Components

### Interfaces
- **`Device`** — Core device data model with fields for `id`, `name`, `type`, `operatingSystem`, `organization`, `status`, `lastSeen`, `tags`, and network properties (`ipAddress`, `macAddress`, etc.)
- **`ActionButton`** — Configuration for custom action buttons with `label`, `onClick`, `variant`, and `visible` controls
- **`DeviceCardProps`** — Extends `HTMLAttributes<HTMLDivElement>` with `device`, `actions`, `statusTag`, and `onDeviceClick`

### Main Export
- **`DeviceCard`** — The primary card component rendering a two-row layout: device identity (icon, name, OS, org, action buttons) and metadata (status tag, last seen, tags)

## Usage Example

```typescript
import { DeviceCard } from './device-card'

<DeviceCard
  device={{
    name: "WORKSTATION-01",
    operatingSystem: "windows",
    organization: "Acme Corp",
    status: "active",
    lastSeen: new Date(),
    tags: ["managed", "production"],
  }}
  actions={{
    moreButton: { visible: true, onClick: () => console.log("more clicked") },
    customActions: [
      { label: "Remote", onClick: () => startRemoteSession(), visible: true }
    ]
  }}
  statusTag={{ variant: "success", label: "Online" }}
  onDeviceClick={(device) => router.push(`/devices/${device.id}`)}
/>
```

## Notes

- `operatingSystem` supports both `OSPlatformId` values and legacy strings (`macos`, `ios`, `android`); `macos` is internally mapped to `darwin` for icon resolution
- Action buttons use `e.stopPropagation()` to prevent triggering `onDeviceClick` when interacting with controls
- `lastSeen` accepts either a `string` or `Date` and formats to `YYYY/MM/DD, HH:MM`