PHPReaction Frontend Account CRUD React v2

A user and role management system providing user administration, role-based access control, and configuration management for the PHPReaction ecosystem.

GitHub Repository Demo Environment OAuth Login

Project Overview

Purpose

This project provides user management, role administration, and system configuration storage for PHPReaction ecosystem applications. It uses the accountCrud bundle to manage 4 entities focused on user lifecycle and system configuration.

Key Statistics

4 Entities: Users, User Roles, Key Values, and Accounting Account (listed but not implemented)
accountCrud Bundle: Consistent bundle architecture across all entities
Multi-tenant Support: Organization-based user isolation with phpc tenant
OAuth Integration: Login via dev.login.solidservice.link

Integration Ecosystem


PHPReaction Account Management System:
├── phpreaction-frontend-account-crud-react-v2 (Admin Interface)
├── Account API (dev.account.solidservice.link/api/v1)
├── OAuth Service (dev.login.solidservice.link)
├── Config Service (config.solidservice.link)
└── Users Self-Service Portal

Environment Configuration

Required Environment Variables

Production


# App Configuration
NEXT_PUBLIC_APP_ID=account-crud-v2-prod
NEXT_PUBLIC_ENVIRONMENT=production
 
# Account API Backend - Real Account Service
 
NEXT_PUBLIC_API_BASE_URL=https://account.solidservice.link
NEXT_PUBLIC_API_VERSION=api/v1
 
# Authentication & Authorization
 
NEXT_PUBLIC_AUTH_URL=https://login.solidservice.link
NEXT_PUBLIC_JWT_ISSUER=solidservice-account-auth
NEXT_PUBLIC_SSO_ENABLED=1
 
# CRUD Bundle Configuration - accountCrud Bundle
 
NEXT_PUBLIC_Role_Accessibility_Check=1
NEXT_PUBLIC_KVS_DATA_STORE_TOGGLE=1
NEXT_PUBLIC_KVS_API_RESOURCE_NAME=key_values
NEXT_PUBLIC_USE_PUT_METHOD=0
NEXT_PUBLIC_IMPORT_FEATURE_TOGGLE=1
 
# Tenant Configuration
 
NEXT_PUBLIC_DEFAULT_TENANT=phpc
 
# External Services
 
NEXT_PUBLIC_CONFIG_API_URL=https://config.solidservice.link
 
# Monitoring (Sentry - Configured but commented)
 
# SENTRY_DSN=your-sentry-dsn
 
# SENTRY_ENVIRONMENT=production

Development


# App Configuration
NEXT_PUBLIC_APP_ID=account-crud-v2-dev
NEXT_PUBLIC_ENVIRONMENT=development
 
# Account API Backend - Development Environment
NEXT_PUBLIC_API_BASE_URL=https://dev.account.solidservice.link
NEXT_PUBLIC_API_VERSION=api/v1
 
# Authentication & Authorization
NEXT_PUBLIC_AUTH_URL=https://dev.login.solidservice.link
NEXT_PUBLIC_JWT_ISSUER=solidservice-account-auth-dev
NEXT_PUBLIC_SSO_ENABLED=1
 
# CRUD Bundle Configuration - accountCrud Bundle
NEXT_PUBLIC_Role_Accessibility_Check=1
NEXT_PUBLIC_KVS_DATA_STORE_TOGGLE=1
NEXT_PUBLIC_KVS_API_RESOURCE_NAME=key_values
NEXT_PUBLIC_USE_PUT_METHOD=0
NEXT_PUBLIC_IMPORT_FEATURE_TOGGLE=1
 
# Tenant Configuration
NEXT_PUBLIC_DEFAULT_TENANT=phpc
 
# External Services
NEXT_PUBLIC_CONFIG_API_URL=https://config.solidservice.link
 
# Status Endpoints
NEXT_PUBLIC_STATUS_URL=https://dev.account.solidservice.link/status
 
# Monitoring
# SENTRY_DSN=your-sentry-dev-dsn
# SENTRY_ENVIRONMENT=development

Local


# App Configuration
NEXT_PUBLIC_APP_ID=account-crud-v2-local
NEXT_PUBLIC_ENVIRONMENT=local
 
# Account API Backend (Local)
 
NEXT_PUBLIC_API_BASE_URL=http://localhost:8080
NEXT_PUBLIC_API_VERSION=api/v1
 
