Configuration Frontend CRUD React v2

A comprehensive CRUD “Admin” frontend for configuration management, handling multi-tenant parameters, hostname management, user administration, and system settings within the PHPCreation ecosystem.

GitHub Repository Live Demo (Dev)API Documentation

Project Overview

Purpose

This project serves as the central configuration management system for the PHPCreation ecosystem, managing multi-tenant parameters, hostname configurations, user accounts, ownership relationships, and tenant settings.

Real Implementation Details

Bundle Name: configCrud
Base API: config.solidservice.link
Entity Count: 5 core entities + 518 available entity types
Multi-tenant: Full tenant isolation and management
Authentication: OAuth 2.0 with SSO integration

Core Entities Managed

Hostnames - Domain and hostname configurations per tenant
Ownerships - User ownership relationships and permissions
Parameters - Multi-tenant configuration parameters
Tenants - Tenant management and configuration
Users - User accounts with basic profile management

Environment Configuration

Development Environment (.env.local)

Development


# App Environment
APP_ENV=dev
NEXT_PUBLIC_APP_ENV=dev
NEXT_PUBLIC_URL_ENV=".dev."
NEXT_PUBLIC_TENANT='phpc'
 
# API Configuration
 
PHPR_CRUD='https://phpc.dev.config.solidservice.link/api/v1'
PHPR_AUTH='api/login_check'
NEXT_PUBLIC_API_ENDPOINT_VERSION='api/v1'
NEXT_PUBLIC_API_PHPR_ENV='.dev.'
 
# Config API
 
CONFIG_API_URL='https://config.solidservice.link/$CONFIG_API_VERSION'
CONFIG_API_VERSION='api/v1'
CONFIG_API_LOGIN_URL='https://config.solidservice.link/api/login_check'
 
# Status & Documentation
 
NEXT_PUBLIC_API_STATUS_ENDPOINT='https://phpc.dev.config.solidservice.link/status'
NEXT_PUBLIC_API_DOCUMENTATION='https://phpc.dev.config.solidservice.link/api/v1'
 
# Authentication & OAuth
 
LOGIN_BASE_URL="dev.login.phpr.link"
OAUTH_API_BASE_URL="dev.login.solidservice.link"
LOGIN_AUTHORIZE_SCHEME="https://"
OAUTH_CALLBACK_ENDPOINT="/api/oauth/callback"
OAUTH_AUTHORIZE_SCHEME="https://"
OAUTH_API_TOKEN_SCHEME="https://"
 
# DynamoDB Caching
 
DYNAMODB_DSN_APP_CACHE='dynamodb://us-east-1/configuration-frontend-crud-react-v2-dev-app-cache'
DYNAMODB_DSN_CONFIG='dynamodb://us-east-1/configuration-frontend-crud-react-v2-dev-config'
 
# Icons and Assets
 
NEXT_PUBLIC_ICONS_URL=https://icons.phpr.link/
 
# Bundle Configuration
 
NEXT_PUBLIC_DROPDOWN_API_SUFFIX=0
NEXT_PUBLIC_Role_Accessibility_Check=0
NEXT_PUBLIC_KVS_DATA_STORE_TOGGLE=0
 
# Configuration Flags
 
CONFIG_SHOULD_TEST_HOSTNAME=0
CONFIG_DONT_GET_BY_FILE=1
CONFIG_DONT_GET_BY_CACHE=1
CONFIG_GET_PARAMETERS_BY_HOSTNAME='1'

Production


# App Environment
APP_ENV=production
NEXT_PUBLIC_APP_ENV=production
NEXT_PUBLIC_URL_ENV=""
NEXT_PUBLIC_TENANT='phpc'
 
# API Configuration
PHPR_CRUD='https://phpc.config.solidservice.link/api/v1'
PHPR_AUTH='api/login_check'
NEXT_PUBLIC_API_ENDPOINT_VERSION='api/v1'
 
# Config API
CONFIG_API_URL='https://config.solidservice.link/api/v1'
CONFIG_API_VERSION='api/v1'
CONFIG_API_LOGIN_URL='https://config.solidservice.link/api/login_check'
 
# Status & Documentation
NEXT_PUBLIC_API_STATUS_ENDPOINT='https://phpc.config.solidservice.link/status'
NEXT_PUBLIC_API_DOCUMENTATION='https://phpc.config.solidservice.link/api/v1'
 
