panel-service-guide • 12/31/2025

PANEL SERVICE GUIDE

Linkedin Admin Panel

The Linkedin Admin Panel is a dynamic, auto-generated frontend application that provides a comprehensive management interface for all backend services and data objects within the Linkedin ecosystem. Built using React and Vite, it automatically adapts to the project's service architecture, providing intuitive CRUD operations and real-time data management capabilities.

Architectural Design Credit and Contact Information

The architectural design of this admin panel is credited to Mindbricks Genesis Engine.

We encourage open communication and welcome any questions or discussions related to the architectural aspects of this admin panel.

Documentation Scope

Welcome to the official documentation for the Linkedin Admin Panel. This document is designed to provide a comprehensive guide to understanding, configuring, and extending the admin panel's functionality.

Intended Audience

This documentation is intended for frontend developers, system administrators, and integrators who need to understand how the admin panel works, how to configure it for different environments, and how to extend its functionality for custom requirements.

Overview

Within these pages, you will find detailed information on the panel's architecture, service integration patterns, authentication flows, data object management, and API integration methods. The admin panel serves as a unified interface for managing all aspects of the Linkedin microservices ecosystem.

Panel Architecture Overview

The Linkedin Admin Panel is built on a dynamic, pattern-driven architecture that automatically generates user interfaces based on the project's service definitions and data object schemas.

Core Components

Dynamic Service Integration

Automatically discovers and integrates with all backend services defined in the project
Generates service-specific navigation and routing structures
Provides unified authentication and session management across all services

Data Object Management

Dynamically creates CRUD interfaces for each data object within services
Supports complex data relationships and validation rules
Provides real-time data synchronization with backend services

Modular UI Framework

Built on React with Material-UI components for consistent user experience
Responsive design that works across desktop and mobile devices
Extensible component system for custom functionality

Service Integration Architecture

The admin panel integrates with backend services through a standardized API communication layer:

JobApplication Service Integration

Service Name: jobApplication
Service URL: VITE_JOBAPPLICATION_SERVICE_URL
Data Objects: 2 objects
- JobPosting, JobApplication

Networking Service Integration

Service Name: networking
Service URL: VITE_NETWORKING_SERVICE_URL
Data Objects: 2 objects
- Connection, ConnectionRequest

Company Service Integration

Service Name: company
Service URL: VITE_COMPANY_SERVICE_URL
Data Objects: 4 objects
- CompanyFollower, CompanyUpdate, Company, CompanyAdmin

Content Service Integration

Service Name: content
Service URL: VITE_CONTENT_SERVICE_URL
Data Objects: 3 objects
- Post, Like, Comment

Messaging Service Integration

Service Name: messaging
Service URL: VITE_MESSAGING_SERVICE_URL
Data Objects: 2 objects
- Message, Conversation

Profile Service Integration

Service Name: profile
Service URL: VITE_PROFILE_SERVICE_URL
Data Objects: 7 objects
- Profile, Premiumsubscription, Certification, Language, Sys_premiumsubscriptionPayment, Sys_paymentCustomer, Sys_paymentMethod

Auth Service Integration

Service Name: auth
Service URL: VITE_AUTH_SERVICE_URL
Data Objects: 1 objects
- User

Authentication and Authorization

The admin panel implements a comprehensive authentication system that integrates with the project's authentication service.

Authentication Flow

Login Process

User accesses the admin panel login page
Credentials are validated against the authentication service
JWT access token is received and stored securely
Session is established with proper permissions and tenant context

Token Management

Access tokens are stored in secure HTTP-only cookies
Automatic token refresh mechanisms prevent session expiration
Multi-tenant support with tenant-specific token handling

Authorization Levels

Role-Based Access Control

Admin users have full access to all services and data objects
Service-specific permissions control access to individual modules
Data object permissions control CRUD operations on specific entities

Permission Structure

