create crud data settings

resources/js/data-settings/index.js

@@ -0,0 +1,107 @@
+import { Grid } from "gridjs/dist/gridjs.umd.js";
+import gridjs from "gridjs/dist/gridjs.umd.js";
+import "gridjs/dist/gridjs.umd.js";
+import GlobalConfig from "../global-config.js";
+
+class DataSettings {
+    init() {
+        this.getFetchApiData();
+    }
+
+    getFetchApiData() {
+        const table = new Grid({
+            columns: [
+                "ID",
+                "Key",
+                "Value",
+                "Created",
+                {
+                    name: "Actions",
+                    width: "120px",
+                    formatter: function (cell) {
+                        console.log("cell data", cell);
+                        return gridjs.html(`
+												<div class="d-flex justify-items-end gap-10">
+												<a href="/data-settings/${cell}/edit" class="btn btn-yellow me-2">Update</a>
+												<button class="btn btn-red btn-delete btn-delete-data-settings" data-id="${cell}">Delete</button>
+												</div>
+											`);
+                    },
+                },
+            ],
+            search: {
+                server: {
+                    url: (prev, keyword) => `${prev}?search=${keyword}`,
+                },
+            },
+            pagination: {
+                limit: 15,
+                server: {
+                    url: (prev, page) =>
+                        `${prev}${prev.includes("?") ? "&" : "?"}page=${
+                            page + 1
+                        }`,
+                },
+            },
+            sort: true,
+            server: {
+                url: `${GlobalConfig.apiHost}/api/api-data-settings`,
+                headers: {
+                    Authorization: `Bearer ${document
+                        .querySelector('meta[name="api-token"]')
+                        .getAttribute("content")}`,
+                    "Content-Type": "application/json",
+                },
+                then: (data) =>
+                    data.data.map((item) => [
+                        item.id,
+                        item.key,
+                        item.value,
+                        item.created_at,
+                        item.id,
+                    ]),
+                total: (data) => data.meta.total,
+            },
+        });
+        table.render(document.getElementById("table-data-settings"));
+
+        document.addEventListener("click", this.handleDelete);
+    }
+    handleDelete(event) {
+        if (event.target.classList.contains("btn-delete-data-settings")) {
+            event.preventDefault();
+            const id = event.target.getAttribute("data-id");
+
+            if (confirm("Are you sure you want to delete this item?")) {
+                fetch(`/data-settings/${id}`, {
+                    method: "DELETE",
+                    headers: {
+                        "X-CSRF-TOKEN": document
+                            .querySelector('meta[name="csrf-token"]')
+                            .getAttribute("content"),
+                        "Content-Type": "application/json",
+                    },
+                })
+                    .then((response) => {
+                        if (response.ok) {
+                            alert("Item deleted successfully!");
+                            window.location.reload();
+                        } else {
+                            return response.json().then((error) => {
+                                throw new Error(
+                                    error.message || "Failed to delete item."
+                                );
+                            });
+                        }
+                    })
+                    .catch((error) => {
+                        console.error("Error deleting item:", error);
+                        alert("Something went wrong. Please try again.");
+                    });
+            }
+        }
+    }
+}
+document.addEventListener("DOMContentLoaded", function (e) {
+    new DataSettings().init();
+});

resources/views/data-settings/create.blade.php

@@ -0,0 +1,50 @@
+@extends('layouts.vertical', ['subtitle' => 'Create'])
+
+@section('content')
+
+@include('layouts.partials/page-title', ['title' => 'Data Settings', 'subtitle' => 'Setting Dashboard'])
+
+<div class="row d-flex justify-content-center">
+  @if (session('error'))
+    <div class="alert alert-danger">
+    {{ session('error') }}
+    </div>
+  @endif
+
+  @if ($errors->any())
+    <div class="alert alert-danger">
+    <ul>
+      @foreach ($errors->all() as $error)
+      <li>{{ $error }}</li>
+    @endforeach
+    </ul>
+    </div>
+  @endif
+  <div class="col-lg-6">
+    <div class="card">
+      <div class="card-body">
+        <form action="{{ route('data-settings.store') }}" method="POST">
+          @csrf
+          <div class="mb-3">
+            <label for="key" class="form-label">Key</label>
+            <input type="text" id="key" class="form-control" name="key">
+          </div>
+          <div class="mb-3">
+            <label for="value" class="form-label">Value</label>
+            <input type="text" id="value" class="form-control" name="value">
+          </div>
+          <div class="mb-3">
+            <label for="type" class="form-label">Type</label>
+            <input type="text" id="type" class="form-control" name="type">
+          </div>
+          <button type="submit" class="btn btn-success width-lg">Create</button>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>
+
+@endsection
+
+@section('scripts')
+@endsection

