FP Digital Printing

<!DOCTYPE html>

<head>

<title>FP Digital Printing - Sistem Pembukuan</title>

<style>

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

body {

font-family: 'Poppins', sans-serif;

background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);

min-height: 100vh;

}

.sidebar-item:hover {

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

transform: translateX(4px);

box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);

}

.active-tab {

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

transform: translateX(4px);

box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);

}

.card-hover:hover {

transform: translateY(-8px) scale(1.02);

box-shadow: 0 20px 40px rgba(0,0,0,0.15);

border: 1px solid rgba(102, 126, 234, 0.2);

}

.gradient-bg {

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

}

.glass-effect {

background: rgba(255, 255, 255, 0.95);

backdrop-filter: blur(20px);

border: 1px solid rgba(255, 255, 255, 0.2);

}

.card-gradient {

background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);

border: 1px solid rgba(102, 126, 234, 0.1);

}

.status-badge {

backdrop-filter: blur(10px);

border: 1px solid rgba(255, 255, 255, 0.3);

}

.sidebar-gradient {

background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);

border-right: 1px solid rgba(102, 126, 234, 0.1);

}

.header-glass {

background: linear-gradient(135deg, rgba(102, 126, 234, 0.9) 0%, rgba(118, 75, 162, 0.9) 100%);

backdrop-filter: blur(20px);

border-bottom: 1px solid rgba(255, 255, 255, 0.2);

}

.input-focus:focus {

border-color: #667eea;

box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);

transform: translateY(-1px);

}

.btn-primary {

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);

transition: all 0.3s ease;

}

.btn-primary:hover {

transform: translateY(-2px);

box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6);

}

.table-row:hover {

background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);

transform: translateX(4px);

}

.stat-card {

background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);

border: 1px solid rgba(102, 126, 234, 0.1);

position: relative;

overflow: hidden;

}

.stat-card::before {

content: '';

position: absolute;

top: 0;

left: 0;

right: 0;

height: 4px;

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

}

.modal-backdrop {

background: rgba(0, 0, 0, 0.6);

backdrop-filter: blur(8px);

}

.modal-content {

background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);

border: 1px solid rgba(102, 126, 234, 0.2);

box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);

}

.icon-gradient {

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

background-clip: text;

}

.floating-animation {

animation: float 6s ease-in-out infinite;

}

@keyframes float {

0%, 100% { transform: translateY(0px); }

50% { transform: translateY(-10px); }

}

.pulse-glow {

animation: pulse-glow 2s infinite;

}

@keyframes pulse-glow {

0%, 100% { box-shadow: 0 0 20px rgba(102, 126, 234, 0.3); }

50% { box-shadow: 0 0 30px rgba(102, 126, 234, 0.6); }

}

.text-gradient {

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

background-clip: text;

}

