Component Preview

Spinner

Animated loading indicator in three sizes, inherits text color.

Inside a button

Usage

<script lang="ts">
  import Spinner from '$lib/components/ui/Spinner.svelte';
  let loading = $state(false);
</script>

<button disabled={loading}>
  {#if loading}<Spinner size="sm" />{/if}
  Submit
</button>

StatusBadge

Displays work ticket status as a colored pill. Uses EveWorkTicketStatus values from the API.

Small (default)

Medium (detail page)

Usage

<script lang="ts">
  import StatusBadge from '$lib/components/ui/StatusBadge.svelte';
</script>

<StatusBadge status="New" />
<StatusBadge status="Accepted" />
<StatusBadge status="Completed" size="md" />

TicketFlags

Complaint, negative feedback, and reopened badges in small (list row) and large (detail view) sizes.

Small (list rows)

Large (detail view)

Usage

<script lang="ts">
  import TicketFlags from '$lib/components/ui/TicketFlags.svelte';
</script>

<TicketFlags
  isCustomerComplaint={true}
  complaintCategory="ServiceMissed"
  isReopened={true}
  receivedNegativeFeedback={true}
  size="lg"
/>

WorkTicketRow — Statuses

Every EveWorkTicketStatus value rendered as a list row.

WorkTicketRow — Priorities

Each ServiceRequestPriority level.

WorkTicketRow — Flags

Complaint, reopened, and combined flag states.

WorkTicketRow — Metadata & States

External IDs, missing fields, NTE, and active (selected) state.

Usage

<script lang="ts">
  import WorkTicketRow from '$lib/components/ui/WorkTicketRow.svelte';
  import type { WorkTicketSummaryV2 } from '$lib/types';

  let { ticket }: { ticket: WorkTicketSummaryV2 } = $props();
  let activeId = $state('');
</script>

<WorkTicketRow
  {ticket}
  active={ticket.id === activeId}
  onclick={() => activeId = ticket.id}
/>