resources/views/data-settings/edit.blade.php

@@ -0,0 +1,51 @@
+@extends('layouts.vertical', ['subtitle' => 'Create'])
+
+@section('content')
+
+@include('layouts.partials/page-title', ['title' => 'Data Settings', 'subtitle' => 'Setting Dashboard'])
+
+<div class="row d-flex justify-content-center">
+	@if (session('error'))
+		<div class="alert alert-danger">
+			{{ session('error') }}
+		</div>
+	@endif
+
+	@if ($errors->any())
+		<div class="alert alert-danger">
+			<ul>
+				@foreach ($errors->all() as $error)
+					<li>{{ $error }}</li>
+				@endforeach
+			</ul>
+		</div>
+	@endif
+	<div class="col-lg-6">
+		<div class="card">
+			<div class="card-body">
+				<form action="{{ route('data-settings.update', $data->id) }}" method="POST">
+					@csrf
+					@method('PUT')
+					<div class="mb-3">
+						<label for="key" class="form-label">Key</label>
+						<input type="text" id="key" class="form-control" name="key" value="{{$data->key}}">
+					</div>
+					<div class="mb-3">
+						<label for="value" class="form-label">Value</label>
+						<input type="text" id="value" class="form-control" name="value" value="{{$data->value}}">
+					</div>
+					<div class="mb-3">
+						<label for="type" class="form-label">Type</label>
+						<input type="text" id="type" class="form-control" name="type" value="{{$data->type}}">
+					</div>
+					<button type="submit" class="btn btn-success width-lg">Update</button>
+				</form>
+			</div>
+		</div>
+	</div>
+</div>
+
+@endsection
+
+@section('scripts')
+@endsection

resources/views/data-settings/index.blade.php

@@ -0,0 +1,24 @@
+@extends('layouts.vertical', ['subtitle' => 'Data Settings'])
+
+@section('css')
+@vite(['node_modules/gridjs/dist/theme/mermaid.min.css'])
+@endsection
+
+@section('content')
+
+@include('layouts.partials/page-title', ['title' => 'Data Settings', 'subtitle' => 'Setting Dashboard'])
+
+<div class="row">
+	<div class="d-flex justify-content-end pb-3">
+		<a href="{{ route('data-settings.create')}}" class="btn btn-success width-lg">Create</a>
+	</div>
+	<div>
+		<div id="table-data-settings"></div>
+	</div>
+</div>
+
+@endsection
+
+@section('scripts')
+@vite(['resources/js/data-settings/index.js'])
+@endsection

resources/views/layouts/partials/sidebar.blade.php

@@ -29,7 +29,7 @@
                     <div class="collapse" id="sidebarDashboard">
                          <ul class="nav sub-navbar-nav">
                               <li class="sub-nav-item">
-                                   <a class="sub-nav-link" href="{{ route ('home' ) }}">SIBEDAS</a>
+                                   <a class="sub-nav-link" href="{{ route ('home' ) }}">Pimpinan</a>
                               </li>
                               <li class="sub-nav-item">
                                    <a class="sub-nav-link" href="{{ route ('home' ) }}">Dashboard 2</a>
@@ -78,6 +78,23 @@
                     </div>
                </li>
 
+               <li class="nav-item">
+                    <a class="nav-link menu-arrow" href="#dataSettings" data-bs-toggle="collapse" role="button"
+                         aria-expanded="false" aria-controls="dataSettings">
+                         <span class="nav-icon">
+                              <iconify-icon icon="mingcute:settings-1-line"></iconify-icon>
+                         </span>
+                         <span class="nav-text">Data Settings</span>
+                    </a>
+                    <div class="collapse" id="dataSettings">
+                         <ul class="nav sub-navbar-nav">
+                              <li class="sub-nav-item">
+                                   <a class="sub-nav-link" href="{{ route ('data-settings.index' ) }}">Setting Dashboard</a>
+                              </li>
+                         </ul>
+                    </div>
+               </li>
+
                <li class="nav-item">
                     <a class="nav-link menu-arrow" href="#data" data-bs-toggle="collapse" role="button"
                          aria-expanded="false" aria-controls="data">