Ticket Frontend CRUD React v2

A sophisticated CRUD “Admin” frontend for comprehensive ticket management, handling customer support, internal issues, file attachments, organization management, and advanced ticketing workflows with status tracking.

GitHub Repository Live Demo (Dev)API Documentation

Project Overview

Purpose

This project serves as a comprehensive ticket management system for handling customer support requests, internal issues, file management, and organization-based ticketing workflows within the PHPCreation ecosystem.

Real Implementation Details

Bundle Names: ticketCrud (primary) + phprCrud (system entities)
Base API: ticket.solidservice.link
Entity Count: 23 entities (15 ticketCrud + 8 phprCrud)
Available Entities: 98 entity types registered
Multi-tenant: Organization-based isolation

Core Entities Managed

Ticket Entities (ticketCrud Bundle)

tickets - Main ticket entity with 32+ fields
opened_tickets - Filter view for open tickets
closed_tickets - Filter view for closed tickets
ticket_replies - Conversation system
ticket_statuses - Status management
ticket_types - Type categorization
ticket_impacts - Impact level tracking
ticket_issues - Related issue tracking
ticket_tasks - Task management
ticket_tags - Tagging system
ticket_taggings - Tag relationships

System Entities (Mixed Bundles)

users (ticketCrud) - User management with organization links
organizations (ticketCrud) - Organization entities
files (ticketCrud) - Ticket file attachments
storage_files (phprCrud) - File storage system
user_roles (phprCrud) - Role management
event_subscribers (ticketCrud) - Event system
ownerships (ticketCrud) - Ownership tracking

Environment Configuration

Real Environment Variables

Development


# App Environment
APP_ENV=dev
NEXT_PUBLIC_APP_ENV=dev
NEXT_PUBLIC_URL_ENV=".dev."
NEXT_PUBLIC_TENANT='phpc'
TENANT_TMP="phpc"
 
# API Configuration
PHPR_CRUD='https://dev.ticket.solidservice.link/api/v1'
PHPR_AUTH='api/login_check'
NEXT_PUBLIC_API_URL='ticket.solidservice.link'
NEXT_PUBLIC_API_ENDPOINT_VERSION='api/v1'
NEXT_PUBLIC_API_PHPR_ENV='.dev.'
 
# 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 Configuration
DYNAMODB_RUNTIME=aws
DYNAMODB_APP_CACHE_TABLE="frontend-inventory-react-app-cache-dev"
 
# AWS Configuration
CUSTOM_AWS_ACCESS_KEY_ID="AKIAU6GDV7Z4DI6H4C7F"
CUSTOM_AWS_SECRET_ACCESS_KEY="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"
CUSTOM_AWS_REGION="us-east-1"
 
# 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=1
CONFIG_DONT_GET_BY_CACHE=0
CONFIG_GET_PARAMETERS_BY_HOSTNAME='1'
 
# Icons and Assets
NEXT_PUBLIC_ICONS_URL=https://icons.phpr.link/

Production


# App Environment
APP_ENV=production
NEXT_PUBLIC_APP_ENV=production
NEXT_PUBLIC_URL_ENV=""
NEXT_PUBLIC_TENANT='phpc'
 
# API Configuration
PHPR_CRUD='https://ticket.solidservice.link/api/v1'
PHPR_AUTH='api/login_check'
NEXT_PUBLIC_API_URL='ticket.solidservice.link'
NEXT_PUBLIC_API_ENDPOINT_VERSION='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 Configuration
DYNAMODB_RUNTIME=aws
DYNAMODB_APP_CACHE_TABLE="frontend-inventory-react-app-cache-prod"
 
# 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'
NEXT_PUBLIC_API_URL='localhost:8080'
 
# 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_RUNTIME=localstack
DYNAMODB_APP_CACHE_TABLE="frontend-inventory-react-app-cache-local"
AWS_ENDPOINT_URL="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

Security Configuration (.env)

Security Note: These should be moved to secure secret storage


