Industry Examples

Quick-start guide to adapting the Vertical Template for specific industries. Each example shows how to configure the template for common vertical applications.

For complete implementations with full code, see the Industry Scenarios page.

---

Overview

The Vertical Template can be quickly adapted for industry-specific applications by:

1. Defining Object Types — Model your domain entities
2. Configuring Sections — Set up navigation and pages
3. Customizing Components — Build industry-specific UI
4. Integrating AI — Add intelligent features

Below are quick-start snippets for the top 3 industry verticals.

---

1. Immigration Case Management

Core Object Type

Model immigration cases with status workflow and document tracking:

import { ObjectTypeConfig } from '@/config/types';

export const immigrationCase: ObjectTypeConfig = {
  name: 'ImmigrationCase',
  apiName: 'immigration_case',
  fields: [
    {
      name: 'caseNumber',
      type: 'text',
      label: 'Case Number',
      required: true,
      unique: true,
    },
    {
      name: 'clientName',
      type: 'text',
      label: 'Client Name',
      required: true,
    },
    {
      name: 'caseType',
      type: 'select',
      label: 'Visa Type',
      options: ['H-1B', 'Green Card', 'Citizenship', 'Family-Based', 'Asylum'],
      required: true,
    },
    {
      name: 'status',
      type: 'select',
      label: 'Status',
      options: [
        { value: 'draft', label: 'Draft' },
        { value: 'submitted', label: 'Submitted' },
        { value: 'in_review', label: 'In Review' },
        { value: 'approved', label: 'Approved' },
        { value: 'denied', label: 'Denied' },
      ],
      default: 'draft',
      required: true,
    },
    {
      name: 'assignedAttorney',
      type: 'user',
      label: 'Attorney',
      roles: ['attorney'],
    },
    {
      name: 'requiredDocuments',
      type: 'multi-select',
      label: 'Required Documents',
      options: [
        'Passport',
        'Birth Certificate',
        'Employment Letter',
        'Financial Documents',
      ],
    },
  ],
};

Tenant Config Adaptation

Configure the template for immigration workflows:

import { TenantConfig } from '@/config/types';

export const immigrationConfig: TenantConfig = {
  id: 'immigration-portal',
  name: 'Immigration Case Portal',
  theme: {
    primaryColor: '#1e40af',
    logo: '/logos/immigration.svg',
  },

  objectTypes: [immigrationCase],

  sections: [
    {
      id: 'dashboard',
      title: 'Dashboard',
      path: '/',
      icon: 'home',
      roles: ['attorney', 'admin'],
      components: [
        {
          type: 'metric-grid',
          metrics: [
            { label: 'Active Cases', value: '{{count:immigration_case}}' },
            { label: 'In Review', value: '{{count:immigration_case:status=in_review}}' },
          ],
        },
      ],
    },
    {
      id: 'cases',
      title: 'Cases',
      path: '/cases',
      icon: 'briefcase',
      roles: ['attorney', 'admin'],
      components: [
        {
          type: 'resource-list',
          objectType: 'immigration_case',
          columns: ['caseNumber', 'clientName', 'caseType', 'status'],
          searchable: true,
          filters: [
            { field: 'status', type: 'select' },
            { field: 'assignedAttorney', type: 'user' },
          ],
        },
      ],
    },
    {
      id: 'my-case',
      title: 'My Case',
      path: '/my-case',
      icon: 'user',
      roles: ['client'],
      components: [
        {
          type: 'custom',
          component: 'ClientCaseView',
        },
      ],
    },
  ],
};

Key Features

• Client Portal: Clients view case status and upload documents
• Attorney Dashboard: Manage caseload and review documents
• Document Tracking: Checklist of required vs. submitted documents
• Status Workflow: Automated transitions through review stages
• AI Integration: Document classification, deadline reminders

Quick Customization

// Add a computed field for days since filing
{
  name: 'daysSinceFiling',
  type: 'number',
  computed: true,
  compute: (record) => {
    const filing = new Date(record.filingDate);
    const now = new Date();
    return Math.floor((now.getTime() - filing.getTime()) / (1000 * 60 * 60 * 24));
  },
}

// Add custom action for submitting cases
{
  name: 'submit',
  label: 'Submit Case',
  condition: (record) => record.status === 'draft',
  handler: async (record, sdk) => {
    await sdk.resources.update('immigration_case', record.id, {
      status: 'submitted',
      submittedAt: new Date().toISOString(),
    });
  },
}

---

2. Property Management

Core Object Types

Model properties, tenants, and maintenance requests:

export const property: ObjectTypeConfig = {
  name: 'Property',
  apiName: 'property',
  fields: [
    { name: 'address', type: 'text', required: true },
    { name: 'units', type: 'number', required: true },
    { name: 'propertyType', type: 'select', options: ['apartment', 'house', 'commercial'], required: true },
    { name: 'monthlyRent', type: 'currency', required: true },
    { name: 'occupiedUnits', type: 'number', default: 0 },
    { name: 'manager', type: 'user', required: true },
  ],
};

