Companyon

"Companyon", which means company companion, is a full-stack web application that allows users to manage a parent company with varying number of multiple distinct business entities (subsidiaries) that operate separately. Employers and employees with admin access can perform CRUD (Create, Read, Update and Delete) operations in managing income statements, inventories and employee details. Additionally, the app is also built with payroll features for employees such as adding new job information for promotions or salary increases and generating payslips using the updates.

Documentation

Project Summary

A Company Management application developed with Angular, PHP and MySQL. Here are the key highlights:

1. Technology Stack:

   • Angular: A powerful front-end framework for creating dynamic user interfaces.
   • PHP: A widely-used, open-source server-side scripting language designed for web development..
   • MySQL: An open-source RDBMS used to store, manage, and retrieve structured data.
   • Bootstrap: a popular front-end framework that simplifies web development by providing a collection of tools, components, and styles.
   • Tailwind CSS: a utility-first CSS framework that allows you to create applications more efficiently.
   • Angular Material: a UI component library for Angular, designed to simplify the development process by providing a set of high-quality, internationalized, and accessible components.
   • ngx-echarts: an Angular directive for ECharts, a JavaScript library for data visualization.

2. Functionality:

   • Business Management: Create, read, update, and delete businesses.
   • Statistics Management: Create, read, update, and delete income statements.
   • Inventory Management: Create, read, update, and delete inventory items.
   • Employee Management: Create, read, update, and delete employee details.
   • Payroll Management: Create, read, update, and delete employee job informations and payslips.
   • Profile Management: Edit profile details.
   • User Authentication: Secure user registration and login functionality.

3. Architecture:

   • The client-side interface is built using Angular, providing an intuitive user experience.
   • The server-side API, developed with PHP, handles requests from the client.
   • MySQL serves as the database.

Deployment

Infinity Free - Production Server for Client and API apps

1. Register and Login to InfinityFree - Free Website Hosting for PHP & MySQL

2. Create Account and create Database by going to Accounts tab -> MySQL Databases option

3. For Manual Deployment: Generate build files for the frontend client app -> upload files with the backend app via FTP (File Transfer Protocol) using FileZilla. Below are the server folder directories where applications should be uploaded/hosted:

   • frontend (build files): htdocs
   • backend: htdocs/backend

4. For Continuous Integration: Integrate Github Actions - FTP Deploy

   

5. Create .htaccess file in htdocs server folder to handle page reloads. Refer to following resources for file setup:

   • 404 error page - Infinity Free Knowledge Base
   • Working solution - Stackoverflow

Vercel (Restricted access to API) - Test deployment for Client app only

• Deployed via Vercel.com

• App URL: https://companyon-client.vercel.app

For more information about using Vercel, check out https://vercel.com/docs/concepts/deployments/overview

📂 COMPANYON: Full-Stack Application README

This document outlines the architecture, technology stack, component structure, and development best practices for the COMPANYON business management system, designed to handle core business operations including Employee, Business, Payroll, Inventory, and Financial (Income Statement) management.

---

1. ⚙️ Application Architecture

COMPANYON follows a Decoupled Architecture, consisting of a modern Angular frontend and a RESTful API built on PHP and MySQL.

Frontend Application (Client-Side)

• Technology: Angular (v17+).
• Role: The presentation layer. It handles the user interface, routing, form logic, validation, and manages local application state using RxJS.
• Communication: Interacts with the Backend API exclusively via secure HTTP/REST calls.

Backend Application (Server-Side/API)

• Technology: PHP (Framework likely used, such as Laravel or Symfony) and MySQL database.
• Role: The core business and data logic layer. It processes API requests, implements CRUD operations for all entities (Employee, Business, etc.), manages security, and interacts directly with the database.
• Data Tier: MySQL handles data persistence and retrieval using structured queries.

---

2. 💻 Frontend Technology & Concepts (Angular)

The Angular frontend is structured to be modular, scalable, and maintainable.

A. Core Framework Concepts

Concept	Implementation in COMPANYON	Best Practice
Services & DI	Injecting services (EmployeeService, AuthService) into components via the constructor.	Services handle all API calls and business logic, abstracting data access from the UI components.
Reactive Programming (RxJS)	Extensive use of Observables and .subscribe() for API calls and stream-based state management (authenticatedUser$).	Manages asynchronous data flow and central application state, improving responsiveness.
Component Communication	@Input() and @Output() EventEmitter (e.g., in SidePanelComponent).	Enables clear data flow between parent and child components (e.g., child reports an action back to parent).

B. UI and Forms

Technology	Implementation in COMPANYON	Best Practice
Angular Material	Used for <mat-table>, <mat-paginator>, <mat-sort>, and <mat-datepicker>.	Provides a consistent, professional UI for displaying complex data grids and inputs.
Template-Driven Forms	Used in most Add/Edit components with template variables (#ngForm, [(ngModel)]).	Simple forms are handled directly in the template for quick development.
Reactive Forms	Used in the SignInComponent (FormGroup, formControlName).	Used for complex forms (like authentication) to enforce robust validation rules programmatically (Validators.email).

---

3. 💾 Backend Technology & Data (PHP/MySQL)

The backend provides the API endpoints for all frontend interactions.

Technology	Role and Best Practice	Link to Frontend
PHP API	Implements the RESTful API endpoints (e.g., /api/employees, /api/businesses). It handles request validation, authentication, and error formatting before communicating with the database.	The frontend Services (e.g., EmployeeService) construct HTTP requests (GET, POST, PUT, DELETE) to these endpoints.
MySQL	The Relational Database stores all application data (employees, businesses, transactions) with structured tables and integrity constraints (primary/foreign keys).	PHP scripts use database connectors (like PDO) to execute SQL queries.
Security	The PHP API handles Authentication (checking email/password) and Authorization (ensuring the employer can only access their data).	After successful login, the PHP API returns a user object and potentially a JWT token to the Angular frontend for subsequent authorized requests.

---

4. 📂 Component Pattern & CRUD Structure

All major business entities adhere to a strict List/Add/Update/Details CRUD pattern for consistency.

Entity (Module)	List Component Focus	Add/Update Component Focus
Employee	MatTable with sorting, filtering, and a Date Hired Range Picker.	Template-Driven Form ([(ngModel)]). Uses employeeService.updateEmployee() and SweetAlert for feedback.
Business	SidePanelComponent: Toggles display between a business list and contextual details.	In-line Editing Pattern: *ngIf is used to switch between read-only spans and editable inputs (businessToEdit).
Income Statement	MatTable focusing on Date Range Filtering and aggregating totals (Revenue/Expense).	Form fields for recording financial transactions (type, amount, date).
Inventory	MatTable with filters for stock levels (e.g., low stock) and product search (SKU, name).	Form fields to manage product details, pricing, and stock quantity.
Payroll	Separate views for Job Information (salaries) and Payslips (payment records) filtered by date/employee.	Forms to set employee salary and generate/record payment details.

5. ✅ Best Practices

• Decoupling: The Angular frontend is completely independent of the PHP backend's logic, only interacting via defined REST interfaces.
• User Feedback: Use of SweetAlert2 (Swal.fire) for rich, contextual feedback on all asynchronous CRUD operations (success/error/confirmations).
• Security: Password visibility toggle improves login UX, while the PHP API enforces server-side security, handling authentication and data access control.
• Code Reusability: Core UI elements (like the SidePanelComponent) and common business logic are managed in Angular Services and reused across multiple features.