Merge pull request #32 from PetrusAriaa/dev

docs: enhance documentation
PetrusAriaa · Nov 16, 2023 · b7820af · b7820af
2 parents e53eadd + f9595f9
commit b7820af
Show file tree

Hide file tree

Showing 25 changed files with 258 additions and 25 deletions.
diff --git a/docs/admin/add.html b/docs/admin/add.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <title>Document</title>
+</head>
+
+<body class="p-20">
+    <header>
+        <h3 class="text-sm font-semibold text-amber-500">Admin</h3>
+    </header>
+    <h1 class="text-4xl font-bold text-slate-800 py-4">Menambahkan admin baru</h1>
+    <div class="my-2">
+        <p>Pada side navigation bar pilih icon (<span><img
+                    src="../assets/admin-icon.png" class="inline w-8" alt="admin-icon.png" /></span>) untuk
+            mengarahkan ke halaman Manage Admin. Perlu diketahui bahwa hanya admin dengan role <b>SuperUser</b> yang memiliki akses 
+            untuk menambah atau menghapus admin. Admin lainnya hanya memiliki akses untuk melihat list admin yang ada. Pada Datagrid 
+            ditampilkan username dan password yang sudah terenkripsi.</p>
+        <div class="flex flex-col items-center py-10">
+            <div class="relative w-[35rem]">
+                <img src="../assets/admin.png" class="object-cover" alt="admin.png">
+            </div>
+            <label class="italic text-slate-400 max-w-sm text-center">Gambar: Halaman Manage Admin</label>
+        </div>
+    </div>
+    <div class="my-2">
+        <p>Isikan Username dan password dari admin baru. Kemudian tekan tombol <b>Add</b> untuk mengkonfirmasi
+            penambahan permintaan layanan baru. Tunggu hingga proses selesai.</p>
+        <div class="flex flex-col items-center py-10">
+            <div class="relative w-[35rem]">
+                <img src="../assets/admin-add-01.png" class="object-cover" alt="admin-add-01.png">
+            </div>
+            <label class="italic text-slate-400 max-w-sm text-center">Gambar: Mengisi username dan password admin baru</label>
+        </div>
+        <div class="flex flex-col items-center py-10">
+            <div class="relative w-[35rem]">
+                <img src="../assets/admin-add-02.png" class="object-cover" alt="admin-add-02.png">
+            </div>
+            <label class="italic text-slate-400 max-w-sm text-center">Gambar: Admin berhasil ditambahkan</label>
+        </div>
+    </div>
+    <div class="my-2">
+        <p>Setelah proses selesai dilakukan, DataGrid kembali melakukan fetch untuk memperbarui data admin</p>
+        <div class="flex flex-col items-center py-10">
+            <div class="relative w-[35rem]">
+                <img src="../assets/admin-add-03.png" class="object-cover" alt="admin-add-03.png">
+            </div>
+            <label class="italic text-slate-400 max-w-sm text-center">Gambar: Data admin terbaru</label>
+        </div>
+    </div>
+</body>
+
+</html>
diff --git a/docs/admin/delete.html b/docs/admin/delete.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <title>Document</title>
+</head>
+
+<body class="p-20">
+    <header>
+        <h3 class="text-sm font-semibold text-amber-500">Admin</h3>
+    </header>
+    <h1 class="text-4xl font-bold text-slate-800 py-4">Menghapus admin dari daftar</h1>
+    <div class="my-2">
+        <p>Perlu diketahui bahwa hanya admin dengan role <b>SuperUser</b> yang memiliki akses
+        untuk menambah atau menghapus admin. Admin lainnya hanya memiliki akses untuk melihat list admin yang ada. Pada Datagrid
+        ditampilkan username dan password yang sudah terenkripsi.</p>
+        <p class="my-2">Pilih salah satu admin pada DataGrid yang akan dihapus. Username dan password akan
+            tertampil pada input field. Password juga akan diberikan mask.
+        </p>
+        <div class="flex flex-col items-center py-10">
+            <div class="relative w-[35rem]">
+                <img src="../assets/admin-delete-01.png" class="object-cover" alt="admin-delete-01.png">
+            </div>
+            <label class="italic text-slate-400 max-w-sm text-center">Gambar: Memilih admin dari datagrid</label>
+        </div>
+    </div>
+    <div class="my-2">
+        <p>Anda dapat menekan tombol <b>Cancel</b> untuk membatalkan operasi. Tekan tombol <b>Delete</b> untuk menghapus admin. Tunggu hingga proses selesai.</p>
+        <div class="flex flex-col items-center py-10">
+            <div class="relative w-[35rem]">
+                <img src="../assets/admin-delete-02.png" class="object-cover" alt="admin-delete-02.png">
+            </div>
+            <label class="italic text-slate-400 max-w-sm text-center">Gambar: Konfirmasi menghapus admin</label>
+        </div>
+    </div>
+</body>
+
+</html>
diff --git a/docs/api.html b/docs/api.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <title>Document</title>
+</head>
+<body>
+    <div class="flex flex-col items-center h-screen justify-center gap-8 px-10">
+        <img src="assets/logo-full.png" class="w-44" />
+        <h1 class="text-center text-2xl">Halaman dalam pengerjaan.</h1>
+    </div>
+</body>
+</html>
diff --git a/docs/assets/admin-add-01.png b/docs/assets/admin-add-01.png
diff --git a/docs/assets/admin-add-02.png b/docs/assets/admin-add-02.png
diff --git a/docs/assets/admin-add-03.png b/docs/assets/admin-add-03.png
diff --git a/docs/assets/admin-delete-01.png b/docs/assets/admin-delete-01.png
diff --git a/docs/assets/admin-delete-02.png b/docs/assets/admin-delete-02.png
diff --git a/docs/assets/admin-icon.png b/docs/assets/admin-icon.png
diff --git a/docs/assets/admin.png b/docs/assets/admin.png
diff --git a/docs/assets/logo-full.png b/docs/assets/logo-full.png
diff --git a/docs/assets/logo-kotak.png b/docs/assets/logo-kotak.png
diff --git a/docs/assets/partner-add-01.png b/docs/assets/partner-add-01.png
diff --git a/docs/assets/partner-add-02.png b/docs/assets/partner-add-02.png
diff --git a/docs/assets/partner-delete-01.png b/docs/assets/partner-delete-01.png
diff --git a/docs/assets/partner-delete-02.png b/docs/assets/partner-delete-02.png
diff --git a/docs/assets/partner-edit-01.png b/docs/assets/partner-edit-01.png
diff --git a/docs/assets/partner-edit-02.png b/docs/assets/partner-edit-02.png
diff --git a/docs/assets/partner-icon.png b/docs/assets/partner-icon.png
diff --git a/docs/index.html b/docs/index.html
@@ -9,28 +9,34 @@
     <script src="script.js"></script>
 </head>
 
