slicing form-keuangan
This commit is contained in:
273
assets/mcu/formKeuangan.html
Normal file
273
assets/mcu/formKeuangan.html
Normal file
@@ -0,0 +1,273 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<!--begin::Head-->
|
||||
<head>
|
||||
<base href="../" />
|
||||
<meta charset="utf-8" />
|
||||
<title>Company Portal | { title }</title>
|
||||
<meta name="description" content="Company Portal" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1, shrink-to-fit=no"
|
||||
/>
|
||||
<!--begin::Fonts-->
|
||||
<link rel="stylesheet" href="assets/css/googlefont/poppins.css" />
|
||||
<!--end::Fonts-->
|
||||
<!--begin::Page Custom Styles(used by this page)-->
|
||||
<link
|
||||
href="assets/css/pages/login/login-1.css"
|
||||
rel="stylesheet"
|
||||
type="text/css"
|
||||
/>
|
||||
<!--end::Page Custom Styles-->
|
||||
<!--begin::Global Theme Styles(used by all pages)-->
|
||||
<link
|
||||
href="assets/plugins/global/plugins.bundle.css"
|
||||
rel="stylesheet"
|
||||
type="text/css"
|
||||
/>
|
||||
<link
|
||||
href="assets/plugins/custom/prismjs/prismjs.bundle.css"
|
||||
rel="stylesheet"
|
||||
type="text/css"
|
||||
/>
|
||||
<link href="assets/css/style.bundle.css" rel="stylesheet" type="text/css" />
|
||||
<!--end::Global Theme Styles-->
|
||||
<!--begin::Layout Themes(used by all pages)-->
|
||||
<link
|
||||
href="assets/css/themes/layout/header/base/light.css"
|
||||
rel="stylesheet"
|
||||
type="text/css"
|
||||
/>
|
||||
<link
|
||||
href="assets/css/themes/layout/header/menu/light.css"
|
||||
rel="stylesheet"
|
||||
type="text/css"
|
||||
/>
|
||||
<link
|
||||
href="assets/css/themes/layout/brand/dark.css"
|
||||
rel="stylesheet"
|
||||
type="text/css"
|
||||
/>
|
||||
<link
|
||||
href="assets/css/themes/layout/aside/dark.css"
|
||||
rel="stylesheet"
|
||||
type="text/css"
|
||||
/>
|
||||
<!--end::Layout Themes-->
|
||||
<link
|
||||
rel="shortcut icon"
|
||||
href="asset-corporate-portal/media/logo/logo-small.jpg"
|
||||
/>
|
||||
<!--end::Layout Themes SAS-->
|
||||
<link
|
||||
href="asset-corporate-portal/css/sas.bundle.css"
|
||||
rel="stylesheet"
|
||||
type="text/css"
|
||||
/>
|
||||
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/css/bootstrap-select.min.css"
|
||||
/>
|
||||
|
||||
<style>
|
||||
.filter-option-inner-inner {
|
||||
margin-top: 1.2vh;
|
||||
color: var(--text-disabled);
|
||||
}
|
||||
.bootstrap-select > .dropdown-toggle.bs-placeholder.btn {
|
||||
color: var(--text-disabled);
|
||||
}
|
||||
|
||||
.bootstrap-select.btn-group .dropdown-menu {
|
||||
min-width: 100%;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
position: sticky;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
transform: translate3d(0px, 0px, 0px) !important;
|
||||
}
|
||||
|
||||
/* mik */
|
||||
.input-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.input-label {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
transform: translateY(-50%);
|
||||
pointer-events: none;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.input-field:not(:placeholder-shown) + .input-label {
|
||||
top: 50%;
|
||||
font-size: 12px;
|
||||
color: var(--secondary-hover);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<!--end::Head-->
|
||||
<!--begin::Body-->
|
||||
<body
|
||||
id="kt_body"
|
||||
class="bg-white header-fixed header-mobile-fixed subheader-enabled subheader-fixed subheader-mobile-fixed aside-enabled aside-fixed aside-minimize-hoverable page-loading"
|
||||
>
|
||||
<!--begin::Main-->
|
||||
|
||||
<div class="wrapperx p-5 h-100">
|
||||
|
||||
<!--begin::Row 1-->
|
||||
<div class="form-row">
|
||||
<div class="col-3">
|
||||
<div class="container px-15">
|
||||
<div
|
||||
class="d-flex flex-column bg-primary-transparent rounded p-4 m-2 shadow"
|
||||
>
|
||||
<h4>Orders</h4>
|
||||
<h1 class="font-weight-bolder ml-auto">120.000.000</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="container px-15">
|
||||
<div
|
||||
class="d-flex flex-column bg-warning-transparent rounded p-4 m-2 shadow"
|
||||
>
|
||||
<h4>Tagihan</h4>
|
||||
<h1 class="font-weight-bolder ml-auto">85.000.000</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="container px-15">
|
||||
<div
|
||||
class="d-flex flex-column bg-success-transparent rounded p-4 m-2 shadow"
|
||||
>
|
||||
<h4>Pelunasan</h4>
|
||||
<h1 class="font-weight-bolder ml-auto">55.000.000</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="container px-15">
|
||||
<div
|
||||
class="d-flex flex-column bg-danger-transparent rounded p-4 m-2 shadow"
|
||||
>
|
||||
<h4>Hutang</h4>
|
||||
<h1 class="font-weight-bolder ml-auto">55.000.000</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end::Row 1-->
|
||||
</div>
|
||||
<!-- begin::Row 2 -->
|
||||
<div class="form-row mt-15">
|
||||
<div class="col">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered">
|
||||
<thead>
|
||||
<tr >
|
||||
<th scope="col" class="text-center text-black col-5" colspan="3">Tagihan</th>
|
||||
<th scope="col" class="text-center text-black col-4" colspan="2">Pelunasan</th>
|
||||
<th scope="col" class="text-center text-black col-3" rowspan="2">
|
||||
<div class="d-flex justify-content-center align-items-center h-100">
|
||||
<h3>Sisa</h3>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="col" class="text-center text-black">No/Tgl</th>
|
||||
<th scope="col" class="text-center text-black">Tgl Jatuh Tempo</th>
|
||||
<th scope="col" class="text-center text-black">Jumlah</th>
|
||||
<th scope="col" class="text-center text-black">No/Tgl</th>
|
||||
<th scope="col" class="text-center text-black">Jumlah</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="text-center" rowspan="2">T/103/200/XYZ 20 MARET 2024</td>
|
||||
<td class="text-center" rowspan="2">20 MARET 2024</td>
|
||||
<td class="text-center" rowspan="2">20.000.000</td>
|
||||
<td class="text-center">T/103/200/XYZ 20 MARET 2024</td>
|
||||
<td class="text-center">10.000.000</td>
|
||||
<td class="text-center" rowspan="2">5.000.000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-center">T/103/200/XYZ 20 MARET 2024</td>
|
||||
<td class="text-center">5.000.000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-center" rowspan="2">T/103/200/XYZ 20 MARET 2024</td>
|
||||
<td class="text-center" rowspan="2">20 MARET 2024</td>
|
||||
<td class="text-center" rowspan="2">20.000.000</td>
|
||||
<td class="text-center">T/103/200/XYZ 20 MARET 2024</td>
|
||||
<td class="text-center">10.000.000</td>
|
||||
<td class="text-center" rowspan="2">5.000.000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-center">T/103/200/XYZ 20 MARET 2024</td>
|
||||
<td class="text-center">5.000.000</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end::Row 2 -->
|
||||
|
||||
|
||||
|
||||
|
||||
<!--end::Main-->
|
||||
<script src="asset-corporate-portal/js/ktappsetting.js"></script>
|
||||
<!-- iconify -->
|
||||
<script src="assets/js/iconify/iconify.min.js"></script>
|
||||
<!--end::Global Config-->
|
||||
<!--begin::Global Theme Bundle(used by all pages)-->
|
||||
<script src="assets/plugins/global/plugins.bundle.js"></script>
|
||||
<script src="assets/plugins/custom/prismjs/prismjs.bundle.js"></script>
|
||||
<script src="assets/js/scripts.bundle.js"></script>
|
||||
<script src="assets/js/pages/crud/forms/widgets/bootstrap-datepicker.js"></script>
|
||||
|
||||
<script>
|
||||
function ShowLoading() {
|
||||
document
|
||||
.getElementById("demo")
|
||||
.setAttribute("style", "display:block !important;");
|
||||
document
|
||||
.getElementById("a")
|
||||
.setAttribute("style", "display:none !important;");
|
||||
}
|
||||
function ShowForm() {
|
||||
document
|
||||
.getElementById("demo")
|
||||
.setAttribute("style", "display:none !important;");
|
||||
document
|
||||
.getElementById("a")
|
||||
.setAttribute("style", "display:block !important;;");
|
||||
}
|
||||
|
||||
$(document).ready(function () {
|
||||
// $(".selectpicker").selectpicker();
|
||||
$(".selectpicker").selectpicker({
|
||||
dropupAuto: false,
|
||||
});
|
||||
$("#datepicker").datepicker({
|
||||
format: "dd/mm/yyyy",
|
||||
});
|
||||
$("#calendar-icon").click(function () {
|
||||
$("#datepicker").datepicker("show");
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<!--end::Global Theme Bundle-->
|
||||
|
||||
<!--end::Page Scripts-->
|
||||
</body>
|
||||
<!--end::Body-->
|
||||
</html>
|
||||
Reference in New Issue
Block a user