coba

cobapeminjaman/app/Http/Controllers/CRUD/AlatController.php

@@ -4,8 +4,9 @@
 namespace App\Http\Controllers\CRUD;
 
 use Illuminate\Http\Request;
-use App\Models\Alat;
 use Illuminate\Support\Facades\Storage;
+use App\Models\Alat;
+use App\Models\JenisAlat;
 use App\Http\Controllers\Controller;
 use Illuminate\Support\Facades\File;
 use Illuminate\Support\Facades\Validator;
@@ -26,6 +27,7 @@ class AlatController extends Controller
             'kondisi' => 'required',
             'id_jenis_alat' => 'required',
             'id_ruang' => 'required',
+            'tahun' => 'required',
         ]);
 
         if ($validator->fails()) {
@@ -37,8 +39,16 @@ class AlatController extends Controller
             'kondisi' => $request->kondisi,
             'id_jenis_alat' => $request->id_jenis_alat,
             'id_ruang' => $request->id_ruang,
+            'tahun' => $request->tahun,
         ]);
 
+        $jenisAlat = JenisAlat::find($request->id_jenis_alat);
+        if ($request->kondisi == 'rusak') {
+        if ($jenisAlat->stok > 0) {
+            $jenisAlat->decrement('stok');
+        }
+    }
+
         return response()->json(['message' => 'Alat berhasil ditambahkan']);
 
     }
@@ -63,6 +73,7 @@ class AlatController extends Controller
                 'kondisi' => 'required',
                 'id_jenis_alat' => 'required', 
                 'id_ruang' => 'required', 
+                'tahun' => 'required', 
             ]);
 
             if ($validator->fails()) {
@@ -74,10 +85,18 @@ class AlatController extends Controller
                 'kondisi' => $request->kondisi,
                 'id_jenis_alat' => $request->id_jenis_alat,
                 'id_ruang' => $request->id_ruang,
+                'tahun' => $request->tahun,
             ];
 
             $db_alat->update($data);
 
+            $jenisAlat = JenisAlat::find($request->id_jenis_alat);
+            if ($request->kondisi == 'rusak') {
+                if ($jenisAlat->stok > 0) {
+                    $jenisAlat->decrement('stok');
+                }
+            }
+
             return response()->json(['message' => 'Alat berhasil diupdate'], 200);
     }
 

fe-sarpras/package-lock.json

@@ -12,7 +12,10 @@
         "@fortawesome/fontawesome-svg-core": "^6.5.2",
         "@fortawesome/free-solid-svg-icons": "^6.5.2",
         "@fortawesome/vue-fontawesome": "^3.0.8",
+<<<<<<< HEAD
         "@popperjs/core": "^2.11.8",
+=======
+>>>>>>> dhilaaaaa
         "axios": "^1.6.8",
         "bootstrap": "^5.3.3",
         "bootstrap-vue": "^2.23.1",

fe-sarpras/package.json

@@ -12,7 +12,10 @@
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
     "@fortawesome/vue-fontawesome": "^3.0.8",
+<<<<<<< HEAD
     "@popperjs/core": "^2.11.8",
+=======
+>>>>>>> dhilaaaaa
     "axios": "^1.6.8",
     "bootstrap": "^5.3.3",
     "bootstrap-vue": "^2.23.1",

fe-sarpras/public/index.html

@@ -12,14 +12,25 @@
     <title>APLAB</title>
 
     <!-- Custom fonts for this template-->
+<<<<<<< HEAD
     <link href="assets/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
+=======
+    <link href="../../assets/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
+>>>>>>> dhilaaaaa
     <link
         href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
         rel="stylesheet">
 
     <!-- Custom styles for this template-->
+<<<<<<< HEAD
     <link href="assets/css/sb-admin-2.min.css" rel="stylesheet">
 
+=======
+    <link href="../../assets/css/sb-admin-2.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+>>>>>>> dhilaaaaa
 </head>
 
 <body>
@@ -28,6 +39,11 @@
       </noscript>
       <div id="app"></div>
     <!-- Bootstrap core JavaScript-->
+<<<<<<< HEAD
+=======
+    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
+  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
+>>>>>>> dhilaaaaa
     <script src="../../assets/vendor/jquery/jquery.min.js"></script>
     <script src="../../assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
     <script src="../../assets/vendor/jquery-easing/jquery.easing.min.js"></script>