-<body class="flex flex-row h-full w-full">
-    <div id="sidebar" class="bg-slate-50 flex flex-col w-1/5 h-full fixed text-lg px-8 py-12">
-        <a href="/docs" class="px-3 py-1 border-l-2 hover:border-amber-500 hover:text-amber-500 transition-color duration-200">Home</a>
-        <a href="#about" onclick="showPage('about.html')" class="px-3 py-1 border-l-2 hover:border-amber-500 hover:text-amber-500 transition-color duration-200">About</a>
-        <a href="#instalasi" onclick="showPage('installation.html')" class="px-3 py-1 border-l-2 hover:border-amber-500 hover:text-amber-500 transition-color duration-200">Installation</a>
-        <p class="px-3 py-1 font-semibold text-xl mt-4">Usage</p>
-        <a href="#api-demo" onclick="showPage('installation.html')" class="px-3 py-1 border-l-2 hover:border-amber-500 hover:text-amber-500 transition-color duration-200">API Demo</a>
-        <a href="#login" onclick="showPage('login.html')" class="px-3 py-1 border-l-2 hover:border-amber-500 hover:text-amber-500 transition-color duration-200">Login</a>
-        <a href="#access-request" onclick="showPage('request/access.html')" class="px-3 py-1 border-l-2 hover:border-amber-500 hover:text-amber-500 transition-color duration-200">Access requests</a>
-        <a href="#add-request" onclick="showPage('request/add.html')" class="px-3 py-1 border-l-2 hover:border-amber-500 hover:text-amber-500 transition-color duration-200">Add new request</a>
-        <a href="#edit-request" onclick="showPage('request/edit.html')" class="px-3 py-1 border-l-2 hover:border-amber-500 hover:text-amber-500 transition-color duration-200">Edit active requests</a>
-        <a href="#delete-request" onclick="showPage('request/delete.html')" class="px-3 py-1 border-l-2 hover:border-amber-500 hover:text-amber-500 transition-color duration-200">Delete requests</a>
-        <a href="#finish-request" onclick="showPage('request/done.html')" class="px-3 py-1 border-l-2 hover:border-amber-500 hover:text-amber-500 transition-color duration-200">Mark request as done</a>
-        <a href="#add-admin" onclick="showPage('installation.html')" class="px-3 py-1 border-l-2 hover:border-amber-500 hover:text-amber-500 transition-color duration-200">Add new admin</a>
-        <a href="#delete-admin" onclick="showPage('installation.html')" class="px-3 py-1 border-l-2 hover:border-amber-500 hover:text-amber-500 transition-color duration-200">Delete admin</a>
-        <a href="#add-partner" onclick="showPage('installation.html')" class="px-3 py-1 border-l-2 hover:border-amber-500 hover:text-amber-500 transition-color duration-200">Add new partner</a>
-        <a href="#edit-partner" onclick="showPage('installation.html')" class="px-3 py-1 border-l-2 hover:border-amber-500 hover:text-amber-500 transition-color duration-200">Edit partner information</a>
-        <a href="#delete-partner" onclick="showPage('installation.html')" class="px-3 py-1 border-l-2 hover:border-amber-500 hover:text-amber-500 transition-color duration-200">Delete partner</a>
+<body>
+    <div class="flex flex-col md:hidden items-center h-screen justify-center gap-8 px-10">
+        <img src="assets/logo-full.png" class="w-44"/>
+        <h1 class="text-center text-2xl">Maaf. Harap gunakan layar lebih lebar untuk mengakses laman ini.</h1>
     </div>