adminPanel.access - Basic admin panel access
linkedin.jobApplication.manage - Service management permissions
linkedin.jobApplication.jobPosting.crud - Data object CRUD permissions
linkedin.jobApplication.jobApplication.crud - Data object CRUD permissions
linkedin.networking.manage - Service management permissions
linkedin.networking.connection.crud - Data object CRUD permissions
linkedin.networking.connectionRequest.crud - Data object CRUD permissions
linkedin.company.manage - Service management permissions
linkedin.company.companyFollower.crud - Data object CRUD permissions
linkedin.company.companyUpdate.crud - Data object CRUD permissions
linkedin.company.company.crud - Data object CRUD permissions
linkedin.company.companyAdmin.crud - Data object CRUD permissions
linkedin.content.manage - Service management permissions
linkedin.content.post.crud - Data object CRUD permissions
linkedin.content.like.crud - Data object CRUD permissions
linkedin.content.comment.crud - Data object CRUD permissions
linkedin.messaging.manage - Service management permissions
linkedin.messaging.message.crud - Data object CRUD permissions
linkedin.messaging.conversation.crud - Data object CRUD permissions
linkedin.profile.manage - Service management permissions
linkedin.profile.profile.crud - Data object CRUD permissions
linkedin.profile.premiumsubscription.crud - Data object CRUD permissions
linkedin.profile.certification.crud - Data object CRUD permissions
linkedin.profile.language.crud - Data object CRUD permissions
linkedin.profile.sys_premiumsubscriptionPayment.crud - Data object CRUD permissions
linkedin.profile.sys_paymentCustomer.crud - Data object CRUD permissions
linkedin.profile.sys_paymentMethod.crud - Data object CRUD permissions
linkedin.auth.manage - Service management permissions
linkedin.auth.user.crud - Data object CRUD permissions

Service Integration Guide

Environment Configuration

The admin panel connects to backend services through environment-specific configuration:

Development Environment

VITE_AUTH_SERVICE_URL=http://localhost:3001
VITE_USER_SERVICE_URL=http://localhost:3002
VITE_PRODUCT_SERVICE_URL=http://localhost:3003

Staging Environment

VITE_AUTH_SERVICE_URL=https://auth-api.linkedin.staging.mindbricks.com
VITE_USER_SERVICE_URL=https://user-api.linkedin.staging.mindbricks.com
VITE_PRODUCT_SERVICE_URL=https://product-api.linkedin.staging.mindbricks.com

Production Environment

VITE_AUTH_SERVICE_URL=https://auth-api.linkedin.prod.mindbricks.com
VITE_USER_SERVICE_URL=https://user-api.linkedin.prod.mindbricks.com
VITE_PRODUCT_SERVICE_URL=https://product-api.linkedin.prod.mindbricks.com

API Communication Layer

Axios Configuration