fe-sarpras/public/index__.html

+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

fe-sarpras/src/App.vue

@@ -14,6 +14,7 @@ export default {
 </script>
 
 <style>
+@import '@fortawesome/fontawesome-free/css/all.css';
 /* Gaya CSS untuk App.vue jika diperlukan */
 @import "~bootstrap/dist/css/bootstrap.css";
 </style>

fe-sarpras/src/assets/js/sb-admin-2.js

@@ -7,21 +7,33 @@
     $(".sidebar").toggleClass("toggled");
     if ($(".sidebar").hasClass("toggled")) {
       $('.sidebar .collapse').collapse('hide');
+<<<<<<< HEAD
     }
+=======
+    };
+>>>>>>> dhilaaaaa
   });
 
   // Close any open menu accordions when window is resized below 768px
   $(window).resize(function() {
     if ($(window).width() < 768) {
       $('.sidebar .collapse').collapse('hide');
+<<<<<<< HEAD
     }
+=======
+    };
+>>>>>>> dhilaaaaa
     
     // Toggle the side navigation when window is resized below 480px
     if ($(window).width() < 480 && !$(".sidebar").hasClass("toggled")) {
       $("body").addClass("sidebar-toggled");
       $(".sidebar").addClass("toggled");
       $('.sidebar .collapse').collapse('hide');
+<<<<<<< HEAD
     }
+=======
+    };
+>>>>>>> dhilaaaaa
   });
 
   // Prevent the content wrapper from scrolling when the fixed side navigation hovered over

fe-sarpras/src/assets/vendor/chart.js/Chart.bundle.js

