Optare UI Readiness & SDK Documentation

https://id.optare.one/admin

- Product Name (required, text)
- Product Slug (required, text, unique)
- Description (optional, textarea)
- Features (array of strings)
- Status (active/inactive)
- Pricing (optional)

- Organization (required, dropdown)
- Product (required, dropdown)
- Total Seats (required, number)
- Price Per Seat (required, decimal)
- Billing Cycle (required, monthly/yearly)
- Status (required, active/trial/cancelled/expired)
- End Date (optional, date picker)

Step 1: Basic Info
- Client Name (required, text)
- Client Description (optional, textarea)

Step 2: Redirect URIs
- Redirect URI (required, array of URLs)
- Add/Remove URI buttons

Step 3: CORS Origins
- Allowed Origin (optional, array of URLs)
- Add/Remove origin buttons

Step 4: Scopes
- Allowed Scopes (checkboxes)
- Standard OIDC scopes (openid, email, profile)
- Product scopes (product-specific)

Client ID: client_abc123def456
Client Secret: secret_xyz789uvw012
⚠️ Warning: Store securely, never share
[Copy] [Regenerate]

- Timestamp
- User
- Action (product.created, subscription.updated, etc.)
- Resource ID
- Changes (before/after)
- IP Address
- Status (success/failure)

https://id.optare.one/portal/dashboard

- App Name
- App Icon
- Permissions Granted
- Last Accessed: [date/time]
- [Revoke Access] button

- Product Name
- Status (Active/Trial/Expired)
- Seats: X/Y used
- Billing: Monthly/Yearly
- Price: $X.XX per seat
- Expires: [date]
- [View Details] button

┌─────────────────────────────────────┐
│ Authorize Application               │
├─────────────────────────────────────┤
│                                     │
│ Application: My App                 │
│ Requesting access to your account   │
│                                     │
│ User: John Doe (john@example.com)   │
│                                     │
│ Permissions Requested:              │
│ ✓ Email                             │
│ ✓ Profile                           │
│ ✓ Otomate Social Pro                │
│                                     │
│ [Cancel]  [Authorize]               │
│                                     │
└─────────────────────────────────────┘

// Product Management
export const createProduct = (input: ProductInput) => Promise<OptareProduct>
export const getProduct = (slug: string) => Promise<OptareProduct>
export const listProducts = () => Promise<OptareProduct[]>
 
// Subscription Management
export const createSubscription = (input: SubscriptionInput) => Promise<OptareSubscription>
export const getSubscription = (id: string) => Promise<OptareSubscription>
export const listSubscriptions = () => Promise<OptareSubscription[]>
export const updateSubscription = (id: string, updates: Partial<SubscriptionInput>) => Promise<OptareSubscription>
export const cancelSubscription = (id: string) => Promise<OptareSubscription>

interface ProductInput {
  name: string;
  slug: string;
  description?: string;
  features?: string[];
}
 
interface SubscriptionInput {
  organizationId: string;
  productId: string;
  totalSeats: number;
  pricePerSeat: number;
  billingCycle: 'monthly' | 'yearly';
  status: 'active' | 'trial' | 'cancelled' | 'expired';
  endDate?: string;
}
 
interface OptareProduct {
  id: string;
  name: string;
  slug: string;
  description?: string;
  features: string[];
  createdAt: Date;
}
 
interface OptareSubscription {
  id: string;
  organizationId: string;
  productId: string;
  totalSeats: number;
  pricePerSeat: number;
  billingCycle: 'monthly' | 'yearly';
  status: 'active' | 'trial' | 'cancelled' | 'expired';
  endDate?: Date;
  createdAt: Date;
}

import {
  createProduct,
  listProducts,
  createSubscription,
  listSubscriptions,
} from '@optare/optareid-js';
 
// Create product
const product = await createProduct({
  name: 'My Product',
  slug: 'my-product',
  features: ['Feature 1', 'Feature 2'],
});
 
// List products
const products = await listProducts();
 
// Create subscription
const subscription = await createSubscription({
  organizationId: 'org_123',
  productId: product.id,
  totalSeats: 100,
  pricePerSeat: 29.99,
  billingCycle: 'monthly',
  status: 'active',
});
 
// List subscriptions
const subscriptions = await listSubscriptions();

Client App                          Optare ID
    │                                  │
    ├─ User clicks "Login" ────────────>│
    │                                  │
    │<─ Redirect to /oauth/authorize ──┤
    │                                  │
    ├─ User logs in ────────────────────>│
    │                                  │
    │<─ Show consent screen ────────────┤
    │                                  │
    ├─ User grants consent ────────────>│
    │                                  │
    │<─ Redirect with code ─────────────┤
    │                                  │
    ├─ Exchange code for token ────────>│
    │                                  │
    │<─ Return access token ────────────┤
    │                                  │
    ├─ Use token for API calls ────────>│
    │                                  │
    │<─ Return user data ───────────────┤
    │                                  │

Client App                          Optare ID
    │                                  │
    ├─ API Request ─────────────────────>│
    │  (with access token)             │
    │                                  │
    │<─ API Response ────────────────────┤
    │                                  │

Admin Portal                        Optare ID
    │                                  │
    ├─ Admin logs in ───────────────────>│
    │                                  │
    │<─ Session created ─────────────────┤
    │                                  │
    ├─ Create product ──────────────────>│
    │  (via UI or API)                 │
    │                                  │
    │<─ Product created ─────────────────┤
    │                                  │
    ├─ Create subscription ────────────>│
    │  (via UI or API)                 │
    │                                  │
    │<─ Subscription created ───────────┤
    │                                  │