-
-    <div id="content" class="grow flex justify-end">
-        <iframe id="content-iframe" src="home.html" class="w-4/5 min-h-screen"/>
+    <div class="flex flex-row h-full w-full hidden md:flex">
+        <div id="sidebar" class="bg-slate-50 flex flex-col w-1/5 h-full fixed text-lg px-8 py-12">
+            <a href="/docs" class="px-3 py-1 border-l-2 hover:border-amber-500 hover:text-amber-500 transition-color duration-200">Home</a>
+            <a href="#about" onclick="showPage('about.html')" class="px-3 py-1 border-l-2 hover:border-amber-500 hover:text-amber-500 transition-color duration-200">About</a>
+            <a href="#instalasi" onclick="showPage('installation.html')" class="px-3 py-1 border-l-2 hover:border-amber-500 hover:text-amber-500 transition-color duration-200">Installation</a>
+            <p class="px-3 py-1 font-semibold text-xl mt-4">Usage</p>
+            <a href="#api-demo" onclick="showPage('api.html')" class="px-3 py-1 border-l-2 hover:border-amber-500 hover:text-amber-500 transition-color duration-200">API Demo</a>
+            <a href="#login" onclick="showPage('login.html')" class="px-3 py-1 border-l-2 hover:border-amber-500 hover:text-amber-500 transition-color duration-200">Login</a>
+            <a href="#access-request" onclick="showPage('request/access.html')" class="px-3 py-1 border-l-2 hover:border-amber-500 hover:text-amber-500 transition-color duration-200">Access requests</a>
+            <a href="#add-request" onclick="showPage('request/add.html')" class="px-3 py-1 border-l-2 hover:border-amber-500 hover:text-amber-500 transition-color duration-200">Add new request</a>
+            <a href="#edit-request" onclick="showPage('request/edit.html')" class="px-3 py-1 border-l-2 hover:border-amber-500 hover:text-amber-500 transition-color duration-200">Edit active requests</a>
+            <a href="#delete-request" onclick="showPage('request/delete.html')" class="px-3 py-1 border-l-2 hover:border-amber-500 hover:text-amber-500 transition-color duration-200">Delete requests</a>
+            <a href="#finish-request" onclick="showPage('request/done.html')" class="px-3 py-1 border-l-2 hover:border-amber-500 hover:text-amber-500 transition-color duration-200">Mark request as done</a>
+            <a href="#add-admin" onclick="showPage('admin/add.html')" class="px-3 py-1 border-l-2 hover:border-amber-500 hover:text-amber-500 transition-color duration-200">Add new admin</a>
+            <a href="#delete-admin" onclick="showPage('admin/delete.html')" class="px-3 py-1 border-l-2 hover:border-amber-500 hover:text-amber-500 transition-color duration-200">Delete admin</a>
+            <a href="#add-partner" onclick="showPage('partner/add.html')" class="px-3 py-1 border-l-2 hover:border-amber-500 hover:text-amber-500 transition-color duration-200">Add new partner</a>
+            <a href="#edit-partner" onclick="showPage('partner/edit.html')" class="px-3 py-1 border-l-2 hover:border-amber-500 hover:text-amber-500 transition-color duration-200">Edit partner information</a>
+            <a href="#delete-partner" onclick="showPage('partner/delete.html')" class="px-3 py-1 border-l-2 hover:border-amber-500 hover:text-amber-500 transition-color duration-200">Delete partner</a>
+        </div>
+
+        <div id="content" class="grow flex justify-end">
+            <iframe id="content-iframe" src="home.html" class="w-4/5 min-h-screen"/>
+        </div>
     </div>
 
 </body>

