teshin/pine-asset-management
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
46f253b1ee
pine-asset-management/README.md
TZ.J f77b6a647c Update project structure and dependencies for PINEPIM Asset Management System 
- Added Angular Material and PrimeNG components for UI enhancements.
- Updated package dependencies including Angular core libraries and added new packages for animations and layout.
- Enhanced README with detailed project features, installation instructions, and technology stack.
- Implemented responsive design for sidebar and navigation.
- Updated styles with CSS variables and Material theme integration.
- Refactored app component for improved structure and functionality.
- Added routing for main application features including dashboard, asset management, and admin settings.
- Introduced analytics configuration in angular.json.
2025-08-07 22:58:27 +07:00

4.7 KiB
Raw Blame History

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