# Authentication & Authorization (Local)
 
NEXT_PUBLIC_AUTH_URL=http://localhost:8081
NEXT_PUBLIC_JWT_ISSUER=solidservice-account-auth-local
NEXT_PUBLIC_SSO_ENABLED=0
 
# CRUD Bundle Configuration (Development Mode)
 
NEXT_PUBLIC_Role_Accessibility_Check=0
NEXT_PUBLIC_KVS_DATA_STORE_TOGGLE=0
NEXT_PUBLIC_KVS_API_RESOURCE_NAME=key_values
NEXT_PUBLIC_USE_PUT_METHOD=0
NEXT_PUBLIC_IMPORT_FEATURE_TOGGLE=1
 
# Tenant Configuration
 
NEXT_PUBLIC_DEFAULT_TENANT=phpc
 
# External Services (Local)
 
NEXT_PUBLIC_CONFIG_API_URL=http://localhost:3001
 
# AWS/LocalStack Configuration
 
NEXT_PUBLIC_AWS_REGION=us-east-1
NEXT_PUBLIC_S3_BUCKET_URL=http://localhost:4566
 
# DynamoDB Cache (LocalStack)
 
DYNAMODB_DSN_APP_CACHE=dynamodb://key:secret@us-east-1/account-frontend-crud-react-v2-dev-app-cache?endpoint=http://localhost:4566
DYNAMODB_DSN_CONFIG=dynamodb://key:secret@us-east-1/account-frontend-crud-react-v2-dev-config?endpoint=http://localhost:4566
 
# Development Tools
 
NEXT_TELEMETRY_DISABLED=1

Backend API Integration

Account API Endpoints



Base URL: https://dev.account.solidservice.link/api/v1
Status API: https://dev.account.solidservice.link/status
Documentation: https://dev.account.solidservice.link/api/v1

Core Entity Management


# Users CRUD
GET    /users                        # List users with filtering/pagination
POST   /users                        # Create new user
GET    /users/{id}                   # Get user details
PUT    /users/{id}                   # Update user
DELETE /users/{id}                   # Delete user
 
# User Roles CRUD
GET /users/logged_user_roles/get     # Get logged user roles
 
# Key Values CRUD
GET    /key_values                   # List key-value pairs
POST   /key_values                   # Create new key-value
GET    /key_values/{id}              # Get key-value details
PUT    /key_values/{id}              # Update key-value
DELETE /key_values/{id}              # Delete key-value

User Management Features


# User Authentication
POST   /api/login_check             # User login authentication

Configuration Management


# Key-Value Store
GET    /key_values?user={id}     # Get user-specific configurations
POST   /key_values                  # Create configuration entry
PUT    /key_values/{id}             # Update configuration value
DELETE /key_values/{id}             # Delete configuration entry

Dropdown/Async Resources


# For SELECT_ASYNC fields
GET    /users?search={query}      # Users search
GET    /user_roles?search={query} # Roles search
GET    /key_values?search={query} # Key-values search

Technology Stack

Core Technologies

Framework: Next.js 14.2.28 (React 18)
Language: TypeScript 5
Styling: Tailwind CSS 3.4.1 with animations
State Management: Redux Toolkit 2.2.6
Forms: React Hook Form 7.51.5 with Zod 3.23.8 validation
UI Components: Mantine Core 8.1.2
Internationalization: next-intl 4.0.2
HTTP Client: Axios 1.7.2

PHPCreation Bundles (Private Dependencies)

@phpcreation/frontend-crud-react-nextjs-bundle v2.24.1 (Core CRUD functionality)
@phpcreation/frontend-auth-authorization-flow-react-nextjs-bundle v2.3.6
@phpcreation/frontend-components-react-nextjs-bundle v2.13.3
@phpcreation/frontend-utils-react-nextjs-bundle v1.17.0

Infrastructure

Package Manager: PNPM
Deployment: SST (Serverless Stack) 2.43.3
AWS Integration: DynamoDB, S3 configurations
Local Development: LocalStack for AWS services
Monitoring: Sentry integration (configured but commented out)
Testing: Cypress 14.5.2

Entity Management System

Total Entities: 4 Entities

Bundle Configuration (FQCN_BUI)

