🏪 PMLD UMKM BSI

Platform Manajemen dan Layanan Digital untuk UMKM Bank Syariah Indonesia

📋 Deskripsi

PMLD UMKM BSI adalah platform digital komprehensif yang dirancang khusus untuk mendukung Usaha Mikro, Kecil, dan Menengah (UMKM) dalam bermitra dengan Bank Syariah Indonesia. Platform ini menyediakan solusi manajemen bisnis yang terintegrasi dengan layanan perbankan syariah.

🎯 Tujuan Utama

Digitalisasi UMKM: Membantu UMKM bertransformasi digital
Integrasi Perbankan: Koneksi langsung dengan layanan BSI
Manajemen Bisnis: Tools lengkap untuk operasional harian
Analitik & Pelaporan: Insights untuk pengembangan bisnis

✨ Fitur Utama

🏠 Landing Page

Hero Section dengan statistik real-time
Layanan Unggulan dengan animasi interaktif
Testimonial pelanggan dengan slider otomatis
Form Registrasi dan login terintegrasi
Responsive Design untuk semua perangkat

📊 Dashboard Bisnis

Analytics Real-time dengan Chart.js
Manajemen Pesanan dan inventory
Tracking Pelanggan dan engagement
Laporan Keuangan terintegrasi BSI
Notifikasi dan alert system

🎨 Sistem Desain

CSS Custom Properties untuk theming
Modular Architecture dengan komponen reusable
Animation Library dengan intersection observers
Accessibility Features (WCAG 2.1 compliant)

🚀 Quick Start

Prerequisites

Node.js >= 14.0.0
npm >= 6.0.0
Modern Browser (Chrome, Firefox, Safari, Edge)

Installation

# Clone repository
git clone https://github.com/pmld-bsi/umkm-platform.git
cd umkm-platform

# Install dependencies
npm install

# Start development server
npm start

Alternative Setup (Tanpa Node.js)

# Menggunakan Python (jika tersedia)
python -m http.server 3000

# Atau buka langsung index.html di browser

📁 Struktur Project

PMLD_UMKM_BSI/
│
├── 📄 index.html              # Landing page utama
├── 📄 package.json            # Konfigurasi project & dependencies
├── 📄 README.md              # Dokumentasi project
│
├── 📁 assets/
│   ├── 📁 css/
│   │   ├── 🎨 styles.css         # Main stylesheet
│   │   ├── ✨ animations.css     # Animation effects
│   │   └── 📊 dashboard.css      # Dashboard-specific styles
│   │
│   ├── 📁 js/
│   │   ├── ⚡ main.js            # Core functionality
│   │   ├── 🎭 animations.js      # Animation controllers
│   │   └── 📈 dashboard.js       # Dashboard logic
│   │
│   └── 📁 images/            # Assets & media files
│       ├── 🖼️ hero-bg.jpg
│       ├── 👤 team/
│       └── 🏢 testimonials/
│
└── 📁 pages/
    └── 📊 dashboard.html      # Business dashboard

🛠️ Teknologi Stack

Frontend Core

Technology	Version	Purpose
HTML5	Latest	Semantic markup & structure
CSS3	Latest	Styling, animations, responsive design
JavaScript ES6+	Latest	Interactive functionality

Libraries & Frameworks

Library	Version	Usage
Chart.js	^4.4.0	Data visualization & charts
Font Awesome	^6.4.0	Icons & visual elements
Inter Font	Latest	Typography system

Development Tools

Tool	Purpose
ESLint	Code quality & linting
Prettier	Code formatting
Clean CSS	CSS minification
Terser	JavaScript minification
Live Server	Development server

🎨 Design System

Color Palette

:root {
  /* Primary Colors */
  --primary-color: #00A651;        /* BSI Green */
  --primary-dark: #008A44;
  --primary-light: rgba(0, 166, 81, 0.1);
  
  /* Neutral Colors */
  --text-primary: #1a1a1a;
  --text-secondary: #666666;
  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  
  /* Status Colors */
  --success-color: #10B981;
  --warning-color: #F59E0B;
  --error-color: #EF4444;
  --info-color: #3B82F6;
}

Typography

Font Family: Inter (Google Fonts)
Font Weights: 300, 400, 500, 600, 700, 800
Scale: Modular scale untuk consistency

Spacing System

:root {
  --spacing-xs: 0.5rem;    /* 8px */
  --spacing-sm: 0.75rem;   /* 12px */
  --spacing-md: 1rem;      /* 16px */
  --spacing-lg: 1.5rem;    /* 24px */
  --spacing-xl: 2rem;      /* 32px */
  --spacing-2xl: 3rem;     /* 48px */
  --spacing-3xl: 4rem;     /* 64px */
}

