TZ.J
f77b6a647c
- 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.
171 lines
4.7 KiB
Markdown
171 lines
4.7 KiB
Markdown
# 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
|