All entities use the consistent bundle structure:

Bundle Name: accountCrud (consistent across all entities)
Unit Pattern: Entity names like User, Role, KeyValue
Interfaces: base, listing, create, edit, show

Available Entities:

1. Users (`users`)

Resource: users
Unit: User
Fields: id, username, email, isVerified, firstName, lastName, slug, fullName, phoneNumber, lastLogin, landingPageUrl, emailAuthCodeEnabled
Features:
- Complete user management
- Email verification system
- Authentication code support
- Phone number management
- Custom landing page URLs
- Full name concatenation
- Last login tracking

2. User Roles (`user_roles`)

Resource: user_roles
Unit: Role
Fields: id, name, role, slug
Features:
- Role-based access control
- Simple name/role structure
- Standard CRUD operations
- Slug-based URLs

3. Key Values (`key_values`)

Resource: key_values
Unit: KeyValue
Fields: id, user (relationship), key, value, description, slug
Features:
- Configuration storage system
- User-specific key-value pairs
- Textarea support for large values
- Description field for documentation
- Relationship to users table

4. Accounting Account (Listed but NOT Implemented)

Status: Declared in entity list but no configuration files exist
Icon: glyphicons glyphicons-piggy-bank
Missing: No CRUD configuration, no implementation files

Main Navigation Menu:

Dashboard - Landing page
Users - User management (/users)
Roles - Role management (/user-roles)
Key Values - Configuration management (/key-values)
Preferences - External link to account preferences

Field Types and Configurations

Supported Column Types:

TEXT - Standard text inputs
TEXTAREA - Multi-line text areas
BOOLEAN - Checkbox/toggle inputs
DATETIME - Date and time pickers
NUMBER - Numeric inputs
SELECT_ASYNC - Dynamic dropdowns with API integration
ENTITY_URL - Linked entity references

Common Field Patterns:

System Fields: id, shortcode, uniqueId, slug, createdAt, updatedAt, disabledAt, deletedAt
Identification: toString method for entity representation
Slugs: Auto-generated URL-friendly identifiers

Installation & Setup

Prerequisites

Required Software - Node.js 18+ - pnpm (latest) - Git - Docker (for LocalStack) - GitHub Personal Access Token (for PHPCreation bundles)

Installation Steps

Clone Repository


git clone https://github.com/PHPCreation/phpreaction-frontend-account-crud-react-v2.git
cd phpreaction-frontend-account-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


# Install all dependencies
pnpm install

Configure Environment


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

Setup LocalStack (for local development)


cd infrastructure/localstack
docker compose up -d
pnpm install
pnpm run create

Run Development Server


# Load environment and start
pnpm run dev
 
# Or with SST binding
pnpm run dev:sst

Entity Configuration Examples

Complete Entity Setup

Bundle Configuration Pattern

All entities use the consistent accountCrud bundle with the pattern:

Bundle: accountCrud
Unit: Entity names like User, Role, KeyValue
Interfaces: base, listing, create, edit, show

Users


// src/crud_config/users/index.tsx
import {
	CreateProps,
	EditProps,
	FilterField,
	Sidebox,
	IFQCN_BUI,
	ListingProps,
	MainColumnsListing,
	ShowProps,
	ColumnTypeEnum,
	FormInput,
	DisplayField
} from '@phpcreation/frontend-utils-react-nextjs-bundle/utils/types';
 
// Base FQCN - Real Account Configuration
const fqcn_bui: IFQCN_BUI = {
Bundle: 'accountCrud',
Unit: 'User',
Interface: 'base'
};
 
// Resource name
const resource: string = 'users';
 
// Fields for export
const fieldsExport: string[] = ['id','username','email','isVerified','firstName','lastName','uniqueId'];
 
// All available fields
const fieldsAll: string[] = ['id','username','email','isVerified','firstName','lastName','uniqueId'];
 
// Default selected fields
const selectedList: string[] = ['id','username','email','isVerified','firstName','lastName'];
 
// Default actions
const defaultActions: string[] = ['show', 'quick-edit', 'duplicate', 'delete'];
 
// Implemented interfaces
const implementedInterfaces: { [key: string]: boolean } = {
treeview: false,
translatable: false,
taggable: false,
deleteable: false,
slugable: false,
kvsDefaultValues: false,
timestampable: false,
disableable: false,
stringable: true
};
 