📊 Dashboard Features

Analytics Overview

Revenue Tracking dengan trend analysis
Order Management dan status monitoring
Customer Analytics dan segmentation
Conversion Rate dan performance metrics

Interactive Charts

Line Charts untuk revenue trends
Doughnut Charts untuk traffic sources
Bar Charts untuk comparative data
Mini Charts dalam stat cards

Real-time Updates

Live Statistics yang update otomatis
Activity Feed dengan notifikasi real-time
Data Refresh setiap 30 detik
WebSocket Support untuk future updates

🎯 Responsive Breakpoints

Breakpoint	Screen Size	Layout Changes
Mobile	< 768px	Single column, stacked components
Tablet	768px - 1024px	Collapsed sidebar, adjusted grid
Desktop	1024px - 1440px	Full sidebar, optimal layout
Wide	> 1440px	Expanded grid, more content

Key Responsive Features

Collapsible Sidebar pada mobile/tablet
Flexible Grid System dengan CSS Grid & Flexbox
Scalable Typography dengan clamp() functions
Touch-friendly controls untuk mobile devices

🔧 Development Scripts

# Development
npm start              # Start dev server
npm run dev           # Start with live reload

# Building & Optimization  
npm run build         # Build production version
npm run minify        # Minify CSS & JS files
npm run optimize-images # Optimize image assets

# Code Quality
npm run lint          # Run ESLint
npm run format        # Format with Prettier
npm run validate-html # Validate HTML structure

# Testing
npm test              # Run all tests

🚀 Deployment

GitHub Pages

# Build production files
npm run build

# Push to gh-pages branch
git checkout gh-pages
git add .
git commit -m "Deploy updates"
git push origin gh-pages

Custom Server

# Build optimized version
npm run build

# Upload files to server
# - index.html
# - assets/ (minified)
# - pages/

CDN Optimization

Images: Compressed & optimized
CSS/JS: Minified & gzipped
Fonts: Subset untuk performance optimal

🎭 Animation System

CSS Animations

Keyframe Animations untuk micro-interactions
Transform Transitions yang smooth
Hover Effects pada interactive elements
Loading States dengan skeleton screens

JavaScript Animations

Intersection Observer untuk scroll-triggered animations
Chart Animations dengan Chart.js
Counter Animations untuk statistics
Particle Effects untuk visual enhancement

Performance Optimizations

GPU Acceleration dengan transform3d
Animation Timing yang konsisten
Reduced Motion support untuk accessibility

♿ Accessibility Features

WCAG 2.1 Compliance

Semantic HTML dengan proper landmarks
Keyboard Navigation untuk semua interactive elements
Screen Reader Support dengan ARIA labels
Color Contrast yang memenuhi standar AA

Inclusive Design

Focus Indicators yang jelas
Alternative Text untuk semua images
Form Labels yang descriptive
Error Messages yang informatif

🔒 Security Considerations

Frontend Security

Input Validation pada semua forms
XSS Prevention dengan proper encoding
HTTPS Enforcement untuk production
Content Security Policy headers

Data Protection

No Sensitive Data tersimpan di client-side
API Token Management dengan proper handling
User Session management yang aman

🤝 Contributing

Kami sangat menghargai kontribusi dari community! Berikut panduan untuk berkontribusi:

Development Workflow

Fork repository ini
Create feature branch: git checkout -b feature/amazing-feature
Commit changes: git commit -m 'Add amazing feature'
Push to branch: git push origin feature/amazing-feature
Open Pull Request

Coding Standards

Ikuti ESLint configuration yang ada
Gunakan Prettier untuk formatting
Tulis comments yang meaningful
Test fitur sebelum submit PR

Issue Reporting

Gunakan issue templates yang tersedia
Berikan steps to reproduce yang jelas
Include browser/device information
Attach screenshots jika diperlukan

📈 Roadmap

Phase 1: Foundation ✅

Landing page dengan responsive design
Dashboard dasar dengan charts
Authentication system mockup
Animation & interaction system

Phase 2: Integration 🚧

BSI API Integration untuk real banking data
User Authentication dengan BSI accounts
Real-time Notifications system
Advanced Analytics dengan machine learning

Phase 3: Advanced Features 📋

Mobile App (React Native/Flutter)
Offline Capability dengan Service Workers
Multi-language Support (ID/EN/AR)
Advanced Reporting dengan export options

Phase 4: Scale & Performance 🎯