# Security Secrets
SECURITY_CSRF_SECRET="60YMdF/NlyquvS36lD1rHT9RwT66RrKalUpl+aJimW4="
SECURITY_JWT_SECRET="RtYMHMGBtcYJYjhMq9oS9WnTujvwIp7StJW4BmoPb2g="
 
# API Credentials  
TICKET_USERNAME='ticket-phpr_Read_User_TEST'
TICKET_PASSWORD='i8cV6qup3Hc!.gHBk._G'

Backend API Integration

Real API Endpoints


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

Authentication


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

Core Ticket Operations


# Main Ticket Management
GET    /api/v1/tickets               # List tickets with filtering
POST   /api/v1/tickets               # Create new ticket
GET    /api/v1/tickets/{id}          # Get ticket details
PUT    /api/v1/tickets/{id}          # Update ticket
DELETE /api/v1/tickets/{id}          # Delete ticket
 
# Ticket Views
GET    /api/v1/opened_tickets        # Open tickets view
GET    /api/v1/closed_tickets        # Closed tickets view
 
# Ticket Components
GET    /api/v1/ticket_replies        # Conversation system
GET    /api/v1/ticket_statuses       # Status management
GET    /api/v1/ticket_types          # Type categories
GET    /api/v1/ticket_impacts        # Impact levels
GET    /api/v1/ticket_issues         # Related issues
GET    /api/v1/ticket_tasks          # Task management

File Management


GET    /api/v1/files                 # Ticket file attachments
GET    /api/v1/storage_files         # File storage system
GET    /api/v1/storage_entityfiles   # Entity file relationships

User & Organization Management


GET    /api/v1/users                 # User management
GET    /api/v1/organizations         # Organization entities  
GET    /api/v1/user_roles            # Role management
GET    /api/v1/ownerships            # Ownership tracking


# For SELECT_ASYNC fields
GET    /api/v1/{resource}/dropdown   # Dropdown options for any resource

Installation & Setup

Prerequisites

Required Software

Node.js 18+
pnpm 9+
Git
Docker (for LocalStack)
Access to ticket API backend

Installation Steps

Clone Repository


git clone https://github.com/PHPCreation/ticket-frontend-crud-react-v2.git
cd ticket-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 environments/.env.local.example environments/.env.local
 
# Edit with your configuration
nano environments/.env.local

Setup LocalStack (for local development)


cd infrastructure/localstack
docker compose up -d

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

Tickets


// src/crud_config/tickets/index.tsx
import { ColumnTypeEnum } from "@phpcreation/frontend-crud-react-nextjs-bundle/types";
 