// Main listing columns
const mainColumns: MainColumnsListing[] = [
{
title: 'Id',
key: 'id',
sortable: true,
},
{
title: 'Username',
key: 'username',
type: ColumnTypeEnum.TEXT,
},
{
title: 'Email',
key: 'email',
type: ColumnTypeEnum.TEXT,
},
{
title: 'Is Verified',
key: 'isVerified',
type: ColumnTypeEnum.BOOLEAN,
},
{
title: 'First Name',
key: 'firstName',
type: ColumnTypeEnum.TEXT,
},
{
title: 'Last Name',
key: 'lastName',
type: ColumnTypeEnum.TEXT,
},
{
title: 'Phone Number',
key: 'phoneNumber',
type: ColumnTypeEnum.TEXT,
},
{
title: 'Last Login',
key: 'lastLogin',
type: ColumnTypeEnum.DATETIME,
}];
 
// Form inputs for detailed pages
const formInputs: FormInput[] = [{
title: 'User Information',
fields: [{
title: 'Username',
key: 'username',
type: ColumnTypeEnum.TEXT,
placeholder: 'Input the Username',
required: true,
},{
title: 'Email',
key: 'email',
type: ColumnTypeEnum.TEXT,
placeholder: 'Input the Email',
required: true,
},{
title: 'First Name',
key: 'firstName',
type: ColumnTypeEnum.TEXT,
placeholder: 'Input the First Name',
required: true,
},{
title: 'Last Name',
key: 'lastName',
type: ColumnTypeEnum.TEXT,
placeholder: 'Input the Last Name',
required: true,
},{
title: 'Phone Number',
key: 'phoneNumber',
type: ColumnTypeEnum.TEXT,
placeholder: 'Input the Phone Number',
required: false,
},{
title: 'Landing Page URL',
key: 'landingPageUrl',
type: ColumnTypeEnum.TEXT,
placeholder: 'Input the Landing Page URL',
required: false,
},{
title: 'Email Auth Code Enabled',
key: 'emailAuthCodeEnabled',
type: ColumnTypeEnum.BOOLEAN,
required: false,
}]
}];
 
// Display fields for show page
const displayFields: DisplayField[] = [
{title: "User Details", fields: [
{ 'title':'Username','key':'username', type: ColumnTypeEnum.TEXT },
{ 'title':'Email','key':'email', type: ColumnTypeEnum.TEXT },
{ 'title':'First Name','key':'firstName', type: ColumnTypeEnum.TEXT },
{ 'title':'Last Name','key':'lastName', type: ColumnTypeEnum.TEXT },
{ 'title':'Full Name','key':'fullName', type: ColumnTypeEnum.TEXT },
{ 'title':'Phone Number','key':'phoneNumber', type: ColumnTypeEnum.TEXT },
{ 'title':'Last Login','key':'lastLogin', type: ColumnTypeEnum.DATETIME },
{ 'title':'Landing Page URL','key':'landingPageUrl', type: ColumnTypeEnum.TEXT },
{ 'title':'Is Verified','key':'isVerified', type: ColumnTypeEnum.BOOLEAN },
{ 'title':'Email Auth Code Enabled','key':'emailAuthCodeEnabled', type: ColumnTypeEnum.BOOLEAN }
]},
{title: "System", fields: [
{ 'title':'ID','key':'id', type: ColumnTypeEnum.NUMBER },
{ 'title':'Shortcode','key':'shortcode', type: ColumnTypeEnum.TEXT },
{ 'title':'Unique Id','key':'uniqueId', type: ColumnTypeEnum.TEXT },
{ 'title':'Slug','key':'slug', type: ColumnTypeEnum.TEXT },
{ 'title':'Identification','key':'toString' },
{ 'title':'Created date','key':'createdAt', type: ColumnTypeEnum.DATETIME },
{ 'title':'Update','key':'updatedAt', type: ColumnTypeEnum.DATETIME }
]}
];
 
// Listing props export
export const listingProps: ListingProps = {
fqcn_bui: fqcn_bui,
resource: resource,
fieldsExport: fieldsExport,
fieldsAll: fieldsAll,
selectedList: selectedList,
defaultActions: defaultActions,
mainColumns: mainColumns,
implementedInterfaces: implementedInterfaces,
qField: 'User'
};