@@ -17753,7 +17753,11 @@ var moment = createCommonjsModule(function (module, exports) {
             } else {
                 duration.milliseconds = input;
             }
+<<<<<<< HEAD
         } else if (match = aspNetRegex.exec(input)) {
+=======
+        } else if (!!(match = aspNetRegex.exec(input))) {
+>>>>>>> dhilaaaaa
             sign = (match[1] === '-') ? -1 : 1;
             duration = {
                 y  : 0,
@@ -17763,7 +17767,11 @@ var moment = createCommonjsModule(function (module, exports) {
                 s  : toInt(match[SECOND])                       * sign,
                 ms : toInt(absRound(match[MILLISECOND] * 1000)) * sign // the millisecond decimal point is included in the match
             };
+<<<<<<< HEAD
         } else if (match = isoRegex.exec(input)) {
+=======
+        } else if (!!(match = isoRegex.exec(input))) {
+>>>>>>> dhilaaaaa
             sign = (match[1] === '-') ? -1 : 1;
             duration = {
                 y : parseIso(match[2], sign),

fe-sarpras/src/assets/vendor/fontawesome-free/js/conflict-detection.js

@@ -629,7 +629,11 @@
             console.info(progressIndicator);
           }
 
+<<<<<<< HEAD
           if (result) {
+=======
+          if (!!result) {
+>>>>>>> dhilaaaaa
             // eslint-disable-line no-extra-boolean-cast
             resolve(result);
           } else {

fe-sarpras/src/components/CRUD/Alat/AddAlat.vue

 <template>
-  <div class="container mt-5">
-    <div class="row">
-      <div class="col-md-12">
-        <div class="card border-0 rounded shadow">
-          <div class="card-body">
-            <h4>TAMBAH ALAT</h4>
-            <hr />
-
-            <form @submit.prevent="store">
-
-              <div class="form-group">
-                <label for="no_inventaris" class="font-weight-bold">No Inventaris</label>
-                <input
-                  type="text"
-                  class="form-control"
-                  v-model="post.no_inventaris"
-                  placeholder="Masukkan nomor inventaris alat"
-                />
-
-                <div v-if="validation.no_inventaris" class="mt-2 alert alert-danger">
-                  {{ validation.no_inventaris[0] }}
-                </div>
-              </div>
-
-              <div class="form-group">
-                <label for="kondisi" class="font-weight-bold">Kondisi</label>
-                <input
-                  type="text"
-                  class="form-control"
-                  v-model="post.kondisi"
-                  placeholder="Masukkan kondisi alat"
-                />
-
-                <div v-if="validation.kondisi" class="mt-2 alert alert-danger">
-                  {{ validation.kondisi[0] }}
-                </div>
+  <div id="wrapper">
+    <SidebarAdmintes />
+    <div id="content-wrapper" class="service_section layout_padding">
+      <Navbar />
+      <div class="container mt-5">
+        <div class="row">
+          <div class="col-md-12">
+            <div class="card border-0 rounded shadow">
+              <div class="card-body">
+                <h4>TAMBAH ALAT</h4>
+                <hr />
+    
+                <form @submit.prevent="store">
+    
+                  <div class="form-group">
+                    <label for="no_inventaris" class="font-weight-bold">No Inventaris</label>
+                    <input
+                      type="text"
+                      class="form-control"
+                      v-model="post.no_inventaris"
+                      placeholder="Masukkan nomor inventaris alat"
+                    />
+    
+                    <div v-if="validation.no_inventaris" class="mt-2 alert alert-danger">
+                      {{ validation.no_inventaris[0] }}
+                    </div>
+                  </div>
+    
+                  <div class="form-group">
+                    <label for="kondisi" class="font-weight-bold">Kondisi</label>
+                    <div class="form-check">
+                      <input
+                        class="form-check-input"
+                        type="radio"
+                        name="kondisi"
+                        id="bagus"
+                        value="bagus"
+                        v-model="post.kondisi"
+                      />
+                      <label class="form-check-label" for="bagus">Bagus</label>
+                    </div>
+                    <div class="form-check">
+                      <input
+                        class="form-check-input"
+                        type="radio"
+                        name="kondisi"
+                        id="rusak"
+                        value="rusak"
+                        v-model="post.kondisi"
+                      />
+                      <label class="form-check-label" for="rusak">Rusak</label>
+                    </div>
+    
+                    <div v-if="validation.kondisi" class="mt-2 alert alert-danger">
+                      {{ validation.kondisi[0] }}
+                    </div>
+                  </div>
+                  
+    
+                  <div class="form-group">
+                    <label for="id_jenis_alat" class="font-weight-bold">ID Jenis Alat</label>
+                    <select class="form-control" v-model="post.id_jenis_alat">
+                      <option v-for="jalat in jalat" :key="jalat.id_jenis_alat" :value="jalat.id_jenis_alat">{{ jalat.nama_alat }}</option>
+                    </select>
+    
+                    <div v-if="validation.id_jenis_alat" class="mt-2 alert alert-danger">
+                      {{ validation.id_jenis_alat[0] }}
+                    </div>
+                  </div>
+    
+                  <div class="form-group">
+                    <label for="id_ruang" class="font-weight-bold">ID ruang</label>
+                    <select class="form-control" v-model="post.id_ruang">
+                      <option v-for="ruang in ruang" :key="ruang.id_ruang" :value="ruang.id_ruang">{{ ruang.nama_ruang }}</option>
+                    </select>
+    
+                    <div v-if="validation.id_ruang" class="mt-2 alert alert-danger">
+                      {{ validation.id_ruang[0] }}
+                    </div>
+                  </div>
+    
+                  <div class="form-group">
+                    <label for="tahun" class="font-weight-bold">Tahun</label>
+                    <input
+                      type="number"
+                      class="form-control"
+                      v-model="post.tahun"
+                      placeholder="Masukkan tahun alat"
+                    />
+    
+                    <div v-if="validation.tahun" class="mt-2 alert alert-danger">
+                      {{ validation.tahun[0] }}
+                    </div>
+                  </div>
+    
+                  <button type="submit" class="btn btn-primary">SIMPAN</button>
+                  <router-link :to="{ name: 'allAlat' }" class="btn btn-secondary"
+                    >CANCEL</router-link
+                  >
+                </form>
               </div>
-
-              <div class="form-group">
-                <label for="id_jenis_alat" class="font-weight-bold">ID Jenis Alat</label>
-                <select class="form-control" v-model="post.id_jenis_alat">
-                  <option v-for="jalat in jalat" :key="jalat.id_jenis_alat" :value="jalat.id_jenis_alat">{{ jalat.nama_alat }}</option>
-                </select>
-
-                <div v-if="validation.id_jenis_alat" class="mt-2 alert alert-danger">
-                  {{ validation.id_jenis_alat[0] }}
-                </div>
-              </div>
-
-              <div class="form-group">
-                <label for="id_ruang" class="font-weight-bold">ID ruang</label>
-                <select class="form-control" v-model="post.id_ruang">
-                  <option v-for="ruang in ruang" :key="ruang.id_ruang" :value="ruang.id_ruang">{{ ruang.nama_ruang }}</option>
-                </select>
-
-                <div v-if="validation.id_ruang" class="mt-2 alert alert-danger">
-                  {{ validation.id_ruang[0] }}
-                </div>
-              </div>
-
-              <button type="submit" class="btn btn-primary">SIMPAN</button>
-              <router-link :to="{ name: 'allAlat' }" class="btn btn-secondary"
-                >CANCEL</router-link
-              >
-            </form>
+            </div>
           </div>
         </div>
       </div>
-    </div>
+  <Footer />
+  </div>
   </div>
 </template>
 
 <script>
+import Footer from "../../includes/Footer.vue";
+import SidebarAdmintes from "../../includes/SidebarAdmintes.vue";
+import Navbar from "../../includes/navbar.vue";
 import { reactive, ref, onMounted } from "vue";
 import { useRouter } from "vue-router";
 import axios from "axios";
 
 export default {
+  components: {
+    Footer,
+    SidebarAdmintes,
+    Navbar,
+  },
   setup() {
     const post = reactive({
       no_inventaris: "",
       kondisi: "",
       id_jenis_alat: "",
       id_ruang: "",
+      tahun: "",
     });
 
     const jalat = ref([]);
@@ -123,6 +170,7 @@ export default {
       formData.append('kondisi', post.kondisi);
       formData.append('id_jenis_alat', post.id_jenis_alat);
       formData.append('id_ruang', post.id_ruang);
+      formData.append('tahun', post.tahun);
 
       axios
         .post('/api/alat/add_alat', formData, {
@@ -154,4 +202,4 @@ export default {
 body {
   background: lightgray;
 }
-</style>
+</style>
\ No newline at end of file

fe-sarpras/src/components/CRUD/Alat/AllAlat.vue

 <template>
-  <div class="main-container">
-    <Sidebar />
-    <div class="content">
-      <section class="service_section layout_padding d-flex justify-content-center align-items-center">
-        <div class="container align-content-center">
-          <router-link to="/admin/add_alat" class="btn btn-success mb-3">
+  <div id="wrapper">
+    <SidebarAdmintes />
+    <div id="content-wrapper" class="service_section layout_padding">
+      <Navbar />
+      <div class="container-fluid">
+        <div class="button-container">
+          <router-link to="" class="btn btn-success mb-3">
             Tambah Alat
           </router-link>
-  
-          <table class="table table-bordered table-hover">
-            <thead class="thead-dark">
-              <tr>
-                <th scope="col">No</th>
-                <th scope="col">No Inventaris</th>
-                <th scope="col">Kondisi</th>
-                <th scope="col">ID Jenis Alat</th>
-                <th scope="col">ID Ruang</th>
-                <th scope="col">Action</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="(alat, index) in ListAlat" :key="alat.id_alat">
-                <td>{{ index + 1 }}</td>
-                <td>{{ alat.no_inventaris }}</td>
-                <td>{{ alat.kondisi }}</td>
-                <td>{{ alat.id_jenis_alat }}</td>
-                <td>{{ alat.id_ruang }}</td>
-                <td>
-                  <button @click="updateAlat(alat.id_alat)" class="btn btn-info">Update</button>
-                  <button @click="deleteAlat(alat.id_alat)" class="btn btn-danger">Delete</button>
-                </td>
-              </tr>
-            </tbody>
-          </table>
+          <router-link to="" class="btn btn-success mb-3 btn-download">
+            Export
+          </router-link>
+        </div>
+
+        <div class="search-container mb-3">
+          <i class="fas fa-search search-icon"></i>
+          <input 
+            v-model="searchQuery" 
+            type="text" 
+            placeholder="Search Alat..." 
+            class="form-control search-input"
+          />
         </div>
-      </section>
+
+        <table class="table table-bordered table-hover">
+          <thead class="thead-dark">
+            <tr>
+              <th scope="col" @click="sortTable('id_alat')">
+                No
+                <span class="sort-icon">
+                  <i :class="sortBy === 'id_alat' ? (sortDirection === 'asc' ? 'fas fa-sort-up' : 'fas fa-sort-down') : 'fas fa-sort'"></i>
+                </span>
+              </th>
+              <th scope="col" @click="sortTable('no_inventaris')">
+                No Inventaris
+                <span class="sort-icon">
+                  <i :class="sortBy === 'no_inventaris' ? (sortDirection === 'asc' ? 'fas fa-sort-up' : 'fas fa-sort-down') : 'fas fa-sort'"></i>
+                </span>
+              </th>
+              <th scope="col" @click="sortTable('id_jenis_alat')">
+                ID Jenis Alat
+                <span class="sort-icon">
+                  <i :class="sortBy === 'id_jenis_alat' ? (sortDirection === 'asc' ? 'fas fa-sort-up' : 'fas fa-sort-down') : 'fas fa-sort'"></i>
+                </span>
+              </th>
+              <!-- <th scope="col" @click="sortTable('merk_alat')">
+                Merk
+                <span class="sort-icon">
+                  <i :class="sortBy === 'merk_alat' ? (sortDirection === 'asc' ? 'fas fa-sort-up' : 'fas fa-sort-down') : 'fas fa-sort'"></i>
+                </span>
+              </th> -->
+              <th scope="col" @click="sortTable('id_ruang')">
+                ID Ruang
+                <span class="sort-icon">
+                  <i :class="sortBy === 'id_ruang' ? (sortDirection === 'asc' ? 'fas fa-sort-up' : 'fas fa-sort-down') : 'fas fa-sort'"></i>
+                </span>
+              </th>
+              <th scope="col" @click="sortTable('tahun')">
+                Tahun
+                <span class="sort-icon">
+                  <i :class="sortBy === 'tahun' ? (sortDirection === 'asc' ? 'fas fa-sort-up' : 'fas fa-sort-down') : 'fas fa-sort'"></i>
+                </span>
+              </th>
+              <th scope="col" @click="sortTable('kondisi')">
+                Kondisi
+                <span class="sort-icon">
+                  <i :class="sortBy === 'kondisi' ? (sortDirection === 'asc' ? 'fas fa-sort-up' : 'fas fa-sort-down') : 'fas fa-sort'"></i>
+                </span>
+              </th>
+              <th scope="col">Action</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(alat, index) in sortedAlat" :key="alat.id_alat">
+              <td>{{ index + 1 }}</td>
+              <td>{{ alat.no_inventaris }}</td>             
+              <td>{{ alat.id_jenis_alat }}</td>
+              <td>{{ alat.id_ruang }}</td>
+              <td>{{ alat.tahun }}</td>
+              <td>{{ alat.kondisi }}</td>
+              <td>
+                <button @click="updateAlat(alat.id_alat)" class="btn btn-info">Update</button>
+                <button @click="deleteAlat(alat.id_alat)" class="btn btn-danger">Delete</button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <Footer />
     </div>
   </div>
 </template>
 
 <script>
-import Sidebar from '@/components/includes/SidebarAdmin.vue';
+import Footer from "../../includes/Footer.vue";
+import SidebarAdmintes from "../../includes/SidebarAdmintes.vue";
+import Navbar from "../../includes/navbar.vue";
 
 export default {
   components: {
-    Sidebar
+    Footer,
+    SidebarAdmintes,
+    Navbar,
   },
   data() {
     return {
       ListAlat: [],
+      searchQuery: '',
+      sortBy: '', 
+      sortDirection: 'asc',
     };
   },
   mounted() {
@@ -77,33 +137,68 @@ export default {
         }
       }
     },
+    sortTable(column) {
+      if (this.sortBy === column) {
+        this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
+      } else {
+        this.sortBy = column;
+        this.sortDirection = 'asc';
+      }
+    },
+  },
+  computed: {
+    sortedAlat() {
+      let sortedList = [...this.ListAlat];
+
+      if (this.sortBy) {
+        sortedList.sort((a, b) => {
+          let modifier = 1;
+          if (this.sortDirection === 'desc') modifier = -1;
+          if (a[this.sortBy] < b[this.sortBy]) return -1 * modifier;
+          if (a[this.sortBy] > b[this.sortBy]) return 1 * modifier;
+          return 0;
+        });
+      }
+
+      if (this.searchQuery) {
+        sortedList = sortedList.filter(alat => 
+          alat.no_inventaris.toLowerCase().includes(this.searchQuery.toLowerCase()) ||
+          alat.kondisi.toLowerCase().includes(this.searchQuery.toLowerCase()) ||
+          alat.id_jenis_alat.toString().includes(this.searchQuery.toLowerCase()) ||
+          alat.id_ruang.toString().includes(this.searchQuery.toLowerCase()) ||
+          alat.tahun.toString().includes(this.searchQuery.toLowerCase())
+        );
+      }
+
+      return sortedList;
+    },
   },
 };
 </script>
 
 <style scoped>
-@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
-
-body {
-  font-family: 'Roboto', sans-serif;
+html, body, #wrapper, #content-wrapper, .service_section {
+  height: 100%;
   margin: 0;
-  padding: 0;
-  background-color: #f8f9fa;
 }
 
-.main-container {
+#content-wrapper {
   display: flex;
+  flex-direction: column;
 }
 
-.content {
-  flex-grow: 1;
-  padding: 20px;
-  margin-left: 5px;
-  transition: margin-left 0.3s ease-in-out;
+.container-fluid {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 30px;
 }
 
-.container {
-  padding: 10px;
+.button-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
 }
 
 .btn-success {
@@ -120,10 +215,54 @@ body {
 .table td {
   text-align: center;
   vertical-align: middle;
+  cursor: pointer;
+}
+
+.btn-info {
+  width: 80px;
+  margin-right: 5px;
 }
 
-.btn-info,
 .btn-danger {
   width: 80px;
+  margin-left: 5px;
+}
+
+.btn-download {
+  margin-left: auto;
+}
+
+.search-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.search-icon {
+  position: absolute;
+  left: 10px;
+  font-size: 14px;
+  color: #aaa;
+}
+
+.search-input {
+  padding-left: 30px;
+  font-size: 14px;
+  height: 30px;
+  width: 200px;
+}
+
+.form-control {
+  width: 30%;
+}
+
+#content-wrapper {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.container-fluid {
+  flex: 1;
 }
 </style>

fe-sarpras/src/components/CRUD/Alat/JenisAlat/AddJenis.vue

@@ -3,6 +3,7 @@
     <SidebarAdmintes />
     <div id="content-wrapper" class="service_section layout_padding">
       <Navbar />
+<<<<<<< HEAD
       <div class="container mt-5">
         <div class="row">
           <div class="col-md-12">
@@ -10,6 +11,31 @@
               <div class="card-body">
                 <h4>TAMBAH ALAT</h4>
                 <hr />
+=======
+    <div class="container mt-5">
+      <div class="row">
+        <div class="col-md-12">
+          <div class="card border-0 rounded shadow">
+            <div class="card-body">
+              <h4>TAMBAH JENIS ALAT</h4>
+              <hr />
+              
+  
+              <form @submit.prevent="store">
+                <div class="form-group">
+                  <label for="nama_alat" class="font-weight-bold">Nama Alat</label>
+                  <input
+                    type="text"
+                    class="form-control"
+                    v-model="post.nama_alat"
+                    placeholder="Masukkan nama alat"
+                  />
+  
+                  <div v-if="validation.nama_alat" class="mt-2 alert alert-danger">
+                    {{ validation.nama_alat[0] }}
+                  </div>
+                </div>
+>>>>>>> dhilaaaaa
 
                 <form @submit.prevent="store">
                   <div class="form-group">
@@ -106,20 +132,34 @@
       </div>
     </div>
     <Footer />
+<<<<<<< HEAD
   </div>
 </template>
+=======
+    </div>
+    </div>
+  </template>
+>>>>>>> dhilaaaaa
   
   <script>
 import Footer from "../../../includes/Footer.vue";
 import SidebarAdmintes from "../../../includes/SidebarAdmintes.vue";
 import Navbar from "../../../includes/navbar.vue";
+<<<<<<< HEAD
   import { reactive, ref } from "vue";
+=======
+  import { reactive, ref, onMounted } from "vue";
+>>>>>>> dhilaaaaa
   import { useRouter } from "vue-router";
   import axios from "axios";
   
   export default {
+<<<<<<< HEAD
     name: "AddJenis",
   components: {
+=======
+    components: {
+>>>>>>> dhilaaaaa
     Footer,
     SidebarAdmintes,
     Navbar,

fe-sarpras/src/components/CRUD/Alat/JenisAlat/AllJenis.vue

@@ -3,10 +3,28 @@
     <SidebarAdmintes />
     <div id="content-wrapper" class="service_section layout_padding">
       <Navbar />
+<<<<<<< HEAD
       <div class="container">
         <router-link to="/admin/add-jenis" class="btn btn-success mb-3">
           Tambah Alat
         </router-link>
+=======
+      <div class="container-fluid">
+      <div class="container">
+        <router-link to="/admin/add_jenis_alat" class="btn btn-success mb-3">
+          Tambah Jenis Alat
+        </router-link>
+
+        <div class="search-container mb-3">
+          <i class="fas fa-search search-icon"></i>
+          <input 
+            v-model="searchQuery" 
+            type="text" 
+            placeholder="Search Jenis Alat..." 
+            class="form-control search-input"
+          />
+        </div>
+>>>>>>> dhilaaaaa
   
           <table class="table table-bordered table-hover">
             <thead class="thead-dark">
@@ -46,6 +64,11 @@
           </table>
         </div>
       </div>
+<<<<<<< HEAD
+=======
+        <Footer />
+      </div>
+>>>>>>> dhilaaaaa
     </div>
     <Footer />
   </template>
@@ -55,8 +78,12 @@ import Footer from "../../../includes/Footer.vue";
 import SidebarAdmintes from "../../../includes/SidebarAdmintes.vue";
 import Navbar from "../../../includes/navbar.vue";
   export default {
+<<<<<<< HEAD
     name: "AllJenis",
   components: {
+=======
+    components: {
+>>>>>>> dhilaaaaa
     Footer,
     SidebarAdmintes,
     Navbar,
@@ -100,6 +127,7 @@ import Navbar from "../../../includes/navbar.vue";
   </script>
   
   <style scoped>
+<<<<<<< HEAD
   .product-image {
     max-width: 100px;
     max-height: 75px;
@@ -131,4 +159,95 @@ import Navbar from "../../../includes/navbar.vue";
     width: 80px;
   }
   </style>
-  
+  
\ No newline at end of file
+=======
+html, body, #wrapper, #content-wrapper, .service_section {
+  height: 100%;
+  margin: 0;
+}
+
+#content-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+
+.container-fluid {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 30px;
+}
+
+.button-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.btn-success {
+  background-color: #28a745;
+  border-color: #28a745;
+}
+
+.btn-success:hover {
+  background-color: #218838;
+  border-color: #1e7e34;
+}
+
+.table th,
+.table td {
+  text-align: center;
+  vertical-align: middle;
+}
+
+.btn-info {
+  width: 80px;
+  margin-right: 5px;
+}
+
+.btn-danger {
+  width: 80px;
+  margin-left: 5px;
+}
+
+.btn-download {
+  margin-left: auto;
+}
+
+.search-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.search-icon {
+  position: absolute;
+  left: 10px;
+  font-size: 14px;
+  color: #aaa;
+}
+
+.search-input {
+  padding-left: 30px;
+  font-size: 14px;
+  height: 30px;
+  width: 200px;
+}
+
+.form-control {
+  width: 30%;
+}
+
+#content-wrapper {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.container-fluid {
+  flex: 1;
+}
+
+</style>
+>>>>>>> dhilaaaaa

fe-sarpras/src/components/CRUD/Alat/JenisAlat/EditJenis.vue

@@ -105,6 +105,9 @@
           </div>
         </div>
       </div>
+      </div>
+      <Footer />
+      </div>
     </div>
     </div>
     <Footer />
@@ -115,13 +118,21 @@
 import Footer from "../../../includes/Footer.vue";
 import SidebarAdmintes from "../../../includes/SidebarAdmintes.vue";
 import Navbar from "../../../includes/navbar.vue";
+<<<<<<< HEAD
   import { reactive, ref } from "vue";
+=======
+  import { reactive, ref, onMounted } from "vue";
+>>>>>>> dhilaaaaa
   import { useRouter, useRoute } from "vue-router";
   import axios from "axios";
   
   export default {
+<<<<<<< HEAD
     name: "EditJenis",
   components: {
+=======
+    components: {
+>>>>>>> dhilaaaaa
     Footer,
     SidebarAdmintes,
     Navbar,

fe-sarpras/src/components/CRUD/Alat/Merk/AddMerk.vue

 <template>
+  <div id="wrapper">
+    <SidebarAdmintes />
+    <div id="content-wrapper" class="service_section layout_padding">
+      <Navbar />
   <div class="container mt-5">
     <div class="row">
       <div class="col-md-12">
@@ -32,14 +36,25 @@
       </div>
     </div>
   </div>
+  <Footer />
+  </div>
+  </div>
 </template>
 
 <script>
+import Footer from "../../../includes/Footer.vue";
+import SidebarAdmintes from "../../../includes/SidebarAdmintes.vue";
+import Navbar from "../../../includes/navbar.vue";
 import { reactive, ref } from "vue";
 import { useRouter } from "vue-router";
 import axios from "axios";
 
 export default {
+  components: {
+    Footer,
+    SidebarAdmintes,
+    Navbar,
+  },
   setup() {
     const post = reactive({
       nama_merk: "",

fe-sarpras/src/components/CRUD/Alat/Merk/AllMerk.vue

 <template>
-  <div>
-    <section class="service_section layout_padding d-flex justify-content-center align-items-center">
-      <div class="container align-content-center">
-        <router-link to="/admin/add_merk" class="btn btn-success mb-3">
-          Tambah Merk
-        </router-link>
+    <div id="wrapper">
+      <SidebarAdmintes />
+      <div id="content-wrapper" class="service_section layout_padding">
+        <Navbar />
+        <div class="container-fluid">
+        <div class="container">
+          <router-link to="/admin/add_merk" class="btn btn-success mb-3">
+            Tambah Merk
+          </router-link>
+
+          <div class="search-container mb-3">
+            <i class="fas fa-search search-icon"></i>
+            <input 
+              v-model="searchQuery" 
+              type="text" 
+              placeholder="Search Merk..." 
+              class="form-control search-input"
+            />
+          </div>
 
         <table class="table table-bordered table-hover">
           <thead class="thead-dark">
@@ -27,12 +40,22 @@
         </table>
 
       </div>
-    </section>
+    </div>
+    <Footer />
+    </div>
   </div>
 </template>
 
 <script>
+import Footer from "../../../includes/Footer.vue";
+import SidebarAdmintes from "../../../includes/SidebarAdmintes.vue";
+import Navbar from "../../../includes/navbar.vue";
 export default {
+  components: {
+    Footer,
+    SidebarAdmintes,
+    Navbar,
+  },
   data() {
     return {
       ListMerk: [],
@@ -70,11 +93,30 @@ export default {
 </script>
 
 <style scoped>
+html, body, #wrapper, #content-wrapper, .service_section {
+  height: 100%;
+  margin: 0;
+}
 
-.container {
+#content-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+
+.container-fluid {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
   padding: 30px;
 }
 
+.button-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
 .btn-success {
   background-color: #28a745;
   border-color: #28a745;
@@ -91,8 +133,52 @@ export default {
   vertical-align: middle;
 }
 
-.btn-info,
+.btn-info {
+  width: 80px;
+  margin-right: 5px;
+}
+
 .btn-danger {
   width: 80px;
+  margin-left: 5px;
 }
+
+.btn-download {
+  margin-left: auto;
+}
+
+.search-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.search-icon {
+  position: absolute;
+  left: 10px;
+  font-size: 14px;
+  color: #aaa;
+}
+
+.search-input {
+  padding-left: 30px;
+  font-size: 14px;
+  height: 30px;
+  width: 200px;
+}
+
+.form-control {
+  width: 30%;
+}
+
+#content-wrapper {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.container-fluid {
+  flex: 1;
+}
+
 </style>