# Authentication & OAuth
LOGIN_BASE_URL="login.phpr.link"
OAUTH_API_BASE_URL="login.solidservice.link"
LOGIN_AUTHORIZE_SCHEME="https://"
OAUTH_CALLBACK_ENDPOINT="/api/oauth/callback"
 
# DynamoDB Caching
DYNAMODB_DSN_APP_CACHE='dynamodb://us-east-1/configuration-frontend-crud-react-v2-prod-app-cache'
DYNAMODB_DSN_CONFIG='dynamodb://us-east-1/configuration-frontend-crud-react-v2-prod-config'
 
# Bundle Configuration
NEXT_PUBLIC_DROPDOWN_API_SUFFIX=0
NEXT_PUBLIC_Role_Accessibility_Check=1
NEXT_PUBLIC_KVS_DATA_STORE_TOGGLE=1
 
# Configuration Flags
CONFIG_SHOULD_TEST_HOSTNAME=1
CONFIG_DONT_GET_BY_FILE=0
CONFIG_DONT_GET_BY_CACHE=0
CONFIG_GET_PARAMETERS_BY_HOSTNAME='1'

Local


# App Environment
APP_ENV=local
NEXT_PUBLIC_APP_ENV=local
NEXT_PUBLIC_URL_ENV=".local."
NEXT_PUBLIC_TENANT='phpc'
 
# API Configuration
 
PHPR_CRUD='http://localhost:8080/api/v1'
PHPR_AUTH='api/login_check'
CONFIG_API_URL='http://localhost:8080/api/v1'
 
# Authentication & OAuth
 
LOGIN_BASE_URL="localhost:8081"
OAUTH_API_BASE_URL="localhost:8081"
LOGIN_AUTHORIZE_SCHEME="http://"
OAUTH_CALLBACK_ENDPOINT="/api/oauth/callback"
 
# LocalStack DynamoDB
 
DYNAMODB_DSN_APP_CACHE='dynamodb://key:secret@us-east-1/configuration-frontend-crud-react-v2-local-app-cache?endpoint=http://localhost:4566'
DYNAMODB_DSN_CONFIG='dynamodb://key:secret@us-east-1/configuration-frontend-crud-react-v2-local-config?endpoint=http://localhost:4566'
 
# Development Flags
 
CONFIG_SHOULD_TEST_HOSTNAME=0
CONFIG_DONT_GET_BY_FILE=1
CONFIG_DONT_GET_BY_CACHE=1
NEXT_PUBLIC_Role_Accessibility_Check=0
NEXT_PUBLIC_KVS_DATA_STORE_TOGGLE=0
 
# Development Tools
 
NEXT_TELEMETRY_DISABLED=1

Backend API Integration

Real API Endpoints



Base URL: https://phpc.dev.config.solidservice.link/api/v1
Production: https://config.solidservice.link/api/v1

Authentication


POST   /api/login_check              # OAuth authentication
GET    /api/v1/users/logged_user/get # Get current user data

Core CRUD Operations


# For each entity (hostnames, ownerships, parameters, tenants, users)
GET    /api/v1/{resource}            # List with pagination/filtering
POST   /api/v1/{resource}            # Create new record
GET    /api/v1/{resource}/{id}       # Get specific record
PUT    /api/v1/{resource}/{id}       # Update record
DELETE /api/v1/{resource}/{id}       # Delete record
GET    /api/v1/{resource}/dropdown   # Dropdown options

System Endpoints


GET    /status                       # API health status
GET    /api/v1                      # API documentation
GET    /api/v1/metadata             # Available entities (518 types)

Installation & Setup

Prerequisites

Required Software - Node.js 18+ - pnpm 9+ - Git - Docker (for LocalStack)

Access to config API backend

Installation Steps

Clone Repository


git clone https://github.com/PHPCreation/configuration-frontend-crud-react-v2.git
cd configuration-frontend-crud-react-v2

Setup NPM Authentication


# Method 1: NPM Login
npm login --scope=@phpcreation --auth-type=legacy --registry=https://npm.pkg.github.com
 
# Method 2: Create .npmrc
echo "@phpcreation:registry=https://npm.pkg.github.com/" > .npmrc
echo "//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}" >> .npmrc

Install Dependencies


pnpm install

Configure Environment


# Copy environment files
cp .env.example .env
cp .env.local.example .env.local
 
# Edit with your configuration
nano .env.local

Run Development Server