User Roles


// src/crud_config/user_roles/index.tsx
import {
	CreateProps,
	EditProps,
	FilterField,
	Sidebox,
	IFQCN_BUI,
	ListingProps,
	MainColumnsListing,
	ShowProps,
	ColumnTypeEnum,
	FormInput,
	DisplayField
} from '@phpcreation/frontend-utils-react-nextjs-bundle/utils/types';
 
// Base FQCN - Real Account Configuration
const fqcn_bui: IFQCN_BUI = {
	Bundle: 'accountCrud',
	Unit: 'Role',
	Interface: 'base'
};
 
// Resource name
const resource: string = 'user_roles';
 
// Fields for export
const fieldsExport: string[] = ['id','name','role','uniqueId'];
 
// All available fields
const fieldsAll: string[] = ['id','name','role','uniqueId'];
 
// Default selected fields
const selectedList: string[] = ['id','name','role'];
 
// Default actions
const defaultActions: string[] = ['show', 'quick-edit', 'duplicate', 'delete'];
 
// Implemented interfaces
const implementedInterfaces: { [key: string]: boolean } = {
	treeview: false,
	translatable: false,
	taggable: false,
	deleteable: false,
	slugable: false,
	kvsDefaultValues: false,
	timestampable: false,
	disableable: false,
	stringable: true
};
 
// Main listing columns
const mainColumns: MainColumnsListing[] = [
{
	title: 'Id',
	key: 'id',
	sortable: true,
},
{
	title: 'Name',
	key: 'name',
	type: ColumnTypeEnum.TEXT,
},
{
	title: 'Role',
	key: 'role',
	type: ColumnTypeEnum.TEXT,
},
{
	title: 'Unique Id',
	key: 'uniqueId',
	type: ColumnTypeEnum.TEXT,
}];
 
// Form inputs for detailed pages
const formInputs: FormInput[] = [{
    title: 'Role Information',
    fields: [{
    title: 'Name',
    key: 'name',
    type: ColumnTypeEnum.TEXT,
    placeholder: 'Input the Name',
    required: true,
},{
    title: 'Role',
    key: 'role',
    type: ColumnTypeEnum.TEXT,
    placeholder: 'Input the Role',
    required: true,
}]
}];
 
// Display fields for show page
const displayFields: DisplayField[] = [
	{title: "Role Details", fields: [
		{ 'title':'Name','key':'name', type: ColumnTypeEnum.TEXT },
		{ 'title':'Role','key':'role', type: ColumnTypeEnum.TEXT }
	]},
	{title: "System", fields: [
		{ 'title':'ID','key':'id', type: ColumnTypeEnum.NUMBER },
		{ 'title':'Shortcode','key':'shortcode', type: ColumnTypeEnum.TEXT },
		{ 'title':'Unique Id','key':'uniqueId', type: ColumnTypeEnum.TEXT },
		{ 'title':'Slug','key':'slug', type: ColumnTypeEnum.TEXT },
		{ 'title':'Identification','key':'toString' },
		{ 'title':'Created date','key':'createdAt', type: ColumnTypeEnum.DATETIME },
		{ 'title':'Update','key':'updatedAt', type: ColumnTypeEnum.DATETIME }
	]}
];
 
// Listing props export
export const listingProps: ListingProps = {
	fqcn_bui: fqcn_bui,
	resource: resource,
	fieldsExport: fieldsExport,
	fieldsAll: fieldsAll,
	selectedList: selectedList,
	defaultActions: defaultActions,
	mainColumns: mainColumns,
	implementedInterfaces: implementedInterfaces,
	qField: 'Role'
};

Key Values


// src/crud_config/key_values/index.tsx
import {
	CreateProps,
	EditProps,
	FilterField,
	Sidebox,
	IFQCN_BUI,
	ListingProps,
	MainColumnsListing,
	ShowProps,
	ColumnTypeEnum,
	FormInput,
	DisplayField
} from '@phpcreation/frontend-utils-react-nextjs-bundle/utils/types';
 
// Base FQCN - Real Account Configuration
const fqcn_bui: IFQCN_BUI = {
Bundle: 'accountCrud',
Unit: 'KeyValue',
Interface: 'base'
};
 
// Resource name
const resource: string = 'key_values';
 
