Intercompany Management System

The Intercompany Management System is a role-based enterprise application built with the MERN stack (TypeScript edition), designed to streamline project, client, and task management within a company. It features intuitive dashboards for Admins and Staff, offering efficient task tracking, data visualization with charts and graphs, and seamless collaboration.

Navigation

• Tech Stack
• Roles and Features
• Key Features
• Installation and Setup
• Demo Pages
• Usage
• Acknowledgements

Tech Stack

• Frontend: React (Vite, TypeScript), TanStack, Tailwind CSS, Framer Motion
• Backend: Node.js, Express.js, TypeScript
• Database: MySQL (Database name: admin-mgmt)
• State Management: TanStack Query
• File Uploads: Cloudinary (no local uploads folder required)
• Charts & Graphs: Recharts

Roles & Features

Admin

• Manage users, projects, clients, tasks, and categories
• Create, update, and delete:
  • Users
  • Projects & project categories
  • Clients & client categories
• Assign tasks to one or multiple staff members with deadlines
• Monitor company performance using charts and graphs
• View and control all system activity

Staff

• View assigned tasks
• Update task status with three states:
  • To Do (default)
  • Doing
  • Done
• Focus only on tasks without access to management controls

Key Features

• Role-Based Routing → Separate dashboards for Admin and Staff
• Task Lifecycle Management → To Do → Doing → Done
• Cloudinary Integration → Secure and efficient image uploads (no manual uploads directory needed)
• MySQL Database → Reliable relational database (admin-mgmt)
• Admin Insights → Charts and graphs for performance visualization
• Framer Motion Animations → Smooth, subtle UI interactions
• Responsive Design → Works seamlessly on desktop and mobile

Installation & Setup

1. Clone the repository

   git clone https://github.com/aryanad/admin-mgmt.git
   cd admin-mgmt

2. Install dependencies

   # Install server and root dependencies
   npm i --legacy-peer-deps
   
   # Install client dependencies
   cd ../frontend
   npm i --legacy-peer-deps

3. Set up environment variables

• Create a .env file in the backend directory with the following:

  NODE_ENV=development
  CLOUDINARY_CLOUD_NAME=<your_cloudinary_name>
  CLOUDINARY_API_KEY=<your_cloudinary_api_key>
  CLOUDINARY_API_SECRET=<your_cloudinary_api_secret>
  JWT_SECRET=<randomStringForJWT>
  PORT=9000
  

4. Run the development server

   # Start Server (from root)
   npm run dev

5. Open your browser
   Visit: http://localhost:5173

Demo Pages

Admin Dashboard
User Management
Add Clients
Add Projects
Add Tasks

Usage

• Admins → Manage users, clients, projects, categories, and tasks while analyzing progress with charts
• Staff → Update task statuses and manage assigned work in a simple dashboard

Acknowledgements

• React
• Vite
• TypeScript
• Tailwind CSS
• TanStack Query
• Express.js
• MySQL
• Cloudinary
• Framer Motion

---

🚀 The Intercompany Management System brings clarity, efficiency, and collaboration to your organization.