@liiift-studio/sales-portal

Centralized sales portal dashboard for Liiift Studio foundry projects.

Features

• Designer authentication via Sanity CMS
• Admin multi-designer view with sequential loading
• Monthly sales data from Stripe (invoices + payment intents)
• Interactive charts and data visualization (MUI X-Charts)
• DataGrid tables with sorting, filtering, and CSV export
• Date range selection for custom export reports
• Stripe balance reconciliation checks
• Top performers analysis (typefaces and designers)
• Typeface and license type breakdowns
• Summary cards with key metrics
• Login modal with two-column layout

Installation

npm install @liiift-studio/sales-portal

Prerequisites

Peer dependencies required in your project:

{
  "@mui/material": "^5.10.0",
  "@mui/x-data-grid": "^8.0.0",
  "@mui/x-date-pickers": "^7.0.0",
  "@mui/x-charts": "^7.0.0",
  "react": "^18.0.0",
  "react-dom": "^18.0.0",
  "next": "^14.0.0",
  "dayjs": "^1.11.0",
  "slugify": "^1.6.0"
}

Note: Compatible with MUI v5 through v7 (uses Box/flexbox instead of Grid).

Quick Start

1. Create API route wrappers

pages/api/sales-portal/
  getDesignerInfo.js
  getDesigners.js
  getSales.js
  getBalanceTransactions.js

Each file is a one-line re-export:

// pages/api/sales-portal/getSales.js
export { default, config } from '@liiift-studio/sales-portal/api/getSales';

2. Create the page

// pages/sales-portal.js
import { SalesPortalPage } from '@liiift-studio/sales-portal';

export default function SalesPortal() {
  return (
    <SalesPortalPage
      texts={{
        title: 'Sales Portal',
        dashboardTitle: ' Sales',
        dashboardSubtitle: 'by designer'
      }}
    />
  );
}

3. Configure Next.js

// next.config.js
const nextConfig = {
  transpilePackages: ['@mui/x-charts', '@liiift-studio/sales-portal'],
};

4. Set environment variables

# .env.local
SANITY_STUDIO_PROJECT_ID=your_project_id
SANITY_STUDIO_DATASET=production
SANITY_STUDIO_TOKEN=your_sanity_token
STRIPE_SECRET_KEY=your_stripe_secret_key
SALES_PORTAL_ENABLED=true

API Endpoints

| Endpoint | Method | Purpose | |----------|--------|---------| | getDesignerInfo | POST | Authenticate designer, return account data | | getDesigners | GET | List all designers (admin) | | getSales | POST | Fetch sales data for a month or date range | | getBalanceTransactions | POST | Fetch Stripe balance transactions for reconciliation |

Component Exports

import {
  SalesPortalPage,  // Full page with login modal + dashboard
  LoginForm,        // Login modal component
  Sales,            // Individual designer sales dashboard
  SalesTable,       // Sales data table with CSV export
  DateRangeSalesTable, // Custom date range export table
  SalesChart,       // Revenue trend charts
  SummaryCards,     // Key metrics cards
  TopPerformers,    // Top typefaces/designers
  TypefaceList,     // Typeface breakdown
  LicenseTypeList,  // License type analysis
  PeriodComparison, // Period comparison charts
  salesTheme,       // MUI theme
} from '@liiift-studio/sales-portal';

Architecture

@liiift-studio/sales-portal
  api/
    utils/
      clients.js           # Shared Sanity + Stripe clients
      apiResponse.js       # Standardized error/success responses
      authMiddleware.js     # Request authentication
      dateUtils.js          # UTC date range utilities
      salesDataProcessor.js # Core sales data pipeline
      stripeFetcher.js      # Stripe API pagination
      feeCalculator.js      # Fee distribution + rounding
      processors/
        invoiceProcessor.js     # Stripe invoice processing
        paymentProcessor.js     # Stripe payment intent processing
  components/               # React components (Box/flexbox, no MUI Grid)
  styles/                   # SCSS + MUI theme
  hooks/                    # Custom React hooks
  utils/                    # Client-side utilities

Currently deployed on

• The Designers Foundry (staging)
• Darden Studio
• Positype

Development

1. Make changes in the sales-portal repo
2. Bump version in package.json
3. Commit and push to master
4. Publish: npm publish --access public
5. Foundry sites pick up new version on next deploy (uses ^ semver)

License

UNLICENSED