PINEPIM Asset Management System

A comprehensive enterprise-grade asset management system built with Angular 19 and Angular Material.

🚀 Features

Core Modules

• Authentication System - Secure login with role-based access
• Dashboard - Overview with statistics, recent activities, and maintenance alerts
• Purchase Orders - Track and manage purchase orders with filtering and export
• Asset Registration - Register and manage new assets with status tracking
• Asset List - Comprehensive asset inventory with search and filtering
• Asset Transfer - Track asset transfers between departments/branches
• Asset Retirement - Manage asset retirement and disposal
• Admin Settings - User management and system administration

Design System

• Color Palette:

  • Primary Red: #c80000
  • Dark Gray: #1a1a1a
  • Medium Gray: #2e2e2e
  • White: #ffffff
  • Light Gray: #b0b0b0
  • Accent Green: #00cc66
  • Yellow/Orange: #ffaa00
  • Red: #ff4444

• Enterprise UI/UX:

  • Responsive design for desktop and tablet
  • Material Design components
  • Custom CSS with CSS variables
  • Professional color scheme
  • Smooth animations and transitions

🛠️ Technology Stack

• Frontend: Angular 19.2.0
• UI Framework: Angular Material
• Styling: Custom CSS with CSS Variables
• Routing: Angular Router with lazy loading
• State Management: Angular Services
• Build Tool: Angular CLI

📦 Installation

1. Clone the repository:

   git clone <repository-url>
   cd pine-asset-webapp
   

2. Install dependencies:

   npm install
   

3. Start the development server:

   npm start
   

4. Open your browser: Navigate to http://localhost:4200

🔐 Demo Credentials

• Employee ID: admin
• Password: password

🏗️ Project Structure

src/
├── app/
│   ├── auth/
│   │   └── login/           # Authentication module
│   ├── dashboard/           # Dashboard overview
│   ├── purchase-orders/     # Purchase orders management
│   ├── asset/
│   │   ├── registration/    # Asset registration
│   │   ├── list/           # Asset inventory
│   │   ├── transfer/       # Asset transfers
│   │   └── retirement/     # Asset retirement
│   ├── admin/              # Admin settings
│   ├── app.component.*     # Main layout
│   ├── app.routes.ts       # Routing configuration
│   └── app.config.ts       # App configuration
├── styles.css              # Global styles
└── main.ts                 # Application entry point

🎨 Design Features

Layout

• Top Navigation Bar - Logo, notifications, user menu
• Left Sidebar - Navigation menu with role-based visibility
• Main Content Area - Dynamic content based on route
• Responsive Design - Mobile and tablet friendly

Components

• Data Tables - Sortable, filterable, paginated
• Forms - Reactive forms with validation
• Cards - Information display with consistent styling
• Charts & Statistics - Dashboard overview widgets
• Status Indicators - Color-coded status chips
• Action Buttons - Consistent button styling

🔧 Development

Available Scripts

• npm start - Start development server
• npm run build - Build for production
• npm run test - Run unit tests
• npm run lint - Run linting

Code Style

• TypeScript strict mode
• Angular Material components
• Custom CSS with CSS variables
• Responsive design principles
• Accessibility considerations

📱 Responsive Design

The application is fully responsive with breakpoints:

• Desktop: Full layout with sidebar
• Tablet: Adjusted spacing and layout
• Mobile: Collapsible sidebar and mobile-optimized forms

🎯 Key Features

Authentication

• Employee ID and password login
• Remember me functionality
• Role-based access control
• Session management

Asset Management

• Complete asset lifecycle tracking
• Status management (Active, Maintenance, Retired)
• Category-based organization
• Search and filtering capabilities

Purchase Orders

• Year/month/category filtering
• Excel export functionality
• Status tracking
• Detailed purchase information

Admin Functions

• User management
• System settings
• Data export capabilities
• Permission management

🚀 Deployment

The application is ready for production deployment with:

• Optimized build process
• Lazy loading for performance
• Responsive design
• Enterprise-grade security

📄 License

This project is proprietary software for PINEPIM Asset Management System.

---

PINEPIM Asset Management System - Enterprise-grade asset management solution