407 lines
19 KiB
PHP
407 lines
19 KiB
PHP
<?php
|
|
// Start session to get user information
|
|
session_start();
|
|
|
|
// Include database connection if needed for user validation
|
|
include('../../routes/db_conn.php');
|
|
|
|
// Get user role and name if available
|
|
$userRole = isset($_SESSION['role']) ? $_SESSION['role'] : 'guest';
|
|
$username = isset($_SESSION['username']) ? $_SESSION['username'] : 'Unknown User';
|
|
$isAdmin = ($userRole === 'admin');
|
|
|
|
// WhatsApp number (with country code format for Indonesia)
|
|
$waNumber = "6287704632355"; // 62 + 87704632355 (removing the leading 0)
|
|
?>
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="id">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
|
|
<meta name="description" content="Ayula Store - Laporkan Masalah">
|
|
<meta name="keywords" content="admin, reports, issues, support, ayula store">
|
|
<meta name="author" content="Ayula Store Developer">
|
|
<meta name="robots" content="noindex, nofollow">
|
|
<title>Ayula Store POS - Laporkan Masalah</title>
|
|
|
|
<link rel="shortcut icon" type="image/x-icon" href="../../src/img/smallest-ayula.png">
|
|
<link rel="stylesheet" href="../../bootstrap/assets/css/bootstrap.min.css">
|
|
<link rel="stylesheet" href="../../bootstrap/assets/css/animate.css">
|
|
<link rel="stylesheet" href="../../bootstrap/assets/plugins/select2/css/select2.min.css">
|
|
<link rel="stylesheet" href="../../bootstrap/assets/plugins/fontawesome/css/fontawesome.min.css">
|
|
<link rel="stylesheet" href="../../bootstrap/assets/plugins/fontawesome/css/all.min.css">
|
|
<link rel="stylesheet" href="../../bootstrap/assets/css/style.css">
|
|
|
|
<style>
|
|
.report-card {
|
|
border-radius: 10px;
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.report-header {
|
|
background-color: #f8f9fa;
|
|
padding: 20px;
|
|
border-bottom: 1px solid #e9ecef;
|
|
border-radius: 10px 10px 0 0;
|
|
}
|
|
|
|
.report-body {
|
|
padding: 30px;
|
|
}
|
|
|
|
.wa-button {
|
|
background-color: #25D366;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 5px;
|
|
padding: 12px 24px;
|
|
font-weight: 600;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.wa-button:hover {
|
|
background-color: #128C7E;
|
|
color: white;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.wa-icon {
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.issue-type-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.issue-type-btn {
|
|
flex: 1 0 calc(33.333% - 10px);
|
|
min-width: 150px;
|
|
padding: 15px;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 5px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.issue-type-btn:hover {
|
|
background-color: #f8f9fa;
|
|
border-color: #ced4da;
|
|
}
|
|
|
|
.issue-type-btn.active {
|
|
background-color: #ff9f43;
|
|
color: white;
|
|
border-color: #ff9f43;
|
|
}
|
|
|
|
.issue-type-btn i {
|
|
display: block;
|
|
font-size: 24px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.issue-type-btn {
|
|
flex: 1 0 calc(50% - 10px);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 576px) {
|
|
.issue-type-btn {
|
|
flex: 1 0 100%;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="<?php echo $isAdmin ? 'admin' : 'employee'; ?>">
|
|
<div id="global-loader">
|
|
<div class="whirly-loader"></div>
|
|
</div>
|
|
|
|
<div class="main-wrapper">
|
|
<div class="header">
|
|
<div class="header-left active">
|
|
<a href="/ayula-store/views/dashboard/" class="logo">
|
|
<img src="../../src/img/logoayula.png" alt="" />
|
|
</a>
|
|
<a href="/ayula-store/views/dashboard/" class="logo-small">
|
|
<img src="../../src/img/smallest-ayula.png" alt="" />
|
|
</a>
|
|
<a id="toggle_btn" href="javascript:void(0);"> </a>
|
|
</div>
|
|
|
|
<a id="mobile_btn" class="mobile_btn" href="#sidebar">
|
|
<span class="bar-icon">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</span>
|
|
</a>
|
|
|
|
<ul class="nav user-menu">
|
|
<li class="nav-item dropdown has-arrow main-drop">
|
|
<a href="javascript:void(0);" class="dropdown-toggle nav-link userset" data-bs-toggle="dropdown">
|
|
<span class="user-img"><img src="../../src/img/userprofile.png" alt="">
|
|
<span class="status online"></span></span>
|
|
</a>
|
|
<div class="dropdown-menu menu-drop-user">
|
|
<div class="profilename">
|
|
<div class="profileset">
|
|
<span class="user-img"><img src="../../src/img/userprofile.png" alt="">
|
|
<span class="status online"></span></span>
|
|
<div class="profilesets">
|
|
<h6><?php echo $isAdmin ? 'Admin' : 'Karyawan'; ?></h6>
|
|
<h5><?php echo htmlspecialchars($username); ?></h5>
|
|
</div>
|
|
</div>
|
|
<hr class="m-0" />
|
|
<a class="dropdown-item" href="/ayula-store/views/report-issue/">
|
|
<img src="../../src/img/warning.png" class="me-2" alt="img" /> Laporkan Masalah
|
|
</a>
|
|
<hr class="m-0" />
|
|
<a class="dropdown-item logout pb-0" href="../../views/logout.php"><img
|
|
src="../../bootstrap/assets/img/icons/log-out.svg"
|
|
class="me-2"
|
|
alt="img" />Keluar</a>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="dropdown mobile-user-menu">
|
|
<a href="javascript:void(0);" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"><i class="fa fa-ellipsis-v"></i></a>
|
|
<div class="dropdown-menu dropdown-menu-right">
|
|
<a class="dropdown-item" href="/ayula-store/views/profile/">Profil Saya</a>
|
|
<a class="dropdown-item" href="/ayula-store/views/report-issue/">Laporkan Masalah</a>
|
|
<a class="dropdown-item logout pb-0" href="../../views/logout.php">
|
|
<img
|
|
src="../../bootstrap/assets/img/icons/log-out.svg"
|
|
class="me-2"
|
|
alt="img" />Keluar</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="sidebar" id="sidebar">
|
|
<div class="sidebar-inner slimscroll">
|
|
<div id="sidebar-menu" class="sidebar-menu">
|
|
<ul>
|
|
<li>
|
|
<a href="/ayula-store/views/dashboard/" class="active"><img
|
|
src="../../bootstrap/assets/img/icons/dashboard.svg" alt="img" /><span>
|
|
Dashboard</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="/ayula-store/views/transaction/"><img src="../../bootstrap/assets/img/icons/sales1.svg"
|
|
alt="img" /><span>
|
|
POS</span></a>
|
|
</li>
|
|
<li class="submenu">
|
|
<a href="javascript:void(0);"><img src="../../bootstrap/assets/img/icons/product.svg" alt="img" /><span>
|
|
Produk</span>
|
|
<span class="menu-arrow"></span></a>
|
|
<ul>
|
|
<li><a href="/ayula-store/views/barang-kasir/">Daftar Produk Kasir</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="submenu">
|
|
<a href="javascript:void(0);"><img src="../../bootstrap/assets/img/icons/time.svg" alt="img" /><span>
|
|
Laporan</span>
|
|
<span class="menu-arrow"></span></a>
|
|
<ul>
|
|
<li>
|
|
<li><a href="/ayula-store/views/report/sales-report/">Laporan Penjualan</a></li>
|
|
<?php if ($userRole == 'admin') { ?>
|
|
<li><a href="/ayula-store/views/report/popular-products/">Produk Terlaris</a></li>
|
|
<?php } ?>
|
|
</ul>
|
|
</li>
|
|
<li class="submenu">
|
|
<a href="javascript:void(0);"><img src="../../bootstrap/assets/img/icons/users1.svg" alt="img" /><span>
|
|
Pengguna</span>
|
|
<span class="menu-arrow"></span></a>
|
|
<ul>
|
|
<?php if ($userRole == 'admin') { ?>
|
|
<li><a href="/ayula-store/views/users/add-user.php">Pengguna Baru</a></li>
|
|
<?php } ?>
|
|
<li><a href="/ayula-store/views/users/">Daftar Pengguna</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="page-wrapper">
|
|
<div class="content">
|
|
<div class="page-header">
|
|
<div class="page-title">
|
|
<h4>Laporkan Masalah</h4>
|
|
<h6>Laporkan masalah atau saran untuk pengembangan sistem</h6>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card report-card">
|
|
<div class="card-header report-header">
|
|
<h5 class="card-title">Hubungi Developer via WhatsApp</h5>
|
|
</div>
|
|
<div class="card-body report-body">
|
|
<div class="alert alert-info mb-4">
|
|
<i class="fas fa-info-circle me-2"></i>
|
|
Isi formulir di bawah ini untuk melaporkan masalah. Pesan akan dikirim langsung ke developer melalui WhatsApp.
|
|
</div>
|
|
|
|
<form id="issue-report-form">
|
|
<div class="mb-4">
|
|
<label class="form-label">Jenis Masalah</label>
|
|
<div class="issue-type-container">
|
|
<div class="issue-type-btn" data-type="Bug/Error">
|
|
<i class="fas fa-bug"></i>
|
|
<span>Bug/Error</span>
|
|
</div>
|
|
<div class="issue-type-btn" data-type="Fitur Tidak Berfungsi">
|
|
<i class="fas fa-exclamation-triangle"></i>
|
|
<span>Fitur Tidak Berfungsi</span>
|
|
</div>
|
|
<div class="issue-type-btn" data-type="Permintaan Fitur">
|
|
<i class="fas fa-lightbulb"></i>
|
|
<span>Permintaan Fitur</span>
|
|
</div>
|
|
<div class="issue-type-btn" data-type="Optimasi Kinerja">
|
|
<i class="fas fa-tachometer-alt"></i>
|
|
<span>Optimasi Kinerja</span>
|
|
</div>
|
|
<div class="issue-type-btn" data-type="UI/UX">
|
|
<i class="fas fa-palette"></i>
|
|
<span>UI/UX</span>
|
|
</div>
|
|
<div class="issue-type-btn" data-type="Lainnya">
|
|
<i class="fas fa-question-circle"></i>
|
|
<span>Lainnya</span>
|
|
</div>
|
|
</div>
|
|
<input type="hidden" id="issue-type" name="issue-type" value="">
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label for="issue-location" class="form-label">Lokasi Masalah</label>
|
|
<select class="form-select" id="issue-location" name="issue-location">
|
|
<option value="">Pilih Halaman/Fitur...</option>
|
|
<option value="Login">Login</option>
|
|
<option value="Dashboard">Dashboard</option>
|
|
<option value="POS/Transaksi">POS/Transaksi</option>
|
|
<option value="Produk">Produk</option>
|
|
<option value="Laporan Penjualan">Laporan Penjualan</option>
|
|
<option value="Produk Terlaris">Produk Terlaris</option>
|
|
<option value="Pengguna">Pengguna</option>
|
|
<option value="Lainnya">Lainnya</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label for="issue-priority" class="form-label">Prioritas</label>
|
|
<select class="form-select" id="issue-priority" name="issue-priority">
|
|
<option value="Rendah">Rendah - Tidak mengganggu operasi utama</option>
|
|
<option value="Sedang" selected>Sedang - Mengganggu tapi ada solusi</option>
|
|
<option value="Tinggi">Tinggi - Menghambat pekerjaan</option>
|
|
<option value="Kritis">Kritis - Sistem tidak dapat digunakan</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label for="issue-description" class="form-label">Deskripsi Masalah</label>
|
|
<textarea class="form-control" id="issue-description" name="issue-description" rows="5" placeholder="Jelaskan masalah dengan detail. Berikan langkah-langkah untuk mereproduksi masalah (jika ada)..."></textarea>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label for="issue-contact" class="form-label">Kontak Anda (Opsional)</label>
|
|
<input type="text" class="form-control" id="issue-contact" name="issue-contact" placeholder="Nomor telepon atau email untuk follow-up" value="<?php echo htmlspecialchars($username); ?>">
|
|
</div>
|
|
|
|
<div class="text-center mt-5">
|
|
<button type="button" id="send-wa-btn" class="btn wa-button btn-lg">
|
|
<i class="fab fa-whatsapp wa-icon"></i>
|
|
Kirim Laporan via WhatsApp
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="../../bootstrap/assets/js/jquery-3.6.0.min.js"></script>
|
|
<script src="../../bootstrap/assets/js/feather.min.js"></script>
|
|
<script src="../../bootstrap/assets/js/jquery.slimscroll.min.js"></script>
|
|
<script src="../../bootstrap/assets/js/bootstrap.bundle.min.js"></script>
|
|
<script src="../../bootstrap/assets/plugins/select2/js/select2.min.js"></script>
|
|
<script src="../../bootstrap/assets/js/script.js"></script>
|
|
|
|
<script>
|
|
$(document).ready(function() {
|
|
// Handle issue type selection
|
|
$('.issue-type-btn').on('click', function() {
|
|
// Remove active class from all buttons
|
|
$('.issue-type-btn').removeClass('active');
|
|
|
|
// Add active class to the clicked button
|
|
$(this).addClass('active');
|
|
|
|
// Set the value in the hidden input
|
|
$('#issue-type').val($(this).data('type'));
|
|
});
|
|
|
|
// Handle send to WhatsApp button
|
|
$('#send-wa-btn').on('click', function() {
|
|
// Get form values
|
|
var issueType = $('#issue-type').val() || 'Tidak ditentukan';
|
|
var issueLocation = $('#issue-location').val() || 'Tidak ditentukan';
|
|
var issuePriority = $('#issue-priority').val() || 'Sedang';
|
|
var issueDescription = $('#issue-description').val() || 'Tidak ada deskripsi';
|
|
var issueContact = $('#issue-contact').val() || '<?php echo htmlspecialchars($username); ?>';
|
|
|
|
// Validate the form
|
|
if (!$('#issue-type').val()) {
|
|
alert('Mohon pilih jenis masalah terlebih dahulu.');
|
|
return;
|
|
}
|
|
|
|
if (!$('#issue-description').val()) {
|
|
alert('Mohon isi deskripsi masalah terlebih dahulu.');
|
|
return;
|
|
}
|
|
|
|
// Create the WhatsApp message
|
|
var message = "🔴 *LAPORAN MASALAH AYULA STORE* 🔴\n\n" +
|
|
"*User:* <?php echo htmlspecialchars($username); ?> (<?php echo htmlspecialchars($userRole); ?>)\n" +
|
|
"*Jenis Masalah:* " + issueType + "\n" +
|
|
"*Lokasi:* " + issueLocation + "\n" +
|
|
"*Prioritas:* " + issuePriority + "\n\n" +
|
|
"*Deskripsi:*\n" + issueDescription + "\n\n" +
|
|
"*Kontak:* " + issueContact;
|
|
|
|
// Encode the message for URL
|
|
var encodedMessage = encodeURIComponent(message);
|
|
|
|
// Create the WhatsApp link
|
|
var waLink = "https://wa.me/<?php echo $waNumber; ?>?text=" + encodedMessage;
|
|
|
|
// Open WhatsApp in a new tab
|
|
window.open(waLink, '_blank');
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|