export const listingProps = {
  fqcn_bui: {
    Bundle: "ticketCrud",
    Unit: "Ticket",
    Interface: "base"
  },
  resource: "tickets",
  
  mainColumns: [
    {
      title: "ID",
      key: "id",
      type: ColumnTypeEnum.NUMBER,
      sortable: true,
      alignment: "right"
    },
    {
      title: "Files",
      key: "files",
      type: ColumnTypeEnum.SELECT_ASYNC,
      targetResourceAsync: "files"
    },
    {
      title: "Related Issue",
      key: "relatedIssue",
      type: ColumnTypeEnum.SELECT_ASYNC,
      targetResourceAsync: "ticket_issues"
    },
    {
      title: "Type",
      key: "type",
      type: ColumnTypeEnum.SELECT_ASYNC,
      targetResourceAsync: "ticket_types"
    },
    {
      title: "Impact",
      key: "impact",
      type: ColumnTypeEnum.SELECT_ASYNC,
      targetResourceAsync: "ticket_impacts"
    },
    {
      title: "Status", 
      key: "status",
      type: ColumnTypeEnum.SELECT_ASYNC,
      targetResourceAsync: "ticket_statuses"
    },
    {
      title: "Replies",
      key: "replies",
      type: ColumnTypeEnum.SELECT_ASYNC,
      targetResourceAsync: "ticket_replies"
    },
    {
      title: "URL",
      key: "url",
      type: ColumnTypeEnum.TEXT
    },
    {
      title: "Fill Type",
      key: "fillType",
      type: ColumnTypeEnum.TEXT
    },
    {
      title: "Client User Name",
      key: "clientUserName",
      type: ColumnTypeEnum.TEXT
    },
    {
      title: "Client Email",
      key: "clientUserCoordinatesEmail",
      type: ColumnTypeEnum.TEXT
    },
    {
      title: "Replied",
      key: "replied",
      type: ColumnTypeEnum.BOOLEAN
    },
    {
      title: "Created",
      key: "createdAt",
      type: ColumnTypeEnum.DATETIME,
      sortable: true
    }
  ],
 
  selectedList: [
    "id", "files", "relatedIssue", "type", "impact", "status", 
    "replies", "url", "fillType", "clientUserName", 
    "clientUserCoordinatesEmail", "replied", "createdAt"
  ],
 
  fieldsAll: [
    "id", "files", "relatedIssue", "type", "impact", "status", 
    "replies", "url", "fillType", "clientUserName", 
    "clientUserCoordinatesEmail", "replied", "createdAt", "slug"
  ],
 
  formModalInputs: [
    {
      key: "files",
      title: "Files", 
      type: ColumnTypeEnum.SELECT_ASYNC,
      targetResourceAsync: "files",
      prefixOnSubmit: "/api/v1/files/",
      isMulti: true
    },
    {
      key: "relatedIssue",
      title: "Related Issue",
      type: ColumnTypeEnum.SELECT_ASYNC,
      targetResourceAsync: "ticket_issues",
      prefixOnSubmit: "/api/v1/ticket_issues/"
    },
    {
      key: "type",
      title: "Type",
      type: ColumnTypeEnum.SELECT_ASYNC,
      targetResourceAsync: "ticket_types",
      prefixOnSubmit: "/api/v1/ticket_types/",
      required: true
    },
    {
      key: "impact",
      title: "Impact", 
      type: ColumnTypeEnum.SELECT_ASYNC,
      targetResourceAsync: "ticket_impacts",
      prefixOnSubmit: "/api/v1/ticket_impacts/",
      required: true
    },
    {
      key: "status",
      title: "Status",
      type: ColumnTypeEnum.SELECT_ASYNC,
      targetResourceAsync: "ticket_statuses",
      prefixOnSubmit: "/api/v1/ticket_statuses/",
      required: true
    },
    {
      key: "replies",
      title: "Replies",
      type: ColumnTypeEnum.SELECT_ASYNC,
      targetResourceAsync: "ticket_replies", 
      prefixOnSubmit: "/api/v1/ticket_replies/",
      isMulti: true
    },
    {
      key: "url",
      title: "URL",
      type: ColumnTypeEnum.TEXT
    },
    {
      key: "fillType",
      title: "Fill Type",
      type: ColumnTypeEnum.TEXT
    },
    {
      key: "clientUserName", 
      title: "Client User Name",
      type: ColumnTypeEnum.TEXT
    },
    {
      key: "clientUserCoordinatesEmail",
      title: "Client Email",
      type: ColumnTypeEnum.TEXT
    },
    {
      key: "replied",
      title: "Replied",
      type: ColumnTypeEnum.BOOLEAN
    }
  ],
 
  filterFields: [
    {
      key: "type",
      title: "Type", 
      type: ColumnTypeEnum.SELECT_ASYNC,
      targetResourceAsync: "ticket_types",
      isMulti: true,
      default: true
    },
    {
      key: "impact",
      title: "Impact",
      type: ColumnTypeEnum.SELECT_ASYNC,
      targetResourceAsync: "ticket_impacts",
      isMulti: true,
      default: true
    },
    {
      key: "status",
      title: "Status",
      type: ColumnTypeEnum.SELECT_ASYNC,
      targetResourceAsync: "ticket_statuses",
      isMulti: true,
      default: true
    },
    {
      key: "replied",
      title: "Replied",
      type: ColumnTypeEnum.BOOLEAN
    },
    {
      key: "clientUserName",
      title: "Client User Name",
      type: ColumnTypeEnum.TEXT,
      placeholder: "Search client name"
    },
    {
      key: "id",
      title: "ID", 
      type: ColumnTypeEnum.NUMBER
    }
  ],
 
  qField: "clientUserName",
  actions: ["show", "quick-edit", "duplicate", "delete", "close-ticket", "create-issue"],
  customActions: ["ticket-communication", "sentry-diagnostic"]
};
 
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: "ticketCrud", 
    Unit: "User",
    Interface: "base"
  },
  resource: "users",
  
  mainColumns: [
    {
      title: "ID",
      key: "id",
      type: ColumnTypeEnum.NUMBER,
      sortable: true,
      alignment: "right"
    },
    {
      title: "Organization",
      key: "organization",
      type: ColumnTypeEnum.SELECT_ASYNC,
      targetResourceAsync: "organizations"
    },
    {
      title: "Username",
      key: "username",
      type: ColumnTypeEnum.TEXT,
      sortable: true
    },
    {
      title: "Roles",
      key: "roles",
      type: ColumnTypeEnum.SELECT_ASYNC,
      targetResourceAsync: "user_roles"
    },
    {
      title: "Email",
      key: "email",
      type: ColumnTypeEnum.TEXT
    },
    {
      title: "Name",
      key: "name", 
      type: ColumnTypeEnum.TEXT
    },
    {
      title: "Phone",
      key: "phoneNumber",
      type: ColumnTypeEnum.TEXT
    },
    {
      title: "Created",
      key: "createdAt",
      type: ColumnTypeEnum.DATETIME,
      sortable: true
    }
  ],
 
  selectedList: [
    "id", "organization", "username", "roles", 
    "email", "name", "phoneNumber", "createdAt"
  ],
 
  fieldsAll: [
    "id", "organization", "username", "roles", "email", 
    "name", "phoneNumber", "createdAt", "slug"
  ],
 
  formModalInputs: [
    {
      key: "organization",
      title: "Organization",
      type: ColumnTypeEnum.SELECT_ASYNC,
      targetResourceAsync: "organizations",
      prefixOnSubmit: "/api/v1/organizations/"
    },
    {
      key: "username", 
      title: "Username",
      type: ColumnTypeEnum.TEXT,
      required: true
    },
    {
      key: "roles",
      title: "Roles",
      type: ColumnTypeEnum.SELECT_ASYNC,
      targetResourceAsync: "user_roles",
      prefixOnSubmit: "/api/v1/user_roles/",
      isMulti: 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: "organization",
      title: "Organization",
      type: ColumnTypeEnum.SELECT_ASYNC,
      targetResourceAsync: "organizations",
      isMulti: true,
      default: true
    },
    {
      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"
    },
    {
      key: "id",
      title: "ID",
      type: ColumnTypeEnum.NUMBER
    }
  ],
 
  qField: "username",
  actions: ["show", "quick-edit", "duplicate", "delete"]
};
 
