# muhammadsyaiful2601/peminjaman architecture

> Architecture diagram of the GitHub repository muhammadsyaiful2601/peminjaman, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-27). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/muhammadsyaiful2601/peminjaman
- Repository: https://github.com/muhammadsyaiful2601/peminjaman

## Overview

Sistem peminjaman barang untuk petugas kampus: petugas mengelola inventaris dan data peminjam, membuat transaksi multi-barang, lalu memproses pengembalian atau menghasilkan dokumen/laporan. React menyediakan antarmuka untuk website maupun desktop; Laravel API menerapkan aturan transaksi dan mengirim bukti email. Desktop juga dapat mencerminkan data SQLite ke MySQL hosting. Beberapa subsystem besar—termasuk endpoint dan integrasi yang tidak tercakup dalam cuplikan—ditampilkan berdasarkan README dan struktur file; wiring yang tidak dapat dipastikan tidak diperinci.

Main entry points: [`backend/routes/api.php`](https://github.com/muhammadsyaiful2601/peminjaman/blob/Syaiful/backend/routes/api.php) (Rute REST API), [`frontend/src/App.jsx`](https://github.com/muhammadsyaiful2601/peminjaman/blob/Syaiful/frontend/src/App.jsx) (Aplikasi React), [`frontend/src/api/axios.js`](https://github.com/muhammadsyaiful2601/peminjaman/blob/Syaiful/frontend/src/api/axios.js) (Klien API), [`backend/app/Models/Loan.php`](https://github.com/muhammadsyaiful2601/peminjaman/blob/Syaiful/backend/app/Models/Loan.php) (Model Domain)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Antarmuka Petugas"]
  node_app["Aplikasi React<br/>[App.jsx]"]
  node_inventory_ui["Inventaris<br/>[Items.jsx]"]
  node_loan_ui["Peminjaman<br/>[NewLoan.jsx]"]
  node_return_ui["Pengembalian dan Scan<br/>[ScanQR.jsx]"]
  node_report_ui["Laporan Resmi<br/>[Reports.jsx]"]
  node_admin_ui["Data dan Pengaturan<br/>[SystemSettings.jsx]"]
  node_api_client["Klien API<br/>[axios.js]"]
end

subgraph group_operations["Operasi Peminjaman"]
  node_loan_api["API Transaksi<br/>[LoanController.php]"]
  node_clearance_api["Surat Clearance"]
  node_student_api["Data Mahasiswa"]
  node_technician_api["Data Teknisi"]
end

subgraph group_backend["API dan Dokumen"]
  node_api_routes["Rute REST API<br/>[api.php]"]
  node_item_api["API Inventaris<br/>[ItemController.php]"]
  node_models["Model Domain<br/>[Loan.php]"]
  node_primary_db[("Database Aplikasi<br/>[database.php]")]
  node_pdf_views["Template PDF<br/>[loan-qr.blade.php]"]
  node_mail["Email Bukti<br/>[LoanQrCode.php]"]
end

subgraph group_sync["Mode Hybrid"]
  node_hybrid_ui["Pengaturan Hybrid<br/>[HybridSettings.jsx]"]
  node_hybrid_api["API Hybrid"]
  node_sync_service["Sinkronisasi Dua Arah"]
  node_remote_db[("MySQL Hosting")]
  node_desktop["Aplikasi Desktop<br/>[main.js]"]
  node_desktop_router["Router Desktop<br/>[desktop-router.php]"]
end

node_staff(("Petugas"))
node_recipient(("Peminjam"))
node_mail_service["Layanan Email"]

node_staff -->|"menggunakan"| node_app
node_app -->|"menampilkan"| node_inventory_ui
node_app -->|"menampilkan"| node_loan_ui
node_app -->|"menampilkan"| node_return_ui
node_app -->|"menampilkan"| node_report_ui
node_app -->|"menampilkan"| node_admin_ui
node_inventory_ui -->|"meminta data"| node_api_client
node_loan_ui -->|"mengirim transaksi"| node_api_client
node_return_ui -->|"memproses retur"| node_api_client
node_report_ui -->|"meminta laporan"| node_api_client
node_admin_ui -->|"mengelola data"| node_api_client
node_api_client -->|"mengirim permintaan"| node_api_routes
node_api_routes -->|"meneruskan inventaris"| node_item_api
node_api_routes -->|"meneruskan transaksi"| node_loan_api
node_api_routes -->|"meneruskan clearance"| node_clearance_api
node_api_routes -->|"meneruskan mahasiswa"| node_student_api
node_api_routes -->|"meneruskan teknisi"| node_technician_api
node_item_api -->|"membaca dan mengubah"| node_models
node_loan_api -->|"membaca dan mengubah"| node_models
node_clearance_api -->|"membaca"| node_models
node_student_api -->|"mengelola mahasiswa"| node_models
node_technician_api -->|"mengelola teknisi"| node_models
node_models -->|"membaca dan menulis"| node_primary_db
node_loan_api -->|"merender PDF"| node_pdf_views
node_loan_api -->|"mengirim bukti"| node_mail
node_mail -->|"menyertakan PDF"| node_pdf_views
node_mail -->|"mengirim email"| node_mail_service
node_mail_service -->|"mengantarkan bukti"| node_recipient
node_clearance_api -->|"menghasilkan surat"| node_pdf_views
node_hybrid_ui -->|"mengirim pengaturan"| node_api_client
node_api_routes -->|"meneruskan hybrid"| node_hybrid_api
node_hybrid_api -->|"meminta sinkronisasi"| node_sync_service
node_sync_service -->|"membaca dan menulis"| node_primary_db
node_sync_service -.->|"membaca dan menulis"| node_remote_db
node_desktop -->|"menjalankan aplikasi"| node_desktop_router
node_desktop_router -->|"meneruskan API"| node_api_routes
node_desktop_router -->|"menyajikan SPA"| node_app

click node_app "https://github.com/muhammadsyaiful2601/peminjaman/blob/Syaiful/frontend/src/App.jsx"
click node_inventory_ui "https://github.com/muhammadsyaiful2601/peminjaman/blob/Syaiful/frontend/src/pages/Items.jsx"
click node_loan_ui "https://github.com/muhammadsyaiful2601/peminjaman/blob/Syaiful/frontend/src/pages/NewLoan.jsx"
click node_return_ui "https://github.com/muhammadsyaiful2601/peminjaman/blob/Syaiful/frontend/src/pages/ScanQR.jsx"
click node_report_ui "https://github.com/muhammadsyaiful2601/peminjaman/blob/Syaiful/frontend/src/pages/Reports.jsx"
click node_admin_ui "https://github.com/muhammadsyaiful2601/peminjaman/blob/Syaiful/frontend/src/pages/SystemSettings.jsx"
click node_api_client "https://github.com/muhammadsyaiful2601/peminjaman/blob/Syaiful/frontend/src/api/axios.js"
click node_api_routes "https://github.com/muhammadsyaiful2601/peminjaman/blob/Syaiful/backend/routes/api.php"
click node_item_api "https://github.com/muhammadsyaiful2601/peminjaman/blob/Syaiful/backend/app/Http/Controllers/Api/ItemController.php"
click node_loan_api "https://github.com/muhammadsyaiful2601/peminjaman/blob/Syaiful/backend/app/Http/Controllers/Api/LoanController.php"
click node_clearance_api "https://github.com/muhammadsyaiful2601/peminjaman/blob/Syaiful/backend/app/Http/Controllers/Api/ClearanceController.php"
click node_student_api "https://github.com/muhammadsyaiful2601/peminjaman/blob/Syaiful/backend/app/Http/Controllers/Api/StudentController.php"
click node_technician_api "https://github.com/muhammadsyaiful2601/peminjaman/blob/Syaiful/backend/app/Http/Controllers/Api/TechnicianController.php"
click node_models "https://github.com/muhammadsyaiful2601/peminjaman/blob/Syaiful/backend/app/Models/Loan.php"
click node_primary_db "https://github.com/muhammadsyaiful2601/peminjaman/blob/Syaiful/backend/config/database.php"
click node_pdf_views "https://github.com/muhammadsyaiful2601/peminjaman/blob/Syaiful/backend/resources/views/pdf/loan-qr.blade.php"
click node_mail "https://github.com/muhammadsyaiful2601/peminjaman/blob/Syaiful/backend/app/Mail/LoanQrCode.php"
click node_hybrid_ui "https://github.com/muhammadsyaiful2601/peminjaman/blob/Syaiful/frontend/src/components/HybridSettings.jsx"
click node_hybrid_api "https://github.com/muhammadsyaiful2601/peminjaman/blob/Syaiful/backend/app/Http/Controllers/Api/HybridController.php"
click node_sync_service "https://github.com/muhammadsyaiful2601/peminjaman/blob/Syaiful/backend/app/Services/HybridSyncService.php"
click node_desktop "https://github.com/muhammadsyaiful2601/peminjaman/blob/Syaiful/desktop/main.js"
click node_desktop_router "https://github.com/muhammadsyaiful2601/peminjaman/blob/Syaiful/backend/desktop-router.php"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_inventory_ui,node_loan_ui,node_return_ui,node_report_ui,node_admin_ui,node_api_client toneBlue
class node_loan_api,node_clearance_api,node_student_api,node_technician_api toneAmber
class node_api_routes,node_item_api,node_models,node_primary_db,node_pdf_views,node_mail toneMint
class node_hybrid_ui,node_hybrid_api,node_sync_service,node_remote_db,node_desktop,node_desktop_router toneRose
class node_staff,node_recipient,node_mail_service toneIndigo
```

## Components

### Antarmuka Petugas

- [Aplikasi React](https://github.com/muhammadsyaiful2601/peminjaman/blob/Syaiful/frontend/src/App.jsx): `frontend/src/App.jsx`
- [Inventaris](https://github.com/muhammadsyaiful2601/peminjaman/blob/Syaiful/frontend/src/pages/Items.jsx): `frontend/src/pages/Items.jsx`
- [Peminjaman](https://github.com/muhammadsyaiful2601/peminjaman/blob/Syaiful/frontend/src/pages/NewLoan.jsx): `frontend/src/pages/NewLoan.jsx`
- [Pengembalian dan Scan](https://github.com/muhammadsyaiful2601/peminjaman/blob/Syaiful/frontend/src/pages/ScanQR.jsx): `frontend/src/pages/ScanQR.jsx`
- [Laporan Resmi](https://github.com/muhammadsyaiful2601/peminjaman/blob/Syaiful/frontend/src/pages/Reports.jsx): `frontend/src/pages/Reports.jsx`
- [Data dan Pengaturan](https://github.com/muhammadsyaiful2601/peminjaman/blob/Syaiful/frontend/src/pages/SystemSettings.jsx): `frontend/src/pages/SystemSettings.jsx`
- [Klien API](https://github.com/muhammadsyaiful2601/peminjaman/blob/Syaiful/frontend/src/api/axios.js): `frontend/src/api/axios.js`

### Operasi Peminjaman

- [API Transaksi](https://github.com/muhammadsyaiful2601/peminjaman/blob/Syaiful/backend/app/Http/Controllers/Api/LoanController.php): `backend/app/Http/Controllers/Api/LoanController.php`
- [Surat Clearance](https://github.com/muhammadsyaiful2601/peminjaman/blob/Syaiful/backend/app/Http/Controllers/Api/ClearanceController.php): `backend/app/Http/Controllers/Api/ClearanceController.php`
- [Data Mahasiswa](https://github.com/muhammadsyaiful2601/peminjaman/blob/Syaiful/backend/app/Http/Controllers/Api/StudentController.php): `backend/app/Http/Controllers/Api/StudentController.php`
- [Data Teknisi](https://github.com/muhammadsyaiful2601/peminjaman/blob/Syaiful/backend/app/Http/Controllers/Api/TechnicianController.php): `backend/app/Http/Controllers/Api/TechnicianController.php`

### API dan Dokumen

- [Rute REST API](https://github.com/muhammadsyaiful2601/peminjaman/blob/Syaiful/backend/routes/api.php): `backend/routes/api.php`
- [API Inventaris](https://github.com/muhammadsyaiful2601/peminjaman/blob/Syaiful/backend/app/Http/Controllers/Api/ItemController.php): `backend/app/Http/Controllers/Api/ItemController.php`
- [Model Domain](https://github.com/muhammadsyaiful2601/peminjaman/blob/Syaiful/backend/app/Models/Loan.php): `backend/app/Models/Loan.php`
- [Database Aplikasi](https://github.com/muhammadsyaiful2601/peminjaman/blob/Syaiful/backend/config/database.php): `backend/config/database.php`
- [Template PDF](https://github.com/muhammadsyaiful2601/peminjaman/blob/Syaiful/backend/resources/views/pdf/loan-qr.blade.php): `backend/resources/views/pdf/loan-qr.blade.php`
- [Email Bukti](https://github.com/muhammadsyaiful2601/peminjaman/blob/Syaiful/backend/app/Mail/LoanQrCode.php): `backend/app/Mail/LoanQrCode.php`

### Mode Hybrid

- [Pengaturan Hybrid](https://github.com/muhammadsyaiful2601/peminjaman/blob/Syaiful/frontend/src/components/HybridSettings.jsx): `frontend/src/components/HybridSettings.jsx`
- [API Hybrid](https://github.com/muhammadsyaiful2601/peminjaman/blob/Syaiful/backend/app/Http/Controllers/Api/HybridController.php): `backend/app/Http/Controllers/Api/HybridController.php`
- [Sinkronisasi Dua Arah](https://github.com/muhammadsyaiful2601/peminjaman/blob/Syaiful/backend/app/Services/HybridSyncService.php): `backend/app/Services/HybridSyncService.php`
- **MySQL Hosting**
- [Aplikasi Desktop](https://github.com/muhammadsyaiful2601/peminjaman/blob/Syaiful/desktop/main.js): `desktop/main.js`
- [Router Desktop](https://github.com/muhammadsyaiful2601/peminjaman/blob/Syaiful/backend/desktop-router.php): `backend/desktop-router.php`

### Other components

- **Petugas**
- **Peminjam**
- **Layanan Email**

## Connections

- Petugas → Aplikasi React: menggunakan
- Aplikasi React → Inventaris: menampilkan
- Aplikasi React → Peminjaman: menampilkan
- Aplikasi React → Pengembalian dan Scan: menampilkan
- Aplikasi React → Laporan Resmi: menampilkan
- Aplikasi React → Data dan Pengaturan: menampilkan
- Inventaris → Klien API: meminta data
- Peminjaman → Klien API: mengirim transaksi
- Pengembalian dan Scan → Klien API: memproses retur
- Laporan Resmi → Klien API: meminta laporan
- Data dan Pengaturan → Klien API: mengelola data
- Klien API → Rute REST API: mengirim permintaan
- Rute REST API → API Inventaris: meneruskan inventaris
- Rute REST API → API Transaksi: meneruskan transaksi
- Rute REST API → Surat Clearance: meneruskan clearance
- Rute REST API → Data Mahasiswa: meneruskan mahasiswa
- Rute REST API → Data Teknisi: meneruskan teknisi
- API Inventaris → Model Domain: membaca dan mengubah
- API Transaksi → Model Domain: membaca dan mengubah
- Surat Clearance → Model Domain: membaca
- Data Mahasiswa → Model Domain: mengelola mahasiswa
- Data Teknisi → Model Domain: mengelola teknisi
- Model Domain → Database Aplikasi: membaca dan menulis
- API Transaksi → Template PDF: merender PDF
- API Transaksi → Email Bukti: mengirim bukti
- Email Bukti → Template PDF: menyertakan PDF
- Email Bukti → Layanan Email: mengirim email
- Layanan Email → Peminjam: mengantarkan bukti
- Surat Clearance → Template PDF: menghasilkan surat
- Pengaturan Hybrid → Klien API: mengirim pengaturan
- Rute REST API → API Hybrid: meneruskan hybrid
- API Hybrid → Sinkronisasi Dua Arah: meminta sinkronisasi
- Sinkronisasi Dua Arah → Database Aplikasi: membaca dan menulis
- Sinkronisasi Dua Arah → MySQL Hosting: membaca dan menulis
- Aplikasi Desktop → Router Desktop: menjalankan aplikasi
- Router Desktop → Rute REST API: meneruskan API
- Router Desktop → Aplikasi React: menyajikan SPA