# Load environment and start
sh loadEnv.sh && pnpm run dev
 
# Or with SST binding
pnpm run dev:sst

Real CRUD Configurations

Complete Entity Configurations

Hostnames


// src/crud_config/hostnames/index.tsx
import { ColumnTypeEnum } from "@phpcreation/frontend-crud-react-nextjs-bundle/types";
 
export const listingProps = {
  fqcn_bui: {
    Bundle: "configCrud",
    Unit: "Hostname", 
    Interface: "base"
  },
  resource: "hostnames",
  
  mainColumns: [
    {
      title: "ID",
      key: "id",
      type: ColumnTypeEnum.NUMBER,
      sortable: true,
      alignment: "right"
    }
  ],
 
selectedList: ["id"],
fieldsAll: ["id"],
 
formModalInputs: [
{
key: "tenant",
title: "Tenant",
type: ColumnTypeEnum.SELECT_ASYNC,
targetResourceAsync: "tenants",
prefixOnSubmit: "/api/v1/tenants/",
required: true
},
{
key: "hostname",
title: "Hostname",
type: ColumnTypeEnum.TEXT,
required: true
}
],
 
filterFields: [
{
key: "tenant",
title: "Tenant",
type: ColumnTypeEnum.SELECT_ASYNC,
targetResourceAsync: "tenants",
isMulti: false,
default: true
},
{
key: "hostname",
title: "Hostname",
type: ColumnTypeEnum.TEXT,
placeholder: "Search hostname"
},
{
key: "id",
title: "ID",
type: ColumnTypeEnum.NUMBER
}
],
 
qField: "hostname",
sideBoxes: [],
displayFields: [],
actions: ["show", "quick-edit", "duplicate", "delete"]
};
 
export const createProps = listingProps;
export const editProps = listingProps;
export const showProps = listingProps;

Parameters


// src/crud_config/parameters/index.tsx
export const listingProps = {
  fqcn_bui: {
    Bundle: "configCrud",
    Unit: "Parameter",
    Interface: "base"
  },
  resource: "parameters",
  
  mainColumns: [
    {
      title: "ID",
      key: "id", 
      type: ColumnTypeEnum.NUMBER,
      sortable: true,
      alignment: "right"
    }
  ],
 
selectedList: ["id"],
fieldsAll: ["id"],
 
formModalInputs: [
{
key: "tenant",
title: "Tenant",
type: ColumnTypeEnum.SELECT_ASYNC,
targetResourceAsync: "tenants",
prefixOnSubmit: "/api/v1/tenants/",
required: true
},
{
key: "name",
title: "Name",
type: ColumnTypeEnum.TEXT,
required: true
},
{
key: "value",
title: "Value",
type: ColumnTypeEnum.TEXTAREA,
required: true
}
],
 
filterFields: [
{
key: "tenant",
title: "Tenant",
type: ColumnTypeEnum.SELECT_ASYNC,
targetResourceAsync: "tenants",
isMulti: false,
default: true
},
{
key: "name",
title: "Name",
type: ColumnTypeEnum.TEXT,
placeholder: "Search parameter name"
},
{
key: "value",
title: "Value",
type: ColumnTypeEnum.TEXT,
placeholder: "Search parameter value"
},
{
key: "id",
title: "ID",
type: ColumnTypeEnum.NUMBER
}
],
 
qField: "name",
actions: ["show", "quick-edit", "duplicate", "delete"]
};
 
export const createProps = listingProps;
export const editProps = listingProps; 
export const showProps = listingProps;

Tenants


// src/crud_config/tenants/index.tsx
export const listingProps = {
  fqcn_bui: {
    Bundle: "configCrud",
    Unit: "Tenant",
    Interface: "base"
  },
  resource: "tenants",
  
  mainColumns: [
    {
      title: "ID",
      key: "id",
      type: ColumnTypeEnum.NUMBER,
      sortable: true,
      alignment: "right"  
    }
  ],
 
selectedList: ["id"],
fieldsAll: ["id"],
 
formModalInputs: [
{
key: "parameters",
title: "Parameters",
type: ColumnTypeEnum.SELECT_ASYNC,
targetResourceAsync: "parameters",
prefixOnSubmit: "/api/v1/parameters/",
isMulti: true
},
{
key: "hostnames",
title: "Hostnames",
type: ColumnTypeEnum.SELECT_ASYNC,
targetResourceAsync: "hostnames",
prefixOnSubmit: "/api/v1/hostnames/",
isMulti: true
},
{
key: "name",
title: "Name",
type: ColumnTypeEnum.TEXT,
required: true
},
{
key: "stack",
title: "Stack",
type: ColumnTypeEnum.TEXT
}
],
 
filterFields: [
{
key: "name",
title: "Name",
type: ColumnTypeEnum.TEXT,
placeholder: "Search tenant name"
},
{
key: "id",
title: "ID",
type: ColumnTypeEnum.NUMBER
}
],
 
qField: "name",
actions: ["show", "quick-edit", "duplicate", "delete"]
};
 