export const maintenanceRequest: ObjectTypeConfig = {
  name: 'MaintenanceRequest',
  apiName: 'maintenance_request',
  fields: [
    { name: 'property', type: 'reference', ref: 'property', required: true },
    { name: 'unit', type: 'text', required: true },
    { name: 'category', type: 'select', options: ['plumbing', 'electrical', 'hvac', 'appliance'], required: true },
    { name: 'priority', type: 'select', options: ['low', 'medium', 'high', 'emergency'], required: true },
    { name: 'description', type: 'textarea', required: true },
    { name: 'status', type: 'select', options: ['open', 'in_progress', 'completed'], default: 'open' },
    { name: 'assignedTo', type: 'user' },
  ],
};

Dashboard Component

Create a property management dashboard:

import React from 'react';
import { useResources } from '@eai/platform-sdk/react';

export const PropertyDashboard: React.FC = () => {
  const { resources: properties } = useResources({ objectType: 'property' });
  const { resources: requests } = useResources({ objectType: 'maintenance_request' });

  const totalUnits = properties.reduce((sum, p) => sum + p.units, 0);
  const occupiedUnits = properties.reduce((sum, p) => sum + p.occupiedUnits, 0);
  const occupancyRate = totalUnits > 0 ? (occupiedUnits / totalUnits) * 100 : 0;
  const openRequests = requests.filter((r) => r.status === 'open').length;

  return (
    <div className="grid grid-cols-4 gap-4">
      <MetricCard label="Properties" value={properties.length} />
      <MetricCard label="Total Units" value={totalUnits} />
      <MetricCard label="Occupancy Rate" value={`${occupancyRate.toFixed(1)}%`} />
      <MetricCard label="Open Requests" value={openRequests} />
    </div>
  );
};

Key Features

• Property Inventory: Track all properties and units
• Tenant Management: Lease tracking and contact info
• Maintenance Tracking: Request submission and assignment
• Occupancy Analytics: Real-time occupancy metrics
• Document Storage: Leases, inspections, photos

Quick Customization

// Add rent collection tracking
{
  name: 'Rental',
  apiName: 'rental',
  fields: [
    { name: 'tenant', type: 'reference', ref: 'tenant', required: true },
    { name: 'dueDate', type: 'date', required: true },
    { name: 'amount', type: 'currency', required: true },
    { name: 'paid', type: 'boolean', default: false },
    { name: 'paidAt', type: 'datetime' },
  ],
}

// Add lease expiration alerts
{
  name: 'daysUntilExpiration',
  type: 'number',
  computed: true,
  compute: (record) => {
    const expiration = new Date(record.leaseEnd);
    const now = new Date();
    return Math.floor((expiration.getTime() - now.getTime()) / (1000 * 60 * 60 * 24));
  },
}

---

3. Healthcare Patient Portal

Core Object Types

Model patients, appointments, and medical records:

export const patient: ObjectTypeConfig = {
  name: 'Patient',
  apiName: 'patient',
  fields: [
    { name: 'firstName', type: 'text', required: true },
    { name: 'lastName', type: 'text', required: true },
    { name: 'dateOfBirth', type: 'date', required: true },
    { name: 'email', type: 'email', required: true },
    { name: 'phone', type: 'text', required: true },
    { name: 'insurance', type: 'text' },
    { name: 'primaryProvider', type: 'user', roles: ['provider'] },
    { name: 'allergies', type: 'multi-select', options: [] },
  ],
};

export const appointment: ObjectTypeConfig = {
  name: 'Appointment',
  apiName: 'appointment',
  fields: [
    { name: 'patient', type: 'reference', ref: 'patient', required: true },
    { name: 'provider', type: 'user', roles: ['provider'], required: true },
    { name: 'appointmentType', type: 'select', options: ['checkup', 'followup', 'urgent'], required: true },
    { name: 'scheduledAt', type: 'datetime', required: true },
    { name: 'status', type: 'select', options: ['scheduled', 'completed', 'cancelled'], default: 'scheduled' },
  ],
};

Patient Portal View

Build a patient-facing portal:

import React from 'react';
import { useResources, useAuth } from '@eai/platform-sdk/react';

export const PatientPortal: React.FC = () => {
  const { user } = useAuth();

  const { resources: appointments } = useResources({
    objectType: 'appointment',
    filters: { patientEmail: user?.email },
  });

  const upcomingAppointments = appointments
    .filter((a) => new Date(a.scheduledAt) > new Date())
    .sort((a, b) => new Date(a.scheduledAt).getTime() - new Date(b.scheduledAt).getTime());

  return (
    <div className="space-y-6">
      <h2 className="text-2xl font-bold">My Health Portal</h2>

      <section>
        <h3 className="text-xl font-semibold mb-4">Upcoming Appointments</h3>
        {upcomingAppointments.length === 0 ? (
          <p>No upcoming appointments</p>
        ) : (
          <div className="space-y-3">
            {upcomingAppointments.map((apt) => (
              <div key={apt.id} className="p-4 border rounded">
                <div className="font-semibold">{apt.appointmentType}</div>
                <div className="text-sm text-gray-600">
                  {new Date(apt.scheduledAt).toLocaleString()}
                </div>
                <div className="text-sm">Provider: {apt.provider.name}</div>
              </div>
            ))}
          </div>
        )}
      </section>

      <section>
        <h3 className="text-xl font-semibold mb-4">Request Appointment</h3>
        <AppointmentRequestForm />
      </section>
    </div>
  );
};