Microservices Architecture
CDN Integration untuk global performance
Advanced Caching strategies
Load Balancing untuk high availability

📞 Support & Contact

Development Team

Email: dev-team@pmld-bsi.com
Slack: #pmld-dev-support
GitHub: @pmld-bsi

Business Inquiries

Email: business@pmld-bsi.com
Phone: +62 21 xxxx xxxx
Address: Jakarta, Indonesia

Community

Discord: PMLD Community
Telegram: @pmld_bsi_community
LinkedIn: PMLD BSI

📄 License

Proyek ini dilisensikan di bawah MIT License - lihat file LICENSE untuk detail lengkap.

MIT License

Copyright (c) 2024 PMLD BSI Team

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction...

🙏 Acknowledgments

Special Thanks

Bank Syariah Indonesia untuk partnership & support
UMKM Community untuk feedback & insights
Open Source Contributors untuk tools & libraries yang digunakan

Inspiration & References

Material Design system untuk UI consistency
Ant Design untuk component patterns
Tailwind CSS untuk utility-first approach
Chart.js Community untuk visualization best practices

🚀 Ready to Transform Your UMKM Business?

🌟 Get Started | 📊 View Demo | 📖 Documentation | 💬 Contact Us

Made with ❤️ by PMLD BSI Team

Name		Name	Last commit message	Last commit date
Latest commit History 81 Commits
.github		.github
.playwright-mcp		.playwright-mcp
PMLD_UMKM_BSI (4)		PMLD_UMKM_BSI (4)
admin		admin
backend		backend
docs		docs
frontend		frontend
public		public
scripts		scripts
tests		tests
.gitignore		.gitignore
.vercelignore		.vercelignore
CHANGELOG.md		CHANGELOG.md
CHECKLIST.md		CHECKLIST.md
DEPLOYMENT_ANALYSIS_REPORT.md		DEPLOYMENT_ANALYSIS_REPORT.md
FIGMA_IMPLEMENTATION_COMPLETE.md		FIGMA_IMPLEMENTATION_COMPLETE.md
FINAL_IMPLEMENTATION_REPORT.md		FINAL_IMPLEMENTATION_REPORT.md
FRONTEND_COMPARISON_ANALYSIS.md		FRONTEND_COMPARISON_ANALYSIS.md
GIT_BRANCHING_STRATEGY.md		GIT_BRANCHING_STRATEGY.md
IMPLEMENTATION_STATUS.md		IMPLEMENTATION_STATUS.md
IMPLEMENTATION_SUMMARY.md		IMPLEMENTATION_SUMMARY.md
PANDUAN_KOLABORASI.md		PANDUAN_KOLABORASI.md
QUICKSTART.md		QUICKSTART.md
README.md		README.md
RELEASE_NOTES.md		RELEASE_NOTES.md
SUMMARY.md		SUMMARY.md
admin-files-inventory.txt		admin-files-inventory.txt
logo al trans fix.pdf		logo al trans fix.pdf
package.json		package.json
playwright.config.js		playwright.config.js
vercel.json		vercel.json

Folders and files

Latest commit

History

Repository files navigation

🏪 PMLD UMKM BSI

📋 Deskripsi

🎯 Tujuan Utama

✨ Fitur Utama

🏠 Landing Page

📊 Dashboard Bisnis

🎨 Sistem Desain

🚀 Quick Start

Prerequisites

Installation

Alternative Setup (Tanpa Node.js)

📁 Struktur Project

🛠️ Teknologi Stack

Frontend Core

Libraries & Frameworks

Development Tools

🎨 Design System

Color Palette

Typography

Spacing System

📊 Dashboard Features

Analytics Overview

Interactive Charts

Real-time Updates

🎯 Responsive Breakpoints

Key Responsive Features

🔧 Development Scripts

🚀 Deployment

GitHub Pages

Custom Server

CDN Optimization

🎭 Animation System

CSS Animations

JavaScript Animations

Performance Optimizations

♿ Accessibility Features

WCAG 2.1 Compliance

Inclusive Design

🔒 Security Considerations

Frontend Security

Data Protection

🤝 Contributing

Development Workflow

Coding Standards

Issue Reporting

📈 Roadmap

Phase 1: Foundation ✅

Phase 2: Integration 🚧

Phase 3: Advanced Features 📋

Phase 4: Scale & Performance 🎯

📞 Support & Contact

Development Team

Business Inquiries

Community

📄 License

🙏 Acknowledgments

Special Thanks

Inspiration & References

🚀 Ready to Transform Your UMKM Business?

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages