first commit
This commit is contained in:
bagus-arie05
+24
@@ -0,0 +1,24 @@
|
||||
# Nuxt dev/build outputs
|
||||
.output
|
||||
.data
|
||||
.nuxt
|
||||
.nitro
|
||||
.cache
|
||||
dist
|
||||
|
||||
# Node dependencies
|
||||
node_modules
|
||||
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
|
||||
# Misc
|
||||
.DS_Store
|
||||
.fleet
|
||||
.idea
|
||||
|
||||
# Local env files
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
@@ -0,0 +1,75 @@
|
||||
# Nuxt Minimal Starter
|
||||
|
||||
Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
|
||||
|
||||
## Setup
|
||||
|
||||
Make sure to install dependencies:
|
||||
|
||||
```bash
|
||||
# npm
|
||||
npm install
|
||||
|
||||
# pnpm
|
||||
pnpm install
|
||||
|
||||
# yarn
|
||||
yarn install
|
||||
|
||||
# bun
|
||||
bun install
|
||||
```
|
||||
|
||||
## Development Server
|
||||
|
||||
Start the development server on `http://localhost:3000`:
|
||||
|
||||
```bash
|
||||
# npm
|
||||
npm run dev
|
||||
|
||||
# pnpm
|
||||
pnpm dev
|
||||
|
||||
# yarn
|
||||
yarn dev
|
||||
|
||||
# bun
|
||||
bun run dev
|
||||
```
|
||||
|
||||
## Production
|
||||
|
||||
Build the application for production:
|
||||
|
||||
```bash
|
||||
# npm
|
||||
npm run build
|
||||
|
||||
# pnpm
|
||||
pnpm build
|
||||
|
||||
# yarn
|
||||
yarn build
|
||||
|
||||
# bun
|
||||
bun run build
|
||||
```
|
||||
|
||||
Locally preview production build:
|
||||
|
||||
```bash
|
||||
# npm
|
||||
npm run preview
|
||||
|
||||
# pnpm
|
||||
pnpm preview
|
||||
|
||||
# yarn
|
||||
yarn preview
|
||||
|
||||
# bun
|
||||
bun run preview
|
||||
```
|
||||
|
||||
Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
|
||||
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<NuxtLayout>
|
||||
<v-app>
|
||||
<NuxtPage />
|
||||
</v-app>
|
||||
</NuxtLayout>
|
||||
</template>
|
||||
@@ -0,0 +1,333 @@
|
||||
/* Global styles for Antrean RSSA */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Inter, -apple-system, Roboto, Helvetica, sans-serif;
|
||||
background-color: #EAEEF3;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.header {
|
||||
width: 100%;
|
||||
height: 43px;
|
||||
background-color: #00A65A;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 16px;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
color: #A7DFC2;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.header-user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
color: #85D3AC;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 210px;
|
||||
height: 100vh;
|
||||
background-color: #fff;
|
||||
position: fixed;
|
||||
top: 43px;
|
||||
left: 0;
|
||||
overflow-y: auto;
|
||||
border-right: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.sidebar-menu {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.sidebar-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 16px;
|
||||
color: #8B8A8D;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
text-decoration: none;
|
||||
gap: 12px;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.sidebar-item:hover {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.sidebar-item.active {
|
||||
background-color: #e8f5e8;
|
||||
color: #00A65A;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
margin-left: 210px;
|
||||
margin-top: 43px;
|
||||
padding: 20px;
|
||||
min-height: calc(100vh - 43px);
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
background-color: #EBEFF4;
|
||||
padding: 12px 20px;
|
||||
margin: -20px -20px 20px -20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.breadcrumb-item {
|
||||
color: #6F6C70;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.breadcrumb-link {
|
||||
color: #9D9FA4;
|
||||
font-size: 10px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.section {
|
||||
background-color: #fff;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
padding: 12px 16px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.section-header.late-visitors {
|
||||
background-color: #F4A221;
|
||||
color: #F6BB63;
|
||||
}
|
||||
|
||||
.section-header.visitors {
|
||||
background-color: #DD4B39;
|
||||
color: #E78982;
|
||||
}
|
||||
|
||||
.section-content {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: #757476;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #A3C9DF;
|
||||
border-radius: 2px;
|
||||
font-size: 12px;
|
||||
color: #C8C8CB;
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
outline: none;
|
||||
border-color: #00A65A;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 8px 16px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: #00C0EF;
|
||||
color: #A8E8F8;
|
||||
border: 1px solid #3ECFF2;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: #00A8CC;
|
||||
}
|
||||
|
||||
.data-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.data-table th {
|
||||
background-color: #f8f9fa;
|
||||
padding: 12px 8px;
|
||||
text-align: left;
|
||||
font-weight: 700;
|
||||
color: #7F7A7F;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.data-table td {
|
||||
padding: 12px 8px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
color: #A1A0A5;
|
||||
}
|
||||
|
||||
.data-table tr:hover {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.status-btn {
|
||||
padding: 4px 8px;
|
||||
border-radius: 2px;
|
||||
font-size: 10px;
|
||||
font-weight: 400;
|
||||
border: 1px solid;
|
||||
display: inline-block;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
.status-btn.tiket {
|
||||
background-color: #00A65A;
|
||||
color: #8CD5AD;
|
||||
border-color: #41AF7C;
|
||||
}
|
||||
|
||||
.status-btn.tiket-pengantar {
|
||||
background-color: #00A65A;
|
||||
color: #8AD5B1;
|
||||
border-color: #47B281;
|
||||
}
|
||||
|
||||
.status-btn.bypass {
|
||||
background-color: #00BDF2;
|
||||
color: #92E2F7;
|
||||
border-color: #40BBC9;
|
||||
}
|
||||
|
||||
.table-controls {
|
||||
display: flex;
|
||||
justify-content: between;
|
||||
align-items: center;
|
||||
padding: 16px;
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.table-controls-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.table-controls-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.select-control {
|
||||
padding: 6px 24px 6px 8px;
|
||||
border: 1px solid #D5D7E0;
|
||||
border-radius: 2px;
|
||||
font-size: 11px;
|
||||
color: #AEAFAF;
|
||||
background-color: #fff;
|
||||
background-image: url('data:image/svg+xml;utf8,<svg fill="%23666" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></svg>');
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 8px center;
|
||||
background-size: 12px;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
padding: 6px 8px;
|
||||
border: 1px solid #E4E7EB;
|
||||
border-radius: 2px;
|
||||
font-size: 12px;
|
||||
color: #A1A1A5;
|
||||
width: 153px;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 16px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.pagination-info {
|
||||
color: #A2A1A6;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.pagination-controls {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.pagination-btn {
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #E0DCD9;
|
||||
border-radius: 2px;
|
||||
font-size: 12px;
|
||||
color: #BDBDBF;
|
||||
background-color: #FFFEFF;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.pagination-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.no-data {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
color: #9B9A9C;
|
||||
font-size: 12px;
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
// @ts-check
|
||||
import withNuxt from './.nuxt/eslint.config.mjs'
|
||||
|
||||
export default withNuxt(
|
||||
// Your custom configs here
|
||||
)
|
||||
@@ -0,0 +1,15 @@
|
||||
// https://nuxt.com/docs/api/configuration/nuxt-config
|
||||
export default defineNuxtConfig({
|
||||
compatibilityDate: '2025-07-15',
|
||||
devtools: { enabled: true },
|
||||
|
||||
modules: [
|
||||
'@nuxt/content',
|
||||
'@nuxt/eslint',
|
||||
'@nuxt/image',
|
||||
'@nuxt/scripts',
|
||||
'@nuxt/test-utils',
|
||||
'@nuxt/ui',
|
||||
'@pinia/nuxt'
|
||||
]
|
||||
})
|
||||
Generated
+17222
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,33 @@
|
||||
{
|
||||
"name": "nuxt-app",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"build": "nuxt build",
|
||||
"dev": "nuxt dev",
|
||||
"generate": "nuxt generate",
|
||||
"preview": "nuxt preview",
|
||||
"postinstall": "nuxt prepare"
|
||||
},
|
||||
"dependencies": {
|
||||
"@mdi/font": "^7.4.47",
|
||||
"@nuxt/content": "^3.6.3",
|
||||
"@nuxt/eslint": "^1.9.0",
|
||||
"@nuxt/image": "^1.11.0",
|
||||
"@nuxt/scripts": "^0.11.13",
|
||||
"@nuxt/test-utils": "^3.19.2",
|
||||
"@nuxt/ui": "^3.3.3",
|
||||
"@pinia/nuxt": "^0.11.2",
|
||||
"@unhead/vue": "^2.0.14",
|
||||
"eslint": "^9.34.0",
|
||||
"nuxt": "^3.19.0",
|
||||
"pinia": "^3.0.3",
|
||||
"typescript": "^5.9.2",
|
||||
"vue": "^3.5.20",
|
||||
"vue-router": "^4.5.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"vite-plugin-vuetify": "^2.1.2",
|
||||
"vuetify": "^3.9.7"
|
||||
}
|
||||
}
|
||||
+805
@@ -0,0 +1,805 @@
|
||||
<template>
|
||||
<div class="main-container">
|
||||
<div class="content-container">
|
||||
<div class="header">
|
||||
<div class="logo-group">
|
||||
<div class="logo-circle bg-green">
|
||||
<svg class="logo-icon text-green" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="logo-circle bg-pink">
|
||||
<span class="logo-text text-pink">RSSA</span>
|
||||
</div>
|
||||
<div class="logo-circle bg-red">
|
||||
<span class="logo-text text-red">QRIS</span>
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="main-title">
|
||||
<span class="text-orange">With Love</span> We Serve
|
||||
</h1>
|
||||
<p class="subtitle">Kami Menyediakan Layanan Medis yang Dapat Anda Percayai</p>
|
||||
<p class="institution-name">RSU Saiful Anwar Malang</p>
|
||||
</div>
|
||||
<div class="status-card-container">
|
||||
<div class="status-card">
|
||||
<div class="status-header">
|
||||
<div class="status-info">
|
||||
<div :class="loketStatusClass" class="status-indicator"></div>
|
||||
<h2 class="status-title">
|
||||
Status Loket: {{ loket.name || 'Mengidentifikasi...' }}
|
||||
</h2>
|
||||
</div>
|
||||
<button @click="refreshLoketInfo" :disabled="loading" class="refresh-button">
|
||||
<svg class="refresh-icon" :class="{ 'animate-spin': loading }" fill="none" viewBox="0 0 24 24">
|
||||
<circle v-if="loading" class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||
<path v-if="loading" class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
<path v-else stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="status-grid">
|
||||
<div class="status-item">
|
||||
<span class="status-label">IP Address:</span>
|
||||
<span class="status-value">{{ loket.ipAddress || 'Detecting...' }}</span>
|
||||
</div>
|
||||
<div class="status-item">
|
||||
<span class="status-label">Status Koneksi:</span>
|
||||
<span :class="connectionStatusClass" class="status-value-color">
|
||||
{{ connectionStatus }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="status-item">
|
||||
<span class="status-label">Backend:</span>
|
||||
<span :class="backendStatusClass" class="status-value-color">
|
||||
{{ backendStatus }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="status-item">
|
||||
<span class="status-label">QRIS Ready:</span>
|
||||
<span :class="qrisStatusClass" class="status-value-color">
|
||||
{{ qrisStatus }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-content-container">
|
||||
<div v-if="!isSystemReady" class="standby-card">
|
||||
<div class="standby-icon-circle">
|
||||
<svg class="standby-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="standby-title">Sistem Standby</h2>
|
||||
<p class="standby-message">Menunggu setup pembayaran dari backend...</p>
|
||||
<div class="standby-status-list">
|
||||
<div class="status-item-list">
|
||||
<div :class="loket.ipAddress ? 'bg-green' : 'bg-gray'" class="status-indicator-sm"></div>
|
||||
<span class="status-text-sm">Identifikasi Loket</span>
|
||||
</div>
|
||||
<div class="status-item-list">
|
||||
<div :class="connectionStatus === 'Terhubung' ? 'bg-green' : 'bg-gray'" class="status-indicator-sm"></div>
|
||||
<span class="status-text-sm">Koneksi Backend</span>
|
||||
</div>
|
||||
<div class="status-item-list">
|
||||
<div :class="qrisStatus === 'Siap' ? 'bg-green' : 'bg-gray'" class="status-indicator-sm"></div>
|
||||
<span class="status-text-sm">Integrasi QRIS</span>
|
||||
</div>
|
||||
</div>
|
||||
<button @click="checkSystemStatus" :disabled="loading" class="check-status-button">
|
||||
<span v-if="loading">Checking...</span>
|
||||
<span v-else>Periksa Status</span>
|
||||
</button>
|
||||
</div>
|
||||
<div v-else class="payment-form-card">
|
||||
<h2 class="payment-form-title">
|
||||
Setup Pembayaran QRIS
|
||||
</h2>
|
||||
<div v-if="error" class="error-message">
|
||||
{{ error }}
|
||||
</div>
|
||||
<form @submit.prevent="submitPayment">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Nama Pasien *</label>
|
||||
<input
|
||||
v-model="form.patientName"
|
||||
type="text"
|
||||
required
|
||||
class="form-input"
|
||||
placeholder="Masukkan nama pasien"
|
||||
>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Nominal Pembayaran *</label>
|
||||
<div class="relative-input">
|
||||
<span class="currency-symbol">Rp</span>
|
||||
<input
|
||||
v-model="form.amount"
|
||||
type="number"
|
||||
required
|
||||
min="1000"
|
||||
step="1000"
|
||||
class="form-input-amount"
|
||||
placeholder="0"
|
||||
>
|
||||
</div>
|
||||
<p class="input-hint">Minimum: Rp 1.000</p>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Keterangan Pembayaran</label>
|
||||
<textarea
|
||||
v-model="form.description"
|
||||
rows="3"
|
||||
class="form-textarea"
|
||||
placeholder="Pembayaran layanan kesehatan, obat, konsultasi, dll..."
|
||||
></textarea>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="loading || !form.patientName || !form.amount || form.amount < 1000"
|
||||
class="submit-button"
|
||||
>
|
||||
<span v-if="loading" class="submit-loading">
|
||||
<svg class="spinner" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
Membuat QR Code...
|
||||
</span>
|
||||
<span v-else class="submit-text">
|
||||
<svg class="submit-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v1m6 11a9 9 0 11-18 0 9 9 0 0118 0zm-9 0a1 1 0 100-2 1 1 0 000 2z"></path>
|
||||
</svg>
|
||||
Buat QR Code Pembayaran
|
||||
</span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-container">
|
||||
<div class="footer-card">
|
||||
<h3 class="footer-title">Hubungi Kami</h3>
|
||||
<div class="footer-grid">
|
||||
<div class="contact-item">
|
||||
<svg class="contact-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
|
||||
</svg>
|
||||
<p class="contact-text">+62 815-5560-6668</p>
|
||||
</div>
|
||||
<div class="contact-item">
|
||||
<svg class="contact-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9v-9m0-9v9m0 9c-5 0-9-4-9-9s4-9 9-9"></path>
|
||||
</svg>
|
||||
<p class="contact-text">rsusaifulanwar.jatimprov.go.id</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// Meta tags
|
||||
useSeoMeta({
|
||||
title: 'QRIS Payment System - RSU Saiful Anwar',
|
||||
description: 'Sistem Pembayaran QRIS RSU Saiful Anwar Malang'
|
||||
})
|
||||
|
||||
// Composables
|
||||
const payment = usePayment()
|
||||
const router = useRouter()
|
||||
|
||||
// Destructure from payment store
|
||||
const {
|
||||
loket,
|
||||
loading,
|
||||
error,
|
||||
isSystemReady,
|
||||
fetchLoketInfo,
|
||||
generatePayment,
|
||||
formatCurrency
|
||||
} = payment
|
||||
|
||||
// Local state
|
||||
const form = ref({
|
||||
patientName: '',
|
||||
amount: '',
|
||||
description: ''
|
||||
})
|
||||
|
||||
// System status check interval
|
||||
let systemStatusCheck: NodeJS.Timeout | null = null
|
||||
|
||||
// Computed properties
|
||||
const loketStatusClass = computed(() => {
|
||||
return loket.value.id ? 'bg-green animate-pulse' : 'bg-gray'
|
||||
})
|
||||
|
||||
const connectionStatus = computed(() => {
|
||||
return loket.value.id ? 'Terhubung' : 'Menghubungkan...'
|
||||
})
|
||||
const connectionStatusClass = computed(() => {
|
||||
return loket.value.id ? 'text-green' : 'text-yellow'
|
||||
})
|
||||
|
||||
const backendStatus = computed(() => {
|
||||
return loket.value.id ? 'Online' : 'Checking...'
|
||||
})
|
||||
const backendStatusClass = computed(() => {
|
||||
return loket.value.id ? 'text-green' : 'text-yellow'
|
||||
})
|
||||
|
||||
const qrisStatus = computed(() => {
|
||||
return loket.value.id ? 'Siap' : 'Standby'
|
||||
})
|
||||
const qrisStatusClass = computed(() => {
|
||||
return loket.value.id ? 'text-green' : 'text-gray'
|
||||
})
|
||||
|
||||
// Methods
|
||||
const initializeSystem = async () => {
|
||||
try {
|
||||
await fetchLoketInfo()
|
||||
} catch (error) {
|
||||
console.error('Failed to initialize system:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const refreshLoketInfo = async () => {
|
||||
try {
|
||||
await fetchLoketInfo()
|
||||
} catch (error) {
|
||||
console.error('Failed to refresh loket info:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const checkSystemStatus = async () => {
|
||||
await refreshLoketInfo()
|
||||
}
|
||||
|
||||
const submitPayment = async () => {
|
||||
if (!form.value.patientName || !form.value.amount || Number(form.value.amount) < 1000) {
|
||||
return
|
||||
}
|
||||
try {
|
||||
const paymentData = {
|
||||
patient_name: form.value.patientName,
|
||||
amount: Number(form.value.amount),
|
||||
description: form.value.description || `Pembayaran layanan kesehatan - ${form.value.patientName}`,
|
||||
loket_id: loket.value.id!,
|
||||
loket_ip: loket.value.ipAddress
|
||||
}
|
||||
await generatePayment(paymentData)
|
||||
|
||||
// Reset form
|
||||
form.value = {
|
||||
patientName: '',
|
||||
amount: '',
|
||||
description: ''
|
||||
}
|
||||
|
||||
// Navigate to QR code page
|
||||
await router.push('/qr-code')
|
||||
} catch (error) {
|
||||
console.error('Payment generation failed:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// Lifecycle
|
||||
onMounted(async () => {
|
||||
await initializeSystem()
|
||||
|
||||
// Auto check system status setiap 30 detik
|
||||
systemStatusCheck = setInterval(() => {
|
||||
checkSystemStatus()
|
||||
}, 30000)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (systemStatusCheck) {
|
||||
clearInterval(systemStatusCheck)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/*
|
||||
=====================================
|
||||
General Styles
|
||||
=====================================
|
||||
*/
|
||||
.main-container {
|
||||
min-height: 100vh;
|
||||
background-color: #fffaf0; /* from-orange-50 */
|
||||
background-image: linear-gradient(to bottom right, #fffaf0, #fff7ed); /* to-orange-100 */
|
||||
}
|
||||
|
||||
.content-container {
|
||||
max-width: 960px; /* equivalent to container mx-auto */
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 32px 16px; /* px-4 py-8 */
|
||||
}
|
||||
|
||||
/*
|
||||
=====================================
|
||||
Header
|
||||
=====================================
|
||||
*/
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 32px; /* mb-8 */
|
||||
}
|
||||
|
||||
.logo-group {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 24px; /* mb-6 */
|
||||
gap: 24px; /* space-x-6 */
|
||||
}
|
||||
|
||||
.logo-circle {
|
||||
width: 64px; /* w-16 */
|
||||
height: 64px; /* h-16 */
|
||||
border-radius: 9999px; /* rounded-full */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.logo-icon {
|
||||
width: 32px; /* w-8 */
|
||||
height: 32px; /* h-8 */
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
font-weight: bold; /* font-bold */
|
||||
font-size: 12px; /* text-xs */
|
||||
}
|
||||
|
||||
.bg-green {
|
||||
background-color: #d1fae5; /* bg-green-100 */
|
||||
}
|
||||
|
||||
.bg-pink {
|
||||
background-color: #fce7f3; /* bg-pink-100 */
|
||||
}
|
||||
|
||||
.bg-red {
|
||||
background-color: #fee2e2; /* bg-red-100 */
|
||||
}
|
||||
|
||||
.text-green {
|
||||
color: #059669; /* text-green-600 */
|
||||
}
|
||||
|
||||
.text-pink {
|
||||
color: #db2777; /* text-pink-600 */
|
||||
}
|
||||
|
||||
.text-red {
|
||||
color: #dc2626; /* text-red-600 */
|
||||
}
|
||||
|
||||
.main-title {
|
||||
font-size: 36px; /* text-4xl */
|
||||
font-weight: bold; /* font-bold */
|
||||
color: #1f2937; /* text-gray-800 */
|
||||
margin-bottom: 8px; /* mb-2 */
|
||||
}
|
||||
|
||||
.text-orange {
|
||||
color: #f97316; /* text-orange-500 */
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 18px; /* text-lg */
|
||||
color: #4b5563; /* text-gray-600 */
|
||||
margin-bottom: 16px; /* mb-4 */
|
||||
}
|
||||
|
||||
.institution-name {
|
||||
font-size: 14px; /* text-sm */
|
||||
color: #6b7280; /* text-gray-500 */
|
||||
}
|
||||
|
||||
/*
|
||||
=====================================
|
||||
Status Card
|
||||
=====================================
|
||||
*/
|
||||
.status-card-container {
|
||||
max-width: 768px; /* max-w-2xl */
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 32px; /* mb-8 */
|
||||
}
|
||||
|
||||
.status-card {
|
||||
background-color: #ffffff; /* bg-white */
|
||||
border-radius: 8px; /* rounded-lg */
|
||||
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); /* shadow-lg */
|
||||
padding: 24px; /* p-6 */
|
||||
}
|
||||
|
||||
.status-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16px; /* mb-4 */
|
||||
}
|
||||
|
||||
.status-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px; /* space-x-3 */
|
||||
}
|
||||
|
||||
.status-indicator {
|
||||
width: 16px; /* w-4 */
|
||||
height: 16px; /* h-4 */
|
||||
border-radius: 9999px; /* rounded-full */
|
||||
}
|
||||
|
||||
.bg-green {
|
||||
background-color: #22c55e;
|
||||
}
|
||||
|
||||
.bg-gray {
|
||||
background-color: #9ca3af;
|
||||
}
|
||||
|
||||
.animate-pulse {
|
||||
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: .5; }
|
||||
}
|
||||
|
||||
.status-title {
|
||||
font-size: 20px; /* text-xl */
|
||||
font-weight: 600; /* font-semibold */
|
||||
color: #1f2937; /* text-gray-800 */
|
||||
}
|
||||
|
||||
.refresh-button {
|
||||
color: #2563eb; /* text-blue-600 */
|
||||
}
|
||||
|
||||
.refresh-button:hover {
|
||||
color: #1e40af; /* hover:text-blue-800 */
|
||||
}
|
||||
|
||||
.refresh-icon {
|
||||
width: 20px; /* w-5 */
|
||||
height: 20px; /* h-5 */
|
||||
}
|
||||
|
||||
.animate-spin {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.status-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 16px; /* gap-4 */
|
||||
font-size: 14px; /* text-sm */
|
||||
}
|
||||
|
||||
.status-label {
|
||||
color: #4b5563; /* text-gray-600 */
|
||||
}
|
||||
|
||||
.status-value {
|
||||
font-family: monospace; /* font-mono */
|
||||
margin-left: 8px; /* ml-2 */
|
||||
}
|
||||
|
||||
.status-value-color {
|
||||
margin-left: 8px; /* ml-2 */
|
||||
font-weight: 500; /* font-medium */
|
||||
}
|
||||
|
||||
.text-green {
|
||||
color: #22c55e; /* text-green-600 */
|
||||
}
|
||||
|
||||
.text-yellow {
|
||||
color: #ca8a04; /* text-yellow-600 */
|
||||
}
|
||||
|
||||
.text-gray {
|
||||
color: #6b7280; /* text-gray-500 */
|
||||
}
|
||||
|
||||
/*
|
||||
=====================================
|
||||
Standby & Payment Form
|
||||
=====================================
|
||||
*/
|
||||
.main-content-container {
|
||||
max-width: 512px; /* max-w-md */
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.standby-card, .payment-form-card {
|
||||
background-color: #ffffff; /* bg-white */
|
||||
border-radius: 8px; /* rounded-lg */
|
||||
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); /* shadow-lg */
|
||||
padding: 32px; /* p-8 */
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.standby-icon-circle {
|
||||
width: 80px; /* w-20 */
|
||||
height: 80px; /* h-20 */
|
||||
background-color: #ffedd5; /* bg-orange-100 */
|
||||
border-radius: 9999px; /* rounded-full */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 24px; /* mb-6 */
|
||||
}
|
||||
|
||||
.standby-icon {
|
||||
width: 40px; /* w-10 */
|
||||
height: 40px; /* h-10 */
|
||||
color: #ea580c; /* text-orange-600 */
|
||||
}
|
||||
|
||||
.standby-title {
|
||||
font-size: 24px; /* text-2xl */
|
||||
font-weight: bold; /* font-bold */
|
||||
color: #1f2937; /* text-gray-800 */
|
||||
margin-bottom: 16px; /* mb-4 */
|
||||
}
|
||||
|
||||
.standby-message {
|
||||
color: #4b5563; /* text-gray-600 */
|
||||
margin-bottom: 24px; /* mb-6 */
|
||||
}
|
||||
|
||||
.standby-status-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px; /* space-y-3 */
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.status-item-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px; /* space-x-3 */
|
||||
}
|
||||
|
||||
.status-indicator-sm {
|
||||
width: 12px; /* w-3 */
|
||||
height: 12px; /* h-3 */
|
||||
border-radius: 9999px; /* rounded-full */
|
||||
}
|
||||
|
||||
.status-text-sm {
|
||||
font-size: 14px; /* text-sm */
|
||||
}
|
||||
|
||||
.check-status-button {
|
||||
margin-top: 24px; /* mt-6 */
|
||||
background-color: #ea580c; /* bg-orange-600 */
|
||||
color: white;
|
||||
font-weight: 500; /* font-medium */
|
||||
padding: 8px 24px; /* py-2 px-6 */
|
||||
border-radius: 8px; /* rounded-lg */
|
||||
transition-property: background-color;
|
||||
transition-duration: 200ms;
|
||||
}
|
||||
|
||||
.check-status-button:hover {
|
||||
background-color: #c2410c; /* hover:bg-orange-700 */
|
||||
}
|
||||
|
||||
.check-status-button:disabled {
|
||||
background-color: #9ca3af; /* disabled:bg-gray-400 */
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.payment-form-card {
|
||||
padding: 24px; /* p-6 */
|
||||
}
|
||||
|
||||
.payment-form-title {
|
||||
font-size: 20px; /* text-xl */
|
||||
font-weight: 600; /* font-semibold */
|
||||
color: #1f2937; /* text-gray-800 */
|
||||
margin-bottom: 24px; /* mb-6 */
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
margin-bottom: 16px; /* mb-4 */
|
||||
padding: 12px; /* p-3 */
|
||||
background-color: #fef2f2; /* bg-red-100 */
|
||||
border: 1px solid #fca5a5; /* border-red-400 */
|
||||
color: #b91c1c; /* text-red-700 */
|
||||
border-radius: 4px; /* rounded */
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 16px; /* mb-4 */
|
||||
}
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
color: #374151; /* text-gray-700 */
|
||||
font-size: 14px; /* text-sm */
|
||||
font-weight: 500; /* font-medium */
|
||||
margin-bottom: 8px; /* mb-2 */
|
||||
}
|
||||
|
||||
.form-input {
|
||||
width: 100%;
|
||||
padding: 8px 12px; /* px-3 py-2 */
|
||||
border: 1px solid #d1d5db; /* border-gray-300 */
|
||||
border-radius: 8px; /* rounded-lg */
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px #f97316; /* focus:ring-2 focus:ring-orange-500 */
|
||||
}
|
||||
|
||||
.relative-input {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.currency-symbol {
|
||||
position: absolute;
|
||||
left: 12px; /* left-3 */
|
||||
top: 8px; /* top-2 */
|
||||
color: #6b7280; /* text-gray-500 */
|
||||
}
|
||||
|
||||
.form-input-amount {
|
||||
width: 100%;
|
||||
padding: 8px 12px 8px 40px; /* pl-10 pr-3 py-2 */
|
||||
border: 1px solid #d1d5db; /* border-gray-300 */
|
||||
border-radius: 8px; /* rounded-lg */
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.form-input-amount:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px #f97316; /* focus:ring-2 focus:ring-orange-500 */
|
||||
}
|
||||
|
||||
.input-hint {
|
||||
font-size: 12px; /* text-xs */
|
||||
color: #6b7280; /* text-gray-500 */
|
||||
margin-top: 4px; /* mt-1 */
|
||||
}
|
||||
|
||||
.form-textarea {
|
||||
width: 100%;
|
||||
padding: 8px 12px; /* px-3 py-2 */
|
||||
border: 1px solid #d1d5db; /* border-gray-300 */
|
||||
border-radius: 8px; /* rounded-lg */
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.form-textarea:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px #f97316; /* focus:ring-2 focus:ring-orange-500 */
|
||||
}
|
||||
|
||||
.submit-button {
|
||||
width: 100%;
|
||||
background-color: #ea580c; /* bg-orange-600 */
|
||||
color: white;
|
||||
font-weight: 500; /* font-medium */
|
||||
padding: 12px 16px; /* py-3 px-4 */
|
||||
border-radius: 8px; /* rounded-lg */
|
||||
transition-property: background-color;
|
||||
transition-duration: 200ms;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.submit-button:hover {
|
||||
background-color: #c2410c; /* hover:bg-orange-700 */
|
||||
}
|
||||
|
||||
.submit-button:disabled {
|
||||
background-color: #9ca3af; /* disabled:bg-gray-400 */
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.submit-loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
animation: spin 1s linear infinite;
|
||||
width: 20px; /* w-5 */
|
||||
height: 20px; /* h-5 */
|
||||
margin-right: 12px; /* mr-3 */
|
||||
margin-left: -4px; /* -ml-1 */
|
||||
}
|
||||
|
||||
.submit-text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.submit-icon {
|
||||
width: 20px; /* w-5 */
|
||||
height: 20px; /* h-5 */
|
||||
margin-right: 8px; /* mr-2 */
|
||||
}
|
||||
|
||||
/*
|
||||
=====================================
|
||||
Footer
|
||||
=====================================
|
||||
*/
|
||||
.footer-container {
|
||||
max-width: 768px; /* max-w-2xl */
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: 32px; /* mt-8 */
|
||||
}
|
||||
|
||||
.footer-card {
|
||||
background-color: #ffffff; /* bg-white */
|
||||
border-radius: 8px; /* rounded-lg */
|
||||
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); /* shadow */
|
||||
padding: 16px; /* p-4 */
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer-title {
|
||||
font-weight: bold; /* font-bold */
|
||||
color: #1f2937; /* text-gray-800 */
|
||||
margin-bottom: 8px; /* mb-2 */
|
||||
}
|
||||
|
||||
.footer-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 16px; /* gap-4 */
|
||||
font-size: 14px; /* text-sm */
|
||||
}
|
||||
|
||||
.contact-item {
|
||||
background-color: #fff7ed; /* bg-orange-100 */
|
||||
border-radius: 8px; /* rounded-lg */
|
||||
padding: 12px; /* p-3 */
|
||||
}
|
||||
|
||||
.contact-icon {
|
||||
width: 20px; /* w-5 */
|
||||
height: 20px; /* h-5 */
|
||||
color: #ea580c; /* text-orange-600 */
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 4px; /* mb-1 */
|
||||
}
|
||||
|
||||
.contact-text {
|
||||
font-weight: 500; /* font-medium */
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
@@ -0,0 +1,2 @@
|
||||
User-Agent: *
|
||||
Disallow:
|
||||
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"extends": "../.nuxt/tsconfig.server.json"
|
||||
}
|
||||
@@ -0,0 +1,333 @@
|
||||
/* Global styles for Antrean RSSA */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Inter, -apple-system, Roboto, Helvetica, sans-serif;
|
||||
background-color: #EAEEF3;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.header {
|
||||
width: 100%;
|
||||
height: 43px;
|
||||
background-color: #00A65A;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 16px;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
color: #A7DFC2;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.header-user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
color: #85D3AC;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 210px;
|
||||
height: 100vh;
|
||||
background-color: #fff;
|
||||
position: fixed;
|
||||
top: 43px;
|
||||
left: 0;
|
||||
overflow-y: auto;
|
||||
border-right: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.sidebar-menu {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.sidebar-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 16px;
|
||||
color: #8B8A8D;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
text-decoration: none;
|
||||
gap: 12px;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.sidebar-item:hover {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.sidebar-item.active {
|
||||
background-color: #e8f5e8;
|
||||
color: #00A65A;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
margin-left: 210px;
|
||||
margin-top: 43px;
|
||||
padding: 20px;
|
||||
min-height: calc(100vh - 43px);
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
background-color: #EBEFF4;
|
||||
padding: 12px 20px;
|
||||
margin: -20px -20px 20px -20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.breadcrumb-item {
|
||||
color: #6F6C70;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.breadcrumb-link {
|
||||
color: #9D9FA4;
|
||||
font-size: 10px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.section {
|
||||
background-color: #fff;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
padding: 12px 16px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.section-header.late-visitors {
|
||||
background-color: #F4A221;
|
||||
color: #F6BB63;
|
||||
}
|
||||
|
||||
.section-header.visitors {
|
||||
background-color: #DD4B39;
|
||||
color: #E78982;
|
||||
}
|
||||
|
||||
.section-content {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: #757476;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #A3C9DF;
|
||||
border-radius: 2px;
|
||||
font-size: 12px;
|
||||
color: #C8C8CB;
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
outline: none;
|
||||
border-color: #00A65A;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 8px 16px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: #00C0EF;
|
||||
color: #A8E8F8;
|
||||
border: 1px solid #3ECFF2;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: #00A8CC;
|
||||
}
|
||||
|
||||
.data-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.data-table th {
|
||||
background-color: #f8f9fa;
|
||||
padding: 12px 8px;
|
||||
text-align: left;
|
||||
font-weight: 700;
|
||||
color: #7F7A7F;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.data-table td {
|
||||
padding: 12px 8px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
color: #A1A0A5;
|
||||
}
|
||||
|
||||
.data-table tr:hover {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.status-btn {
|
||||
padding: 4px 8px;
|
||||
border-radius: 2px;
|
||||
font-size: 10px;
|
||||
font-weight: 400;
|
||||
border: 1px solid;
|
||||
display: inline-block;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
.status-btn.tiket {
|
||||
background-color: #00A65A;
|
||||
color: #8CD5AD;
|
||||
border-color: #41AF7C;
|
||||
}
|
||||
|
||||
.status-btn.tiket-pengantar {
|
||||
background-color: #00A65A;
|
||||
color: #8AD5B1;
|
||||
border-color: #47B281;
|
||||
}
|
||||
|
||||
.status-btn.bypass {
|
||||
background-color: #00BDF2;
|
||||
color: #92E2F7;
|
||||
border-color: #40BBC9;
|
||||
}
|
||||
|
||||
.table-controls {
|
||||
display: flex;
|
||||
justify-content: between;
|
||||
align-items: center;
|
||||
padding: 16px;
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.table-controls-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.table-controls-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.select-control {
|
||||
padding: 6px 24px 6px 8px;
|
||||
border: 1px solid #D5D7E0;
|
||||
border-radius: 2px;
|
||||
font-size: 11px;
|
||||
color: #AEAFAF;
|
||||
background-color: #fff;
|
||||
background-image: url('data:image/svg+xml;utf8,<svg fill="%23666" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></svg>');
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 8px center;
|
||||
background-size: 12px;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
padding: 6px 8px;
|
||||
border: 1px solid #E4E7EB;
|
||||
border-radius: 2px;
|
||||
font-size: 12px;
|
||||
color: #A1A1A5;
|
||||
width: 153px;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 16px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.pagination-info {
|
||||
color: #A2A1A6;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.pagination-controls {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.pagination-btn {
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #E0DCD9;
|
||||
border-radius: 2px;
|
||||
font-size: 12px;
|
||||
color: #BDBDBF;
|
||||
background-color: #FFFEFF;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.pagination-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.no-data {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
color: #9B9A9C;
|
||||
font-size: 12px;
|
||||
}
|
||||
@@ -0,0 +1,171 @@
|
||||
// stores/payment.ts
|
||||
import { defineStore } from 'pinia'
|
||||
|
||||
// Define a type for the store's state
|
||||
export interface PaymentState {
|
||||
payment: {
|
||||
id: string | null
|
||||
amount: number
|
||||
description: string
|
||||
patientName: string
|
||||
qrCode: string
|
||||
status: 'pending' | 'success' | 'failed' | 'expired'
|
||||
expiryTime: string | null
|
||||
}
|
||||
loket: {
|
||||
id: number | null
|
||||
name: string
|
||||
ipAddress: string
|
||||
location: string
|
||||
isActive: boolean
|
||||
}
|
||||
loading: boolean
|
||||
error: string | null
|
||||
}
|
||||
|
||||
export const usePaymentStore = defineStore('payment', {
|
||||
state: (): PaymentState => ({
|
||||
payment: {
|
||||
id: null,
|
||||
amount: 0,
|
||||
description: '',
|
||||
patientName: '',
|
||||
qrCode: '',
|
||||
status: 'pending',
|
||||
expiryTime: null,
|
||||
},
|
||||
loket: {
|
||||
id: null,
|
||||
name: '',
|
||||
ipAddress: '',
|
||||
location: '',
|
||||
isActive: false,
|
||||
},
|
||||
loading: false,
|
||||
error: null,
|
||||
}),
|
||||
|
||||
getters: {
|
||||
isSystemReady: (state) => {
|
||||
return state.loket.id && state.loket.isActive
|
||||
},
|
||||
paymentExpired: (state) => {
|
||||
if (!state.payment.expiryTime) return false
|
||||
return new Date() > new Date(state.payment.expiryTime)
|
||||
},
|
||||
},
|
||||
|
||||
actions: {
|
||||
setLoading(loading: boolean) {
|
||||
this.loading = loading
|
||||
},
|
||||
|
||||
setError(error: string | null) {
|
||||
this.error = error
|
||||
},
|
||||
|
||||
clearError() {
|
||||
this.error = null
|
||||
},
|
||||
|
||||
setPaymentData(data: Partial<PaymentState['payment']>) {
|
||||
this.payment = { ...this.payment, ...data }
|
||||
},
|
||||
|
||||
setLoketInfo(data: Partial<PaymentState['loket']>) {
|
||||
this.loket = { ...this.loket, ...data }
|
||||
},
|
||||
|
||||
resetPayment() {
|
||||
this.payment = {
|
||||
id: null,
|
||||
amount: 0,
|
||||
description: '',
|
||||
patientName: '',
|
||||
qrCode: '',
|
||||
status: 'pending',
|
||||
expiryTime: null,
|
||||
}
|
||||
},
|
||||
|
||||
// Actions for API calls
|
||||
async fetchLoketInfo() {
|
||||
try {
|
||||
this.setLoading(true)
|
||||
this.clearError()
|
||||
|
||||
const { data } = await $fetch('/api/loket/info', {
|
||||
headers: {
|
||||
'X-Client-IP': await this.getClientIP(),
|
||||
},
|
||||
})
|
||||
|
||||
this.setLoketInfo(data)
|
||||
return data
|
||||
} catch (error: any) {
|
||||
const errorMessage = error.data?.message || 'Gagal mengambil info loket'
|
||||
this.setError(errorMessage)
|
||||
throw error
|
||||
} finally {
|
||||
this.setLoading(false)
|
||||
}
|
||||
},
|
||||
|
||||
async generatePayment(paymentData: {
|
||||
patient_name: string
|
||||
amount: number
|
||||
description: string
|
||||
loket_id: number
|
||||
loket_ip: string
|
||||
}) {
|
||||
try {
|
||||
this.setLoading(true)
|
||||
this.clearError()
|
||||
|
||||
const { data } = await $fetch('/api/payment/generate', {
|
||||
method: 'POST',
|
||||
body: paymentData,
|
||||
headers: {
|
||||
'X-Client-IP': await this.getClientIP(),
|
||||
},
|
||||
})
|
||||
|
||||
this.setPaymentData(data)
|
||||
return data
|
||||
} catch (error: any) {
|
||||
const errorMessage = error.data?.message || 'Gagal generate pembayaran'
|
||||
this.setError(errorMessage)
|
||||
throw error
|
||||
} finally {
|
||||
this.setLoading(false)
|
||||
}
|
||||
},
|
||||
|
||||
async checkPaymentStatus(paymentId: string) {
|
||||
try {
|
||||
const { data } = await $fetch(`/api/payment/status/${paymentId}`)
|
||||
this.setPaymentData({ status: data.status })
|
||||
return data
|
||||
} catch (error) {
|
||||
console.error('Error checking payment status:', error)
|
||||
throw error
|
||||
}
|
||||
},
|
||||
|
||||
// Helper method to get client IP
|
||||
async getClientIP(): Promise<string> {
|
||||
if (process.client) {
|
||||
try {
|
||||
const response = await fetch('https://api.ipify.org?format=json')
|
||||
const data = await response.json()
|
||||
return data.ip
|
||||
} catch {
|
||||
return window.location.hostname === 'localhost'
|
||||
? '127.0.0.1'
|
||||
: window.location.hostname
|
||||
}
|
||||
}
|
||||
return 'server-side'
|
||||
},
|
||||
},
|
||||
})
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
// https://nuxt.com/docs/guide/concepts/typescript
|
||||
"extends": "./.nuxt/tsconfig.json"
|
||||
}
|
||||
Reference in New Issue
Block a user