export const createProps = listingProps;
export const editProps = listingProps;
export const showProps = listingProps;

Organizations


// src/crud_config/organizations/index.tsx
export const listingProps = {
  fqcn_bui: {
    Bundle: "ticketCrud",
    Unit: "Organization", 
    Interface: "base"
  },
  resource: "organizations",
  
  mainColumns: [
    {
      title: "ID",
      key: "id",
      type: ColumnTypeEnum.NUMBER,
      sortable: true,
      alignment: "right"
    }
  ],
 
  selectedList: ["id"],
  fieldsAll: ["id"],
 
  formModalInputs: [],
 
  filterFields: [
    {
      key: "id",
      title: "ID",
      type: ColumnTypeEnum.NUMBER
    }
  ],
 
  qField: "id", 
  actions: ["show", "quick-edit", "duplicate", "delete"]
};
 
export const createProps = listingProps;
export const editProps = listingProps;
export const showProps = listingProps;

Ticket Statuses


// src/crud_config/ticket_statuses/index.tsx
export const listingProps = {
  fqcn_bui: {
    Bundle: "ticketCrud",
    Unit: "TicketStatus",
    Interface: "base"
  },
  resource: "ticket_statuses",
  
  mainColumns: [
    {
      title: "ID", 
      key: "id",
      type: ColumnTypeEnum.NUMBER,
      sortable: true,
      alignment: "right"
    },
    {
      title: "Status",
      key: "status",
      type: ColumnTypeEnum.TEXT,
      sortable: true
    },
    {
      title: "Status Code",
      key: "statusCode",
      type: ColumnTypeEnum.TEXT
    },
    {
      title: "Created",
      key: "createdAt",
      type: ColumnTypeEnum.DATETIME,
      sortable: true
    }
  ],
 
  selectedList: ["id", "status", "statusCode", "createdAt"],
  fieldsAll: ["id", "status", "statusCode", "createdAt", "slug"],
 
  formModalInputs: [
    {
      key: "status",
      title: "Status",
      type: ColumnTypeEnum.TEXT,
      required: true
    },
    {
      key: "statusCode",
      title: "Status Code", 
      type: ColumnTypeEnum.TEXT
    }
  ],
 
  filterFields: [
    {
      key: "status",
      title: "Status",
      type: ColumnTypeEnum.TEXT,
      placeholder: "Search status name"
    },
    {
      key: "statusCode",
      title: "Status Code",
      type: ColumnTypeEnum.TEXT,
      placeholder: "Search status code"
    },
    {
      key: "id",
      title: "ID",
      type: ColumnTypeEnum.NUMBER
    }
  ],
 
  qField: "status",
  actions: ["show", "quick-edit", "duplicate", "delete"]
};
 
