Skip to content

Admin App

Craft Easy Admin is a universal, schema-driven CRUD admin interface that requires zero UI code. Point it at any Craft Easy API and it automatically generates a complete admin panel with list views, detail views, create/edit forms, search, filtering, pagination, and more.

Key Features

  • Zero UI code — the API's /admin/schema endpoint describes every resource, field, widget, and navigation group
  • Cross-platform — runs on web, iOS, and Android from a single React Native + Expo codebase
  • Multi-session — connect to multiple Craft Easy APIs simultaneously and switch between them
  • Light & dark mode — system-detection with manual override; API-driven theme customization
  • ETag concurrency — detects concurrent edits and offers reload/overwrite/cancel options
  • Offline-aware — persistent session storage survives app restarts

Installation

npm install @craft-easy/admin

git clone https://github.com/easy-software-system/craft-easy-admin.git
cd craft-easy-admin
npm install

Architecture Overview

┌────────────────────────────────────────────────────────┐
│                    Craft Easy Admin                     │
│                                                        │
│  ┌──────────┐   ┌──────────┐   ┌───────────────────┐  │
│  │  Schema   │──▶│Navigation│──▶│      Views        │  │
│  │ Protocol  │   │  Groups  │   │ List / Detail /   │  │
│  │ (JSON)    │   │          │   │ Create / Edit     │  │
│  └──────────┘   └──────────┘   └───────────────────┘  │
│       │                              │                  │
│       ▼                              ▼                  │
│  ┌──────────┐                 ┌───────────────────┐    │
│  │  Field    │                │   Field Widgets   │    │
│  │ Schemas   │───────────────▶│  (14 components)  │    │
│  └──────────┘                 └───────────────────┘    │
│                                                        │
│  ┌──────────┐   ┌──────────┐   ┌───────────────────┐  │
│  │ Session  │   │  Theme   │   │   API Client      │  │
│  │  Store   │   │ Provider │   │ (ETag, Auth, CRUD) │  │
│  └──────────┘   └──────────┘   └───────────────────┘  │
└────────────────────────────────────────────────────────┘

Technology Stack

Layer Technology
Framework React Native 0.83 + Expo 55
Language TypeScript 5.9
State management Zustand 5.0
Persistent storage AsyncStorage
Routing Expo Router 5.0
Platforms Web (react-native-web), iOS, Android

Data Flow

  1. Home — select or add a Craft Easy API connection
  2. Connect — fetch /admin/schema to discover resources and navigation
  3. Login — authenticate via the configured auth endpoint
  4. Admin Layout — sidebar/drawer navigation with resource groups
  5. Views — ListView → DetailView → CreateView / EditView

SLA Monitoring

Craft Easy Admin includes two built-in SLA views that are independent of the schema-driven resource system:

View Route Purpose
SLA Violations Dashboard /(admin)/sla/violations Lists violations with status filters, severity badges, and acknowledge actions
Upcoming Schedule Calendar /(admin)/sla/schedule Shows expected delivery windows for a given import template

SLA expectations are configured per import template using the ScheduleExpectationEditor widget, which defines a cron schedule, timezone, tolerance windows, grace period, severity levels, and alert channels.

See SLA Monitoring for full details.

Subpath Exports

The package exposes subpath imports for tree-shaking:

import { useAdminSchema, useResourceList } from '@craft-easy/admin/hooks';
import { FieldRenderer, ListView } from '@craft-easy/admin/components';
import { useApplicationStore } from '@craft-easy/admin/stores';
import { ThemeProvider, useTheme } from '@craft-easy/admin/context';
import type { AdminSchema, ResourceSchema } from '@craft-easy/admin/types';
import { createApiClient } from '@craft-easy/admin/lib';