diff --git a/docs/partner/add.html b/docs/partner/add.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <title>Document</title>
+</head>
+
+<body class="p-20">
+    <header>
+        <h3 class="text-sm font-semibold text-amber-500">Partner</h3>
+    </header>
+    <h1 class="text-4xl font-bold text-slate-800 py-4">Menambahkan partner baru</h1>
+    <div class="my-2">
+        <p>Pada side navigation bar pilih icon (<span><img src="../assets/partner-icon.png" class="inline w-8"
+                    alt="partner-icon.png" /></span>) untuk mengarahkan ke halaman 
+                    Manage Partner. Pada Datagrid ditampilkan data partner yang pernah ditambahkan.</p>
+        <div class="flex flex-col items-center py-10">
+            <div class="relative w-[35rem]">
+                <img src="../assets/partner-add-01.png" class="object-cover" alt="partner-add-01png">
+            </div>
+            <label class="italic text-slate-400 max-w-sm text-center">Gambar: Menambahkan partner baru</label>
+        </div>
+    </div>
+    <div class="my-2">
+        <p>Isikan data partner baru. Kemudian tekan tombol <b>Add</b> untuk konfirmasi
+            penambahan partner. Tunggu hingga proses selesai.</p>
+        <div class="flex flex-col items-center py-10">
+            <div class="relative w-[35rem]">
+                <img src="../assets/partner-add-02.png" class="object-cover" alt="partner-add-02.png">
+            </div>
+            <label class="italic text-slate-400 max-w-sm text-center">Gambar: Penambahan partner baru sukses</label>
+        </div>
+    </div>
+</body>
+
+</html>
diff --git a/docs/partner/delete.html b/docs/partner/delete.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <title>Document</title>
+</head>
+
+<body class="p-20">
+    <header>
+        <h3 class="text-sm font-semibold text-amber-500">Partner</h3>
+    </header>
+    <h1 class="text-4xl font-bold text-slate-800 py-4">Menghapus partner dari daftar</h1>
+    <div class="my-2">
+        <p class="my-2">Pilih salah satu partner pada DataGrid yang akan dihapus. Data partner akan
+            tertampil pada input field.
+        </p>
+        <div class="flex flex-col items-center py-10">
+            <div class="relative w-[35rem]">
+                <img src="../assets/partner-delete-01.png" class="object-cover" alt="partner-delete-01.png">
+            </div>
+            <label class="italic text-slate-400 max-w-sm text-center">Gambar: Memilih partner dari datagrid</label>
+        </div>
+    </div>
+    <div class="my-2">
+        <p>Anda dapat menekan tombol <b>Cancel</b> untuk membatalkan operasi. Tekan tombol <b>Delete</b> untuk menghapus
+            partner. Tunggu hingga proses selesai.</p>
+        <div class="flex flex-col items-center py-10">
+            <div class="relative w-[35rem]">
+                <img src="../assets/partner-delete-02.png" class="object-cover" alt="partner-delete-02.png">
+            </div>
+            <label class="italic text-slate-400 max-w-sm text-center">Gambar: Konfirmasi menghapus partner</label>
+        </div>
+    </div>
+</body>
+
+</html>
diff --git a/docs/partner/edit.html b/docs/partner/edit.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <title>Document</title>
+</head>
+
+<body class="p-20">
+    <header>
+        <h3 class="text-sm font-semibold text-amber-500">Partner</h3>
+    </header>
+    <h1 class="text-4xl font-bold text-slate-800 py-4">Mengedit informasi partner dari daftar</h1>
+    <div class="my-2">
+        <p class="my-2">Pilih salah satu partner pada DataGrid yang akan diedit. Data partner akan
+            tertampil pada input field.
+        </p>
+        <p class="my-2">Lakukan perubahan pada field yang diinginkan. Jika anda hendak membatalkan perubahan tekan tombol <b>Cancel</b>.
+            Tekan <b>Edit</b> untuk konfirmasi dan menyimpan perubahan. Tunggu hingga proses selesai dilakukan
+        </p>
+        <div class="flex flex-col items-center py-10">
+            <div class="relative w-[35rem]">
+                <img src="../assets/partner-edit-01.png" class="object-cover" alt="partner-edit-01.png">
+            </div>
+            <label class="italic text-slate-400 max-w-sm text-center">Gambar: Memilih partner dari datagrid</label>
+        </div>
+        <div class="flex flex-col items-center py-10">
+            <div class="relative w-[35rem]">
+                <img src="../assets/partner-edit-02.png" class="object-cover" alt="partner-edit-02.png">
+            </div>
+            <label class="italic text-slate-400 max-w-sm text-center">Gambar: Konfirmasi perubahan</label>
+        </div>
+    </div>
+</body>
+
+</html>
diff --git a/docs/request/delete.html b/docs/request/delete.html
@@ -21,7 +21,7 @@ <h1 class="text-4xl font-bold text-slate-800 py-4">Menghapus permintaan layanan<
             <div class="relative w-[35rem]">
                 <img src="../assets/request-delete-01.png" class="object-cover" alt="request-delete-01.png">
             </div>