export const createProps = listingProps;
export const editProps = listingProps;
export const showProps = listingProps;

Files


// src/crud_config/files/index.tsx  
export const listingProps = {
  fqcn_bui: {
    Bundle: "ticketCrud",
    Unit: "File",
    Interface: "base"
  },
  resource: "files",
  
  mainColumns: [
    {
      title: "ID",
      key: "id",
      type: ColumnTypeEnum.NUMBER,
      sortable: true,
      alignment: "right"
    }
  ],
 
  selectedList: ["id"],
  fieldsAll: ["id"],
 
  formModalInputs: [],
 
  filterFields: [
    {
      key: "id",
      title: "ID",
      type: ColumnTypeEnum.NUMBER  
    }
  ],
 
  qField: "id",
  actions: ["show", "quick-edit", "duplicate", "delete"]
};
 
export const createProps = listingProps;
export const editProps = listingProps;
export const showProps = listingProps;

Project Structure

Actual Directory Structure


ticket-frontend-crud-react-v2/
├── src/
│   ├── app/
│   │   ├── [locale]/              # Internationalized routing
│   │   │   ├── [entity]/          # Dynamic CRUD entity pages
│   │   │   ├── metadata/          # Entity metadata management  
│   │   │   ├── page.tsx           # Dashboard
│   │   │   ├── status/            # System status
│   │   │   └── support/           # Support pages
│   │   └── api/                   # API routes
│   │       ├── config-login/      # Config 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 (23 entities)
│   │   ├── tickets/               # Main ticket entity
│   │   ├── opened_tickets/        # Open tickets view
│   │   ├── closed_tickets/        # Closed tickets view
│   │   ├── ticket_replies/        # Conversation system
│   │   ├── ticket_statuses/       # Status management
│   │   ├── ticket_types/          # Type categories
│   │   ├── ticket_impacts/        # Impact levels
│   │   ├── ticket_issues/         # Issue tracking
│   │   ├── ticket_tasks/          # Task management
│   │   ├── ticket_tags/           # Tag system
│   │   ├── ticket_taggings/       # Tag relationships
│   │   ├── users/                 # User management
│   │   ├── organizations/         # Organizations
│   │   ├── files/                 # File attachments
│   │   ├── storage_files/         # File storage
│   │   ├── user_roles/            # Role management
│   │   ├── ownerships/            # Ownership tracking
│   │   ├── event_subscribers/     # Event system
│   │   └── entity-list.js         # Entity registry (98 entities)
│   ├── i18n/                      # Internationalization
│   ├── sitedata/                  # Site configuration
│   ├── store/                     # Redux store  
│   │   ├── slices/                # Redux slices
│   │   └── index.ts               # Store configuration
│   └── utils/                     # Utility functions
├── messages/                      # Translation files
│   ├── en.json                    # English translations
│   ├── fr.json                    # French translations
│   └── es.json                    # Spanish translations
├── environments/                  # Environment configurations
│   ├── .env.dev                   # Development config
│   ├── .env.prod                  # Production config  
│   └── .env.local                 # Local config
├── infrastructure/                # Infrastructure setup
│   └── localstack/               # LocalStack configuration
├── cypress/                       # E2E tests
│   └── e2e/                       # Test specifications
└── sst.config.ts                  # SST deployment config