export const createProps = listingProps;
export const editProps = listingProps;
export const showProps = listingProps;

Users


// src/crud_config/users/index.tsx  
export const listingProps = {
  fqcn_bui: {
    Bundle: "configCrud",
    Unit: "User",
    Interface: "base"
  },
  resource: "users",
  
  mainColumns: [
    {
      title: "ID",
      key: "id",
      type: ColumnTypeEnum.NUMBER, 
      sortable: true,
      alignment: "right"
    }
  ],
 
selectedList: ["id"],
fieldsAll: ["id"],
 
formModalInputs: [
{
key: "username",
title: "Username",
type: ColumnTypeEnum.TEXT,
required: true
},
{
key: "email",
title: "Email",
type: ColumnTypeEnum.TEXT,
required: true
},
{
key: "name",
title: "Name",
type: ColumnTypeEnum.TEXT,
required: true
},
{
key: "phoneNumber",
title: "Phone Number",
type: ColumnTypeEnum.TEXT
}
],
 
filterFields: [
{
key: "id",
title: "ID",
type: ColumnTypeEnum.NUMBER
},
{
key: "username",
title: "Username",
type: ColumnTypeEnum.TEXT,
placeholder: "Search username"
},
{
key: "email",
title: "Email",
type: ColumnTypeEnum.TEXT,
placeholder: "Search email"
},
{
key: "name",
title: "Name",
type: ColumnTypeEnum.TEXT,
placeholder: "Search name"
}
],
 
qField: "username",
actions: ["show", "quick-edit", "duplicate", "delete"]
};
 
export const createProps = listingProps;
export const editProps = listingProps;
export const showProps = listingProps;

Ownerships


// src/crud_config/ownerships/index.tsx
export const listingProps = {
  fqcn_bui: {
    Bundle: "configCrud", 
    Unit: "Ownership",
    Interface: "base"
  },
  resource: "ownerships",
  
  mainColumns: [
    {
      title: "ID",
      key: "id",
      type: ColumnTypeEnum.NUMBER,
      sortable: true,
      alignment: "right"
    }
  ],
 
selectedList: ["id"],
fieldsAll: ["id"],
 
formModalInputs: [
{
key: "user",
title: "User",
type: ColumnTypeEnum.SELECT_ASYNC,
targetResourceAsync: "users",
prefixOnSubmit: "/api/v1/users/",
required: true
}
],
 
filterFields: [
{
key: "user",
title: "User",
type: ColumnTypeEnum.SELECT_ASYNC,
targetResourceAsync: "users",
isMulti: false,
default: true
},
{
key: "refTable",
title: "Ref Table",
type: ColumnTypeEnum.TEXT
},
{
key: "refRowId",
title: "Ref Row Id",
type: ColumnTypeEnum.NUMBER
},
{
key: "id",
title: "ID",
type: ColumnTypeEnum.NUMBER
}
],
 
qField: "user",
actions: ["show", "quick-edit", "duplicate", "delete"]
};
 
export const createProps = listingProps;
export const editProps = listingProps;
export const showProps = listingProps;

Project Structure

Actual Directory Structure