-            <label class="italic text-slate-400 max-w-sm text-center">Gambar: Konfirmasi penghapusn data permintaan layanan</label>
+            <label class="italic text-slate-400 max-w-sm text-center">Gambar: Konfirmasi penghapusan data permintaan layanan</label>
         </div>
     </div>
     <div class="my-2">

diff --git a/docs/request/done.html b/docs/request/done.html
@@ -21,8 +21,7 @@ <h1 class="text-4xl font-bold text-slate-800 py-4">Mengubah status permintaan la
             <div class="relative w-[35rem]">
                 <img src="../assets/request-done-01.png" class="object-cover" alt="request-done-01.png">
             </div>
-            <label class="italic text-slate-400 max-w-sm text-center">Gambar: Konfirmasi penghapusn data permintaan
-                layanan</label>
+            <label class="italic text-slate-400 max-w-sm text-center">Gambar: Konfirmasi menyelesaikan layanan</label>
         </div>
     </div>
     <div class="my-2">
@@ -31,7 +30,7 @@ <h1 class="text-4xl font-bold text-slate-800 py-4">Mengubah status permintaan la
             <div class="relative w-[35rem]">
                 <img src="../assets/request-done-02.png" class="object-cover" alt="request-done-02.png">
             </div>
-            <label class="italic text-slate-400 max-w-sm text-center">Gambar: Data berhasil dihapus</label>
+            <label class="italic text-slate-400 max-w-sm text-center">Gambar: Layanan selesai</label>
         </div>
     </div>
     <div class="my-2">