Technology Stack

Dependencies (Actual from package.json)

Core Framework:

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

PHPCreation Bundles:

@phpcreation/frontend-crud-react-nextjs-bundle: ^2.24.1
@phpcreation/frontend-auth-authorization-flow-react-nextjs-bundle: 2.7.5
@phpcreation/frontend-components-react-nextjs-bundle: 2.13.3
@phpcreation/frontend-config-react-nextjs-bundle: ^2.6.5
@phpcreation/frontend-dynamodb-react-nextjs-bundle: 2.3.3
@phpcreation/frontend-icons-react-nextjs-bundle: ^1.9.6
@phpcreation/frontend-utils-react-nextjs-bundle: ^1.17.0

State Management:

Redux Toolkit: ^2.2.6

HTTP Client:

Axios: ^1.7.2

UI Framework:

Mantine Core: ^8.1.2
React Hook Form: ^7.51.5
Hookform Resolvers: ^3.4.2

Error Tracking:

Sentry (complete suite): ^7.107.0 - ^7.109.0

Testing:

Cypress: ^13.11.0
start-server-and-test: ^2.0.3

Internationalization:

next-intl: ^4.0.2

Features

Implemented Ticket Management Features

Comprehensive CRUD Operations: Full create, read, update, delete for all 23 entities
Advanced Ticket Workflow: Open/closed ticket views, status management, impact tracking
File Attachment System: Complete file upload and management with storage integration
Organization-Based Assignment: User and organization relationship management
Conversation System: Ticket replies and communication tracking
Tag Management: Flexible tagging system with relationship tracking
Task Management: Ticket-related task tracking and assignment
Issue Tracking: Related issue management and linking
Multi-View System: Specialized views for opened and closed tickets

System Features

Multi-language Support: English, French, Spanish
DynamoDB Integration: Performance caching with AWS/LocalStack
Sentry Error Tracking: Comprehensive error monitoring and performance tracking
OAuth 2.0 Authentication: Secure SSO integration
Role-Based Access Control: User role and permission management
Real-time Status Monitoring: API health checks and system status
Advanced Filtering: Multi-field search and async dropdown filters
CSV Export: Data export functionality
Responsive Design: Mobile-friendly interface
Custom Actions: Ticket-specific actions like close-ticket, create-issue
Event System: Event subscription and notification management

Bundle Architecture

Mixed Bundle System: Primary ticketCrud bundle with phprCrud system entities
98 Available Entity Types: Full entity registry for expansion
Dynamic CRUD Pages: Config-driven entity management

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
pnpm run test:e2e         # E2E tests with server
pnpm run test:e2e:cmd     # Command-line E2E tests
pnpm run test:e2e:ci      # CI E2E tests
 
# Code Quality
pnpm run lint             # Run ESLint

Environment Loading

The project uses custom environment loading:


# 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 AWS profile
AWS_PROFILE=ticket-prod sst deploy --stage production

Health Monitoring


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

Support & Troubleshooting

Common Issues

File Upload Issues

If file attachments are failing, check S3/LocalStack configuration:


# Test LocalStack S3
aws s3 ls --endpoint-url=http://localhost:4566
 
# Check file upload endpoint
curl -X POST /api/v1/files -F "file=@test.pdf"

DynamoDB Cache Issues

For caching problems, verify DynamoDB connectivity:


# LocalStack DynamoDB
aws dynamodb list-tables --endpoint-url=http://localhost:4566
 
# Production DynamoDB
aws dynamodb describe-table --table-name frontend-inventory-react-app-cache-prod

Getting Help

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

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