configuration-frontend-crud-react-v2/
├── src/
│   ├── app/
│   │   ├── [locale]/              # Internationalized routing
│   │   │   ├── [entity]/          # Dynamic CRUD entity pages
│   │   │   ├── metadata/          # Entity metadata management
│   │   │   ├── page.tsx           # Dashboard
│   │   │   └── status/            # System status page
│   │   └── api/                   # API routes
│   │       ├── config-login/      # Config API login
│   │       ├── oauth/             # OAuth callback
│   │       └── auth/              # Authentication
│   ├── components/
│   │   ├── common/                # Shared components
│   │   └── Layout/                # Layout components
│   ├── containers/                # Page containers
│   │   ├── AddEntity/             # Add entity container
│   │   ├── EditEntity/            # Edit entity container
│   │   ├── Listing/               # Entity listing
│   │   ├── DetailShow/            # Entity detail view
│   │   └── Dashboard/             # Dashboard container
│   ├── crud_config/               # Entity configurations
│   │   ├── hostnames/             # Hostname management
│   │   ├── ownerships/            # Ownership relationships
│   │   ├── parameters/            # Configuration parameters
│   │   ├── tenants/               # Tenant management
│   │   └── users/                 # User management
│   ├── i18n/                      # Internationalization
│   ├── store/                     # Redux store
│   │   ├── slices/                # Redux slices
│   │   └── index.ts               # Store configuration
│   └── utils/                     # Utility functions
├── messages/                      # Translation files
│   ├── en.json                    # English translations
│   ├── fr.json                    # French translations (default)
│   └── es.json                    # Spanish translations
├── public/                        # Static assets
├── cypress/                       # E2E tests
│   └── e2e/                       # Test specifications
└── sst.config.ts                  # SST deployment config

Technology Stack

Dependencies (Actual)

Core Framework:

Next.js: 14.2.28
React: ^18
TypeScript: ^5

PHPCreation Bundles:

@phpcreation/frontend-crud-react-nextjs-bundle: ^2.22.5
@phpcreation/frontend-auth-authorization-flow-react-nextjs-bundle: ^2.3.6
@phpcreation/frontend-components-react-nextjs-bundle: ^2.13.3
@phpcreation/frontend-utils-react-nextjs-bundle: ^1.17.0

State Management:

Redux Toolkit: ^2.2.6

Styling & UI:

Tailwind CSS: ^3.4.1

HTTP Client:

Axios: ^1.7.2

Internationalization:

next-intl: ^4.0.2

Testing:

Cypress: ^13.11.0

Deployment:

SST (Serverless Stack)

Features

Implemented Features

Multi-tenant Configuration: Full tenant isolation and parameter management
Hostname Management: Domain configuration per tenant
User Management: Basic user profiles and authentication
Ownership Tracking: User ownership relationships
Multi-language Support: English, French (default), Spanish
Dynamic CRUD Pages: Config-driven entity management
OAuth 2.0 Authentication: SSO integration
Real-time Status Monitoring: API health checks
Advanced Filtering: Search and filter capabilities
Export Functionality: CSV export support
Responsive Design: Mobile-friendly interface
Error Tracking: Sentry integration (available)
Caching: DynamoDB integration for performance

System Fields

All entities include standard system fields:

id, shortcode, uniqueId, slug
toString (identification field)
createdAt, updatedAt, disabledAt, deletedAt

Testing & Development

Available Scripts


# Development
pnpm run dev          # Start development server
pnpm run dev:sst      # Start with SST binding
 
# Build & Deploy
pnpm run build        # Build for production
pnpm run start        # Start production server
 
# Testing
pnpm run cypress:open # Open Cypress UI
pnpm run cypress:run  # Run Cypress tests
 
# Code Quality
pnpm run lint         # Run ESLint

Environment Loading

The project uses a custom environment loader:


# Load environment and start development
sh loadEnv.sh && pnpm run dev

Deployment

AWS Deployment with SST


# Deploy to staging
sst deploy --stage staging
 
# Deploy to production
sst deploy --stage production
 
# Deploy with specific profile
AWS_PROFILE=config-prod sst deploy --stage production

Health Monitoring


# Check API status
curl https://phpc.dev.config.solidservice.link/status
 
# Check API documentation
curl https://phpc.dev.config.solidservice.link/api/v1

Support & Troubleshooting

Common Issues

OAuth Authentication Issues

If authentication fails, verify OAuth configuration and login URLs:


# Test OAuth endpoints
curl https://dev.login.phpr.link/health
curl https://dev.login.solidservice.link/health

DynamoDB Connection Issues

For local development, ensure LocalStack is running:


# Start LocalStack
docker-compose up -d
 
# Test DynamoDB connection
aws dynamodb list-tables --endpoint-url=http://localhost:4566

Getting Help

GitHub Repository: configuration-frontend-crud-react-v2
API Documentation: Live API Docs
Status Page: System Status

This documentation reflects the actual implementation of the Configuration Frontend CRUD React v2 project based on real code analysis, not assumptions or generic examples.