.border-gradient {

border: 2px solid transparent;

background: linear-gradient(white, white) padding-box,

linear-gradient(135deg, #667eea, #764ba2) border-box;

}

</style>

</head>

</div>

</svg>

</div>

<h1 class="text-3xl font-bold text-gray-800 mb-2">FP Digital Printing</h1>

<p class="text-gray-600">Sistem Pembukuan Digital</p>

</div>

<div>

<label class="block text-sm font-semibold text-gray-700 mb-2">Username</label>

</svg>

</div>

</div>

<div>

<label class="block text-sm font-semibold text-gray-700 mb-2">Password</label>

</svg>

</div>

</svg>

</button>

</div>

<span class="ml-2 text-sm text-gray-600">Ingat saya</span>

</label>

Lupa password?

</button>

</div>

🔐 Masuk ke Dashboard

</button>

</form>

<h4 class="text-sm font-semibold text-blue-800 mb-2">🔑 Demo Login:</h4>

<p><strong>Username:</strong> admin</p>

<p><strong>Password:</strong> admin123</p>

</div>

</div>

</svg>

</div>

<div>

<h1 class="text-3xl font-bold tracking-tight">FP Digital Printing</h1>

<p class="text-white/80 text-sm font-medium">Sistem Pembukuan Digital Terpadu</p>

</div>

</div>

<p class="text-sm text-white/70 font-medium">Selamat datang</p>

<p class="font-bold text-lg" id="currentUserName">Administrator</p>

</div>

</header>

<li>

</svg>

</div>

<span class="text-white font-semibold">Dashboard</span>

</button>

</li>

<li>

</svg>

</div>

<span class="font-medium">Pesanan Harian</span>

</button>

</li>

<li>

</svg>

</div>

<span class="font-medium">Pesanan Tagihan</span>

</button>

</li>

<li>

</svg>

</div>

<span class="font-medium">Data Pelanggan</span>

</button>

</li>

<li>

</svg>

</div>

<span class="font-medium">Laporan Keuangan</span>

</button>

</li>

<li>

</svg>

</div>

<span class="font-medium">Surat Jalan</span>

</button>

</li>

<li>

</svg>

</div>

<span class="font-medium">Stok Barang</span>

</button>

</li>

<li>

</svg>

</div>

<span class="font-medium">Pengaturan</span>

</button>

</li>

</ul>

</nav>

</aside>

<h2 class="text-4xl font-bold text-gradient mb-3">Dashboard</h2>

<p class="text-gray-600 text-lg">Ringkasan aktivitas FP Digital Printing hari ini</p>

</div>

<div>

<p class="text-gray-500 text-sm font-medium mb-2">Total Pesanan Hari Ini</p>

<p class="text-xs text-green-600 font-medium mt-1">↗ +8% dari kemarin</p>

</div>

</svg>

</div>

<div>

<p class="text-gray-500 text-sm font-medium mb-2">Pendapatan Hari Ini</p>

<p class="text-xs text-green-600 font-medium mt-1">↗ +15% dari kemarin</p>

</div>

</svg>

</div>

<div>

<p class="text-gray-500 text-sm font-medium mb-2">Pesanan Pending</p>

<p class="text-xs text-yellow-600 font-medium mt-1">⚠ Perlu perhatian</p>

</div>

</svg>

</div>

<div>

<p class="text-gray-500 text-sm font-medium mb-2">Total Pelanggan</p>

<p class="text-xs text-blue-600 font-medium mt-1">↗ +3 pelanggan baru</p>

</div>

</svg>

</div>

<h3 class="text-2xl font-bold text-gradient">Pesanan Terbaru</h3>

Live Updates

</div>

<thead>

<th class="text-left py-4 px-6 font-bold text-gray-700">No. Pesanan</th>

<th class="text-left py-4 px-6 font-bold text-gray-700">Pelanggan</th>

<th class="text-left py-4 px-6 font-bold text-gray-700">Jenis Cetak</th>

<th class="text-left py-4 px-6 font-bold text-gray-700">Total</th>

<th class="text-left py-4 px-6 font-bold text-gray-700">Status</th>

</tr>

</thead>

</tbody>

</table>

</div>

<div>

<h2 class="text-3xl font-bold text-gray-800 mb-2">Pesanan Harian</h2>

<p class="text-gray-600">Kelola pesanan dengan pembayaran langsung</p>

</div>

✨ Tambah Pesanan Harian

</button>

</div>

<option>Semua Status Bayar</option>

<option>Belum Bayar</option>

<option>Sebagian</option>

<option>Lunas</option>

</select>

</div>

<thead>

<th class="text-left py-3 px-4 font-semibold text-gray-700">No. Pesanan</th>

<th class="text-left py-3 px-4 font-semibold text-gray-700">Tanggal</th>

<th class="text-left py-3 px-4 font-semibold text-gray-700">Pelanggan</th>

<th class="text-left py-3 px-4 font-semibold text-gray-700">Jenis Cetak</th>

<th class="text-left py-3 px-4 font-semibold text-gray-700">Ukuran</th>

<th class="text-left py-3 px-4 font-semibold text-gray-700">Total</th>

<th class="text-left py-3 px-4 font-semibold text-gray-700">Status Bayar</th>

<th class="text-left py-3 px-4 font-semibold text-gray-700">Status</th>

</tr>

</thead>

</tbody>

</table>

</div>

<div>

<h2 class="text-3xl font-bold text-gray-800 mb-2">Pesanan Tagihan</h2>

<p class="text-gray-600">Kelola pesanan dengan sistem tagihan bulanan</p>

</div>

+ Tambah Pesanan Tagihan

</button>

</div>

<h3 class="text-lg font-semibold text-gray-800 mb-2">Total Tagihan Bulan Ini</h3>

<p class="text-sm text-gray-500 mt-1">25 pesanan tagihan</p>

</div>

<h3 class="text-lg font-semibold text-gray-800 mb-2">Tagihan Belum Dibayar</h3>

<p class="text-sm text-gray-500 mt-1">12 tagihan pending</p>

</div>

<h3 class="text-lg font-semibold text-gray-800 mb-2">Tagihan Terbayar</h3>

<p class="text-sm text-gray-500 mt-1">13 tagihan lunas</p>

</div>

<option>Semua Status Bayar</option>

<option>Belum Bayar</option>

<option>Sebagian</option>

<option>Lunas</option>

</select>

<option>Bulan Ini</option>

<option>Januari 2024</option>

<option>Februari 2024</option>

<option>Maret 2024</option>

</select>

📄 Buat Invoice

</button>

</div>

<thead>

<th class="text-left py-3 px-4 font-semibold text-gray-700">No. Pesanan</th>

<th class="text-left py-3 px-4 font-semibold text-gray-700">Tanggal</th>

<th class="text-left py-3 px-4 font-semibold text-gray-700">Pelanggan</th>

<th class="text-left py-3 px-4 font-semibold text-gray-700">Jenis Cetak</th>

<th class="text-left py-3 px-4 font-semibold text-gray-700">Total</th>

<th class="text-left py-3 px-4 font-semibold text-gray-700">Terbayar</th>

<th class="text-left py-3 px-4 font-semibold text-gray-700">Jatuh Tempo</th>

<th class="text-left py-3 px-4 font-semibold text-gray-700">Status Bayar</th>

</tr>

</thead>

</tbody>

</table>

</div>

<div>

<h2 class="text-3xl font-bold text-gray-800 mb-2">Data Pelanggan</h2>

<p class="text-gray-600">Kelola informasi pelanggan</p>

</div>

+ Tambah Pelanggan

</button>

</div>

</div>

<thead>

<th class="text-left py-3 px-4 font-semibold text-gray-700">Telepon</th>

<th class="text-left py-3 px-4 font-semibold text-gray-700">Email</th>

<th class="text-left py-3 px-4 font-semibold text-gray-700">Alamat</th>

<th class="text-left py-3 px-4 font-semibold text-gray-700">Total Pesanan</th>

</tr>

</thead>

</tbody>

</table>

</div>

<h2 class="text-3xl font-bold text-gray-800 mb-2">Laporan Keuangan</h2>

<p class="text-gray-600">Analisis pendapatan dan pengeluaran</p>

</div>

<h3 class="text-lg font-semibold text-gray-800 mb-2">Pendapatan Bulan Ini</h3>

<p class="text-sm text-gray-500 mt-1">+12% dari bulan lalu</p>

</div>

<h3 class="text-lg font-semibold text-gray-800 mb-2">Pengeluaran Bulan Ini</h3>

<p class="text-sm text-gray-500 mt-1">+5% dari bulan lalu</p>

</div>

<h3 class="text-lg font-semibold text-gray-800 mb-2">Keuntungan Bersih</h3>

<p class="text-sm text-gray-500 mt-1">+18% dari bulan lalu</p>

</div>

<h3 class="text-xl font-semibold text-gray-800">Catatan Keuangan</h3>

+ Tambah Transaksi

</button>

</div>

<thead>

<th class="text-left py-3 px-4 font-semibold text-gray-700">Tanggal</th>

<th class="text-left py-3 px-4 font-semibold text-gray-700">Keterangan</th>

<th class="text-left py-3 px-4 font-semibold text-gray-700">Kategori</th>

<th class="text-left py-3 px-4 font-semibold text-gray-700">Pemasukan</th>

<th class="text-left py-3 px-4 font-semibold text-gray-700">Pengeluaran</th>

</tr>

</thead>

</tbody>

</table>

</div>

<div>

<h2 class="text-3xl font-bold text-gray-800 mb-2">Surat Jalan</h2>

<p class="text-gray-600">Kelola surat jalan pengiriman pesanan</p>

</div>

+ Buat Surat Jalan

</button>

</div>

<option value="">Semua Tipe Pesanan</option>

<option value="FPH">Pesanan Harian</option>

<option value="FPT">Pesanan Tagihan</option>

</select>

</div>

<thead>

<th class="text-left py-3 px-4 font-semibold text-gray-700">No. Surat Jalan</th>

<th class="text-left py-3 px-4 font-semibold text-gray-700">Tanggal</th>

<th class="text-left py-3 px-4 font-semibold text-gray-700">No. Pesanan</th>

<th class="text-left py-3 px-4 font-semibold text-gray-700">Pelanggan</th>

<th class="text-left py-3 px-4 font-semibold text-gray-700">Alamat Tujuan</th>

<th class="text-left py-3 px-4 font-semibold text-gray-700">Kurir</th>

</tr>

</thead>

</tbody>

</table>

</div>

<div>

<h2 class="text-3xl font-bold text-gray-800 mb-2">Stok Barang</h2>

<p class="text-gray-600">Kelola inventori bahan dan peralatan</p>

</div>

+ Tambah Barang

</button>

</div>

</div>

<thead>

<th class="text-left py-3 px-4 font-semibold text-gray-700">Kode Barang</th>

<th class="text-left py-3 px-4 font-semibold text-gray-700">Nama Barang</th>

<th class="text-left py-3 px-4 font-semibold text-gray-700">Kategori</th>

<th class="text-left py-3 px-4 font-semibold text-gray-700">Satuan</th>

<th class="text-left py-3 px-4 font-semibold text-gray-700">Harga</th>

<th class="text-left py-3 px-4 font-semibold text-gray-700">Status</th>

</tr>

</thead>

</tbody>

</table>

</div>

<h2 class="text-3xl font-bold text-gray-800 mb-2">Pengaturan Perusahaan</h2>

<p class="text-gray-600">Kelola informasi dan tampilan perusahaan</p>

</div>

<h3 class="text-xl font-semibold text-gray-800 mb-4">Informasi Perusahaan</h3>

<div>

<label class="block text-sm font-medium text-gray-700 mb-1">Nama Perusahaan</label>

</div>

<div>

<label class="block text-sm font-medium text-gray-700 mb-1">Alamat</label>

<textarea id="companyAddress" rows="3" class="w-full border border-gray-300 rounded-lg px-3 py-2">Royal Sentraland BTP, Blok RD.15</textarea>

</div>

<div>

<label class="block text-sm font-medium text-gray-700 mb-1">Telepon</label>

</div>

<div>

<label class="block text-sm font-medium text-gray-700 mb-1">Email</label>

</div>

<div>

<label class="block text-sm font-medium text-gray-700 mb-1">Website</label>

</div>

Simpan Perubahan

</button>

</form>

</div>

<h3 class="text-xl font-semibold text-gray-800 mb-4">Logo Perusahaan</h3>

</svg>

</div>

<p class="text-gray-500 text-sm mt-2">Logo Default</p>

</div>

<div>

<label class="block text-sm font-medium text-gray-700 mb-2">Upload Logo Baru</label>

<p class="text-xs text-gray-500 mt-1">Format: JPG, PNG, SVG (Max: 2MB)</p>

</div>

<label class="block text-sm font-medium text-gray-700 mb-2">Atau Pilih Template Logo</label>

</svg>

</div>

<p class="text-xs mt-1">Printer</p>

</button>

</svg>

</div>

<p class="text-xs mt-1">Design</p>

</button>

</svg>

</div>

<p class="text-xs mt-1">Digital</p>

</button>

</div>

Terapkan Logo

</button>

</div>

<h3 class="text-xl font-semibold text-gray-800 mb-4">Pengaturan Harga</h3>

<h4 class="font-semibold text-gray-700 border-b pb-2 text-blue-600">💰 Harga Pesanan Harian (Pembayaran Langsung)</h4>

<div>

<label class="block text-sm font-medium text-gray-700 mb-1">Stiker (per m²)</label>

</div>

<div>

<label class="block text-sm font-medium text-gray-700 mb-1">Banner (per m²)</label>

</div>

<div>

<label class="block text-sm font-medium text-gray-700 mb-1">Spanduk (per m²)</label>

</div>

<div>

<label class="block text-sm font-medium text-gray-700 mb-1">Albatros (per m²)</label>

</div>

<div>

<label class="block text-sm font-medium text-gray-700 mb-1">Oneway (per m²)</label>

</div>

<div>

<label class="block text-sm font-medium text-gray-700 mb-1">Kartu Nama (per box)</label>

</div>

<div>

<label class="block text-sm font-medium text-gray-700 mb-1">Brosur (per lembar)</label>

</div>

<h4 class="font-semibold text-gray-700 border-b pb-2 text-purple-600">🏷️ Harga Pesanan Tagihan (Sistem Kredit)</h4>

<p class="text-sm text-purple-700">💡 <strong>Diskon otomatis 12%</strong> untuk pesanan tagihan karena volume besar dan sistem kredit</p>

</div>

<div>

<label class="block text-sm font-medium text-gray-700 mb-1">Stiker (per m²)</label>

</div>

<p class="text-xs text-green-600 mt-1">Hemat Rp 3.000 dari harga harian</p>

</div>

<div>

<label class="block text-sm font-medium text-gray-700 mb-1">Banner (per m²)</label>

</div>

<p class="text-xs text-green-600 mt-1">Hemat Rp 4.000 dari harga harian</p>

</div>

<div>

<label class="block text-sm font-medium text-gray-700 mb-1">Spanduk (per m²)</label>

</div>

<p class="text-xs text-green-600 mt-1">Hemat Rp 4.000 dari harga harian</p>

</div>

<div>

<label class="block text-sm font-medium text-gray-700 mb-1">Albatros (per m²)</label>

</div>

<p class="text-xs text-green-600 mt-1">Hemat Rp 5.000 dari harga harian</p>

</div>

<div>

<label class="block text-sm font-medium text-gray-700 mb-1">Oneway (per m²)</label>

</div>

<p class="text-xs text-green-600 mt-1">Hemat Rp 6.000 dari harga harian</p>

</div>

<div>

<label class="block text-sm font-medium text-gray-700 mb-1">Kartu Nama (per box)</label>

</div>

<p class="text-xs text-green-600 mt-1">Hemat Rp 15.000 dari harga harian</p>

</div>

<div>

<label class="block text-sm font-medium text-gray-700 mb-1">Brosur (per lembar)</label>

</div>

<p class="text-xs text-green-600 mt-1">Hemat Rp 100 dari harga harian</p>

</div>

<p>💡 <strong>Tips:</strong> Harga akan otomatis diterapkan berdasarkan jenis pesanan</p>

</div>

Reset ke Default

</button>

Simpan Harga

</button>

</div>

</form>

</div>

<h3 class="text-xl font-semibold text-gray-800 mb-4">Manajemen Akun</h3>

<div>

<p class="font-semibold text-gray-800">Pengguna Aktif</p>

<p class="text-sm text-gray-600" id="activeUserInfo">Administrator</p>

<p class="text-xs text-gray-500 mt-1">Login terakhir: <span id="lastLoginTime"></span></p>

</div>

</svg>

<span>Logout</span>

</button>

</div>

<h3 class="text-xl font-semibold text-gray-800 mb-4">Preview Tampilan</h3>

</svg>

</div>

<div>

<h1 class="text-xl font-bold" id="previewCompanyName">FP Digital Printing</h1>

<p class="text-purple-100 text-sm">Sistem Pembukuan Digital</p>

</div>

<p class="text-sm text-gray-600" id="previewAddress">Royal Sentraland BTP, Blok RD.15</p>

<p class="text-sm text-gray-600" id="previewContact">Telp: 0877 8811 2438 | Email: fpdigital13@gmail.com</p>

</div>

</main>

</div>

</div>

<h3 class="text-xl font-semibold mb-4">Tambah Pesanan Baru</h3>

<div>

<label class="block text-sm font-medium text-gray-700 mb-1">Pelanggan</label>

</div>

<div>

<label class="block text-sm font-medium text-gray-700 mb-1">Jenis Cetak</label>

<option value="">Pilih jenis cetak</option>

<option value="Stiker">Stiker</option>

<option value="Banner">Banner</option>

<option value="Spanduk">Spanduk</option>

<option value="Albatros">Albatros</option>

<option value="Oneway">Oneway</option>

<option value="Kartu Nama">Kartu Nama</option>

<option value="Brosur">Brosur</option>

</select>

</div>

</div>

<div>

<label class="block text-sm font-medium text-gray-700 mb-1" id="sizeLabel">Ukuran</label>

</div>

<div>

<label class="block text-sm font-medium text-gray-700 mb-1" id="qtyLabel">Quantity</label>

</div>

<div>

<label class="block text-sm font-medium text-gray-700 mb-1">Harga Satuan</label>

</div>

<div>

<label class="block text-sm font-medium text-gray-700 mb-1">Total Harga</label>

</div>

<button type="button" onclick="closeModal('addOrderModal')" class="px-6 py-3 text-gray-600 border-2 border-gray-300 rounded-xl hover:bg-gray-50 transition-all duration-300 font-medium">Batal</button>

<button type="submit" class="btn-primary text-white px-6 py-3 rounded-xl font-bold">💾 Simpan</button>

</div>

</form>

</div>

<h3 class="text-xl font-semibold mb-4">Buat Surat Jalan Baru</h3>

<div>

<label class="block text-sm font-medium text-gray-700 mb-1">No. Pesanan</label>

<option value="">Pilih pesanan</option>

</select>

</div>

<h4 class="font-semibold text-blue-800 mb-2">📋 Detail Pesanan:</h4>

<div><strong>Pelanggan:</strong> <span id="orderCustomerInfo"></span></div>

<div><strong>Jenis:</strong> <span id="orderTypeInfo"></span></div>

<div><strong>Ukuran:</strong> <span id="orderSizeInfo"></span></div>

<div><strong>Quantity:</strong> <span id="orderQtyInfo"></span></div>

<div><strong>Total:</strong> <span id="orderTotalInfo"></span></div>

</div>

<div>

<label class="block text-sm font-medium text-gray-700 mb-1">Alamat Tujuan</label>

</div>

<div>

<label class="block text-sm font-medium text-gray-700 mb-1">Kurir</label>

</div>

<div>

<label class="block text-sm font-medium text-gray-700 mb-1">Catatan</label>

</div>

<button type="button" onclick="closeModal('addDeliveryModal')" class="px-4 py-2 text-gray-600 border border-gray-300 rounded-lg hover:bg-gray-50">Batal</button>

<button type="submit" class="gradient-bg text-white px-4 py-2 rounded-lg hover:opacity-90">Buat Surat Jalan</button>

</div>

</form>

</div>

<h3 class="text-xl font-semibold mb-4">Edit Pesanan</h3>

<div>

<label class="block text-sm font-medium text-gray-700 mb-1">Pelanggan</label>

</div>

<div>

<label class="block text-sm font-medium text-gray-700 mb-1">Jenis Cetak</label>

<option value="">Pilih jenis cetak</option>

<option value="Stiker">Stiker</option>

<option value="Banner">Banner</option>

<option value="Spanduk">Spanduk</option>

<option value="Albatros">Albatros</option>

<option value="Oneway">Oneway</option>

<option value="Kartu Nama">Kartu Nama</option>

<option value="Brosur">Brosur</option>

</select>

</div>

</div>

<div>

<label class="block text-sm font-medium text-gray-700 mb-1" id="editSizeLabel">Ukuran</label>

</div>

<div>

<label class="block text-sm font-medium text-gray-700 mb-1" id="editQtyLabel">Quantity</label>

</div>

<div>

<label class="block text-sm font-medium text-gray-700 mb-1">Harga Satuan</label>

</div>

<div>

<label class="block text-sm font-medium text-gray-700 mb-1">Total Harga</label>

</div>

<div>

<label class="block text-sm font-medium text-gray-700 mb-1">Status</label>

<option value="Pending">Pending</option>

<option value="Proses">Proses</option>

<option value="Selesai">Selesai</option>

</select>

</div>

<button type="button" onclick="closeModal('editOrderModal')" class="px-4 py-2 text-gray-600 border border-gray-300 rounded-lg hover:bg-gray-50">Batal</button>

<button type="submit" class="gradient-bg text-white px-4 py-2 rounded-lg hover:opacity-90">Update</button>

</div>

</form>

</div>

<h3 class="text-xl font-semibold mb-4">Pembayaran Pesanan</h3>

<p class="text-sm text-gray-600">Pesanan:</p>

<p class="text-sm text-gray-600 mt-1">Total: <span class="font-semibold text-blue-600" id="paymentTotal"></span></p>

<p class="text-sm text-gray-600">Terbayar: <span class="font-semibold text-green-600" id="paymentPaid"></span></p>

</div>

<div>

<label class="block text-sm font-medium text-gray-700 mb-1">Jumlah Pembayaran</label>

</div>

<div>

<label class="block text-sm font-medium text-gray-700 mb-1">Metode Pembayaran</label>

<option value="">Pilih metode</option>

<option value="Tunai">Tunai</option>

<option value="Transfer Bank">Transfer Bank</option>

<option value="E-Wallet">E-Wallet</option>

<option value="Kartu Kredit">Kartu Kredit</option>

</select>

</div>

<div>

<label class="block text-sm font-medium text-gray-700 mb-1">Catatan</label>

</div>

<button type="button" onclick="closeModal('paymentModal')" class="px-4 py-2 text-gray-600 border border-gray-300 rounded-lg hover:bg-gray-50">Batal</button>

<button type="submit" class="gradient-bg text-white px-4 py-2 rounded-lg hover:opacity-90">Proses Pembayaran</button>

</div>

</form>

</div>

<h3 class="text-xl font-semibold mb-4">Tambah Pelanggan Baru</h3>

<div>

</div>

<div>

<label class="block text-sm font-medium text-gray-700 mb-1">Telepon</label>

</div>

<div>

<label class="block text-sm font-medium text-gray-700 mb-1">Email</label>

</div>

<div>

<label class="block text-sm font-medium text-gray-700 mb-1">Alamat</label>

</div>

<button type="button" onclick="closeModal('addCustomerModal')" class="px-4 py-2 text-gray-600 border border-gray-300 rounded-lg hover:bg-gray-50">Batal</button>

<button type="submit" class="gradient-bg text-white px-4 py-2 rounded-lg hover:opacity-90">Simpan</button>

</div>

</form>

</div>

// Authentication system

let isLoggedIn = false;

let currentUser = null;

// Default admin credentials (in real app, this would be hashed and stored securely)

const defaultCredentials = {

username: 'admin',

password: 'admin123',

name: 'Administrator'

};

// Company settings

let companySettings = {

name: 'FP Digital Printing',

address: 'Royal Sentraland BTP, Blok RD.15',

phone: '0877 8811 2438',

email: 'fpdigital13@gmail.com',

website: 'www.fpdigitalprinting.com',

logo: {

type: 'default',

color: 'purple-600',

svg: '<path d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z"/>'

}

};

let selectedLogoTemplate = null;

// Sample data

// Pricing structure - separate rates for harian and tagihan orders

const pricingRates = {

harian: {

'Stiker': { unit: 'meter', price: 25000 },

'Banner': { unit: 'meter', price: 35000 },

'Spanduk': { unit: 'meter', price: 30000 },

'Albatros': { unit: 'meter', price: 45000 },

'Oneway': { unit: 'meter', price: 55000 },

'Kartu Nama': { unit: 'box', price: 150000 },

'Brosur': { unit: 'lembar', price: 900 }

tagihan: {

'Stiker': { unit: 'meter', price: 22000 }, // 12% discount for bulk/credit orders

'Banner': { unit: 'meter', price: 31000 },

'Spanduk': { unit: 'meter', price: 26000 },

'Albatros': { unit: 'meter', price: 40000 },

'Oneway': { unit: 'meter', price: 49000 },

'Kartu Nama': { unit: 'box', price: 135000 },

'Brosur': { unit: 'lembar', price: 800 }

}

};

// Pesanan Harian (pembayaran langsung)

let ordersHarian = [

{id: 'FPH001', date: '2024-01-15', customer: 'Budi Santoso', type: 'Banner', size: '3x2m', area: 6, qty: 1, unitPrice: 35000, total: 210000, paid: 210000, paymentStatus: 'Lunas', status: 'Selesai', paymentMethod: 'Tunai'},

{id: 'FPH002', date: '2024-01-15', customer: 'Sari Dewi', type: 'Stiker', size: '5x1m', area: 5, qty: 1, unitPrice: 25000, total: 125000, paid: 0, paymentStatus: 'Belum Bayar', status: 'Proses', paymentMethod: ''},

{id: 'FPH003', date: '2024-01-14', customer: 'Ahmad Rizki', type: 'Kartu Nama', size: '1 Box', area: 1, qty: 1, unitPrice: 150000, total: 150000, paid: 150000, paymentStatus: 'Lunas', status: 'Selesai', paymentMethod: 'Transfer Bank'},

{id: 'FPH004', date: '2024-01-13', customer: 'Toko Makmur', type: 'Oneway', size: '3x1m', area: 3, qty: 1, unitPrice: 55000, total: 165000, paid: 82500, paymentStatus: 'DP', status: 'Proses', paymentMethod: 'Tunai'},

{id: 'FPH005', date: '2024-01-12', customer: 'CV. Berkah', type: 'Spanduk', size: '4x2m', area: 8, qty: 1, unitPrice: 30000, total: 240000, paid: 120000, paymentStatus: 'Sebagian', status: 'Proses', paymentMethod: 'Transfer Bank'}

];

// Pesanan Tagihan (sistem kredit/tagihan bulanan) - using discounted prices

let ordersTagihan = [

{id: 'FPT001', date: '2024-01-15', customer: 'PT. Maju Jaya', type: 'Brosur', size: 'A4', area: 500, qty: 500, unitPrice: 800, total: 400000, paid: 0, remaining: 400000, dueDate: '2024-02-15', paymentStatus: 'Belum Bayar', status: 'Selesai'},

{id: 'FPT002', date: '2024-01-14', customer: 'Toko Berkah', type: 'Spanduk', size: '4x1m', area: 4, qty: 2, unitPrice: 26000, total: 208000, paid: 208000, remaining: 0, dueDate: '2024-02-14', paymentStatus: 'Lunas', status: 'Selesai'},

{id: 'FPT003', date: '2024-01-13', customer: 'CV. Sukses', type: 'Albatros', size: '2x1m', area: 2, qty: 1, unitPrice: 40000, total: 80000, paid: 40000, remaining: 40000, dueDate: '2024-02-13', paymentStatus: 'DP', status: 'Selesai'},

{id: 'FPT004', date: '2024-01-12', customer: 'PT. Global', type: 'Banner', size: '5x2m', area: 10, qty: 3, unitPrice: 31000, total: 930000, paid: 465000, remaining: 465000, dueDate: '2024-02-12', paymentStatus: 'Sebagian', status: 'Selesai'},

{id: 'FPT005', date: '2024-01-11', customer: 'Warung Sari', type: 'Stiker', size: '2x1m', area: 2, qty: 5, unitPrice: 22000, total: 220000, paid: 220000, remaining: 0, dueDate: '2024-02-11', paymentStatus: 'Lunas', status: 'Selesai'}

];

// Combined orders for dashboard (backward compatibility)

let orders = [...ordersHarian, ...ordersTagihan];

let customers = [

{id: 'C001', name: 'Budi Santoso', phone: '081234567890', email: 'budi@email.com', address: 'Jl. Merdeka No. 123, Jakarta Pusat', orders: 3},

{id: 'C002', name: 'Sari Dewi', phone: '081234567891', email: 'sari@email.com', address: 'Jl. Thamrin No. 90, Jakarta Pusat', orders: 1},

{id: 'C003', name: 'PT. Maju Jaya', phone: '081234567892', email: 'info@majujaya.com', address: 'Jl. Sudirman No. 200, Jakarta Selatan', orders: 5},

{id: 'C004', name: 'Toko Berkah', phone: '081234567893', email: 'berkah@email.com', address: 'Jl. Sudirman No. 45, Jakarta Selatan', orders: 2},

{id: 'C005', name: 'Ahmad Rizki', phone: '081234567894', email: 'ahmad@email.com', address: 'Jl. Gatot Subroto No. 78, Jakarta Barat', orders: 1}

];

let transactions = [

{date: '2024-01-15', description: 'Pembayaran Banner - Budi Santoso', category: 'Pemasukan', income: 350000, expense: 0},

{date: '2024-01-15', description: 'Pembelian Tinta Printer', category: 'Pengeluaran', income: 0, expense: 450000},

{date: '2024-01-14', description: 'Pembayaran Spanduk - Toko Berkah', category: 'Pemasukan', income: 280000, expense: 0},

{date: '2024-01-14', description: 'Listrik Bulan Januari', category: 'Pengeluaran', income: 0, expense: 750000},

{date: '2024-01-13', description: 'Pembayaran Kartu Nama - Ahmad Rizki', category: 'Pemasukan', income: 150000, expense: 0}

];

let inventory = [

{code: 'BR001', name: 'Kertas A4 80gsm', category: 'Kertas', stock: 50, unit: 'Rim', price: 45000, status: 'Tersedia'},

{code: 'BR002', name: 'Tinta Printer Hitam', category: 'Tinta', stock: 5, unit: 'Botol', price: 85000, status: 'Stok Rendah'},

{code: 'BR003', name: 'Vinyl Banner', category: 'Material', stock: 25, unit: 'Meter', price: 15000, status: 'Tersedia'},

{code: 'BR004', name: 'Stiker Vinyl', category: 'Material', stock: 100, unit: 'Lembar', price: 2500, status: 'Tersedia'},

{code: 'BR005', name: 'Tinta Printer Warna', category: 'Tinta', stock: 2, unit: 'Set', price: 250000, status: 'Stok Habis'}

];

let deliveryNotes = [

{id: 'SJ001', date: '2024-01-15', orderId: 'FPH001', customer: 'Budi Santoso', address: 'Jl. Merdeka No. 123, Jakarta Pusat', courier: 'Ahmad', status: 'Terkirim'},

{id: 'SJ002', date: '2024-01-15', orderId: 'FPT002', customer: 'Toko Berkah', address: 'Jl. Sudirman No. 45, Jakarta Selatan', courier: 'Budi', status: 'Dalam Perjalanan'},

{id: 'SJ003', date: '2024-01-14', orderId: 'FPH003', customer: 'Ahmad Rizki', address: 'Jl. Gatot Subroto No. 78, Jakarta Barat', courier: 'Sari', status: 'Terkirim'},

{id: 'SJ004', date: '2024-01-14', orderId: 'FPH002', customer: 'Sari Dewi', address: 'Jl. Thamrin No. 90, Jakarta Pusat', courier: 'Ahmad', status: 'Siap Kirim'}

];

// Authentication functions

function togglePassword() {

const passwordInput = document.getElementById('loginPassword');

const eyeIcon = document.getElementById('eyeIcon');

if (passwordInput.type === 'password') {

passwordInput.type = 'text';

eyeIcon.innerHTML = `

} else {

passwordInput.type = 'password';

eyeIcon.innerHTML = `

<path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'975a64b837454536',t:'MTc1NjI4NTM4Mi4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script>

Search This Blog

FP Digital Printing

Comments

Post a Comment