// Fields for export
const fieldsExport: string[] = ['id','user','key','value','description','uniqueId'];
 
// All available fields
const fieldsAll: string[] = ['id','user','key','value','description','uniqueId'];
 
// Default selected fields
const selectedList: string[] = ['id','user','key','value','description'];
 
// Default actions
const defaultActions: string[] = ['show', 'quick-edit', 'duplicate', 'delete'];
 
// Implemented interfaces
const implementedInterfaces: { [key: string]: boolean } = {
treeview: false,
translatable: false,
taggable: false,
deleteable: false,
slugable: false,
kvsDefaultValues: false,
timestampable: false,
disableable: false,
stringable: true
};
 
// Main listing columns
const mainColumns: MainColumnsListing[] = [
{
title: 'Id',
key: 'id',
sortable: true,
},
{
title: 'User',
key: 'toString',
type: ColumnTypeEnum.ENTITY_URL,
link: 'id',
entity: 'user',
targetResourceAsync: 'users',
},
{
title: 'Key',
key: 'key',
type: ColumnTypeEnum.TEXT,
},
{
title: 'Value',
key: 'value',
type: ColumnTypeEnum.TEXTAREA,
},
{
title: 'Description',
key: 'description',
type: ColumnTypeEnum.TEXTAREA,
},
{
title: 'Unique Id',
key: 'uniqueId',
type: ColumnTypeEnum.TEXT,
}];
 
// Form inputs for detailed pages
const formInputs: FormInput[] = [{
title: 'Configuration Details',
fields: [{
title: 'User',
key: 'user',
type: ColumnTypeEnum.SELECT_ASYNC,
targetResourceAsync: 'users',
itemSpecificPath: 'user.uniqueId',
prefixOnSubmit: '/api/v1/users/',
placeholder: 'Select User',
resourceAsyncLabelParam: 'uniqueId',
isMulti: false,
required: false,
},{
title: 'Key',
key: 'key',
type: ColumnTypeEnum.TEXT,
placeholder: 'Input the Key',
required: true,
},{
title: 'Value',
key: 'value',
type: ColumnTypeEnum.TEXTAREA,
placeholder: 'Input the Value',
required: true,
},{
title: 'Description',
key: 'description',
type: ColumnTypeEnum.TEXTAREA,
placeholder: 'Input the Description',
required: false,
}]
}];
 
// Sidebar boxes for show page
const sideBoxs: Sidebox[] = [
{
subresource: 'users' ,
fieldName: 'user',
icon: 'glyphicons glyphicons-user',
defaultColumns: [
{
title: 'ID',
key: 'id',
},
{
title: 'Username',
key: 'username'
},
{
title: 'Email',
key: 'email'
}
]
},
];
 
// Display fields for show page
const displayFields: DisplayField[] = [
{title: "Configuration", fields: [
{ 'title':'User','key':'id','path':'toString','entity':'user','targetResourceAsync':'users', type: ColumnTypeEnum.SELECT_ASYNC },
{ 'title':'Key','key':'key', type: ColumnTypeEnum.TEXT },
{ 'title':'Value','key':'value', type: ColumnTypeEnum.TEXTAREA },
{ 'title':'Description','key':'description', type: ColumnTypeEnum.TEXTAREA }
]},
{title: "System", fields: [
{ 'title':'ID','key':'id', type: ColumnTypeEnum.NUMBER },
{ 'title':'Shortcode','key':'shortcode', type: ColumnTypeEnum.TEXT },
{ 'title':'Unique Id','key':'uniqueId', type: ColumnTypeEnum.TEXT },
{ 'title':'Slug','key':'slug', type: ColumnTypeEnum.TEXT },
{ 'title':'Identification','key':'toString' },
{ 'title':'Created date','key':'createdAt', type: ColumnTypeEnum.DATETIME },
{ 'title':'Update','key':'updatedAt', type: ColumnTypeEnum.DATETIME }
]}
];
 
// Listing props export
export const listingProps: ListingProps = {
fqcn_bui: fqcn_bui,
resource: resource,
fieldsExport: fieldsExport,
fieldsAll: fieldsAll,
selectedList: selectedList,
defaultActions: defaultActions,
mainColumns: mainColumns,
implementedInterfaces: implementedInterfaces,
qField: 'KeyValue'
};