Key Features

• Patient Records: Secure access to health information
• Appointment Scheduling: Book and manage appointments
• Document Access: Lab results, prescriptions, notes
• Provider Messaging: Secure communication
• AI Features: Symptom checker, appointment reminders

Quick Customization

// Add prescription tracking
{
  name: 'Prescription',
  apiName: 'prescription',
  fields: [
    { name: 'patient', type: 'reference', ref: 'patient', required: true },
    { name: 'medication', type: 'text', required: true },
    { name: 'dosage', type: 'text', required: true },
    { name: 'prescribedBy', type: 'user', roles: ['provider'], required: true },
    { name: 'startDate', type: 'date', required: true },
    { name: 'endDate', type: 'date' },
    { name: 'refills', type: 'number', default: 0 },
  ],
}

// Add AI symptom checker
import { sdk } from '@eai/platform-sdk';

export async function checkSymptoms(symptoms: string[]) {
  const response = await sdk.ai.chat({
    messages: [
      {
        role: 'system',
        content: 'You are a medical triage assistant. Provide preliminary assessment only.',
      },
      {
        role: 'user',
        content: `Symptoms: ${symptoms.join(', ')}`,
      },
    ],
  });

  return response.content;
}

---

Additional Industries

The Vertical Template adapts to many other industries:

Education

• Use Case: Course management, enrollment, assignments
• Key Object Types: Course, Enrollment, Assignment, Grade
• Components: Course catalog, student dashboard, grade book

Government Services

• Use Case: Permit applications, review workflows
• Key Object Types: Permit, Application, Review, Fee
• Components: Public form, status lookup, review queue

Legal Practice

• Use Case: Case management, document tracking, billing
• Key Object Types: Case, Client, Document, TimeEntry
• Components: Case timeline, document vault, billing dashboard

Financial Services

• Use Case: Client accounts, transactions, reporting
• Key Object Types: Account, Transaction, Portfolio, Report
• Components: Account overview, transaction history, analytics

---

Adapting the Template

Step 1: Define Your Domain Model

Identify the core entities in your vertical:

// What are the "things" you need to track?
// Examples: Case, Property, Patient, Course, Permit, etc.

export const myObjectType: ObjectTypeConfig = {
  name: 'MyEntity',
  apiName: 'my_entity',
  fields: [
    // Define your fields here
  ],
};

Step 2: Configure Sections

Map your workflow to application sections:

export const mySections: SectionConfig[] = [
  {
    id: 'dashboard',
    title: 'Dashboard',
    path: '/',
    // Show metrics and overview
  },
  {
    id: 'main-entity',
    title: 'My Entities',
    path: '/entities',
    // List and manage entities
  },
  {
    id: 'reports',
    title: 'Reports',
    path: '/reports',
    // Analytics and insights
  },
];

Step 3: Build Custom Components

Create industry-specific UI:

// Custom dashboard widget
export const IndustryDashboard: React.FC = () => {
  const { resources } = useResources({ objectType: 'my_entity' });

  // Calculate industry-specific metrics
  const metrics = calculateMetrics(resources);

  return <MetricsDisplay metrics={metrics} />;
};

Step 4: Add AI Features

Integrate intelligent capabilities:

// AI-powered assistant
export async function getAssistance(query: string) {
  return await sdk.ai.chat({
    messages: [
      {
        role: 'system',
        content: 'You are an assistant for [your industry]. Help users with common tasks.',
      },
      {
        role: 'user',
        content: query,
      },
    ],
  });
}

---

Complete Examples

For full implementations with all code, see:

• Industry Scenarios — Complete vertical examples
• Code Snippets — Reusable code patterns
• AI Workflow Patterns — AI-assisted development

---

Getting Help

Resources

• Documentation: Browse the full docs for detailed guides
• Examples: Check Code Snippets for patterns
• AI Assistance: Use AI Workflow Patterns to accelerate development

Support

• Community Forum: Ask questions and share solutions
• GitHub Issues: Report bugs or request features
• Enterprise Support: Contact for dedicated assistance

---

Next Steps

1. Choose Your Industry: Pick the scenario closest to your use case
2. Review Full Example: See Industry Scenarios for complete code
3. Follow Tutorial: Work through Quick Start step-by-step
4. Deploy: Use the Deployment Guide to go live

Happy building with Vertical Template!