# Operations overview

Independent data works populate a metrics card and resource list in a main column, with a small informational sidebar.

Source: https://littleworks.app/docs/view-overview

![Operations overview — local preview with synthetic data](https://littleworks.app/images/views/overview.png)

Independent data works populate a metrics card and resource list in a main column, with a small informational sidebar.

## Build this example

1. Read get_context and list_views. Choose an unused view name; if adapting the name, update every work’s trigger.view and all work bindings together. Inspect existing works before deploying.
2. Deploy each manifest and self-contained JavaScript source below with deploy_function. No terminal, imports, dependencies, or bundler is needed. Record each returned deployment ID.
3. Test unpublished data works with their sample input and a fresh idempotency key. Only run sample actions when requested; they write synthetic records. Do not pass placeholder IDs or stale revisions.
4. Replace each source/action version in the view definition, including modal bindings, with the matching deployment ID. Call validate_view with the deployment object; fix any issues, then call deploy_view.
5. Open the returned manageUrl in Shopify to inspect the draft. Test empty states, form errors and refresh behaviour. Publish only when requested, using the returned version and current publishedVersion. A published page consumes one slot; its modals do not.

> **Example boundaries**
> Both data works return clearly labelled synthetic results. They make no writes and require no pre-existing collections or Shopify scopes. Replace the sample source code with bounded queries for your build. A metric labelled as a total must use a complete result, not just the first page of records. Independent sources load separately; a failure in one card does not require the other card’s query to run again.

## Metrics

### Work manifest

```json
{
  "name": "starter.starter-overview.metrics",
  "title": "Metrics",
  "feature": "starter_starter_overview",
  "environment": "preview",
  "trigger": {
    "type": "view",
    "view": "starter-overview",
    "role": "data"
  },
  "permissions": {
    "shopify": false
  },
  "inputSchema": {
    "type": "object",
    "properties": {
      "filters": {
        "type": "object"
      },
      "search": {
        "type": "string"
      },
      "sort": {
        "type": [
          "object",
          "null"
        ]
      },
      "after": {
        "type": [
          "string",
          "null"
        ]
      },
      "limit": {
        "type": "integer",
        "minimum": 1,
        "maximum": 25
      }
    },
    "required": [],
    "additionalProperties": false
  }
}
```

### Self-contained JavaScript source

```javascript
export default async () => ({requests: 18, open: 7, completed: 11});
```

### Sample invocation input

```json
{
  "filters": {},
  "search": "",
  "sort": null,
  "after": null,
  "limit": 25
}
```

## Recent

### Work manifest

```json
{
  "name": "starter.starter-overview.recent",
  "title": "Recent",
  "feature": "starter_starter_overview",
  "environment": "preview",
  "trigger": {
    "type": "view",
    "view": "starter-overview",
    "role": "data"
  },
  "permissions": {
    "shopify": false
  },
  "inputSchema": {
    "type": "object",
    "properties": {
      "filters": {
        "type": "object"
      },
      "search": {
        "type": "string"
      },
      "sort": {
        "type": [
          "object",
          "null"
        ]
      },
      "after": {
        "type": [
          "string",
          "null"
        ]
      },
      "limit": {
        "type": "integer",
        "minimum": 1,
        "maximum": 25
      }
    },
    "required": [],
    "additionalProperties": false
  }
}
```

### Self-contained JavaScript source

```javascript
export default async () => ({
  "items": [
    {
      "id": "sample-1",
      "title": "Team hoodies",
      "subtitle": "40 pieces \u00b7 New"
    },
    {
      "id": "sample-2",
      "title": "Event shirts",
      "subtitle": "100 pieces \u00b7 Reviewing"
    },
    {
      "id": "sample-3",
      "title": "Custom hats",
      "subtitle": "25 pieces \u00b7 New"
    }
  ],
  "nextCursor": null
});
```

### Sample invocation input

```json
{
  "filters": {},
  "search": "",
  "sort": null,
  "after": null,
  "limit": 25
}
```

## View definition

> **Replace placeholder versions**
> Every version below is a placeholder. Use the exact deployment ID for the named work. baseVersion:null creates a new view; when editing, read get_view and use its current version.

### validate_view / deploy_view arguments

```json
{
  "baseVersion": null,
  "definition": {
    "apiVersion": 3,
    "name": "starter-overview",
    "title": "Operations overview",
    "sources": [
      {
        "id": "totals",
        "work": "starter.starter-overview.metrics",
        "version": "00000000-0000-4000-8000-000000000001"
      },
      {
        "id": "recent",
        "work": "starter.starter-overview.recent",
        "version": "00000000-0000-4000-8000-000000000002"
      }
    ],
    "actions": [],
    "layout": {
      "type": "details",
      "main": [
        "metrics",
        "recentCard"
      ],
      "aside": [
        "about"
      ],
      "elements": {
        "metrics": {
          "type": "Metrics",
          "props": {
            "heading": "Sample activity",
            "source": "totals",
            "metrics": [
              {
                "field": "requests",
                "label": "Requests"
              },
              {
                "field": "open",
                "label": "Open requests"
              },
              {
                "field": "completed",
                "label": "Completed"
              }
            ]
          }
        },
        "recentCard": {
          "type": "Section",
          "props": {
            "heading": "Recent requests"
          },
          "children": [
            "recentList"
          ]
        },
        "recentList": {
          "type": "ResourceList",
          "props": {
            "source": "recent",
            "titleField": "title",
            "subtitleField": "subtitle"
          }
        },
        "about": {
          "type": "Section",
          "props": {
            "heading": "About this overview"
          },
          "children": [
            "note"
          ]
        },
        "note": {
          "type": "Text",
          "props": {
            "text": "Synthetic sample data. Each part of this page is loaded by its own data work. Replace the sample results with data for your build."
          }
        }
      }
    }
  }
}
```