Features and Capabilities

CRUD Operations

Listing: Filterable tables with export, search, and pagination
Create: Multi-section forms with validation
Edit: In-place editing and modal quick-edit
Show: Detailed view with system information
Delete: Standard delete with confirmation

Standard Features

Quick Actions: show, quick-edit, duplicate, delete
Search: Global search across entities
Filtering: Advanced filters with multiple field types
Sorting: Sortable columns
Export: CSV export functionality
Internationalization: Multi-language support with next-intl

User Management Features

User Administration: Complete user lifecycle management
Email Verification: Built-in email verification system
Authentication Codes: Support for email-based auth codes
Profile Management: User profile and contact information
Landing Pages: Custom landing page URL configuration
Role Assignment: Role-based access control

Configuration Management

Key-Value Store: System and user-specific configuration storage
User Relationships: Link configurations to specific users
Description Support: Documentation for configuration entries
Value Types: Support for large text values via textarea

Deployment

Production Deployment


# Build for production
pnpm run build
 
# Deploy to staging
sst deploy --stage staging
 
# Deploy to production
sst deploy --stage production

Environment-Specific Deployments

Staging


# Staging deployment
export APP_ENV=staging
export AWS_PROFILE=solidservice-staging
 
# Deploy infrastructure
 
sst deploy --stage staging
 
# Verify deployment
 
curl https://staging.dev.account.solidservice.link/api/status

Testing

E2E Testing with Cypress


# Open Cypress UI
pnpm run cypress:open
 
# Run tests headless
pnpm run cypress:run
 
# Run E2E tests with server
pnpm run test:e2e:cmd

Test Coverage Areas

User Management: Create, read, update, delete for users
Role Management: Role CRUD and assignment
Key-Value Management: Configuration storage and retrieval
Authentication Flow: Login/logout functionality
Form Validation: Field validation and error handling
Multi-language: Translation switching

Support & Troubleshooting

Common Issues

Bundle Authentication Issues

If you’re getting 404 errors when installing packages, ensure your GitHub token has the correct permissions and scope.


# Re-authenticate with correct scope
npm login --scope=@phpcreation --auth-type=legacy --registry=https://npm.pkg.github.com

LocalStack Connection Issues

Ensure LocalStack is running and AWS resources are created:


cd infrastructure/localstack
docker compose ps  # Check if running
pnpm run create   # Recreate resources

Missing Accounting Account Entity

The Accounting Account entity is listed in the navigation but not implemented:


# Entity exists in navigation but lacks:
# - CRUD configuration files
# - Implementation in src/crud_config/
# - API integration

Getting Help

GitHub Issues: Report bugs
Account API: Backend documentation and support
CRUD Bundle Docs: Bundle documentation

This comprehensive documentation covers the complete setup, configuration, and usage of the PHPReaction Frontend Account CRUD React v2 project - a focused user and role management system with 4 entities providing essential account administration capabilities.

PHPReaction Frontend Account CRUD React v2

Project Overview

Purpose

Key Statistics

Integration Ecosystem

Environment Configuration

Required Environment Variables

Production

Development

Local

Backend API Integration

Account API Endpoints

Core Entity Management

User Management Features

Configuration Management

Dropdown/Async Resources

Technology Stack

Core Technologies

PHPCreation Bundles (Private Dependencies)

Infrastructure

Entity Management System

Total Entities: 4 Entities

Bundle Configuration (FQCN_BUI)

Available Entities:

1. Users (users)

2. User Roles (user_roles)

3. Key Values (key_values)

4. Accounting Account (Listed but NOT Implemented)

Navigation Structure

Field Types and Configurations

Installation & Setup

Prerequisites

Installation Steps

Clone Repository

Setup NPM Authentication

Install Dependencies

Configure Environment

Setup LocalStack (for local development)

Run Development Server

Entity Configuration Examples

Complete Entity Setup

Users

User Roles

Key Values

Features and Capabilities

CRUD Operations

Standard Features

User Management Features

Configuration Management

Deployment

Production Deployment

Environment-Specific Deployments

Staging

Production

Testing

E2E Testing with Cypress

Test Coverage Areas

Support & Troubleshooting

Common Issues

Getting Help

1. Users (`users`)

2. User Roles (`user_roles`)

3. Key Values (`key_values`)