# 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:**
   ```bash
   git clone <repository-url>
   cd pine-asset-webapp
   ```

2. **Install dependencies:**
   ```bash
   npm install
   ```

3. **Start the development server:**
   ```bash
   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