// Base configuration for all service communications
const apiClient = axios.create({
  baseURL: serviceUrl,
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${accessToken}`
  }
});

Request Interceptors

Automatic token attachment to all requests
Error handling and retry logic for failed requests
Request/response logging for debugging

Response Interceptors

Automatic token refresh on 401 responses
Error message standardization
Loading state management

Data Object Management

Dynamic CRUD Interface Generation

The admin panel automatically generates complete CRUD interfaces for each data object based on the service definitions:

JobApplication Service Data Objects

JobPosting Management

Object Name: jobPosting
Component Name: JobApplicationJobPostingAppPage
Available Operations: Create, Read, Update, Delete, List
Route Path: /dashboard/jobApplication/jobPosting

Generated Components

List View: Displays paginated data with filtering and sorting
Create Modal: Form for creating new jobPosting records
Update Modal: Form for editing existing jobPosting records
Delete Confirmation: Safe deletion with confirmation dialogs

JobApplication Management

Object Name: jobApplication
Component Name: JobApplicationJobApplicationAppPage
Available Operations: Create, Read, Update, Delete, List
Route Path: /dashboard/jobApplication/jobApplication

Generated Components

List View: Displays paginated data with filtering and sorting
Create Modal: Form for creating new jobApplication records
Update Modal: Form for editing existing jobApplication records
Delete Confirmation: Safe deletion with confirmation dialogs

Networking Service Data Objects

Connection Management

Object Name: connection
Component Name: NetworkingConnectionAppPage
Available Operations: Create, Read, Update, Delete, List
Route Path: /dashboard/networking/connection

Generated Components

List View: Displays paginated data with filtering and sorting
Create Modal: Form for creating new connection records
Update Modal: Form for editing existing connection records
Delete Confirmation: Safe deletion with confirmation dialogs

ConnectionRequest Management

Object Name: connectionRequest
Component Name: NetworkingConnectionRequestAppPage
Available Operations: Create, Read, Update, Delete, List
Route Path: /dashboard/networking/connectionRequest

Generated Components

List View: Displays paginated data with filtering and sorting
Create Modal: Form for creating new connectionRequest records
Update Modal: Form for editing existing connectionRequest records
Delete Confirmation: Safe deletion with confirmation dialogs

Company Service Data Objects

CompanyFollower Management

Object Name: companyFollower
Component Name: CompanyCompanyFollowerAppPage
Available Operations: Create, Read, Update, Delete, List
Route Path: /dashboard/company/companyFollower

Generated Components

List View: Displays paginated data with filtering and sorting
Create Modal: Form for creating new companyFollower records
Update Modal: Form for editing existing companyFollower records
Delete Confirmation: Safe deletion with confirmation dialogs

CompanyUpdate Management

Object Name: companyUpdate
Component Name: CompanyCompanyUpdateAppPage
Available Operations: Create, Read, Update, Delete, List
Route Path: /dashboard/company/companyUpdate

Generated Components

List View: Displays paginated data with filtering and sorting
Create Modal: Form for creating new companyUpdate records
Update Modal: Form for editing existing companyUpdate records
Delete Confirmation: Safe deletion with confirmation dialogs

Company Management

Object Name: company
Component Name: CompanyCompanyAppPage
Available Operations: Create, Read, Update, Delete, List
Route Path: /dashboard/company/company

Generated Components

List View: Displays paginated data with filtering and sorting
Create Modal: Form for creating new company records
Update Modal: Form for editing existing company records
Delete Confirmation: Safe deletion with confirmation dialogs

CompanyAdmin Management

Object Name: companyAdmin
Component Name: CompanyCompanyAdminAppPage
Available Operations: Create, Read, Update, Delete, List
Route Path: /dashboard/company/companyAdmin

Generated Components

List View: Displays paginated data with filtering and sorting
Create Modal: Form for creating new companyAdmin records
Update Modal: Form for editing existing companyAdmin records
Delete Confirmation: Safe deletion with confirmation dialogs

Content Service Data Objects

Post Management

Object Name: post
Component Name: ContentPostAppPage
Available Operations: Create, Read, Update, Delete, List
Route Path: /dashboard/content/post

Generated Components

List View: Displays paginated data with filtering and sorting
Create Modal: Form for creating new post records
Update Modal: Form for editing existing post records
Delete Confirmation: Safe deletion with confirmation dialogs

Like Management

Object Name: like
Component Name: ContentLikeAppPage
Available Operations: Create, Read, Update, Delete, List
Route Path: /dashboard/content/like

Generated Components

List View: Displays paginated data with filtering and sorting
Create Modal: Form for creating new like records
Update Modal: Form for editing existing like records
Delete Confirmation: Safe deletion with confirmation dialogs

Comment Management

Object Name: comment
Component Name: ContentCommentAppPage
Available Operations: Create, Read, Update, Delete, List
Route Path: /dashboard/content/comment

Generated Components

List View: Displays paginated data with filtering and sorting
Create Modal: Form for creating new comment records
Update Modal: Form for editing existing comment records
Delete Confirmation: Safe deletion with confirmation dialogs

Messaging Service Data Objects

Message Management

Object Name: message
Component Name: MessagingMessageAppPage
Available Operations: Create, Read, Update, Delete, List
Route Path: /dashboard/messaging/message

Generated Components

List View: Displays paginated data with filtering and sorting
Create Modal: Form for creating new message records
Update Modal: Form for editing existing message records
Delete Confirmation: Safe deletion with confirmation dialogs

Conversation Management

Object Name: conversation
Component Name: MessagingConversationAppPage
Available Operations: Create, Read, Update, Delete, List
Route Path: /dashboard/messaging/conversation

Generated Components

List View: Displays paginated data with filtering and sorting
Create Modal: Form for creating new conversation records
Update Modal: Form for editing existing conversation records
Delete Confirmation: Safe deletion with confirmation dialogs

Profile Service Data Objects

Profile Management

Object Name: profile
Component Name: ProfileProfileAppPage
Available Operations: Create, Read, Update, Delete, List
Route Path: /dashboard/profile/profile

Generated Components

List View: Displays paginated data with filtering and sorting
Create Modal: Form for creating new profile records
Update Modal: Form for editing existing profile records
Delete Confirmation: Safe deletion with confirmation dialogs

Premiumsubscription Management

Object Name: premiumsubscription
Component Name: ProfilePremiumsubscriptionAppPage
Available Operations: Create, Read, Update, Delete, List
Route Path: /dashboard/profile/premiumsubscription

Generated Components

List View: Displays paginated data with filtering and sorting
Create Modal: Form for creating new premiumsubscription records
Update Modal: Form for editing existing premiumsubscription records
Delete Confirmation: Safe deletion with confirmation dialogs

Certification Management

Object Name: certification
Component Name: ProfileCertificationAppPage
Available Operations: Create, Read, Update, Delete, List
Route Path: /dashboard/profile/certification

Generated Components

List View: Displays paginated data with filtering and sorting
Create Modal: Form for creating new certification records
Update Modal: Form for editing existing certification records
Delete Confirmation: Safe deletion with confirmation dialogs

Language Management

Object Name: language
Component Name: ProfileLanguageAppPage
Available Operations: Create, Read, Update, Delete, List
Route Path: /dashboard/profile/language

Generated Components

List View: Displays paginated data with filtering and sorting
Create Modal: Form for creating new language records
Update Modal: Form for editing existing language records
Delete Confirmation: Safe deletion with confirmation dialogs

Sys_premiumsubscriptionPayment Management

Object Name: sys_premiumsubscriptionPayment
Component Name: ProfileSys_premiumsubscriptionPaymentAppPage
Available Operations: Create, Read, Update, Delete, List
Route Path: /dashboard/profile/sys_premiumsubscriptionPayment

Generated Components

List View: Displays paginated data with filtering and sorting
Create Modal: Form for creating new sys_premiumsubscriptionPayment records
Update Modal: Form for editing existing sys_premiumsubscriptionPayment records
Delete Confirmation: Safe deletion with confirmation dialogs

Sys_paymentCustomer Management

Object Name: sys_paymentCustomer
Component Name: ProfileSys_paymentCustomerAppPage
Available Operations: Create, Read, Update, Delete, List
Route Path: /dashboard/profile/sys_paymentCustomer

Generated Components

List View: Displays paginated data with filtering and sorting
Create Modal: Form for creating new sys_paymentCustomer records
Update Modal: Form for editing existing sys_paymentCustomer records
Delete Confirmation: Safe deletion with confirmation dialogs

Sys_paymentMethod Management

Object Name: sys_paymentMethod
Component Name: ProfileSys_paymentMethodAppPage
Available Operations: Create, Read, Update, Delete, List
Route Path: /dashboard/profile/sys_paymentMethod

Generated Components

List View: Displays paginated data with filtering and sorting
Create Modal: Form for creating new sys_paymentMethod records
Update Modal: Form for editing existing sys_paymentMethod records
Delete Confirmation: Safe deletion with confirmation dialogs

Auth Service Data Objects

User Management

Object Name: user
Component Name: AuthUserAppPage
Available Operations: Create, Read, Update, Delete, List
Route Path: /dashboard/auth/user

Generated Components

List View: Displays paginated data with filtering and sorting
Create Modal: Form for creating new user records
Update Modal: Form for editing existing user records
Delete Confirmation: Safe deletion with confirmation dialogs

Data Validation and Error Handling

Client-Side Validation

Real-time validation based on data object property definitions
Type checking and format validation
Required field validation

Server-Side Integration

API error response handling
Validation error display
Success/error notification system

API Integration Patterns

Standard CRUD Operations

List Operations

// Get paginated list of data objects
const response = await apiClient.get(`/${dataObjectName}/list`, {
  params: {
    pageNumber: 1,
    pageRowCount: 25,
    getJoins: true,
    caching: true
  }
});

Create Operations

// Create new data object
const response = await apiClient.post(`/${dataObjectName}/create`, {
  // Data object properties
});

Update Operations

// Update existing data object
const response = await apiClient.put(`/${dataObjectName}/update`, {
  id: objectId,
  // Updated properties
});

Delete Operations

// Delete data object
const response = await apiClient.delete(`/${dataObjectName}/delete`, {
  params: { id: objectId }
});

Advanced Query Features

Filtering and Search

Dynamic filter generation based on data object properties
Full-text search capabilities
Date range filtering
Multi-select filters for enum properties

Sorting and Pagination

Multi-column sorting support
Configurable page sizes
Total count and page navigation
Infinite scroll option

Data Relationships

Automatic join handling for related data objects
Lazy loading for performance optimization
Relationship visualization in forms

Dynamic Route Generation

The admin panel automatically generates routes based on the service and data object structure:

Main Routes

/ - Login page
/dashboard - Main dashboard
/dashboard/jobApplication - Service overview
/dashboard/jobApplication/jobPosting - Data object management
/dashboard/jobApplication/jobApplication - Data object management
/dashboard/networking - Service overview
/dashboard/networking/connection - Data object management
/dashboard/networking/connectionRequest - Data object management
/dashboard/company - Service overview
/dashboard/company/companyFollower - Data object management
/dashboard/company/companyUpdate - Data object management
/dashboard/company/company - Data object management
/dashboard/company/companyAdmin - Data object management
/dashboard/content - Service overview
/dashboard/content/post - Data object management
/dashboard/content/like - Data object management
/dashboard/content/comment - Data object management
/dashboard/messaging - Service overview
/dashboard/messaging/message - Data object management
/dashboard/messaging/conversation - Data object management
/dashboard/profile - Service overview
/dashboard/profile/profile - Data object management
/dashboard/profile/premiumsubscription - Data object management
/dashboard/profile/certification - Data object management
/dashboard/profile/language - Data object management
/dashboard/profile/sys_premiumsubscriptionPayment - Data object management
/dashboard/profile/sys_paymentCustomer - Data object management
/dashboard/profile/sys_paymentMethod - Data object management
/dashboard/auth - Service overview
/dashboard/auth/user - Data object management

Route Configuration

// Automatically generated route structure
const dashboardRoutes = [
  {
    path: 'dashboard',
    element: <DashboardLayout />,
    children: [
      { index: true, element: <IndexPage /> },
      
      
      {
        path: 'jobApplication',
        element: <DataObjectLayout />,
        children: [
          
          {
            path: 'jobPosting',
            element: <JobApplicationJobPostingAppPage />
          },
          
          {
            path: 'jobApplication',
            element: <JobApplicationJobApplicationAppPage />
          }
          
        ]
      },
      
      
      
      {
        path: 'networking',
        element: <DataObjectLayout />,
        children: [
          
          {
            path: 'connection',
            element: <NetworkingConnectionAppPage />
          },
          
          {
            path: 'connectionRequest',
            element: <NetworkingConnectionRequestAppPage />
          }
          
        ]
      },
      
      
      
      {
        path: 'company',
        element: <DataObjectLayout />,
        children: [
          
          {
            path: 'companyFollower',
            element: <CompanyCompanyFollowerAppPage />
          },
          
          {
            path: 'companyUpdate',
            element: <CompanyCompanyUpdateAppPage />
          },
          
          {
            path: 'company',
            element: <CompanyCompanyAppPage />
          },
          
          {
            path: 'companyAdmin',
            element: <CompanyCompanyAdminAppPage />
          }
          
        ]
      },
      
      
      
      {
        path: 'content',
        element: <DataObjectLayout />,
        children: [
          
          {
            path: 'post',
            element: <ContentPostAppPage />
          },
          
          {
            path: 'like',
            element: <ContentLikeAppPage />
          },
          
          {
            path: 'comment',
            element: <ContentCommentAppPage />
          }
          
        ]
      },
      
      
      
      {
        path: 'messaging',
        element: <DataObjectLayout />,
        children: [
          
          {
            path: 'message',
            element: <MessagingMessageAppPage />
          },
          
          {
            path: 'conversation',
            element: <MessagingConversationAppPage />
          }
          
        ]
      },
      
      
      
      {
        path: 'profile',
        element: <DataObjectLayout />,
        children: [
          
          {
            path: 'profile',
            element: <ProfileProfileAppPage />
          },
          
          {
            path: 'premiumsubscription',
            element: <ProfilePremiumsubscriptionAppPage />
          },
          
          {
            path: 'certification',
            element: <ProfileCertificationAppPage />
          },
          
          {
            path: 'language',
            element: <ProfileLanguageAppPage />
          },
          
          {
            path: 'sys_premiumsubscriptionPayment',
            element: <ProfileSys_premiumsubscriptionPaymentAppPage />
          },
          
          {
            path: 'sys_paymentCustomer',
            element: <ProfileSys_paymentCustomerAppPage />
          },
          
          {
            path: 'sys_paymentMethod',
            element: <ProfileSys_paymentMethodAppPage />
          }
          
        ]
      },
      
      
      
      {
        path: 'auth',
        element: <DataObjectLayout />,
        children: [
          
          {
            path: 'user',
            element: <AuthUserAppPage />
          }
          
        ]
      }
      
      
    ]
  }
];

Main Navigation

Dashboard overview
Service modules (dynamically generated)
User profile and settings
Logout functionality

Service Navigation

Service-specific data object management
Service configuration and settings
Service health and monitoring

Error Handling and User Experience

Error Management System

API Error Handling

Standardized error response processing
User-friendly error message display
Automatic retry mechanisms for transient failures
Offline detection and handling

Validation Error Display

Field-specific error highlighting
Inline error messages
Form validation summary

Loading States

Skeleton loading for data tables
Progress indicators for long operations
Optimistic updates for better UX

Notification System

Success Notifications

Operation completion confirmations
Data synchronization status
System health updates

Error Notifications

API error alerts
Validation error summaries
Network connectivity issues

Warning Notifications

Data loss prevention warnings
Permission change alerts
System maintenance notifications

Deployment and Configuration

Build Configuration

Environment-Specific Builds

Development builds with debugging enabled
Staging builds with production-like settings
Production builds with optimization and minification

Docker Support

Multi-stage Docker builds for different environments
Environment variable injection
Health check endpoints

Performance Optimization

Code Splitting

Route-based code splitting
Component lazy loading
Dynamic imports for heavy components

Caching Strategies

API response caching
Static asset caching
Browser cache optimization

Bundle Optimization

Tree shaking for unused code
Asset compression
CDN integration support

Security Considerations

Authentication Security

Secure token storage and transmission
Automatic token refresh
Session timeout handling
Multi-factor authentication support

Data Protection

Input sanitization and validation
XSS prevention
CSRF protection
Secure API communication

Access Control

Role-based permission enforcement
Tenant isolation in multi-tenant setups
Audit logging for sensitive operations
Secure logout and session cleanup

Troubleshooting and Support

Common Issues

Authentication Problems

Token expiration handling
Session restoration after page refresh
Multi-tenant login issues

API Integration Issues

Service connectivity problems
Data synchronization errors
Permission-related access denials

UI/UX Issues

Component rendering problems
Navigation routing issues
Form validation errors

Debugging Tools

Development Tools

React Developer Tools integration
Network request monitoring
State management debugging
Performance profiling

Logging and Monitoring

Client-side error logging
API request/response logging
User interaction tracking
Performance metrics collection

Menu

LinkedIn Clone

PANEL SERVICE GUIDE

Linkedin Admin Panel

Architectural Design Credit and Contact Information

Documentation Scope

Panel Architecture Overview

Core Components

Service Integration Architecture

Authentication and Authorization

Authentication Flow

Authorization Levels

Service Integration Guide

Environment Configuration

API Communication Layer

Data Object Management

Dynamic CRUD Interface Generation

Data Validation and Error Handling

API Integration Patterns

Standard CRUD Operations

Advanced Query Features

Navigation and Routing

Dynamic Route Generation

Navigation Structure

Error Handling and User Experience

Error Management System

Notification System

Deployment and Configuration

Build Configuration

Performance Optimization

Security Considerations

Authentication Security

Data Protection

Access Control

Troubleshooting and Support

Common Issues

Debugging Tools

On this page

Need help?