initial commit

resources/css/app.css

@@ -1,3 +1,9 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+
+@layer components {
+    .field-label { @apply mb-1.5 block text-xs font-medium text-slate-600; }
+    .field-input { @apply w-full border-slate-300 bg-white px-3 py-2.5 text-sm text-slate-800 shadow-none focus:border-indigo-500 focus:ring-indigo-500; }
+}

resources/js/vendor/webauthn/webauthn.js

@@ -0,0 +1,371 @@
+/**
+ * MIT License
+ *
+ * Copyright (c) Italo Israel Baeza Cabrera
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * @deprecated Use Webpass instead
+ * @see https://github.com/Laragear/webpass
+ */
+class WebAuthn {
+    /**
+     * Routes for WebAuthn assertion (login) and attestation (register).
+     *
+     * @type {{registerOptions: string, register: string, loginOptions: string, login: string, }}
+     */
+    #routes = {
+        registerOptions: "webauthn/register/options",
+        register: "webauthn/register",
+        loginOptions: "webauthn/login/options",
+        login: "webauthn/login",
+    }
+
+    /**
+     * Headers to use in ALL requests done.
+     *
+     * @type {{Accept: string, "Content-Type": string, "X-Requested-With": string}}
+     */
+    #headers = {
+        "Accept": "application/json",
+        "Content-Type": "application/json",
+        "X-Requested-With": "XMLHttpRequest"
+    };
+
+    /**
+     * If set to true, the credentials option will be set to 'include' on all fetch calls,
+     * or else it will use the default 'same-origin'. Use this if the backend is not the
+     * same origin as the client or the XSRF protection will break without the session.
+     *
+     * @type {boolean}
+     */
+    #includeCredentials = false
+
+    /**
+     * Create a new WebAuthn instance.
+     *
+     * @param routes {{registerOptions: string, register: string, loginOptions: string, login: string}}
+     * @param headers {{string}}
+     * @param includeCredentials {boolean}
+     * @param xcsrfToken {string|null} Either a csrf token (40 chars) or xsrfToken (224 chars)
+     */
+    constructor(routes = {}, headers = {}, includeCredentials = false, xcsrfToken = null) {
+        console.warn('This WebAuthn Helper is deprecated and will be removed in the future. Consider migrating to @laragear/webpass')
+
+        Object.assign(this.#routes, routes);
+        Object.assign(this.#headers, headers);
+
+        this.#includeCredentials = includeCredentials;
+
+        let xsrfToken;
+        let csrfToken;
+
+        if (xcsrfToken === null) {
+            // If the developer didn't issue an XSRF token, we will find it ourselves.
+            xsrfToken = WebAuthn.#XsrfToken;
+            csrfToken = WebAuthn.#firstInputWithCsrfToken;
+        } else{
+            // Check if it is a CSRF or XSRF token
+            if (xcsrfToken.length === 40) {
+                csrfToken = xcsrfToken;
+            } else if (xcsrfToken.length === 224) {
+                xsrfToken = xcsrfToken;
+            } else {
+                throw new TypeError('CSRF token or XSRF token provided does not match requirements. Must be 40 or 224 characters.');
+            }
+        }
+
+        if (xsrfToken !== null) {
+            this.#headers["X-XSRF-TOKEN"] ??= xsrfToken;
+        } else if (csrfToken !== null) {
+            this.#headers["X-CSRF-TOKEN"] ??= csrfToken;
+        } else {
+            // We didn't find it, and since is required, we will bail out.
+            throw new TypeError('Ensure a CSRF/XSRF token is manually set, or provided in a cookie "XSRF-TOKEN" or or there is meta tag named "csrf-token".');
+        }
+    }
+
+    /**
+     * Returns the CSRF token if it exists as a form input tag.
+     *
+     * @returns string
+     * @throws TypeError
+     */
+    static get #firstInputWithCsrfToken() {
+        // First, try finding an CSRF Token in the head.
+        let token = Array.from(document.head.getElementsByTagName("meta"))
+            .find(element => element.name === "csrf-token");
+
+        if (token) {
+            return token.content;
+        }
+
+        // Then, try to find a hidden input containing the CSRF token.
+        token = Array.from(document.getElementsByTagName('input'))
+            .find(input => input.name === "_token" && input.type === "hidden")
+
+        if (token) {
+            return token.value;
+        }
+
+        return null;
+    }
+
+    /**
+     * Returns the value of the XSRF token if it exists in a cookie.
+     *
+     * Inspired by https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie#example_2_get_a_sample_cookie_named_test2
+     *
+     * @returns {?string}
+     */
+     static get #XsrfToken() {
+        const cookie = document.cookie.split(";").find((row) => /^\s*(X-)?[XC]SRF-TOKEN\s*=/.test(row));
+        // We must remove all '%3D' from the end of the string.
+        // Background:
+        // The actual binary value of the CSFR value is encoded in Base64.
+        // If the length of original, binary value is not a multiple of 3 bytes,
+        // the encoding gets padded with `=` on the right; i.e. there might be
+        // zero, one or two `=` at the end of the encoded value.
+        // If the value is sent from the server to the client as part of a cookie,
+        // the `=` character is URL-encoded as `%3D`, because `=` is already used
+        // to separate a cookie key from its value.
+        // When we send back the value to the server as part of an AJAX request,
+        // Laravel expects an unpadded value.
+        // Hence, we must remove the `%3D`.
+        return cookie ? cookie.split("=")[1].trim().replaceAll("%3D", "") : null;
+    };
+
+    /**
+     * Returns a fetch promise to resolve later.
+     *
+     * @param data {Object}
+     * @param route {string}
+     * @param headers {{string}}
+     * @returns {Promise<Response>}
+     */
+    #fetch(data, route, headers = {}) {
+        const url = new URL(route, window.location.origin).href;
+
+        return fetch(url, {
+            method: "POST",
+            credentials: this.#includeCredentials ? "include" : "same-origin",
+            redirect: "error",
+            headers: {...this.#headers, ...headers},
+            body: JSON.stringify(data)
+        });
+    }
+
+    /**
+     * Decodes a BASE64 URL string into a normal string.
+     *
+     * @param input {string}
+     * @returns {string|Iterable}
+     */
+    static #base64UrlDecode(input) {
+        input = input.replace(/-/g, "+").replace(/_/g, "/");
+
+        const pad = input.length % 4;
+
+        if (pad) {
+            if (pad === 1) {
+                throw new Error("InvalidLengthError: Input base64url string is the wrong length to determine padding");
+            }
+
+            input += new Array(5 - pad).join("=");
+        }
+
+        return atob(input);
+    }
+
+    /**
+     * Transform a string into Uint8Array instance.
+     *
+     * @param input {string}
+     * @param useAtob {boolean}
+     * @returns {Uint8Array}
+     */
+    static #uint8Array(input, useAtob = false) {
+        return Uint8Array.from(
+            useAtob ? atob(input) : WebAuthn.#base64UrlDecode(input), c => c.charCodeAt(0)
+        );
+    }
+
+    /**
+     * Encodes an array of bytes to a BASE64 URL string
+     *
+     * @param arrayBuffer {ArrayBuffer|Uint8Array}
+     * @returns {string}
+     */
+    static #arrayToBase64String(arrayBuffer) {
+        return btoa(String.fromCharCode(...new Uint8Array(arrayBuffer)));
+    }
+
+    /**
+     * Parses the Public Key Options received from the Server for the browser.
+     *
+     * @param publicKey {Object}
+     * @returns {Object}
+     */
+    #parseIncomingServerOptions(publicKey) {
+        console.debug(publicKey);
+
+        publicKey.challenge = WebAuthn.#uint8Array(publicKey.challenge);
+
+        if ('user' in publicKey) {
+            publicKey.user = {
+                ...publicKey.user,
+                id: WebAuthn.#uint8Array(publicKey.user.id)
+            };
+        }
+
+        [
+            "excludeCredentials",
+            "allowCredentials"
+        ]
+            .filter(key => key in publicKey)
+            .forEach(key => {
+                publicKey[key] = publicKey[key].map(data => {
+                    return {...data, id: WebAuthn.#uint8Array(data.id)};
+                });
+            });
+
+        console.log(publicKey);
+
+        return publicKey;
+    }
+
+    /**
+     * Parses the outgoing credentials from the browser to the server.
+     *
+     * @param credentials {Credential|PublicKeyCredential}
+     * @return {{response: {string}, rawId: string, id: string, type: string}}
+     */
+    #parseOutgoingCredentials(credentials) {
+        let parseCredentials = {
+            id: credentials.id,
+            type: credentials.type,
+            rawId: WebAuthn.#arrayToBase64String(credentials.rawId),
+            authenticatorAttachment: credentials.authenticatorAttachment,
+            clientExtensionResults: credentials.getClientExtensionResults(),
+            response: {},
+        }
+
+        [
+            "clientDataJSON",
+            "attestationObject",
+            "authenticatorData",
+            "signature",
+            "userHandle"
+        ]
+            .filter(key => key in credentials.response)
+            .forEach(key => parseCredentials.response[key] = WebAuthn.#arrayToBase64String(credentials.response[key]));
+
+        return parseCredentials;
+    }
+
+    /**
+     * Handles the response from the Server.
+     *
+     * Throws the entire response if is not OK (HTTP 2XX).
+     *
+     * @param response {Response}
+     * @returns Promise<JSON|ReadableStream>
+     * @throws Response
+     */
+    static #handleResponse(response) {
+        if (!response.ok) {
+            throw response;
+        }
+
+        // Here we will do a small trick. Since most of the responses from the server
+        // are JSON, we will automatically parse the JSON body from the response. If
+        // it's not JSON, we will push the body verbatim and let the dev handle it.
+        return new Promise((resolve) => {
+            response
+                .json()
+                .then((json) => resolve(json))
+                .catch(() => resolve(response.body));
+        });
+    }
+
+    /**
+     * Register the user credentials from the browser/device.
+     *
+     * You can add request input if you are planning to register a user with WebAuthn from scratch.
+     *
+     * @param request {{string}}
+     * @param response {{string}}
+     * @returns Promise<JSON|ReadableStream>
+     */
+    async register(request = {}, response = {}) {
+        const optionsResponse = await this.#fetch(request, this.#routes.registerOptions);
+        const json = await optionsResponse.json();
+        const publicKey = this.#parseIncomingServerOptions(json);
+        const credentials = await navigator.credentials.create({publicKey});
+        const publicKeyCredential = this.#parseOutgoingCredentials(credentials);
+
+        Object.assign(publicKeyCredential, response);
+        Object.assign(publicKeyCredential, request);
+
+        return await this.#fetch(publicKeyCredential, this.#routes.register).then(WebAuthn.#handleResponse);
+    }
+
+    /**
+     * Log in a user with his credentials.
+     *
+     * If no credentials are given, the app may return a blank assertion for userless login.
+     *
+     * @param request {{string}}
+     * @param response {{string}}
+     * @returns Promise<JSON|ReadableStream>
+     */
+    async login(request = {}, response = {}) {
+        const optionsResponse = await this.#fetch(request, this.#routes.loginOptions);
+        const json = await optionsResponse.json();
+        const publicKey = this.#parseIncomingServerOptions(json);
+        const credentials = await navigator.credentials.get({publicKey});
+        const publicKeyCredential = this.#parseOutgoingCredentials(credentials);
+
+        Object.assign(publicKeyCredential, response);
+
+        console.log(publicKeyCredential);
+
+        return await this.#fetch(publicKeyCredential, this.#routes.login, response).then(WebAuthn.#handleResponse);
+    }
+
+    /**
+     * Checks if the browser supports WebAuthn.
+     *
+     * @returns {boolean}
+     */
+    static supportsWebAuthn() {
+        return typeof PublicKeyCredential != "undefined";
+    }
+
+    /**
+     * Checks if the browser doesn't support WebAuthn.
+     *
+     * @returns {boolean}
+     */
+    static doesntSupportWebAuthn() {
+        return !this.supportsWebAuthn();
+    }
+}

resources/views/auth/forgot-password.blade.php

@@ -1,6 +1,6 @@
 <x-guest-layout>
     <div class="mb-4 text-sm text-gray-600">
-        {{ __('Forgot your password? No problem. Just let us know your email address and we will email you a password reset link that will allow you to choose a new one.') }}
+        {{ __('Lupa kata sandi? Masukkan alamat email Anda dan kami akan mengirimkan tautan untuk mengatur ulang kata sandi.') }}
     </div>
 
     <!-- Session Status -->
@@ -18,7 +18,7 @@
 
         <div class="flex items-center justify-end mt-4">
             <x-primary-button>
-                {{ __('Email Password Reset Link') }}
+                {{ __('Kirim tautan atur ulang kata sandi') }}
             </x-primary-button>
         </div>
     </form>

resources/views/auth/login.blade.php

@@ -1,139 +1,39 @@
 <x-guest-layout>
-    {{-- 1. ANIMASI CUSTOM: DYNAMIC ZOOM + NEON GLOW --}}
-    <style>
-        @keyframes logo-breathing-glow {
-            0%, 100% { 
-                transform: scale(1);
-                box-shadow: 0 0 20px rgba(99, 102, 241, 0.2), inset 0 0 10px rgba(255, 255, 255, 0.05);
-                border-color: rgba(255, 255, 255, 0.1);
-            }
-            50% { 
-                transform: scale(1.08); 
-                box-shadow: 0 0 60px rgba(79, 70, 229, 0.6), inset 0 0 20px rgba(99, 102, 241, 0.4);
-                border-color: rgba(129, 140, 248, 0.5);
-            }
-        }
-
-        .animate-logo-glow {
-            animation: logo-breathing-glow 4s ease-in-out infinite;
-            will-change: transform, box-shadow;
-        }
-    </style>
-
     <x-slot name="title">Masuk | {{ $setting->app_name ?? config('app.name') }}</x-slot>
-
-    <div class="min-h-screen flex bg-white overflow-hidden">
-        
-        {{-- SISI KIRI: BRANDING --}}
-        <div class="hidden lg:flex lg:w-[35%] relative bg-slate-900 justify-center items-center p-8">
-            <div class="absolute inset-0 bg-cover bg-center opacity-30" style="background-image: url('https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=2564&auto=format&fit=crop');"></div>
-            <div class="absolute inset-0 bg-gradient-to-br from-slate-900 via-indigo-950 to-slate-900 opacity-95"></div>
-            
-            <div class="relative z-10 text-center w-full max-w-xs">
-                <div class="inline-flex p-6 mb-8 bg-white/5 backdrop-blur-2xl rounded-[3rem] border border-white/10 animate-logo-glow transition-all">
-                    @if(isset($setting) && isset($setting->app_logo))
-                        <img src="{{ asset('storage/' . $setting->app_logo) }}" alt="Logo" class="h-24 w-auto max-w-[160px] object-contain filter drop-shadow-2xl">
+    <div class="min-h-screen bg-slate-50 px-4 py-10 sm:flex sm:items-center sm:justify-center">
+        <div class="mx-auto grid w-full max-w-4xl overflow-hidden border border-slate-200 bg-white shadow-sm lg:grid-cols-[0.9fr_1.1fr]">
+            <div class="hidden border-r border-slate-200 bg-slate-100 p-10 lg:flex lg:flex-col lg:justify-between">
+                <div>
+                    @if(isset($setting->app_logo) && $setting->app_logo)
+                        <img src="{{ asset('storage/'.$setting->app_logo) }}" alt="Logo" class="mb-8 h-16 w-auto object-contain">
                     @else
-                        <div class="w-24 h-24 bg-indigo-600 rounded-[2rem] flex items-center justify-center text-4xl font-black text-white italic">I</div>
+                        <div class="mb-8 flex h-14 w-14 items-center justify-center rounded-lg bg-indigo-600 text-xl text-white"><i class="fas fa-cat"></i></div>
                     @endif
+                    <h1 class="text-2xl font-bold text-slate-900">{{ $setting->app_name ?? 'ILY Cattery' }}</h1>
+                    <p class="mt-3 max-w-sm text-sm leading-6 text-slate-600">Kelola data kucing, riwayat pembiakan, kesehatan, pedigree, dan persediaan dalam satu aplikasi.</p>
                 </div>
-
-                <h2 class="text-3xl font-black text-white tracking-tighter mb-2 uppercase">{{ $setting->app_name ?? 'Ily Cattery' }}</h2>
-                <p class="text-indigo-300 text-[10px] font-bold uppercase tracking-[0.4em] leading-relaxed italic opacity-70">{{ $setting->app_slogan ?? 'Intelligence Cattery System' }}</p>
+                <p class="text-xs text-slate-500">Akses hanya untuk pengguna yang terdaftar.</p>
             </div>
-        </div>
-
-        {{-- SISI KANAN: FORM LOGIN --}}
-        <div class="flex-1 flex items-center justify-center p-6 sm:p-12 lg:p-16 bg-slate-50/50">
-            <div class="w-full max-w-md space-y-10">
-                
-                <div class="space-y-2 text-center lg:text-left">
-                    <div class="lg:hidden flex justify-center mb-6">
-                        @if(isset($setting) && isset($setting->app_logo))
-                            <img src="{{ asset('storage/' . $setting->app_logo) }}" class="h-14 w-auto">
-                        @endif
-                    </div>
-                    <h3 class="text-3xl font-black text-slate-900 tracking-tight">Access Portal</h3>
-                    <p class="text-slate-500 font-medium text-sm">Gunakan kredensial Anda untuk masuk.</p>
+            <div class="p-6 sm:p-10 lg:p-12">
+                <div class="mb-8">
+                    <h2 class="text-2xl font-bold text-slate-900">Masuk ke ILYCats</h2>
+                    <p class="mt-2 text-sm text-slate-500">Gunakan email dan kata sandi akun Anda.</p>
                 </div>
-
-                <form method="POST" action="{{ route('login') }}" class="space-y-6">
-                    @csrf
-
-                    <div class="space-y-4">
-                        {{-- Email --}}
-                        <div class="group">
-                            <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2 block ml-1">Email / Username</label>
-                            <div class="relative">
-                                <span class="absolute inset-y-0 left-0 pl-5 flex items-center text-slate-300 group-focus-within:text-indigo-600 transition-colors">
-                                    <i class="fas fa-user-shield"></i>
-                                </span>
-                                <input type="email" name="email" :value="old('email')" required autofocus 
-                                       class="block w-full pl-12 pr-4 py-4 bg-white border border-slate-200 rounded-2xl text-slate-900 text-sm font-semibold focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500/30 transition-all outline-none shadow-sm"
-                                       placeholder="admin@ilycats.com">
-                            </div>
-                        </div>
-
-                        {{-- Password dengan Tombol View yang Proporsional --}}
-                        <div class="group">
-                            <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2 block ml-1">Password</label>
-                            <div class="relative flex items-center">
-                                <span class="absolute left-0 pl-5 flex items-center text-slate-300 group-focus-within:text-indigo-600 transition-colors">
-                                    <i class="fas fa-lock"></i>
-                                </span>
-                                
-                                <input id="password-field" type="password" name="password" required 
-                                       class="block w-full pl-12 pr-12 py-4 bg-white border border-slate-200 rounded-2xl text-slate-900 text-sm font-semibold focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500/30 transition-all outline-none shadow-sm" 
-                                       placeholder="••••••••">
-                                
-                                {{-- Tombol Toggle View: Diposisikan lebih proporsional --}}
-                                <button type="button" onclick="togglePassword()" 
-                                        class="absolute right-4 p-2 text-slate-300 hover:text-indigo-600 transition-colors focus:outline-none flex items-center justify-center">
-                                    <i id="toggle-icon" class="fas fa-eye text-sm"></i>
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div class="flex items-center justify-between px-1">
-                        <label class="inline-flex items-center cursor-pointer group">
-                            <input type="checkbox" name="remember" class="w-5 h-5 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500/20">
-                            <span class="ml-3 text-xs font-bold text-slate-500 group-hover:text-slate-800 transition-colors">Ingat Sesi</span>
-                        </label>
-                        @if (Route::has('password.request'))
-                            <!-- <a href="{{ route('password.request') }}" class="text-xs font-bold text-indigo-600 hover:text-indigo-700">Lupa Sandi?</a> -->
-                        @endif
-                    </div>
-
-                    <button type="submit" class="w-full py-4 bg-slate-900 hover:bg-indigo-700 text-white text-xs font-black uppercase tracking-[0.2em] rounded-2xl shadow-xl shadow-indigo-200 transition-all hover:-translate-y-1">
-                        Masuk Sistem
-                    </button>
+                <x-auth-session-status class="mb-4" :status="session('status')" />
+                <form method="POST" action="{{ route('login') }}" class="space-y-5">@csrf
+                    <div><label for="email" class="mb-2 block text-sm font-medium text-slate-700">Email</label><input id="email" type="email" name="email" value="{{ old('email') }}" required autofocus autocomplete="username" placeholder="nama@contoh.com" class="w-full border-slate-300 px-3 py-3 text-sm focus:border-indigo-500 focus:ring-indigo-500"></div>
+                    <div x-data="{show:false}"><label for="password-field" class="mb-2 block text-sm font-medium text-slate-700">Kata sandi</label><div class="relative"><input id="password-field" :type="show?'text':'password'" name="password" required autocomplete="current-password" class="w-full border-slate-300 px-3 py-3 pr-12 text-sm focus:border-indigo-500 focus:ring-indigo-500"><button type="button" @click="show=!show" class="absolute inset-y-0 right-0 px-4 text-slate-400" :aria-label="show?'Sembunyikan kata sandi':'Tampilkan kata sandi'"><i class="fas" :class="show?'fa-eye-slash':'fa-eye'"></i></button></div></div>
+                    <div class="flex items-center justify-between gap-4"><label class="flex items-center gap-2 text-sm text-slate-600"><input type="checkbox" name="remember" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500">Ingat saya di perangkat ini</label>@if(Route::has('password.request'))<a href="{{ route('password.request') }}" class="text-sm font-medium text-indigo-600 hover:text-indigo-700">Lupa kata sandi?</a>@endif</div>
+                    <button type="submit" class="w-full bg-indigo-600 px-4 py-3 text-sm font-semibold text-white hover:bg-indigo-700">Masuk</button>
+                    <button type="button" id="login-passkey" class="w-full border border-slate-300 bg-white px-4 py-3 text-sm font-semibold text-slate-700 hover:bg-slate-50"><i class="fas fa-fingerprint mr-2 text-slate-500"></i>Masuk dengan biometrik</button>
                 </form>
-
-                <div class="pt-8 text-center border-t border-slate-100">
-                    <p class="text-[9px] text-slate-400 font-bold uppercase tracking-widest opacity-60">
-                        {{ date('Y') }} {{ $setting->app_name ?? 'ILY CATTERY' }} • Encrypted Intelligence Access
-                    </p>
-                </div>
+                <p class="mt-8 border-t border-slate-200 pt-5 text-center text-xs text-slate-400">{{ date('Y') }} {{ $setting->app_name ?? 'ILY Cattery' }} · Akses aman</p>
             </div>
         </div>
     </div>
-
-    {{-- 2. JAVASCRIPT: TOGGLE PASSWORD LOGIC --}}
-    <script>
-        function togglePassword() {
-            const passwordField = document.getElementById('password-field');
-            const toggleIcon = document.getElementById('toggle-icon');
-            
-            if (passwordField.type === 'password') {
-                passwordField.type = 'text';
-                toggleIcon.classList.remove('fa-eye');
-                toggleIcon.classList.add('fa-eye-slash');
-            } else {
-                passwordField.type = 'password';
-                toggleIcon.classList.remove('fa-eye-slash');
-                toggleIcon.classList.add('fa-eye');
-            }
-        }
+    <script type="module">
+        import WebAuthn from "{{ asset('vendor/webauthn/webauthn.js') }}";
+        const btn=document.getElementById('login-passkey');
+        if(btn){btn.addEventListener('click',async()=>{const original=btn.innerHTML;try{btn.disabled=true;btn.textContent='Memeriksa biometrik…';const response=await (new WebAuthn()).login();if(response)window.location.href="{{ route('dashboard') }}";}catch(e){alert('Biometrik tidak dapat digunakan. Pastikan biometrik sudah didaftarkan pada profil Anda.');}finally{btn.disabled=false;btn.innerHTML=original;}})}
     </script>
-</x-guest-layout>
+</x-guest-layout>

resources/views/auth/register.blade.php

@@ -28,9 +28,9 @@
             <x-input-error :messages="$errors->get('password')" class="mt-2" />
         </div>
 
-        <!-- Confirm Password -->
+        <!-- Konfirmasi Kata Sandi -->
         <div class="mt-4">
-            <x-input-label for="password_confirmation" :value="__('Confirm Password')" />
+            <x-input-label for="password_confirmation" :value="__('Konfirmasi Kata Sandi')" />
 
             <x-text-input id="password_confirmation" class="block mt-1 w-full"
                             type="password"
@@ -41,11 +41,11 @@
 
         <div class="flex items-center justify-end mt-4">
             <a class="underline text-sm text-gray-600 hover:text-gray-900 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" href="{{ route('login') }}">
-                {{ __('Already registered?') }}
+                {{ __('Sudah memiliki akun?') }}
             </a>
 
             <x-primary-button class="ms-4">
-                {{ __('Register') }}
+                {{ __('Daftar') }}
             </x-primary-button>
         </div>
     </form>

resources/views/auth/reset-password.blade.php

@@ -19,9 +19,9 @@
             <x-input-error :messages="$errors->get('password')" class="mt-2" />
         </div>
 
-        <!-- Confirm Password -->
+        <!-- Konfirmasi Kata Sandi -->
         <div class="mt-4">
-            <x-input-label for="password_confirmation" :value="__('Confirm Password')" />
+            <x-input-label for="password_confirmation" :value="__('Konfirmasi Kata Sandi')" />
 
             <x-text-input id="password_confirmation" class="block mt-1 w-full"
                                 type="password"
@@ -32,7 +32,7 @@
 
         <div class="flex items-center justify-end mt-4">
             <x-primary-button>
-                {{ __('Reset Password') }}
+                {{ __('Atur ulang kata sandi') }}
             </x-primary-button>
         </div>
     </form>

resources/views/auth/verify-email.blade.php

@@ -24,7 +24,7 @@
             @csrf
 
             <button type="submit" class="underline text-sm text-gray-600 hover:text-gray-900 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
-                {{ __('Log Out') }}
+                {{ __('Keluar') }}
             </button>
         </form>
     </div>

resources/views/components/footer.blade.php

@@ -3,7 +3,7 @@
         @php
             // Mengambil data dari database dengan fallback jika data kosong
             $appName = \App\Models\Setting::where('key', 'app_name')->value('value') ?? 'Ily Cattery';
-            $appSlogan = \App\Models\Setting::where('key', 'app_slogan')->value('value') ?? 'Premium Breeding Management';
+            $appSlogan = \App\Models\Setting::where('key', 'app_slogan')->value('value') ?? 'Pengelolaan Cattery ILY';
         @endphp
         
         <div class="flex flex-col items-center gap-2">

resources/views/components/sidebar-link.blade.php

@@ -1,26 +1,43 @@
-@props(['active', 'icon'])
+@props([
+    'active' => false,
+    'icon' => null,
+    'tone' => 'indigo',
+])
 
 @php
-// Logika untuk menentukan class CSS jika link sedang aktif atau tidak
-$classes = ($active ?? false)
-            ? 'flex items-center px-4 py-2.5 text-sm font-bold text-indigo-700 bg-indigo-50 rounded-xl border border-indigo-100 transition-all'
-            : 'flex items-center px-4 py-2.5 text-sm font-medium text-slate-600 hover:bg-slate-50 hover:text-indigo-600 rounded-xl transition-all';
+    $classes = ($active ?? false)
+        ? 'group flex items-center rounded-xl bg-slate-100 px-2.5 py-2 text-sm font-bold text-slate-900 transition-all'
+        : 'group flex items-center rounded-xl px-2.5 py-2 text-sm font-medium text-slate-600 transition-all hover:bg-slate-50 hover:text-slate-900';
 
-$iconClasses = ($active ?? false)
-            ? 'text-indigo-600'
-            : 'text-slate-400 group-hover:text-indigo-500';
+    $tones = [
+        'indigo' => ['idle' => 'bg-indigo-50 text-indigo-600', 'active' => 'bg-indigo-600 text-white', 'paw' => 'text-indigo-500'],
+        'blue' => ['idle' => 'bg-blue-50 text-blue-600', 'active' => 'bg-blue-600 text-white', 'paw' => 'text-blue-500'],
+        'sky' => ['idle' => 'bg-sky-50 text-sky-600', 'active' => 'bg-sky-600 text-white', 'paw' => 'text-sky-500'],
+        'rose' => ['idle' => 'bg-rose-50 text-rose-600', 'active' => 'bg-rose-600 text-white', 'paw' => 'text-rose-500'],
+        'emerald' => ['idle' => 'bg-emerald-50 text-emerald-600', 'active' => 'bg-emerald-600 text-white', 'paw' => 'text-emerald-500'],
+        'amber' => ['idle' => 'bg-amber-50 text-amber-600', 'active' => 'bg-amber-500 text-white', 'paw' => 'text-amber-500'],
+        'violet' => ['idle' => 'bg-violet-50 text-violet-600', 'active' => 'bg-violet-600 text-white', 'paw' => 'text-violet-500'],
+        'cyan' => ['idle' => 'bg-cyan-50 text-cyan-600', 'active' => 'bg-cyan-600 text-white', 'paw' => 'text-cyan-500'],
+        'slate' => ['idle' => 'bg-slate-100 text-slate-600', 'active' => 'bg-slate-700 text-white', 'paw' => 'text-slate-500'],
+    ];
+
+    $toneSet = $tones[$tone] ?? $tones['indigo'];
+    $iconClasses = ($active ?? false) ? $toneSet['active'] : $toneSet['idle'];
 @endphp
 
 <a {{ $attributes->merge(['class' => $classes]) }}>
     @if($icon)
-        <i class="fas {{ $icon }} mr-3 w-5 text-center {{ $iconClasses }}"></i>
+        <span class="relative mr-3 flex h-8 w-8 shrink-0 items-center justify-center rounded-xl {{ $iconClasses }} transition-transform group-hover:-rotate-3 group-hover:scale-105">
+            <i class="fas {{ $icon }} text-sm"></i>
+            <span class="absolute -bottom-1 -right-1 flex h-3.5 w-3.5 items-center justify-center rounded-full border-2 border-white bg-white shadow-sm {{ $toneSet['paw'] }}">
+                <i class="fas fa-paw text-[6px]"></i>
+            </span>
+        </span>
     @endif
-    
-    <span class="truncate">
-        {{ $slot }}
-    </span>
+
+    <span class="truncate">{{ $slot }}</span>
 
     @if($active ?? false)
-        <span class="ml-auto w-1.5 h-1.5 rounded-full bg-indigo-600"></span>
+        <span class="ml-auto h-1.5 w-1.5 rounded-full bg-slate-700"></span>
     @endif
-</a>
+</a>

resources/views/components/status-badge.blade.php

@@ -4,14 +4,14 @@
     $cleanStatus = strtolower(trim($status ?? ''));
     $safeWords = ['sehat', 'normal', 'aktif', 'ok', 'good', 'sembuh', '-', ''];
     
-    $isHealthy = in_array($cleanStatus, $safeWords);
+    $isSehat = in_array($cleanStatus, $safeWords);
     
-    $classes = $isHealthy 
+    $classes = $isSehat 
         ? 'bg-green-100 text-green-700 border-green-200' 
         : 'bg-red-100 text-red-700 border-red-200';
 @endphp
 
 <span {{ $attributes->merge(['class' => "px-3 py-1 rounded-full text-xs font-bold border $classes"]) }}>
-    <i class="fas {{ $isHealthy ? 'fa-check-circle' : 'fa-pills' }} mr-1"></i>
-    {{ $isHealthy ? 'Sehat / Normal' : $status }}
+    <i class="fas {{ $isSehat ? 'fa-check-circle' : 'fa-pills' }} mr-1"></i>
+    {{ $isSehat ? 'Sehat / Normal' : $status }}
 </span>

resources/views/dashboard.blade.php

@@ -1,7 +1,7 @@
 <x-app-layout>
     <x-slot name="header">
         <h2 class="font-semibold text-xl text-gray-800 leading-tight">
-            {{ __('Dashboard') }}
+            {{ __('Beranda') }}
         </h2>
     </x-slot>
 

resources/views/layouts/app.blade.php

@@ -1,182 +1,46 @@
 <!DOCTYPE html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="h-full">
-    <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <meta name="csrf-token" content="{{ csrf_token() }}">
-
-        @php 
-            // Optimasi: Gunakan try-catch agar jika tabel settings belum dimigrasi, app tidak crash
-            try {
-                $settings = \App\Models\Setting::whereIn('key', ['app_name', 'app_slogan', 'app_favicon', 'app_version'])
-                            ->pluck('value', 'key');
-            } catch (\Exception $e) {
-                $settings = collect();
-            }
-            
-            $appName = $settings['app_name'] ?? config('app.name', 'Ily Cattery');
-            $appSlogan = $settings['app_slogan'] ?? 'Dedikasi untuk Kesehatan dan Kebahagiaan Anabul';
-            $appVersion = $settings['app_version'] ?? 'v1.0.0';
-            $favicon = $settings['app_favicon'] ?? null;
-        @endphp
-
-        <link rel="icon" type="image/x-icon" href="{{ $favicon ? Storage::url($favicon) : asset('favicon.ico') }}">
-
-        <title>{{ $appName }}</title>
-
-        {{-- Fonts & Icons --}}
-        <link rel="preconnect" href="https://fonts.bunny.net">
-        <link href="https://fonts.bunny.net/css?family=figtree:400,500,600,800,900&display=swap" rel="stylesheet" />
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
-
-        {{-- Scripts & Styles --}}
-        @vite(['resources/css/app.css', 'resources/js/app.js'])
-
-        @stack('styles')
-
-        <style>
-            .custom-scrollbar::-webkit-scrollbar { width: 6px; }
-            .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
-            .custom-scrollbar::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 10px; }
-            .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #cbd5e1; }
-            [x-cloak] { display: none !important; }
-            
-            /* Animasi Fade In untuk Main Content */
-            .page-fade-in { animation: fadeIn 0.4s ease-out; }
-            @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
-        </style>
-    </head>
-    <body class="font-sans antialiased text-slate-900 bg-slate-50 h-full overflow-hidden">
-        
-        <div class="flex h-screen overflow-hidden">
-            
-            {{-- Sidebar Navigation --}}
-            @include('layouts.navigation-sidebar')
-
-            <div class="flex-1 flex flex-col min-w-0 bg-slate-50 relative">
-                
-                {{-- Top Navigation --}}
-                @include('layouts.navigation')
-
-                {{-- Main Content Area --}}
-                <main class="flex-1 overflow-y-auto custom-scrollbar flex flex-col">
-                    <div class="max-w-7xl mx-auto w-full p-4 md:p-8 flex-grow page-fade-in">
-                        
-                        {{-- Notifikasi Error/Validasi (Hanya muncul jika bukan AJAX) --}}
-                        @if ($errors->any())
-                            <div x-data="{ show: true }" x-show="show" x-cloak
-                                 class="mb-6 p-4 bg-rose-50 border-2 border-rose-100 text-rose-700 rounded-3xl flex items-start shadow-sm transition-all">
-                                <i class="fas fa-exclamation-circle mt-0.5 mr-3 text-lg"></i>
-                                <div>
-                                    <h4 class="text-[11px] font-black uppercase tracking-widest mb-1">Terjadi Kesalahan Input:</h4>
-                                    <ul class="list-disc list-inside text-[10px] font-bold opacity-80">
-                                        @foreach ($errors->all() as $error)
-                                            <li>{{ $error }}</li>
-                                        @endforeach
-                                    </ul>
-                                </div>
-                                <button @click="show = false" class="ml-auto text-rose-300 hover:text-rose-500"><i class="fas fa-times"></i></button>
-                            </div>
-                        @endif
-
-                        {{-- Main Slot (Halaman Konten Anda) --}}
-                        {{ $slot }}
-
-                    </div>
-
-                    {{-- Footer --}}
-                    <footer class="w-full py-8 border-t border-slate-100 mt-auto bg-white/50 backdrop-blur-md">
-                        <div class="max-w-7xl mx-auto px-8 text-center">
-                            <p class="text-[10px] font-black text-slate-400 uppercase tracking-[0.3em] mb-1">
-                                {{ $appName }}
-                            </p>
-                            <p class="text-[9px] text-slate-300 font-bold tracking-widest italic uppercase">
-                                {{ $appSlogan }} — {{ $appVersion }}
-                            </p>
-                        </div>
-                    </footer>
-                </main>
-            </div>
+<html lang="id" class="h-full">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="csrf-token" content="{{ csrf_token() }}">
+    @php
+        $appName = \App\Models\Setting::where('key','app_name')->value('value') ?? config('app.name','ILY Cattery');
+        $favicon = \App\Models\Setting::where('key','app_favicon')->value('value');
+    @endphp
+    <title>{{ $appName }}</title>
+    <link rel="icon" href="{{ $favicon ? Storage::url($favicon) : asset('favicon.ico') }}">
+    <link rel="preconnect" href="https://fonts.bunny.net">
+    <link href="https://fonts.bunny.net/css?family=inter:400,500,600,700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+    @vite(['resources/css/app.css','resources/js/app.js'])
+    @stack('styles')
+    <style>[x-cloak]{display:none!important}</style>
+</head>
+<body class="h-full bg-slate-50 font-sans text-slate-800 antialiased" x-data="{sidebarOpen: window.innerWidth >= 1024}" @resize.window="if(window.innerWidth>=1024) sidebarOpen=true">
+    <div class="flex min-h-screen">
+        @include('layouts.navigation-sidebar')
+        <div class="flex min-w-0 flex-1 flex-col">
+            @include('layouts.navigation')
+            <main class="flex-1 overflow-y-auto">
+                <div class="mx-auto w-full max-w-[1500px] p-4 md:p-6 lg:p-8">
+                    @if($errors->any())
+                        <div class="mb-5 border border-rose-200 bg-rose-50 p-4 text-sm text-rose-700"><p class="font-semibold">Periksa kembali data yang diisi.</p><ul class="mt-1 list-disc pl-5">@foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul></div>
+                    @endif
+                    @if(session('success'))<div class="mb-5 border border-emerald-200 bg-emerald-50 p-4 text-sm text-emerald-700">{{ session('success') }}</div>@endif
+                    @if(session('error'))<div class="mb-5 border border-rose-200 bg-rose-50 p-4 text-sm text-rose-700">{{ session('error') }}</div>@endif
+                    @if(session('warning'))<div class="mb-5 border border-amber-200 bg-amber-50 p-4 text-sm text-amber-700">{{ session('warning') }}</div>@endif
+                    {{ $slot }}
+                </div>
+            </main>
         </div>
-
-        {{-- SWEETALERT 2 INTEGRATION --}}
-        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
-        <script>
-            document.addEventListener('DOMContentLoaded', function() {
-                
-                // 1. KONFIGURASI TOAST
-                const IlyToast = Swal.mixin({
-                    toast: true,
-                    position: 'top-end',
-                    showConfirmButton: false,
-                    timer: 3500,
-                    timerProgressBar: true,
-                    didOpen: (toast) => {
-                        toast.addEventListener('mouseenter', Swal.stopTimer)
-                        toast.addEventListener('mouseleave', Swal.resumeTimer)
-                    },
-                    customClass: {
-                        popup: 'rounded-2xl shadow-2xl border border-slate-50 p-4',
-                        title: 'text-[11px] font-black uppercase tracking-widest ml-2'
-                    }
-                });
-
-                // 2. FUNGSI GLOBAL TOAST (Bisa dipanggil di file JS manapun)
-                window.showToast = function(message, icon = 'success') {
-                    IlyToast.fire({
-                        icon: icon,
-                        title: message,
-                        iconColor: icon === 'success' ? '#4f46e5' : '#e11d48',
-                    });
-                }
-
-                // 3. AUTO-TRIGGER FLASH MESSAGE
-                @if(session('success'))
-                    showToast("{{ session('success') }}", 'success');
-                @endif
-
-                @if(session('error'))
-                    showToast("{{ session('error') }}", 'error');
-                @endif
-
-                // 4. FUNGSI GLOBAL KONFIRMASI DELETE (Universal)
-                // Mendukung pemanggilan via ID Form (confirmDelete('formId', 'Nama'))
-                // Atau pemanggilan via Element (confirmDelete(this, 'Nama'))
-                window.confirmDelete = function(target, itemName = 'Data ini') {
-                    const finalName = itemName || 'Data terpilih';
-                    
-                    Swal.fire({
-                        title: 'HAPUS DATA?',
-                        html: "<div class='text-sm text-slate-500 font-medium'>Anda akan menghapus:<br><b class='text-slate-800 uppercase tracking-tighter'>" + finalName + "</b><br><br><span class='text-rose-500 font-bold italic'>Peringatan: Data yang dihapus tidak dapat dipulihkan!</span></div>",
-                        icon: 'warning',
-                        iconColor: '#e11d48',
-                        showCancelButton: true,
-                        confirmButtonColor: '#e11d48',
-                        cancelButtonColor: '#f1f5f9',
-                        confirmButtonText: 'YA, HAPUS PERMANEN',
-                        cancelButtonText: 'BATAL',
-                        reverseButtons: true,
-                        customClass: {
-                            popup: 'rounded-[2.5rem] p-10 border-none shadow-2xl',
-                            confirmButton: 'rounded-2xl font-black uppercase text-[10px] px-8 py-4 ml-3 tracking-widest shadow-lg shadow-rose-100',
-                            cancelButton: 'rounded-2xl font-black uppercase text-[10px] px-8 py-4 text-slate-500 tracking-widest'
-                        }
-                    }).then((result) => {
-                        if (result.isConfirmed) {
-                            // Logic: Jika target adalah string, cari by ID. Jika object, cari closest form.
-                            if (typeof target === 'string') {
-                                const form = document.getElementById(target);
-                                if(form) form.submit();
-                            } else {
-                                const form = target.closest('form');
-                                if(form) form.submit();
-                            }
-                        }
-                    });
-                }
-            });
-        </script>
-
-        @stack('scripts')
-    </body>
-</html>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+    <script>
+        window.confirmDelete=function(target,itemName='data ini'){
+            Swal.fire({title:'Hapus data?',text:`${itemName} akan dihapus.`,icon:'warning',showCancelButton:true,confirmButtonText:'Hapus',cancelButtonText:'Batal',confirmButtonColor:'#e11d48'}).then(r=>{if(r.isConfirmed){if(typeof target==='string')document.getElementById(target)?.submit();else target.closest('form')?.submit();}})
+        }
+    </script>
+    @stack('scripts')
+</body>
+</html>

resources/views/layouts/navigation-sidebar.blade.php

@@ -1,167 +1,97 @@
-<aside class="w-72 bg-white border-r border-slate-200 hidden lg:flex flex-col sticky top-0 h-screen transition-all shadow-sm">
-    
-    @php
-        $appSettings = \Illuminate\Support\Facades\Cache::remember('app_sidebar_settings', 3600, function() {
-            return \App\Models\Setting::whereIn('key', ['app_logo', 'app_name'])->pluck('value', 'key');
-        });
-        $appName = $appSettings['app_name'] ?? 'Ily Cattery';
+@php
+    $appName = \App\Models\Setting::where('key', 'app_name')->value('value') ?? 'ILY Cattery';
+    $appLogo = \App\Models\Setting::where('key', 'app_logo')->value('value');
+    $lowObatsCount = \App\Models\Medicine::where('qty', '<', 5)->count();
+    $lowMakananCount = \App\Models\Food::where('qty', '<', 5)->count();
+@endphp
 
-        $lowMedicinesCount = \App\Models\Medicine::where('qty', '<', 5)->count();
-        $lowFoodsCount = \App\Models\Food::where('qty', '<', 5)->count();
-    @endphp
-
-    {{-- Brand Header --}}
-    <div class="p-8 flex items-center gap-4">
-        <div class="w-12 h-12 bg-indigo-600 rounded-[1.25rem] flex items-center justify-center shadow-xl shadow-indigo-100">
-            <i class="fas fa-cat text-white text-xl"></i>
-        </div>
+<div x-show="sidebarOpen" x-cloak @click="sidebarOpen=false" class="fixed inset-0 z-30 bg-slate-900/30 lg:hidden"></div>
+<aside :class="sidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'"
+       class="fixed inset-y-0 left-0 z-40 flex w-64 shrink-0 flex-col border-r border-slate-200 bg-white transition-transform duration-200 lg:static lg:z-auto">
+    <div class="flex h-16 items-center gap-3 border-b border-slate-200 px-5">
+        @if($appLogo)
+            <img src="{{ Storage::url($appLogo) }}" alt="Logo {{ $appName }}" class="h-9 w-9 rounded-lg object-contain">
+        @else
+            <div class="flex h-9 w-9 items-center justify-center rounded-lg bg-indigo-600 text-white"><i class="fas fa-cat"></i></div>
+        @endif
         <div class="min-w-0">
-            <h1 class="text-sm font-black text-slate-800 uppercase tracking-tighter truncate leading-none mb-1">{{ $appName }}</h1>
-            <p class="text-[9px] font-black text-slate-400 uppercase tracking-[0.2em] leading-none">Management System</p>
+            <div class="truncate text-sm font-bold text-slate-900">{{ $appName }}</div>
+            <div class="text-xs text-slate-500">Manajemen cattery</div>
         </div>
+        <button @click="sidebarOpen=false" class="ml-auto p-2 text-slate-400 lg:hidden" aria-label="Tutup menu"><i class="fas fa-times"></i></button>
     </div>
 
-    {{-- Navigation Links --}}
-    <nav class="flex-1 px-4 space-y-1 overflow-y-auto custom-scrollbar">
-        
-        <x-sidebar-link :href="route('dashboard')" :active="request()->routeIs('dashboard')" icon="fa-th-large">
-            Dashboard
-        </x-sidebar-link>
+    <nav class="flex-1 overflow-y-auto px-3 py-4">
+        <div class="space-y-1">
+            <x-sidebar-link :href="route('dashboard')" :active="request()->routeIs('dashboard') && !request()->boolean('weight_focus')" icon="fa-house" tone="indigo">Beranda</x-sidebar-link>
+            <x-sidebar-link :href="route('dashboard', ['weight_focus' => 1]) . '#pemantauan-berat'" :active="request()->routeIs('dashboard') && request()->boolean('weight_focus')" icon="fa-weight-scale" tone="blue">Berat badan</x-sidebar-link>
+        </div>
 
-        {{-- OPERASIONAL --}}
-        @if(Gate::allows('check-access', ['cats', 'read']) || Gate::allows('check-access', ['matting', 'read']))
-            <div class="pt-6 pb-2 px-5 text-[9px] font-black text-slate-400 uppercase tracking-[0.3em] flex items-center gap-3">
-                <span>Operasional</span>
-                <div class="h-px bg-slate-100 flex-1"></div>
+        @if(Gate::allows('check-access', ['cats','read']) || Gate::allows('check-access', ['matting','read']) || Gate::allows('check-access', ['treatments','read']))
+        <div class="mt-6">
+            <p class="px-3 pb-2 text-xs font-semibold text-slate-400">Operasional</p>
+            <div class="space-y-1">
+                @can('check-access', ['cats','read'])
+                    <x-sidebar-link :href="route('cats.index')" :active="request()->routeIs('cats.*')" icon="fa-cat" tone="sky">Data kucing</x-sidebar-link>
+                @endcan
+                @can('check-access', ['matting','read'])
+                    <x-sidebar-link :href="route('matting.index')" :active="request()->routeIs('matting.*')" icon="fa-paw" tone="rose">Perkawinan & pembiakan</x-sidebar-link>
+                @endcan
+                @can('check-access', ['treatments','read'])
+                    <x-sidebar-link :href="route('treatments.index')" :active="request()->routeIs('treatments.*')" icon="fa-notes-medical" tone="emerald">Rekam medis</x-sidebar-link>
+                @endcan
+                @can('check-access', ['medical_insights','read'])
+                    <x-sidebar-link :href="route('medical.dashboard')" :active="request()->routeIs('medical.dashboard')" icon="fa-heart-pulse" tone="rose">Ringkasan kesehatan</x-sidebar-link>
+                @endcan
             </div>
-
-            @can('check-access', ['cats', 'read'])
-            <x-sidebar-link :href="route('cats.index')" :active="request()->routeIs('cats.*')" icon="fa-paw">
-                Data Kucing
-            </x-sidebar-link>
-            @endcan
-
-            @can('check-access', ['matting', 'read'])
-            <x-sidebar-link :href="route('matting.index')" :active="request()->routeIs('matting.*')" icon="fa-venus-mars">
-                <span class="flex-1">Matting Cat</span>
-                <span class="text-[8px] bg-emerald-100 text-emerald-600 px-1.5 py-0.5 rounded font-black uppercase italic">Breeding</span>
-            </x-sidebar-link>
-            @endcan
+        </div>
         @endif
 
-        {{-- LOGISTIK (CONTOH DROPDOWN) --}}
-        @if(Gate::allows('check-access', ['medicines', 'read']) || Gate::allows('check-access', ['foods', 'read']) || Gate::allows('check-access', ['supplies', 'read']) || Gate::allows('check-access', ['categories', 'read']))
-            <div class="pt-6 pb-2 px-5 text-[9px] font-black text-slate-400 uppercase tracking-[0.3em] flex items-center gap-3">
-                <span>Inventori</span>
-                <div class="h-px bg-slate-100 flex-1"></div>
+        @if(Gate::allows('check-access', ['medicines','read']) || Gate::allows('check-access', ['foods','read']) || Gate::allows('check-access', ['supplies','read']) || Gate::allows('check-access', ['categories','read']))
+        <div class="mt-6">
+            <div class="flex items-center justify-between px-3 pb-2">
+                <p class="text-xs font-semibold text-slate-400">Inventori</p>
+                @if(($lowObatsCount+$lowMakananCount)>0)<span class="rounded bg-rose-50 px-1.5 py-0.5 text-xs font-semibold text-rose-600">{{ $lowObatsCount+$lowMakananCount }}</span>@endif
             </div>
-
-            {{-- Parent Dropdown Logistik --}}
-            <div x-data="{ open: {{ request()->routeIs('inventory.*') || request()->routeIs('categories.*') ? 'true' : 'false' }} }">
-                <button @click="open = !open" 
-                    class="w-full flex items-center gap-3 px-5 py-3 text-xs font-bold rounded-2xl transition-all {{ request()->routeIs('inventory.*') ? 'bg-indigo-50 text-indigo-600' : 'text-slate-500 hover:bg-slate-50' }}">
-                    <i class="fas fa-box-open w-5 text-center"></i>
-                    <span class="flex-1 text-left">Gudang Logistik</span>
-                    <i class="fas fa-chevron-down text-[10px] transition-transform duration-200" :class="open ? 'rotate-180' : ''"></i>
-                </button>
-
-                {{-- Sub-menu Items --}}
-                <div x-show="open" x-cloak x-collapse class="mt-1 ml-4 pl-4 border-l border-slate-100 space-y-1">
-                    @can('check-access', ['medicines', 'read'])
-                    <x-sidebar-link :href="route('inventory.medicines.index')" :active="request()->routeIs('inventory.medicines.*')" icon="fa-pills">
-                        <span class="flex-1">Obat & Vitamin</span>
-                        @if($lowMedicinesCount > 0)
-                            <span class="bg-rose-500 text-white text-[9px] font-black px-2 py-0.5 rounded-lg animate-pulse">{{ $lowMedicinesCount }}</span>
-                        @endif
-                    </x-sidebar-link>
-                    @endcan
-
-                    @can('check-access', ['foods', 'read'])
-                    <x-sidebar-link :href="route('inventory.foods.index')" :active="request()->routeIs('inventory.foods.*')" icon="fa-bowl-food">
-                        <span class="flex-1">Stok Makanan</span>
-                        @if($lowFoodsCount > 0)
-                            <span class="bg-rose-500 text-white text-[9px] font-black px-2 py-0.5 rounded-lg">{{ $lowFoodsCount }}</span>
-                        @endif
-                    </x-sidebar-link>
-                    @endcan
-
-                    @can('check-access', ['supplies', 'read'])
-                    <x-sidebar-link :href="route('inventory.supplies.index')" :active="request()->routeIs('inventory.supplies.*')" icon="fa-box-archive">
-                        Perlengkapan
-                    </x-sidebar-link>
-                    @endcan
-
-                    @can('check-access', ['categories', 'read'])
-                    <x-sidebar-link :href="route('categories.index')" :active="request()->routeIs('categories.*')" icon="fa-tags">
-                        Master Kategori
-                    </x-sidebar-link>
-                    @endcan
-                </div>
+            <div class="space-y-1">
+                @can('check-access', ['medicines','read'])<x-sidebar-link :href="route('inventory.medicines.index')" :active="request()->routeIs('inventory.medicines.*')" icon="fa-pills" tone="violet">Obat & vitamin</x-sidebar-link>@endcan
+                @can('check-access', ['foods','read'])<x-sidebar-link :href="route('inventory.foods.index')" :active="request()->routeIs('inventory.foods.*')" icon="fa-bowl-food" tone="amber">Makanan</x-sidebar-link>@endcan
+                @can('check-access', ['supplies','read'])<x-sidebar-link :href="route('inventory.supplies.index')" :active="request()->routeIs('inventory.supplies.*')" icon="fa-box-open" tone="cyan">Perlengkapan</x-sidebar-link>@endcan
+                @can('check-access', ['categories','read'])<x-sidebar-link :href="route('categories.index')" :active="request()->routeIs('categories.*')" icon="fa-tags" tone="slate">Kategori</x-sidebar-link>@endcan
             </div>
+        </div>
         @endif
 
-        {{-- INTELLIGENCE --}}
-        @if(Gate::allows('check-access', ['reports', 'read']) || Gate::allows('check-access', ['matting_reports', 'read']))
-            <div class="pt-6 pb-2 px-5 text-[9px] font-black text-indigo-500 uppercase tracking-[0.3em] flex items-center gap-3">
-                <span>Intelligence</span>
-                <div class="h-px bg-indigo-50 flex-1"></div>
+        @if(Gate::allows('check-access', ['reports','read']) || Gate::allows('check-access', ['matting_reports','read']))
+        <div class="mt-6">
+            <p class="px-3 pb-2 text-xs font-semibold text-slate-400">Laporan</p>
+            <div class="space-y-1">
+                @can('check-access', ['reports','read'])<x-sidebar-link :href="route('admin.reports.index')" :active="request()->routeIs('admin.reports.index')" icon="fa-chart-line" tone="blue">Pusat laporan</x-sidebar-link>@endcan
+                @can('check-access', ['matting_reports','read'])<x-sidebar-link :href="route('admin.reports.matting.index')" :active="request()->routeIs('admin.reports.matting.*')" icon="fa-file-lines" tone="rose">Laporan pembiakan</x-sidebar-link>@endcan
             </div>
-
-            @can('check-access', ['reports', 'read'])
-            <x-sidebar-link :href="route('admin.reports.index')" :active="request()->routeIs('admin.reports.index')" icon="fa-chart-line">
-                Pusat Laporan
-            </x-sidebar-link>
-            @endcan
-
-            @can('check-access', ['matting_reports', 'read'])
-            <x-sidebar-link :href="route('admin.reports.matting.index')" :active="request()->routeIs('admin.reports.matting')" icon="fa-file-medical">
-                <span class="flex-1">Laporan Breeding</span>
-                <span class="text-[8px] bg-rose-100 text-rose-600 px-1.5 py-0.5 rounded font-black uppercase shadow-sm">Special</span>
-            </x-sidebar-link>
-            @endcan
+        </div>
         @endif
 
-        {{-- KONFIGURASI (DROPDOWN) --}}
-        @if(Gate::allows('check-access', ['users', 'read']) || Gate::allows('check-access', ['roles', 'read']) || Gate::allows('check-access', ['logs', 'read']) || Gate::allows('check-access', ['settings', 'read']))
-            <div class="pt-8 pb-2 px-5 text-[9px] font-black text-rose-500 uppercase tracking-[0.3em] flex items-center gap-3">
-                <span>Konfigurasi</span>
-                <div class="h-px bg-rose-50 flex-1"></div>
-            </div>
-
-            <div x-data="{ open: {{ request()->routeIs('admin.users.*') || request()->routeIs('admin.roles.*') || request()->routeIs('admin.settings.*') ? 'true' : 'false' }} }">
-                <button @click="open = !open" 
-                    class="w-full flex items-center gap-3 px-5 py-3 text-xs font-bold rounded-2xl transition-all {{ request()->routeIs('admin.*') ? 'bg-rose-50 text-rose-600' : 'text-slate-500 hover:bg-slate-50' }}">
-                    <i class="fas fa-cog w-5 text-center"></i>
-                    <span class="flex-1 text-left">Sistem Control</span>
-                    <i class="fas fa-chevron-down text-[10px] transition-transform duration-200" :class="open ? 'rotate-180' : ''"></i>
-                </button>
-
-                <div x-show="open" x-cloak x-collapse class="mt-1 ml-4 pl-4 border-l border-rose-100 space-y-1">
-                    @can('check-access', ['users', 'read'])
-                    <x-sidebar-link :href="route('admin.users.index')" :active="request()->routeIs('admin.users.*')" icon="fa-users-cog">
-                        Manajemen User
-                    </x-sidebar-link>
-                    @endcan
-
-                    @can('check-access', ['roles', 'read'])
-                    <x-sidebar-link :href="route('admin.roles.index')" :active="request()->routeIs('admin.roles.*')" icon="fa-user-shield">
-                        Role Management
-                    </x-sidebar-link>
-                    @endcan
-
-                    @can('check-access', ['logs', 'read'])
-                    <x-sidebar-link :href="route('admin.logs.index')" :active="request()->routeIs('admin.logs.*')" icon="fa-history">
-                        Log Audit
-                    </x-sidebar-link>   
-                    @endcan
-
-                    @can('check-access', ['settings', 'read'])
-                    <x-sidebar-link :href="route('admin.settings.index')" :active="request()->routeIs('admin.settings.*')" icon="fa-sliders-h">
-                        Pengaturan Sistem
-                    </x-sidebar-link>
-                    @endcan
-                </div>
+        @if(Gate::allows('check-access', ['users','read']) || Gate::allows('check-access', ['roles','read']) || Gate::allows('check-access', ['logs','read']) || Gate::allows('check-access', ['settings','read']))
+        <div class="mt-6">
+            <p class="px-3 pb-2 text-xs font-semibold text-slate-400">Administrasi</p>
+            <div class="space-y-1">
+                @can('check-access', ['users','read'])<x-sidebar-link :href="route('admin.users.index')" :active="request()->routeIs('admin.users.*')" icon="fa-user-group" tone="sky">Pengguna</x-sidebar-link>@endcan
+                @can('check-access', ['roles','read'])<x-sidebar-link :href="route('admin.roles.index')" :active="request()->routeIs('admin.roles.*')" icon="fa-shield-halved" tone="violet">Hak akses</x-sidebar-link>@endcan
+                @can('check-access', ['logs','read'])<x-sidebar-link :href="route('admin.logs.index')" :active="request()->routeIs('admin.logs.*')" icon="fa-clock-rotate-left" tone="amber">Jejak aktivitas</x-sidebar-link>@endcan
+                @can('check-access', ['settings','read'])<x-sidebar-link :href="route('admin.settings.index')" :active="request()->routeIs('admin.settings.*')" icon="fa-gear" tone="slate">Pengaturan</x-sidebar-link>@endcan
             </div>
+        </div>
         @endif
     </nav>
-</aside>
+
+    <div class="border-t border-slate-200 p-4">
+        <div class="mb-3 flex items-center gap-3 px-1">
+            <div class="flex h-8 w-8 items-center justify-center rounded-full bg-slate-100 text-xs font-bold text-slate-700">{{ strtoupper(substr(auth()->user()->name,0,1)) }}</div>
+            <div class="min-w-0"><p class="truncate text-sm font-semibold text-slate-800">{{ auth()->user()->name }}</p><p class="truncate text-xs text-slate-500">{{ auth()->user()->roleModel?->name ?? auth()->user()->getRawOriginal('role') ?? 'Pengguna' }}</p></div>
+        </div>
+        <form method="POST" action="{{ route('logout') }}">@csrf
+            <button class="flex w-full items-center gap-3 px-3 py-2 text-sm font-medium text-slate-600 hover:bg-slate-50 hover:text-rose-600"><i class="fas fa-right-from-bracket w-5"></i>Keluar</button>
+        </form>
+    </div>
+</aside>

resources/views/layouts/navigation.blade.php

@@ -1,210 +1,12 @@
-<nav x-data="{ open: false }" class="bg-white/80 backdrop-blur-md border-b border-slate-100 sticky top-0 z-50 shadow-sm">
-    @php
-        $appLogo = \App\Models\Setting::where('key', 'app_logo')->value('value');
-        $appName = \App\Models\Setting::where('key', 'app_name')->value('value') ?? 'ILY Aregau';
-    @endphp
-
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div class="flex justify-between h-20"> 
-            <div class="flex">
-                {{-- Logo Section --}}
-                <div class="shrink-0 flex items-center">
-                    <a href="{{ route('dashboard') }}" class="flex items-center gap-4 group">
-                        <div class="flex items-center justify-center transition-transform duration-300 group-hover:scale-105">
-                            @if($appLogo)
-                                <img src="{{ Storage::url($appLogo) }}" alt="Logo {{ $appName }}" class="h-16 w-auto max-w-[200px] object-contain object-left">
-                            @else
-                                <div class="w-10 h-10 bg-indigo-600 rounded-xl flex items-center justify-center text-white font-black text-xs shadow-lg">
-                                    {{ strtoupper(substr($appName, 0, 2)) }}
-                                </div>
-                            @endif
-                        </div>
-                        <div class="hidden md:flex flex-col border-l-2 border-slate-100 pl-4">
-                            <span class="text-base font-black text-slate-800 uppercase tracking-tighter leading-none">{{ $appName }}</span>
-                            <span class="text-[9px] font-bold text-indigo-600 uppercase tracking-[0.2em] mt-1 italic">Cattery Management</span>
-                        </div>
-                    </a>
-                </div>
-            </div>
-
-            {{-- MENU DESKTOP (USER PROFILE DROPDOWN) --}}
-            <div class="hidden lg:flex lg:items-center lg:ms-6">
-                <x-dropdown align="right" width="48">
-                    <x-slot name="trigger">
-                        <button class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-black rounded-xl text-slate-500 bg-slate-50 hover:text-indigo-600 hover:bg-indigo-50 transition ease-in-out duration-150">
-                            <div class="w-8 h-8 bg-indigo-600 text-white rounded-lg flex items-center justify-center text-[10px] mr-2 shadow-sm">
-                                {{ strtoupper(substr(Auth::user()->name, 0, 1)) }}
-                            </div>
-                            <div>{{ Auth::user()->name }}</div>
-                            <div class="ms-1">
-                                <svg class="fill-current h-4 w-4" viewBox="0 0 20 20">
-                                    <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
-                                </svg>
-                            </div>
-                        </button>
-                    </x-slot>
-
-                    <x-slot name="content">
-                        <div class="px-4 py-2 border-b border-slate-50">
-                            <p class="text-[10px] font-black text-slate-800 uppercase tracking-tighter">{{ Auth::user()->name }}</p>
-                            <p class="text-[8px] font-bold text-slate-400 truncate">{{ Auth::user()->email }}</p>
-                        </div>
-                        <x-dropdown-link :href="route('profile.edit')" class="text-[10px] font-bold uppercase tracking-widest">
-                            <i class="fas fa-user-circle mr-2 opacity-50"></i> {{ __('My Profile') }}
-                        </x-dropdown-link>
-                        <form method="POST" action="{{ route('logout') }}">
-                            @csrf
-                            <x-dropdown-link :href="route('logout')" class="text-[10px] font-black uppercase tracking-widest text-rose-500"
-                                    onclick="event.preventDefault(); this.closest('form').submit();">
-                                <i class="fas fa-sign-out-alt mr-2"></i> {{ __('Log Out') }}
-                            </x-dropdown-link>
-                        </form>
-                    </x-slot>
-                </x-dropdown>
-            </div>
-
-            {{-- Hamburger Button (Hanya Mobile) --}}
-            <div class="-me-2 flex items-center lg:hidden">
-                <button @click="open = ! open" class="inline-flex items-center justify-center p-2 rounded-xl text-slate-400 hover:text-indigo-600 hover:bg-indigo-50 transition-all duration-200 focus:outline-none">
-                    <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
-                        <path :class="{'hidden': open, 'inline-flex': ! open }" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
-                        <path :class="{'hidden': ! open, 'inline-flex': open }" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-                    </svg>
-                </button>
-            </div>
+<header class="sticky top-0 z-20 flex h-16 items-center justify-between border-b border-slate-200 bg-white px-4 md:px-6">
+    <div class="flex items-center gap-3">
+        <button @click="sidebarOpen=true" class="p-2 text-slate-600 lg:hidden" aria-label="Buka menu"><i class="fas fa-bars"></i></button>
+        <div>
+            <p class="text-sm font-semibold text-slate-900">{{ \App\Models\Setting::where('key','app_name')->value('value') ?? 'ILY Cattery' }}</p>
+            <p class="hidden text-xs text-slate-500 sm:block">Data cattery, pembiakan, kesehatan, dan persediaan</p>
         </div>
     </div>
-
-    {{-- MOBILE MENU ACCORDION --}}
-    <div x-show="open" 
-         x-cloak
-         x-data="{ activeMenu: 'dashboard' }"
-         x-transition:enter="transition ease-out duration-200"
-         x-transition:enter-start="opacity-0 -translate-y-4"
-         x-transition:enter-end="opacity-100 translate-y-0"
-         class="lg:hidden bg-white border-t border-slate-100 shadow-xl overflow-y-auto max-h-[85vh]">
-        
-        <div class="pt-2 pb-3 space-y-0.5 px-3">
-            {{-- 1. DASHBOARD --}}
-            <x-responsive-nav-link :href="route('dashboard')" :active="request()->routeIs('dashboard')" class="rounded-lg font-black text-[8.5px] uppercase tracking-widest py-2">
-                <i class="fas fa-th-large mr-2 w-4"></i> Dashboard
-            </x-responsive-nav-link>
-
-            {{-- 2. CATTERY & MEDICAL --}}
-            <div class="border-t border-slate-50">
-                <button @click="activeMenu = activeMenu === 'cattery' ? '' : 'cattery'" class="w-full flex justify-between items-center px-3 py-2.5 text-[7px] font-black text-slate-400 uppercase tracking-[0.2em]">
-                    <span>Cattery & Medical</span>
-                    <i class="fas fa-chevron-down transition-transform" :class="activeMenu === 'cattery' ? 'rotate-180' : ''"></i>
-                </button>
-                <div x-show="activeMenu === 'cattery'" x-collapse class="bg-slate-50/50 rounded-lg">
-                    <x-responsive-nav-link :href="route('cats.index')" :active="request()->routeIs('cats.*')" class="text-[8.5px] font-bold py-2">
-                        <i class="fas fa-cat mr-2 w-4"></i> Data Kucing
-                    </x-responsive-nav-link>
-                    <x-responsive-nav-link :href="route('matting.index')" :active="request()->routeIs('matting.*')" class="text-[8.5px] font-bold py-2">
-                        <i class="fas fa-heart mr-2 w-4"></i> Breeding
-                    </x-responsive-nav-link>
-                    <x-responsive-nav-link :href="route('treatments.index')" :active="request()->routeIs('treatments.*')" class="text-[8.5px] font-bold py-2">
-                        <i class="fas fa-notes-medical mr-2 w-4"></i> Rekam Medis
-                    </x-responsive-nav-link>
-                    @if(Route::has('medical.dashboard'))
-                    <x-responsive-nav-link :href="route('medical.dashboard')" :active="request()->routeIs('medical.dashboard')" class="text-[8.5px] font-bold py-2">
-                        <i class="fas fa-microscope mr-2 w-4"></i> Medical Insight
-                    </x-responsive-nav-link>
-                    @endif
-                </div>
-            </div>
-
-            {{-- 3. LOGISTIK & MASTER --}}
-            <div class="border-t border-slate-50">
-                <button @click="activeMenu = activeMenu === 'logistik' ? '' : 'logistik'" class="w-full flex justify-between items-center px-3 py-2.5 text-[7px] font-black text-slate-400 uppercase tracking-[0.2em]">
-                    <span>Logistik & Master</span>
-                    <i class="fas fa-chevron-down transition-transform" :class="activeMenu === 'logistik' ? 'rotate-180' : ''"></i>
-                </button>
-                <div x-show="activeMenu === 'logistik'" x-collapse class="bg-slate-50/50 rounded-lg">
-                    @if(Route::has('categories.index'))
-                    <x-responsive-nav-link :href="route('categories.index')" :active="request()->routeIs('categories.*')" class="text-[8.5px] font-bold py-2">
-                        <i class="fas fa-tags mr-2 w-4"></i> Master Kategori
-                    </x-responsive-nav-link>
-                    @endif
-                    <x-responsive-nav-link :href="route('inventory.medicines.index')" :active="request()->routeIs('inventory.medicines.*')" class="text-[8.5px] font-bold py-2">
-                        <i class="fas fa-pills mr-2 w-4"></i> Obat-obatan
-                    </x-responsive-nav-link>
-                    <x-responsive-nav-link :href="route('inventory.foods.index')" :active="request()->routeIs('inventory.foods.*')" class="text-[8.5px] font-bold py-2">
-                        <i class="fas fa-utensils mr-2 w-4"></i> Makanan
-                    </x-responsive-nav-link>
-                    <x-responsive-nav-link :href="route('inventory.supplies.index')" :active="request()->routeIs('inventory.supplies.*')" class="text-[8.5px] font-bold py-2">
-                        <i class="fas fa-boxes mr-2 w-4"></i> Perlengkapan
-                    </x-responsive-nav-link>
-                </div>
-            </div>
-
-            {{-- 4. PUSAT LAPORAN --}}
-            <div class="border-t border-slate-50">
-                <button @click="activeMenu = activeMenu === 'reports' ? '' : 'reports'" class="w-full flex justify-between items-center px-3 py-2.5 text-[7px] font-black text-slate-400 uppercase tracking-[0.2em]">
-                    <span>Pusat Laporan</span>
-                    <i class="fas fa-chevron-down transition-transform" :class="activeMenu === 'reports' ? 'rotate-180' : ''"></i>
-                </button>
-                <div x-show="activeMenu === 'reports'" x-collapse class="bg-slate-50/50 rounded-lg">
-                    <x-responsive-nav-link :href="route('admin.reports.index')" :active="request()->routeIs('admin.reports.index')" class="text-[8.5px] font-bold py-2">
-                        <i class="fas fa-chart-pie mr-2 w-4"></i> Intelligence Center
-                    </x-responsive-nav-link>
-                    <x-responsive-nav-link :href="route('admin.reports.matting.index')" :active="request()->routeIs('admin.reports.matting.*')" class="text-[8.5px] font-bold py-2">
-                        <i class="fas fa-scroll mr-2 w-4"></i> Laporan Breeding
-                    </x-responsive-nav-link>
-                </div>
-            </div>
-
-            {{-- 5. KONFIGURASI --}}
-            @if(Auth::user()->role === 'admin')
-            <div class="border-t border-slate-50">
-                <button @click="activeMenu = activeMenu === 'config' ? '' : 'config'" class="w-full flex justify-between items-center px-3 py-2.5 text-[7px] font-black text-slate-400 uppercase tracking-[0.2em]">
-                    <span>Konfigurasi & Sistem</span>
-                    <i class="fas fa-chevron-down transition-transform" :class="activeMenu === 'config' ? 'rotate-180' : ''"></i>
-                </button>
-                <div x-show="activeMenu === 'config'" x-collapse class="bg-slate-50/50 rounded-lg">
-                    <x-responsive-nav-link :href="route('admin.users.index')" :active="request()->routeIs('admin.users.*')" class="text-[8.5px] font-bold py-2">
-                        <i class="fas fa-user-shield mr-2 w-4"></i> Management User
-                    </x-responsive-nav-link>
-                    @if(Route::has('admin.roles.index'))
-                    <x-responsive-nav-link :href="route('admin.roles.index')" :active="request()->routeIs('admin.roles.*')" class="text-[8.5px] font-bold py-2">
-                        <i class="fas fa-key mr-2 w-4"></i> Role Management
-                    </x-responsive-nav-link>
-                    @endif
-                    @if(Route::has('admin.logs.index'))
-                    <x-responsive-nav-link :href="route('admin.logs.index')" :active="request()->routeIs('admin.logs.*')" class="text-[8.5px] font-bold py-2 text-amber-600">
-                        <i class="fas fa-history mr-2 w-4"></i> Log Audit
-                    </x-responsive-nav-link>
-                    @endif
-                    <x-responsive-nav-link :href="route('admin.settings.index')" :active="request()->routeIs('admin.settings.*')" class="text-[8.5px] font-black py-2 text-rose-500 border-t border-slate-100">
-                        <i class="fas fa-cogs mr-2 w-4"></i> Pengaturan Sistem
-                    </x-responsive-nav-link>
-                </div>
-            </div>
-            @endif
-        </div>
-
-        {{-- USER INFO & LOGOUT (MOBILE) --}}
-        <div class="pt-4 pb-8 border-t border-slate-100 bg-slate-50/50">
-            <div class="flex items-center px-6 gap-3 mb-4 text-left">
-                <div class="w-10 h-10 bg-indigo-600 text-white rounded-xl flex items-center justify-center font-black text-[12px] shadow-md">
-                    {{ strtoupper(substr(Auth::user()->name, 0, 1)) }}
-                </div>
-                <div class="overflow-hidden">
-                    <div class="font-black text-[10px] text-slate-800 uppercase leading-none">{{ Auth::user()->name }}</div>
-                    <div class="font-bold text-[8px] text-slate-400 truncate mt-1">{{ Auth::user()->email }}</div>
-                </div>
-            </div>
-            <div class="px-4 space-y-1">
-                <x-responsive-nav-link :href="route('profile.edit')" class="rounded-xl font-bold text-[9px] uppercase tracking-widest py-2.5">
-                    <i class="fas fa-user-circle mr-3 w-4"></i> Edit Profile
-                </x-responsive-nav-link>
-                <form method="POST" action="{{ route('logout') }}">
-                    @csrf
-                    <button type="submit" class="w-full flex items-center justify-center gap-2 rounded-xl font-black text-[9px] uppercase tracking-widest text-rose-500 py-3 bg-white border border-rose-100 shadow-sm transition-all active:scale-95">
-                        <i class="fas fa-sign-out-alt"></i> Keluar Aplikasi
-                    </button>
-                </form>
-            </div>
-        </div>
+    <div class="flex items-center gap-2">
+        <a href="{{ route('profile.edit') }}" class="flex items-center gap-2 px-3 py-2 text-sm font-medium text-slate-600 hover:bg-slate-50 hover:text-slate-900"><i class="fas fa-user-circle text-slate-400"></i><span class="hidden sm:inline">Profil</span></a>
     </div>
-</nav>
+</header>

resources/views/pages/admin/logs.blade.php

@@ -47,7 +47,7 @@
 
                 <button type="submit" class="px-8 py-3.5 bg-slate-900 text-white text-[10px] font-black rounded-xl uppercase hover:bg-black transition-all">Filter</button>
                 @if(request()->anyFilled(['search', 'action']))
-                    <a href="{{ route('admin.logs') }}" class="px-4 py-3.5 text-slate-400 hover:text-rose-600 text-[10px] font-black flex items-center transition-all uppercase">Reset</a>
+                    <a href="{{ route('admin.logs.index') }}" class="px-4 py-3.5 text-slate-400 hover:text-rose-600 text-[10px] font-black flex items-center transition-all uppercase">Reset</a>
                 @endif
             </form>
         </div>
@@ -80,7 +80,7 @@
                                         {{ substr($log->user->name ?? 'S', 0, 1) }}
                                     </div>
                                     <div>
-                                        <p class="text-xs font-black text-slate-700">{{ $log->user->name ?? 'System' }}</p>
+                                        <p class="text-xs font-black text-slate-700">{{ $log->user->name ?? 'Sistem' }}</p>
                                         <p class="text-[9px] text-slate-400 font-bold uppercase tracking-widest">{{ $log->user->role ?? '-' }}</p>
                                     </div>
                                 </div>

resources/views/pages/admin/roles/create.blade.php

@@ -6,7 +6,7 @@
                 {{-- Header --}}
                 <div class="p-8 border-b border-slate-100 flex justify-between items-center bg-slate-50/50">
                     <div>
-                        <h2 class="text-2xl font-black text-slate-900 tracking-tight">Tambah Role Baru</h2>
+                        <h2 class="text-2xl font-black text-slate-900 tracking-tight">Tambah Hak Akses Baru</h2>
                         <p class="text-slate-500 font-medium">Definisikan tingkat otoritas pengguna baru.</p>
                     </div>
                     <a href="{{ route('admin.roles.index') }}" class="text-xs font-bold text-slate-400 hover:text-slate-600 transition-colors uppercase tracking-widest italic">Batal</a>
@@ -15,9 +15,9 @@
                 <form action="{{ route('admin.roles.store') }}" method="POST" class="p-8 space-y-6">
                     @csrf
                     
-                    {{-- Nama Role --}}
+                    {{-- Nama Hak Akses --}}
                     <div class="space-y-2">
-                        <label for="name" class="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] ml-1">Nama Role</label>
+                        <label for="name" class="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] ml-1">Nama Hak Akses</label>
                         <input type="text" name="name" id="name" required placeholder="Contoh: Manager Operasional"
                                class="block w-full px-5 py-4 bg-slate-50 border border-slate-200 rounded-2xl text-slate-900 font-semibold focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500/20 transition-all">
                         <x-input-error :messages="$errors->get('name')" class="mt-1" />

resources/views/pages/admin/roles/edit.blade.php

@@ -9,7 +9,7 @@
                     <div>
                         <h2 class="text-2xl font-black text-slate-900 tracking-tight">Konfigurasi Hak Akses</h2>
                         <p class="text-slate-500 font-medium text-sm">
-                            Role: <span class="text-indigo-600 font-bold uppercase tracking-widest">{{ $role->name }}</span>
+                            Hak akses: <span class="text-indigo-600 font-bold uppercase tracking-widest">{{ $role->name }}</span>
                         </p>
                     </div>
                     <a href="{{ route('admin.roles.index') }}" class="text-xs font-bold text-slate-400 hover:text-slate-600 transition-colors uppercase tracking-widest italic flex items-center">

resources/views/pages/admin/roles/index.blade.php

@@ -9,7 +9,7 @@
                     <i class="fas fa-shield-alt text-[10px]"></i>
                     <span class="text-[9px] font-black uppercase tracking-widest">Security Module</span>
                 </div>
-                <h2 class="text-3xl font-black text-slate-800 tracking-tighter uppercase leading-none">Role Management</h2>
+                <h2 class="text-3xl font-black text-slate-800 tracking-tighter uppercase leading-none">Pengelolaan Hak Akses</h2>
                 <p class="text-sm text-slate-400 font-medium italic">Konfigurasi matriks perizinan dan otoritas sistem ilycats.</p>
             </div>
 
@@ -29,7 +29,7 @@
                 <table class="w-full text-left border-collapse min-w-[800px]">
                     <thead class="bg-slate-50 border-b border-slate-100">
                         <tr>
-                            <th class="px-10 py-6 text-[10px] font-black text-slate-400 uppercase tracking-widest">Identitas Role</th>
+                            <th class="px-10 py-6 text-[10px] font-black text-slate-400 uppercase tracking-widest">Identitas Hak Akses</th>
                             <th class="px-10 py-6 text-[10px] font-black text-slate-400 uppercase tracking-widest">Slug Identitas</th>
                             <th class="px-10 py-6 text-[10px] font-black text-slate-400 uppercase tracking-widest text-right">Otoritas Matriks</th>
                         </tr>
@@ -37,7 +37,7 @@
                     <tbody class="divide-y divide-slate-50">
                         @foreach($roles as $role)
                         <tr class="hover:bg-slate-50/50 transition-all group">
-                            {{-- Nama Role --}}
+                            {{-- Nama Hak Akses --}}
                             <td class="px-10 py-6">
                                 <div class="flex items-center gap-4">
                                     <div class="w-12 h-12 rounded-2xl bg-slate-100 flex items-center justify-center text-slate-400 group-hover:bg-indigo-600 group-hover:text-white border border-slate-200 group-hover:border-indigo-500 transition-all duration-300 shadow-sm">
@@ -45,7 +45,7 @@
                                     </div>
                                     <div>
                                         <span class="text-sm font-black text-slate-800 uppercase tracking-tight block">{{ $role->name }}</span>
-                                        <span class="text-[9px] text-slate-400 font-bold uppercase tracking-tighter">System Authority Level</span>
+                                        <span class="text-[9px] text-slate-400 font-bold uppercase tracking-tighter">Tingkat Hak Akses Sistem</span>
                                     </div>
                                 </div>
                             </td>

resources/views/pages/admin/settings.blade.php

@@ -113,7 +113,7 @@
                     <div class="md:col-span-1">
                         <label class="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2 ms-4">Slogan</label>
                         <input type="text" name="app_slogan" value="{{ $settings['app_slogan'] ?? '' }}" 
-                               class="w-full bg-slate-50 border-none rounded-full px-8 py-4 text-sm font-bold text-slate-700 focus:ring-2 focus:ring-indigo-100 shadow-inner" placeholder="E.g: Premium Quality">
+                               class="w-full bg-slate-50 border-none rounded-full px-8 py-4 text-sm font-bold text-slate-700 focus:ring-2 focus:ring-indigo-100 shadow-inner" placeholder="E.g: Manajemen cattery terpercaya">
                     </div>
                 </div>
             </div>
@@ -145,7 +145,7 @@
                         <div>
                             <h4 class="text-[10px] font-black text-slate-400 uppercase tracking-widest">SMTP Email</h4>
                             <p class="text-xs font-black {{ $emailStatus['active'] ? 'text-indigo-700' : 'text-rose-700' }}">
-                                {{ $emailStatus['active'] ? 'Service Online' : 'Konfigurasi Salah' }}
+                                {{ $emailStatus['active'] ? 'Layanan Aktif' : 'Konfigurasi Salah' }}
                             </p>
                         </div>
                     </div>

resources/views/pages/cats/bulk-weight.blade.php

@@ -0,0 +1,92 @@
+<x-app-layout>
+    <div class="max-w-4xl mx-auto py-12 px-4">
+        
+        {{-- Header & Back Button --}}
+        <div class="flex items-center gap-6 mb-10">
+            <a href="{{ route('cats.index') }}" class="p-4 bg-white border border-slate-200 rounded-2xl text-slate-400 hover:text-emerald-600 transition-all shadow-sm active:scale-90">
+                <i class="fas fa-arrow-left"></i>
+            </a>
+            <div>
+                <h2 class="text-2xl font-black text-slate-800 uppercase tracking-tight">Bulk Berat Update</h2>
+                <p class="text-sm text-slate-400 font-bold uppercase tracking-widest">Perbarui berat badan massal via Excel/CSV</p>
+            </div>
+        </div>
+
+        <div class="bg-white rounded-[3rem] shadow-xl border border-slate-100 p-10 md:p-14 overflow-hidden">
+            
+            {{-- Langkah 1: Unduh --}}
+            <div class="flex flex-col md:flex-row items-start md:items-center gap-6 p-8 bg-slate-50 rounded-[2rem] border border-slate-100 mb-10">
+                <div class="w-16 h-16 bg-white text-indigo-600 rounded-2xl flex items-center justify-center shrink-0 shadow-sm border border-slate-100">
+                    <i class="fas fa-file-csv text-3xl"></i>
+                </div>
+                <div class="flex-1">
+                    <h4 class="font-black text-slate-800 uppercase text-sm mb-2">Langkah 1: Unduh Format CSV</h4>
+                    <p class="text-xs text-slate-500 mb-0 leading-relaxed font-medium">
+                        Sistem akan mengunduh daftar kucing saat ini beserta <b>Kode Kucing</b>-nya.<br> 
+                        Cukup isi angka pada kolom <b>Berat Badan (Kg)</b>. Anda juga dapat mengubah <b>Tanggal</b> untuk mencatat data timbangan di masa lalu (Backdate).
+                    </p>
+                </div>
+                <div class="shrink-0 mt-4 md:mt-0 w-full md:w-auto">
+                    <a href="{{ route('cats.weight-template') }}" class="flex items-center justify-center px-6 py-4 bg-indigo-50 border border-indigo-100 text-indigo-700 text-[10px] font-black rounded-2xl hover:bg-indigo-600 hover:text-white transition-all shadow-sm uppercase tracking-widest w-full">
+                        <i class="fas fa-download mr-2 text-sm"></i> Unduh Template
+                    </a>
+                </div>
+            </div>
+
+            {{-- Langkah 2: Unggah Form --}}
+            <form action="{{ route('cats.bulk-weight.post') }}" method="POST" enctype="multipart/form-data" class="space-y-8">
+                @csrf
+                <div class="space-y-4">
+                    <label class="text-xs font-black text-slate-800 uppercase tracking-widest ml-2">Langkah 2: Unggah Data Terbaru</label>
+                    <div class="relative group">
+                        <input type="file" name="file_excel" id="file_excel" required accept=".csv, .xlsx, .xls" onchange="updateFileName(this)" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10">
+                        <div id="upload-box" class="w-full p-16 border-2 border-dashed border-slate-300 rounded-[2.5rem] bg-white text-center group-hover:border-emerald-500 group-hover:bg-emerald-50 transition-all">
+                            <i id="upload-icon" class="fas fa-cloud-upload-alt text-6xl text-slate-300 group-hover:text-emerald-500 mb-6 transition-colors"></i>
+                            <p id="upload-text" class="text-xs font-black text-slate-600 uppercase tracking-widest">Klik atau Seret File Excel/CSV ke Sini</p>
+                            <p id="file-name" class="text-sm font-bold text-emerald-600 mt-4 hidden bg-white px-4 py-2 rounded-lg inline-block shadow-sm border border-emerald-100"></p>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="pt-4 border-t border-slate-100">
+                    <button type="submit" class="w-full py-6 bg-emerald-600 text-white rounded-[2rem] font-black uppercase text-xs tracking-[0.3em] shadow-xl shadow-emerald-200 hover:bg-emerald-700 transition-all active:scale-95">
+                        <i class="fas fa-check-circle mr-2 text-sm"></i> PROSES BULK UPDATE
+                    </button>
+                </div>
+            </form>
+
+        </div>
+    </div>
+
+    @push('scripts')
+    <script>
+        // Script untuk mengubah tampilan UI saat file dipilih oleh user
+        function updateFileName(input) {
+            const fileName = input.files[0]?.name;
+            const textEl = document.getElementById('upload-text');
+            const nameEl = document.getElementById('file-name');
+            const iconEl = document.getElementById('upload-icon');
+            const boxEl = document.getElementById('upload-box');
+
+            if (fileName) {
+                textEl.innerText = "File Siap Diproses:";
+                nameEl.innerText = fileName;
+                nameEl.classList.remove('hidden');
+                
+                iconEl.classList.replace('fa-cloud-upload-alt', 'fa-file-excel');
+                iconEl.classList.replace('text-slate-300', 'text-emerald-500');
+                boxEl.classList.replace('border-slate-300', 'border-emerald-500');
+                boxEl.classList.replace('bg-white', 'bg-emerald-50');
+            } else {
+                textEl.innerText = "Klik atau Seret File Excel/CSV ke Sini";
+                nameEl.classList.add('hidden');
+                
+                iconEl.classList.replace('fa-file-excel', 'fa-cloud-upload-alt');
+                iconEl.classList.replace('text-emerald-500', 'text-slate-300');
+                boxEl.classList.replace('border-emerald-500', 'border-slate-300');
+                boxEl.classList.replace('bg-emerald-50', 'bg-white');
+            }
+        }
+    </script>
+    @endpush
+</x-app-layout>

resources/views/pages/cats/create.blade.php

@@ -6,8 +6,8 @@
                 <i class="fas fa-arrow-left"></i>
             </a>
             <div>
-                <h2 class="text-2xl font-black text-slate-800 tracking-tight uppercase">Tambah Kucing Baru</h2>
-                <p class="text-sm text-slate-500 font-medium italic tracking-tight">Registrasi identitas permanen & silsilah ke database Ilycats.</p>
+                <h2 class="text-2xl font-black text-slate-800 tracking-tight uppercase leading-none mb-1">Tambah Kucing Baru</h2>
+                <p class="text-[10px] text-slate-400 font-bold uppercase tracking-[0.2em]">Registrasi Identitas Permanen • Ilycats Database</p>
             </div>
         </div>
 
@@ -30,31 +30,38 @@
             @csrf
             
             {{-- SECTION 1: IDENTITAS UTAMA --}}
-            <div class="bg-white border border-slate-200 rounded-[2.5rem] p-8 shadow-sm space-y-6">
-                <h4 class="text-xs font-black text-indigo-600 uppercase tracking-widest border-b border-slate-100 pb-4 mb-2 flex items-center gap-2 italic">
-                    <i class="fas fa-id-card"></i> Identitas & Dokumen Resmi
-                </h4>
+            <div class="bg-white border border-slate-200 rounded-[2.5rem] p-8 shadow-sm space-y-8">
+                <div class="flex items-center gap-4 mb-2 border-b border-slate-100 pb-4">
+                    <div class="w-8 h-8 bg-indigo-600 text-white rounded-xl flex items-center justify-center text-xs shadow-lg">
+                        <i class="fas fa-id-card"></i>
+                    </div>
+                    <h4 class="font-black text-slate-800 uppercase tracking-tighter text-lg">Identitas & Dokumen Resmi</h4>
+                </div>
                 
                 <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                     {{-- Nama Kucing --}}
                     <div class="space-y-2 md:col-span-2">
                         <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Nama Lengkap Kucing (Sesuai Pedigree)</label>
-                        <input type="text" name="nama_kucing" value="{{ old('nama_kucing') }}" required placeholder="Contoh: Earrin Cats Moonlight" class="w-full px-4 py-4 bg-slate-50 border border-slate-200 rounded-2xl focus:ring-2 focus:ring-indigo-500 transition-all text-sm font-bold text-slate-800">
+                        <input type="text" name="nama_kucing" value="{{ old('nama_kucing') }}" required placeholder="Contoh: Earrin Cats Moonlight" class="w-full px-5 py-4 bg-slate-50 border border-slate-200 rounded-2xl focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 transition-all text-sm font-bold text-slate-800">
                     </div>
 
-                    {{-- No. Pedigree, Microchip, & EMS (GRID 3 KOLOM) --}}
-                    <div class="md:col-span-2 grid grid-cols-1 md:grid-cols-3 gap-4">
+                    {{-- GRID IDENTITAS --}}
+                    <div class="md:col-span-2 grid grid-cols-1 md:grid-cols-3 gap-4 border-y border-slate-50 py-6 my-2">
                         <div class="space-y-2">
                             <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">No. Pedigree</label>
-                            <input type="text" name="pedigree" value="{{ old('pedigree') }}" placeholder="ICA.LO.xxxx" class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-indigo-500 transition-all text-xs font-bold text-slate-800">
+                            {{-- PERBAIKAN: Menghapus class 'uppercase' agar input sesuai ketikan --}}
+                            <input type="text" name="pedigree" value="{{ old('pedigree') }}" placeholder="ICA.LO.xxxx" class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-indigo-500 text-xs font-bold text-slate-800">
                         </div>
                         <div class="space-y-2">
                             <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">No. Microchip</label>
-                            <input type="text" name="microchip" value="{{ old('microchip') }}" placeholder="90011xxxx" class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-indigo-500 transition-all text-xs font-bold text-slate-800">
+                            <input type="text" name="microchip" value="{{ old('microchip') }}" placeholder="90011xxxx" class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-indigo-500 text-xs font-bold text-slate-800">
                         </div>
                         <div class="space-y-2">
-                            <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Kode EMS</label>
-                            <input type="text" name="kode_ems" value="{{ old('kode_ems') }}" placeholder="PER d 03" class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-indigo-500 transition-all text-xs font-bold text-slate-800">
+                            <label class="text-[10px] font-black text-indigo-600 uppercase tracking-widest ml-1 flex items-center gap-2">
+                                <i class="fas fa-dna text-[10px]"></i> Kode EMS
+                            </label>
+                            {{-- PERBAIKAN: Menghapus class 'uppercase' agar input sesuai ketikan --}}
+                            <input type="text" name="kode_ems" value="{{ old('kode_ems') }}" placeholder="PER d 03" class="w-full px-4 py-3 bg-indigo-50/30 border border-indigo-100 rounded-xl focus:ring-2 focus:ring-indigo-500 text-xs font-black text-indigo-700">
                         </div>
                     </div>
 
@@ -62,9 +69,9 @@
                     <div class="space-y-2">
                         <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Ras / Breed</label>
                         <select name="ras" required class="w-full px-4 py-4 bg-slate-50 border border-slate-200 rounded-2xl focus:ring-2 focus:ring-indigo-500 transition-all text-sm font-bold text-slate-800">
-                            <option value="Persian" {{ old('ras') == 'Persian' ? 'selected' : '' }}>Persian</option>
-                            <option value="British Shorthair" {{ old('ras') == 'British Shorthair' ? 'selected' : '' }}>British Shorthair</option>
-                            <option value="Lainnya" {{ old('ras') == 'Lainnya' ? 'selected' : '' }}>Lainnya</option>
+                            @foreach(['Persian', 'British Shorthair', 'Scottish Fold', 'Maine Coon', 'Munchkin', 'Lainnya'] as $ras)
+                                <option value="{{ $ras }}" {{ old('ras') == $ras ? 'selected' : '' }}>{{ $ras }}</option>
+                            @endforeach
                         </select>
                     </div>
 
@@ -77,11 +84,11 @@
                     {{-- Registry --}}
                     <div class="md:col-span-2 space-y-3">
                         <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1 block">Federasi / Registry</label>
-                        <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
-                            @foreach(['ICA', 'CFA', 'WCF', 'FFF'] as $reg)
+                        <div class="grid grid-cols-2 md:grid-cols-5 gap-3">
+                            @foreach(['ICA', 'CFA', 'WCF', 'FFF', 'NON-PED'] as $reg)
                                 <label class="block cursor-pointer group">
                                     <input type="checkbox" name="registry[]" value="{{ $reg }}" 
-                                        {{ is_array(old('registry')) && in_array($reg, old('registry')) ? 'checked' : '' }}
+                                        {{ (is_array(old('registry')) && in_array($reg, old('registry'))) || ($reg === 'NON-PED' && !old('registry')) ? 'checked' : '' }}
                                         class="sr-only peer">
                                     <div class="py-4 text-center border-2 border-slate-100 rounded-2xl text-[10px] font-black text-slate-400 
                                                 peer-checked:bg-indigo-600 peer-checked:text-white peer-checked:border-indigo-600 
@@ -97,15 +104,15 @@
                     <div class="space-y-2 md:col-span-2">
                         <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Jenis Kelamin</label>
                         <div class="flex gap-4">
-                            <label class="flex-1 cursor-pointer">
-                                <input type="radio" name="jenis_kelamin" value="Jantan" {{ old('jenis_kelamin', 'Jantan') == 'Jantan' ? 'checked' : '' }} class="hidden peer">
-                                <div class="p-4 text-center border-2 border-slate-100 rounded-2xl text-xs font-black text-slate-400 peer-checked:bg-blue-50 peer-checked:border-blue-500 peer-checked:text-blue-600 transition-all shadow-sm">
+                            <label class="flex-1 cursor-pointer group">
+                                <input type="radio" name="jenis_kelamin" value="Jantan" {{ old('jenis_kelamin', 'Jantan') == 'Jantan' ? 'checked' : '' }} class="sr-only peer">
+                                <div class="p-4 text-center border-2 border-slate-100 rounded-2xl text-xs font-black text-slate-400 peer-checked:bg-blue-50 peer-checked:border-blue-500 peer-checked:text-blue-600 transition-all shadow-sm group-hover:border-slate-200">
                                     <i class="fas fa-mars mr-2"></i> JANTAN (SIRE)
                                 </div>
                             </label>
-                            <label class="flex-1 cursor-pointer">
-                                <input type="radio" name="jenis_kelamin" value="Betina" {{ old('jenis_kelamin') == 'Betina' ? 'checked' : '' }} class="hidden peer">
-                                <div class="p-4 text-center border-2 border-slate-100 rounded-2xl text-xs font-black text-slate-400 peer-checked:bg-pink-50 peer-checked:border-pink-500 peer-checked:text-pink-600 transition-all shadow-sm">
+                            <label class="flex-1 cursor-pointer group">
+                                <input type="radio" name="jenis_kelamin" value="Betina" {{ old('jenis_kelamin') == 'Betina' ? 'checked' : '' }} class="sr-only peer">
+                                <div class="p-4 text-center border-2 border-slate-100 rounded-2xl text-xs font-black text-slate-400 peer-checked:bg-pink-50 peer-checked:border-pink-500 peer-checked:text-pink-600 transition-all shadow-sm group-hover:border-slate-200">
                                     <i class="fas fa-venus mr-2"></i> BETINA (DAM)
                                 </div>
                             </label>
@@ -117,42 +124,46 @@
             {{-- SECTION 2: GENETIK & LOKASI --}}
             <div class="bg-white border border-slate-200 rounded-[2.5rem] p-8 shadow-sm space-y-6">
                 <h4 class="text-xs font-black text-indigo-600 uppercase tracking-widest border-b border-slate-100 pb-4 mb-2 flex items-center gap-2 italic">
-                    <i class="fas fa-dna"></i> Penempatan & Silsilah Induk
+                    <i class="fas fa-dna text-sm"></i> Penempatan & Silsilah Induk
                 </h4>
                 
                 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+                    {{-- Searchable Sire --}}
                     <div class="space-y-2">
-                        <label class="text-[10px] font-bold text-slate-400 uppercase ml-1">Induk Jantan</label>
-                        <select name="induk_jantan_id" class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-xs font-bold text-slate-700">
-                            <option value="">-- Tanpa Sire --</option>
+                        <label class="text-[10px] font-bold text-slate-400 uppercase ml-1">Induk Jantan (Sire)</label>
+                        <input type="text" list="sire_list" id="sire_search" placeholder="Ketik nama sire..." class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-xs font-bold text-slate-700 focus:ring-2 focus:ring-indigo-500" autocomplete="off">
+                        <datalist id="sire_list">
                             @foreach($sires as $sire)
-                                <option value="{{ $sire->id }}" {{ old('induk_jantan_id') == $sire->id ? 'selected' : '' }}>{{ $sire->nama_kucing }}</option>
+                                <option data-id="{{ $sire->id }}" value="{{ $sire->nama_kucing }}">
                             @endforeach
-                        </select>
+                        </datalist>
+                        <input type="hidden" name="induk_jantan_id" id="induk_jantan_id" value="{{ old('induk_jantan_id') }}">
                     </div>
 
+                    {{-- Searchable Dam --}}
                     <div class="space-y-2">
-                        <label class="text-[10px] font-bold text-slate-400 uppercase ml-1">Induk Betina</label>
-                        <select name="induk_betina_id" class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-xs font-bold text-slate-700">
-                            <option value="">-- Tanpa Dam --</option>
+                        <label class="text-[10px] font-bold text-slate-400 uppercase ml-1">Induk Betina (Dam)</label>
+                        <input type="text" list="dam_list" id="dam_search" placeholder="Ketik nama dam..." class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-xs font-bold text-slate-700 focus:ring-2 focus:ring-indigo-500" autocomplete="off">
+                        <datalist id="dam_list">
                             @foreach($dams as $dam)
-                                <option value="{{ $dam->id }}" {{ old('induk_betina_id') == $dam->id ? 'selected' : '' }}>{{ $dam->nama_kucing }}</option>
+                                <option data-id="{{ $dam->id }}" value="{{ $dam->nama_kucing }}">
                             @endforeach
-                        </select>
+                        </datalist>
+                        <input type="hidden" name="induk_betina_id" id="induk_betina_id" value="{{ old('induk_betina_id') }}">
                     </div>
 
                     <div class="space-y-2">
                         <label class="text-[10px] font-bold text-slate-400 uppercase ml-1">Lokasi Kandang</label>
-                        <select name="lokasi_kandang" class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-black text-indigo-600 uppercase">
-                            @foreach(['A1', 'A2', 'Lorong', 'E1', 'E2'] as $loc)
+                        <select name="lokasi_kandang" class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-black text-indigo-600 uppercase focus:ring-2 focus:ring-indigo-500">
+                            @foreach(['A1', 'A2', 'Lorong', 'E1', 'E2', 'Karantina'] as $loc)
                                 <option value="{{ $loc }}" {{ old('lokasi_kandang') == $loc ? 'selected' : '' }}>{{ $loc }}</option>
                             @endforeach
                         </select>
                     </div>
 
                     <div class="space-y-2">
-                        <label class="text-[10px] font-bold text-slate-400 uppercase ml-1">PIC (Penanggung Jawab)</label>
-                        <select name="pic_id" class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-xs font-bold text-slate-700">
+                        <label class="text-[10px] font-bold text-slate-400 uppercase ml-1">PIC Bertugas</label>
+                        <select name="pic_id" class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-xs font-bold text-slate-700 focus:ring-2 focus:ring-indigo-500">
                             @foreach($users as $user)
                                 <option value="{{ $user->id }}" {{ old('pic_id', auth()->id()) == $user->id ? 'selected' : '' }}>{{ $user->name }}</option>
                             @endforeach
@@ -162,34 +173,33 @@
             </div>
 
             {{-- SECTION 3: JADWAL & PERTUMBUHAN --}}
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-                {{-- Jadwal Medis --}}
-                <div class="bg-white border border-slate-200 rounded-[2.5rem] p-8 shadow-sm space-y-4">
-                    <h4 class="text-xs font-black text-rose-600 uppercase tracking-widest border-b border-slate-100 pb-4 mb-2 flex items-center gap-2 italic">
-                        <i class="fas fa-calendar-alt"></i> Jadwal Perawatan
-                    </h4>
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+                <div class="lg:col-span-2 bg-white border border-slate-200 rounded-[2.5rem] p-8 shadow-sm">
+                    <div class="flex items-center gap-3 mb-6 border-b border-slate-100 pb-4">
+                        <div class="w-7 h-7 bg-rose-50 text-rose-600 rounded-lg flex items-center justify-center text-[10px]">
+                            <i class="fas fa-calendar-alt"></i>
+                        </div>
+                        <h4 class="text-xs font-black text-rose-600 uppercase tracking-widest italic">Jadwal Perawatan</h4>
+                    </div>
                     <div class="grid grid-cols-2 gap-4">
-                        @foreach (['vaksin', 'obat_cacing', 'obat_kutu', 'grooming'] as $task)
+                        @foreach (['vaksin' => 'Vaksin', 'obat_cacing' => 'Obat Cacing', 'obat_kutu' => 'Obat Kutu', 'grooming' => 'Grooming'] as $task => $label)
                         <div class="space-y-1">
-                            <label class="text-[9px] font-bold text-slate-400 uppercase ml-1">{{ str_replace('_', ' ', $task) }}</label>
-                            <input type="date" name="jadwal_{{ $task }}" value="{{ old('jadwal_'.$task) }}" class="w-full p-3 bg-slate-50 border border-slate-200 rounded-xl text-[10px] font-black text-slate-700 focus:ring-rose-500">
+                            <label class="text-[9px] font-bold text-slate-400 uppercase ml-1">{{ $label }}</label>
+                            <input type="date" name="jadwal_{{ $task }}" value="{{ old('jadwal_'.$task) }}" class="w-full p-3 bg-slate-50 border border-slate-200 rounded-xl text-[10px] font-black text-slate-700 focus:ring-2 focus:ring-rose-200 transition-all">
                         </div>
                         @endforeach
                     </div>
                 </div>
 
-                {{-- Monitoring Berat --}}
-                <div class="bg-white border border-slate-200 rounded-[2.5rem] p-8 shadow-sm space-y-4">
-                    <h4 class="text-xs font-black text-emerald-600 uppercase tracking-widest border-b border-slate-100 pb-4 mb-2 flex items-center gap-2 italic">
-                        <i class="fas fa-weight-scale"></i> Vitalitas & Berat
+                <div class="bg-white border border-slate-200 rounded-[2.5rem] p-8 shadow-sm">
+                    <h4 class="text-xs font-black text-emerald-600 uppercase tracking-widest border-b border-slate-100 pb-4 mb-6 italic flex items-center gap-2">
+                        <i class="fas fa-weight-scale text-sm"></i> Vitalitas
                     </h4>
                     <div class="space-y-4">
-                        <div>
-                            <label class="text-[10px] font-black text-slate-400 uppercase ml-1">Berat Badan Awal</label>
-                            <div class="relative mt-2">
-                                <input type="number" step="0.01" name="berat_badan" value="{{ old('berat_badan') }}" placeholder="0.00" class="w-full pl-6 pr-14 py-5 bg-slate-50 border border-slate-200 rounded-3xl text-2xl font-black text-slate-800 focus:ring-emerald-500">
-                                <span class="absolute right-6 top-1/2 -translate-y-1/2 text-xs font-black text-slate-400">KG</span>
-                            </div>
+                        <label class="text-[10px] font-black text-slate-400 uppercase ml-1">Berat Badan Awal</label>
+                        <div class="relative mt-2">
+                            <input type="number" step="0.01" name="berat_badan" value="{{ old('berat_badan') }}" placeholder="0.00" class="w-full pl-6 pr-14 py-5 bg-slate-50 border border-slate-200 rounded-3xl text-2xl font-black text-slate-800 focus:ring-4 focus:ring-emerald-500/10 focus:border-emerald-500 transition-all">
+                            <span class="absolute right-6 top-1/2 -translate-y-1/2 text-xs font-black text-slate-400">KG</span>
                         </div>
                     </div>
                 </div>
@@ -197,9 +207,9 @@
 
             {{-- SECTION 4: FOTO --}}
             <div class="bg-white border border-slate-200 rounded-[2.5rem] p-8 shadow-sm space-y-4">
-                <h4 class="text-xs font-black text-slate-800 uppercase tracking-widest ml-1 mb-2">Unggah Foto Utama</h4>
+                <h4 class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1 mb-2">Unggah Foto Utama</h4>
                 <div class="relative group">
-                    <input type="file" name="foto" id="foto" class="hidden" onchange="previewImage(event)">
+                    <input type="file" name="foto" id="foto" class="hidden" onchange="previewImage(event)" accept="image/*">
                     <label for="foto" class="flex flex-col items-center justify-center border-4 border-dashed border-slate-100 rounded-[3rem] p-12 text-center cursor-pointer hover:border-indigo-200 hover:bg-indigo-50/20 transition-all duration-500 group">
                         <div id="preview-container" class="hidden mb-6">
                             <img id="image-preview" class="w-48 h-48 rounded-[2.5rem] object-cover shadow-2xl ring-8 ring-white">
@@ -210,7 +220,7 @@
                             </div>
                             <div>
                                 <p class="text-xs text-slate-600 font-black tracking-widest uppercase">Pilih Foto Terbaik</p>
-                                <p class="text-[10px] text-slate-400 mt-1 uppercase font-bold tracking-tighter italic">JPG, PNG, WEBP (Maks 2MB)</p>
+                                <p class="text-[10px] text-slate-400 mt-1 uppercase font-bold tracking-tighter italic">JPG, PNG, WEBP (Maks 3MB)</p>
                             </div>
                         </div>
                     </label>
@@ -220,8 +230,8 @@
             {{-- Action Button --}}
             <div class="pt-4">
                 <button type="submit" class="w-full py-6 bg-indigo-600 text-white text-xs font-black rounded-[2.5rem] shadow-2xl shadow-indigo-100 hover:bg-indigo-700 hover:-translate-y-1 transition-all active:scale-[0.98] flex items-center justify-center gap-4 group">
-                    <i class="fas fa-save text-xl"></i>
-                    <span class="tracking-[0.2em] uppercase">Simpan Record Baru</span>
+                    <i class="fas fa-save text-xl group-hover:rotate-12 transition-transform"></i>
+                    <span class="tracking-[0.2em] uppercase">Simpan Record Baru Ilycats</span>
                 </button>
             </div>
         </form>
@@ -233,6 +243,29 @@
     </style>
 
     <script>
+        // Logika Sinkronisasi Searchable Datalist untuk Sire/Dam
+        function handleSearchableDatalist(inputId, listId, hiddenId) {
+            const input = document.getElementById(inputId);
+            const list = document.getElementById(listId);
+            const hidden = document.getElementById(hiddenId);
+
+            input.addEventListener('input', function() {
+                const options = list.options;
+                hidden.value = ""; // Reset hidden ID setiap kali input berubah
+
+                for (let i = 0; i < options.length; i++) {
+                    if (options[i].value === input.value) {
+                        hidden.value = options[i].getAttribute('data-id');
+                        break;
+                    }
+                }
+            });
+        }
+
+        handleSearchableDatalist('sire_search', 'sire_list', 'induk_jantan_id');
+        handleSearchableDatalist('dam_search', 'dam_list', 'induk_betina_id');
+
+        // Preview Foto
         function previewImage(event) {
             const reader = new FileReader();
             reader.onload = function() {

resources/views/pages/cats/edit.blade.php

@@ -6,8 +6,8 @@
                 <i class="fas fa-arrow-left"></i>
             </a>
             <div>
-                <h2 class="text-2xl font-black text-slate-800 tracking-tight">Edit Profil: {{ $cat->nama_kucing }}</h2>
-                <p class="text-sm text-slate-500 font-medium italic uppercase tracking-tighter">ID Pasien #{{ str_pad($cat->id, 4, '0', STR_PAD_LEFT) }} • Update Identitas</p>
+                <h2 class="text-2xl font-black text-slate-800 tracking-tight leading-none mb-1">Edit Profil: {{ $cat->nama_kucing }}</h2>
+                <p class="text-[10px] text-slate-400 font-bold uppercase tracking-[0.2em]">Cattery Management • Pasien #{{ str_pad($cat->id, 4, '0', STR_PAD_LEFT) }}</p>
             </div>
         </div>
 
@@ -28,7 +28,7 @@
 
         <form action="{{ route('cats.update', $cat->id) }}" method="POST" enctype="multipart/form-data" class="space-y-6">
             @csrf 
-            @method('PATCH')
+            @method('PUT')
             
             {{-- SECTION 1: IDENTITAS UTAMA & DOKUMEN --}}
             <div class="bg-white border border-slate-200 rounded-[2.5rem] p-8 shadow-sm space-y-8">
@@ -39,15 +39,14 @@
                     <h4 class="font-black text-slate-800 uppercase tracking-tighter text-lg">Identitas & Dokumen Resmi</h4>
                 </div>
 
-                <div class="flex flex-col md:flex-row gap-6 items-start">
-                    
-                    {{-- FOTO SECTION (THUMBNAIL) --}}
+                <div class="flex flex-col md:flex-row gap-8 items-start">
+                    {{-- FOTO SECTION --}}
                     <div class="relative group self-center md:self-start flex-shrink-0">
-                        <div class="w-24 h-24 rounded-3xl bg-slate-50 border-2 border-slate-200 overflow-hidden ring-4 ring-indigo-50 shadow-md flex items-center justify-center">
+                        <div class="w-28 h-28 rounded-[2rem] bg-slate-50 border-2 border-slate-200 overflow-hidden ring-8 ring-indigo-50/50 shadow-md flex items-center justify-center">
                             <img id="image-preview" src="{{ $cat->foto_url }}" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                         </div>
-                        <label for="foto" class="absolute -bottom-2 -right-2 w-9 h-9 bg-indigo-600 text-white rounded-xl border-4 border-white cursor-pointer shadow-sm hover:scale-110 transition-transform active:scale-95 flex items-center justify-center">
-                            <i class="fas fa-camera text-[10px]"></i>
+                        <label for="foto" class="absolute -bottom-2 -right-2 w-10 h-10 bg-indigo-600 text-white rounded-2xl border-4 border-white cursor-pointer shadow-lg hover:bg-indigo-700 transition-all flex items-center justify-center">
+                            <i class="fas fa-camera text-xs"></i>
                             <input type="file" name="foto" id="foto" class="hidden" accept="image/*" onchange="previewImage(event)">
                         </label>
                     </div>
@@ -56,32 +55,30 @@
                     <div class="flex-1 grid grid-cols-1 md:grid-cols-2 gap-6 w-full">
                         <div class="space-y-2 md:col-span-2">
                             <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Nama Lengkap Kucing</label>
-                            <input type="text" name="nama_kucing" value="{{ old('nama_kucing', $cat->nama_kucing) }}" required class="w-full px-4 py-4 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-bold text-slate-800 focus:ring-2 focus:ring-indigo-500 transition-all">
+                            <input type="text" name="nama_kucing" value="{{ old('nama_kucing', $cat->nama_kucing) }}" required class="w-full px-5 py-4 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-bold text-slate-800 focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 transition-all">
                         </div>
 
-                        {{-- PERBAIKAN: GRID IDENTITAS (PEDIGREE, MICROCHIP, EMS) --}}
                         <div class="md:col-span-2 grid grid-cols-1 md:grid-cols-3 gap-4 border-y border-slate-50 py-6 my-2">
-                            {{-- Input Pedigree --}}
                             <div class="space-y-2">
                                 <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">No. Pedigree</label>
+                                {{-- PERBAIKAN: Menghapus class uppercase --}}
                                 <input type="text" name="pedigree" value="{{ old('pedigree', $cat->pedigree) }}" placeholder="ICA.LO.xxx" 
                                        class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-indigo-500 text-xs font-bold text-slate-800">
                             </div>
 
-                            {{-- Input Microchip --}}
                             <div class="space-y-2">
                                 <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">No. Microchip</label>
                                 <input type="text" name="microchip" value="{{ old('microchip', $cat->microchip) }}" placeholder="9001xxxx" 
                                        class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-indigo-500 text-xs font-bold text-slate-800">
                             </div>
 
-                            {{-- Input Kode EMS (Highlight Indigo) --}}
                             <div class="space-y-2">
                                 <label class="text-[10px] font-black text-indigo-600 uppercase tracking-widest ml-1 flex items-center gap-2">
                                     <i class="fas fa-dna text-[10px]"></i> Kode EMS
                                 </label>
+                                {{-- PERBAIKAN: Menghapus class uppercase --}}
                                 <input type="text" name="kode_ems" value="{{ old('kode_ems', $cat->kode_ems) }}" placeholder="PER d 03" 
-                                       class="w-full px-4 py-3 bg-indigo-50/30 border border-indigo-100 rounded-xl focus:ring-2 focus:ring-indigo-500 text-xs font-black text-indigo-700 uppercase">
+                                       class="w-full px-4 py-3 bg-indigo-50/30 border border-indigo-100 rounded-xl focus:ring-2 focus:ring-indigo-500 text-xs font-black text-indigo-700">
                             </div>
                         </div>
 
@@ -99,18 +96,18 @@
                             <input type="date" name="tanggal_lahir" value="{{ old('tanggal_lahir', $cat->tanggal_lahir?->format('Y-m-d')) }}" class="w-full px-4 py-4 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-bold text-slate-800 focus:ring-2 focus:ring-indigo-500">
                         </div>
 
-                        {{-- Registry / Federasi --}}
                         <div class="space-y-3 md:col-span-2">
                             <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Registry / Federasi</label>
-                            <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
-                                @foreach(['ICA', 'CFA', 'WCF', 'FFF'] as $reg)
+                            <div class="grid grid-cols-2 md:grid-cols-5 gap-3">
+                                @foreach(['ICA', 'CFA', 'WCF', 'FFF', 'NON-PED'] as $reg)
                                     @php
-                                        $isChecked = (is_array(old('registry')) && in_array($reg, old('registry'))) || 
-                                                     (is_array($cat->registry) && in_array($reg, $cat->registry));
+                                        $isChecked = old('registry') 
+                                            ? in_array($reg, old('registry')) 
+                                            : (is_array($cat->registry) && in_array($reg, $cat->registry));
                                     @endphp
                                     <label class="block cursor-pointer group">
                                         <input type="checkbox" name="registry[]" value="{{ $reg }}" {{ $isChecked ? 'checked' : '' }} class="sr-only peer">
-                                        <div class="py-4 text-center border-2 border-slate-100 rounded-2xl text-[10px] font-black text-slate-400 peer-checked:bg-indigo-600 peer-checked:text-white peer-checked:border-indigo-600 transition-all shadow-sm group-hover:border-slate-300">
+                                        <div class="py-4 text-center border-2 border-slate-100 rounded-2xl text-[10px] font-black text-slate-400 peer-checked:bg-indigo-600 peer-checked:text-white peer-checked:border-indigo-600 transition-all shadow-sm group-hover:border-slate-300 uppercase">
                                             {{ $reg }}
                                         </div>
                                     </label>
@@ -118,20 +115,19 @@
                             </div>
                         </div>
 
-                        {{-- Jenis Kelamin --}}
                         <div class="space-y-2 md:col-span-2">
                             <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Jenis Kelamin</label>
                             <div class="flex gap-4">
                                 <label class="flex-1 cursor-pointer group">
                                     <input type="radio" name="jenis_kelamin" value="Jantan" {{ old('jenis_kelamin', $cat->jenis_kelamin) == 'Jantan' ? 'checked' : '' }} class="sr-only peer">
                                     <div class="p-4 text-center border-2 border-slate-100 rounded-2xl text-xs font-black text-slate-400 peer-checked:bg-blue-50 peer-checked:border-blue-500 peer-checked:text-blue-600 transition-all shadow-sm group-hover:border-slate-200">
-                                        <i class="fas fa-mars mr-2"></i> JANTAN
+                                        <i class="fas fa-mars mr-2"></i> JANTAN (SIRE)
                                     </div>
                                 </label>
                                 <label class="flex-1 cursor-pointer group">
                                     <input type="radio" name="jenis_kelamin" value="Betina" {{ old('jenis_kelamin', $cat->jenis_kelamin) == 'Betina' ? 'checked' : '' }} class="sr-only peer">
                                     <div class="p-4 text-center border-2 border-slate-100 rounded-2xl text-xs font-black text-slate-400 peer-checked:bg-pink-50 peer-checked:border-pink-500 peer-checked:text-pink-600 transition-all shadow-sm group-hover:border-slate-200">
-                                        <i class="fas fa-venus mr-2"></i> BETINA
+                                        <i class="fas fa-venus mr-2"></i> BETINA (DAM)
                                     </div>
                                 </label>
                             </div>
@@ -147,24 +143,36 @@
                 </h4>
                 
                 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+                    {{-- Searchable Sire --}}
                     <div class="space-y-2">
                         <label class="text-[10px] font-bold text-slate-400 uppercase ml-1">Sire (Bapak)</label>
-                        <select name="induk_jantan_id" class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-xs font-bold text-slate-700 focus:ring-2 focus:ring-indigo-500">
-                            <option value="">-- Tidak Diketahui --</option>
+                        <input type="text" list="sire_list" id="sire_search" 
+                               value="{{ old('sire_search', $cat->sire?->nama_kucing) }}" 
+                               placeholder="Ketik nama sire..." 
+                               class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-xs font-bold text-slate-700 focus:ring-2 focus:ring-indigo-500" autocomplete="off">
+                        <datalist id="sire_list">
                             @foreach($sires as $sire)
-                                <option value="{{ $sire->id }}" {{ old('induk_jantan_id', $cat->induk_jantan_id) == $sire->id ? 'selected' : '' }}>{{ $sire->nama_kucing }}</option>
+                                <option data-id="{{ $sire->id }}" value="{{ $sire->nama_kucing }}">
                             @endforeach
-                        </select>
+                        </datalist>
+                        <input type="hidden" name="induk_jantan_id" id="induk_jantan_id" value="{{ old('induk_jantan_id', $cat->induk_jantan_id) }}">
                     </div>
+
+                    {{-- Searchable Dam --}}
                     <div class="space-y-2">
                         <label class="text-[10px] font-bold text-slate-400 uppercase ml-1">Dam (Ibu)</label>
-                        <select name="induk_betina_id" class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-xs font-bold text-slate-700 focus:ring-2 focus:ring-indigo-500">
-                            <option value="">-- Tidak Diketahui --</option>
+                        <input type="text" list="dam_list" id="dam_search" 
+                               value="{{ old('dam_search', $cat->dam?->nama_kucing) }}" 
+                               placeholder="Ketik nama dam..." 
+                               class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-xs font-bold text-slate-700 focus:ring-2 focus:ring-indigo-500" autocomplete="off">
+                        <datalist id="dam_list">
                             @foreach($dams as $dam)
-                                <option value="{{ $dam->id }}" {{ old('induk_betina_id', $cat->induk_betina_id) == $dam->id ? 'selected' : '' }}>{{ $dam->nama_kucing }}</option>
+                                <option data-id="{{ $dam->id }}" value="{{ $dam->nama_kucing }}">
                             @endforeach
-                        </select>
+                        </datalist>
+                        <input type="hidden" name="induk_betina_id" id="induk_betina_id" value="{{ old('induk_betina_id', $cat->induk_betina_id) }}">
                     </div>
+
                     <div class="space-y-2">
                         <label class="text-[10px] font-bold text-slate-400 uppercase ml-1">Lokasi Kandang</label>
                         <select name="lokasi_kandang" class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-black text-indigo-600 uppercase focus:ring-2 focus:ring-indigo-500">
@@ -173,6 +181,7 @@
                             @endforeach
                         </select>
                     </div>
+
                     <div class="space-y-2">
                         <label class="text-[10px] font-bold text-slate-400 uppercase ml-1">PIC Bertugas</label>
                         <select name="pic_id" class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-[11px] font-bold text-slate-700 focus:ring-2 focus:ring-indigo-500">
@@ -210,27 +219,51 @@
                         </h4>
                         <label class="text-[10px] font-bold text-slate-400 uppercase ml-1">Berat Badan</label>
                         <div class="relative mt-2">
-                            <input type="number" step="0.01" name="berat_badan" value="{{ old('berat_badan', $cat->berat_badan) }}" class="w-full pl-5 pr-14 py-4 bg-slate-50 border border-slate-200 rounded-[1.5rem] text-2xl font-black text-slate-800 focus:ring-2 focus:ring-emerald-500 transition-all">
+                            <input type="number" step="0.01" name="berat_badan" value="{{ old('berat_badan', $cat->berat_badan) }}" class="w-full pl-5 pr-14 py-4 bg-slate-50 border border-slate-200 rounded-[1.5rem] text-2xl font-black text-slate-800 focus:ring-4 focus:ring-emerald-500/10 focus:border-emerald-500 transition-all">
                             <span class="absolute right-5 top-1/2 -translate-y-1/2 text-xs font-black text-slate-400">KG</span>
                         </div>
                     </div>
 
                     <div class="bg-white border border-slate-200 rounded-[2.5rem] p-8 shadow-sm border-l-4 border-l-rose-500">
                         <label class="text-[10px] font-black text-rose-600 uppercase tracking-widest ml-1">Kondisi Kesehatan</label>
-                        <textarea name="riwayat_sakit_terakhir" class="w-full mt-2 p-4 bg-slate-50 border border-slate-200 rounded-2xl text-xs font-bold text-slate-700 h-24 focus:ring-2 focus:ring-rose-200 transition-all">{{ old('riwayat_sakit_terakhir', $cat->riwayat_sakit_terakhir) }}</textarea>
+                        <textarea name="riwayat_sakit_terakhir" placeholder="Ceritakan kondisi kesehatan..." class="w-full mt-2 p-4 bg-slate-50 border border-slate-200 rounded-2xl text-xs font-bold text-slate-700 h-24 focus:ring-2 focus:ring-rose-200 transition-all">{{ old('riwayat_sakit_terakhir', $cat->riwayat_sakit_terakhir) }}</textarea>
                     </div>
                 </div>
             </div>
 
             {{-- Action Button --}}
-            <button type="submit" class="w-full py-6 bg-indigo-600 text-white text-xs font-black rounded-[2.5rem] shadow-2xl hover:bg-indigo-700 transition-all active:scale-[0.98] flex items-center justify-center gap-4 group">
-                <i class="fas fa-cloud-upload-alt text-lg group-hover:animate-bounce transition-transform"></i> 
+            <button type="submit" class="w-full py-6 bg-indigo-600 text-white text-xs font-black rounded-[2.5rem] shadow-2xl hover:bg-indigo-700 hover:shadow-indigo-200 transition-all active:scale-[0.98] flex items-center justify-center gap-4 group">
+                <i class="fas fa-save text-lg group-hover:rotate-12 transition-transform"></i> 
                 <span class="tracking-[0.2em] uppercase">Simpan Perubahan Data Ilycats</span>
             </button>
         </form>
     </div>
 
     <script>
+        // Logika Sinkronisasi Searchable Datalist untuk Sire/Dam
+        function handleSearchableDatalist(inputId, listId, hiddenId) {
+            const input = document.getElementById(inputId);
+            const list = document.getElementById(listId);
+            const hidden = document.getElementById(hiddenId);
+
+            input.addEventListener('input', function() {
+                const options = list.options;
+                const val = input.value;
+                hidden.value = ""; // Reset hidden ID jika input tidak cocok dengan opsi apa pun
+
+                for (let i = 0; i < options.length; i++) {
+                    if (options[i].value === val) {
+                        hidden.value = options[i].getAttribute('data-id');
+                        break;
+                    }
+                }
+            });
+        }
+
+        handleSearchableDatalist('sire_search', 'sire_list', 'induk_jantan_id');
+        handleSearchableDatalist('dam_search', 'dam_list', 'induk_betina_id');
+
+        // Preview Foto saat dipilih
         function previewImage(event) {
             const reader = new FileReader();
             const preview = document.getElementById('image-preview');

resources/views/pages/cats/index.blade.php

@@ -1,185 +1,51 @@
 <x-app-layout>
-    <div class="space-y-6 pb-8">
-        {{-- 1. STATS OVERVIEW --}}
-        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
-            <x-stats-card title="Total Kucing" :value="$totalCats" icon="fa-cat" color="indigo" />
-            <x-stats-card title="Kucing Sehat" :value="$totalCats - $sickCats" icon="fa-heart" color="emerald" />
-            <x-stats-card title="Dalam Perawatan" :value="$sickCats" icon="fa-stethoscope" color="rose" />
-        </div>
-
-        {{-- 2. ACTION HEADER --}}
-        <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
-            <div>
-                <h2 class="text-2xl font-black text-slate-800 tracking-tight leading-none mb-1 uppercase">Manajemen Kucing</h2>
-                <p class="text-[10px] text-slate-400 font-bold uppercase tracking-[0.2em]">Cattery Management System • Ilycats</p>
-            </div>
-            
-            {{-- PROTEKSI TOMBOL CREATE --}}
-            @can('check-access', ['cats', 'create'])
-            <div class="flex items-center gap-3">
-                <a href="{{ route('cats.create') }}" class="inline-flex items-center px-6 py-3 bg-indigo-600 text-white text-xs font-black rounded-2xl shadow-lg shadow-indigo-100 hover:bg-indigo-700 transition-all active:scale-95">
-                    <i class="fas fa-plus-circle mr-2"></i> REGISTRASI KUCING BARU
-                </a>
-            </div>
-            @endcan
-        </div>
-
-        {{-- 3. TABLE CONTAINER --}}
-        <div class="bg-white border border-slate-200 rounded-[2.5rem] overflow-hidden shadow-sm">
-            {{-- SEARCH & QUICK FILTER --}}
-            <div class="p-6 bg-slate-50/50 border-b border-slate-100 flex flex-col md:flex-row justify-between gap-4">
-                <form action="{{ route('cats.index') }}" method="GET" class="relative w-full md:w-1/3">
-                    <i class="fas fa-search absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 text-xs"></i>
-                    <input type="text" name="search" value="{{ request('search') }}" placeholder="Cari nama, ras, atau microchip..." 
-                           class="w-full pl-12 pr-4 py-3 bg-white border border-slate-200 rounded-xl text-xs font-bold focus:ring-2 focus:ring-indigo-500 transition-all shadow-sm">
-                </form>
-
-                <div class="flex items-center p-1 bg-slate-100 rounded-xl shrink-0">
-                    <a href="{{ route('cats.index') }}" class="px-4 py-2 rounded-lg text-[10px] font-black uppercase tracking-widest {{ !request('status') ? 'bg-white text-indigo-600 shadow-sm' : 'text-slate-500 hover:text-slate-700' }}">Semua</a>
-                    <a href="{{ route('cats.index', ['status' => 'Active']) }}" class="px-4 py-2 rounded-lg text-[10px] font-black uppercase tracking-widest {{ request('status') == 'Active' ? 'bg-white text-emerald-600 shadow-sm' : 'text-slate-500 hover:text-slate-700' }}">Dewasa</a>
-                    <a href="{{ route('cats.index', ['status' => 'Kitten']) }}" class="px-4 py-2 rounded-lg text-[10px] font-black uppercase tracking-widest {{ request('status') == 'Kitten' ? 'bg-white text-amber-600 shadow-sm' : 'text-slate-500 hover:text-slate-700' }}">Kitten</a>
-                </div>
-            </div>
-
-            <div class="overflow-x-auto">
-                <table class="w-full text-left border-collapse">
-                    <thead class="bg-slate-50 text-[10px] font-black text-slate-400 uppercase tracking-widest border-b border-slate-100">
-                        <tr>
-                            <th class="px-6 py-5">Informasi Kucing</th>
-                            <th class="px-6 py-5">Usia & Silsilah</th>
-                            <th class="px-6 py-5 text-center">Lokasi Kandang</th>
-                            <th class="px-6 py-5 text-center">Penanggung Jawab</th>
-                            <th class="px-6 py-5 text-center">Monitoring Berat</th>
-                            <th class="px-6 py-5 text-right">Aksi</th>
-                        </tr>
-                    </thead>
-                    <tbody class="divide-y divide-slate-100 font-medium text-slate-700">
-                        @forelse($cats as $cat)
-                        <tr class="hover:bg-slate-50/80 transition-all group">
-                            <td class="px-6 py-4">
-                                <div class="flex items-center gap-4">
-                                    <div class="relative shrink-0">
-                                        <div class="w-14 h-14 rounded-2xl bg-slate-100 overflow-hidden ring-4 ring-white shadow-sm transition-transform group-hover:scale-105">
-                                            <img src="{{ $cat->foto_url }}" class="w-full h-full object-cover">
-                                        </div>
-                                        @if($cat->status === 'Kitten')
-                                            <div class="absolute -top-1 -right-1 w-4 h-4 bg-amber-500 border-2 border-white rounded-full shadow-sm animate-pulse" title="Kitten"></div>
-                                        @endif
-                                    </div>
-                                    
-                                    <div>
-                                        <div class="flex items-center gap-2 mb-1">
-                                            <a href="{{ route('cats.show', $cat->id) }}" class="text-sm font-black text-slate-800 hover:text-indigo-600 transition-colors uppercase tracking-tight">{{ $cat->nama_kucing }}</a>
-                                            {!! $cat->gender_icon !!}
-                                        </div>
-                                        <div class="flex flex-col gap-1.5">
-                                            <div class="flex items-center gap-1.5">
-                                                <span class="px-2 py-0.5 bg-indigo-50 text-indigo-500 rounded text-[9px] font-black uppercase">{{ $cat->ras }}</span>
-                                                <span class="text-slate-300">•</span>
-                                                {!! $cat->registry_badges !!}
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </td>
-
-                            <td class="px-6 py-4">
-                                <div class="flex flex-col">
-                                    <span class="text-[11px] font-black text-slate-700">{{ $cat->age }}</span>
-                                    <div class="flex items-center gap-1 mt-0.5">
-                                        <i class="fas fa-birthday-cake text-[8px] text-slate-300"></i>
-                                        <span class="text-[9px] text-slate-400 font-bold italic">{{ $cat->tanggal_lahir?->format('d M Y') ?? 'N/A' }}</span>
-                                    </div>
-                                    @if($cat->induk_betina_id)
-                                        <span class="text-[8px] text-rose-400 font-bold uppercase mt-1 tracking-tighter">Dam: {{ $cat->dam->nama_kucing }}</span>
-                                    @endif
-                                </div>
-                            </td>
-
-                            <td class="px-6 py-4 text-center">
-                                <div class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-indigo-50/50 text-indigo-600 rounded-xl text-[10px] font-black border border-indigo-100 uppercase italic">
-                                    <i class="fas fa-door-closed text-[9px]"></i>
-                                    {{ $cat->lokasi_kandang ?? 'Global' }}
-                                </div>
-                            </td>
-
-                            <td class="px-6 py-4 text-center">
-                                <div class="flex flex-col items-center">
-                                    <span class="text-[10px] font-black text-slate-600 uppercase tracking-tighter">{{ $cat->pic->name ?? 'System' }}</span>
-                                    <span class="text-[8px] text-slate-400 font-bold uppercase tracking-widest">In Charge</span>
-                                </div>
-                            </td>
-
-                            <td class="px-6 py-4 text-center">
-                                @php $isOverdue = $cat->updated_at->diffInDays(now()) >= 3; @endphp
-                                <div class="flex flex-col items-center">
-                                    <div class="flex items-baseline gap-0.5 {{ $isOverdue ? 'text-rose-600' : 'text-emerald-600' }}">
-                                        <span class="text-sm font-black">{{ number_format($cat->berat_badan, 2) }}</span>
-                                        <span class="text-[9px] font-bold">KG</span>
-                                    </div>
-                                    @if($isOverdue) 
-                                        <div class="flex items-center gap-1 mt-1 text-rose-400 animate-pulse">
-                                            <i class="fas fa-exclamation-triangle text-[8px]"></i>
-                                            <span class="text-[7px] font-black uppercase tracking-widest">Update!</span> 
-                                        </div>
-                                    @endif
-                                </div>
-                            </td>
-
-                            <td class="px-6 py-4 text-right">
-                                <div class="flex justify-end items-center gap-2">
-                                    {{-- PROTEKSI TOMBOL READ --}}
-                                    @can('check-access', ['cats', 'read'])
-                                    <a href="{{ route('cats.show', $cat->id) }}" 
-                                       class="w-9 h-9 flex items-center justify-center bg-indigo-50 text-indigo-600 rounded-xl hover:bg-indigo-600 hover:text-white transition-all shadow-sm group-hover:shadow-indigo-100" 
-                                       title="Detail Medis">
-                                        <i class="fas fa-heartbeat text-xs"></i>
-                                    </a>
-                                    @endcan
-
-                                    {{-- PROTEKSI TOMBOL EDIT/UPDATE --}}
-                                    @can('check-access', ['cats', 'update'])
-                                    <a href="{{ route('cats.edit', $cat->id) }}" 
-                                       class="w-9 h-9 flex items-center justify-center bg-amber-50 text-amber-600 rounded-xl hover:bg-amber-600 hover:text-white transition-all shadow-sm" 
-                                       title="Edit Profil">
-                                        <i class="fas fa-pencil-alt text-xs"></i>
-                                    </a>
-                                    @endcan
-
-                                    {{-- PROTEKSI TOMBOL DELETE --}}
-                                    @can('check-access', ['cats', 'delete'])
-                                    <button type="button" 
-                                            onclick="confirmDelete('delete-form-{{ $cat->id }}', '{{ $cat->nama_kucing }}')"
-                                            class="w-9 h-9 flex items-center justify-center bg-rose-50 text-rose-600 rounded-xl hover:bg-rose-500 hover:text-white transition-all shadow-sm" 
-                                            title="Hapus">
-                                        <i class="fas fa-trash text-xs"></i>
-                                    </button>
-
-                                    <form id="delete-form-{{ $cat->id }}" action="{{ route('cats.destroy', $cat->id) }}" method="POST" class="hidden">
-                                        @csrf @method('DELETE')
-                                    </form>
-                                    @endcan
-                                </div>
-                            </td>
-                        </tr>
-                        @empty
-                        <tr>
-                            <td colspan="6" class="px-6 py-32 text-center bg-slate-50/30">
-                                <div class="flex flex-col items-center">
-                                    <i class="fas fa-cat text-5xl text-slate-100 mb-4 animate-bounce"></i>
-                                    <h3 class="text-slate-400 font-black uppercase text-xs tracking-[0.4em]">Belum Ada Data Kucing</h3>
-                                    <p class="text-slate-300 text-[10px] font-bold mt-2 uppercase">Silakan klik tombol registrasi untuk memulai</p>
-                                </div>
-                            </td>
-                        </tr>
-                        @endforelse
-                    </tbody>
-                </table>
-            </div>
-
-            <div class="p-8 border-t border-slate-100 bg-slate-50/30">
-                {{ $cats->links() }}
-            </div>
-        </div>
+    @php
+        $currentSort=request('sort','created_at'); $currentDir=request('direction','desc'); $nextDir=$currentDir==='asc'?'desc':'asc';
+        $sortIcon=function($field)use($currentSort,$currentDir){return $currentSort!==$field?'fa-sort text-slate-300':($currentDir==='asc'?'fa-sort-up text-indigo-600':'fa-sort-down text-indigo-600');};
+    @endphp
+    <div class="mb-6 flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
+        <div><h1 class="text-2xl font-bold text-slate-900">Data kucing</h1><p class="mt-1 text-sm text-slate-500">Profil, silsilah, pedigree, berat badan, dan jadwal perawatan.</p></div>
+        <div class="flex flex-wrap gap-2">@can('check-access',['cats','update'])<a href="{{ route('cats.bulk-weight') }}" class="border border-slate-300 bg-white px-4 py-2.5 text-sm font-semibold text-slate-700 hover:bg-slate-50"><i class="fas fa-weight-scale mr-2"></i>Input berat massal</a>@endcan @can('check-access',['cats','create'])<a href="{{ route('cats.create') }}" class="bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white hover:bg-indigo-700"><i class="fas fa-plus mr-2"></i>Tambah kucing</a>@endcan</div>
     </div>
-</x-app-layout>
+
+    <div class="mb-5 grid gap-3 sm:grid-cols-3">
+        <div class="border border-slate-200 bg-white p-4"><p class="text-xs text-slate-500">Total kucing</p><p class="mt-1 text-2xl font-bold text-slate-900">{{ $totalCats }}</p></div>
+        <div class="border border-slate-200 bg-white p-4"><p class="text-xs text-slate-500">Sehat</p><p class="mt-1 text-2xl font-bold text-emerald-700">{{ max(0,$totalCats-$sickCats) }}</p></div>
+        <div class="border border-slate-200 bg-white p-4"><p class="text-xs text-slate-500">Dalam perawatan</p><p class="mt-1 text-2xl font-bold text-rose-600">{{ $sickCats }}</p></div>
+    </div>
+
+    <section class="border border-slate-200 bg-white">
+        <div class="flex flex-col gap-3 border-b border-slate-200 p-4 lg:flex-row lg:items-center lg:justify-between">
+            <form method="GET" action="{{ route('cats.index') }}" class="flex w-full max-w-lg gap-2">
+                <input type="hidden" name="status" value="{{ request('status') }}"><input type="hidden" name="sort" value="{{ request('sort') }}"><input type="hidden" name="direction" value="{{ request('direction') }}">
+                <div class="relative flex-1"><i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-sm text-slate-400"></i><input name="search" value="{{ request('search') }}" placeholder="Cari nama, EMS, microchip, ras, kandang..." class="field-input pl-9"></div><button class="border border-slate-300 px-4 text-sm font-semibold text-slate-700 hover:bg-slate-50">Cari</button>
+            </form>
+            <div class="flex flex-wrap gap-1 text-sm">@foreach([''=>'Semua','Dewasa'=>'Dewasa','Junior'=>'Junior','Kitten'=>'Kitten'] as $value=>$label)<a href="{{ route('cats.index',array_merge(request()->except('page','status'),$value?['status'=>$value]:[])) }}" class="px-3 py-2 {{ request('status','')===$value?'bg-slate-900 text-white':'text-slate-600 hover:bg-slate-100' }}">{{ $label }}</a>@endforeach</div>
+        </div>
+
+        <div class="overflow-x-auto">
+            <table class="min-w-full divide-y divide-slate-200 text-sm">
+                <thead class="bg-slate-50 text-left text-xs font-semibold text-slate-500"><tr>
+                    <th class="px-4 py-3"><a class="flex items-center gap-2" href="{{ request()->fullUrlWithQuery(['sort'=>'nama_kucing','direction'=>$nextDir]) }}">Kucing <i class="fas {{ $sortIcon('nama_kucing') }}"></i></a></th>
+                    <th class="px-4 py-3">Identitas & pedigree</th><th class="px-4 py-3">Silsilah</th>
+                    <th class="px-4 py-3"><a class="flex items-center gap-2" href="{{ request()->fullUrlWithQuery(['sort'=>'berat_badan','direction'=>$nextDir]) }}">Berat <i class="fas {{ $sortIcon('berat_badan') }}"></i></a></th>
+                    <th class="px-4 py-3"><a class="flex items-center gap-2" href="{{ request()->fullUrlWithQuery(['sort'=>'lokasi_kandang','direction'=>$nextDir]) }}">Kandang <i class="fas {{ $sortIcon('lokasi_kandang') }}"></i></a></th>
+                    <th class="px-4 py-3 text-right">Aksi</th>
+                </tr></thead>
+                <tbody class="divide-y divide-slate-100">
+                @forelse($cats as $cat)
+                    <tr class="hover:bg-slate-50">
+                        <td class="px-4 py-3"><div class="flex min-w-52 items-center gap-3"><img src="{{ $cat->foto_url }}" alt="{{ $cat->nama_kucing }}" class="h-11 w-11 rounded-lg border border-slate-200 object-cover"><div><a href="{{ route('cats.show',$cat) }}" class="font-semibold text-slate-900 hover:text-indigo-600">{{ $cat->nama_kucing }}</a><p class="mt-0.5 text-xs text-slate-500">{{ $cat->jenis_kelamin }} · {{ $cat->ras }}</p></div></div></td>
+                        <td class="px-4 py-3"><div class="space-y-1"><p class="text-xs text-slate-600"><span class="text-slate-400">EMS:</span> {{ $cat->kode_ems ?: '-' }}</p><p class="text-xs text-slate-600"><span class="text-slate-400">Microchip:</span> {{ $cat->microchip ?: '-' }}</p><div class="flex flex-wrap gap-1">@forelse($cat->registrations as $reg)<span class="border border-slate-200 bg-slate-50 px-1.5 py-0.5 text-[11px] font-semibold text-slate-600">{{ $reg->association->code }}{{ $reg->is_primary?' · utama':'' }}</span>@empty<span class="text-xs text-slate-400">Belum ada registrasi</span>@endforelse</div></div></td>
+                        <td class="px-4 py-3"><p class="text-xs text-slate-600">{{ $cat->age }}</p><p class="mt-1 text-xs text-slate-500">Jantan: {{ $cat->sire->nama_kucing ?? '-' }}</p><p class="text-xs text-slate-500">Betina: {{ $cat->dam->nama_kucing ?? '-' }}</p></td>
+                        <td class="px-4 py-3"><p class="font-semibold text-slate-800">{{ number_format((float)($cat->berat_badan ?? $cat->berat_terakhir ?? 0),2) }} kg</p><p class="text-xs {{ $cat->treatment_status==1?'text-rose-600':'text-emerald-600' }}">{{ $cat->treatment_status==1?'Dalam perawatan':'Sehat' }}</p></td>
+                        <td class="px-4 py-3"><p class="text-slate-700">{{ $cat->lokasi_kandang ?: '-' }}</p><p class="text-xs text-slate-500">{{ $cat->pic->name ?? '-' }}</p></td>
+                        <td class="px-4 py-3"><div class="flex justify-end gap-1"><a href="{{ route('cats.show',$cat) }}" class="p-2 text-slate-500 hover:bg-slate-100" title="Lihat"><i class="fas fa-eye"></i></a><a href="{{ route('cats.pedigree',$cat) }}" class="p-2 text-slate-500 hover:bg-slate-100" title="Pedigree"><i class="fas fa-file-lines"></i></a>@can('check-access',['cats','update'])<a href="{{ route('cats.edit',$cat) }}" class="p-2 text-slate-500 hover:bg-slate-100" title="Ubah"><i class="fas fa-pen"></i></a>@endcan @can('check-access',['cats','delete'])<form id="delete-cat-{{ $cat->id }}" method="POST" action="{{ route('cats.destroy',$cat) }}">@csrf @method('DELETE')<button type="button" onclick="confirmDelete('delete-cat-{{ $cat->id }}','{{ addslashes($cat->nama_kucing) }}')" class="p-2 text-rose-500 hover:bg-rose-50" title="Hapus"><i class="fas fa-trash"></i></button></form>@endcan</div></td>
+                    </tr>
+                @empty<tr><td colspan="6" class="px-4 py-12 text-center text-sm text-slate-500">Data kucing tidak ditemukan.</td></tr>@endforelse
+                </tbody>
+            </table>
+        </div>
+        <div class="border-t border-slate-200 p-4">{{ $cats->links() }}</div>
+    </section>
+</x-app-layout>

resources/views/pages/cats/medical-bulk.blade.php

@@ -0,0 +1,335 @@
+<x-app-layout>
+    <div class="max-w-[1600px] mx-auto space-y-8 pb-12">
+        {{-- Header Section --}}
+        <div class="flex items-center gap-4 px-2">
+            <a href="{{ route('cats.index') }}" class="p-3 bg-white border border-slate-200 rounded-2xl text-slate-400 hover:text-indigo-600 transition-all shadow-sm active:scale-90">
+                <i class="fas fa-arrow-left"></i>
+            </a>
+            <div>
+                <h2 class="text-3xl font-black text-slate-800 tracking-tight leading-none">Bulk Perawatan Manager</h2>
+                <p class="text-sm text-slate-500 font-medium italic uppercase tracking-widest mt-1">Manajemen Tindakan Medis Masal • Ily Cattery</p>
+            </div>
+        </div>
+
+        <form action="{{ route('medical-records.bulk.store') }}" method="POST">
+            @csrf
+            <div class="grid grid-cols-1 xl:grid-cols-12 gap-8 px-2">
+                
+                {{-- KIRI: Pemilihan Kucing --}}
+                <div class="lg:col-span-5 space-y-6">
+                    <div x-data="catSelector()" class="bg-white border border-slate-200 rounded-[3rem] p-8 shadow-sm h-full flex flex-col relative overflow-hidden">
+                        
+                        <div class="flex items-center justify-between mb-6">
+                            <div class="flex items-center gap-3">
+                                <h4 class="font-black text-slate-800 uppercase tracking-tighter text-lg">Pilih Kucing</h4>
+                                <div x-show="selectedCount > 0" x-transition x-cloak class="flex items-center">
+                                    <span class="bg-indigo-100 text-indigo-700 text-[10px] font-black px-2.5 py-1 rounded-lg uppercase tracking-widest border border-indigo-200 shadow-sm">
+                                        <span x-text="selectedCount"></span> Terpilih
+                                    </span>
+                                </div>
+                            </div>
+
+                            <div class="flex items-center gap-2">
+                                <input type="checkbox" id="select_all" x-model="selectAll" @change="toggleAll()" class="w-4 h-4 text-indigo-600 border-slate-300 rounded focus:ring-indigo-500 cursor-pointer">
+                                <label for="select_all" class="text-[10px] font-black text-slate-400 uppercase tracking-widest cursor-pointer hover:text-indigo-600 transition-colors">Pilih Semua</label>
+                            </div>
+                        </div>
+
+                        {{-- Search Filter Kucing --}}
+                        <div class="relative mb-6">
+                            <i class="fas fa-search absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 text-xs"></i>
+                            <input type="text" x-model="search" @input="resetPage()" placeholder="Cari nama atau kode kucing..." class="w-full pl-11 pr-4 py-3.5 bg-slate-50 border border-slate-200 rounded-2xl text-xs font-bold focus:ring-4 focus:ring-indigo-500/10 outline-none transition-all placeholder:text-slate-400">
+                        </div>
+
+                        {{-- List Kucing (Paginated) --}}
+                        <div class="flex-1 overflow-y-auto custom-scrollbar pr-2 space-y-3" style="max-height: 450px;">
+                            <template x-for="cat in paginatedCats" :key="cat.id">
+                                <label class="flex items-center gap-4 p-4 rounded-3xl border transition-all cursor-pointer group"
+                                       :class="selectedCats.includes(cat.id.toString()) ? 'border-indigo-400 bg-indigo-50/80 ring-1 ring-indigo-400 shadow-md' : 'border-slate-100 bg-slate-50/50 hover:bg-indigo-50 hover:border-indigo-100'">
+                                    
+                                    <input type="checkbox" name="cat_ids[]" :value="cat.id" x-model="selectedCats" @change="updateSelectAll()" class="cat-checkbox w-5 h-5 text-indigo-600 border-slate-300 rounded-lg focus:ring-indigo-500 transition-all cursor-pointer">
+                                    
+                                    <div class="w-12 h-12 rounded-2xl overflow-hidden border-2 shadow-sm shrink-0" :class="selectedCats.includes(cat.id.toString()) ? 'border-indigo-200' : 'border-white'">
+                                        <img :src="cat.foto_url" class="w-full h-full object-cover">
+                                    </div>
+                                    
+                                    <div class="min-w-0 flex-1">
+                                        <p class="text-sm font-black uppercase truncate leading-none mb-1 transition-colors" :class="selectedCats.includes(cat.id.toString()) ? 'text-indigo-900' : 'text-slate-800'" x-text="cat.nama_kucing"></p>
+                                        <span class="text-[8px] font-black text-slate-400 uppercase tracking-widest" x-text="`${cat.ras} • ${cat.lokasi_kandang || 'Global'}`"></span>
+                                    </div>
+                                    
+                                    <div class="text-right">
+                                        <span class="px-2 py-1 bg-white border border-slate-100 rounded-lg text-[8px] font-black text-slate-400 uppercase" x-text="`#${cat.id}`"></span>
+                                    </div>
+                                </label>
+                            </template>
+
+                            <div x-show="paginatedCats.length === 0" x-cloak class="py-10 text-center text-slate-400">
+                                <i class="fas fa-folder-open text-3xl mb-3 opacity-50"></i>
+                                <p class="text-xs font-bold uppercase tracking-widest">Tidak ada kucing ditemukan</p>
+                            </div>
+                        </div>
+
+                        {{-- Pagination Controls --}}
+                        <div class="mt-6 pt-4 border-t border-slate-100 flex items-center justify-between" x-show="totalPages > 1" x-cloak>
+                            <button type="button" @click="prevPage()" :disabled="currentPage === 1" class="p-2 bg-slate-50 text-slate-400 rounded-xl hover:bg-indigo-50 hover:text-indigo-600 disabled:opacity-50 disabled:cursor-not-allowed transition-all">
+                                <i class="fas fa-chevron-left text-xs"></i>
+                            </button>
+                            
+                            <span class="text-[10px] font-black text-slate-400 uppercase tracking-widest">
+                                Halaman <span class="text-indigo-600" x-text="currentPage"></span> dari <span x-text="totalPages"></span>
+                            </span>
+                            
+                            <button type="button" @click="nextPage()" :disabled="currentPage === totalPages" class="p-2 bg-slate-50 text-slate-400 rounded-xl hover:bg-indigo-50 hover:text-indigo-600 disabled:opacity-50 disabled:cursor-not-allowed transition-all">
+                                <i class="fas fa-chevron-right text-xs"></i>
+                            </button>
+                        </div>
+
+                    </div>
+                </div>
+
+                {{-- KANAN: Konfigurasi Tindakan --}}
+                <div class="lg:col-span-7 space-y-6">
+                    <div class="bg-indigo-600 rounded-[3rem] p-10 text-white shadow-xl shadow-indigo-100 relative overflow-hidden h-full flex flex-col justify-between">
+                        <div class="relative z-10 space-y-8">
+                            <div>
+                                <h3 class="text-2xl font-black uppercase tracking-tight">Perawatan Configuration</h3>
+                                <p class="text-indigo-100 text-xs font-bold italic tracking-tighter uppercase">Terapkan tindakan & potong stok otomatis</p>
+                            </div>
+
+                            <div class="space-y-6">
+                                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                                    <div class="space-y-2">
+                                        <label class="text-[10px] font-black text-indigo-200 uppercase ml-1 tracking-widest">Jenis Tindakan</label>
+                                        <select name="type" id="type_selector" onchange="adjustBulkForm()" required class="w-full px-5 py-4 bg-white/10 border border-white/20 rounded-2xl text-xs font-black text-white focus:ring-4 focus:ring-white/10 outline-none appearance-none cursor-pointer">
+                                            <option value="Vaccine" class="text-slate-800">Vaksinasi</option>
+                                            <option value="Deworming" class="text-slate-800">Obat Cacing</option>
+                                            <option value="Flea Perawatan" class="text-slate-800">Obat Kutu</option>
+                                            <option value="Grooming" class="text-slate-800">Grooming (Tanpa Obat)</option>
+                                            <option value="Medis Checkup" class="text-slate-800">Medis Checkup (Multi-Obat)</option>
+                                        </select>
+                                    </div>
+                                    <div class="space-y-2">
+                                        <label class="text-[10px] font-black text-indigo-200 uppercase ml-1 tracking-widest">Tanggal Pemberian</label>
+                                        <input type="date" name="date_given" value="{{ date('Y-m-d') }}" required class="w-full px-5 py-4 bg-white/10 border border-white/20 rounded-2xl text-xs font-black text-white">
+                                    </div>
+                                </div>
+
+                               {{-- Container Obat Dinamis --}}
+                                <div id="medicine_container" class="space-y-4">
+                                    <div class="medicine-row grid grid-cols-1 md:grid-cols-7 gap-4 p-6 bg-white/5 rounded-[2.5rem] border border-white/10 relative">
+                                        <div class="md:col-span-3 space-y-2">
+                                            <label class="text-[9px] font-black text-indigo-200 uppercase">Nama Produk</label>
+                                            {{-- PERBAIKAN: Tambahkan onchange event ke select --}}
+                                            <select name="medicines[0][name]" onchange="updateObatDetails(this)" required class="medicine-name-input w-full px-4 py-3 bg-white text-slate-800 border-none rounded-xl text-xs font-black cursor-pointer focus:ring-4 focus:ring-indigo-500/30 outline-none">
+                                                <option value="" disabled selected>-- Pilih Obat / Vitamin --</option>
+                                                @foreach($availableObats as $med)
+                                                    <option value="{{ $med->nama_obat }}">{{ $med->nama_obat }} (Sisa: {{ (float)$med->qty }} {{ $med->unit }})</option>
+                                                @endforeach
+                                            </select>
+                                        </div>
+                                        <div class="md:col-span-2 space-y-2">
+                                            <label class="text-[9px] font-black text-indigo-200 uppercase">Dosis (Per Kucing)</label>
+                                            {{-- Tambahkan class 'dosage-input' --}}
+                                            <input type="text" name="medicines[0][dosage]" placeholder="Cth: 1 atau 1/2" required class="dosage-input w-full px-4 py-3 bg-white text-slate-800 border-none rounded-xl text-xs font-black">
+                                        </div>
+                                        <div class="md:col-span-2 space-y-2">
+                                            <label class="text-[9px] font-black text-indigo-200 uppercase">Satuan</label>
+                                            <input type="text" name="medicines[0][unit]" placeholder="-" readonly class="unit-display w-full px-4 py-3 bg-indigo-500/30 text-indigo-100 border border-white/10 rounded-xl text-[10px] font-black uppercase">
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <button type="button" id="add_med_btn" onclick="addBulkObatRow()" class="hidden items-center gap-2 text-[10px] font-black text-white uppercase tracking-widest hover:text-indigo-200 transition-all cursor-pointer">
+                                    <i class="fas fa-plus-circle"></i> Tambah Obat Lain
+                                </button>
+
+                                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                                    <div class="space-y-2">
+                                        <label class="text-[10px] font-black text-indigo-200 uppercase ml-1 tracking-widest">Rencana Selanjutnya</label>
+                                        <input type="date" name="next_schedule" class="w-full px-5 py-4 bg-white/10 border border-white/20 rounded-2xl text-xs font-black text-white">
+                                    </div>
+                                    <div class="space-y-2">
+                                        <label class="text-[10px] font-black text-indigo-200 uppercase ml-1 tracking-widest">Catatan (Notes)</label>
+                                        <textarea name="notes" placeholder="Berlaku untuk semua kucing yang dipilih..." class="w-full px-5 py-4 bg-white/10 border border-white/20 rounded-2xl text-xs font-black text-white h-14 outline-none focus:ring-4 focus:ring-white/10"></textarea>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="relative z-10 mt-8">
+                            <button type="submit" class="w-full py-6 bg-white text-indigo-600 font-black rounded-[2rem] text-xs uppercase tracking-[0.4em] shadow-2xl hover:scale-[1.02] transition-all active:scale-95">
+                                APPLY TO SELECTED CATS
+                            </button>
+                        </div>
+                        <i class="fas fa-heartbeat absolute -bottom-10 -left-10 text-[15rem] text-white/5"></i>
+                    </div>
+                </div>
+            </div>
+        </form>
+    </div>
+
+    @push('scripts')
+    @php
+        // Mengolah data kucing agar aman untuk dibaca oleh AlpineJS
+        $catData = $cats->map(function($cat) {
+            return [
+                'id' => $cat->id,
+                'nama_kucing' => $cat->nama_kucing,
+                'ras' => $cat->ras,
+                'lokasi_kandang' => $cat->lokasi_kandang,
+                'foto_url' => $cat->foto_url
+            ];
+        })->values()->toArray();
+    @endphp
+
+    <script>
+        // Data Global untuk Javascript
+        const allCatsData = @json($catData);
+        const availableMeds = @json($availableObats);
+
+        // ALPINE JS COMPONENT: Penanganan Pilih Kucing & Pagination
+        document.addEventListener('alpine:init', () => {
+            Alpine.data('catSelector', () => ({
+                search: '',
+                currentPage: 1,
+                itemsPerPage: 10,
+                selectedCats: [],
+                selectAll: false,
+                allCats: allCatsData,
+
+                get filteredCats() {
+                    if (this.search === '') return this.allCats;
+                    const term = this.search.toLowerCase();
+                    return this.allCats.filter(cat => 
+                        cat.nama_kucing.toLowerCase().includes(term) || 
+                        (cat.lokasi_kandang && cat.lokasi_kandang.toLowerCase().includes(term))
+                    );
+                },
+
+                get totalPages() { return Math.ceil(this.filteredCats.length / this.itemsPerPage) || 1; },
+                
+                get paginatedCats() {
+                    const start = (this.currentPage - 1) * this.itemsPerPage;
+                    return this.filteredCats.slice(start, start + this.itemsPerPage);
+                },
+
+                get selectedCount() { return this.selectedCats.length; },
+
+                nextPage() { if (this.currentPage < this.totalPages) this.currentPage++; },
+                prevPage() { if (this.currentPage > 1) this.currentPage--; },
+
+                resetPage() {
+                    this.currentPage = 1;
+                    this.updateSelectAll();
+                },
+
+                toggleAll() {
+                    if (this.selectAll) {
+                        const currentVisibleIds = this.filteredCats.map(c => c.id.toString());
+                        currentVisibleIds.forEach(id => {
+                            if (!this.selectedCats.includes(id)) { this.selectedCats.push(id); }
+                        });
+                    } else {
+                        const currentVisibleIds = this.filteredCats.map(c => c.id.toString());
+                        this.selectedCats = this.selectedCats.filter(id => !currentVisibleIds.includes(id));
+                    }
+                },
+
+                updateSelectAll() {
+                    if (this.filteredCats.length === 0) {
+                        this.selectAll = false;
+                        return;
+                    }
+                    const currentVisibleIds = this.filteredCats.map(c => c.id.toString());
+                    this.selectAll = currentVisibleIds.every(id => this.selectedCats.includes(id));
+                }
+            }));
+        });
+
+        // ---------------------------------------------------------
+        // LOGIKA FORM OBAT (AUTO-READ SATUAN DARI DATABASE)
+        // ---------------------------------------------------------
+        let medRowCount = 1;
+
+        // HTML untuk opsi select baru (Tambah Obat Lain)
+        const medOptionsHtml = `<option value="" disabled selected>-- Pilih Obat / Vitamin --</option>` + 
+            availableMeds.map(med => `<option value="${med.nama_obat}">${med.nama_obat} (Sisa: ${parseFloat(med.qty)} ${med.unit})</option>`).join('');
+
+        // 1. FUNGSI MENARIK SATUAN OTOMATIS SAAT OBAT DIPILIH
+        function updateObatDetails(selectElement) {
+            const row = selectElement.closest('.medicine-row');
+            const unitInput = row.querySelector('.unit-display');
+            
+            const selectedName = selectElement.value;
+            // Cari data obat dari array database
+            const medicine = availableMeds.find(m => m.nama_obat === selectedName);
+
+            if (medicine) {
+                // Tuliskan langsung satuannya (Misal: Botol, ML, PCS)
+                unitInput.value = medicine.unit;
+            } else {
+                unitInput.value = '-';
+            }
+        }
+
+        // 2. FUNGSI TAMPIL / SEMBUNYI FORM
+        function adjustBulkForm() {
+            const type = document.getElementById('type_selector').value;
+            const container = document.getElementById('medicine_container');
+            const addBtn = document.getElementById('add_med_btn');
+            const medInputs = document.querySelectorAll('.medicine-name-input');
+
+            container.classList.remove('hidden');
+            addBtn.classList.add('hidden');
+            
+            if (type === 'Grooming') {
+                container.classList.add('hidden');
+                medInputs.forEach(i => i.required = false);
+            } else {
+                container.classList.remove('hidden');
+                medInputs.forEach(i => i.required = true);
+                
+                if (type === 'Medis Checkup') {
+                    addBtn.classList.remove('hidden');
+                }
+            }
+        }
+
+        function updateBulkUnits(val) {
+            document.querySelectorAll('.unit-display').forEach(u => u.value = val);
+        }
+
+       // 3. FUNGSI TAMBAH BARIS OBAT BARU
+        function addBulkObatRow() {
+            const container = document.getElementById('medicine_container');
+            const row = document.createElement('div');
+            row.className = 'medicine-row grid grid-cols-1 md:grid-cols-7 gap-4 p-6 bg-white/10 rounded-[2.5rem] border border-white/5 mt-4 relative';
+            row.innerHTML = `
+                <div class="md:col-span-3 space-y-2">
+                    <select name="medicines[${medRowCount}][name]" onchange="updateObatDetails(this)" required class="medicine-name-input w-full px-4 py-3 bg-white text-slate-800 border-none rounded-xl text-xs font-black cursor-pointer focus:ring-4 focus:ring-indigo-500/30 outline-none">
+                        ${medOptionsHtml}
+                    </select>
+                </div>
+                <div class="md:col-span-2 space-y-2">
+                    <input type="text" name="medicines[${medRowCount}][dosage]" placeholder="Cth: 1 atau 1/2" required class="w-full px-4 py-3 bg-white text-slate-800 border-none rounded-xl text-xs font-black">
+                </div>
+                <div class="md:col-span-2 flex items-center gap-2">
+                    <input type="text" name="medicines[${medRowCount}][unit]" placeholder="-" value="" readonly class="unit-display w-full px-4 py-3 bg-indigo-500/30 text-indigo-100 border border-white/10 rounded-xl text-[10px] font-black uppercase">
+                    <button type="button" onclick="this.parentElement.parentElement.remove()" class="text-white hover:text-rose-200 transition-colors"><i class="fas fa-times-circle text-lg"></i></button>
+                </div>
+            `;
+            container.appendChild(row);
+            medRowCount++;
+        }
+
+        // Saat halaman pertama kali dimuat
+        document.addEventListener('DOMContentLoaded', () => {
+            adjustBulkForm();
+            // Kosongkan semua satuan default bawaan browser jika ada
+            document.querySelectorAll('.unit-display').forEach(u => u.value = '');
+        });
+        
+    </script>
+    @endpush
+</x-app-layout>

resources/views/pages/cats/medical-ledger-create.blade.php

@@ -0,0 +1,152 @@
+<x-app-layout>
+    <div class="max-w-3xl mx-auto py-12 px-4">
+        {{-- Header --}}
+        <div class="flex items-center gap-6 mb-10">
+            <a href="{{ route('cats.show', $cat->id) }}" class="p-4 bg-white border border-slate-200 rounded-2xl text-slate-400 hover:text-indigo-600 transition-all shadow-sm">
+                <i class="fas fa-arrow-left"></i>
+            </a>
+            <div>
+                <h2 class="text-2xl font-black text-slate-800 uppercase tracking-tight">Add Routine Ledger</h2>
+                <p class="text-sm text-slate-400 font-bold uppercase tracking-widest">Logging for: {{ $cat->nama_kucing }}</p>
+            </div>
+        </div>
+
+        {{-- Form Card --}}
+        <div class="bg-white rounded-[3rem] shadow-xl border border-slate-100 overflow-hidden">
+            <div class="p-10">
+                <form action="{{ route('medical-records.store') }}" method="POST" class="space-y-8">
+                    @csrf
+                    <input type="hidden" name="cat_id" value="{{ $cat->id }}">
+
+                    {{-- Jenis Tindakan (Tanpa Pengobatan Umum) --}}
+                    <div class="space-y-3">
+                        <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-2">Jenis Tindakan</label>
+                        <select name="type" id="type_selector" onchange="adjustMedisForm()" class="w-full px-6 py-5 bg-slate-50 border-none rounded-3xl text-sm font-black text-slate-800 focus:ring-4 focus:ring-indigo-500/10 transition-all cursor-pointer">
+                            <option value="Vaccine">Vaksinasi</option>
+                            <option value="Deworming">Obat Cacing</option>
+                            <option value="Flea Perawatan">Obat Kutu</option>
+                            <option value="Grooming">Grooming</option>
+                        </select>
+                    </div>
+
+                    {{-- Obat Container --}}
+                    <div id="medicine_container" class="space-y-4">
+                        <div class="medicine-row p-6 bg-slate-50 rounded-[2.5rem] border border-slate-100 space-y-4">
+                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 medicine-row-inner">
+                                <div class="space-y-2">
+                                    <label class="text-[9px] font-black text-slate-400 uppercase ml-2">Produk/Obat</label>
+                                    {{-- oninput dan onchange digunakan agar auto-fill langsung jalan --}}
+                                    <input type="text" name="medicines[0][name]" id="med_name_input" list="medicine-list" required 
+                                           oninput="autoFillObat(this)"
+                                           onchange="autoFillObat(this)"
+                                           class="medicine-name-input w-full px-5 py-4 border-none rounded-2xl text-xs font-black bg-white shadow-sm focus:ring-4 focus:ring-indigo-500/10" placeholder="Ketik atau pilih obat...">
+                                </div>
+                                <div class="grid grid-cols-2 gap-4">
+                                    <div class="space-y-2">
+                                        <label class="text-[9px] font-black text-slate-400 uppercase ml-2">Dosis</label>
+                                        <input type="text" name="medicines[0][dosage]" id="med_dosage_input" placeholder="e.g. 1/2 atau 1" required 
+                                               class="dosage-input w-full px-5 py-4 border-none rounded-2xl text-xs font-black bg-white shadow-sm focus:ring-4 focus:ring-indigo-500/10">
+                                    </div>
+                                    <div class="space-y-2">
+                                        <label class="text-[9px] font-black text-slate-400 uppercase ml-2">Satuan</label>
+                                        <input type="text" name="medicines[0][unit]" id="med_unit_input" readonly 
+                                               class="unit-display w-full px-5 py-4 bg-slate-100 border-none rounded-2xl text-[10px] font-black text-slate-400 cursor-not-allowed outline-none">
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    {{-- Tanggal --}}
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+                        <div class="space-y-3">
+                            <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-2">Tanggal Tindakan</label>
+                            <input type="date" name="date_given" value="{{ date('Y-m-d') }}" required class="w-full px-6 py-5 bg-slate-50 border-none rounded-3xl text-sm font-black focus:ring-4 focus:ring-indigo-500/10">
+                        </div>
+                        <div class="space-y-3">
+                            <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-2">Jadwal Berikutnya</label>
+                            <input type="date" name="next_schedule" class="w-full px-6 py-5 bg-slate-50 border-none rounded-3xl text-sm font-black focus:ring-4 focus:ring-indigo-500/10">
+                        </div>
+                    </div>
+
+                    <div class="space-y-3">
+                        <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-2">Notes</label>
+                        <textarea name="notes" placeholder="Catatan opsional..." class="w-full px-6 py-5 bg-slate-50 border-none rounded-3xl text-sm font-bold h-32 focus:ring-4 focus:ring-indigo-500/10"></textarea>
+                    </div>
+
+                    <button type="submit" class="w-full py-6 bg-indigo-600 text-white rounded-[2rem] font-black uppercase text-xs tracking-[0.3em] shadow-2xl shadow-indigo-200 hover:bg-indigo-700 transition-all transform active:scale-95">
+                        Confirm & Log Routine Ledger
+                    </button>
+                </form>
+            </div>
+        </div>
+    </div>
+
+    {{-- Datalist dibersihkan agar hanya muncul Nama Obat --}}
+    <datalist id="medicine-list">
+        @foreach($availableObats as $med)
+            <option value="{{ $med->nama_obat }}"></option>
+        @endforeach
+    </datalist>
+
+    @push('scripts')
+    <script>
+        // 1. Tarik Data Master Obat dari Database ke JavaScript
+        const masterObatData = {!! json_encode($availableObats) !!};
+
+        // 2. Tampilkan/Sembunyikan Form Obat berdasarkan "Jenis Tindakan"
+        function adjustMedisForm() {
+            const type = document.getElementById('type_selector').value;
+            const container = document.getElementById('medicine_container');
+            const nameInput = document.getElementById('med_name_input');
+            const dosageInput = document.getElementById('med_dosage_input');
+            const unitInput = document.getElementById('med_unit_input');
+
+            if (type === 'Grooming') {
+                // Grooming tidak butuh obat
+                container.style.display = 'none';
+                nameInput.required = false;
+                dosageInput.required = false;
+            } else {
+                container.style.display = 'block';
+                nameInput.required = true;
+                dosageInput.required = true;
+                
+                // Jika nama obat masih kosong, set satuan default berdasarkan jenis tindakan
+                const fallbackUnit = { 'Vaccine': 'PCS', 'Deworming': 'TABLET', 'Flea Perawatan': 'ML' };
+                if (nameInput.value === '') {
+                    unitInput.value = fallbackUnit[type] || 'PCS';
+                }
+            }
+        }
+
+        // 3. Fungsi Cerdas: Auto-Fill Dosis dan Satuan
+        function autoFillObat(inputElement) {
+            const row = inputElement.closest('.medicine-row-inner');
+            const unitInput = row.querySelector('.unit-display');
+            const dosageInput = row.querySelector('.dosage-input');
+
+            // Cari kecocokan nama obat dengan data master (Tidak sensitif huruf besar/kecil)
+            const selectedObat = masterObatData.find(med => med.nama_obat.toLowerCase() === inputElement.value.toLowerCase());
+
+            if (selectedObat) {
+                // Jika obat terdaftar di database, ambil satuannya!
+                unitInput.value = selectedObat.unit;
+                
+                // Beri nilai otomatis "1" pada dosis jika masih kosong untuk mempercepat input
+                if (!dosageInput.value) {
+                    dosageInput.value = '1';
+                }
+            } else {
+                // Jika obat diketik manual (tidak ada di database), kembalikan ke satuan default
+                const type = document.getElementById('type_selector').value;
+                const fallbackUnit = { 'Vaccine': 'PCS', 'Deworming': 'TABLET', 'Flea Perawatan': 'ML' };
+                unitInput.value = fallbackUnit[type] || 'PCS';
+            }
+        }
+
+        // Jalankan saat halaman pertama kali dimuat
+        document.addEventListener('DOMContentLoaded', adjustMedisForm);
+    </script>
+    @endpush
+</x-app-layout>

resources/views/pages/cats/pdf-card.blade.php

@@ -139,11 +139,11 @@
                         {{-- FIX: Base64 SVG yang sudah Anda buat di Controller --}}
                         <img src="data:image/svg+xml;base64,{{ $qrCode }}" width="90">
                     </div>
-                    <div class="qr-text">Scan Medical History</div>
+                    <div class="qr-text">Scan Medis History</div>
                 </div>
 
                 <div class="footer">
-                    Generated by ILY Cattery Management System<br>
+                    Generated by ILY Cattery Management Sistem<br>
                     {{ now()->format('d M Y H:i') }}
                 </div>
             </div>

resources/views/pages/cats/pedigree.blade.php

@@ -0,0 +1,51 @@
+<x-app-layout>
+    <div class="mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <div><a href="{{ route('cats.show',$cat) }}" class="mb-2 inline-flex items-center gap-2 text-sm text-slate-500 hover:text-slate-800"><i class="fas fa-arrow-left"></i>Kembali ke profil</a><h1 class="text-2xl font-bold text-slate-900">Registrasi & pedigree</h1><p class="mt-1 text-sm text-slate-500">{{ $cat->nama_kucing }} dapat memiliki registrasi dan sertifikat dari lebih dari satu asosiasi.</p></div>
+    </div>
+
+    <div class="grid gap-6 xl:grid-cols-[1fr_360px]">
+        <div class="space-y-4">
+            @forelse($cat->registrations as $registration)
+                <section class="border border-slate-200 bg-white">
+                    <div class="flex flex-wrap items-start justify-between gap-3 border-b border-slate-200 px-5 py-4">
+                        <div class="flex items-center gap-3"><div class="flex h-10 min-w-10 items-center justify-center bg-slate-100 px-2 text-sm font-bold text-slate-700">{{ $registration->association->code }}</div><div><h2 class="font-semibold text-slate-900">{{ $registration->association->name }}</h2><p class="text-xs text-slate-500">{{ $registration->is_primary ? 'Pedigree utama' : 'Registrasi tambahan' }}</p></div></div>
+                        <form action="{{ route('cats.registrations.destroy',[$cat,$registration]) }}" method="POST" onsubmit="return confirm('Hapus registrasi ini beserta dokumennya?')">@csrf @method('DELETE')<button class="text-sm font-medium text-rose-600 hover:text-rose-700">Hapus</button></form>
+                    </div>
+                    <form action="{{ route('cats.registrations.update',[$cat,$registration]) }}" method="POST" class="grid gap-4 p-5 sm:grid-cols-2 lg:grid-cols-3">@csrf @method('PUT')
+                        <div><label class="field-label">Nomor registrasi</label><input name="registration_number" value="{{ $registration->registration_number }}" class="field-input"></div>
+                        <div><label class="field-label">Nomor pedigree</label><input name="pedigree_number" value="{{ $registration->pedigree_number }}" class="field-input"></div>
+                        <div><label class="field-label">Nomor sertifikat</label><input name="certificate_number" value="{{ $registration->certificate_number }}" class="field-input"></div>
+                        <div><label class="field-label">Tanggal terbit</label><input type="date" name="issue_date" value="{{ $registration->issue_date?->format('Y-m-d') }}" class="field-input"></div>
+                        <div><label class="field-label">Gelar / title</label><input name="title" value="{{ $registration->title }}" class="field-input" placeholder="Contoh: CH, GCH"></div>
+                        <div><label class="field-label">Status kepemilikan</label><select name="ownership_status" class="field-input"><option value="">-</option>@foreach(['milik_sendiri'=>'Milik sendiri','co_own'=>'Co-own','transfer'=>'Transfer','lainnya'=>'Lainnya'] as $v=>$l)<option value="{{ $v }}" @selected($registration->ownership_status===$v)>{{ $l }}</option>@endforeach</select></div>
+                        <div class="sm:col-span-2 lg:col-span-3"><label class="field-label">Catatan</label><textarea name="notes" rows="2" class="field-input">{{ $registration->notes }}</textarea></div>
+                        <label class="flex items-center gap-2 text-sm text-slate-700"><input type="hidden" name="is_primary" value="0"><input type="checkbox" name="is_primary" value="1" @checked($registration->is_primary) class="rounded border-slate-300 text-indigo-600">Jadikan pedigree utama</label>
+                        <div class="sm:col-span-2 flex justify-end"><button class="border border-slate-300 bg-white px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50">Simpan perubahan</button></div>
+                    </form>
+                    <div class="border-t border-slate-200 p-5">
+                        <div class="mb-3 flex items-center justify-between"><h3 class="text-sm font-semibold text-slate-800">Dokumen</h3><span class="text-xs text-slate-500">PDF/JPG/PNG, maks. 10 MB</span></div>
+                        <div class="mb-4 grid gap-2">@forelse($registration->documents as $document)<div class="flex items-center justify-between gap-3 border border-slate-200 p-3"><div class="min-w-0"><a href="{{ Storage::url($document->file_path) }}" target="_blank" class="truncate text-sm font-medium text-indigo-600 hover:underline">{{ $document->label }}</a><p class="text-xs text-slate-500">{{ ucfirst($document->document_type) }}{{ $document->issued_at ? ' · '.$document->issued_at->format('d-m-Y') : '' }}</p></div><form action="{{ route('cats.registrations.documents.destroy',[$cat,$registration,$document]) }}" method="POST">@csrf @method('DELETE')<button class="text-xs font-medium text-rose-600">Hapus</button></form></div>@empty<p class="text-sm text-slate-500">Belum ada dokumen pada registrasi ini.</p>@endforelse</div>
+                        <form action="{{ route('cats.registrations.documents.store',[$cat,$registration]) }}" method="POST" enctype="multipart/form-data" class="grid gap-3 md:grid-cols-[1fr_180px_180px_auto]">@csrf<input type="file" name="document" required class="field-input py-2"><select name="document_type" class="field-input"><option value="pedigree">Pedigree</option><option value="registration">Registrasi</option><option value="ownership">Kepemilikan</option><option value="title">Gelar</option><option value="other">Lainnya</option></select><input name="label" class="field-input" placeholder="Nama dokumen"><button class="bg-slate-800 px-4 py-2 text-sm font-semibold text-white hover:bg-slate-900">Tambah dokumen</button></form>
+                    </div>
+                </section>
+            @empty
+                <div class="border border-dashed border-slate-300 bg-white p-10 text-center"><i class="fas fa-file-lines mb-3 text-3xl text-slate-300"></i><p class="font-medium text-slate-700">Belum ada registrasi pedigree</p><p class="mt-1 text-sm text-slate-500">Tambahkan asosiasi dari formulir di sebelah kanan.</p></div>
+            @endforelse
+        </div>
+
+        <aside class="h-fit border border-slate-200 bg-white p-5" x-data="{custom:false}">
+            <h2 class="font-semibold text-slate-900">Tambah registrasi</h2><p class="mt-1 text-sm text-slate-500">Satu asosiasi dapat ditambahkan satu kali untuk setiap kucing.</p>
+            <form action="{{ route('cats.registrations.store',$cat) }}" method="POST" enctype="multipart/form-data" class="mt-5 space-y-4">@csrf
+                <div><label class="field-label">Asosiasi</label><select name="association_id" required class="field-input" @change="custom=$event.target.value==='custom'"><option value="">Pilih asosiasi</option>@foreach($associations as $association)<option value="{{ $association->id }}">{{ $association->code }} - {{ $association->name }}</option>@endforeach<option value="custom">Asosiasi lain…</option></select></div>
+                <template x-if="custom"><div class="space-y-3"><div><label class="field-label">Kode asosiasi</label><input name="association_code" class="field-input" placeholder="Contoh: TICA"></div><div><label class="field-label">Nama asosiasi</label><input name="association_name" class="field-input"></div></div></template>
+                <div><label class="field-label">Nomor registrasi</label><input name="registration_number" class="field-input"></div>
+                <div><label class="field-label">Nomor pedigree</label><input name="pedigree_number" class="field-input"></div>
+                <div><label class="field-label">Nomor sertifikat</label><input name="certificate_number" class="field-input"></div>
+                <div class="grid grid-cols-2 gap-3"><div><label class="field-label">Tanggal terbit</label><input type="date" name="issue_date" class="field-input"></div><div><label class="field-label">Gelar</label><input name="title" class="field-input"></div></div>
+                <div><label class="field-label">File sertifikat</label><input type="file" name="certificate_file" accept=".pdf,.jpg,.jpeg,.png" class="field-input py-2"></div>
+                <label class="flex items-center gap-2 text-sm text-slate-700"><input type="hidden" name="is_primary" value="0"><input type="checkbox" name="is_primary" value="1" class="rounded border-slate-300 text-indigo-600">Jadikan pedigree utama</label>
+                <button class="w-full bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white hover:bg-indigo-700">Simpan registrasi</button>
+            </form>
+        </aside>
+    </div>
+</x-app-layout>

resources/views/pages/cats/show.blade.php

@@ -2,34 +2,110 @@
     @push('styles')
     <style>
         canvas { max-width: 100% !important; }
-        .custom-scrollbar::-webkit-scrollbar { width: 4px; }
+        .custom-scrollbar::-webkit-scrollbar { width: 5px; }
         .custom-scrollbar::-webkit-scrollbar-track { background: #f1f5f9; }
         .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
+        
+        .animate-modal-enter { animation: modalFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
+        @keyframes modalFadeIn {
+            from { opacity: 0; transform: scale(0.95) translateY(20px); }
+            to { opacity: 1; transform: scale(1) translateY(0); }
+        }
     </style>
     @endpush
 
+    @php
+        // Mengambil daftar penyakit yang MASIH AKTIF untuk dropdown
+        $activePerawatans = $cat->treatments->where('status_perawatan', 1);
+    @endphp
+
     <div class="max-w-[1600px] mx-auto space-y-8 pb-12">
         {{-- 1. Header Section --}}
-        <div class="flex flex-col md:flex-row md:items-center justify-between gap-6">
+        <div class="flex flex-col md:flex-row md:items-center justify-between gap-6 px-2">
             <div class="flex items-center gap-4">
                 <a href="{{ route('cats.index') }}" class="p-3 bg-white border border-slate-200 rounded-2xl text-slate-400 hover:text-indigo-600 transition-all shadow-sm active:scale-90">
                     <i class="fas fa-arrow-left"></i>
                 </a>
                 <div>
                     <div class="flex items-center gap-3">
-                        <h2 class="text-3xl font-black text-slate-800 tracking-tight leading-none">{{ $cat->nama_kucing }}</h2>
+                        <h2 class="text-3xl font-black text-slate-800 tracking-tight leading-none uppercase">{{ $cat->nama_kucing }}</h2>
                         {!! $cat->gender_icon !!}
                     </div>
-                    <p class="text-sm text-slate-500 font-medium italic uppercase tracking-widest mt-1">Medical Record #FE-{{ str_pad($cat->id, 5, '0', STR_PAD_LEFT) }}</p>
+                    <p class="text-sm text-slate-500 font-medium italic uppercase tracking-widest mt-1">Medis Record #FE-{{ str_pad($cat->id, 5, '0', STR_PAD_LEFT) }}</p>
                 </div>
             </div>
             
-            <div class="flex items-center gap-3">
-                <a href="{{ route('cats.pdf', $cat->id) }}" target="_blank" class="inline-flex items-center px-6 py-3.5 bg-rose-600 text-white text-[10px] font-black rounded-2xl hover:bg-rose-700 transition-all shadow-lg shadow-rose-100 active:scale-95">
-                    <i class="fas fa-file-pdf mr-2 text-sm"></i> CETAK MEDICAL PASS
+            <div class="flex flex-wrap items-center gap-3">
+                <a href="{{ route('medical-records.bulk.create') }}" class="inline-flex items-center px-6 py-3.5 bg-indigo-50 text-indigo-600 border border-indigo-100 text-[10px] font-black rounded-2xl hover:bg-indigo-600 hover:text-white transition-all shadow-sm active:scale-95">
+                    <i class="fas fa-layer-group mr-2 text-sm"></i> BULK TREATMENT
+                </a>
+                <a href="{{ route('cats.medical-report', $cat->id) }}" class="inline-flex items-center px-6 py-3.5 bg-rose-600 text-white text-[10px] font-black rounded-2xl hover:bg-rose-700 transition-all shadow-lg shadow-rose-100 active:scale-95">
+                    <i class="fas fa-file-medical mr-2 text-sm"></i> UNDUH HEALTH LEDGER
                 </a>
 
-                {{-- PROTEKSI TOMBOL UPDATE: Hanya muncul jika memiliki izin Update ATAU Delete --}}
+                {{-- ========================================== --}}
+                {{-- TOMBOL & MODAL HANYA MUNCUL JIKA ADA PENYAKIT AKTIF --}}
+                {{-- ========================================== --}}
+                @if($activePerawatans->count() > 0)
+                <div x-data="{ openModal: false }" class="inline-block">
+                    <button @click="openModal = true" type="button" 
+                            class="inline-flex items-center px-6 py-3.5 bg-emerald-600 text-white text-[10px] font-black rounded-2xl hover:bg-emerald-700 transition-all shadow-lg shadow-emerald-100 active:scale-95 animate-pulse">
+                        <i class="fas fa-notes-medical mr-2 text-sm"></i> RESOLVE CLINICAL CASE
+                    </button>
+
+                    {{-- Modal Backdrop --}}
+                    <div x-show="openModal" 
+                         x-transition:enter="transition ease-out duration-300"
+                         x-transition:enter-start="opacity-0"
+                         x-transition:enter-end="opacity-100"
+                         x-transition:leave="transition ease-in duration-200"
+                         x-transition:leave-start="opacity-100"
+                         x-transition:leave-end="opacity-0"
+                         class="fixed inset-0 z-50 overflow-y-auto bg-slate-900/60 backdrop-blur-sm flex items-center justify-center p-4" 
+                         x-cloak>
+                        
+                        {{-- Modal Content --}}
+                        <div @click.away="openModal = false" class="bg-white rounded-[2.5rem] border border-slate-100 shadow-2xl max-w-md w-full p-8 transform transition-all space-y-6">
+                            <div class="flex justify-between items-start">
+                                <div>
+                                    <h3 class="text-lg font-black text-slate-800 uppercase tracking-tight">Resolusi Penyakit</h3>
+                                    <p class="text-[10px] text-slate-400 font-bold uppercase tracking-wider mt-1">Pilih kasus yang sudah sembuh</p>
+                                </div>
+                                <button @click="openModal = false" type="button" class="text-slate-400 hover:text-rose-600 transition-colors">
+                                    <i class="fas fa-times-circle text-xl"></i>
+                                </button>
+                            </div>
+
+                            <form action="{{ route('cats.complete-treatment', $cat->id) }}" method="POST" class="space-y-4">
+                                @csrf
+                                @method('PATCH')
+                                
+                                <div class="space-y-2">
+                                    <label class="block text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Pilih Keluhan / Penyakit</label>
+                                    <select name="treatment_id" required class="w-full bg-slate-50 border-none rounded-2xl text-xs font-bold p-4 text-slate-700 focus:ring-4 focus:ring-indigo-500/20 outline-none">
+                                        <option value="" disabled selected>-- Pilih Penyakit yang Sembuh --</option>
+                                        @foreach($activePerawatans as $tr)
+                                            <option value="{{ $tr->id }}">{{ $tr->keluhan }} (Tanggal: {{ $tr->tanggal->format('d/m/Y') }})</option>
+                                        @endforeach
+                                    </select>
+                                </div>
+
+                                <div class="space-y-2">
+                                    <label class="block text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Kondisi Pasca Sakit / Remark</label>
+                                    <textarea name="remark_pasca_sakit" rows="4" required placeholder="Catat perkembangan... (Contoh: Jamur sembuh total)" class="w-full bg-slate-50 border-none rounded-2xl text-xs font-bold p-4 text-slate-700 focus:ring-4 focus:ring-indigo-500/20 outline-none"></textarea>
+                                </div>
+
+                                <div class="grid grid-cols-2 gap-3 pt-2">
+                                    <button @click="openModal = false" type="button" class="w-full bg-slate-100 text-slate-500 py-3.5 rounded-xl text-[10px] font-black uppercase tracking-widest hover:bg-slate-200 transition-all">Batal</button>
+                                    <button type="submit" class="w-full bg-emerald-600 text-white py-3.5 rounded-xl text-[10px] font-black uppercase tracking-widest hover:bg-emerald-700 shadow-lg shadow-emerald-100 transition-all">Simpan Resolusi</button>
+                                </div>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+                @endif
+                {{-- ========================================== --}}
+
                 @if(Gate::allows('check-access', ['cats', 'update']) || Gate::allows('check-access', ['cats', 'delete']))
                 <a href="{{ route('cats.edit', $cat->id) }}" class="inline-flex items-center px-6 py-3.5 bg-white border border-slate-200 text-slate-600 text-[10px] font-black rounded-2xl hover:bg-slate-50 transition-all shadow-sm active:scale-95">
                     <i class="fas fa-edit mr-2 text-indigo-500 text-sm"></i> UPDATE DATA
@@ -38,26 +114,19 @@
             </div>
         </div>
 
-        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 px-2">
             {{-- Column 1: Profile & Core Identity --}}
             <div class="space-y-6">
                 <div class="bg-white border border-slate-200 rounded-[3rem] p-8 shadow-sm text-center relative overflow-hidden group">
-                    <div class="absolute top-0 left-0 p-6">
-                        {!! $cat->status_badge !!}
-                    </div>
-                    
+                    <div class="absolute top-0 left-0 p-6 z-10">{!! $cat->status_badge !!}</div>
                     <div class="w-48 h-48 mx-auto rounded-[3rem] bg-slate-50 overflow-hidden ring-8 ring-slate-50 shadow-xl mb-6 transition-transform group-hover:scale-105 duration-500">
                         <img src="{{ $cat->foto_url }}" class="w-full h-full object-cover">
                     </div>
-
                     <h3 class="text-2xl font-black text-slate-800 mb-6 tracking-tighter uppercase">{{ $cat->nama_kucing }}</h3>
-
                     <div class="grid grid-cols-2 gap-4 text-left border-t border-slate-100 pt-6">
                         <div class="bg-slate-50/50 p-4 rounded-2xl border border-slate-100">
                             <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest mb-2">Registry</p>
-                            <div class="flex flex-wrap gap-1">
-                                {!! $cat->registry_badges !!}
-                            </div>
+                            <div class="flex flex-wrap gap-1">{!! $cat->registry_badges !!}</div>
                         </div>
                         <div class="bg-slate-50/50 p-4 rounded-2xl border border-slate-100 text-center">
                             <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest mb-1">Umur Saat Ini</p>
@@ -77,25 +146,22 @@
                             <span class="text-xs font-bold text-slate-400 uppercase">Pedigree No.</span>
                             <span class="text-xs font-black text-slate-700">{{ $cat->pedigree ?? '-' }}</span>
                         </div>
-                        <div class="flex justify-between items-center">
-                            <span class="text-xs font-bold text-slate-400 uppercase">Lokasi Kandang</span>
-                            <span class="px-2 py-0.5 bg-indigo-50 text-indigo-600 rounded text-[10px] font-black uppercase tracking-widest">{{ $cat->lokasi_kandang ?? 'Global' }}</span>
+                        <div class="flex justify-between items-center pt-3 border-t border-slate-50 mt-1">
+                            <span class="text-xs font-bold text-slate-400 uppercase">Sertifikat Ped</span>
+                            <div class="flex items-center gap-2">
+                                @if($cat->sertifikat_ped_file)
+                                    <span class="text-[9px] font-black text-emerald-600 bg-emerald-50 px-2 py-1 rounded-md uppercase"><i class="fas fa-check-circle mr-1"></i> Tersedia</span>
+                                @else
+                                    <span class="text-[9px] font-black text-rose-500 bg-rose-50 px-2 py-1 rounded-md uppercase"><i class="fas fa-times-circle mr-1"></i> Kosong</span>
+                                @endif
+                                <a href="{{ route('cats.pedigree', $cat->id) }}" class="flex items-center justify-center px-4 py-2.5 bg-indigo-50 text-indigo-600 rounded-xl hover:bg-indigo-600 hover:text-white transition-all font-black text-[10px] uppercase tracking-widest shadow-sm">
+                                    <i class="fas fa-folder-open mr-2"></i> Buka
+                                </a>
+                            </div>
                         </div>
                         <div class="flex justify-between items-center">
                             <span class="text-xs font-bold text-slate-400 uppercase">PIC Bertugas</span>
-                            <span class="text-xs font-black text-slate-700">{{ $cat->pic?->name ?? 'System' }}</span>
-                        </div>
-                    </div>
-
-                    @php $isOverdue = $cat->updated_at->diffInDays(now()) >= 3; @endphp
-                    <div class="mt-6 p-5 {{ $isOverdue ? 'bg-rose-50 border-rose-100' : 'bg-emerald-50 border-emerald-100' }} border rounded-3xl">
-                        <div class="flex justify-between items-center mb-1">
-                            <span class="text-[9px] font-black uppercase {{ $isOverdue ? 'text-rose-600' : 'text-emerald-600' }}">Monitoring Berat</span>
-                            <span class="text-[9px] font-bold text-slate-400 uppercase italic">{{ $cat->updated_at->diffForHumans() }}</span>
-                        </div>
-                        <div class="flex items-baseline gap-1">
-                            <span class="text-2xl font-black text-slate-800">{{ number_format($cat->berat_badan, 2) }}</span>
-                            <span class="text-xs font-black text-slate-400 uppercase">Kg</span>
+                            <span class="text-xs font-black text-slate-700">{{ $cat->pic?->name ?? 'Sistem' }}</span>
                         </div>
                     </div>
                 </div>
@@ -104,33 +170,29 @@
             {{-- Column 2: Lineage & Health Routine --}}
             <div class="space-y-8">
                 <div class="bg-white border border-slate-200 rounded-[3rem] p-8 shadow-sm">
-                    <h4 class="text-xs font-black text-slate-800 uppercase tracking-widest border-b border-slate-100 pb-4 mb-6">Parental Intelligence</h4>
+                    <h4 class="text-xs font-black text-slate-800 uppercase tracking-widest border-b border-slate-100 pb-4 mb-6">Data Induk</h4>
                     <div class="space-y-4">
-                        {{-- SIRE --}}
-                        <div class="p-4 bg-indigo-50/30 border border-indigo-100 rounded-3xl flex items-center gap-4 hover:bg-indigo-50 transition-colors cursor-default">
-                            <div class="w-12 h-12 bg-white border border-indigo-100 text-indigo-600 rounded-2xl flex items-center justify-center shadow-sm">
-                                <i class="fas fa-mars text-lg"></i>
-                            </div>
+                        <div @if($cat->sire_id) onclick="window.location.href='{{ route('cats.show', $cat->sire_id) }}'" @endif 
+                             class="p-4 bg-indigo-50/30 border border-indigo-100 rounded-3xl flex items-center gap-4 hover:bg-indigo-50 transition-colors {{ $cat->sire_id ? 'cursor-pointer' : 'cursor-default' }}">
+                            <div class="w-12 h-12 bg-white border border-indigo-100 text-indigo-600 rounded-2xl flex items-center justify-center shadow-sm"><i class="fas fa-mars text-lg"></i></div>
                             <div class="flex-1">
                                 <p class="text-[9px] font-black text-indigo-400 uppercase tracking-widest">Sire (Pejantan)</p>
-                                <p class="text-sm font-black text-slate-700 uppercase leading-none mt-1">{{ $cat->sire->nama_kucing }}</p>
+                                <p class="text-sm font-black text-slate-700 uppercase leading-none mt-1">{{ $cat->sire->nama_kucing ?? 'Unknown' }}</p>
                             </div>
                         </div>
-                        {{-- DAM --}}
-                        <div class="p-4 bg-rose-50/30 border border-rose-100 rounded-3xl flex items-center gap-4 hover:bg-rose-50 transition-colors cursor-default">
-                            <div class="w-12 h-12 bg-white border border-rose-100 text-rose-600 rounded-2xl flex items-center justify-center shadow-sm">
-                                <i class="fas fa-venus text-lg"></i>
-                            </div>
+                        <div @if($cat->dam_id) onclick="window.location.href='{{ route('cats.show', $cat->dam_id) }}'" @endif 
+                             class="p-4 bg-rose-50/30 border border-rose-100 rounded-3xl flex items-center gap-4 hover:bg-rose-50 transition-colors {{ $cat->dam_id ? 'cursor-pointer' : 'cursor-default' }}">
+                            <div class="w-12 h-12 bg-white border border-rose-100 text-rose-600 rounded-2xl flex items-center justify-center shadow-sm"><i class="fas fa-venus text-lg"></i></div>
                             <div class="flex-1">
                                 <p class="text-[9px] font-black text-rose-400 uppercase tracking-widest">Dam (Betina)</p>
-                                <p class="text-sm font-black text-slate-700 uppercase leading-none mt-1">{{ $cat->dam->nama_kucing }}</p>
+                                <p class="text-sm font-black text-slate-700 uppercase leading-none mt-1">{{ $cat->dam->nama_kucing ?? 'Unknown' }}</p>
                             </div>
                         </div>
                     </div>
                 </div>
 
                 <div class="bg-slate-900 rounded-[3rem] p-8 text-white shadow-2xl relative overflow-hidden">
-                    <h4 class="text-xs font-black uppercase tracking-widest border-b border-white/10 pb-4 mb-6 italic">Routine Medical Calendar</h4>
+                    <h4 class="text-xs font-black uppercase tracking-widest border-b border-white/10 pb-4 mb-6 italic">Current Health Reminders</h4>
                     <div class="grid grid-cols-1 gap-4 relative z-10">
                         @foreach([
                             ['icon' => 'fa-syringe', 'label' => 'Vaksin', 'field' => 'jadwal_vaksin'],
@@ -161,121 +223,143 @@
                             <h4 class="font-black text-slate-800 uppercase tracking-tighter text-lg leading-none">Analisis Berat</h4>
                             <p class="text-[10px] text-slate-400 font-black uppercase mt-1">Growth Index (Kg)</p>
                         </div>
-                        <div class="w-12 h-12 bg-emerald-50 text-emerald-500 rounded-2xl flex items-center justify-center">
-                            <i class="fas fa-chart-line text-lg"></i>
-                        </div>
-                    </div>
-                    <div class="relative h-[250px]">
-                        <canvas id="weightChart"></canvas>
+                        <div class="w-12 h-12 bg-emerald-50 text-emerald-500 rounded-2xl flex items-center justify-center"><i class="fas fa-chart-line text-lg"></i></div>
                     </div>
+                    <div class="relative h-[250px]"><canvas id="weightChart"></canvas></div>
                 </div>
 
-                {{-- PROTEKSI QUICK ACTION: Hanya jika bisa Create Treatment --}}
-                @can('check-access', ['treatments', 'create'])
-                <div class="bg-indigo-600 rounded-[3rem] p-8 text-white shadow-xl shadow-indigo-100 flex flex-col justify-between h-[250px] group overflow-hidden relative">
+                @can('check-access', ['cats', 'update'])
+                <div class="bg-indigo-600 rounded-[3rem] p-8 text-white shadow-xl shadow-indigo-100 flex flex-col justify-between h-[300px] group overflow-hidden relative">
                     <div class="relative z-10">
-                        <h4 class="text-xs font-black uppercase tracking-widest mb-2 border-b border-white/20 pb-3">Quick Action</h4>
-                        <p class="text-[10px] text-indigo-100/60 leading-relaxed italic uppercase font-bold tracking-tighter">Gunakan menu ini untuk mencatat tindakan medis segera.</p>
+                        <h4 class="text-xs font-black uppercase tracking-widest mb-2 border-b border-white/20 pb-3">Tindakan medis</h4>
+                        <p class="text-[10px] text-indigo-100/60 leading-relaxed italic uppercase font-bold tracking-tighter">Log tindakan kesehatan cepat atau pengobatan klinis.</p>
+                    </div>
+                    
+                    <div class="flex flex-col gap-3 relative z-10">
+                        <a href="{{ route('medical-records.create', $cat->id) }}" class="w-full flex items-center justify-center gap-3 p-4 bg-white text-indigo-600 rounded-2xl font-black uppercase text-[10px] shadow-lg hover:bg-indigo-50 transition-all active:scale-95">
+                            <i class="fas fa-calendar-check"></i> LOG ROUTINE LEDGER
+                        </a>
+                        <a href="{{ route('treatments.create', ['cat_id' => $cat->id]) }}" class="w-full flex items-center justify-center gap-3 p-4 bg-indigo-500 text-white border border-indigo-400 rounded-2xl font-black uppercase text-[10px] shadow-lg hover:bg-indigo-400 transition-all active:scale-95">
+                            <i class="fas fa-briefcase-medical"></i> LOG CLINICAL CASE
+                        </a>
                     </div>
-                    <a href="{{ route('treatments.create', ['cat_id' => $cat->id]) }}" class="relative z-10 flex items-center justify-center gap-3 p-5 bg-white text-indigo-600 rounded-3xl font-black uppercase text-xs shadow-xl hover:scale-105 transition-all active:scale-95">
-                        <i class="fas fa-file-medical-alt text-lg"></i> Tambah Rekam Medis
-                    </a>
                     <i class="fas fa-heartbeat absolute -bottom-10 -left-10 text-[10rem] text-white/5"></i>
                 </div>
                 @endcan
             </div>
         </div>
 
-        {{-- Log Section: Medical History Timeline --}}
-        <div class="bg-white border border-slate-200 rounded-[3rem] overflow-hidden shadow-sm">
+        {{-- Comprehensive Health History --}}
+        <div class="bg-white border border-slate-200 rounded-[3.5rem] overflow-hidden shadow-sm mx-2">
+            <div class="p-10 border-b border-slate-100 bg-slate-50/50 flex flex-col md:flex-row justify-between items-center gap-4">
+                <div class="flex items-center gap-4">
+                    <div class="w-12 h-12 bg-indigo-600 text-white rounded-2xl flex items-center justify-center shadow-lg shadow-indigo-100">
+                        <i class="fas fa-book-medical text-xl"></i>
+                    </div>
+                    <div>
+                        <h4 class="font-black text-slate-800 uppercase tracking-tighter text-xl leading-none">Comprehensive Health History</h4>
+                        <p class="text-[10px] text-slate-400 font-bold uppercase tracking-[0.2em] mt-2">Jejak medis dari pertama hingga rencana mendatang</p>
+                    </div>
+                </div>
+                <span class="text-[10px] font-black text-indigo-600 bg-white border border-indigo-100 px-6 py-2.5 rounded-full shadow-sm">
+                    {{ $cat->medicalRecords->count() }} TOTAL RECORDS
+                </span>
+            </div>
+            
+            <div class="p-10 max-h-[800px] overflow-y-auto custom-scrollbar bg-white">
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                    @forelse($cat->medicalRecords->sortByDesc('date_given') as $record)
+                    <div class="p-8 rounded-[2.5rem] border border-slate-100 bg-slate-50/30 hover:bg-white hover:border-indigo-100 hover:shadow-xl transition-all duration-500 group/item relative overflow-hidden">
+                        <i class="fas {{ $record->type === 'Vaccine' ? 'fa-syringe' : ($record->type === 'Grooming' ? 'fa-bath' : 'fa-pills') }} absolute -bottom-4 -right-4 text-7xl text-slate-100/50 group-hover/item:text-indigo-500/10 transition-colors"></i>
+                        <div class="flex items-start justify-between mb-6 relative z-10">
+                            <div class="w-12 h-12 rounded-2xl flex items-center justify-center shadow-sm
+                                {{ $record->type === 'Vaccine' ? 'bg-blue-600 text-white' : 
+                                   ($record->type === 'Deworming' ? 'bg-emerald-500 text-white' : 
+                                   ($record->type === 'Flea Perawatan' ? 'bg-amber-500 text-white' : 'bg-pink-500 text-white')) }}">
+                                <i class="fas {{ $record->type === 'Vaccine' ? 'fa-syringe' : ($record->type === 'Grooming' ? 'fa-bath' : 'fa-pills') }} text-sm"></i>
+                            </div>
+                            <span class="text-[10px] font-black text-slate-800 uppercase tracking-widest">{{ $record->date_given->format('d M Y') }}</span>
+                        </div>
+                        <div class="relative z-10">
+                            <h5 class="text-base font-black text-slate-800 uppercase tracking-tight mb-1">{{ $record->treatment_name }}</h5>
+                            <div class="flex items-center gap-2 mb-4">
+                                <span class="text-[8px] font-black text-indigo-600 bg-indigo-50 px-2.5 py-1 rounded-lg border border-indigo-100 uppercase italic">{{ $record->type }}</span>
+                                @if($record->dosage && $record->type !== 'Grooming')
+                                <span class="text-[8px] font-black text-emerald-600 bg-emerald-50 px-2.5 py-1 rounded-lg border border-emerald-100 uppercase tracking-widest">
+                                    DOSIS: {{ $record->dosage }} {{ $record->unit }}
+                                </span>
+                                @endif
+                            </div>
+                            <p class="text-[11px] text-slate-500 font-medium italic mb-6 leading-relaxed bg-white/50 p-3 rounded-xl border border-dashed border-slate-200">
+                                "{{ $record->notes ?? 'Pemberian rutin tanpa keluhan klinis.' }}"
+                            </p>
+                        </div>
+                    </div>
+                    @empty
+                    <div class="col-span-full py-20 text-center text-slate-400 font-black uppercase text-xs">No Records Found</div>
+                    @endforelse
+                </div>
+            </div>
+        </div>
+
+        {{-- Klinis Case History --}}
+        <div class="bg-white border border-slate-200 rounded-[3rem] overflow-hidden shadow-sm mx-2">
             <div class="p-8 border-b border-slate-100 bg-slate-50/50 flex justify-between items-center">
                 <div class="flex items-center gap-3">
                     <i class="fas fa-history text-slate-400"></i>
-                    <h4 class="font-black text-slate-800 uppercase tracking-tighter text-lg">Historical Medical Log</h4>
+                    <h4 class="font-black text-slate-800 uppercase tracking-tighter text-lg">Klinis Case History (Non-Routine)</h4>
                 </div>
-                <span class="text-[10px] font-black text-indigo-600 bg-white border border-indigo-100 px-5 py-2 rounded-full shadow-sm">{{ $cat->treatments->count() }} REKAMAN</span>
             </div>
-            
-            <div class="p-10 max-h-[800px] overflow-y-auto custom-scrollbar">
+            <div class="p-10 max-h-[600px] overflow-y-auto custom-scrollbar">
                 <div class="relative space-y-12">
                     <div class="absolute left-[11px] top-2 bottom-2 w-0.5 bg-slate-100"></div>
-
                     @forelse($cat->treatments->sortByDesc('tanggal') as $treatment)
                     <div class="relative flex items-start gap-8 group">
-                        <div class="z-10 w-6 h-6 rounded-full bg-white border-4 border-indigo-500 ring-8 ring-indigo-50 shadow-md"></div>
+                        {{-- Dot Timeline dinamis sesuai status_perawatan --}}
+                        <div class="z-10 w-6 h-6 rounded-full border-4 ring-8 shadow-md 
+                            {{ $treatment->status_perawatan == 2 ? 'bg-emerald-500 border-white ring-emerald-50' : 'bg-white border-rose-500 ring-rose-50' }}">
+                        </div>
                         
                         <div class="flex-1 space-y-4">
                             <div class="flex items-center justify-between">
-                                <div class="flex items-center gap-3">
-                                    <p class="text-xs font-black text-indigo-600 uppercase tracking-widest bg-indigo-50 px-3 py-1 rounded-lg border border-indigo-100">
-                                        {{ $treatment->tanggal->format('d F Y') }}
-                                    </p>
-                                    <span class="text-[10px] text-slate-400 font-bold italic">{{ $treatment->tanggal->diffForHumans() }}</span>
-                                </div>
+                                <p class="text-xs font-black text-indigo-600 uppercase tracking-widest bg-indigo-50 px-3 py-1 rounded-lg border border-indigo-100">{{ $treatment->tanggal->format('d F Y') }}</p>
                                 
-                                {{-- PROTEKSI EDIT LOG: Hanya jika bisa Update Treatment --}}
-                                @can('check-access', ['treatments', 'update'])
-                                <a href="{{ route('treatments.edit', $treatment->id) }}" class="opacity-0 group-hover:opacity-100 p-2.5 bg-slate-50 text-slate-400 hover:text-amber-600 hover:bg-amber-50 rounded-xl transition-all" title="Edit Log">
-                                    <i class="fas fa-pen text-xs"></i>
-                                </a>
-                                @endcan
+                                {{-- LABEL STATUS PADA KARTU HISTORY --}}
+                                @if($treatment->status_perawatan == 2)
+                                    <span class="text-[9px] font-black text-emerald-600 bg-emerald-50 px-3 py-1 rounded-full uppercase tracking-widest border border-emerald-100"><i class="fas fa-check-circle mr-1"></i> SEMBUH</span>
+                                @else
+                                    <span class="text-[9px] font-black text-rose-600 bg-rose-50 px-3 py-1 rounded-full uppercase tracking-widest border border-rose-100 animate-pulse"><i class="fas fa-procedures mr-1"></i> AKTIF</span>
+                                @endif
                             </div>
-
-                            <div class="bg-white rounded-[2.5rem] p-8 border border-slate-100 shadow-sm group-hover:border-indigo-200 transition-all duration-300">
+                            
+                            <div class="bg-white rounded-[2.5rem] p-8 border {{ $treatment->status_perawatan == 2 ? 'border-emerald-100' : 'border-rose-100' }} shadow-sm transition-all duration-300">
                                 <div class="flex flex-col md:flex-row gap-10">
                                     <div class="flex-1">
                                         <h5 class="text-lg font-black text-slate-800 mb-2 uppercase tracking-tight">{{ $treatment->keluhan }}</h5>
-                                        <p class="text-sm text-slate-500 font-medium leading-relaxed italic border-l-4 border-indigo-100 pl-4 mb-6">Diagnosa: {{ $treatment->diagnosa }}</p>
+                                        <p class="text-sm text-slate-500 font-medium leading-relaxed italic border-l-4 {{ $treatment->status_perawatan == 2 ? 'border-emerald-200' : 'border-rose-200' }} pl-4 mb-6">Diagnosa: {{ $treatment->diagnosa }}</p>
                                         
-                                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-                                            <div class="flex items-center gap-4 p-4 bg-slate-50/50 rounded-2xl">
-                                                <div class="w-10 h-10 rounded-xl bg-rose-50 flex items-center justify-center text-rose-500">
-                                                    <i class="fas fa-capsules"></i>
-                                                </div>
-                                                <div>
-                                                    <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest">Therapy</p>
-                                                    <p class="text-xs font-black text-slate-800 uppercase">{{ $treatment->nama_obat }} ({{ $treatment->dosis }})</p>
-                                                </div>
-                                            </div>
-                                            <div class="flex items-center gap-4 p-4 bg-slate-50/50 rounded-2xl">
-                                                <div class="w-10 h-10 rounded-xl bg-indigo-50 flex items-center justify-center text-indigo-500">
-                                                    <i class="fas fa-user-md"></i>
-                                                </div>
-                                                <div>
-                                                    <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest">Medical Staff</p>
-                                                    <p class="text-xs font-black text-slate-800 uppercase">{{ $treatment->user?->name ?? 'System' }}</p>
-                                                </div>
-                                            </div>
+                                        <div class="flex items-center gap-4 p-4 bg-slate-50/50 rounded-2xl mb-4">
+                                            <div class="w-10 h-10 rounded-xl bg-indigo-50 flex items-center justify-center text-indigo-500"><i class="fas fa-capsules"></i></div>
+                                            <div><p class="text-[9px] font-black text-slate-400 uppercase tracking-widest">Therapy</p><p class="text-xs font-black text-slate-800 uppercase">{{ $treatment->nama_obat }} ({{ $treatment->dosis }})</p></div>
                                         </div>
-                                    </div>
 
-                                    @if($treatment->foto_bukti)
-                                    <div class="shrink-0">
-                                        <div class="w-44 h-44 rounded-[2.5rem] overflow-hidden ring-4 ring-slate-100 shadow-lg group/img relative">
-                                            <img src="{{ asset('storage/' . $treatment->foto_bukti) }}" class="w-full h-full object-cover">
-                                            <div class="absolute inset-0 bg-indigo-600/20 opacity-0 group-hover/img:opacity-100 transition-opacity flex items-center justify-center cursor-zoom-in">
-                                                <i class="fas fa-search-plus text-white text-2xl"></i>
+                                        {{-- TAMPILKAN REMARK JIKA SUDAH SEMBUH --}}
+                                        @if($treatment->status_perawatan == 2 && $treatment->remark_pasca_sakit)
+                                            <div class="bg-emerald-50/50 p-4 rounded-2xl border border-emerald-100/50 mt-4">
+                                                <p class="text-[9px] font-black text-emerald-600 uppercase tracking-widest mb-1"><i class="fas fa-clipboard-check mr-1"></i> Catatan Resolusi Sembuh</p>
+                                                <p class="text-xs font-bold text-slate-600 italic">"{{ $treatment->remark_pasca_sakit }}"</p>
                                             </div>
-                                        </div>
+                                        @endif
                                     </div>
+                                    @if($treatment->foto_bukti)
+                                    <div class="shrink-0"><div class="w-44 h-44 rounded-[2.5rem] overflow-hidden ring-4 ring-slate-100 shadow-lg"><img src="{{ asset('storage/' . $treatment->foto_bukti) }}" class="w-full h-full object-cover"></div></div>
                                     @endif
                                 </div>
-
-                                @if($treatment->keterangan)
-                                <div class="mt-8 p-5 bg-indigo-50/30 rounded-2xl border-l-4 border-indigo-200">
-                                    <p class="text-[11px] text-slate-600 font-bold italic">
-                                        <i class="fas fa-quote-left mr-3 text-indigo-200"></i> {{ $treatment->keterangan }}
-                                    </p>
-                                </div>
-                                @endif
                             </div>
                         </div>
                     </div>
                     @empty
-                    <div class="text-center py-32 bg-slate-50/30 rounded-[4rem] border-4 border-dashed border-slate-100">
-                        <i class="fas fa-notes-medical text-slate-200 text-5xl mb-4"></i>
-                        <p class="text-slate-400 font-black uppercase text-xs tracking-[0.3em]">No Historical Medical Logs Recorded</p>
-                    </div>
+                    <div class="text-center py-10 text-slate-300 uppercase font-black text-xs">No Klinis Cases</div>
                     @endforelse
                 </div>
             </div>
@@ -287,65 +371,31 @@
     <script>
         document.addEventListener('DOMContentLoaded', function() {
             const ctx = document.getElementById('weightChart');
-            
-            {{-- Data diurutkan dari yang terlama ke terbaru untuk Chart --}}
             const weightHistories = {!! json_encode($cat->weightHistories->sortBy('created_at')->values() ?? []) !!};
-            
-            if(!weightHistories || weightHistories.length === 0) {
-                ctx.parentNode.innerHTML = '<div class="h-full flex flex-col items-center justify-center text-slate-300 italic text-xs gap-3"><i class="fas fa-weight-hanging text-4xl opacity-20"></i>No growth data available yet.</div>';
-                return;
+            if(ctx && weightHistories && weightHistories.length > 0) {
+                const labels = weightHistories.map(d => new Date(d.created_at).toLocaleDateString('id-ID', { day: '2-digit', month: 'short' }));
+                const data = weightHistories.map(d => d.berat);
+                new Chart(ctx, {
+                    type: 'line',
+                    data: {
+                        labels: labels,
+                        datasets: [{
+                            label: 'Berat (Kg)',
+                            data: data,
+                            borderColor: '#10b981',
+                            backgroundColor: 'rgba(16, 185, 129, 0.1)',
+                            borderWidth: 5,
+                            tension: 0.4,
+                            fill: true,
+                            pointBackgroundColor: '#fff',
+                            pointBorderColor: '#10b981',
+                            pointBorderWidth: 3,
+                            pointRadius: 4
+                        }]
+                    },
+                    options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: false }, x: { grid: { display: false } } } }
+                });
             }
-
-            const labels = weightHistories.map(d => {
-                const date = new Date(d.created_at);
-                return date.toLocaleDateString('id-ID', { day: '2-digit', month: 'short' });
-            });
-            const data = weightHistories.map(d => d.berat);
-
-            new Chart(ctx, {
-                type: 'line',
-                data: {
-                    labels: labels,
-                    datasets: [{
-                        label: 'Weight (Kg)',
-                        data: data,
-                        borderColor: '#10b981',
-                        backgroundColor: (context) => {
-                            const chart = context.chart;
-                            const {ctx, chartArea} = chart;
-                            if (!chartArea) return null;
-                            const gradient = ctx.createLinearGradient(0, chartArea.bottom, 0, chartArea.top);
-                            gradient.addColorStop(0, 'rgba(16, 185, 129, 0)');
-                            gradient.addColorStop(1, 'rgba(16, 185, 129, 0.1)');
-                            return gradient;
-                        },
-                        borderWidth: 5,
-                        tension: 0.4,
-                        fill: true,
-                        pointBackgroundColor: '#fff',
-                        pointBorderColor: '#10b981',
-                        pointBorderWidth: 3,
-                        pointRadius: 4,
-                        pointHoverRadius: 8
-                    }]
-                },
-                options: {
-                    responsive: true,
-                    maintainAspectRatio: false,
-                    plugins: { legend: { display: false } },
-                    scales: {
-                        y: { 
-                            beginAtZero: false, 
-                            grid: { borderDash: [5, 5], color: '#f1f5f9' },
-                            ticks: { font: { size: 10, weight: 'bold' }, color: '#94a3b8' }
-                        },
-                        x: { 
-                            grid: { display: false },
-                            ticks: { font: { size: 10, weight: 'bold' }, color: '#94a3b8' }
-                        }
-                    }
-                }
-            });
         });
     </script>
     @endpush

resources/views/pages/dashboard/index.blade.php

@@ -1,141 +1,548 @@
 <x-app-layout>
-    <div class="max-w-[1600px] mx-auto p-4 sm:px-6 lg:px-8 py-8 space-y-8">
-        
-       <div class="flex gap-3">
-    {{-- Tombol Laporan: Cek modul 'reports' dengan akses 'read' --}}
-    @can('check-access', ['reports', 'read'])
-        <a href="{{ route('admin.reports.index') }}" 
-           class="px-6 py-3 bg-slate-100 text-slate-600 text-[10px] font-black uppercase rounded-2xl hover:bg-slate-200 transition-all tracking-widest">
-            Laporan Lengkap
-        </a>
-    @endcan
-
-    {{-- Tombol Tambah Kucing: Cek modul 'cats' dengan akses 'create' --}}
-    @can('check-access', ['cats', 'create'])
-        <a href="{{ route('cats.create') }}" 
-           class="px-6 py-3 bg-indigo-600 text-white text-[10px] font-black uppercase rounded-2xl shadow-xl shadow-indigo-100 hover:bg-indigo-700 transition-all tracking-widest flex items-center">
-            <i class="fas fa-plus mr-2"></i> Tambah Kucing
-        </a>
-    @endcan
-</div>
-
-        {{-- Birth Watch Alert --}}
-        @if($upcomingBirths->count() > 0)
-        <div class="bg-white rounded-[3rem] border-2 border-rose-100 shadow-xl shadow-rose-50 overflow-hidden">
-            <div class="bg-rose-600 px-8 py-4 flex justify-between items-center">
-                <div class="flex items-center gap-3">
-                    <i class="fas fa-baby-carriage text-white animate-bounce"></i>
-                    <h3 class="text-[10px] font-black text-white uppercase tracking-[0.3em]">Birth Watch: Persalinan Mendatang</h3>
-                </div>
-            </div>
-            <div class="p-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-                @foreach($upcomingBirths as $birth)
-                <div class="bg-rose-50/50 border border-rose-100 p-6 rounded-[2rem] relative group">
-                    <div class="absolute -top-3 -right-3 bg-rose-600 text-white w-10 h-10 rounded-xl flex items-center justify-center font-black text-sm shadow-lg transform rotate-12">
-                        {{ $birth->days_to_go }}d
-                    </div>
-                    <div class="text-xs font-black text-rose-700 uppercase mb-1">{{ $birth->dam->nama_kucing }}</div>
-                    <div class="text-[9px] font-bold text-rose-400 uppercase tracking-tighter mb-3">Sire: {{ $birth->sire->nama_kucing }}</div>
-                    <div class="text-[10px] font-bold text-slate-600">Estimasi: {{ $birth->edd->format('d M Y') }}</div>
-                </div>
-                @endforeach
-            </div>
+    <div class="mb-6 flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
+        <div>
+            <h1 class="text-2xl font-bold text-slate-900">Beranda</h1>
+            <p class="mt-1 text-sm text-slate-500">Ringkasan operasional cattery dan pemantauan kondisi kucing.</p>
         </div>
-        @endif
-
-        {{-- Stats Cards --}}
-        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
-            <x-stats-card title="Total Kucing" :value="$stats['total_cats']" icon="fa-cat" color="indigo" />
-            <x-stats-card title="Indukan Hamil" :value="$stats['total_mating']" icon="fa-venus" color="rose" />
-            <x-stats-card title="Sedang Sakit" :value="$stats['sick_cats']" icon="fa-stethoscope" color="amber" />
-            <x-stats-card title="Stok Kritis" :value="$totalLowStock" icon="fa-exclamation-triangle" color="rose" />
-        </div>
-
-        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
-            {{-- Left Content: Records & Stock --}}
-            <div class="lg:col-span-2 space-y-8">
-                <div class="bg-white rounded-[3rem] border border-slate-100 shadow-sm overflow-hidden">
-                    <div class="p-8 border-b border-slate-50 flex justify-between items-center">
-                        <h3 class="text-xs font-black text-slate-800 uppercase tracking-widest">Rekam Medis Terbaru</h3>
-                        <a href="{{ route('treatments.index') }}" class="text-[10px] font-black text-indigo-600 uppercase hover:underline">Lihat Semua</a>
-                    </div>
-                    <table class="w-full text-left">
-                        <tbody>
-                            @foreach($recentTreatments as $t)
-                            <tr class="hover:bg-slate-50/50">
-                                <td class="px-8 py-5 flex items-center gap-4">
-                                    <div class="w-10 h-10 rounded-xl bg-indigo-50 flex items-center justify-center text-indigo-600 font-black text-xs">
-                                        {{ substr($t->cat->nama_kucing, 0, 1) }}
-                                    </div>
-                                    <div>
-                                        <div class="text-xs font-black text-slate-800 uppercase leading-none">{{ $t->cat->nama_kucing }}</div>
-                                        <div class="text-[9px] text-slate-400 font-bold mt-1">{{ $t->created_at->diffForHumans() }}</div>
-                                    </div>
-                                </td>
-                                <td class="px-8 py-5 text-xs italic text-slate-500">"{{ $t->keluhan }}"</td>
-                                <td class="px-8 py-5 text-right font-black text-indigo-600 text-[10px] uppercase">{{ $t->nama_obat }}</td>
-                            </tr>
-                            @endforeach
-                        </tbody>
-                    </table>
-                </div>
-
-                {{-- Charts --}}
-                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
-                    <div class="bg-white rounded-[3rem] border border-slate-100 p-8">
-                        <h4 class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-6">Sebaran Ras</h4>
-                        <canvas id="breedChart" class="max-h-[200px]"></canvas>
-                    </div>
-                    <div class="bg-white rounded-[3rem] border border-slate-100 p-8">
-                        <h4 class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-6">Tren Berat Badan (kg)</h4>
-                        <canvas id="weightChart" class="max-h-[200px]"></canvas>
-                    </div>
-                </div>
-            </div>
-
-            {{-- Right Content: Reminders --}}
-            <div class="space-y-8">
-                <div class="bg-slate-900 rounded-[3rem] p-8 text-white relative overflow-hidden shadow-2xl">
-                    <h3 class="text-[10px] font-black text-indigo-400 uppercase tracking-[0.3em] mb-6">Medical Reminders</h3>
-                    <div class="space-y-6">
-                        @foreach([['Vaksin', 'vaccine', 'syringe'], ['Kutu', 'flea', 'bug'], ['Cacing', 'deworming', 'bug-slash'], ['Grooming', 'grooming', 'soap']] as $item)
-                        <div class="flex justify-between items-center">
-                            <span class="text-[10px] font-bold text-slate-300 uppercase"><i class="fas fa-{{ $item[2] }} mr-2"></i> {{ $item[0] }}</span>
-                            <span class="text-xs font-black {{ $medicalAlerts[$item[1]] > 0 ? 'text-rose-400 animate-pulse' : 'text-slate-500' }}">{{ $medicalAlerts[$item[1]] }}</span>
-                        </div>
-                        @endforeach
-                    </div>
-                </div>
-                <div class="bg-indigo-600 rounded-[3rem] p-8 text-white">
-                    <h4 class="font-black text-sm uppercase tracking-widest mb-2 italic">Breeder Tip</h4>
-                    <p class="text-[10px] text-indigo-100 leading-relaxed font-medium">Jangan lupa berikan vitamin bulu khusus untuk kucing <strong>Persian</strong> Anda setiap pagi.</p>
-                </div>
-            </div>
+        <div class="flex flex-wrap gap-2">
+            <a href="{{ route('cats.create') }}" class="bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white hover:bg-indigo-700">
+                <i class="fas fa-plus mr-2"></i>Tambah kucing
+            </a>
+            <a href="{{ route('matting.create') }}" class="border border-slate-300 bg-white px-4 py-2.5 text-sm font-semibold text-slate-700 hover:bg-slate-50">
+                Catat perkawinan
+            </a>
         </div>
     </div>
 
-    @push('scripts')
-    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-    <script>
-        // Breed Chart
-        new Chart(document.getElementById('breedChart'), {
-            type: 'doughnut',
-            data: {
-                labels: {!! json_encode($chartData->pluck('ras')) !!},
-                datasets: [{ data: {!! json_encode($chartData->pluck('total')) !!}, backgroundColor: ['#6366f1', '#f43f5e', '#fbbf24', '#10b981'], borderWidth: 0, spacing: 10 }]
-            },
-            options: { cutout: '80%', plugins: { legend: { position: 'bottom', labels: { font: { size: 10, weight: 'bold' }, usePointStyle: true } } } }
-        });
+    <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
+        @foreach([
+            ['Total kucing',$stats['total_cats'] ?? 0,'fa-cat','cats.index'],
+            ['Dalam perawatan',$stats['sick_cats'] ?? 0,'fa-heart-pulse','cats.index'],
+            ['Pembiakan aktif',$stats['total_mating'] ?? 0,'fa-venus-mars','matting.index'],
+            ['Anakan tercatat',$stats['total_kittens'] ?? 0,'fa-paw','matting.index']
+        ] as $i=>$card)
+            <a href="{{ $i===1 ? route($card[3],['filter_health'=>'treatment']) : route($card[3]) }}" class="border border-slate-200 bg-white p-5 hover:border-slate-300">
+                <div class="flex items-start justify-between">
+                    <div>
+                        <p class="text-sm text-slate-500">{{ $card[0] }}</p>
+                        <p class="mt-2 text-3xl font-bold text-slate-900">{{ $card[1] }}</p>
+                    </div>
+                    <i class="fas {{ $card[2] }} mt-1 text-slate-300"></i>
+                </div>
+            </a>
+        @endforeach
+    </div>
 
-        // Weight Chart
-        new Chart(document.getElementById('weightChart'), {
-            type: 'line',
-            data: {
-                labels: {!! json_encode($weightTrends->pluck('month')) !!},
-                datasets: [{ label: 'Berat (kg)', data: {!! json_encode($weightTrends->pluck('avg_weight')) !!}, borderColor: '#6366f1', tension: 0.4, fill: true, backgroundColor: 'rgba(99, 102, 241, 0.1)' }]
-            },
-            options: { plugins: { legend: { display: false } }, scales: { y: { beginAtZero: false, grid: { display: false } }, x: { grid: { display: false } } } }
-        });
-    </script>
+    {{-- PEMANTAUAN BERAT BADAN - REVISION 3 --}}
+    <section id="pemantauan-berat" class="mt-6 scroll-mt-6 rounded-2xl border border-slate-200 bg-white shadow-sm">
+        <div class="flex flex-col gap-5 border-b border-slate-100 px-5 py-5 lg:flex-row lg:items-end lg:justify-between">
+            <div class="flex items-start gap-3">
+                <div class="relative flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl bg-blue-50 text-blue-600">
+                    <i class="fas fa-weight-scale text-lg"></i>
+                    <span class="absolute -bottom-1 -right-1 flex h-5 w-5 items-center justify-center rounded-full border-2 border-white bg-white text-[8px] text-blue-500 shadow-sm">
+                        <i class="fas fa-paw"></i>
+                    </span>
+                </div>
+                <div>
+                    <h2 class="text-xl font-bold text-slate-900">Pemantauan Berat Badan</h2>
+                    <p class="mt-1 text-sm text-slate-500">Pantau perkembangan berat badan kucing secara ringkas dan mudah dibaca.</p>
+                </div>
+            </div>
+
+            <form method="GET" action="{{ route('dashboard') }}#pemantauan-berat" class="grid gap-3 sm:grid-cols-2 lg:min-w-[470px]">
+                <input type="hidden" name="weight_focus" value="1">
+                <input type="hidden" name="trend_category" value="{{ $weightTrendCategory ?? 'Kitten' }}">
+                <div>
+                    <label for="weight_months" class="mb-1.5 block text-xs font-semibold text-slate-500">Periode</label>
+                    <div class="relative">
+                        <i class="fas fa-calendar-days pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-xs text-slate-400"></i>
+                        <select id="weight_months" name="weight_months" class="w-full rounded-xl border-slate-200 bg-white py-2.5 pl-9 pr-8 text-sm text-slate-700 shadow-sm focus:border-blue-400 focus:ring-blue-400" onchange="this.form.submit()">
+                            @foreach([3=>'3 bulan',6=>'6 bulan',12=>'12 bulan',24=>'24 bulan'] as $months=>$label)
+                                <option value="{{ $months }}" @selected(($weightTrendMonths ?? 6) == $months)>{{ $label }}</option>
+                            @endforeach
+                        </select>
+                    </div>
+                </div>
+                <div>
+                    <label for="weight_category" class="mb-1.5 block text-xs font-semibold text-slate-500">Kategori</label>
+                    <div class="relative">
+                        <i class="fas fa-cat pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-xs text-slate-400"></i>
+                        <select id="weight_category" name="weight_category" class="w-full rounded-xl border-slate-200 bg-white py-2.5 pl-9 pr-8 text-sm text-slate-700 shadow-sm focus:border-blue-400 focus:ring-blue-400" onchange="this.form.submit()">
+                            @foreach(['Semua'=>'Semua Kategori','Kitten'=>'Kitten','Junior'=>'Junior','Dewasa'=>'Dewasa'] as $value=>$label)
+                                <option value="{{ $value }}" @selected(($weightTableCategory ?? 'Semua') === $value)>{{ $label }}</option>
+                            @endforeach
+                        </select>
+                    </div>
+                </div>
+            </form>
+        </div>
+
+        @php
+            $weightCards = [
+                [
+                    'label' => 'Total Ditimbang Bulan Ini',
+                    'value' => (int) data_get($weightKpis ?? [], 'weighed.value', 0),
+                    'suffix' => 'kucing',
+                    'change' => (float) data_get($weightKpis ?? [], 'weighed.change', 0),
+                    'hasComparison' => true,
+                    'icon' => 'fa-paw',
+                    'box' => 'bg-blue-50/70 border-blue-100',
+                    'iconBox' => 'bg-blue-100 text-blue-600',
+                ],
+                [
+                    'label' => 'Rata-rata Kitten',
+                    'value' => (float) data_get($weightKpis ?? [], 'categories.Kitten.average', 0),
+                    'suffix' => 'kg',
+                    'change' => (float) data_get($weightKpis ?? [], 'categories.Kitten.change', 0),
+                    'hasComparison' => (bool) data_get($weightKpis ?? [], 'categories.Kitten.has_comparison', false),
+                    'icon' => 'fa-cat',
+                    'box' => 'bg-indigo-50/70 border-indigo-100',
+                    'iconBox' => 'bg-indigo-100 text-indigo-600',
+                ],
+                [
+                    'label' => 'Rata-rata Junior',
+                    'value' => (float) data_get($weightKpis ?? [], 'categories.Junior.average', 0),
+                    'suffix' => 'kg',
+                    'change' => (float) data_get($weightKpis ?? [], 'categories.Junior.change', 0),
+                    'hasComparison' => (bool) data_get($weightKpis ?? [], 'categories.Junior.has_comparison', false),
+                    'icon' => 'fa-cat',
+                    'box' => 'bg-rose-50/70 border-rose-100',
+                    'iconBox' => 'bg-rose-100 text-rose-600',
+                ],
+                [
+                    'label' => 'Rata-rata Dewasa',
+                    'value' => (float) data_get($weightKpis ?? [], 'categories.Dewasa.average', 0),
+                    'suffix' => 'kg',
+                    'change' => (float) data_get($weightKpis ?? [], 'categories.Dewasa.change', 0),
+                    'hasComparison' => (bool) data_get($weightKpis ?? [], 'categories.Dewasa.has_comparison', false),
+                    'icon' => 'fa-cat',
+                    'box' => 'bg-emerald-50/70 border-emerald-100',
+                    'iconBox' => 'bg-emerald-100 text-emerald-600',
+                ],
+            ];
+        @endphp
+
+        <div class="grid gap-3 p-5 sm:grid-cols-2 xl:grid-cols-4">
+            @foreach($weightCards as $card)
+                @php
+                    $isCount = $card['suffix'] === 'kucing';
+                    $change = $card['change'];
+                    $positive = $change >= 0;
+                @endphp
+                <div class="rounded-2xl border p-4 {{ $card['box'] }}">
+                    <div class="flex items-start gap-3">
+                        <div class="relative flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl {{ $card['iconBox'] }}">
+                            <i class="fas {{ $card['icon'] }}"></i>
+                            <span class="absolute -bottom-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full border-2 border-white bg-white text-[6px] opacity-90"><i class="fas fa-paw"></i></span>
+                        </div>
+                        <div class="min-w-0 flex-1">
+                            <p class="truncate text-sm font-medium text-slate-700">{{ $card['label'] }}</p>
+                            <div class="mt-1 flex items-end gap-1.5">
+                                <p class="text-3xl font-bold tracking-tight text-slate-900">
+                                    {{ $isCount ? number_format($card['value'], 0) : number_format($card['value'], 1, ',', '.') }}
+                                </p>
+                                <span class="mb-1 text-sm font-medium text-slate-500">{{ $card['suffix'] }}</span>
+                            </div>
+                            @if($card['hasComparison'])
+                                <p class="mt-1 text-xs {{ $positive ? 'text-emerald-600' : 'text-rose-600' }}">
+                                    <i class="fas {{ $positive ? 'fa-arrow-up' : 'fa-arrow-down' }} mr-1"></i>{{ $positive ? '+' : '' }}{{ number_format($change, 1, ',', '.') }}%
+                                    <span class="text-slate-400">dari bulan lalu</span>
+                                </p>
+                            @else
+                                <p class="mt-1 text-xs text-slate-400">Belum ada pembanding bulan lalu</p>
+                            @endif
+                        </div>
+                    </div>
+                </div>
+            @endforeach
+        </div>
+
+        <div class="grid gap-4 px-5 pb-5 xl:grid-cols-2">
+            <div class="rounded-2xl border border-slate-200 bg-white p-4">
+                <div class="mb-4">
+                    <h3 class="text-base font-bold text-slate-900">Rata-rata per kategori</h3>
+                    <p class="mt-0.5 text-xs text-slate-500">Rata-rata berat terakhir setiap kucing pada masing-masing bulan.</p>
+                </div>
+                <div class="h-72 sm:h-80">
+                    <canvas id="weightCategoryAverageChart"></canvas>
+                </div>
+            </div>
+
+            <div class="rounded-2xl border border-slate-200 bg-white p-4">
+                <div class="mb-4 flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+                    <div>
+                        <h3 class="text-base font-bold text-slate-900">Tren kategori terpilih</h3>
+                        <p class="mt-0.5 text-xs text-slate-500">Maksimal 6 kucing dengan data terlengkap agar grafik tetap mudah dibaca.</p>
+                    </div>
+                    <div class="inline-flex rounded-xl bg-slate-100 p-1">
+                        @foreach(['Kitten','Junior','Dewasa'] as $category)
+                            @php
+                                $tabQuery = array_merge(request()->except('page', 'trend_category'), [
+                                    'weight_focus' => 1,
+                                    'trend_category' => $category,
+                                ]);
+                            @endphp
+                            <a href="{{ route('dashboard', $tabQuery) }}#pemantauan-berat"
+                               class="rounded-lg px-3 py-1.5 text-xs font-semibold transition {{ ($weightTrendCategory ?? 'Kitten') === $category ? 'bg-blue-600 text-white shadow-sm' : 'text-slate-600 hover:bg-white hover:text-slate-900' }}">
+                                {{ $category }}
+                            </a>
+                        @endforeach
+                    </div>
+                </div>
+                <div class="h-72 sm:h-80">
+                    @if(count($weightTrendSeries ?? []) > 0)
+                        <canvas id="weightSelectedCategoryChart"></canvas>
+                    @else
+                        <div class="flex h-full flex-col items-center justify-center rounded-xl bg-slate-50 text-center">
+                            <div class="mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-white text-slate-300 shadow-sm"><i class="fas fa-cat text-xl"></i></div>
+                            <p class="text-sm font-semibold text-slate-600">Belum ada tren {{ $weightTrendCategory ?? 'kategori ini' }}</p>
+                            <p class="mt-1 text-xs text-slate-400">Tambahkan minimal satu pencatatan berat pada periode yang dipilih.</p>
+                        </div>
+                    @endif
+                </div>
+            </div>
+        </div>
+
+        <div class="border-t border-slate-100 px-5 py-5">
+            <div class="mb-4 flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
+                <div>
+                    <h3 class="text-base font-bold text-slate-900">Berat Terakhir</h3>
+                    <p class="mt-0.5 text-xs text-slate-500">Daftar berat terbaru, perubahan dari pencatatan sebelumnya, dan tanggal timbang.</p>
+                </div>
+                <div class="flex flex-col gap-2 sm:flex-row sm:items-center">
+                    <label class="relative block">
+                        <span class="sr-only">Cari nama kucing</span>
+                        <i class="fas fa-magnifying-glass pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-xs text-slate-400"></i>
+                        <input id="weightTableSearch" type="search" placeholder="Cari nama kucing..." class="w-full rounded-xl border-slate-200 py-2.5 pl-9 pr-3 text-sm text-slate-700 sm:w-64 focus:border-blue-400 focus:ring-blue-400">
+                    </label>
+                    <div class="flex items-center gap-2 text-xs text-slate-500">
+                        <span>Tampilkan</span>
+                        <select id="weightRowsPerPage" class="rounded-xl border-slate-200 py-2 text-sm text-slate-700 focus:border-blue-400 focus:ring-blue-400">
+                            <option value="10" selected>10</option>
+                            <option value="20">20</option>
+                            <option value="50">50</option>
+                        </select>
+                        <span>data</span>
+                    </div>
+                    @can('check-access', ['cats','update'])
+                        <a href="{{ route('cats.bulk-weight') }}" class="inline-flex items-center justify-center rounded-xl bg-blue-600 px-3.5 py-2.5 text-sm font-semibold text-white hover:bg-blue-700">
+                            <i class="fas fa-weight-scale mr-2"></i>Perbarui berat
+                        </a>
+                    @endcan
+                </div>
+            </div>
+
+            <div class="overflow-hidden rounded-2xl border border-slate-200">
+                <div class="overflow-x-auto">
+                    <table class="min-w-full divide-y divide-slate-200 text-sm">
+                        <thead class="bg-slate-50/80 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">
+                            <tr>
+                                <th class="px-4 py-3">Nama Kucing</th>
+                                <th class="px-4 py-3">Kategori</th>
+                                <th class="px-4 py-3 text-right">Berat Terakhir</th>
+                                <th class="px-4 py-3 text-right">Perubahan</th>
+                                <th class="px-4 py-3">Tanggal</th>
+                            </tr>
+                        </thead>
+                        <tbody id="weightTableBody" class="divide-y divide-slate-100 bg-white">
+                            @forelse(($weightLatestTable ?? collect()) as $item)
+                                @php
+                                    $photoUrl = $item['photo'] ? 
+                                        \Illuminate\Support\Facades\Storage::url($item['photo']) : asset('images/default-cat.png');
+                                    $change = $item['change'];
+                                @endphp
+                                <tr data-weight-row data-name="{{ strtolower($item['name']) }}" class="hover:bg-slate-50/70">
+                                    <td class="px-4 py-3">
+                                        <div class="flex items-center gap-3">
+                                            <img src="{{ $photoUrl }}" alt="Foto {{ $item['name'] }}" class="h-9 w-9 rounded-full border border-slate-200 object-cover" onerror="this.src='{{ asset('images/default-cat.png') }}'">
+                                            <div class="min-w-0">
+                                                <p class="truncate font-semibold text-slate-800">{{ $item['name'] }}</p>
+                                                <p class="text-xs text-slate-400">{{ $item['gender'] ?: '-' }}</p>
+                                            </div>
+                                        </div>
+                                    </td>
+                                    <td class="px-4 py-3">
+                                        @php
+                                            $badge = match($item['category']) {
+                                                'Kitten' => 'bg-blue-50 text-blue-700 ring-blue-100',
+                                                'Junior' => 'bg-rose-50 text-rose-700 ring-rose-100',
+                                                default => 'bg-emerald-50 text-emerald-700 ring-emerald-100',
+                                            };
+                                        @endphp
+                                        <span class="inline-flex rounded-full px-2.5 py-1 text-xs font-semibold ring-1 ring-inset {{ $badge }}">{{ $item['category'] }}</span>
+                                    </td>
+                                    <td class="whitespace-nowrap px-4 py-3 text-right font-bold text-slate-800">{{ number_format($item['latest'], 2, ',', '.') }} kg</td>
+                                    <td class="whitespace-nowrap px-4 py-3 text-right">
+                                        @if($change === null)
+                                            <span class="text-xs text-slate-400">Belum ada pembanding</span>
+                                        @elseif($change > 0)
+                                            <span class="font-semibold text-emerald-600"><i class="fas fa-arrow-up mr-1 text-xs"></i>+{{ number_format($change, 2, ',', '.') }} kg</span>
+                                        @elseif($change < 0)
+                                            <span class="font-semibold text-rose-600"><i class="fas fa-arrow-down mr-1 text-xs"></i>{{ number_format($change, 2, ',', '.') }} kg</span>
+                                        @else
+                                            <span class="font-semibold text-slate-500"><i class="fas fa-minus mr-1 text-xs"></i>0,00 kg</span>
+                                        @endif
+                                    </td>
+                                    <td class="whitespace-nowrap px-4 py-3 text-slate-500">{{ \Carbon\Carbon::parse($item['date'])->translatedFormat('d M Y') }}</td>
+                                </tr>
+                            @empty
+                                <tr data-empty-row><td colspan="5" class="px-4 py-10 text-center text-sm text-slate-500">Belum ada data berat pada periode yang dipilih.</td></tr>
+                            @endforelse
+                        </tbody>
+                    </table>
+                </div>
+                <div class="flex flex-col gap-3 border-t border-slate-100 bg-slate-50/40 px-4 py-3 sm:flex-row sm:items-center sm:justify-between">
+                    <p id="weightTableInfo" class="text-xs text-slate-500"></p>
+                    <div class="flex items-center gap-2">
+                        <button id="weightPrevPage" type="button" class="rounded-lg border border-slate-200 bg-white px-3 py-1.5 text-xs font-semibold text-slate-600 hover:bg-slate-50 disabled:cursor-not-allowed disabled:opacity-40">Sebelumnya</button>
+                        <span id="weightPageLabel" class="min-w-20 text-center text-xs font-semibold text-slate-600"></span>
+                        <button id="weightNextPage" type="button" class="rounded-lg border border-slate-200 bg-white px-3 py-1.5 text-xs font-semibold text-slate-600 hover:bg-slate-50 disabled:cursor-not-allowed disabled:opacity-40">Berikutnya</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <div class="mt-6 grid gap-6 xl:grid-cols-3">
+        <section class="border border-slate-200 bg-white xl:col-span-2">
+            <div class="flex items-center justify-between border-b border-slate-200 px-5 py-4">
+                <div>
+                    <h2 class="font-semibold text-slate-900">Perkiraan kelahiran</h2>
+                    <p class="text-xs text-slate-500">Perkawinan aktif dengan perkiraan lahir sekitar 63 hari setelah kawin.</p>
+                </div>
+                <a href="{{ route('matting.index') }}" class="text-sm font-medium text-indigo-600">Lihat semua</a>
+            </div>
+            <div class="divide-y divide-slate-100">
+                @forelse($upcomingBirths as $mating)
+                    <a href="{{ route('matting.edit',$mating->id) }}" class="grid gap-3 px-5 py-4 hover:bg-slate-50 sm:grid-cols-[1fr_auto] sm:items-center">
+                        <div>
+                            <p class="font-semibold text-slate-800">{{ $mating->dam->nama_kucing ?? 'Betina' }} <span class="font-normal text-slate-400">×</span> {{ $mating->sire->nama_kucing ?? 'Jantan' }}</p>
+                            <p class="mt-1 text-sm text-slate-500">Perkiraan lahir {{ $mating->edd?->translatedFormat('d M Y') }}</p>
+                        </div>
+                        <span class="text-sm font-semibold {{ $mating->days_to_go <= 2 ? 'text-rose-600' : 'text-slate-600' }}">{{ $mating->days_to_go < 0 ? 'Lewat '.abs($mating->days_to_go).' hari' : $mating->days_to_go.' hari lagi' }}</span>
+                    </a>
+                @empty
+                    <div class="px-5 py-10 text-center text-sm text-slate-500">Belum ada perkiraan kelahiran dalam waktu dekat.</div>
+                @endforelse
+            </div>
+        </section>
+
+        <section class="border border-slate-200 bg-white">
+            <div class="border-b border-slate-200 px-5 py-4">
+                <h2 class="font-semibold text-slate-900">Jadwal yang terlambat</h2>
+                <p class="text-xs text-slate-500">Perlu ditindaklanjuti dari data kucing.</p>
+            </div>
+            <div class="grid grid-cols-2 gap-px bg-slate-200">
+                @php $labels=['vaccine'=>'Vaksin','flea'=>'Obat kutu','deworming'=>'Obat cacing','grooming'=>'Grooming']; @endphp
+                @foreach($overdueAlerts as $key=>$data)
+                    <a href="{{ $data['url'] }}" class="bg-white p-4 hover:bg-slate-50">
+                        <p class="text-xs text-slate-500">{{ $labels[$key] ?? $key }}</p>
+                        <p class="mt-1 text-2xl font-bold {{ $data['count']>0?'text-rose-600':'text-slate-800' }}">{{ $data['count'] }}</p>
+                    </a>
+                @endforeach
+            </div>
+        </section>
+    </div>
+
+    <div class="mt-6 grid gap-6 xl:grid-cols-2">
+        <section class="border border-slate-200 bg-white">
+            <div class="border-b border-slate-200 px-5 py-4"><h2 class="font-semibold text-slate-900">Stok menipis</h2></div>
+            <div class="divide-y divide-slate-100">
+                @forelse(($lowStock ?? collect())->take(8) as $item)
+                    <a href="{{ $item->url ?? '#' }}" class="flex justify-between px-5 py-3 text-sm hover:bg-slate-50">
+                        <span class="truncate pr-4">{{ $item->name }}</span>
+                        <span class="font-semibold text-rose-600">{{ (float)$item->qty }} {{ $item->unit }}</span>
+                    </a>
+                @empty
+                    <div class="p-5 text-sm text-slate-500">Tidak ada stok kritis.</div>
+                @endforelse
+            </div>
+        </section>
+
+        <section class="border border-slate-200 bg-white">
+            <div class="border-b border-slate-200 px-5 py-4"><h2 class="font-semibold text-slate-900">Mendekati kedaluwarsa</h2></div>
+            <div class="divide-y divide-slate-100">
+                @forelse($expiringItems as $item)
+                    <a href="{{ $item->url ?? '#' }}" class="flex items-center justify-between gap-4 px-5 py-3 text-sm hover:bg-slate-50">
+                        <div class="min-w-0">
+                            <p class="truncate font-medium">{{ $item->name }}</p>
+                            <p class="text-xs {{ $item->is_expired?'text-rose-600':'text-amber-600' }}">{{ $item->is_expired?'Sudah kedaluwarsa':$item->days_left.' hari lagi' }} · {{ $item->formatted_date }}</p>
+                        </div>
+                        <span class="shrink-0 text-xs text-slate-500">{{ (float)$item->qty }} {{ $item->unit }}</span>
+                    </a>
+                @empty
+                    <div class="p-5 text-sm text-slate-500">Tidak ada peringatan kedaluwarsa.</div>
+                @endforelse
+            </div>
+        </section>
+    </div>
+
+    @push('scripts')
+        <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
+        <script>
+            document.addEventListener('DOMContentLoaded', function () {
+                const formatKg = (value) => `${Number(value).toFixed(2).replace('.', ',')} kg`;
+                const formatMonth = (month) => {
+                    const d = new Date(`${month}-01T00:00:00`);
+                    return Number.isNaN(d.getTime()) ? month : d.toLocaleDateString('id-ID', { month: 'short', year: '2-digit' });
+                };
+
+                if (typeof Chart !== 'undefined') {
+                    Chart.defaults.font.family = "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif";
+                    Chart.defaults.color = '#64748b';
+
+                    const categoryColors = {
+                        Kitten: '#2563eb',
+                        Junior: '#db2777',
+                        Dewasa: '#059669'
+                    };
+                    const catPalette = ['#d97706', '#7c3aed', '#0891b2', '#2563eb', '#059669', '#be123c'];
+
+                    const avgData = @json($categoryAverageTrend ?? ['labels'=>[], 'series'=>[]]);
+                    const avgCanvas = document.getElementById('weightCategoryAverageChart');
+                    if (avgCanvas && avgData.labels && avgData.labels.length) {
+                        new Chart(avgCanvas, {
+                            type: 'line',
+                            data: {
+                                labels: avgData.labels.map(formatMonth),
+                                datasets: (avgData.series || []).map((series) => ({
+                                    label: series.name,
+                                    data: series.data,
+                                    borderColor: categoryColors[series.name] || '#64748b',
+                                    backgroundColor: categoryColors[series.name] || '#64748b',
+                                    borderWidth: 2.5,
+                                    pointRadius: 3,
+                                    pointHoverRadius: 5,
+                                    pointBorderWidth: 0,
+                                    tension: 0.28,
+                                    spanGaps: true
+                                }))
+                            },
+                            options: {
+                                responsive: true,
+                                maintainAspectRatio: false,
+                                interaction: { mode: 'index', intersect: false },
+                                plugins: {
+                                    legend: {
+                                        position: 'bottom',
+                                        labels: { usePointStyle: true, boxWidth: 8, boxHeight: 8, padding: 18, font: { size: 11, weight: '600' } }
+                                    },
+                                    tooltip: {
+                                        backgroundColor: '#0f172a',
+                                        padding: 10,
+                                        cornerRadius: 10,
+                                        callbacks: { label: (ctx) => `${ctx.dataset.label}: ${formatKg(ctx.parsed.y)}` }
+                                    }
+                                },
+                                scales: {
+                                    x: { grid: { display: false }, border: { display: false }, ticks: { maxRotation: 0, autoSkip: true, maxTicksLimit: 8 } },
+                                    y: {
+                                        beginAtZero: true,
+                                        grid: { color: '#e2e8f0' },
+                                        border: { display: false },
+                                        title: { display: true, text: 'Berat (kg)', color: '#64748b', font: { size: 11, weight: '600' } }
+                                    }
+                                }
+                            }
+                        });
+                    }
+
+                    const trendLabels = @json($weightTrendLabels ?? []);
+                    const trendSeries = @json($weightTrendSeries ?? []);
+                    const trendCanvas = document.getElementById('weightSelectedCategoryChart');
+                    if (trendCanvas && trendLabels.length && trendSeries.length) {
+                        new Chart(trendCanvas, {
+                            type: 'line',
+                            data: {
+                                labels: trendLabels.map(formatMonth),
+                                datasets: trendSeries.map((series, index) => ({
+                                    label: series.name,
+                                    data: series.data,
+                                    borderColor: catPalette[index % catPalette.length],
+                                    backgroundColor: catPalette[index % catPalette.length],
+                                    borderWidth: 2.2,
+                                    pointRadius: 3,
+                                    pointHoverRadius: 5,
+                                    pointBorderWidth: 0,
+                                    tension: 0.28,
+                                    spanGaps: true
+                                }))
+                            },
+                            options: {
+                                responsive: true,
+                                maintainAspectRatio: false,
+                                interaction: { mode: 'nearest', intersect: false },
+                                plugins: {
+                                    legend: {
+                                        position: 'bottom',
+                                        labels: { usePointStyle: true, boxWidth: 8, boxHeight: 8, padding: 15, font: { size: 10, weight: '600' } }
+                                    },
+                                    tooltip: {
+                                        backgroundColor: '#0f172a',
+                                        padding: 10,
+                                        cornerRadius: 10,
+                                        callbacks: { label: (ctx) => `${ctx.dataset.label}: ${formatKg(ctx.parsed.y)}` }
+                                    }
+                                },
+                                scales: {
+                                    x: { grid: { display: false }, border: { display: false }, ticks: { maxRotation: 0, autoSkip: true, maxTicksLimit: 8 } },
+                                    y: {
+                                        beginAtZero: true,
+                                        grid: { color: '#e2e8f0' },
+                                        border: { display: false },
+                                        title: { display: true, text: 'Berat (kg)', color: '#64748b', font: { size: 11, weight: '600' } }
+                                    }
+                                }
+                            }
+                        });
+                    }
+                }
+
+                // Pencarian + pagination tabel berat terbaru (client-side, tanpa request tambahan).
+                const searchInput = document.getElementById('weightTableSearch');
+                const rowsPerPageSelect = document.getElementById('weightRowsPerPage');
+                const tableRows = Array.from(document.querySelectorAll('[data-weight-row]'));
+                const prevButton = document.getElementById('weightPrevPage');
+                const nextButton = document.getElementById('weightNextPage');
+                const pageLabel = document.getElementById('weightPageLabel');
+                const tableInfo = document.getElementById('weightTableInfo');
+                let currentPage = 1;
+
+                const renderWeightTable = () => {
+                    if (!tableRows.length) {
+                        if (tableInfo) tableInfo.textContent = '0 data';
+                        if (pageLabel) pageLabel.textContent = '';
+                        if (prevButton) prevButton.disabled = true;
+                        if (nextButton) nextButton.disabled = true;
+                        return;
+                    }
+
+                    const search = (searchInput?.value || '').trim().toLowerCase();
+                    const pageSize = Number(rowsPerPageSelect?.value || 10);
+                    const filtered = tableRows.filter((row) => (row.dataset.name || '').includes(search));
+                    const totalPages = Math.max(1, Math.ceil(filtered.length / pageSize));
+                    currentPage = Math.min(currentPage, totalPages);
+                    const start = (currentPage - 1) * pageSize;
+                    const visible = new Set(filtered.slice(start, start + pageSize));
+
+                    tableRows.forEach((row) => row.classList.toggle('hidden', !visible.has(row)));
+
+                    if (tableInfo) {
+                        const from = filtered.length ? start + 1 : 0;
+                        const to = Math.min(start + pageSize, filtered.length);
+                        tableInfo.textContent = `Menampilkan ${from}-${to} dari ${filtered.length} data`;
+                    }
+                    if (pageLabel) pageLabel.textContent = `Hal. ${currentPage} / ${totalPages}`;
+                    if (prevButton) prevButton.disabled = currentPage <= 1;
+                    if (nextButton) nextButton.disabled = currentPage >= totalPages;
+                };
+
+                searchInput?.addEventListener('input', () => { currentPage = 1; renderWeightTable(); });
+                rowsPerPageSelect?.addEventListener('change', () => { currentPage = 1; renderWeightTable(); });
+                prevButton?.addEventListener('click', () => { if (currentPage > 1) { currentPage--; renderWeightTable(); } });
+                nextButton?.addEventListener('click', () => { currentPage++; renderWeightTable(); });
+                renderWeightTable();
+            });
+        </script>
     @endpush
-</x-app-layout>
+</x-app-layout>

resources/views/pages/dashboard/medical.blade.php

@@ -2,7 +2,7 @@
     <div class="space-y-8 pb-12">
         <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
             <div>
-                <h2 class="text-3xl font-black text-slate-800 tracking-tight leading-none mb-1">Medical Insights</h2>
+                <h2 class="text-3xl font-black text-slate-800 tracking-tight leading-none mb-1">Ringkasan Kesehatans</h2>
                 <p class="text-sm text-slate-500 font-medium italic uppercase tracking-tighter">Analisis Kesehatan & Konsumsi Obat Ily Cattery</p>
             </div>
             <div class="flex gap-2">
@@ -51,7 +51,7 @@
                     <i class="fas fa-pills text-emerald-400"></i>
                 </div>
                 <div class="space-y-6">
-                    @foreach($topMedicines as $medicine)
+                    @foreach($topObats as $medicine)
                     <div class="relative">
                         <div class="flex justify-between text-[10px] font-black uppercase mb-2">
                             <span>{{ $medicine->nama_obat }}</span>
@@ -59,7 +59,7 @@
                         </div>
                         <div class="w-full bg-slate-800 rounded-full h-1.5">
                             @php 
-                                $maxUsed = $topMedicines->first()->total_used ?? 1;
+                                $maxUsed = $topObats->first()->total_used ?? 1;
                                 $percentage = ($medicine->total_used / $maxUsed) * 100;
                             @endphp
                             <div class="bg-emerald-400 h-1.5 rounded-full" style="width: {{ $percentage }}%"></div>

resources/views/pages/inventory/categories/edit.blade.php

@@ -6,7 +6,7 @@
             </a>
             <div>
                 <h2 class="text-2xl font-black text-slate-800 tracking-tight">Edit Master Kategori</h2>
-                <p class="text-sm text-slate-500 font-medium italic uppercase tracking-tighter">Penyesuaian Kata Kunci Smart Categorization</p>
+                <p class="text-sm text-slate-500 font-medium italic uppercase tracking-tighter">Penyesuaian kata kunci kategori</p>
             </div>
         </div>
 

resources/views/pages/inventory/categories/index.blade.php

@@ -1,28 +1,35 @@
 <x-app-layout>
-    <div class="max-w-6xl mx-auto space-y-6 pb-12">
+    @php
+        // Helper untuk logika sorting dinamis
+        $currentSort = request('sort', 'name');
+        $currentDir = request('direction', 'asc');
+        $nextDir = $currentDir === 'asc' ? 'desc' : 'asc';
+
+        $getSortIcon = function($field) use ($currentSort, $currentDir) {
+            if ($currentSort !== $field) return 'fa-sort opacity-20';
+            return $currentDir === 'asc' ? 'fa-sort-up text-indigo-600' : 'fa-sort-down text-indigo-600';
+        };
+    @endphp
+
+    <div class="max-w-7xl mx-auto space-y-6 pb-12">
         
-        {{-- HEADER SECTION --}}
+        {{-- SECTION 1: Header --}}
         <div class="flex flex-col md:flex-row md:items-center justify-between gap-4 px-2">
             <div>
-                <h2 class="text-2xl font-black text-slate-800 tracking-tight leading-none mb-1">Kategori Manager</h2>
-                <p class="text-sm text-slate-500 font-medium italic">Master data Smart Categorization Ily Cattery.</p>
+                <h2 class="text-2xl font-black text-slate-800 tracking-tight leading-none mb-1 uppercase">Kategori Manager</h2>
+                <p class="text-[10px] text-slate-400 font-bold uppercase tracking-[0.2em]">Master data kategori ILY Cattery</p>
             </div>
             
             <div class="flex items-center gap-3">
-                {{-- FITUR KHUSUS ADMIN: Sinkronisasi Massal --}}
                 @if(auth()->user()->role === 'admin')
-                <div class="flex items-center gap-2">
                     <button type="button" onclick="confirmRecategorize()" class="inline-flex items-center px-5 py-2.5 bg-emerald-50 text-emerald-600 border border-emerald-100 text-[10px] font-black rounded-xl hover:bg-emerald-600 hover:text-white transition-all shadow-sm active:scale-95">
                         <i class="fas fa-sync-alt mr-2"></i> RE-CATEGORIZE ALL
                     </button>
-                    
                     <form id="form-recategorize" action="{{ route('categories.recategorize') }}" method="POST" class="hidden">
                         @csrf
                     </form>
-                </div>
                 @endif
 
-                {{-- PROTEKSI CREATE: Mengikuti matriks izin modul categories --}}
                 @can('check-access', ['categories', 'create'])
                 <button onclick="toggleCreateForm()" class="inline-flex items-center px-5 py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white text-[10px] font-black rounded-xl transition-all shadow-lg active:scale-95">
                     <i class="fas fa-plus-circle mr-2"></i> TAMBAH KATEGORI
@@ -31,21 +38,59 @@
             </div>
         </div>
 
-        {{-- FORM TAMBAH KATEGORI (Proteksi Ganda dengan @can) --}}
+        {{-- SECTION 2: Quick Stats (3 Cards) --}}
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 px-2">
+            <div class="bg-white border border-slate-200 p-6 rounded-[2rem] shadow-sm">
+                <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest">Total Master Kategori</p>
+                <h3 class="text-2xl font-black text-slate-800 mt-1">{{ $totalCategories }} <span class="text-xs text-slate-400 font-bold">LABEL</span></h3>
+            </div>
+            <div class="bg-white border border-slate-200 p-6 rounded-[2rem] shadow-sm border-l-4 border-l-indigo-500">
+                <p class="text-[9px] font-black text-indigo-600 uppercase tracking-widest">Kategori Terbaru</p>
+                <h3 class="text-sm font-black text-slate-800 mt-2 uppercase truncate">{{ $latestCategory }}</h3>
+            </div>
+            <div class="bg-indigo-50 border border-indigo-100 p-6 rounded-[2rem] shadow-sm flex items-center justify-between">
+                <div>
+                    <p class="text-[9px] font-black text-indigo-600 uppercase tracking-widest">Status Sinkronisasi</p>
+                    <h3 class="text-xs font-black text-indigo-900 mt-1 uppercase tracking-tighter">Deteksi Kategori Aktif</h3>
+                </div>
+                <i class="fas fa-microchip text-indigo-200 text-2xl"></i>
+            </div>
+        </div>
+
+        {{-- SECTION 3: Search Bar --}}
+        <div class="px-2">
+            <form action="{{ route('categories.index') }}" method="GET" class="relative max-w-md">
+                <input type="hidden" name="sort" value="{{ request('sort') }}">
+                <input type="hidden" name="direction" value="{{ request('direction') }}">
+                
+                <i class="fas fa-search absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 text-xs"></i>
+                <input type="text" name="search" value="{{ request('search') }}" 
+                       placeholder="Cari nama kategori atau kata kunci..." 
+                       class="w-full pl-12 pr-4 py-3.5 bg-white border border-slate-200 rounded-2xl text-xs font-bold focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 transition-all shadow-sm">
+            </form>
+        </div>
+
+        {{-- SECTION 4: Create Form (Toggleable) --}}
         @can('check-access', ['categories', 'create'])
-        <div id="create-form" class="hidden bg-white border border-slate-200 rounded-[2rem] p-8 shadow-sm animate-fade-in-down mx-2">
+        <div id="create-form" class="{{ $errors->any() ? '' : 'hidden' }} bg-white border border-indigo-100 rounded-[2.5rem] p-8 shadow-xl shadow-indigo-100/50 animate-fade-in-down mx-2">
+            <div class="flex items-center gap-3 mb-6 border-b border-slate-50 pb-4">
+                <i class="fas fa-plus-circle text-indigo-600"></i>
+                <h4 class="text-xs font-black text-slate-800 uppercase tracking-widest">Entry Master Data Baru</h4>
+            </div>
             <form action="{{ route('categories.store') }}" method="POST" class="grid grid-cols-1 md:grid-cols-7 gap-6">
                 @csrf
-                <div class="md:col-span-2 space-y-1">
+                <div class="md:col-span-2 space-y-2">
                     <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Nama Kategori</label>
-                    <input type="text" name="name" required placeholder="Contoh: Antibiotik" class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-sm font-bold text-slate-800 focus:ring-2 focus:ring-indigo-500 transition-all outline-none">
+                    <input type="text" name="name" value="{{ old('name') }}" required placeholder="Contoh: Antibiotik" 
+                           class="w-full px-4 py-4 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-bold text-slate-800 focus:ring-2 focus:ring-indigo-500 transition-all outline-none">
                 </div>
-                <div class="md:col-span-3 space-y-1">
-                    <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Kata Kunci (Pisah Koma)</label>
-                    <input type="text" name="keywords" required placeholder="amoxicillin, doxy, antibiotic" class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-sm font-bold text-slate-800 focus:ring-2 focus:ring-indigo-500 transition-all outline-none">
+                <div class="md:col-span-3 space-y-2">
+                    <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Kata Kunci Deteksi (Pisah Koma)</label>
+                    <input type="text" name="keywords" value="{{ old('keywords') }}" required placeholder="amoxicillin, doxy, antibiotic" 
+                           class="w-full px-4 py-4 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-bold text-slate-800 focus:ring-2 focus:ring-indigo-500 transition-all outline-none">
                 </div>
-                <div class="md:col-span-2 flex items-end">
-                    <button type="submit" class="w-full py-3.5 bg-indigo-600 text-white font-black rounded-xl text-[10px] uppercase tracking-widest shadow-lg shadow-indigo-100 transition-all active:scale-95">
+                <div class="md:col-span-2 flex items-end pb-1">
+                    <button type="submit" class="w-full py-4 bg-indigo-600 text-white font-black rounded-2xl text-[10px] uppercase tracking-[0.2em] shadow-lg shadow-indigo-100 hover:bg-indigo-700 transition-all active:scale-95">
                         SIMPAN MASTER DATA
                     </button>
                 </div>
@@ -53,57 +98,68 @@
         </div>
         @endcan
 
-        {{-- DATA TABLE SECTION --}}
+        {{-- SECTION 5: Data Table --}}
         <div class="bg-white border border-slate-200 rounded-[2.5rem] overflow-hidden shadow-sm mx-2">
             <div class="overflow-x-auto">
-                <table class="w-full text-left border-collapse table-fixed">
-                    <thead class="bg-slate-50/80 border-b border-slate-100">
+                <table class="w-full text-left border-collapse">
+                    <thead class="bg-slate-50 text-[10px] font-black text-slate-400 uppercase tracking-widest border-b border-slate-100">
                         <tr>
-                            <th class="w-56 px-6 py-5 text-[10px] font-black text-slate-400 uppercase tracking-widest">Informasi Kategori</th>
-                            <th class="w-auto px-6 py-5 text-[10px] font-black text-slate-400 uppercase tracking-widest">Kata Kunci Deteksi</th>
-                            <th class="w-32 px-6 py-5 text-[10px] font-black text-slate-400 uppercase tracking-widest text-center">Aksi</th>
+                            <th class="px-6 py-5">
+                                <a href="{{ request()->fullUrlWithQuery(['sort' => 'name', 'direction' => $nextDir]) }}" class="flex items-center gap-2 hover:text-indigo-600 transition-colors">
+                                    Informasi Kategori <i class="fas {{ $getSortIcon('name') }}"></i>
+                                </a>
+                            </th>
+                            <th class="px-6 py-5">Kata Kunci Deteksi</th>
+                            <th class="px-6 py-5 text-center">
+                                <a href="{{ request()->fullUrlWithQuery(['sort' => 'created_at', 'direction' => $nextDir]) }}" class="flex items-center justify-center gap-2 hover:text-indigo-600 transition-colors">
+                                    Dibuat Pada <i class="fas {{ $getSortIcon('created_at') }}"></i>
+                                </a>
+                            </th>
+                            <th class="px-6 py-5 text-right">Aksi</th>
                         </tr>
                     </thead>
-                    <tbody class="divide-y divide-slate-50">
+                    <tbody class="divide-y divide-slate-100">
                         @forelse($categories as $cat)
-                        <tr class="hover:bg-slate-50/30 transition-all">
-                            <td class="px-6 py-5 overflow-hidden">
+                        <tr class="hover:bg-slate-50/50 transition-all group">
+                            <td class="px-6 py-5">
                                 <div class="flex items-center gap-4">
                                     <div class="w-10 h-10 rounded-xl bg-indigo-50 flex items-center justify-center text-indigo-500 shrink-0 border border-indigo-100">
                                         <i class="fas fa-tag text-xs"></i>
                                     </div>
                                     <div class="min-w-0">
-                                        <div class="text-sm font-black text-slate-800 truncate">{{ $cat->name }}</div>
+                                        <div class="text-sm font-black text-slate-800 uppercase tracking-tight">{{ $cat->name }}</div>
+                                        <div class="text-[9px] text-slate-400 font-bold italic truncate">slug: {{ $cat->slug }}</div>
                                     </div>
                                 </div>
                             </td>
                             <td class="px-6 py-5">
-                                <div class="flex flex-wrap gap-1.5 max-w-full">
+                                <div class="flex flex-wrap gap-1.5 max-w-md">
                                     @foreach(explode(',', $cat->keywords) as $word)
-                                    <span class="px-2.5 py-1 bg-slate-50 text-slate-500 text-[9px] font-bold rounded-lg border border-slate-200/60 uppercase whitespace-nowrap">
+                                    <span class="px-2.5 py-1 bg-slate-100 text-slate-500 text-[9px] font-bold rounded-lg border border-slate-200/60 uppercase whitespace-nowrap">
                                         {{ trim($word) }}
                                     </span>
                                     @endforeach
                                 </div>
                             </td>
-                            <td class="px-6 py-5">
-                                <div class="flex justify-center gap-2">
-                                    {{-- PROTEKSI EDIT: Mengikuti matriks permission --}}
+                            <td class="px-6 py-5 text-center">
+                                <span class="text-[10px] font-bold text-slate-400">{{ $cat->created_at->format('d/m/Y') }}</span>
+                            </td>
+                            <td class="px-6 py-5 text-right">
+                                <div class="flex justify-end gap-2">
                                     @can('check-access', ['categories', 'update'])
                                     <a href="{{ route('categories.edit', $cat->id) }}" 
-                                       class="w-8 h-8 flex items-center justify-center bg-amber-50 text-amber-600 hover:bg-amber-600 hover:text-white rounded-xl transition-all shadow-sm shadow-amber-100" 
+                                       class="w-9 h-9 flex items-center justify-center bg-amber-50 text-amber-600 hover:bg-amber-600 hover:text-white rounded-xl transition-all shadow-sm" 
                                        title="Edit Kategori">
-                                        <i class="fas fa-edit text-[10px]"></i>
+                                        <i class="fas fa-edit text-xs"></i>
                                     </a>
                                     @endcan
 
-                                    {{-- PROTEKSI DELETE: Syarat manual 'admin' dihapus agar mengikuti matriks sepenuhnya --}}
                                     @can('check-access', ['categories', 'delete'])
                                     <button type="button" 
                                             onclick="confirmDelete({{ $cat->id }}, '{{ addslashes($cat->name) }}')" 
-                                            class="w-8 h-8 flex items-center justify-center bg-rose-50 text-rose-600 hover:bg-rose-600 hover:text-white rounded-xl transition-all shadow-sm shadow-rose-100" 
+                                            class="w-9 h-9 flex items-center justify-center bg-rose-50 text-rose-600 hover:bg-rose-500 hover:text-white rounded-xl transition-all shadow-sm" 
                                             title="Hapus Kategori">
-                                        <i class="fas fa-trash-alt text-[10px]"></i>
+                                        <i class="fas fa-trash-alt text-xs"></i>
                                     </button>
                                     <form id="delete-form-{{ $cat->id }}" action="{{ route('categories.destroy', $cat->id) }}" method="POST" class="hidden">
                                         @csrf @method('DELETE')
@@ -114,14 +170,24 @@
                         </tr>
                         @empty
                         <tr>
-                            <td colspan="3" class="px-8 py-20 text-center text-slate-400 italic text-xs font-bold uppercase tracking-widest">
-                                Belum ada kategori yang dikonfigurasi.
+                            <td colspan="4" class="px-8 py-24 text-center">
+                                <div class="flex flex-col items-center">
+                                    <i class="fas fa-tags text-5xl text-slate-100 mb-4"></i>
+                                    <h3 class="text-slate-400 font-black uppercase text-xs tracking-[0.4em]">Kategori Kosong</h3>
+                                    <p class="text-slate-300 text-[10px] font-bold mt-2 uppercase italic tracking-tighter font-mono">Gunakan pencarian lain atau tambahkan data baru</p>
+                                </div>
                             </td>
                         </tr>
                         @endforelse
                     </tbody>
                 </table>
             </div>
+
+            @if($categories->hasPages())
+                <div class="px-8 py-6 bg-slate-50/50 border-t border-slate-100">
+                    {{ $categories->links() }}
+                </div>
+            @endif
         </div>
     </div>
 
@@ -136,14 +202,14 @@
 
         function confirmRecategorize() {
             Swal.fire({
-                title: 'Recategorize All?',
-                text: "Sistem akan memindai seluruh obat berdasarkan kata kunci terbaru.",
+                title: 'Sinkronisasi Ulang?',
+                text: "Sistem akan memindai seluruh data persediaan berdasarkan kata kunci terbaru. Ini mungkin memakan waktu.",
                 icon: 'question',
                 showCancelButton: true,
                 confirmButtonColor: '#10b981',
                 confirmButtonText: 'Ya, Sinkronkan!',
                 cancelButtonText: 'Batal',
-                customClass: { popup: 'rounded-[1.5rem]' }
+                customClass: { popup: 'rounded-[2rem]' }
             }).then((result) => {
                 if (result.isConfirmed) {
                     const form = document.getElementById('form-recategorize');
@@ -155,13 +221,14 @@
         function confirmDelete(id, name) {
             Swal.fire({
                 title: 'Hapus Kategori?',
-                text: `Kategori "${name}" akan dihapus permanen. Data obat terkait akan kembali ke status "Umum".`,
+                text: `Kategori "${name}" akan dihapus permanen. Data produk terkait akan kembali ke kategori "Umum".`,
                 icon: 'warning',
                 showCancelButton: true,
                 confirmButtonColor: '#f43f5e',
+                cancelButtonColor: '#64748b',
                 confirmButtonText: 'Ya, Hapus!',
                 cancelButtonText: 'Batal',
-                customClass: { popup: 'rounded-[1.5rem]' }
+                customClass: { popup: 'rounded-[2rem]' }
             }).then((result) => {
                 if (result.isConfirmed) {
                     const form = document.getElementById(`delete-form-${id}`);
@@ -170,7 +237,6 @@
             });
         }
 
-        {{-- Toast Notifikasi Sukses --}}
         @if(session('success'))
             Swal.fire({
                 icon: 'success',
@@ -178,7 +244,7 @@
                 text: "{{ session('success') }}",
                 showConfirmButton: false,
                 timer: 2500,
-                customClass: { popup: 'rounded-[1.5rem]' },
+                customClass: { popup: 'rounded-[2rem]' },
                 iconColor: '#4f46e5'
             });
         @endif

resources/views/pages/inventory/foods/create.blade.php

@@ -51,7 +51,7 @@
 
                     <div class="mb-10">
                         <label class="block text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-2">TANGGAL KADALUARSA (EXPIRED)</label>
-                        <input type="date" name="expired_date" class="w-full bg-slate-50 border-none rounded-full px-8 py-4 text-slate-700 focus:ring-2 focus:ring-indigo-100 shadow-sm">
+                        <input type="date" name="expired_at" class="w-full bg-slate-50 border-none rounded-full px-8 py-4 text-slate-700 focus:ring-2 focus:ring-indigo-100 shadow-sm">
                     </div>
 
                     <div class="flex justify-end items-center gap-4 pt-6 mt-8 border-t border-slate-100">

resources/views/pages/inventory/foods/edit.blade.php

@@ -36,7 +36,7 @@
 
                     <div class="space-y-1">
                         <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Tanggal Kadaluarsa</label>
-                        <input type="date" name="expired_date" min="{{ date('Y-m-d') }}" value="{{ old('expired_date', $food->expired_date ? $food->expired_date->format('Y-m-d') : '') }}"
+                        <input type="date" name="expired_at" min="{{ date('Y-m-d') }}" value="{{ old('expired_at', $food->expired_at ? $food->expired_at->format('Y-m-d') : '') }}"
                                class="w-full px-5 py-4 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-bold text-slate-800 focus:ring-2 focus:ring-indigo-500 transition-all outline-none">
                     </div>
 

resources/views/pages/inventory/foods/index.blade.php

@@ -1,69 +1,78 @@
 <x-app-layout>
+    @php
+        $currentSort = request('sort', 'nama_makanan');
+        $currentDir = request('direction', 'asc');
+        $nextDir = $currentDir === 'asc' ? 'desc' : 'asc';
+
+        $getSortIcon = function($field) use ($currentSort, $currentDir) {
+            if ($currentSort !== $field) return 'fa-sort opacity-20';
+            return $currentDir === 'asc' ? 'fa-sort-up text-indigo-600' : 'fa-sort-down text-indigo-600';
+        };
+    @endphp
+
     <div class="max-w-7xl mx-auto space-y-6 pb-12">
-        {{-- SECTION 1: Header --}}
+        {{-- Header --}}
         <div class="flex flex-col md:flex-row md:items-center justify-between gap-4 px-2">
             <div>
-                <h2 class="text-2xl font-black text-slate-800 tracking-tight leading-none mb-1">Stok Makanan</h2>
-                <p class="text-sm text-slate-500 font-medium italic">Manajemen nutrisi Ily Cattery.</p>
+                <h2 class="text-2xl font-black text-slate-800 tracking-tight leading-none mb-1 uppercase">Stok Makanan & Nutrisi</h2>
+                <p class="text-[10px] text-slate-400 font-bold uppercase tracking-[0.2em]">Persediaan Makanan • ILY Cattery</p>
             </div>
-
-            {{-- PROTEKSI CREATE: Mengikuti matriks izin modul foods --}}
             @can('check-access', ['foods', 'create'])
-            <div class="flex items-center gap-3">
-                <a href="{{ route('inventory.foods.create') }}" class="inline-flex items-center px-5 py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white text-[10px] font-black rounded-xl transition-all shadow-lg active:scale-95">
-                    <i class="fas fa-plus-circle mr-2"></i> TAMBAH MAKANAN
-                </a>
-            </div>
+            <a href="{{ route('inventory.foods.create') }}" class="inline-flex items-center px-6 py-3 bg-indigo-600 hover:bg-indigo-700 text-white text-[10px] font-black rounded-2xl shadow-lg active:scale-95 transition-all">
+                <i class="fas fa-plus-circle mr-2"></i> TAMBAH PAKAN
+            </a>
             @endcan
         </div>
 
-        {{-- SECTION 2: Batch Import (HANYA MUNCUL UNTUK ROLE ADMIN) --}}
-        @if(auth()->user()->role === 'admin')
-        <div class="bg-indigo-50/50 border border-indigo-100 rounded-[2rem] p-6 shadow-sm mx-2">
-            <div class="flex flex-col lg:flex-row items-center justify-between gap-4">
-                <div class="flex items-center gap-3">
-                    <div class="w-10 h-10 bg-white rounded-xl flex items-center justify-center text-indigo-600 shadow-sm">
-                        <i class="fas fa-file-excel text-lg"></i>
-                    </div>
-                    <div>
-                        <h4 class="text-xs font-black text-indigo-900 uppercase tracking-widest">Batch Import Makanan</h4>
-                        <p class="text-[9px] text-indigo-400 font-bold italic">Update stok massal via file .xlsx.</p>
-                    </div>
-                </div>
-                
-                <div class="flex flex-wrap items-center gap-3">
-                    <a href="{{ route('inventory.foods.template') }}" class="px-3 py-2 bg-white border border-indigo-200 text-indigo-600 text-[9px] font-black rounded-lg hover:bg-indigo-100 transition-all shadow-sm">
-                        <i class="fas fa-download mr-1"></i> TEMPLATE EXCEL
-                    </a>
-                    
-                    <form action="{{ route('inventory.foods.batch') }}" method="POST" enctype="multipart/form-data" class="flex items-center gap-2">
-                        @csrf
-                        <div class="relative">
-                            <input type="file" name="file_excel" required class="text-[9px] w-48 file:mr-2 file:py-1 file:px-2 file:rounded-md file:border-0 file:text-[9px] file:font-black file:bg-indigo-600 file:text-white hover:file:bg-indigo-700 cursor-pointer">
-                        </div>
-                        <button type="submit" class="px-4 py-2 bg-indigo-600 text-white text-[9px] font-black rounded-lg uppercase shadow-md hover:bg-indigo-700 active:scale-95 transition-all">
-                            UPLOAD SEKARANG
-                        </button>
-                    </form>
-                </div>
+        {{-- Quick Stats (3 Cards) --}}
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 px-2">
+            <div class="bg-white border border-slate-200 p-6 rounded-[2rem] shadow-sm">
+                <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest">Total Volume Stok</p>
+                <h3 class="text-2xl font-black text-slate-800 mt-1">{{ number_format($totalStock, 1) }} <span class="text-xs text-slate-400">UNIT</span></h3>
+            </div>
+            <div class="bg-white border border-slate-200 p-6 rounded-[2rem] shadow-sm border-l-4 border-l-rose-500">
+                <p class="text-[9px] font-black text-rose-600 uppercase tracking-widest">Stok Menipis (<= 5)</p>
+                <h3 class="text-2xl font-black text-slate-800 mt-1">{{ $lowStockCount }} <span class="text-xs text-slate-400">PRODUK</span></h3>
+            </div>
+            <div class="bg-indigo-50 border border-indigo-100 p-6 rounded-[2rem] shadow-sm">
+                <p class="text-[9px] font-black text-indigo-600 uppercase tracking-widest">Varian Produk</p>
+                <h3 class="text-2xl font-black text-indigo-900 mt-1">{{ $totalItems }} <span class="text-xs text-indigo-400">JENIS</span></h3>
             </div>
         </div>
-        @endif
 
-        {{-- SECTION 3: Tabel Utama --}}
-        <div class="bg-white border border-slate-200 rounded-[2rem] overflow-hidden shadow-sm mx-2">
+        {{-- Search & Sorting --}}
+        <div class="px-2">
+            <form action="{{ route('inventory.foods.index') }}" method="GET" class="relative max-w-md">
+                <input type="hidden" name="sort" value="{{ request('sort') }}">
+                <input type="hidden" name="direction" value="{{ request('direction') }}">
+                <i class="fas fa-search absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 text-xs"></i>
+                <input type="text" name="search" value="{{ request('search') }}" placeholder="Cari merk pakan atau kategori..." class="w-full pl-12 pr-4 py-3.5 bg-white border border-slate-200 rounded-2xl text-xs font-bold focus:ring-4 focus:ring-indigo-500/10 transition-all shadow-sm">
+            </form>
+        </div>
+
+        {{-- Table --}}
+        <div class="bg-white border border-slate-200 rounded-[2.5rem] overflow-hidden shadow-sm mx-2">
             <div class="overflow-x-auto">
-                <table class="w-full text-left border-collapse table-fixed">
-                    <thead class="bg-slate-50/80 border-b border-slate-100">
+                <table class="w-full text-left">
+                    <thead class="bg-slate-50 text-[10px] font-black text-slate-400 uppercase tracking-widest border-b border-slate-100">
                         <tr>
-                            <th class="w-auto px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest">Informasi Produk</th>
-                            <th class="w-32 px-4 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest text-center">Stok</th>
-                            <th class="w-28 px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest text-center">Aksi</th>
+                            <th class="px-6 py-5">
+                                <a href="{{ request()->fullUrlWithQuery(['sort' => 'nama_makanan', 'direction' => $nextDir]) }}" class="hover:text-indigo-600 transition-colors flex items-center gap-2">
+                                    Informasi Pakan <i class="fas {{ $getSortIcon('nama_makanan') }}"></i>
+                                </a>
+                            </th>
+                            <th class="px-6 py-5 text-center">
+                                <a href="{{ request()->fullUrlWithQuery(['sort' => 'qty', 'direction' => $nextDir]) }}" class="hover:text-indigo-600 transition-colors flex items-center justify-center gap-2">
+                                    Stok Tersedia <i class="fas {{ $getSortIcon('qty') }}"></i>
+                                </a>
+                            </th>
+                            <th class="px-6 py-5 text-center">Ditambahkan Pada</th>
+                            <th class="px-6 py-5 text-right">Aksi</th>
                         </tr>
                     </thead>
-                    <tbody class="divide-y divide-slate-50">
+                    <tbody class="divide-y divide-slate-100">
                         @forelse($foods as $f)
-                        <tr class="hover:bg-slate-50/40 transition-all group">
+                        <tr class="hover:bg-slate-50/50 transition-all">
                             <td class="px-6 py-4">
                                 <div class="flex items-center gap-4">
                                     <div class="w-12 h-12 rounded-2xl bg-slate-50 border border-slate-100 overflow-hidden shrink-0 flex items-center justify-center">
@@ -73,94 +82,48 @@
                                             <i class="fas fa-bowl-food text-slate-200 text-lg"></i>
                                         @endif
                                     </div>
-                                    <div class="min-w-0">
-                                        <div class="text-sm font-black text-slate-800 truncate">{{ $f->nama_makanan }}</div>
-                                        <span class="text-[8px] font-black text-indigo-600 bg-indigo-50 px-2 py-0.5 rounded border border-indigo-100 uppercase italic">
-                                            {{ $f->kategori }}
+                                    <div>
+                                        <div class="text-sm font-black text-slate-800 uppercase tracking-tight">{{ $f->nama_makanan }}</div>
+                                        <span class="text-[8px] font-black text-indigo-600 bg-indigo-50 px-2 py-0.5 rounded border border-indigo-100 uppercase italic mt-1 inline-block">
+                                            {{ $f->kategori ?? ($f->category->name ?? 'Umum') }}
                                         </span>
                                     </div>
                                 </div>
                             </td>
-                            <td class="px-4 py-4 text-center">
-                                <span class="inline-flex px-3 py-1.5 rounded-xl text-[10px] font-black border {{ $f->qty < 5 ? 'bg-rose-50 text-rose-600 border-rose-100' : 'bg-emerald-50 text-emerald-600 border-emerald-100' }}">
-                                    {{ (float)$f->qty }} {{ $f->unit }}
-                                </span>
+                            <td class="px-6 py-4 text-center">
+                                <div class="flex flex-col items-center">
+                                    <div class="flex items-baseline gap-1 {{ $f->qty <= 5 ? 'text-rose-600' : 'text-emerald-600' }}">
+                                        <span class="text-sm font-black">{{ (float)$f->qty }}</span>
+                                        <span class="text-[9px] font-bold uppercase">{{ $f->unit ?? 'UNIT' }}</span>
+                                    </div>
+                                    @if($f->qty <= 5)
+                                        <span class="text-[7px] font-black text-rose-400 uppercase tracking-widest animate-pulse mt-1">Low!</span>
+                                    @endif
+                                </div>
                             </td>
-                            <td class="px-6 py-4">
-                                <div class="flex justify-center gap-2">
-                                    {{-- PROTEKSI EDIT: Mengikuti matriks permission --}}
+                            <td class="px-6 py-4 text-center text-[10px] font-bold text-slate-400">
+                                {{ $f->created_at->format('d/m/Y') }}
+                            </td>
+                            <td class="px-6 py-4 text-right">
+                                <div class="flex justify-end gap-2">
                                     @can('check-access', ['foods', 'update'])
-                                    <a href="{{ route('inventory.foods.edit', $f->id) }}" class="w-8 h-8 flex items-center justify-center bg-amber-50 text-amber-600 hover:bg-amber-600 hover:text-white rounded-xl transition-all shadow-sm shadow-amber-100">
-                                        <i class="fas fa-edit text-[10px]"></i>
-                                    </a>
+                                    <a href="{{ route('inventory.foods.edit', $f->id) }}" class="w-9 h-9 flex items-center justify-center bg-amber-50 text-amber-600 hover:bg-amber-600 hover:text-white rounded-xl transition-all"><i class="fas fa-edit text-xs"></i></a>
                                     @endcan
-
-                                    {{-- PROTEKSI DELETE: Syarat role admin dihapus agar mengikuti matriks permission sepenuhnya --}}
                                     @can('check-access', ['foods', 'delete'])
-                                    <button onclick="confirmDeleteFood({{ $f->id }}, '{{ addslashes($f->nama_makanan) }}')" class="w-8 h-8 flex items-center justify-center bg-rose-50 text-rose-600 hover:bg-rose-600 hover:text-white rounded-xl transition-all shadow-sm shadow-rose-100">
-                                        <i class="fas fa-trash-alt text-[10px]"></i>
-                                    </button>
-                                    <form id="delete-food-{{ $f->id }}" action="{{ route('inventory.foods.destroy', $f->id) }}" method="POST" class="hidden">
-                                        @csrf @method('DELETE')
-                                    </form>
+                                    <button onclick="confirmDelete({{ $f->id }}, '{{ addslashes($f->nama_makanan) }}')" class="w-9 h-9 flex items-center justify-center bg-rose-50 text-rose-600 hover:bg-rose-600 hover:text-white rounded-xl transition-all"><i class="fas fa-trash-alt text-xs"></i></button>
                                     @endcan
                                 </div>
                             </td>
                         </tr>
                         @empty
-                        <tr><td colspan="3" class="px-6 py-16 text-center text-slate-400 text-xs italic">Data makanan kosong.</td></tr>
+                        <tr><td colspan="4" class="px-6 py-20 text-center text-slate-300 text-xs italic font-bold uppercase tracking-widest">Pakan tidak ditemukan.</td></tr>
                         @endforelse
                     </tbody>
                 </table>
             </div>
+            @if($foods->hasPages())
+                <div class="p-6 bg-slate-50/50 border-t border-slate-100">{{ $foods->links() }}</div>
+            @endif
         </div>
     </div>
-
-    {{-- SECTION 4: Scripts --}}
-    @push('scripts')
-    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
-    <script>
-        // Dialog Konfirmasi Hapus (TETAP UTUH)
-        function confirmDeleteFood(id, name) {
-            Swal.fire({
-                title: 'Hapus Stok Makanan?',
-                text: `Yakin ingin menghapus "${name}"? Tindakan ini tidak dapat dibatalkan.`,
-                icon: 'warning',
-                showCancelButton: true,
-                confirmButtonColor: '#f43f5e',
-                confirmButtonText: 'Ya, Hapus!',
-                cancelButtonText: 'Batal',
-                customClass: {
-                    popup: 'rounded-[1.5rem]'
-                }
-            }).then((result) => {
-                if (result.isConfirmed) document.getElementById(`delete-food-${id}`).submit();
-            });
-        }
-
-        // Notifikasi Sukses
-        @if(session('success'))
-            Swal.fire({ 
-                icon: 'success', 
-                title: 'Berhasil!', 
-                text: "{{ session('success') }}", 
-                timer: 2500, 
-                showConfirmButton: false, 
-                customClass: { popup: 'rounded-[1.5rem]' },
-                iconColor: '#4f46e5'
-            });
-        @endif
-
-        // Notifikasi Error
-        @if(session('error'))
-            Swal.fire({ 
-                icon: 'error', 
-                title: 'Gagal!', 
-                text: "{{ session('error') }}", 
-                confirmButtonColor: '#4f46e5',
-                customClass: { popup: 'rounded-[1.5rem]' }
-            });
-        @endif
-    </script>
-    @endpush
 </x-app-layout>

resources/views/pages/inventory/medicines/create.blade.php

@@ -58,7 +58,7 @@
 
                     <div class="space-y-2">
                         <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Tanggal Kadaluarsa (Expired)</label>
-                        <input type="date" name="expired_date" value="{{ old('expired_date') }}" 
+                        <input type="date" name="expired_at" value="{{ old('expired_at') }}" 
                                class="w-full px-5 py-4 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-bold text-slate-800 focus:ring-2 focus:ring-indigo-500 transition-all outline-none">
                     </div>
                 </div>

resources/views/pages/inventory/medicines/edit.blade.php

@@ -36,7 +36,7 @@
 
                     <div class="space-y-1">
                         <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Tanggal Kadaluarsa</label>
-                        <input type="date" name="expired_date" value="{{ old('expired_date', $medicine->expired_date ? $medicine->expired_date->format('Y-m-d') : '') }}"
+                        <input type="date" name="expired_at" value="{{ old('expired_at', $medicine->expired_at ? $medicine->expired_at->format('Y-m-d') : '') }}"
                                class="w-full px-5 py-4 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-bold text-slate-800 focus:ring-2 focus:ring-indigo-500 transition-all outline-none">
                     </div>
 

resources/views/pages/inventory/medicines/index.blade.php

@@ -1,66 +1,103 @@
 <x-app-layout>
+    @php
+        // Helper untuk logika sorting
+        $currentSort = request('sort', 'nama_obat');
+        $currentDir = request('direction', 'asc');
+        $nextDir = $currentDir === 'asc' ? 'desc' : 'asc';
+
+        $getSortIcon = function($field) use ($currentSort, $currentDir) {
+            if ($currentSort !== $field) return 'fa-sort opacity-20';
+            return $currentDir === 'asc' ? 'fa-sort-up text-indigo-600' : 'fa-sort-down text-indigo-600';
+        };
+    @endphp
+
     <div class="space-y-6 pb-12">
-        {{-- SECTION 1: Header --}}
+        {{-- SECTION 1: Header & Quick Stats --}}
         <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
             <div>
-                <h2 class="text-2xl font-black text-slate-800 tracking-tight leading-none mb-1">Inventori Obat & Vitamin</h2>
-                <p class="text-sm text-slate-500 font-medium italic">Manajemen stok medis Ily Cattery.</p>
+                <h2 class="text-2xl font-black text-slate-800 tracking-tight leading-none mb-1 uppercase">Inventori Obat & Vitamin</h2>
+                <p class="text-[10px] text-slate-400 font-bold uppercase tracking-[0.2em]">Persediaan Obat & Vitamin • ILY Cattery</p>
             </div>
 
-            {{-- PROTEKSI CREATE: Mengikuti matriks izin modul medicines --}}
             @can('check-access', ['medicines', 'create'])
-            <a href="{{ route('inventory.medicines.create') }}" class="inline-flex items-center px-5 py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white text-[10px] font-black rounded-xl shadow-lg transition-all active:scale-95">
-                <i class="fas fa-plus-circle mr-2"></i> TAMBAH OBAT /VITAMIN
+            <a href="{{ route('inventory.medicines.create') }}" class="inline-flex items-center px-6 py-3 bg-indigo-600 hover:bg-indigo-700 text-white text-[10px] font-black rounded-2xl shadow-lg shadow-indigo-100 transition-all active:scale-95">
+                <i class="fas fa-plus-circle mr-2"></i> TAMBAH OBAT / VITAMIN
             </a>
             @endcan
         </div>
 
-        {{-- SECTION 2: Batch Import (HANYA MUNCUL UNTUK ROLE ADMIN) --}}
-        @if(auth()->user()->role === 'admin')
-        <div class="bg-indigo-50/50 border border-indigo-100 rounded-[2rem] p-6 shadow-sm">
-            <div class="flex flex-col lg:flex-row items-center justify-between gap-4">
-                <div class="flex items-center gap-3">
-                    <div class="w-10 h-10 bg-white rounded-xl flex items-center justify-center text-indigo-600 shadow-sm">
-                        <i class="fas fa-file-excel text-lg"></i>
-                    </div>
-                    <div>
-                        <h4 class="text-xs font-black text-indigo-900 uppercase">Batch Import</h4>
-                        <p class="text-[9px] text-indigo-400 font-bold italic">Update stok via .xlsx.</p>
+        {{-- SECTION 2: Global Search & Sorting Header --}}
+        <div class="grid grid-cols-1 lg:grid-cols-12 gap-4 items-center">
+            <div class="lg:col-span-4">
+                <form action="{{ route('inventory.medicines.index') }}" method="GET" class="relative">
+                    {{-- Hidden input agar saat search, sorting tidak hilang --}}
+                    <input type="hidden" name="sort" value="{{ request('sort') }}">
+                    <input type="hidden" name="direction" value="{{ request('direction') }}">
+                    
+                    <i class="fas fa-search absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 text-xs"></i>
+                    <input type="text" name="search" value="{{ request('search') }}" 
+                           placeholder="Cari nama obat, kategori, atau deskripsi..." 
+                           class="w-full pl-12 pr-4 py-3 bg-white border border-slate-200 rounded-2xl text-xs font-bold focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 transition-all shadow-sm">
+                </form>
+            </div>
+            
+            <div class="lg:col-span-8">
+                @if(auth()->user()->role === 'admin')
+                <div class="bg-indigo-50/50 border border-indigo-100 rounded-2xl p-2 px-4 shadow-sm">
+                    <div class="flex items-center justify-between gap-4">
+                        <div class="flex items-center gap-3">
+                            <i class="fas fa-file-excel text-indigo-600"></i>
+                            <span class="text-[10px] font-black text-indigo-900 uppercase">Batch Import</span>
+                        </div>
+                        <div class="flex items-center gap-2">
+                            <a href="{{ route('inventory.medicines.template') }}" class="px-3 py-1.5 bg-white border border-indigo-200 text-indigo-600 text-[9px] font-black rounded-lg hover:bg-indigo-100">TEMPLATE</a>
+                            <form action="{{ route('inventory.medicines.batch') }}" method="POST" enctype="multipart/form-data" class="flex items-center gap-2">
+                                @csrf
+                                <input type="file" name="file_excel" class="text-[9px] w-32 border-none bg-transparent">
+                                <button type="submit" class="px-3 py-1.5 bg-indigo-600 text-white text-[9px] font-black rounded-lg uppercase">Unggah</button>
+                            </form>
+                        </div>
                     </div>
                 </div>
-                <div class="flex items-center gap-3">
-                    <a href="{{ route('inventory.medicines.template') }}" class="px-3 py-2 bg-white border border-indigo-200 text-indigo-600 text-[9px] font-black rounded-lg hover:bg-indigo-100 transition-all">
-                        TEMPLATE
-                    </a>
-                    <form action="{{ route('inventory.medicines.batch') }}" method="POST" enctype="multipart/form-data" class="flex items-center gap-2">
-                        @csrf
-                        <input type="file" name="file_excel" class="text-[9px] w-40">
-                        <button type="submit" class="px-4 py-2 bg-indigo-600 text-white text-[9px] font-black rounded-lg uppercase">Upload</button>
-                    </form>
-                </div>
+                @endif
             </div>
         </div>
-        @endif
 
         {{-- SECTION 3: Tabel Utama --}}
-        <div class="bg-white border border-slate-200 rounded-[2rem] overflow-hidden shadow-sm">
+        <div class="bg-white border border-slate-200 rounded-[2.5rem] overflow-hidden shadow-sm">
             <div class="overflow-x-auto">
-                <table class="w-full text-left border-collapse table-fixed">
-                    <thead class="bg-slate-50/80 border-b border-slate-100">
+                <table class="w-full text-left border-collapse">
+                    <thead class="bg-slate-50 text-[10px] font-black text-slate-400 uppercase tracking-widest border-b border-slate-100">
                         <tr>
-                            <th class="w-auto px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest">Informasi Produk</th>
-                            <th class="w-32 px-4 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest text-center">Stok</th>
-                            <th class="w-40 px-4 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest text-center">Kadaluarsa</th>
-                            <th class="w-28 px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest text-center">Aksi</th>
+                            <th class="px-6 py-5">
+                                <a href="{{ request()->fullUrlWithQuery(['sort' => 'nama_obat', 'direction' => $nextDir]) }}" class="flex items-center gap-2 hover:text-indigo-600 transition-colors">
+                                    Informasi Produk <i class="fas {{ $getSortIcon('nama_obat') }}"></i>
+                                </a>
+                            </th>
+                            <th class="px-4 py-5 text-center">
+                                <a href="{{ request()->fullUrlWithQuery(['sort' => 'kategori', 'direction' => $nextDir]) }}" class="flex items-center justify-center gap-2 hover:text-indigo-600 transition-colors">
+                                    Kategori <i class="fas {{ $getSortIcon('kategori') }}"></i>
+                                </a>
+                            </th>
+                            <th class="px-4 py-5 text-center">
+                                <a href="{{ request()->fullUrlWithQuery(['sort' => 'stok', 'direction' => $nextDir]) }}" class="flex items-center justify-center gap-2 hover:text-indigo-600 transition-colors">
+                                    Stok Tersisa <i class="fas {{ $getSortIcon('stok') }}"></i>
+                                </a>
+                            </th>
+                            <th class="px-4 py-5 text-center">
+                                <a href="{{ request()->fullUrlWithQuery(['sort' => 'expired_at', 'direction' => $nextDir]) }}" class="flex items-center justify-center gap-2 hover:text-indigo-600 transition-colors">
+                                    Kadaluarsa <i class="fas {{ $getSortIcon('expired_at') }}"></i>
+                                </a>
+                            </th>
+                            <th class="px-6 py-5 text-right">Aksi</th>
                         </tr>
                     </thead>
-                    <tbody class="divide-y divide-slate-50">
+                    <tbody class="divide-y divide-slate-100 font-medium text-slate-700">
                         @forelse($medicines as $m)
-                        <tr class="hover:bg-slate-50/40 transition-all group">
-                            {{-- Informasi Produk --}}
-                            <td class="px-6 py-4 overflow-hidden">
+                        <tr class="hover:bg-slate-50/80 transition-all group">
+                            <td class="px-6 py-4">
                                 <div class="flex items-center gap-4">
-                                    <div class="w-12 h-12 rounded-2xl bg-slate-50 border border-slate-100 overflow-hidden shrink-0 flex items-center justify-center">
+                                    <div class="w-12 h-12 rounded-2xl bg-slate-50 border border-slate-100 overflow-hidden shrink-0 flex items-center justify-center shadow-sm">
                                         @if($m->foto_produk)
                                             <img src="{{ asset('storage/' . $m->foto_produk) }}" class="w-full h-full object-cover">
                                         @else
@@ -68,33 +105,42 @@
                                         @endif
                                     </div>
                                     <div class="min-w-0">
-                                        <div class="text-sm font-black text-slate-800 truncate">{{ $m->nama_obat }}</div>
-                                        <div class="flex items-center gap-2 mt-1">
-                                            <span class="text-[8px] font-black text-indigo-600 bg-indigo-50 px-2 py-0.5 rounded border border-indigo-100 uppercase italic">
-                                                {{ $m->kategori ?? 'Umum' }}
-                                            </span>
-                                            <span class="text-[8px] font-bold text-slate-400 uppercase">/ {{ $m->unit }}</span>
-                                        </div>
+                                        <div class="text-sm font-black text-slate-800 truncate uppercase tracking-tight">{{ $m->nama_obat }}</div>
+                                        <div class="text-[9px] font-bold text-slate-400 mt-0.5 italic">{{ Str::limit($m->keterangan, 40) }}</div>
                                     </div>
                                 </div>
                             </td>
 
-                            {{-- Stok --}}
                             <td class="px-4 py-4 text-center">
-                                <span class="inline-flex px-3 py-1.5 rounded-xl text-[10px] font-black border {{ $m->qty < 5 ? 'bg-rose-50 text-rose-600 border-rose-100' : 'bg-emerald-50 text-emerald-600 border-emerald-100' }}">
-                                    {{ (float)$m->qty }}
+                                <span class="px-2.5 py-1 bg-indigo-50 text-indigo-600 rounded-lg text-[9px] font-black uppercase border border-indigo-100 shadow-sm">
+                                    {{ $m->kategori ?? 'Umum' }}
                                 </span>
                             </td>
 
-                            {{-- Kadaluarsa --}}
                             <td class="px-4 py-4 text-center">
-                                @if($m->expired_date)
+                                <div class="flex flex-col items-center">
+                                    <div class="flex items-baseline gap-1 {{ $m->qty <= 5 ? 'text-rose-600' : 'text-emerald-600' }}">
+                                        <span class="text-sm font-black">{{ (float)$m->qty }}</span>
+                                        <span class="text-[9px] font-bold uppercase">{{ $m->unit ?? 'Unit' }}</span>
+                                    </div>
+                                    @if($m->qty <= 5)
+                                        <div class="flex items-center gap-1 mt-1 text-rose-400 animate-pulse">
+                                            <i class="fas fa-exclamation-triangle text-[7px]"></i>
+                                            <span class="text-[7px] font-black uppercase tracking-widest">Restock!</span>
+                                        </div>
+                                    @endif
+                                </div>
+                            </td>
+
+                            <td class="px-4 py-4 text-center">
+                                @if($m->expired_at)
+                                    @php $isExpired = $m->expired_at->isPast(); @endphp
                                     <div class="flex flex-col items-center">
-                                        <span class="text-[10px] font-black {{ $m->expired_date->isPast() ? 'text-rose-600' : 'text-slate-600' }}">
-                                            {{ $m->expired_date->format('d/m/y') }}
+                                        <span class="text-[10px] font-black {{ $isExpired ? 'text-rose-600' : 'text-slate-600' }}">
+                                            {{ $m->expired_at->format('d M Y') }}
                                         </span>
-                                        @if($m->expired_date->isPast())
-                                            <span class="text-[7px] font-black text-rose-400 uppercase">Expired!</span>
+                                        @if($isExpired)
+                                            <span class="text-[7px] font-black text-rose-400 uppercase tracking-tighter">Kadaluarsa!</span>
                                         @endif
                                     </div>
                                 @else
@@ -102,25 +148,22 @@
                                 @endif
                             </td>
 
-                            {{-- AKSI: Proteksi Penuh Berdasarkan Matriks Role Management --}}
-                            <td class="px-6 py-4">
-                                <div class="flex justify-center gap-2">
-                                    {{-- Edit --}}
+                            <td class="px-6 py-4 text-right">
+                                <div class="flex justify-end gap-2">
                                     @can('check-access', ['medicines', 'update'])
                                     <a href="{{ route('inventory.medicines.edit', $m->id) }}" 
-                                       class="w-8 h-8 flex items-center justify-center bg-amber-50 text-amber-600 hover:bg-amber-600 hover:text-white rounded-xl transition-all shadow-sm shadow-amber-100" 
+                                       class="w-9 h-9 flex items-center justify-center bg-amber-50 text-amber-600 hover:bg-amber-600 hover:text-white rounded-xl transition-all shadow-sm" 
                                        title="Edit Obat">
-                                        <i class="fas fa-edit text-[10px]"></i>
+                                        <i class="fas fa-edit text-xs"></i>
                                     </a>
                                     @endcan
 
-                                    {{-- Hapus: Pengecekan 'admin' dihapus agar permission matriks bekerja --}}
                                     @can('check-access', ['medicines', 'delete'])
                                     <button type="button" 
-                                            onclick="confirmDeleteMedicine({{ $m->id }}, '{{ addslashes($m->nama_obat) }}')" 
-                                            class="w-8 h-8 flex items-center justify-center bg-rose-50 text-rose-600 hover:bg-rose-600 hover:text-white rounded-xl transition-all shadow-sm shadow-rose-100" 
+                                            onclick="confirmDeleteObat({{ $m->id }}, '{{ addslashes($m->nama_obat) }}')" 
+                                            class="w-9 h-9 flex items-center justify-center bg-rose-50 text-rose-600 hover:bg-rose-500 hover:text-white rounded-xl transition-all shadow-sm" 
                                             title="Hapus Obat">
-                                        <i class="fas fa-trash-alt text-[10px]"></i>
+                                        <i class="fas fa-trash-alt text-xs"></i>
                                     </button>
                                     <form id="delete-medicine-{{ $m->id }}" action="{{ route('inventory.medicines.destroy', $m->id) }}" method="POST" class="hidden">
                                         @csrf @method('DELETE')
@@ -131,60 +174,47 @@
                         </tr>
                         @empty
                         <tr>
-                            <td colspan="4" class="px-6 py-16 text-center text-slate-400 text-xs italic font-bold">Belum ada data obat.</td>
+                            <td colspan="5" class="px-6 py-24 text-center">
+                                <div class="flex flex-col items-center">
+                                    <i class="fas fa-pills text-5xl text-slate-100 mb-4"></i>
+                                    <h3 class="text-slate-400 font-black uppercase text-xs tracking-[0.4em]">Obat Tidak Ditemukan</h3>
+                                    <p class="text-slate-300 text-[10px] font-bold mt-2 uppercase italic">Coba gunakan kata kunci pencarian lain</p>
+                                </div>
+                            </td>
                         </tr>
                         @endforelse
                     </tbody>
                 </table>
             </div>
+            
+            @if($medicines->hasPages())
+            <div class="p-8 border-t border-slate-100 bg-slate-50/30">
+                {{ $medicines->links() }}
+            </div>
+            @endif
         </div>
     </div>
 
-    {{-- SECTION 4: Scripts --}}
     @push('scripts')
     <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
     <script>
-        function confirmDeleteMedicine(id, name) {
+        function confirmDeleteObat(id, name) {
             Swal.fire({
                 title: 'Hapus Obat?',
-                text: "Apakah Anda yakin ingin menghapus \"" + name + "\"? Data yang dihapus tidak bisa dikembalikan.",
+                text: `Apakah Anda yakin ingin menghapus "${name}"? Tindakan ini permanen.`,
                 icon: 'warning',
                 showCancelButton: true,
                 confirmButtonColor: '#f43f5e',
                 cancelButtonColor: '#64748b',
                 confirmButtonText: 'Ya, Hapus!',
                 cancelButtonText: 'Batal',
-                customClass: {
-                    popup: 'rounded-[1.5rem]'
-                }
+                customClass: { popup: 'rounded-[2rem]' }
             }).then((result) => {
                 if (result.isConfirmed) {
                     document.getElementById('delete-medicine-' + id).submit();
                 }
             });
         }
-
-        {{-- Toast Notifikasi --}}
-        @if(session('success'))
-            Swal.fire({
-                icon: 'success',
-                title: 'Berhasil!',
-                text: "{{ session('success') }}",
-                showConfirmButton: false,
-                timer: 2000,
-                customClass: { popup: 'rounded-[1.5rem]' }
-            });
-        @endif
-
-        @if(session('error'))
-            Swal.fire({
-                icon: 'error',
-                title: 'Gagal!',
-                text: "{{ session('error') }}",
-                confirmButtonColor: '#4f46e5',
-                customClass: { popup: 'rounded-[1.5rem]' }
-            });
-        @endif
     </script>
     @endpush
 </x-app-layout>

resources/views/pages/inventory/supplies/edit.blade.php

@@ -6,7 +6,7 @@
             </a>
             <div>
                 <h2 class="text-2xl font-black text-slate-800 tracking-tight">Edit Perlengkapan</h2>
-                <p class="text-sm text-slate-500 font-medium italic">Pembaruan data inventori untuk {{ $supply->nama_perlengkapan }}.</p>
+                <p class="text-sm text-slate-500 font-medium italic">Pembaruan data persediaan untuk {{ $supply->nama_perlengkapan }}.</p>
             </div>
         </div>
 

resources/views/pages/inventory/supplies/index.blade.php

@@ -1,104 +1,199 @@
 <x-app-layout>
+    @php
+        // Helper untuk logika sorting dinamis
+        $currentSort = request('sort', 'nama_perlengkapan');
+        $currentDir = request('direction', 'asc');
+        $nextDir = $currentDir === 'asc' ? 'desc' : 'asc';
+
+        $getSortIcon = function($field) use ($currentSort, $currentDir) {
+            if ($currentSort !== $field) return 'fa-sort opacity-20';
+            return $currentDir === 'asc' ? 'fa-sort-up text-indigo-600' : 'fa-sort-down text-indigo-600';
+        };
+    @endphp
+
     <div class="max-w-7xl mx-auto space-y-6 pb-12">
-        {{-- HEADER SECTION --}}
+        {{-- SECTION 1: Header --}}
         <div class="flex flex-col md:flex-row md:items-center justify-between gap-4 px-2">
             <div>
-                <h2 class="text-2xl font-black text-slate-800 tracking-tight leading-none mb-1">Stok Perlengkapan</h2>
-                <p class="text-sm text-slate-500 font-medium italic">Manajemen inventori operasional Ily Cattery.</p>
+                <h2 class="text-2xl font-black text-slate-800 tracking-tight leading-none mb-1 uppercase">Inventori Perlengkapan</h2>
+                <p class="text-[10px] text-slate-400 font-bold uppercase tracking-[0.2em]">Persediaan Perlengkapan • ILY Cattery</p>
             </div>
 
-            {{-- PROTEKSI CREATE: Mengikuti matriks izin modul supplies --}}
             @can('check-access', ['supplies', 'create'])
-            <div class="flex items-center gap-3">
-                <a href="{{ route('inventory.supplies.create') }}" class="inline-flex items-center px-5 py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white text-[10px] font-black rounded-xl transition-all shadow-lg active:scale-95 uppercase tracking-widest">
-                    <i class="fas fa-plus-circle mr-2"></i> TAMBAH ITEM
-                </a>
-            </div>
+            <a href="{{ route('inventory.supplies.create') }}" class="inline-flex items-center px-6 py-3 bg-indigo-600 hover:bg-indigo-700 text-white text-[10px] font-black rounded-2xl shadow-lg shadow-indigo-100 transition-all active:scale-95 uppercase tracking-widest">
+                <i class="fas fa-plus-circle mr-2"></i> TAMBAH ITEM BARU
+            </a>
             @endcan
         </div>
 
-        {{-- BATCH IMPORT SECTION: KHUSUS ROLE ADMIN --}}
+        {{-- SECTION 2: Quick Stats (3 Cards) --}}
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 px-2">
+            <div class="bg-white border border-slate-200 p-6 rounded-[2rem] shadow-sm hover:shadow-md transition-shadow">
+                <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest">Volume Stok Fisik</p>
+                <h3 class="text-2xl font-black text-slate-800 mt-1">{{ number_format($totalStock, 0) }} <span class="text-xs text-slate-400">UNIT</span></h3>
+            </div>
+            <div class="bg-white border border-slate-200 p-6 rounded-[2rem] shadow-sm border-l-4 border-l-rose-500">
+                <p class="text-[9px] font-black text-rose-600 uppercase tracking-widest">Perlu Restock (<= 5)</p>
+                <h3 class="text-2xl font-black text-slate-800 mt-1">{{ $lowStockCount }} <span class="text-xs text-slate-400">ITEM</span></h3>
+            </div>
+            <div class="bg-indigo-50 border border-indigo-100 p-6 rounded-[2rem] shadow-sm">
+                <p class="text-[9px] font-black text-indigo-600 uppercase tracking-widest">Varian Perlengkapan</p>
+                <h3 class="text-2xl font-black text-indigo-900 mt-1">{{ $totalItems }} <span class="text-xs text-indigo-400">JENIS</span></h3>
+            </div>
+        </div>
+
+       {{-- SECTION 3: Search & Batch Import (Optimized Alignment) --}}
+<div class="grid grid-cols-1 lg:grid-cols-12 gap-3 items-center px-2">
+    
+    {{-- 1. Kotak Cari (Samping Kiri) --}}
+    <div class="lg:col-span-4">
+        <form action="{{ route('inventory.supplies.index') }}" method="GET" class="relative">
+            <input type="hidden" name="sort" value="{{ request('sort') }}">
+            <input type="hidden" name="direction" value="{{ request('direction') }}">
+            
+            <i class="fas fa-search absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 text-[10px]"></i>
+            
+            <input type="text" name="search" value="{{ request('search') }}" 
+                   placeholder="Cari item..." 
+                   class="w-full pl-12 pr-4 h-11 bg-white border border-slate-200 rounded-2xl text-[10px] font-black focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 transition-all shadow-sm uppercase tracking-wider">
+        </form>
+    </div>
+
+    {{-- 2. Kotak Batch Update (Samping Kanan) --}}
+    <div class="lg:col-span-8">
         @if(auth()->user()->role === 'admin')
-        <div class="bg-indigo-50/50 border border-indigo-100 rounded-[2rem] p-6 shadow-sm mx-2">
-            <div class="flex flex-col lg:flex-row items-center justify-between gap-4">
-                <div class="flex items-center gap-3">
-                    <div class="w-10 h-10 bg-white rounded-xl flex items-center justify-center text-indigo-600 shadow-sm">
-                        <i class="fas fa-boxes-stacked text-lg"></i>
-                    </div>
-                    <div>
-                        <h4 class="text-xs font-black text-indigo-900 uppercase tracking-widest">Batch Import Supplies</h4>
-                        <p class="text-[9px] text-indigo-400 font-bold italic">Update stok massal via file .xlsx.</p>
-                    </div>
-                </div>
+        <div class="bg-white border border-slate-200 rounded-2xl p-1 h-11 flex items-center shadow-sm">
+            <div class="flex items-center justify-between w-full gap-2">
                 
-                <div class="flex flex-wrap items-center gap-3">
-                    <a href="{{ route('inventory.supplies.template') }}" class="px-3 py-2 bg-white border border-indigo-200 text-indigo-600 text-[9px] font-black rounded-lg hover:bg-indigo-100 transition-all shadow-sm">
-                        <i class="fas fa-download mr-1"></i> TEMPLATE EXCEL
-                    </a>
-                    
-                    <form action="{{ route('inventory.supplies.batch') }}" method="POST" enctype="multipart/form-data" class="flex items-center gap-2">
-                        @csrf
-                        <div class="relative">
-                            <input type="file" name="file_excel" required class="text-[9px] w-48 file:mr-2 file:py-1 file:px-2 file:rounded-md file:border-0 file:text-[9px] file:font-black file:bg-indigo-600 file:text-white hover:file:bg-indigo-700 cursor-pointer">
-                        </div>
-                        <button type="submit" class="px-4 py-2 bg-indigo-600 text-white text-[9px] font-black rounded-lg uppercase shadow-md hover:bg-indigo-700 active:scale-95 transition-all">
-                            UPLOAD
-                        </button>
-                    </form>
+                {{-- Info & Template Icon --}}
+                <div class="flex items-center gap-2 pl-2 shrink-0">
+                    <div class="w-7 h-7 rounded-lg bg-slate-900 flex items-center justify-center shrink-0">
+                        <i class="fas fa-boxes-stacked text-white text-[9px]"></i>
+                    </div>
+                    <div class="flex items-center gap-1.5">
+                        <span class="text-[9px] font-black text-slate-700 uppercase tracking-tighter leading-none hidden xl:block">Batch Update</span>
+                        
+                        <a href="{{ route('inventory.supplies.template') }}" 
+                           class="w-7 h-7 flex items-center justify-center bg-indigo-50 text-indigo-600 rounded-lg hover:bg-indigo-600 hover:text-white transition-all" 
+                           title="Unduh Template">
+                            <i class="fas fa-download text-[9px]"></i>
+                        </a>
+                    </div>
                 </div>
+
+                {{-- Form Unggah (Integrasi ke dalam bar) --}}
+                <form action="{{ route('inventory.supplies.batch') }}" method="POST" enctype="multipart/form-data" 
+                      class="flex items-center gap-1 flex-1 justify-end min-w-0">
+                    @csrf
+                    
+                    <label class="relative flex-1 group cursor-pointer min-w-0 max-w-[200px]">
+                        <div class="flex items-center gap-2 px-3 h-8 bg-slate-50 border border-dashed border-slate-200 rounded-xl transition-all hover:bg-slate-100">
+                            <i class="fas fa-paperclip text-slate-400 text-[9px] shrink-0"></i>
+                            <span id="file-label" class="text-[9px] font-black text-slate-500 uppercase truncate">Pilih File...</span>
+                        </div>
+                        <input type="file" name="file_excel" class="hidden" required onchange="updateFileName(this)">
+                    </label>
+
+                    <button type="submit" class="h-8 px-4 bg-indigo-600 hover:bg-indigo-700 text-white text-[9px] font-black rounded-xl uppercase shadow-sm active:scale-95 transition-all flex items-center gap-2 shrink-0">
+                        <i class="fas fa-upload text-[8px]"></i>
+                        <span>UNGGAH</span>
+                    </button>
+                </form>
+
             </div>
         </div>
         @endif
+    </div>
+</div>
 
-        {{-- DATA TABLE SECTION --}}
-        <div class="bg-white border border-slate-200 rounded-[2rem] overflow-hidden shadow-sm mx-2">
+        {{-- SECTION 4: Data Table --}}
+        <div class="bg-white border border-slate-200 rounded-[2.5rem] overflow-hidden shadow-sm mx-2">
             <div class="overflow-x-auto">
-                <table class="w-full text-left border-collapse table-fixed">
-                    <thead class="bg-slate-50/80 border-b border-slate-100">
+                <table class="w-full text-left border-collapse">
+                    <thead class="bg-slate-50 text-[10px] font-black text-slate-400 uppercase tracking-widest border-b border-slate-100">
                         <tr>
-                            <th class="w-auto px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest">Informasi Perlengkapan</th>
-                            <th class="w-32 px-4 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest text-center">Stok</th>
-                            <th class="w-32 px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest text-center">Aksi</th>
+                            <th class="px-6 py-5">
+                                <a href="{{ request()->fullUrlWithQuery(['sort' => 'nama_perlengkapan', 'direction' => $nextDir]) }}" class="flex items-center gap-2 hover:text-indigo-600 transition-colors">
+                                    Informasi Perlengkapan <i class="fas {{ $getSortIcon('nama_perlengkapan') }}"></i>
+                                </a>
+                            </th>
+                            <th class="px-4 py-5 text-center">
+                                <a href="{{ request()->fullUrlWithQuery(['sort' => 'qty', 'direction' => $nextDir]) }}" class="flex items-center justify-center gap-2 hover:text-indigo-600 transition-colors">
+                                    Stok Fisik <i class="fas {{ $getSortIcon('qty') }}"></i>
+                                </a>
+                            </th>
+                            <th class="px-4 py-5 text-center">
+                                <a href="{{ request()->fullUrlWithQuery(['sort' => 'created_at', 'direction' => $nextDir]) }}" class="flex items-center justify-center gap-2 hover:text-indigo-600 transition-colors">
+                                    Ditambahkan <i class="fas {{ $getSortIcon('created_at') }}"></i>
+                                </a>
+                            </th>
+                            <th class="px-6 py-5 text-right">Aksi</th>
                         </tr>
                     </thead>
-                    <tbody class="divide-y divide-slate-50">
+                    <tbody class="divide-y divide-slate-100">
                         @forelse($supplies as $s)
-                        <tr class="hover:bg-slate-50/40 transition-all group">
+                        <tr class="hover:bg-slate-50/80 transition-all group">
+                            {{-- Informasi Produk --}}
                             <td class="px-6 py-4">
                                 <div class="flex items-center gap-4">
                                     <div class="w-12 h-12 rounded-2xl bg-slate-50 border border-slate-100 overflow-hidden shrink-0 flex items-center justify-center shadow-inner">
                                         @if($s->foto_produk)
                                             <img src="{{ \Storage::url($s->foto_produk) }}" class="w-full h-full object-cover">
                                         @else
-                                            <i class="fas fa-box-open text-slate-200 text-lg"></i>
+                                            <i class="fas fa-box text-slate-200 text-lg"></i>
                                         @endif
                                     </div>
                                     <div class="min-w-0">
-                                        <div class="text-sm font-black text-slate-800 truncate">{{ $s->nama_perlengkapan }}</div>
-                                        <span class="text-[8px] font-black text-indigo-600 bg-indigo-50 px-2 py-0.5 rounded border border-indigo-100 uppercase italic">
-                                            {{ $s->category->name ?? $s->kategori }}
-                                        </span>
+                                        <div class="text-sm font-black text-slate-800 truncate uppercase tracking-tight">{{ $s->nama_perlengkapan }}</div>
+                                        <div class="mt-1">
+                                            <span class="text-[8px] font-black text-indigo-600 bg-indigo-50 px-2 py-0.5 rounded border border-indigo-100 uppercase italic">
+                                                {{ $s->kategori ?? ($s->category->name ?? 'Persediaan') }}
+                                            </span>
+                                        </div>
                                     </div>
                                 </div>
                             </td>
+
+                            {{-- Stok dengan indikator Low Stock --}}
                             <td class="px-4 py-4 text-center">
-                                <span class="inline-flex px-3 py-1.5 rounded-xl text-[10px] font-black border {{ $s->qty < 5 ? 'bg-rose-50 text-rose-600 border-rose-100' : 'bg-emerald-50 text-emerald-600 border-emerald-100' }}">
-                                    {{ (float)$s->qty }} {{ $s->unit }}
+                                <div class="flex flex-col items-center">
+                                    <div class="flex items-baseline gap-1 {{ $s->qty <= 5 ? 'text-rose-600' : 'text-emerald-600' }}">
+                                        <span class="text-sm font-black">{{ (float)$s->qty }}</span>
+                                        <span class="text-[9px] font-bold uppercase">{{ $s->unit ?? 'PCS' }}</span>
+                                    </div>
+                                    @if($s->qty <= 5)
+                                        <div class="flex items-center gap-1 mt-1 text-rose-400 animate-pulse">
+                                            <i class="fas fa-exclamation-triangle text-[7px]"></i>
+                                            <span class="text-[7px] font-black uppercase tracking-widest">Restock!</span>
+                                        </div>
+                                    @endif
+                                </div>
+                            </td>
+
+                            {{-- Tanggal dibuat --}}
+                            <td class="px-4 py-4 text-center">
+                                <span class="text-[10px] font-bold text-slate-400 uppercase tracking-tighter">
+                                    {{ $s->created_at->format('d/m/Y') }}
                                 </span>
                             </td>
-                            <td class="px-6 py-4">
-                                <div class="flex justify-center gap-2">
-                                    {{-- PROTEKSI EDIT: Berdasarkan Matriks Izin --}}
+
+                            {{-- Tombol Aksi --}}
+                            <td class="px-6 py-4 text-right">
+                                <div class="flex justify-end gap-2">
                                     @can('check-access', ['supplies', 'update'])
-                                    <a href="{{ route('inventory.supplies.edit', $s->id) }}" class="w-8 h-8 flex items-center justify-center bg-amber-50 text-amber-600 hover:bg-amber-600 hover:text-white rounded-xl transition-all shadow-sm shadow-amber-100">
-                                        <i class="fas fa-edit text-[10px]"></i>
+                                    <a href="{{ route('inventory.supplies.edit', $s->id) }}" 
+                                       class="w-9 h-9 flex items-center justify-center bg-amber-50 text-amber-600 hover:bg-amber-600 hover:text-white rounded-xl transition-all shadow-sm" 
+                                       title="Edit Item">
+                                        <i class="fas fa-edit text-xs"></i>
                                     </a>
                                     @endcan
 
-                                    {{-- PROTEKSI DELETE: Pengecekan manual 'admin' dihapus agar mengikuti matriks izin --}}
                                     @can('check-access', ['supplies', 'delete'])
-                                    <button onclick="confirmDeleteSupply({{ $s->id }}, '{{ addslashes($s->nama_perlengkapan) }}')" class="w-8 h-8 flex items-center justify-center bg-rose-50 text-rose-600 hover:bg-rose-600 hover:text-white rounded-xl transition-all shadow-sm shadow-rose-100">
-                                        <i class="fas fa-trash-alt text-[10px]"></i>
+                                    <button type="button" 
+                                            onclick="confirmDeleteSupply({{ $s->id }}, '{{ addslashes($s->nama_perlengkapan) }}')" 
+                                            class="w-9 h-9 flex items-center justify-center bg-rose-50 text-rose-600 hover:bg-rose-500 hover:text-white rounded-xl transition-all shadow-sm" 
+                                            title="Hapus Item">
+                                        <i class="fas fa-trash-alt text-xs"></i>
                                     </button>
                                     <form id="delete-supply-{{ $s->id }}" action="{{ route('inventory.supplies.destroy', $s->id) }}" method="POST" class="hidden">
                                         @csrf @method('DELETE')
@@ -109,10 +204,11 @@
                         </tr>
                         @empty
                         <tr>
-                            <td colspan="3" class="px-6 py-20 text-center">
-                                <div class="flex flex-col items-center justify-center">
-                                    <i class="fas fa-folder-open text-slate-200 text-4xl mb-3"></i>
-                                    <p class="text-slate-400 text-xs italic font-bold">Data perlengkapan belum tersedia.</p>
+                            <td colspan="4" class="px-6 py-24 text-center">
+                                <div class="flex flex-col items-center">
+                                    <i class="fas fa-box-open text-5xl text-slate-100 mb-4"></i>
+                                    <h3 class="text-slate-400 font-black uppercase text-xs tracking-[0.4em]">Item Tidak Ditemukan</h3>
+                                    <p class="text-slate-300 text-[10px] font-bold mt-2 uppercase italic tracking-tighter">Coba gunakan kata kunci pencarian lain</p>
                                 </div>
                             </td>
                         </tr>
@@ -120,9 +216,10 @@
                     </tbody>
                 </table>
             </div>
-            
-            @if(method_exists($supplies, 'links'))
-                <div class="px-6 py-4 bg-slate-50/50 border-t border-slate-100">
+
+            {{-- Pagination --}}
+            @if($supplies->hasPages())
+                <div class="px-8 py-6 bg-slate-50/50 border-t border-slate-100">
                     {{ $supplies->links() }}
                 </div>
             @endif
@@ -132,45 +229,37 @@
     {{-- SCRIPTS SECTION --}}
     @push('scripts')
     <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+
+    <!-- <script>
+    function updateFileName(input) {
+        const label = document.getElementById('file-label');
+        if (input.files && input.files.length > 0) {
+            label.innerText = input.files[0].name;
+            label.classList.remove('text-slate-500');
+            label.classList.add('text-indigo-600');
+        } else {
+            label.innerText = 'Pilih File';
+        }
+    }
+</script> -->
     <script>
-        // Dialog Konfirmasi Hapus (TETAP UTUH)
         function confirmDeleteSupply(id, name) {
             Swal.fire({
-                title: 'Hapus Item?',
-                text: `Yakin ingin menghapus "${name}"? Tindakan ini tidak dapat dibatalkan.`,
+                title: 'Hapus Perlengkapan?',
+                text: `Apakah Anda yakin ingin menghapus "${name}"? Tindakan ini bersifat permanen.`,
                 icon: 'warning',
                 showCancelButton: true,
                 confirmButtonColor: '#f43f5e',
+                cancelButtonColor: '#64748b',
                 confirmButtonText: 'Ya, Hapus!',
                 cancelButtonText: 'Batal',
-                borderRadius: '1.5rem',
-                customClass: { title: 'font-black text-slate-800' }
-            }).then((result) => { 
-                if (result.isConfirmed) document.getElementById(`delete-supply-${id}`).submit(); 
+                customClass: { popup: 'rounded-[2rem]' }
+            }).then((result) => {
+                if (result.isConfirmed) {
+                    document.getElementById('delete-supply-' + id).submit();
+                }
             });
         }
-
-        // Notifikasi Sukses & Error (TETAP UTUH)
-        @if(session('success'))
-            Swal.fire({ 
-                icon: 'success', 
-                title: 'Berhasil!', 
-                text: "{{ session('success') }}", 
-                timer: 2500, 
-                showConfirmButton: false, 
-                borderRadius: '1.5rem', 
-                iconColor: '#4f46e5' 
-            });
-        @endif
-
-        @if(session('error'))
-            Swal.fire({ 
-                icon: 'error', 
-                title: 'Gagal!', 
-                text: "{{ session('error') }}", 
-                borderRadius: '1.5rem' 
-            });
-        @endif
     </script>
     @endpush
 </x-app-layout>

resources/views/pages/matting/create.blade.php

@@ -25,8 +25,8 @@
                         <i class="fas fa-arrow-left"></i>
                     </a>
                     <div>
-                        <h2 class="text-3xl font-black text-slate-800 tracking-tighter leading-none mb-1 uppercase">Registrasi Breeding</h2>
-                        <p class="text-[10px] text-slate-500 font-bold uppercase tracking-[0.2em] italic">Earrin Cats Breeding Program</p>
+                        <h2 class="text-3xl font-black text-slate-800 tracking-tighter leading-none mb-1 uppercase">Pencatatan Pembiakan</h2>
+                        <p class="text-[10px] text-slate-500 font-bold uppercase tracking-[0.2em] italic">Program Pembiakan ILYCats</p>
                     </div>
                 </div>
             </div>
@@ -105,9 +105,9 @@
             <div class="bg-slate-900 rounded-[2.5rem] p-8 text-white shadow-2xl mb-12 relative overflow-hidden">
                 <div class="grid grid-cols-1 md:grid-cols-4 gap-8 relative z-10">
                     <div>
-                        <label class="text-[10px] font-black uppercase tracking-widest text-slate-400">Status Breeding</label>
+                        <label class="text-[10px] font-black uppercase tracking-widest text-slate-400">Status Pembiakan</label>
                         <select name="status" class="w-full mt-2 bg-white/10 border-white/10 rounded-xl text-xs font-bold focus:ring-indigo-500 text-white" required>
-                            <option value="proses" class="text-slate-800">Proses (Monitoring)</option>
+                            <option value="proses" class="text-slate-800">Dalam proses</option>
                             <option value="berhasil" class="text-slate-800">Berhasil (Lahir)</option>
                             <option value="gagal" class="text-slate-800">Gagal</option>
                         </select>

resources/views/pages/matting/edit.blade.php

@@ -27,7 +27,7 @@
                         <i class="fas fa-arrow-left"></i>
                     </a>
                     <div>
-                        <h2 class="text-2xl font-black text-slate-800 tracking-tighter leading-none mb-1">EDIT BREEDING RECORD</h2>
+                        <h2 class="text-2xl font-black text-slate-800 tracking-tighter leading-none mb-1">UBAH DATA PEMBIAKAN</h2>
                         <p class="text-[10px] text-slate-500 font-bold uppercase tracking-widest italic">Litter ID: #{{ str_pad($matting->id, 5, '0', STR_PAD_LEFT) }} • Update Lineage</p>
                     </div>
                 </div>
@@ -114,7 +114,7 @@
                     <div>
                         <label class="text-[9px] font-black uppercase text-slate-400 mb-1 block">Status</label>
                         <select name="status" class="w-full bg-white/10 border-white/10 rounded-xl py-3 text-xs font-black text-white">
-                            <option value="proses" class="text-slate-800" {{ $matting->status == 'proses' ? 'selected' : '' }}>MONITORING</option>
+                            <option value="proses" class="text-slate-800" {{ $matting->status == 'proses' ? 'selected' : '' }}>DALAM PROSES</option>
                             <option value="berhasil" class="text-slate-800" {{ $matting->status == 'berhasil' ? 'selected' : '' }}>BERHASIL</option>
                             <option value="gagal" class="text-slate-800" {{ $matting->status == 'gagal' ? 'selected' : '' }}>GAGAL</option>
                         </select>
@@ -202,7 +202,7 @@
                                 </div>
                             </div>
 
-                            {{-- File Upload --}}
+                            {{-- File Unggah --}}
                             <div class="pt-4 border-t border-slate-50">
                                 <label class="text-[9px] font-black uppercase text-slate-400 ml-1 mb-2 block italic">Documents (Max 4)</label>
                                 <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
@@ -226,7 +226,7 @@
 
             <div class="mt-12 flex justify-end">
                 <button type="submit" class="px-12 py-5 bg-slate-900 text-white rounded-[2rem] font-black text-[10px] uppercase tracking-[0.2em] shadow-2xl hover:bg-black transition-all">
-                    <i class="fas fa-sync-alt mr-2"></i> Update Breeding Record
+                    <i class="fas fa-sync-alt mr-2"></i> Perbarui data pembiakan
                 </button>
             </div>
         </form>

resources/views/pages/matting/index.blade.php

@@ -1,219 +1,14 @@
 <x-app-layout>
-    <div class="max-w-7xl mx-auto space-y-6 pb-12">
-        {{-- SECTION 1: Header & Statistik --}}
-        <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
-            <div>
-                <h2 class="text-2xl font-black text-slate-800 tracking-tighter uppercase leading-none">Breeding Activity</h2>
-                <p class="text-[10px] text-slate-400 font-bold uppercase tracking-widest mt-1 italic">Monitoring silsilah & kelahiran • Real-time Lineage Data</p>
-            </div>
-            
-            <div class="flex items-center gap-3">
-                <div class="hidden sm:block bg-white border border-slate-200 px-4 py-2 rounded-xl shadow-sm">
-                    <p class="text-[8px] font-black text-slate-400 uppercase tracking-widest leading-none">Total Program</p>
-                    <p class="text-sm font-black text-indigo-600 mt-1">{{ $mattings->total() }}</p>
-                </div>
-
-                {{-- PROTEKSI TOMBOL CREATE MATTING --}}
-                @can('check-access', ['matting', 'create'])
-                <a href="{{ route('matting.create') }}" class="inline-flex items-center px-5 py-3 bg-indigo-600 text-white text-[10px] font-black rounded-xl shadow-lg shadow-indigo-100 hover:bg-indigo-700 transition-all active:scale-95">
-                    <i class="fas fa-plus mr-2"></i> INPUT MATTING BARU
-                </a>
-                @endcan
-            </div>
-        </div>
-
-        {{-- SECTION 2: Tabel Matting --}}
-        <div class="bg-white border border-slate-200 rounded-[2rem] overflow-hidden shadow-sm">
-            <div class="overflow-x-auto">
-                <table class="w-full text-left border-collapse table-auto">
-                    <thead class="bg-slate-50 text-[10px] font-black text-slate-400 uppercase tracking-widest border-b border-slate-100">
-                        <tr>
-                            <th class="px-6 py-4">Indukan (Sire x Dam)</th>
-                            <th class="px-4 py-4 text-center">Periode Kawin</th>
-                            <th class="px-4 py-4 text-center">Estimasi Lahir</th>
-                            <th class="px-4 py-4 text-center">Hasil</th>
-                            <th class="px-6 py-4 text-right" style="min-width: 280px;">Aksi</th>
-                        </tr>
-                    </thead>
-                    <tbody class="divide-y divide-slate-100 font-medium text-slate-700">
-                        @forelse($mattings as $m)
-                        <tr class="hover:bg-slate-50/50 transition-all group">
-                            {{-- Pasangan Indukan --}}
-                            <td class="px-6 py-4 align-middle">
-                                <div class="flex items-center gap-3">
-                                    @if($m->sire->foto || $m->dam->foto)
-                                        <div class="flex -space-x-3 shrink-0">
-                                            @if($m->sire->foto)
-                                                <div class="w-11 h-11 rounded-xl bg-slate-100 border-2 border-white overflow-hidden shadow-sm">
-                                                    <img src="{{ asset('storage/'.$m->sire->foto) }}" class="w-full h-full object-cover">
-                                                </div>
-                                            @endif
-                                            @if($m->dam->foto)
-                                                <div class="w-11 h-11 rounded-xl bg-slate-100 border-2 border-white overflow-hidden shadow-sm">
-                                                    <img src="{{ asset('storage/'.$m->dam->foto) }}" class="w-full h-full object-cover">
-                                                </div>
-                                            @endif
-                                        </div>
-                                    @endif
-
-                                    <div class="min-w-0">
-                                        <div class="text-xs font-black text-slate-800 flex items-center gap-1 whitespace-nowrap">
-                                            {{ $m->sire->nama_kucing }} <i class="fas fa-heart text-[8px] text-rose-400"></i> {{ $m->dam->nama_kucing }}
-                                        </div>
-                                        <div class="flex gap-1.5 mt-1.5">
-                                            <span class="text-[8px] font-black bg-slate-800 text-white px-2 py-0.5 rounded uppercase tracking-tighter shadow-sm">
-                                                {{ $m->sire->kode_ems ?? 'NO EMS' }}
-                                            </span>
-                                            <span class="text-[8px] font-black bg-indigo-100 text-indigo-700 px-2 py-0.5 rounded uppercase border border-indigo-200 tracking-tighter shadow-sm">
-                                                {{ $m->dam->kode_ems ?? 'NO EMS' }}
-                                            </span>
-                                        </div>
-                                    </div>
-                                </div>
-                            </td>
-
-                            <td class="px-4 py-4 text-center align-middle whitespace-nowrap">
-                                <p class="text-[10px] font-black text-slate-700 leading-none">
-                                    {{ $m->tgl_kawin_awal->format('d M') }} - {{ $m->tgl_kawin_akhir->format('d M Y') }}
-                                </p>
-                                <span class="text-[9px] text-slate-400 font-bold italic uppercase">{{ $m->tgl_kawin_awal->diffInDays($m->tgl_kawin_akhir) + 1 }} Hari</span>
-                            </td>
-
-                            <td class="px-4 py-4 text-center align-middle" x-data="breedingCountdown('{{ $m->tgl_kawin_awal->addDays(63)->format('Y-m-d') }}')">
-                                <div :class="isUrgent ? 'bg-rose-50 border-rose-100' : 'bg-indigo-50 border-indigo-100'" 
-                                     class="inline-flex flex-col px-3 py-1.5 rounded-xl border border-dashed transition-all w-28">
-                                    <div class="flex items-center justify-center gap-1.5 mb-0.5">
-                                        <i :class="isUrgent ? 'text-rose-500 animate-pulse' : 'text-indigo-400'" class="fas fa-stopwatch text-[9px]"></i>
-                                        <span class="text-[8px] font-black uppercase" :class="isUrgent ? 'text-rose-600' : 'text-indigo-600'">HPL: {{ $m->tgl_kawin_awal->addDays(63)->format('d/m') }}</span>
-                                    </div>
-                                    <p class="text-[10px] font-black" :class="isUrgent ? 'text-rose-700' : 'text-slate-700'">
-                                        <template x-if="daysRemaining > 0"><span x-text="daysRemaining + ' Hari'"></span></template>
-                                        <template x-if="daysRemaining === 0"><span>HARI H</span></template>
-                                        <template x-if="daysRemaining < 0"><span class="text-slate-400 italic">LEWAT</span></template>
-                                    </p>
-                                </div>
-                            </td>
-
-                            <td class="px-4 py-4 text-center align-middle whitespace-nowrap">
-                                <div class="flex flex-col gap-1 items-center">
-                                    <span class="px-3 py-1 bg-emerald-50 text-emerald-600 rounded-lg text-[10px] font-black border border-emerald-100 uppercase">
-                                        {{ $m->kittens_count }} Anak
-                                    </span>
-                                    {!! $m->status_badge !!}
-                                </div>
-                            </td>
-
-                            <td class="px-6 py-4 text-right align-middle">
-                                <div class="flex justify-end items-center gap-16">
-                                    
-                                    {{-- PROTEKSI TOMBOL EDIT MATTING --}}
-                                    @can('check-access', ['matting', 'update'])
-                                    <a href="{{ route('matting.edit', $m->id) }}" 
-                                       class="flex items-center gap-3 p-3 text-slate-400 hover:text-indigo-600 hover:bg-indigo-50 rounded-2xl transition-all group/btn" 
-                                       title="Edit Data">
-                                        <i class="fas fa-pencil-alt text-base"></i>
-                                        <span class="text-[10px] font-black uppercase hidden group-hover/btn:inline tracking-widest">Edit</span>
-                                    </a>
-                                    @endcan
-                                    
-                                    {{-- PROTEKSI TOMBOL HAPUS MATTING --}}
-                                    @can('check-access', ['matting', 'delete'])
-                                    <form action="{{ route('matting.destroy', $m->id) }}" method="POST" class="inline m-0">
-                                        @csrf @method('DELETE')
-                                        <button type="button" 
-                                                onclick="confirmDelete(this, '{{ addslashes($m->sire->nama_kucing) }} x {{ addslashes($m->dam->nama_kucing) }}')" 
-                                                class="flex items-center gap-3 p-3 text-slate-400 hover:text-rose-500 hover:bg-rose-50 rounded-2xl transition-all group/btn" 
-                                                title="Hapus Data">
-                                            <i class="fas fa-trash-alt text-base"></i>
-                                            <span class="text-[10px] font-black uppercase hidden group-hover/btn:inline tracking-widest">Hapus</span>
-                                        </button>
-                                    </form>
-                                    @endcan
-
-                                </div>
-                            </td>
-                        </tr>
-                        @empty
-                        <tr>
-                            <td colspan="5" class="px-6 py-20 text-center text-slate-400 uppercase text-[10px] font-black tracking-widest">
-                                Belum ada riwayat breeding
-                            </td>
-                        </tr>
-                        @endforelse
-                    </tbody>
-                </table>
-            </div>
-
-            <div class="p-6 bg-slate-50/30 border-t border-slate-100">
-                {{ $mattings->links() }}
-            </div>
-        </div>
-    </div>
-
-    @push('scripts')
-    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
-    <script>
-        {{-- Script Alpine Init & SweetAlert Tetap Sama --}}
-        document.addEventListener('alpine:init', () => {
-            Alpine.data('breedingCountdown', (targetDate) => ({
-                target: new Date(targetDate),
-                daysRemaining: 0,
-                isUrgent: false,
-                init() {
-                    const now = new Date();
-                    now.setHours(0,0,0,0);
-                    const targetDateObj = new Date(this.target);
-                    targetDateObj.setHours(0,0,0,0);
-                    const diffTime = targetDateObj - now;
-                    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
-                    this.daysRemaining = diffDays;
-                    this.isUrgent = diffDays <= 7 && diffDays >= 0;
-                }
-            }));
-        });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const Toast = Swal.mixin({
-                toast: true,
-                position: 'top-end',
-                showConfirmButton: false,
-                timer: 3500,
-                timerProgressBar: true
-            });
-
-            @if(session('success'))
-                Toast.fire({ icon: 'success', title: '{{ session('success') }}' });
-            @endif
-
-            @if(session('error'))
-                Swal.fire({
-                    icon: 'info',
-                    title: 'Informasi Sistem',
-                    text: '{{ session('error') }}',
-                    confirmButtonColor: '#4f46e5',
-                    customClass: { popup: 'rounded-[2rem]' }
-                });
-            @endif
-        });
-
-        function confirmDelete(button, pairName) {
-            Swal.fire({
-                title: 'Hapus Riwayat?',
-                html: "Anda akan menghapus data breeding:<br><b class='text-indigo-600'>" + pairName + "</b>",
-                icon: 'warning',
-                showCancelButton: true,
-                confirmButtonColor: '#ef4444',
-                cancelButtonColor: '#64748b',
-                confirmButtonText: 'Ya, Hapus!',
-                cancelButtonText: 'Batal',
-                reverseButtons: true,
-                customClass: { popup: 'rounded-[2rem]' }
-            }).then((result) => {
-                if (result.isConfirmed) {
-                    button.closest('form').submit();
-                }
-            });
-        }
-    </script>
-    @endpush
-</x-app-layout>
+    <div class="mb-6 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between"><div><h1 class="text-2xl font-bold text-slate-900">Perkawinan & pembiakan</h1><p class="mt-1 text-sm text-slate-500">Riwayat pasangan induk, periode kawin, perkiraan kelahiran, dan data anakan.</p></div>@can('check-access',['matting','create'])<a href="{{ route('matting.create') }}" class="bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white hover:bg-indigo-700"><i class="fas fa-plus mr-2"></i>Catat perkawinan</a>@endcan</div>
+    <div class="mb-4 border border-slate-200 bg-white p-4"><p class="text-xs text-slate-500">Total riwayat pembiakan</p><p class="mt-1 text-2xl font-bold text-slate-900">{{ $mattings->total() }}</p></div>
+    <section class="border border-slate-200 bg-white"><div class="overflow-x-auto"><table class="min-w-full divide-y divide-slate-200 text-sm"><thead class="bg-slate-50 text-left text-xs font-semibold text-slate-500"><tr><th class="px-4 py-3">Pasangan induk</th><th class="px-4 py-3">Periode kawin</th><th class="px-4 py-3">Perkiraan lahir</th><th class="px-4 py-3">Status & anakan</th><th class="px-4 py-3 text-right">Aksi</th></tr></thead><tbody class="divide-y divide-slate-100">
+        @forelse($mattings as $m)
+            @php $edd=$m->tgl_kawin_awal?->copy()->addDays(63); $days=$edd ? (int)now()->startOfDay()->diffInDays($edd->copy()->startOfDay(),false) : null; @endphp
+            <tr class="hover:bg-slate-50"><td class="px-4 py-4"><div class="flex items-center gap-3"><div class="flex -space-x-2">@foreach([$m->sire,$m->dam] as $parent)<img src="{{ $parent?->foto_url ?? asset('images/default-cat.png') }}" class="h-10 w-10 rounded-full border-2 border-white object-cover" alt="">@endforeach</div><div><p class="font-semibold text-slate-900">{{ $m->sire->nama_kucing ?? '-' }} × {{ $m->dam->nama_kucing ?? '-' }}</p><p class="mt-1 text-xs text-slate-500">EMS {{ $m->sire->kode_ems ?? '-' }} × {{ $m->dam->kode_ems ?? '-' }}</p></div></div></td>
+            <td class="px-4 py-4"><p class="text-slate-700">{{ $m->tgl_kawin_awal?->format('d-m-Y') ?? '-' }}{{ $m->tgl_kawin_akhir ? ' s.d. '.$m->tgl_kawin_akhir->format('d-m-Y') : '' }}</p>@if($m->tgl_kawin_awal && $m->tgl_kawin_akhir)<p class="mt-1 text-xs text-slate-500">{{ $m->tgl_kawin_awal->diffInDays($m->tgl_kawin_akhir)+1 }} hari</p>@endif</td>
+            <td class="px-4 py-4">@if($edd)<p class="font-medium text-slate-800">{{ $edd->format('d-m-Y') }}</p><p class="mt-1 text-xs {{ $days!==null && $days<=7 && $days>=0?'text-rose-600':'text-slate-500' }}">{{ $days<0?'Lewat '.abs($days).' hari':($days===0?'Perkiraan hari ini':$days.' hari lagi') }}</p>@else<span class="text-slate-400">-</span>@endif</td>
+            <td class="px-4 py-4"><p class="font-medium {{ $m->status==='berhasil'?'text-emerald-700':($m->status==='gagal'?'text-rose-600':'text-indigo-700') }}">{{ $m->status==='proses'?'Dalam proses':ucfirst($m->status) }}</p><p class="mt-1 text-xs text-slate-500">{{ $m->kittens_count }} anakan tercatat</p></td>
+            <td class="px-4 py-4"><div class="flex justify-end gap-1">@can('check-access',['matting','update'])<a href="{{ route('matting.edit',$m) }}" class="p-2 text-slate-500 hover:bg-slate-100" title="Ubah"><i class="fas fa-pen"></i></a>@endcan @can('check-access',['matting','delete'])<form method="POST" action="{{ route('matting.destroy',$m) }}" id="delete-matting-{{ $m->id }}">@csrf @method('DELETE')<button type="button" onclick="confirmDelete('delete-matting-{{ $m->id }}','{{ addslashes(($m->sire->nama_kucing ?? '').' × '.($m->dam->nama_kucing ?? '')) }}')" class="p-2 text-rose-500 hover:bg-rose-50"><i class="fas fa-trash"></i></button></form>@endcan</div></td></tr>
+        @empty<tr><td colspan="5" class="px-4 py-12 text-center text-sm text-slate-500">Belum ada riwayat pembiakan.</td></tr>@endforelse
+    </tbody></table></div><div class="border-t border-slate-200 p-4">{{ $mattings->links() }}</div></section>
+</x-app-layout>

resources/views/pages/reports/index.blade.php

@@ -5,14 +5,14 @@
         <div class="flex flex-col md:flex-row justify-between items-center gap-6 bg-white p-8 rounded-[3rem] border border-slate-100 shadow-sm">
             <div>
                 <h1 class="text-3xl font-black text-slate-800 tracking-tighter uppercase leading-none">
-                    Intelligence <span class="text-indigo-600">Center</span>
+                    Pusat <span class="text-indigo-600">Laporan</span>
                 </h1>
                 <p class="text-[10px] text-slate-400 font-bold uppercase tracking-[0.3em] mt-2">
                     Laporan: {{ strtoupper(str_replace('_', ' ', $module)) }}
                 </p>
             </div>
             
-            {{-- PROTEKSI EXPORT: Hanya muncul jika memiliki izin 'create' pada modul reports --}}
+            {{-- HAK AKSES EKSPOR: Hanya muncul jika memiliki izin 'create' pada modul reports --}}
             @can('check-access', ['reports', 'create'])
             <div class="flex items-center gap-3">
                 {{-- Export PDF --}}
@@ -31,7 +31,7 @@
             @endcan
         </div>
 
-        {{-- 2. ADVANCED FILTER PANEL (TETAP UTUH) --}}
+        {{-- 2. PANEL FILTER --}}
         <div class="bg-white rounded-[3rem] border border-slate-100 shadow-sm p-8">
             <form action="{{ route('admin.reports.index') }}" method="GET" class="grid grid-cols-1 md:grid-cols-4 gap-8">
                 
@@ -53,9 +53,9 @@
 
                 {{-- PIC & Period --}}
                 <div class="space-y-3">
-                    <label class="block text-[10px] font-black text-slate-400 uppercase tracking-widest ml-2">Staff & Periode</label>
+                    <label class="block text-[10px] font-black text-slate-400 uppercase tracking-widest ml-2">PIC & Periode</label>
                     <select name="pic_id" class="w-full bg-slate-50 border-none rounded-2xl text-xs font-bold">
-                        <option value="">Semua PIC Staff</option>
+                        <option value="">Semua PIC</option>
                         @foreach($users as $user)
                             <option value="{{ $user->id }}" {{ request('pic_id') == $user->id ? 'selected' : '' }}>{{ $user->name }}</option>
                         @endforeach
@@ -67,29 +67,28 @@
                 </div>
 
                 {{-- Status Filter --}}
-<div class="space-y-3">
-    <label class="block text-[10px] font-black text-slate-400 uppercase tracking-widest ml-2">Status Analitik</label>
-    <select name="status" class="w-full bg-slate-50 border-none rounded-2xl text-xs font-bold">
-        <option value="">Semua Kondisi / Status</option>
-        @if($module == 'cats')
-            {{-- Perbaikan: Pastikan value ini ditangkap di Controller --}}
-            <option value="sehat" {{ request('status') == 'sehat' ? 'selected' : '' }}>Sehat (Healthy)</option>
-            <option value="sakit" {{ request('status') == 'sakit' ? 'selected' : '' }}>Dalam Perawatan (Treatment)</option>
-        @elseif(in_array($module, ['vaccine', 'deworming', 'flea', 'grooming']))
-            <option value="not_set" {{ request('status') == 'not_set' ? 'selected' : '' }}>Date Not Set</option>
-            <option value="overdue" {{ request('status') == 'overdue' ? 'selected' : '' }}>Overdue (Terlewat)</option>
-            <option value="soon" {{ request('status') == 'soon' ? 'selected' : '' }}>Akan Datang (7 Hari)</option>
-        @elseif(in_array($module, ['medicine', 'food', 'supplies']))
-            <option value="critical" {{ request('status') == 'critical' ? 'selected' : '' }}>Stok Kritis (< 5)</option>
-            <option value="expired" {{ request('status') == 'expired' ? 'selected' : '' }}>Sudah Expired</option>
-            <option value="safe" {{ request('status') == 'safe' ? 'selected' : '' }}>Stok Aman</option>
-        @endif
-    </select>
-    
-    <button type="submit" class="w-full bg-indigo-600 text-white py-3 rounded-2xl text-[10px] font-black uppercase tracking-widest hover:bg-slate-900 shadow-xl shadow-indigo-100 transition-all">
-        <i class="fas fa-filter mr-2"></i> Apply Filter
-    </button>
-</div>
+                <div class="space-y-3">
+                    <label class="block text-[10px] font-black text-slate-400 uppercase tracking-widest ml-2">Status Analitik</label>
+                    <select name="status" class="w-full bg-slate-50 border-none rounded-2xl text-xs font-bold">
+                        <option value="">Semua Kondisi / Status</option>
+                        @if($module == 'cats')
+                            <option value="sehat" {{ request('status') == 'sehat' ? 'selected' : '' }}>Sehat (Sehat)</option>
+                            <option value="sakit" {{ request('status') == 'sakit' ? 'selected' : '' }}>Dalam Perawatan (Perawatan)</option>
+                        @elseif(in_array($module, ['vaccine', 'deworming', 'flea', 'grooming']))
+                            <option value="not_set" {{ request('status') == 'not_set' ? 'selected' : '' }}>Date Not Set</option>
+                            <option value="overdue" {{ request('status') == 'overdue' ? 'selected' : '' }}>Overdue (Terlewat)</option>
+                            <option value="soon" {{ request('status') == 'soon' ? 'selected' : '' }}>Akan Datang (7 Hari)</option>
+                        @elseif(in_array($module, ['medicine', 'food', 'supplies']))
+                            <option value="critical" {{ request('status') == 'critical' ? 'selected' : '' }}>Stok Kritis (< 5)</option>
+                            <option value="expired" {{ request('status') == 'expired' ? 'selected' : '' }}>Sudah Expired</option>
+                            <option value="safe" {{ request('status') == 'safe' ? 'selected' : '' }}>Stok Aman</option>
+                        @endif
+                    </select>
+                    
+                    <button type="submit" class="w-full bg-indigo-600 text-white py-3 rounded-2xl text-[10px] font-black uppercase tracking-widest hover:bg-slate-900 shadow-xl shadow-indigo-100 transition-all">
+                        <i class="fas fa-filter mr-2"></i> Apply Filter
+                    </button>
+                </div>
 
                 {{-- Summary & Reset --}}
                 <div class="flex flex-col justify-between">
@@ -105,7 +104,7 @@
             </form>
         </div>
 
-        {{-- 3. DATA TABLE (TETAP UTUH) --}}
+        {{-- 3. DATA TABLE --}}
         <div class="bg-white rounded-[3rem] border border-slate-100 shadow-sm overflow-hidden">
             <div class="overflow-x-auto">
                 <table class="w-full text-left">
@@ -113,23 +112,28 @@
                         <tr>
                             <th class="p-6 text-[10px] font-black text-slate-400 uppercase tracking-widest">Informasi Utama</th>
                             <th class="p-6 text-[10px] font-black text-slate-400 uppercase tracking-widest">Detail Data</th>
-                            <th class="p-6 text-[10px] font-black text-slate-400 uppercase tracking-widest">Staff & Jadwal</th>
+                            <th class="p-6 text-[10px] font-black text-slate-400 uppercase tracking-widest">PIC & Jadwal</th>
                             <th class="p-6 text-[10px] font-black text-slate-400 uppercase tracking-widest text-right">Status Aktif</th>
                         </tr>
                     </thead>
                     <tbody class="divide-y divide-slate-50">
                         @forelse($results as $item)
                             @php
-                                $dateCol = match($module) {
-                                    'cats' => 'tanggal_lahir',
-                                    'vaccine' => 'jadwal_vaksin',
-                                    'deworming' => 'jadwal_obat_cacing',
-                                    'flea' => 'jadwal_obat_kutu',
-                                    'grooming' => 'jadwal_grooming',
-                                    'medicine', 'food', 'supplies' => 'expired_date',
-                                    default => 'created_at'
-                                };
-                                $dateValue = $item->{$dateCol};
+                                $dateValue = null;
+
+                                // PENGISIAN DATEVALUE KHUSUS SELAIN KUCING
+                                // Kucing tidak butuh dateValue untuk kolom status
+                                if ($module !== 'cats') {
+                                    $dateCol = match($module) {
+                                        'vaccine' => 'jadwal_vaksin',
+                                        'deworming' => 'jadwal_obat_cacing',
+                                        'flea' => 'jadwal_obat_kutu',
+                                        'grooming' => 'jadwal_grooming',
+                                        'medicine', 'food', 'supplies' => 'expired_date',
+                                        default => 'created_at'
+                                    };
+                                    $dateValue = $item->{$dateCol};
+                                }
                             @endphp
                             <tr class="group hover:bg-slate-50/30 transition-all">
                                 <td class="p-6">
@@ -150,15 +154,26 @@
                                 </td>
                                 <td class="p-6">
                                     <div class="flex flex-col gap-1">
-                                        <span class="text-[10px] font-black text-slate-600 uppercase">{{ $item->pic->name ?? 'System' }}</span>
+                                        <span class="text-[10px] font-black text-slate-600 uppercase">{{ $item->pic->name ?? 'Sistem' }}</span>
                                         <span class="text-[9px] font-bold text-slate-400 italic">
-                                            <i class="far fa-calendar-alt mr-1"></i> {{ $dateValue ? \Carbon\Carbon::parse($dateValue)->format('d/m/Y') : 'DATE NOT SET' }}
+                                            {{-- PROTEKSI TANGGAL DI KOLOM STAFF & JADWAL --}}
+                                            <i class="far fa-calendar-alt mr-1"></i> 
+                                            @if($module === 'cats')
+                                                {{ $item->updated_at ? \Carbon\Carbon::parse($item->updated_at)->format('d/m/Y') : 'DATE NOT SET' }}
+                                            @else
+                                                {{ ($dateValue && strtotime($dateValue)) ? \Carbon\Carbon::parse($dateValue)->format('d/m/Y') : 'DATE NOT SET' }}
+                                            @endif
                                         </span>
                                     </div>
                                 </td>
                                 <td class="p-6 text-right">
-                                    @if(in_array($module, ['vaccine', 'deworming', 'flea', 'grooming']))
-                                        @if(empty($dateValue))
+                                    {{-- PROTEKSI TANGGAL DI KOLOM STATUS AKTIF --}}
+                                    @if($module === 'cats')
+                                        <span class="px-3 py-1.5 {{ $item->treatment_status == 1 ? 'bg-amber-100 text-amber-600' : 'bg-emerald-100 text-emerald-600' }} rounded-lg text-[8px] font-black uppercase">
+                                            {{ $item->treatment_status == 1 ? 'Perawatan' : 'Sehat' }}
+                                        </span>
+                                    @elseif(in_array($module, ['vaccine', 'deworming', 'flea', 'grooming']))
+                                        @if(empty($dateValue) || !strtotime($dateValue))
                                             <span class="px-3 py-1.5 bg-slate-100 text-slate-400 rounded-lg text-[8px] font-black uppercase">Date Not Set</span>
                                         @elseif(\Carbon\Carbon::parse($dateValue)->isPast())
                                             <span class="px-3 py-1.5 bg-rose-100 text-rose-600 rounded-lg text-[8px] font-black uppercase animate-pulse">Overdue</span>
@@ -168,17 +183,13 @@
                                             <span class="px-3 py-1.5 bg-emerald-100 text-emerald-600 rounded-lg text-[8px] font-black uppercase">Scheduled</span>
                                         @endif
                                     @elseif(in_array($module, ['medicine', 'food', 'supplies']))
-                                        @if(isset($item->expired_date) && \Carbon\Carbon::parse($item->expired_date)->isPast())
+                                        @if(!empty($item->expired_date) && strtotime($item->expired_date) && \Carbon\Carbon::parse($item->expired_date)->isPast())
                                             <span class="px-3 py-1.5 bg-rose-600 text-white rounded-lg text-[8px] font-black uppercase">Expired</span>
-                                        @elseif($item->qty < 5)
+                                        @elseif(isset($item->qty) && $item->qty < 5)
                                             <span class="px-3 py-1.5 bg-rose-100 text-rose-600 rounded-lg text-[8px] font-black uppercase">Low Stock</span>
                                         @else
                                             <span class="px-3 py-1.5 bg-slate-100 text-slate-500 rounded-lg text-[8px] font-black uppercase">Safe</span>
                                         @endif
-                                    @else
-                                        <span class="px-3 py-1.5 {{ $item->riwayat_sakit_terakhir ? 'bg-amber-100 text-amber-600' : 'bg-emerald-100 text-emerald-600' }} rounded-lg text-[8px] font-black uppercase">
-                                            {{ $item->riwayat_sakit_terakhir ? 'Treatment' : 'Healthy' }}
-                                        </span>
                                     @endif
                                 </td>
                             </tr>

resources/views/pages/reports/matting/index.blade.php

@@ -4,10 +4,10 @@
         {{-- 1. HEADER --}}
         <div class="flex flex-col lg:flex-row items-center justify-between gap-6">
             <div class="text-center lg:text-left">
-                <h2 class="text-2xl font-black text-slate-900 uppercase tracking-tighter leading-none">Lineage Archive</h2>
+                <h2 class="text-2xl font-black text-slate-900 uppercase tracking-tighter leading-none">Lineage Arsip</h2>
                 <div class="flex items-center justify-center lg:justify-start gap-2 mt-2">
                     <span class="w-8 h-0.5 bg-indigo-600"></span>
-                    <p class="text-[10px] text-slate-400 font-bold uppercase tracking-[0.2em]">Official Breeding Database</p>
+                    <p class="text-[10px] text-slate-400 font-bold uppercase tracking-[0.2em]">Basis Data Pembiakan Resmi</p>
                 </div>
             </div>
 
@@ -69,10 +69,10 @@
         <div class="space-y-4">
             {{-- Legend Header --}}
             <div class="hidden lg:grid grid-cols-12 px-10 py-1 text-[9px] font-black text-slate-400 uppercase tracking-[0.2em]">
-                <div class="col-span-5">Breeding Partnership</div>
+                <div class="col-span-5">Pasangan Induk</div>
                 <div class="col-span-3 text-center">Record Statistics</div>
                 <div class="col-span-2 text-center">Registrar PIC</div>
-                <div class="col-span-2 text-right">Access</div>
+                <div class="col-span-2 text-right">Akses</div>
             </div>
 
             @forelse($mattings as $matting)
@@ -120,7 +120,7 @@
                     <div class="lg:col-span-2 flex flex-col items-center lg:items-start px-4 min-w-0">
                         <p class="text-[8px] text-slate-400 font-black uppercase mb-1.5 tracking-widest">Registrar</p>
                         <p class="text-[11px] font-bold text-slate-600 uppercase italic truncate w-full text-center lg:text-left tracking-tight">
-                            {{ $matting->pic->name ?? 'System Admin' }}
+                            {{ $matting->pic->name ?? 'Sistem Admin' }}
                         </p>
                     </div>
 

resources/views/pages/reports/matting/pdf.blade.php

@@ -33,8 +33,8 @@
 </head>
 <body>
     <div class="header">
-        <h1>ILY CATTERY - STRATEGIC BREEDING REPORT</h1>
-        <p>PARENTAL LINEAGE & ANALYTICS REPORT</p>
+        <h1>ILY CATTERY - LAPORAN PEMBIAKAN</h1>
+        <p>LAPORAN SILSILAH INDUK</p>
     </div>
 
     <table class="meta">
@@ -44,7 +44,7 @@
         </tr>
         <tr>
             <td>TOTAL DATA: {{ count($data) }} RECORDS</td>
-            <td style="text-align: right">SISTEM: ILYCATS MANAGEMENT UNIT</td>
+            <td style="text-align: right">SISTEM: SISTEM ILYCATS</td>
         </tr>
     </table>
 
@@ -131,7 +131,7 @@
     </table>
 
     <div style="margin-top: 30px; font-size: 7px; text-align: center; color: #94a3b8;">
-        Laporan ini dihasilkan secara otomatis oleh IlyCats Management System. Segala data silsilah telah diverifikasi sesuai standar Registry (ICA/CFA/WCF).
+        Laporan ini dihasilkan secara otomatis oleh IlyCats Management Sistem. Segala data silsilah telah diverifikasi sesuai standar Registry (ICA/CFA/WCF).
     </div>
 </body>
 </html>

resources/views/pages/reports/matting/show.blade.php

@@ -11,7 +11,7 @@
                 </a>
                 <div class="h-8 w-px bg-slate-100"></div>
                 <div>
-                    <h2 class="text-[14px] font-black text-slate-800 uppercase tracking-tighter leading-none">Lineage Archive</h2>
+                    <h2 class="text-[14px] font-black text-slate-800 uppercase tracking-tighter leading-none">Lineage Arsip</h2>
                     <p class="text-[8px] text-slate-400 font-bold uppercase tracking-[0.3em] mt-1.5 italic">Official Record #{{ $matting->id }}</p>
                 </div>
             </div>

resources/views/pages/reports/medical_history.blade.php

@@ -0,0 +1,161 @@
+{{-- resources/views/pages/reports/medical_history.blade.php --}}
+<div style="font-family: Helvetica, Arial, sans-serif; color: #334155;">
+    {{-- Header Utama --}}
+    <div style="text-align: center; border-bottom: 2px solid #4f46e5; padding-bottom: 15px; margin-bottom: 20px;">
+        <h1 style="margin:0; font-size: 24px; color: #0f172a; letter-spacing: 1px;">LAPORAN KESEHATAN: {{ strtoupper($cat->nama_kucing) }}</h1>
+        <p style="margin:5px 0; font-size: 10px; color: #64748b; letter-spacing: 2px;">SISTEM MANAJEMEN ILY AREGAU CATTERY</p>
+    </div>
+
+    {{-- Document Metadata (Informasi Unduh & Total Record) --}}
+    <div style="background-color: #f8fafc; border: 1px solid #e2e8f0; padding: 15px; margin-bottom: 30px; border-radius: 8px; font-size: 11px;">
+        <table style="width: 100%; border-collapse: collapse;">
+            <tr>
+                <td style="width: 50%; vertical-align: top;">
+                    <p style="margin: 4px 0;"><strong style="color: #4f46e5;">Cat Name:</strong> {{ $cat->nama_kucing }}</p>
+                    <p style="margin: 4px 0;"><strong style="color: #4f46e5;">Breed / Gender:</strong> {{ $cat->ras }} / {{ $cat->jenis_kelamin }}</p>
+                    <p style="margin: 4px 0;"><strong style="color: #4f46e5;">Microchip:</strong> {{ $cat->microchip ?? 'Unchipped' }}</p>
+                </td>
+                <td style="width: 50%; vertical-align: top; text-align: right;">
+                    <p style="margin: 4px 0;"><strong style="color: #4f46e5;">Dicetak oleh:</strong> {{ auth()->user()->name ?? 'Sistem Administrator' }}</p>
+                    <p style="margin: 4px 0;"><strong style="color: #4f46e5;">Timestamp:</strong> {{ \Carbon\Carbon::now()->translatedFormat('d F Y, H:i') }} WIB</p>
+                    {{-- FIX: Menambahkan Klinis Log ke dalam Judul Metadata --}}
+                    <p style="margin: 4px 0;">
+                        <strong style="color: #4f46e5;">Summary Records:</strong> <br>
+                        {{ $cat->medicalRecords->count() }} Catatan rutin • 
+                        <span style="color: #e11d48; font-weight: bold;">{{ $cat->treatments->count() }} Klinis Log</span> • 
+                        {{ $cat->weightHistories->count() }} Berat Log
+                    </p>
+                </td>
+            </tr>
+        </table>
+    </div>
+
+    {{-- SECTION 1: ROUTINE MEDICAL LEDGER (Vaksin, Obat Cacing, dll) --}}
+    @foreach(['Vaccine', 'Deworming', 'Flea Perawatan', 'Grooming'] as $type)
+        @php $records = $cat->medicalRecords->where('type', $type)->sortByDesc('date_given'); @endphp
+        
+        <div style="margin-top: 25px;">
+            <div style="background: #e0e7ff; padding: 8px 12px; border-left: 4px solid #4f46e5; font-weight: bold; font-size: 11px; margin-bottom: 8px; color: #3730a3;">
+                {{ strtoupper($type) }} HISTORY ({{ $records->count() }} Data)
+            </div>
+            <table style="width: 100%; border-collapse: collapse; font-size: 10px;">
+                <thead>
+                    <tr style="background: #4f46e5; color: white;">
+                        <th style="padding: 8px; text-align: left; border: 1px solid #4f46e5; width: 15%;">DATE GIVEN</th>
+                        <th style="padding: 8px; text-align: left; border: 1px solid #4f46e5; width: 30%;">PRODUCT / TREATMENT</th>
+                        <th style="padding: 8px; text-align: left; border: 1px solid #4f46e5; width: 40%;">NOTES</th>
+                        <th style="padding: 8px; text-align: center; border: 1px solid #4f46e5; width: 15%;">NEXT SCHEDULE</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    @forelse($records as $r)
+                    <tr style="background: {{ $loop->even ? '#f8fafc' : '#ffffff' }};">
+                        <td style="padding: 8px; border: 1px solid #e2e8f0;">{{ $r->date_given->format('d/m/Y') }}</td>
+                        <td style="padding: 8px; border: 1px solid #e2e8f0; font-weight: bold;">
+                            {{ $r->treatment_name }}
+                            @if($r->dosage) <br><span style="font-size: 8px; color: #059669; font-weight: normal;">Dose: {{ $r->dosage }} {{ $r->unit }}</span> @endif
+                        </td>
+                        <td style="padding: 8px; border: 1px solid #e2e8f0; font-style: italic;">{{ $r->notes ?? '-' }}</td>
+                        <td style="padding: 8px; border: 1px solid #e2e8f0; text-align: center;">{{ $r->next_schedule?->format('d/m/Y') ?? '-' }}</td>
+                    </tr>
+                    @empty
+                    <tr><td colspan="4" style="padding: 10px; text-align: center; color: #94a3b8; border: 1px solid #e2e8f0;">No routine records.</td></tr>
+                    @endforelse
+                </tbody>
+            </table>
+        </div>
+    @endforeach
+
+    {{-- SECTION 2: CLINICAL CASE HISTORY (Data Perawatan) --}}
+    <div style="margin-top: 35px;">
+        <div style="background: #fff1f2; padding: 8px 12px; border-left: 4px solid #e11d48; font-weight: bold; font-size: 11px; margin-bottom: 8px; color: #9f1239;">
+            CLINICAL CASE & TREATMENT HISTORY ({{ $cat->treatments->count() }} Data)
+        </div>
+        <table style="width: 100%; border-collapse: collapse; font-size: 10px;">
+            <thead>
+                <tr style="background: #e11d48; color: white;">
+                    <th style="padding: 8px; text-align: left; border: 1px solid #e11d48; width: 15%;">DATE</th>
+                    <th style="padding: 8px; text-align: left; border: 1px solid #e11d48; width: 25%;">DIAGNOSIS / KELUHAN</th>
+                    <th style="padding: 8px; text-align: left; border: 1px solid #e11d48; width: 25%;">THERAPY (MEDICINE)</th>
+                    <th style="padding: 8px; text-align: left; border: 1px solid #e11d48; width: 35%;">STATUS & RESOLUTION</th>
+                </tr>
+            </thead>
+            <tbody>
+                @forelse($cat->treatments->sortByDesc('tanggal') as $t)
+                <tr style="background: {{ $loop->even ? '#fff1f2' : '#ffffff' }}; vertical-align: top;">
+                    <td style="padding: 8px; border: 1px solid #fecdd3;">{{ $t->tanggal->format('d/m/Y') }}</td>
+                    <td style="padding: 8px; border: 1px solid #fecdd3;">
+                        <strong style="color: #be123c;">{{ $t->keluhan }}</strong><br>
+                        <span style="font-size: 9px; color: #64748b;">{{ $t->diagnosa }}</span>
+                    </td>
+                    <td style="padding: 8px; border: 1px solid #fecdd3;">
+                        {{-- Menggunakan relasi medicine atau nama kolom asli sesuai database --}}
+                        <strong>{{ $t->nama_obat ?? ($t->medicine ? $t->medicine->nama_obat : '-') }}</strong><br>
+                        <span style="font-size: 9px;">Dosis/Qty: {{ $t->dosis ?? $t->qty_used }}</span>
+                    </td>
+                    <td style="padding: 8px; border: 1px solid #fecdd3;">
+                        {{-- BLOK BARU: STATUS DAN REMARK PASCA SAKIT --}}
+                        @if($t->status_perawatan == 2)
+                            <div style="color: #059669; font-weight: bold; margin-bottom: 4px;">✓ RESOLVED (SEMBUH)</div>
+                            @if($t->remark_pasca_sakit)
+                                <div style="font-style: italic; font-size: 9px; color: #475569;">
+                                    "{{ $t->remark_pasca_sakit }}"
+                                </div>
+                            @endif
+                        @else
+                            <div style="color: #e11d48; font-weight: bold; margin-bottom: 4px;">⚠ ONGOING TREATMENT</div>
+                        @endif
+
+                        @if($t->keterangan)
+                            <div style="margin-top: 6px; font-size: 9px; border-top: 1px dashed #fecdd3; padding-top: 4px;">
+                                <strong style="color: #94a3b8;">Initial Notes:</strong> {{ $t->keterangan }}
+                            </div>
+                        @endif
+                    </td>
+                </tr>
+                @empty
+                <tr><td colspan="4" style="padding: 10px; text-align: center; color: #94a3b8; border: 1px solid #fecdd3;">No clinical cases found.</td></tr>
+                @endforelse
+            </tbody>
+        </table>
+    </div>
+
+    {{-- SECTION 3: WEIGHT HISTORY --}}
+    @if($cat->weightHistories->count() > 0)
+    <div style="page-break-before: auto; margin-top: 35px;">
+        <div style="background: #ecfdf5; padding: 8px 12px; border-left: 4px solid #10b981; font-weight: bold; font-size: 11px; margin-bottom: 8px; color: #065f46;">
+            GROWTH & WEIGHT DALAM PROSES ({{ $cat->weightHistories->count() }} Data)
+        </div>
+        <table style="width: 100%; border-collapse: collapse; font-size: 10px;">
+            <thead>
+                <tr style="background: #10b981; color: white;">
+                    <th style="padding: 8px; text-align: left; border: 1px solid #10b981;">DATE RECORDED</th>
+                    <th style="padding: 8px; text-align: center; border: 1px solid #10b981;">WEIGHT (KG)</th>
+                    <th style="padding: 8px; text-align: center; border: 1px solid #10b981;">PROGRESSION</th>
+                </tr>
+            </thead>
+            <tbody>
+                @php $wLogs = $cat->weightHistories->sortByDesc('created_at')->values(); @endphp
+                @foreach($wLogs as $index => $weight)
+                    @php
+                        $trend = '-';
+                        $trendColor = '#64748b';
+                        if (isset($wLogs[$index + 1])) {
+                            $prev = (float)$wLogs[$index + 1]->berat;
+                            $curr = (float)$weight->berat;
+                            if ($curr > $prev) { $trend = 'Naik'; $trendColor = '#059669'; }
+                            elseif ($curr < $prev) { $trend = 'Turun'; $trendColor = '#e11d48'; }
+                            else { $trend = 'Stable'; }
+                        }
+                    @endphp
+                    <tr style="background: {{ $loop->even ? '#ecfdf5' : '#ffffff' }};">
+                        <td style="padding: 8px; border: 1px solid #d1fae5;">{{ $weight->created_at->format('d M Y, H:i') }}</td>
+                        <td style="padding: 8px; border: 1px solid #d1fae5; text-align: center; font-weight: bold;">{{ $weight->berat }} Kg</td>
+                        <td style="padding: 8px; border: 1px solid #d1fae5; text-align: center; font-weight: bold; color: {{ $trendColor }};">{{ $trend }}</td>
+                    </tr>
+                @endforeach
+            </tbody>
+        </table>
+    </div>
+    @endif
+</div>

resources/views/pages/reports/pdf_template.blade.php

@@ -28,7 +28,7 @@
 <body>
 
     <div class="header">
-        <h1>ILY CATTERY - INTELLIGENCE REPORT</h1>
+        <h1>ILY CATTERY - LAPORAN</h1>
         <p>MODUL: {{ strtoupper($module) }} | UNIT ANALYTICS SYSTEM</p>
     </div>
 
@@ -87,7 +87,7 @@
                         <td>{{ $item->tanggal_lahir ? \Carbon\Carbon::parse($item->tanggal_lahir)->format('d/m/Y') : '-' }}</td>
                         <td>
                             <span class="badge {{ $item->riwayat_sakit_terakhir ? 'bg-amber' : 'bg-green' }}">
-                                {{ $item->riwayat_sakit_terakhir ? 'In Treatment' : 'Healthy' }}
+                                {{ $item->riwayat_sakit_terakhir ? 'In Perawatan' : 'Sehat' }}
                             </span>
                         </td>
 
@@ -133,7 +133,7 @@
     </table>
 
     <div class="footer">
-        Ily Cattery Intelligence System - Dokumen Sah Dihasilkan Secara Otomatis
+        Ily Cattery Informasi Sistem - Dokumen Sah Dihasilkan Secara Otomatis
     </div>
 
 </body>

resources/views/pages/treatments/create.blade.php

@@ -1,118 +1,224 @@
 <x-app-layout>
-    <div class="max-w-4xl mx-auto space-y-6 pb-12">
-        <div class="flex items-center gap-4">
-            <a href="{{ url()->previous() }}" class="p-3 bg-white border border-slate-200 rounded-2xl text-slate-400 hover:text-indigo-600 transition-all shadow-sm active:scale-90">
-                <i class="fas fa-arrow-left"></i>
-            </a>
-            <div>
-                <h2 class="text-2xl font-black text-slate-800 tracking-tight">Tambah Rekam Medis</h2>
-                <p class="text-sm text-slate-500 font-medium italic uppercase tracking-tighter">Pemeriksaan & Pemberian Obat Pasien</p>
+    <div class="max-w-5xl mx-auto space-y-6 pb-12" x-data="treatmentForm()">
+        {{-- HEADER --}}
+        <div class="flex items-center justify-between gap-4">
+            <div class="flex items-center gap-4">
+                <a href="{{ url()->previous() }}" class="p-3 bg-white border border-slate-200 rounded-2xl text-slate-400 hover:text-indigo-600 transition-all shadow-sm active:scale-90">
+                    <i class="fas fa-arrow-left"></i>
+                </a>
+                <div>
+                    <h2 class="text-2xl font-black text-slate-800 tracking-tight">Tambah Rekam Medis</h2>
+                    <p class="text-sm text-slate-500 font-medium italic uppercase tracking-tighter">Pemeriksaan & Pemberian Obat Pasien (Multi-Obat Support)</p>
+                </div>
             </div>
         </div>
 
+        {{-- GLOBAL ERROR BANNER --}}
+        @if ($errors->any())
+        <div class="bg-rose-50 border border-rose-200 rounded-2xl p-6 flex items-start gap-4">
+            <div class="w-10 h-10 bg-rose-100 text-rose-500 rounded-xl flex items-center justify-center shrink-0">
+                <i class="fas fa-exclamation-triangle"></i>
+            </div>
+            <div>
+                <h4 class="text-xs font-black text-rose-600 uppercase tracking-widest mb-1">Gagal Menyimpan Data</h4>
+                <ul class="text-[11px] text-rose-500 font-bold list-disc list-inside space-y-1">
+                    @foreach ($errors->all() as $error)
+                        <li>{{ $error }}</li>
+                    @endforeach
+                </ul>
+            </div>
+        </div>
+        @endif
+
         <form action="{{ route('treatments.store') }}" method="POST" enctype="multipart/form-data" class="space-y-6">
             @csrf
             
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-                <div class="bg-white border border-slate-200 rounded-[2.5rem] p-8 shadow-sm space-y-6">
-                    <h4 class="text-xs font-black text-indigo-600 uppercase tracking-widest border-b border-slate-100 pb-3">Data Pasien</h4>
-                    
-                    <div class="space-y-4">
-                        <div class="space-y-2">
-                            <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Pilih Pasien</label>
-                            <select name="cat_id" required class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-bold text-slate-800 focus:ring-2 focus:ring-indigo-500 transition-all">
-                                @foreach($cats as $cat)
-                                    <option value="{{ $cat->id }}" {{ ($selectedCat && $selectedCat->id == $cat->id) || old('cat_id') == $cat->id ? 'selected' : '' }}>
-                                        {{ $cat->nama_kucing }} ({{ $cat->ras }})
-                                    </option>
-                                @endforeach
-                            </select>
-                        </div>
-                        <div class="space-y-2">
-                            <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Tanggal Pemeriksaan</label>
-                            <input type="date" name="tanggal" value="{{ date('Y-m-d') }}" required class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-bold focus:ring-2 focus:ring-indigo-500 transition-all">
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+                {{-- LEFT COLUMN: DATA PASIEN --}}
+                <div class="lg:col-span-1 space-y-6">
+                    <div class="bg-white border border-slate-200 rounded-[2.5rem] p-6 shadow-sm space-y-6">
+                        <h4 class="text-xs font-black text-indigo-600 uppercase tracking-widest border-b border-slate-100 pb-3">Data Pasien</h4>
+                        
+                        <div class="space-y-4">
+                            <div class="space-y-2">
+                                <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Pilih Pasien</label>
+                                <select name="cat_id" required class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-bold text-slate-800 focus:ring-2 focus:ring-indigo-500 transition-all">
+                                    <option value="" disabled selected>-- Pilih Pasien --</option>
+                                    @foreach($cats as $cat)
+                                        <option value="{{ $cat->id }}" {{ ($selectedCat && $selectedCat->id == $cat->id) || old('cat_id') == $cat->id ? 'selected' : '' }}>
+                                            {{ $cat->nama_kucing }} ({{ $cat->ras }})
+                                        </option>
+                                    @endforeach
+                                </select>
+                            </div>
+                            <div class="space-y-2">
+                                <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Tanggal Pemeriksaan</label>
+                                <input type="date" name="tanggal" value="{{ old('tanggal', date('Y-m-d')) }}" required class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-bold focus:ring-2 focus:ring-indigo-500 transition-all">
+                            </div>
+                            <div class="space-y-2">
+                                <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Foto Bukti / Kondisi (Opsional)</label>
+                                <input type="file" name="foto_bukti" class="w-full text-xs font-bold text-slate-400 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-[10px] file:font-black file:bg-indigo-50 file:text-indigo-600 hover:file:bg-indigo-100 transition-all">
+                            </div>
                         </div>
                     </div>
                 </div>
 
-                <div class="bg-white border border-slate-200 rounded-[2.5rem] p-8 shadow-sm space-y-6">
-                    <h4 class="text-xs font-black text-emerald-600 uppercase tracking-widest border-b border-slate-100 pb-3">Inventori & Dosis</h4>
-                    
-                    <div class="space-y-4">
-                        <div class="space-y-2">
-                            <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Pilih Obat (Stok)</label>
-                            <select name="medicine_id" id="medicine_select" required class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-bold focus:ring-2 focus:ring-emerald-500 transition-all">
-                                <option value="" disabled selected>-- Pilih Obat --</option>
-                                @foreach($medicines as $med)
-                                    <option value="{{ $med->id }}" data-unit="{{ $med->unit }}" {{ old('medicine_id') == $med->id ? 'selected' : '' }}>
-                                        {{ $med->nama_obat }} (Tersedia: {{ (float)$med->qty }} {{ $med->unit }})
-                                    </option>
-                                @endforeach
-                            </select>
-                        </div>
-                        <div class="grid grid-cols-2 gap-4">
+                {{-- RIGHT COLUMN: HASIL PEMERIKSAAN --}}
+                <div class="lg:col-span-2 space-y-6">
+                    <div class="bg-white border border-slate-200 rounded-[2.5rem] p-8 shadow-sm space-y-6">
+                        <h4 class="text-xs font-black text-rose-600 uppercase tracking-widest border-b border-slate-100 pb-3">Diagnosa Klinik</h4>
+                        
+                        <div class="space-y-4">
                             <div class="space-y-2">
-                                <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Jumlah Potong Stok</label>
+                                <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Keluhan Utama</label>
+                                <input type="text" name="keluhan" value="{{ old('keluhan') }}" required placeholder="Contoh: Flu berat, Nafsu makan turun" class="w-full px-4 py-3 bg-slate-50 border {{ $errors->has('keluhan') ? 'border-rose-500 ring-1 ring-rose-500' : 'border-slate-200' }} rounded-2xl text-sm font-bold focus:ring-2 focus:ring-rose-500 transition-all">
+                            </div>
+                            <div class="space-y-2">
+                                <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Hasil Diagnosa & Tindakan</label>
+                                <textarea name="diagnosa" rows="3" required placeholder="Tulis diagnosa dokter/staf dan tindakan yang diambil..." class="w-full px-4 py-3 bg-slate-50 border {{ $errors->has('diagnosa') ? 'border-rose-500 ring-1 ring-rose-500' : 'border-slate-200' }} rounded-2xl text-sm font-bold focus:ring-2 focus:ring-rose-500 transition-all">{{ old('diagnosa') }}</textarea>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            {{-- MULTI MEDICINE SECTION --}}
+            <div class="bg-white border border-slate-200 rounded-[2.5rem] p-8 shadow-sm space-y-6">
+                <div class="flex items-center justify-between border-b border-slate-100 pb-4">
+                    <h4 class="text-xs font-black text-emerald-600 uppercase tracking-widest">Resep Obat & Penggunaan Stok</h4>
+                    <button type="button" @click="addObat" class="px-4 py-2 bg-emerald-50 text-emerald-600 text-[10px] font-black rounded-xl hover:bg-emerald-600 hover:text-white transition-all flex items-center gap-2">
+                        <i class="fas fa-plus"></i> TAMBAH OBAT
+                    </button>
+                </div>
+
+                <div class="space-y-4">
+                    {{-- Header Table --}}
+                    <div class="hidden md:grid grid-cols-12 gap-4 px-4 text-[9px] font-black text-slate-400 uppercase tracking-widest">
+                        <div class="col-span-4">Nama Obat (Stok Tersedia)</div>
+                        <div class="col-span-2 text-center">Jumlah Stok</div>
+                        <!-- <div class="col-span-2 text-center">Dosis</div>
+                        <div class="col-span-3">Keterangan Pakai</div> -->
+                        <div class="col-span-1"></div>
+                    </div>
+
+                    {{-- Loop Baris Obat (AlpineJS) --}}
+                    <template x-for="(item, index) in items" :key="index">
+                        <div class="grid grid-cols-1 md:grid-cols-12 gap-3 bg-slate-50 p-4 md:p-2 rounded-2xl items-center border border-slate-100 transition-all">
+                            {{-- Pilih Obat --}}
+                            <div class="col-span-1 md:col-span-4">
+                                <label class="md:hidden text-[9px] font-black text-slate-400 uppercase">Obat</label>
+                                <select :name="`items[${index}][medicine_id]`" 
+                                        x-model="item.medicine_id"
+                                        @change="updateUnit(index, $event)"
+                                        required 
+                                        class="w-full px-3 py-2 bg-white border border-slate-200 rounded-xl text-xs font-bold focus:ring-emerald-500">
+                                    <option value="">-- Pilih Obat --</option>
+                                    @foreach($medicines as $med)
+                                        <option value="{{ $med->id }}" data-unit="{{ $med->unit }}" data-stock="{{ (float)$med->qty }}">
+                                            {{ $med->nama_obat }} ({{ (float)$med->qty }} {{ $med->unit }})
+                                        </option>
+                                    @endforeach
+                                </select>
+                            </div>
+
+                            {{-- Qty Used --}}
+                            <div class="col-span-1 md:col-span-2">
+                                <label class="md:hidden text-[9px] font-black text-slate-400 uppercase">Qty Potong Stok</label>
                                 <div class="relative">
-                                    <input type="number" name="qty_used" id="qty_input" value="{{ old('qty_used', 1) }}" step="0.01" min="0.01" required class="w-full pl-4 pr-14 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-black text-slate-800">
-                                    <span id="unit_label" class="absolute right-4 top-1/2 -translate-y-1/2 text-[9px] font-black text-slate-400 uppercase">UNIT</span>
+                                    <input type="number" :name="`items[${index}][qty_used]`" x-model="item.qty_used" step="0.01" required 
+                                           class="w-full pl-3 pr-10 py-2 bg-white border border-slate-200 rounded-xl text-xs font-black">
+                                    <span class="absolute right-3 top-1/2 -translate-y-1/2 text-[8px] font-black text-slate-300" x-text="item.unit"></span>
                                 </div>
                             </div>
-                            <div class="space-y-2">
-                                <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Dosis (cc/butir)</label>
-                                <input type="text" name="dosis" value="{{ old('dosis') }}" placeholder="Contoh: 0.5cc" required class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-bold focus:ring-2 focus:ring-emerald-500 transition-all">
+
+                            {{-- Dosis --}}
+                            <!-- <div class="col-span-1 md:col-span-2">
+                                <label class="md:hidden text-[9px] font-black text-slate-400 uppercase">Dosis</label>
+                                <input type="text" :name="`items[${index}][dosis]`" x-model="item.dosis" required placeholder="0.5 cc / 1 tablet" 
+                                       class="w-full px-3 py-2 bg-white border border-slate-200 rounded-xl text-xs font-bold">
+                            </div> -->
+
+                            {{-- Keterangan --}}
+                            <!-- <div class="col-span-1 md:col-span-3">
+                                <label class="md:hidden text-[9px] font-black text-slate-400 uppercase">Ket</label>
+                                <input type="text" :name="`items[${index}][keterangan]`" x-model="item.keterangan" placeholder="Oral / Campur Wetfood" 
+                                       class="w-full px-3 py-2 bg-white border border-slate-200 rounded-xl text-xs font-bold">
+                            </div> -->
+
+                            {{-- Tombol Hapus --}}
+                            <div class="col-span-1 md:col-span-1 text-center mt-2 md:mt-0">
+                                <button type="button" @click="removeItem(index)" x-show="items.length > 1" class="w-8 h-8 inline-flex items-center justify-center bg-rose-50 text-rose-500 rounded-lg hover:bg-rose-500 hover:text-white transition-all">
+                                    <i class="fas fa-times text-xs"></i>
+                                </button>
                             </div>
                         </div>
-                        <p class="text-[9px] text-slate-400 italic px-1 leading-tight">* Gunakan titik (.) untuk desimal, contoh: 2.5</p>
+                    </template>
+                    
+                    <div class="bg-amber-50 border border-amber-100 rounded-2xl p-4 flex items-start gap-3">
+                        <i class="fas fa-info-circle text-amber-500 mt-1"></i>
+                        <div>
+                            <p class="text-[10px] text-amber-800 font-bold leading-tight">Gunakan titik (.) untuk angka desimal. Pastikan jumlah potong stok tidak melebihi stok tersedia untuk menghindari error sistem.</p>
+                        </div>
                     </div>
                 </div>
             </div>
 
-            <div class="bg-white border border-slate-200 rounded-[2.5rem] p-8 shadow-sm space-y-6">
-                <h4 class="text-xs font-black text-rose-600 uppercase tracking-widest border-b border-slate-100 pb-3">Hasil Pemeriksaan</h4>
-                
-                <div class="space-y-4">
-                    <div class="space-y-2">
-                        <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Keluhan Utama</label>
-                        <input type="text" name="keluhan" value="{{ old('keluhan') }}" required placeholder="Contoh: Mata berair dan bersin" class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-bold focus:ring-2 focus:ring-rose-500 transition-all">
-                    </div>
-                    <div class="space-y-2">
-                        <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Diagnosa & Tindakan</label>
-                        <textarea name="diagnosa" rows="4" required class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-bold focus:ring-2 focus:ring-rose-500 transition-all">{{ old('diagnosa') }}</textarea>
-                    </div>
-                    <div class="space-y-2">
-                        <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Keterangan Tambahan (Opsional)</label>
-                        <textarea name="keterangan" rows="2" class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-medium italic">{{ old('keterangan') }}</textarea>
-                    </div>
-                </div>
-            </div>
-
-            <button type="submit" class="w-full py-5 bg-indigo-600 text-white text-sm font-black rounded-3xl shadow-xl hover:bg-indigo-700 transition-all active:scale-[0.98] flex items-center justify-center gap-2">
-                <i class="fas fa-save"></i> SIMPAN REKAM MEDIS & UPDATE STOK
+            <button type="submit" class="w-full py-5 bg-slate-900 text-white text-sm font-black rounded-3xl shadow-xl hover:bg-indigo-700 transition-all active:scale-[0.98] flex items-center justify-center gap-2">
+                <i class="fas fa-save"></i> SIMPAN REKAM MEDIS & UPDATE SEMUA STOK
             </button>
         </form>
     </div>
 
     @push('scripts')
+    <script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
     <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const medicineSelect = document.getElementById('medicine_select');
-            const unitLabel = document.getElementById('unit_label');
+        document.addEventListener('alpine:init', () => {
+            Alpine.data('treatmentForm', () => ({
+                // Membaca input lama jika validasi form gagal, agar baris obat tidak hilang
+                init() {
+                    const oldItems = @json(old('items', []));
+                    if (oldItems.length > 0) {
+                        this.items = oldItems.map(item => ({
+                            medicine_id: item.medicine_id || '',
+                            qty_used: item.qty_used || 1,
+                            unit: 'UNIT', // Akan diupdate oleh user
+                            dosis: item.dosis || '',
+                            keterangan: item.keterangan || ''
+                        }));
+                    }
+                },
+                
+                items: [{
+                    medicine_id: '',
+                    qty_used: 1,
+                    unit: 'UNIT',
+                    dosis: '',
+                    keterangan: ''
+                }],
 
-            function updateUnit() {
-                const selectedOption = medicineSelect.options[medicineSelect.selectedIndex];
-                const unit = selectedOption.getAttribute('data-unit');
-                unitLabel.textContent = unit ? unit : 'UNIT';
-            }
+                addObat() {
+                    this.items.push({
+                        medicine_id: '',
+                        qty_used: 1,
+                        unit: 'UNIT',
+                        dosis: '',
+                        keterangan: ''
+                    });
+                },
 
-            // Update label saat pilihan berubah
-            medicineSelect.addEventListener('change', updateUnit);
+                removeItem(index) {
+                    this.items.splice(index, 1);
+                },
 
-            // Update label saat halaman dimuat (jika ada nilai 'old')
-            if (medicineSelect.value) {
-                updateUnit();
-            }
-        });
+                // Menggunakan event.target lebih aman dari querySelectorAll
+                updateUnit(index, event) {
+                    const select = event.target;
+                    const selectedOption = select.options[select.selectedIndex];
+                    const unit = selectedOption.getAttribute('data-unit');
+                    this.items[index].unit = unit ? unit : 'UNIT';
+                }
+            }))
+        })
     </script>
     @endpush
 </x-app-layout>

resources/views/pages/treatments/edit.blade.php

@@ -1,128 +1,230 @@
 <x-app-layout>
-    <div class="max-w-4xl mx-auto space-y-6 pb-12">
+    <div class="max-w-5xl mx-auto space-y-6 pb-12" x-data="treatmentForm()">
+        {{-- HEADER --}}
         <div class="flex items-center gap-4">
             <a href="{{ route('treatments.index') }}" class="p-3 bg-white border border-slate-200 rounded-2xl text-slate-400 hover:text-indigo-600 transition-all shadow-sm active:scale-90">
                 <i class="fas fa-arrow-left"></i>
             </a>
             <div>
                 <h2 class="text-2xl font-black text-slate-800 tracking-tight">Edit Rekam Medis</h2>
-                <p class="text-sm text-slate-500 font-medium italic uppercase tracking-tighter">Memperbarui Catatan Medis & Dosis Obat</p>
+                <p class="text-sm text-slate-500 font-medium italic uppercase tracking-tighter">Memperbarui Catatan & Penyesuaian Multi-Obat</p>
             </div>
         </div>
 
+        {{-- ALERT INFORMASI STOK --}}
         <div class="p-4 bg-amber-50 border border-amber-100 rounded-2xl flex items-start gap-3">
-            <i class="fas fa-exclamation-triangle text-amber-500 mt-1"></i>
+            <i class="fas fa-sync-alt text-amber-500 mt-1 animate-spin-slow"></i>
             <div>
-                <p class="text-xs font-black text-amber-700 uppercase tracking-widest">Informasi Inventori</p>
-                <p class="text-[11px] text-amber-600 font-medium leading-relaxed">Mengubah jenis atau jumlah obat akan memicu sistem untuk mengembalikan stok lama dan memotong stok baru secara otomatis.</p>
+                <p class="text-xs font-black text-amber-700 uppercase tracking-widest">Sinkronisasi Inventori Otomatis</p>
+                <p class="text-[11px] text-amber-600 font-medium leading-relaxed">Sistem akan otomatis mengembalikan stok lama yang tercatat dan memotong stok baru berdasarkan perubahan yang Anda simpan di bawah ini.</p>
             </div>
         </div>
 
+        {{-- GLOBAL ERROR BANNER --}}
         @if ($errors->any())
-            <div class="p-4 bg-rose-50 border border-rose-100 rounded-2xl text-rose-600 text-[11px] font-bold">
-                <ul class="list-disc ml-4 uppercase tracking-widest">
+        <div class="bg-rose-50 border border-rose-200 rounded-2xl p-6 flex items-start gap-4">
+            <div class="w-10 h-10 bg-rose-100 text-rose-500 rounded-xl flex items-center justify-center shrink-0">
+                <i class="fas fa-exclamation-triangle"></i>
+            </div>
+            <div>
+                <h4 class="text-xs font-black text-rose-600 uppercase tracking-widest mb-1">Gagal Menyimpan Data</h4>
+                <ul class="text-[11px] text-rose-500 font-bold list-disc list-inside space-y-1">
                     @foreach ($errors->all() as $error)
                         <li>{{ $error }}</li>
                     @endforeach
                 </ul>
             </div>
+        </div>
         @endif
 
         <form action="{{ route('treatments.update', $treatment->id) }}" method="POST" enctype="multipart/form-data" class="space-y-6">
             @csrf 
             @method('PATCH')
             
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-                <div class="bg-white border border-slate-200 rounded-[2.5rem] p-8 shadow-sm space-y-6">
-                    <h4 class="text-xs font-black text-indigo-600 uppercase tracking-widest border-b border-slate-100 pb-3">Data Pasien</h4>
-                    
-                    <div class="space-y-4">
-                        <div class="space-y-2">
-                            <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Nama Pasien</label>
-                            <select name="cat_id" required class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-bold text-slate-800 focus:ring-2 focus:ring-indigo-500">
-                                @foreach($cats as $cat)
-                                    <option value="{{ $cat->id }}" {{ old('cat_id', $treatment->cat_id) == $cat->id ? 'selected' : '' }}>
-                                        {{ $cat->nama_kucing }} ({{ $cat->ras }})
-                                    </option>
-                                @endforeach
-                            </select>
-                        </div>
-                        <div class="space-y-2">
-                            <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Tanggal Pemeriksaan</label>
-                            <input type="date" name="tanggal" value="{{ old('tanggal', $treatment->tanggal->format('Y-m-d')) }}" required class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-bold focus:ring-2 focus:ring-indigo-500">
-                        </div>
-                    </div>
-                </div>
-
-                <div class="bg-white border border-slate-200 rounded-[2.5rem] p-8 shadow-sm space-y-6">
-                    <h4 class="text-xs font-black text-emerald-600 uppercase tracking-widest border-b border-slate-100 pb-3">Dosis & Stok</h4>
-                    
-                    <div class="space-y-4">
-                        <div class="space-y-2">
-                            <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Obat Digunakan</label>
-                            <select name="medicine_id" required class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-bold focus:ring-2 focus:ring-emerald-500">
-                                @foreach($medicines as $med)
-                                    <option value="{{ $med->id }}" {{ old('medicine_id', $treatment->medicine_id) == $med->id ? 'selected' : '' }}>
-                                        {{ $med->nama_obat }} (Stok: {{ $med->qty }} {{ $med->unit }})
-                                    </option>
-                                @endforeach
-                            </select>
-                        </div>
-                        <div class="grid grid-cols-2 gap-4">
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+                {{-- LEFT COLUMN: DATA PASIEN --}}
+                <div class="lg:col-span-1 space-y-6">
+                    <div class="bg-white border border-slate-200 rounded-[2.5rem] p-6 shadow-sm space-y-6">
+                        <h4 class="text-xs font-black text-indigo-600 uppercase tracking-widest border-b border-slate-100 pb-3">Data Pasien</h4>
+                        
+                        <div class="space-y-4">
                             <div class="space-y-2">
-                                <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Jumlah (Qty)</label>
-                                <input type="number" name="qty_used" value="{{ old('qty_used', $treatment->qty_used) }}" min="1" required class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-black text-slate-800">
+                                <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Pasien</label>
+                                <select name="cat_id" required class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-bold text-slate-800 focus:ring-2 focus:ring-indigo-500 transition-all">
+                                    @foreach($cats as $cat)
+                                        <option value="{{ $cat->id }}" {{ old('cat_id', $treatment->cat_id) == $cat->id ? 'selected' : '' }}>
+                                            {{ $cat->nama_kucing }} ({{ $cat->ras }})
+                                        </option>
+                                    @endforeach
+                                </select>
                             </div>
                             <div class="space-y-2">
-                                <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Dosis</label>
-                                <input type="text" name="dosis" value="{{ old('dosis', $treatment->dosis) }}" placeholder="Contoh: 1 tablet" required class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-bold text-slate-800">
+                                <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Tanggal Pemeriksaan</label>
+                                <input type="date" name="tanggal" value="{{ old('tanggal', $treatment->tanggal->format('Y-m-d')) }}" required class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-bold focus:ring-2 focus:ring-indigo-500 transition-all">
                             </div>
                         </div>
                     </div>
-                </div>
-            </div>
 
-            <div class="bg-white border border-slate-200 rounded-[2.5rem] p-8 shadow-sm space-y-6">
-                <h4 class="text-xs font-black text-rose-600 uppercase tracking-widest border-b border-slate-100 pb-3">Detail Pemeriksaan Medis</h4>
-                
-                <div class="space-y-4">
-                    <div class="space-y-2">
-                        <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Keluhan / Gejala</label>
-                        <input type="text" name="keluhan" value="{{ old('keluhan', $treatment->keluhan) }}" required class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-bold focus:ring-2 focus:ring-rose-500">
+                    {{-- PREVIEW FOTO --}}
+                    <div class="bg-white border border-slate-200 rounded-[2.5rem] p-6 shadow-sm space-y-4">
+                        <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Lampiran Foto Bukti</label>
+                        <div class="relative group">
+                            <div class="w-full h-48 rounded-3xl bg-slate-50 border-2 border-dashed border-slate-200 overflow-hidden shadow-inner flex items-center justify-center">
+                                <img id="preview" src="{{ $treatment->foto_bukti ? asset('storage/' . $treatment->foto_bukti) : 'https://ui-avatars.com/api/?name=No+Photo&background=f1f5f9&color=94a3b8' }}" class="w-full h-full object-cover">
+                            </div>
+                            <input type="file" name="foto_bukti" onchange="previewImage(event)" class="mt-3 w-full text-[10px] font-black text-slate-400 file:mr-3 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-[9px] file:font-black file:bg-indigo-50 file:text-indigo-600 hover:file:bg-indigo-100 cursor-pointer">
+                        </div>
                     </div>
-                    <div class="space-y-2">
-                        <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Diagnosa & Tindakan</label>
-                        <textarea name="diagnosa" rows="4" required class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-bold focus:ring-2 focus:ring-rose-500">{{ old('diagnosa', $treatment->diagnosa) }}</textarea>
+                </div>
+
+                {{-- RIGHT COLUMN: HASIL PEMERIKSAAN --}}
+                <div class="lg:col-span-2 space-y-6">
+                    <div class="bg-white border border-slate-200 rounded-[2.5rem] p-8 shadow-sm space-y-6">
+                        <h4 class="text-xs font-black text-rose-600 uppercase tracking-widest border-b border-slate-100 pb-3">Diagnosa Klinik</h4>
+                        
+                        <div class="space-y-4">
+                            <div class="space-y-2">
+                                <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Keluhan Utama</label>
+                                <input type="text" name="keluhan" value="{{ old('keluhan', $treatment->keluhan) }}" required class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-bold focus:ring-2 focus:ring-rose-500 transition-all">
+                            </div>
+                            <div class="space-y-2">
+                                <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Hasil Diagnosa & Tindakan</label>
+                                <textarea name="diagnosa" rows="4" required class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-bold focus:ring-2 focus:ring-rose-500 transition-all">{{ old('diagnosa', $treatment->diagnosa) }}</textarea>
+                            </div>
+                        </div>
                     </div>
-                    <div class="space-y-2">
-                        <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Keterangan Tambahan</label>
-                        <textarea name="keterangan" rows="2" class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-bold italic">{{ old('keterangan', $treatment->keterangan) }}</textarea>
+
+                    {{-- MULTI MEDICINE SECTION --}}
+                    <div class="bg-white border border-slate-200 rounded-[2.5rem] p-8 shadow-sm space-y-6">
+                        <div class="flex items-center justify-between border-b border-slate-100 pb-4">
+                            <h4 class="text-xs font-black text-emerald-600 uppercase tracking-widest">Penyesuaian Resep & Stok</h4>
+                            <button type="button" @click="addObat" class="px-4 py-2 bg-emerald-50 text-emerald-600 text-[10px] font-black rounded-xl hover:bg-emerald-600 hover:text-white transition-all flex items-center gap-2">
+                                <i class="fas fa-plus"></i> TAMBAH OBAT LAIN
+                            </button>
+                        </div>
+
+                        <div class="space-y-4">
+                            {{-- Header Table --}}
+                            <div class="hidden md:grid grid-cols-12 gap-4 px-4 text-[9px] font-black text-slate-400 uppercase tracking-widest">
+                                <div class="col-span-4">Nama Obat</div>
+                                <div class="col-span-2 text-center">Jumlah</div>
+                                <div class="col-span-1"></div>
+                            </div>
+
+                            {{-- Loop Baris Obat (Alpine.js) --}}
+                            <template x-for="(item, index) in items" :key="index">
+                                <div class="grid grid-cols-1 md:grid-cols-12 gap-3 bg-slate-50 p-4 md:p-2 rounded-2xl items-center border border-slate-100 transition-all">
+                                    {{-- Pilih Obat --}}
+                                    <div class="col-span-1 md:col-span-4">
+                                        <label class="md:hidden text-[9px] font-black text-slate-400 uppercase tracking-widest mb-1 block">Obat</label>
+                                        <select :name="`items[${index}][medicine_id]`" 
+                                                x-model="item.medicine_id"
+                                                @change="updateUnit(index)"
+                                                required 
+                                                class="w-full px-3 py-2 bg-white border border-slate-200 rounded-xl text-xs font-bold focus:ring-emerald-500">
+                                            <option value="">-- Pilih --</option>
+                                            @foreach($medicines as $med)
+                                                <option value="{{ $med->id }}" data-unit="{{ $med->unit }}">
+                                                    {{ $med->nama_obat }} (Stok: {{ (float)$med->qty }} {{ $med->unit }})
+                                                </option>
+                                            @endforeach
+                                        </select>
+                                    </div>
+
+                                    {{-- Qty Used --}}
+                                    <div class="col-span-1 md:col-span-2">
+                                        <label class="md:hidden text-[9px] font-black text-slate-400 uppercase tracking-widest mb-1 block">Qty Potong Stok</label>
+                                        <div class="relative">
+                                            <input type="number" :name="`items[${index}][qty_used]`" x-model="item.qty_used" step="0.01" required 
+                                                   class="w-full pl-3 pr-8 py-2 bg-white border border-slate-200 rounded-xl text-xs font-black">
+                                            <span class="absolute right-2 top-1/2 -translate-y-1/2 text-[8px] font-black text-slate-300" x-text="item.unit"></span>
+                                        </div>
+                                    </div>
+
+                                    {{-- Tombol Hapus --}}
+                                    <div class="col-span-1 md:col-span-1 text-center mt-2 md:mt-0">
+                                        <button type="button" @click="removeItem(index)" x-show="items.length > 1" class="w-8 h-8 inline-flex items-center justify-center bg-rose-50 text-rose-500 rounded-lg hover:bg-rose-500 hover:text-white transition-all">
+                                            <i class="fas fa-times text-xs"></i>
+                                        </button>
+                                    </div>
+                                </div>
+                            </template>
+                        </div>
                     </div>
                 </div>
             </div>
 
-            <div class="bg-white border border-slate-200 rounded-[2.5rem] p-8 shadow-sm space-y-4">
-                <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Lampiran Foto Bukti (Opsional)</label>
-                <div class="flex flex-col md:flex-row gap-6 items-center">
-                    <div class="w-32 h-32 rounded-3xl bg-slate-50 border-2 border-dashed border-slate-200 overflow-hidden ring-4 ring-white shadow-md shrink-0 flex items-center justify-center">
-                        <img id="preview" src="{{ $treatment->foto_bukti ? asset('storage/' . $treatment->foto_bukti) : 'https://ui-avatars.com/api/?name=Bukti+Foto&background=f1f5f9&color=94a3b8' }}" class="w-full h-full object-cover">
-                    </div>
-                    <div class="flex-1 w-full">
-                        <input type="file" name="foto_bukti" onchange="previewImage(event)" class="w-full p-3 bg-slate-50 border border-slate-200 rounded-2xl text-xs font-bold file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-[10px] file:font-black file:bg-indigo-600 file:text-white hover:file:bg-indigo-700 cursor-pointer">
-                        <p class="text-[9px] text-slate-400 mt-2 italic">* Upload foto baru untuk mengganti bukti pengobatan sebelumnya.</p>
-                    </div>
-                </div>
-            </div>
-
-            <div class="flex gap-4">
-                <button type="submit" class="flex-1 py-5 bg-indigo-600 text-white text-xs font-black rounded-3xl shadow-xl shadow-indigo-100 hover:bg-indigo-700 transition-all active:scale-[0.98] flex items-center justify-center gap-2">
-                    <i class="fas fa-sync-alt"></i> SIMPAN PERUBAHAN & RE-SYNC STOK
-                </button>
-            </div>
+            <button type="submit" class="w-full py-5 bg-slate-900 text-white text-sm font-black rounded-3xl shadow-xl hover:bg-indigo-600 transition-all active:scale-[0.98] flex items-center justify-center gap-2">
+                <i class="fas fa-save"></i> PERBARUI REKAM MEDIS & SINKRONISASI STOK
+            </button>
         </form>
     </div>
 
+    @push('scripts')
+    <script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
+    
+    @php
+        // [FIX ERROR SYNTAX BLADE]
+        $mappedItems = [];
+        $oldItems = old('items');
+        
+        if ($oldItems) {
+            $mappedItems = $oldItems;
+        } else {
+            if (isset($treatment->details) && $treatment->details->count() > 0) {
+                $mappedItems = $treatment->details->map(function($detail) {
+                    return [
+                        'medicine_id' => $detail->medicine_id,
+                        'qty_used'    => (float) $detail->qty_used,
+                        'unit'        => $detail->medicine->unit ?? 'UNIT',
+                        'dosis'       => $detail->dosis ?? '',
+                        'keterangan'  => $detail->keterangan ?? '',
+                    ];
+                })->toArray();
+            } else {
+                $mappedItems = [[
+                    'medicine_id' => $treatment->medicine_id,
+                    'qty_used'    => (float) $treatment->qty_used,
+                    'unit'        => $treatment->medicine->unit ?? 'UNIT',
+                    'dosis'       => $treatment->dosis ?? '',
+                    'keterangan'  => $treatment->keterangan ?? '',
+                ]];
+            }
+        }
+    @endphp
+
     <script>
+        function treatmentForm() {
+            return {
+                items: @json($mappedItems),
+
+                addObat() {
+                    this.items.push({
+                        medicine_id: '',
+                        qty_used: 1,
+                        unit: 'UNIT',
+                        dosis: '',
+                        keterangan: ''
+                    });
+                },
+
+                removeItem(index) {
+                    this.items.splice(index, 1);
+                },
+
+                updateUnit(index) {
+                    setTimeout(() => {
+                        const select = document.querySelectorAll('select[name^="items"]')[index];
+                        if (select) {
+                            const selectedOption = select.options[select.selectedIndex];
+                            const unit = selectedOption.getAttribute('data-unit');
+                            this.items[index].unit = unit ? unit : 'UNIT';
+                        }
+                    }, 10);
+                }
+            }
+        }
+
         function previewImage(event) {
             const reader = new FileReader();
             reader.onload = function() {
@@ -134,4 +236,5 @@
             }
         }
     </script>
+    @endpush
 </x-app-layout>

resources/views/pages/treatments/index.blade.php

@@ -1,13 +1,12 @@
 <x-app-layout>
-    <div class="space-y-6 pb-8">
+    <div class="max-w-7xl mx-auto space-y-6 pb-8">
         {{-- SECTION 1: Header --}}
-        <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
+        <div class="flex flex-col md:flex-row md:items-center justify-between gap-4 px-2">
             <div>
-                <h2 class="text-2xl font-black text-slate-800 tracking-tight leading-none mb-1 text-uppercase">Log Rekam Medis</h2>
-                <p class="text-xs text-slate-500 font-medium italic uppercase tracking-wider">Riwayat kesehatan & penggunaan obat seluruh kucing.</p>
+                <h2 class="text-2xl font-black text-slate-800 tracking-tight leading-none mb-1 uppercase">Log Rekam Medis</h2>
+                <p class="text-xs text-slate-500 font-medium italic uppercase tracking-wider">Laporan Riwayat Kesehatan & Penggunaan Inventaris Obat.</p>
             </div>
 
-            {{-- PROTEKSI TOMBOL CREATE: Hanya muncul jika punya izin Create --}}
             @can('check-access', ['treatments', 'create'])
             <a href="{{ route('treatments.create') }}" class="inline-flex items-center px-6 py-4 bg-slate-900 text-white text-[10px] font-black rounded-2xl shadow-xl hover:bg-black transition-all active:scale-95 tracking-widest uppercase">
                 <i class="fas fa-plus-circle mr-2 text-sm"></i> INPUT REKAM MEDIS
@@ -15,17 +14,76 @@
             @endcan
         </div>
 
-        {{-- SECTION 2: Tabel Rekam Medis --}}
-        <div class="bg-white border border-slate-200 rounded-[2.5rem] overflow-hidden shadow-sm">
+        {{-- SECTION 2: Filter dan ekspor --}}
+        <div class="bg-white border border-slate-200 rounded-[2.5rem] p-6 mx-2 shadow-sm">
+            <form action="{{ route('treatments.index') }}" method="GET" class="space-y-4">
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
+                    {{-- Cari Kucing --}}
+                    <div class="space-y-1">
+                        <label class="text-[9px] font-black text-slate-400 uppercase ml-2 tracking-widest">Pasien</label>
+                        <div class="relative">
+                            <i class="fas fa-search absolute left-4 top-1/2 -translate-y-1/2 text-slate-300 text-xs"></i>
+                            <input type="text" name="search" value="{{ request('search') }}" placeholder="Cari nama kucing..." 
+                                   class="w-full pl-10 pr-4 py-2.5 bg-slate-50 border-none rounded-xl text-xs font-bold focus:ring-2 focus:ring-indigo-500">
+                        </div>
+                    </div>
+
+                    {{-- PIC / Staf --}}
+                    <div class="space-y-1">
+                        <label class="text-[9px] font-black text-slate-400 uppercase ml-2 tracking-widest">PIC / Staf</label>
+                        <select name="pic_id" class="w-full px-4 py-2.5 bg-slate-50 border-none rounded-xl text-xs font-bold focus:ring-2 focus:ring-indigo-500">
+                            <option value="">Semua Staf</option>
+                            @foreach($pics as $pic)
+                                <option value="{{ $pic->id }}" {{ request('pic_id') == $pic->id ? 'selected' : '' }}>{{ $pic->name }}</option>
+                            @endforeach
+                        </select>
+                    </div>
+
+                    {{-- Rentang Tanggal --}}
+                    <div class="lg:col-span-2 space-y-1">
+                        <label class="text-[9px] font-black text-slate-400 uppercase ml-2 tracking-widest">Rentang Waktu</label>
+                        <div class="grid grid-cols-2 gap-2">
+                            <input type="date" name="start_date" value="{{ request('start_date') }}" class="w-full px-4 py-2.5 bg-slate-50 border-none rounded-xl text-xs font-bold focus:ring-2 focus:ring-indigo-500">
+                            <input type="date" name="end_date" value="{{ request('end_date') }}" class="w-full px-4 py-2.5 bg-slate-50 border-none rounded-xl text-xs font-bold focus:ring-2 focus:ring-indigo-500">
+                        </div>
+                    </div>
+                </div>
+
+                {{-- Action Buttons --}}
+                <div class="flex flex-wrap items-center justify-between gap-4 pt-2 border-t border-slate-50">
+                    <div class="flex items-center gap-2">
+                        <button type="submit" class="px-6 py-2.5 bg-indigo-600 text-white rounded-xl text-[10px] font-black uppercase tracking-widest hover:bg-indigo-700 transition-all shadow-md shadow-indigo-100">
+                            <i class="fas fa-filter mr-2"></i> Terapkan Filter
+                        </button>
+                        <a href="{{ route('treatments.index') }}" class="px-6 py-2.5 bg-slate-100 text-slate-500 rounded-xl text-[10px] font-black uppercase tracking-widest hover:bg-slate-200 transition-all">
+                            <i class="fas fa-sync-alt mr-2"></i> Reset
+                        </a>
+                    </div>
+
+                    <div class="flex items-center gap-2">
+                        <button type="submit" name="export" value="excel" class="px-4 py-2.5 bg-emerald-50 text-emerald-600 border border-emerald-100 rounded-xl text-[10px] font-black uppercase tracking-widest hover:bg-emerald-600 hover:text-white transition-all">
+                            <i class="fas fa-file-excel mr-2 text-sm"></i> Excel
+                        </button>
+                        <button type="submit" name="export" value="pdf" class="px-4 py-2.5 bg-rose-50 text-rose-600 border border-rose-100 rounded-xl text-[10px] font-black uppercase tracking-widest hover:bg-rose-600 hover:text-white transition-all">
+                            <i class="fas fa-file-pdf mr-2 text-sm"></i> PDF
+                        </button>
+                    </div>
+                </div>
+            </form>
+        </div>
+
+        {{-- SECTION 3: Tabel Rekam Medis --}}
+        <div class="bg-white border border-slate-200 rounded-[2.5rem] overflow-hidden shadow-sm mx-2">
             <div class="overflow-x-auto">
                 <table class="w-full text-left border-collapse">
                     <thead class="bg-slate-50 text-[10px] font-black text-slate-400 uppercase tracking-widest border-b border-slate-100">
                         <tr>
-                            <th class="px-6 py-4">Tanggal & Kucing</th>
-                            <th class="px-6 py-4">Keluhan & Diagnosa</th>
-                            <th class="px-6 py-4">Obat (Qty)</th>
-                            <th class="px-6 py-4 text-center">Bukti</th>
-                            <th class="px-6 py-4 text-right" style="min-width: 220px;">Aksi</th>
+                            <th class="px-6 py-5">Tanggal & Kucing</th>
+                            <th class="px-6 py-5">Kondisi</th>
+                            <th class="px-6 py-5">Keluhan & Diagnosa</th>
+                            <th class="px-6 py-5">Obat & Qty</th>
+                            <th class="px-6 py-5 text-center">Lampiran</th>
+                            <th class="px-6 py-5 text-right">Aksi</th>
                         </tr>
                     </thead>
                     <tbody class="divide-y divide-slate-100 font-medium text-slate-700">
@@ -34,81 +92,86 @@
                             {{-- Tanggal & Kucing --}}
                             <td class="px-6 py-4">
                                 <div class="flex items-center gap-3">
-                                    <div class="w-10 h-10 rounded-xl bg-slate-100 overflow-hidden ring-2 ring-white shadow-sm">
+                                    <div class="w-10 h-10 rounded-xl bg-slate-100 overflow-hidden ring-2 ring-white shadow-sm shrink-0">
                                         <img src="{{ $treatment->cat->foto ? asset('storage/'.$treatment->cat->foto) : 'https://ui-avatars.com/api/?name='.urlencode($treatment->cat->nama_kucing).'&background=f1f5f9&color=4f46e5' }}" class="w-full h-full object-cover">
                                     </div>
                                     <div>
-                                        <p class="text-[10px] font-black text-indigo-600 uppercase leading-none mb-1">{{ $treatment->tanggal->format('d M Y') }}</p>
-                                        <p class="text-sm font-black text-slate-800 leading-none">{{ $treatment->cat->nama_kucing }}</p>
+                                        <p class="text-[10px] font-black text-indigo-600 uppercase leading-none mb-1">{{ \Carbon\Carbon::parse($treatment->tanggal)->format('d M Y') }}</p>
+                                        <p class="text-sm font-black text-slate-800 leading-none truncate w-32">{{ $treatment->cat->nama_kucing }}</p>
                                     </div>
                                 </div>
                             </td>
 
-                            {{-- Keluhan & Diagnosa --}}
-                            <td class="px-6 py-4 max-w-xs">
-                                <p class="text-xs font-black text-slate-800 truncate">{{ $treatment->keluhan }}</p>
-                                <p class="text-[10px] text-slate-500 line-clamp-1 italic uppercase tracking-tighter">{{ $treatment->diagnosa }}</p>
+                            {{-- Kondisi Kucing --}}
+                            <td class="px-6 py-4">
+                                @if($treatment->cat->treatment_status == 1)
+                                    <span class="px-2 py-1 bg-rose-50 text-rose-600 rounded-lg text-[8px] font-black border border-rose-100 uppercase tracking-tighter">Under Perawatan</span>
+                                @else
+                                    <span class="px-2 py-1 bg-emerald-50 text-emerald-600 rounded-lg text-[8px] font-black border border-emerald-100 uppercase tracking-tighter">Sehat</span>
+                                @endif
                             </td>
 
-                            {{-- Obat & Qty --}}
+                            {{-- Keluhan & Diagnosa --}}
+                            <td class="px-6 py-4 max-w-xs">
+                                <p class="text-xs font-black text-slate-800 truncate" title="{{ $treatment->keluhan }}">{{ $treatment->keluhan }}</p>
+                                {{-- Limit diperbesar agar detail catatan obat bisa terbaca --}}
+                                <p class="text-[10px] text-slate-500 line-clamp-2 italic uppercase tracking-tighter" title="{{ $treatment->diagnosa }}">{{ Str::limit($treatment->diagnosa, 75) }}</p>
+                            </td>
+
+                            {{-- Obat & Qty (Menggunakan Relasi Langsung) --}}
                             <td class="px-6 py-4">
-                                <div class="flex items-center gap-2">
-                                    <span class="px-2 py-1 bg-emerald-50 text-emerald-600 rounded-lg text-[10px] font-black border border-emerald-100 uppercase">
-                                        {{ $treatment->nama_obat }}
-                                    </span>
-                                    <span class="text-[10px] font-bold text-slate-400">x{{ number_format($treatment->qty_used, 0) }}</span>
+                                <div class="flex flex-wrap gap-1.5 max-w-[200px]">
+                                    <div class="flex items-center gap-1.5 bg-slate-50 px-2 py-1 rounded-lg border border-slate-100">
+                                        <span class="text-[9px] font-black text-slate-700 uppercase">{{ $treatment->medicine->nama_obat ?? 'N/A' }}</span>
+                                        <span class="text-[8px] font-bold text-indigo-500">x{{ (float)$treatment->qty_used }}</span>
+                                    </div>
                                 </div>
                             </td>
 
                             {{-- Foto Bukti --}}
                             <td class="px-6 py-4 text-center">
                                 @if($treatment->foto_bukti)
-                                    <a href="{{ asset('storage/'.$treatment->foto_bukti) }}" target="_blank" class="w-8 h-8 inline-flex items-center justify-center bg-indigo-50 text-indigo-500 hover:bg-indigo-100 rounded-lg transition-all shadow-sm" title="Lihat Bukti">
-                                        <i class="fas fa-image"></i>
+                                    <a href="{{ asset('storage/'.$treatment->foto_bukti) }}" target="_blank" class="w-8 h-8 inline-flex items-center justify-center bg-indigo-50 text-indigo-500 hover:bg-indigo-600 hover:text-white rounded-lg transition-all shadow-sm">
+                                        <i class="fas fa-image text-xs"></i>
                                     </a>
                                 @else
-                                    <span class="text-slate-300 text-[10px] font-bold">TIDAK ADA</span>
+                                    <span class="text-slate-200 text-[10px] font-bold tracking-widest">N/A</span>
                                 @endif
                             </td>
 
                             {{-- AKSI --}}
-                            <td class="px-6 py-4 text-right align-middle">
-                                <div class="flex justify-end items-center gap-16">
-                                    
-                                    {{-- PROTEKSI TOMBOL EDIT: Hanya jika punya izin Update --}}
+                            <td class="px-6 py-4 text-right">
+                                <div class="flex justify-end items-center gap-2">
+                                    <a href="{{ route('treatments.show', $treatment->id) }}" class="w-8 h-8 flex items-center justify-center bg-slate-50 text-slate-400 hover:bg-indigo-50 hover:text-indigo-600 rounded-xl transition-all shadow-sm">
+                                        <i class="fas fa-eye text-[10px]"></i>
+                                    </a>
+
                                     @can('check-access', ['treatments', 'update'])
-                                    <a href="{{ route('treatments.edit', $treatment->id) }}" 
-                                       class="flex items-center gap-3 p-2 text-slate-400 hover:text-amber-600 transition-all group/btn" 
-                                       title="Edit Rekam Medis">
-                                        <i class="fas fa-edit text-base"></i>
-                                        <span class="text-[10px] font-black uppercase hidden group-hover/btn:inline tracking-widest">Edit</span>
+                                    <a href="{{ route('treatments.edit', $treatment->id) }}" class="w-8 h-8 flex items-center justify-center bg-slate-50 text-slate-400 hover:bg-amber-50 hover:text-amber-600 rounded-xl transition-all shadow-sm">
+                                        <i class="fas fa-edit text-[10px]"></i>
                                     </a>
                                     @endcan
 
-                                    {{-- PROTEKSI TOMBOL HAPUS: Hanya jika punya izin Delete --}}
                                     @can('check-access', ['treatments', 'delete'])
                                     <form action="{{ route('treatments.destroy', $treatment->id) }}" method="POST" class="inline m-0">
                                         @csrf @method('DELETE')
-                                        <button type="button" 
-                                                onclick="confirmDelete(this, 'Rekam Medis {{ addslashes($treatment->cat->nama_kucing) }}')"
-                                                class="flex items-center gap-3 p-2 text-slate-400 hover:text-rose-600 transition-all group/btn" 
-                                                title="Hapus Data">
-                                            <i class="fas fa-trash-alt text-base"></i>
-                                            <span class="text-[10px] font-black uppercase hidden group-hover/btn:inline tracking-widest">Hapus</span>
+                                        <button type="button" onclick="confirmDelete(this, 'Rekam Medis {{ addslashes($treatment->cat->nama_kucing) }}')"
+                                                class="w-8 h-8 flex items-center justify-center bg-slate-50 text-slate-400 hover:bg-rose-50 hover:text-rose-600 rounded-xl transition-all shadow-sm">
+                                            <i class="fas fa-trash-alt text-[10px]"></i>
                                         </button>
                                     </form>
                                     @endcan
-                                    
                                 </div>
                             </td>
                         </tr>
                         @empty
                         <tr>
-                            <td colspan="5" class="px-6 py-24 text-center">
-                                <div class="w-16 h-16 bg-slate-50 rounded-3xl flex items-center justify-center mx-auto mb-4">
-                                    <i class="fas fa-notes-medical text-2xl text-slate-200"></i>
+                            <td colspan="6" class="px-6 py-32 text-center">
+                                <div class="w-20 h-20 bg-slate-50 rounded-[2rem] flex items-center justify-center mx-auto mb-4 border border-slate-100">
+                                    <i class="fas fa-microscope text-3xl text-slate-200"></i>
                                 </div>
-                                <p class="text-slate-400 font-bold uppercase text-[10px] tracking-widest">Belum ada riwayat rekam medis</p>
+                                <h3 class="text-slate-400 font-black uppercase text-xs tracking-[0.4em]">Data Tidak Ditemukan</h3>
+                                <p class="text-slate-300 text-[10px] font-bold mt-2 uppercase italic tracking-tighter">Gunakan filter yang berbeda atau input rekam medis baru</p>
                             </td>
                         </tr>
                         @endforelse
@@ -117,9 +180,38 @@
             </div>
 
             {{-- Pagination --}}
-            <div class="p-6 border-t border-slate-100 bg-slate-50/30">
+            @if($treatments->hasPages())
+            <div class="p-8 border-t border-slate-100 bg-slate-50/30">
                 {{ $treatments->links() }}
             </div>
+            @endif
         </div>
     </div>
+
+    @push('scripts')
+    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+    <script>
+        function confirmDelete(button, name) {
+            Swal.fire({
+                title: 'Hapus Rekam Medis?',
+                text: "Menghapus data " + name + " akan mengembalikan stok obat ke inventaris secara otomatis.",
+                icon: 'warning',
+                showCancelButton: true,
+                confirmButtonColor: '#e11d48',
+                cancelButtonColor: '#64748b',
+                confirmButtonText: 'Ya, Hapus Data',
+                cancelButtonText: 'Batal',
+                customClass: {
+                    popup: 'rounded-[2.5rem]',
+                    confirmButton: 'rounded-xl font-black uppercase text-[10px] tracking-widest px-6 py-3',
+                    cancelButton: 'rounded-xl font-black uppercase text-[10px] tracking-widest px-6 py-3'
+                }
+            }).then((result) => {
+                if (result.isConfirmed) {
+                    button.closest('form').submit();
+                }
+            })
+        }
+    </script>
+    @endpush
 </x-app-layout>

resources/views/pages/treatments/show.blade.php

@@ -0,0 +1,172 @@
+<x-app-layout>
+    <div class="max-w-5xl mx-auto space-y-6 pb-12">
+        {{-- HEADER --}}
+        <div class="flex items-center justify-between px-2">
+            <div class="flex items-center gap-4">
+                <a href="{{ route('treatments.index') }}" class="p-3 bg-white border border-slate-200 rounded-2xl text-slate-400 hover:text-indigo-600 transition-all shadow-sm">
+                    <i class="fas fa-arrow-left"></i>
+                </a>
+                <div>
+                    <h2 class="text-2xl font-black text-slate-800 tracking-tight leading-none uppercase">Detail Rekam Medis</h2>
+                    <p class="text-[10px] text-indigo-600 font-black uppercase tracking-widest mt-1">ID Pemeriksaan: #TR-{{ str_pad($treatment->id, 5, '0', STR_PAD_LEFT) }}</p>
+                </div>
+            </div>
+            <div class="flex gap-2">
+                <button onclick="window.print()" class="px-4 py-2 bg-white border border-slate-200 text-slate-600 text-[10px] font-black rounded-xl uppercase tracking-widest hover:bg-slate-50">
+                    <i class="fas fa-print mr-2"></i> Cetak Laporan
+                </button>
+            </div>
+        </div>
+
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+            {{-- KOLOM KIRI: PASIEN & PROGRES --}}
+            <div class="space-y-6">
+                {{-- Info Kucing --}}
+                <div class="bg-white border border-slate-200 rounded-[2.5rem] p-6 shadow-sm text-center">
+                    <div class="w-24 h-24 rounded-3xl bg-slate-100 mx-auto overflow-hidden ring-4 ring-indigo-50 shadow-md">
+                        <img src="{{ $treatment->cat->foto ? asset('storage/'.$treatment->cat->foto) : 'https://ui-avatars.com/api/?name='.urlencode($treatment->cat->nama_kucing) }}" class="w-full h-full object-cover">
+                    </div>
+                    <h3 class="mt-4 text-xl font-black text-slate-800 uppercase tracking-tight">{{ $treatment->cat->nama_kucing }}</h3>
+                    <p class="text-[10px] font-bold text-slate-400 uppercase">{{ $treatment->cat->ras }} • {{ \Carbon\Carbon::parse($treatment->tanggal)->format('d F Y') }}</p>
+                    
+                    {{-- Progres Status --}}
+                    <div class="mt-6 pt-6 border-t border-slate-50">
+                        <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest mb-3">Progres Pengobatan</p>
+                        @php
+                            $isImproving = Str::contains(strtolower($treatment->diagnosa), ['baik', 'makan', 'aktif', 'sembuh', 'turun panas']);
+                        @endphp
+
+                        @if($isImproving || $treatment->status_perawatan == 2)
+                            <div class="bg-emerald-50 border border-emerald-100 rounded-2xl p-4">
+                                <i class="fas fa-chart-line text-emerald-500 text-xl mb-2"></i>
+                                <p class="text-xs font-black text-emerald-700 uppercase">Kondisi Membaik / Sembuh</p>
+                                <p class="text-[10px] text-emerald-600 font-medium mt-1">Pasien menunjukkan respon positif terhadap terapi obat.</p>
+                            </div>
+                        @else
+                            <div class="bg-amber-50 border border-amber-100 rounded-2xl p-4">
+                                <i class="fas fa-stagnation text-amber-500 text-xl mb-2"></i>
+                                <p class="text-xs font-black text-amber-700 uppercase">Kondisi Stuck / Tetap</p>
+                                <p class="text-[10px] text-amber-600 font-medium mt-1">Belum ada perubahan signifikan. Perlu observasi lanjutan.</p>
+                            </div>
+                        @endif
+                    </div>
+                </div>
+
+                {{-- Bukti Foto --}}
+                <div class="bg-white border border-slate-200 rounded-[2.5rem] p-6 shadow-sm">
+                    <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest mb-4">Lampiran Bukti</p>
+                    @if($treatment->foto_bukti)
+                        <img src="{{ asset('storage/'.$treatment->foto_bukti) }}" class="w-full rounded-2xl shadow-sm border border-slate-100">
+                    @else
+                        <div class="py-8 text-center bg-slate-50 rounded-2xl border border-dashed border-slate-200">
+                            <i class="fas fa-image text-slate-200 text-2xl mb-2"></i>
+                            <p class="text-[9px] font-black text-slate-300 uppercase">Tidak ada lampiran foto</p>
+                        </div>
+                    @endif
+                </div>
+            </div>
+
+            {{-- KOLOM KANAN: DETAIL MEDIS --}}
+            @php
+                // Logika Pemisahan String: Mengekstrak Dosis dan Keterangan dari Kolom Diagnosa
+                // Contoh: "Flu Berat | Dosis: 0.5cc (Campur wetfood)"
+                
+                $fullDiagnosa = $treatment->diagnosa;
+                $pureDiagnosa = $fullDiagnosa;
+                $extractedDosis = 'Sesuai Resep / Standar';
+                $extractedKeterangan = '-';
+
+                // Pisahkan berdasarkan tanda "|" (pemisah Dosis)
+                if (str_contains($fullDiagnosa, '| Dosis:')) {
+                    $parts = explode('| Dosis:', $fullDiagnosa);
+                    $pureDiagnosa = trim($parts[0]);
+                    
+                    // Cek jika ada keterangan dalam tanda kurung "()" setelah Dosis
+                    $dosisAndKet = trim($parts[1]);
+                    if (preg_match('/^(.*)\((.*)\)$/', $dosisAndKet, $matches)) {
+                        $extractedDosis = trim($matches[1]);
+                        $extractedKeterangan = trim($matches[2]);
+                    } else {
+                        $extractedDosis = $dosisAndKet;
+                    }
+                }
+            @endphp
+
+            <div class="lg:col-span-2 space-y-6">
+                {{-- Ringkasan Diagnosa --}}
+                <div class="bg-white border border-slate-200 rounded-[2.5rem] p-8 shadow-sm">
+                    <div class="flex items-center gap-3 mb-6">
+                        <div class="w-10 h-10 rounded-xl bg-rose-50 text-rose-500 flex items-center justify-center">
+                            <i class="fas fa-stethoscope"></i>
+                        </div>
+                        <h4 class="text-sm font-black text-slate-800 uppercase tracking-widest">Laporan Diagnosa</h4>
+                    </div>
+
+                    <div class="space-y-4">
+                        <div>
+                            <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Keluhan / Gejala Utama:</label>
+                            <p class="text-sm font-bold text-slate-700 mt-1">{{ $treatment->keluhan }}</p>
+                        </div>
+                        <div>
+                            <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Hasil Pemeriksaan Klinik:</label>
+                            <div class="bg-slate-50 p-4 rounded-2xl border border-slate-100 mt-2">
+                                <p class="text-sm text-slate-600 font-medium leading-relaxed italic">"{{ $pureDiagnosa }}"</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                {{-- Tabel Obat Detail --}}
+                <div class="bg-white border border-slate-200 rounded-[2.5rem] overflow-hidden shadow-sm">
+                    <div class="px-8 py-5 border-b border-slate-50 bg-emerald-50/30">
+                        <h4 class="text-xs font-black text-emerald-700 uppercase tracking-widest">Daftar Obat Terkait Kasus Ini</h4>
+                    </div>
+                    
+                    <div class="overflow-x-auto">
+                        <table class="w-full text-left">
+                            <thead class="bg-slate-50 text-[9px] font-black text-slate-400 uppercase tracking-widest">
+                                <tr>
+                                    <th class="px-8 py-4">Item Obat</th>
+                                    <th class="px-4 py-4 text-center">Qty / Potong Stok</th>
+                                    <th class="px-4 py-4">Dosis</th>
+                                    <th class="px-8 py-4">Keterangan Khusus</th>
+                                </tr>
+                            </thead>
+                            <tbody class="divide-y divide-slate-50">
+                                <tr>
+                                    <td class="px-8 py-4">
+                                        <span class="text-xs font-black text-slate-800 uppercase">{{ $treatment->medicine->nama_obat ?? 'OBAT DIHAPUS' }}</span>
+                                    </td>
+                                    <td class="px-4 py-4 text-center text-xs font-black text-indigo-600">
+                                        {{ (float)$treatment->qty_used }} <span class="text-[9px] text-slate-400 uppercase">{{ $treatment->medicine->unit ?? '' }}</span>
+                                    </td>
+                                    <td class="px-4 py-4 text-xs font-bold text-slate-600">{{ $extractedDosis }}</td>
+                                    <td class="px-8 py-4 text-[10px] font-medium text-slate-400 italic">{{ $extractedKeterangan }}</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+
+                {{-- Status Resolusi (Sembuh / Belum) --}}
+                @if($treatment->status_perawatan == 2)
+                <div class="bg-emerald-50 border border-emerald-200 rounded-[2.5rem] p-6 shadow-sm flex items-start gap-4">
+                    <div class="w-10 h-10 bg-emerald-100 text-emerald-600 rounded-xl flex items-center justify-center shrink-0">
+                        <i class="fas fa-check-circle"></i>
+                    </div>
+                    <div>
+                        <h4 class="text-sm font-black text-emerald-700 uppercase tracking-widest mb-1">Kasus Diselesaikan (Sembuh)</h4>
+                        <p class="text-xs font-bold text-emerald-600 italic">"{{ $treatment->remark_pasca_sakit ?? 'Tidak ada catatan pasca sakit' }}"</p>
+                    </div>
+                </div>
+                @endif
+
+                {{-- Footer Info --}}
+                <div class="flex items-center justify-between px-6 text-[9px] font-black text-slate-300 uppercase tracking-[0.2em]">
+                    <span>Diperiksa Oleh: {{ $treatment->user->name ?? 'Staf / Dokter' }}</span>
+                    <span>Terakhir Update: {{ $treatment->updated_at->format('d/m/Y H:i') }}</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</x-app-layout>

resources/views/pages/users/edit.blade.php

@@ -60,7 +60,7 @@
             <div class="p-4 bg-indigo-50 rounded-2xl border border-indigo-100 flex gap-3 items-start">
                 <i class="fas fa-info-circle text-indigo-500 mt-1"></i>
                 <p class="text-[11px] text-indigo-700 leading-relaxed font-medium">
-                    Kata sandi tidak ditampilkan di sini demi alasan keamanan. User dapat merubah kata sandi secara mandiri melalui menu <strong>Profil</strong> atau Anda dapat menggunakan fitur <em>Reset Password</em> jika diperlukan.
+                    Kata sandi tidak ditampilkan di sini demi alasan keamanan. Pengguna dapat mengubah kata sandi secara mandiri melalui menu <strong>Profil</strong> atau Anda dapat menggunakan fitur <em>Atur ulang kata sandi</em> jika diperlukan.
                 </p>
             </div>
 

resources/views/pages/users/index.blade.php

@@ -44,7 +44,7 @@
                         {{-- Badge Role --}}
                         <td class="px-6 py-4 text-center">
                             <span class="px-3 py-1 rounded-xl text-[10px] font-black uppercase {{ $user->role == 'admin' ? 'bg-indigo-50 text-indigo-600 border border-indigo-100' : 'bg-slate-50 text-slate-500 border border-slate-200' }}">
-                                {{ $user->role->name ?? $user->role }}
+                                {{ $user->roleModel?->name ?? $user->role ?? '-' }}
                             </span>
                         </td>
 

resources/views/profile/edit.blade.php

@@ -1,29 +1,144 @@
 <x-app-layout>
-    <x-slot name="header">
-        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
-            {{ __('Profile') }}
-        </h2>
-    </x-slot>
+    <div class="max-w-[1600px] mx-auto space-y-8 pb-12 px-4 sm:px-6 lg:px-8">
+        
+        {{-- 1. Header & Navigasi --}}
+        <div class="flex flex-col md:flex-row md:items-center justify-between gap-6 mt-8">
+            <div class="flex items-center gap-4">
+                <a href="{{ route('dashboard') }}" class="p-3 bg-white border border-slate-200 rounded-2xl text-slate-400 hover:text-indigo-600 transition-all shadow-sm active:scale-90">
+                    <i class="fas fa-arrow-left"></i>
+                </a>
+                <div>
+                    <h2 class="text-2xl md:text-3xl font-black text-slate-800 tracking-tight leading-none uppercase">{{ __('Pengaturan Akun') }}</h2>
+                    <p class="text-sm text-slate-500 font-medium italic mt-1">Manajemen profil dan keamanan akses sistem</p>
+                </div>
+            </div>
+            
+            <div class="hidden sm:flex items-center gap-3">
+                <span class="px-4 py-2 bg-indigo-50 text-indigo-600 rounded-xl text-[10px] font-black uppercase tracking-widest border border-indigo-100">
+                    ID pengguna: #{{ str_pad(auth()->id(), 4, '0', STR_PAD_LEFT) }}
+                </span>
+            </div>
+        </div>
 
-    <div class="py-12">
-        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6">
-            <div class="p-4 sm:p-8 bg-white shadow sm:rounded-lg">
-                <div class="max-w-xl">
-                    @include('profile.partials.update-profile-information-form')
+        {{-- 2. Grid Utama --}}
+        <div class="grid grid-cols-1 xl:grid-cols-12 gap-8">
+            
+            {{-- SISI KIRI: Form Utama --}}
+            <div class="xl:col-span-8 space-y-8 min-w-0">
+                {{-- Form Update Informasi Profil --}}
+                <div class="p-6 md:p-10 bg-white border border-slate-200 rounded-[2.5rem] md:rounded-[3rem] shadow-sm relative overflow-hidden group">
+                    <div class="max-w-2xl relative z-10">
+                        @include('profile.partials.update-profile-information-form')
+                    </div>
+                    <i class="fas fa-user-circle absolute -bottom-10 -right-10 text-[12rem] text-slate-50/50 -rotate-12 transition-transform group-hover:rotate-0 duration-700 pointer-events-none opacity-20"></i>
+                </div>
+
+                {{-- Form Update Password --}}
+                <div class="p-6 md:p-10 bg-white border border-slate-200 rounded-[2.5rem] md:rounded-[3rem] shadow-sm relative overflow-hidden group">
+                    <div class="max-w-2xl relative z-10">
+                        @include('profile.partials.update-password-form')
+                    </div>
+                    <i class="fas fa-key absolute -bottom-10 -right-10 text-[12rem] text-slate-50/50 -rotate-12 transition-transform group-hover:rotate-0 duration-700 pointer-events-none opacity-20"></i>
                 </div>
             </div>
 
-            <div class="p-4 sm:p-8 bg-white shadow sm:rounded-lg">
-                <div class="max-w-xl">
-                    @include('profile.partials.update-password-form')
-                </div>
-            </div>
+            {{-- SISI KANAN: Widgets --}}
+            <div class="xl:col-span-4 space-y-8 min-w-0">
+                
+                {{-- WIDGET BIOMETRIK --}}
+                <div class="p-8 md:p-10 bg-indigo-600 text-white rounded-[2.5rem] md:rounded-[3rem] shadow-xl shadow-indigo-100 relative overflow-hidden group">
+                    <div class="relative z-10">
+                        <div class="w-14 h-14 bg-white/10 backdrop-blur-xl border border-white/20 rounded-2xl flex items-center justify-center mb-6">
+                            <i class="fas fa-fingerprint text-2xl text-indigo-200"></i>
+                        </div>
+                        
+                        <h3 class="text-xl font-black uppercase tracking-tight mb-2">Akses Biometrik</h3>
+                        <p class="text-indigo-100 text-[11px] leading-relaxed font-medium mb-8">
+                            Daftarkan wajah atau sidik jari perangkat ini untuk login instan tanpa mengetik password.
+                        </p>
 
-            <div class="p-4 sm:p-8 bg-white shadow sm:rounded-lg">
-                <div class="max-w-xl">
+                        <button type="button" id="register-passkey" 
+                                class="w-full py-4 bg-white text-indigo-600 rounded-2xl font-black text-[10px] uppercase tracking-[0.2em] shadow-lg hover:bg-indigo-50 transition-all active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed">
+                            <i class="fas fa-plus-circle mr-2"></i> AKTIFKAN SEKARANG
+                        </button>
+                    </div>
+                    <i class="fas fa-shield-check absolute -bottom-10 -left-10 text-[15rem] text-white/5 -rotate-12 pointer-events-none"></i>
+                </div>
+
+                {{-- Tips Keamanan --}}
+                <div class="p-8 bg-slate-900 rounded-[2.5rem] md:rounded-[3rem] text-white relative overflow-hidden">
+                    <h4 class="text-[10px] font-black text-indigo-400 uppercase tracking-[0.3em] mb-4">Breeder Security Tip</h4>
+                    <p class="text-xs text-slate-300 leading-relaxed italic">
+                        "Pastikan perangkat yang Anda daftarkan adalah milik pribadi atau perangkat operasional resmi Ilycats untuk menjaga keamanan data pembiakan."
+                    </p>
+                    <i class="fas fa-paw absolute -bottom-4 -right-4 text-6xl text-white/5 rotate-12"></i>
+                </div>
+
+                {{-- Hapus Akun --}}
+                <div class="p-8 md:p-10 bg-rose-50 border border-rose-100 rounded-[2.5rem] md:rounded-[3rem] shadow-sm">
                     @include('profile.partials.delete-user-form')
                 </div>
             </div>
         </div>
     </div>
-</x-app-layout>
+
+    @push('scripts')
+   <script type="module">
+    import WebAuthn from "{{ asset('vendor/webauthn/webauthn.js') }}";
+
+    // 1. Definisikan rute secara manual agar tidak salah tebak path
+    const routes = {
+        registerOptions: "{{ url('webauthn/register/options') }}",
+        register: "{{ url('webauthn/register') }}",
+        loginOptions: "{{ url('webauthn/login/options') }}",
+        login: "{{ url('webauthn/login') }}"
+    };
+
+    // 2. Ambil token CSRF dari meta tag
+    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
+
+    if (!csrfToken) {
+        console.error("CSRF Token tidak ditemukan! Pastikan ada <meta name='csrf-token'> di head.");
+    }
+
+    // 3. Buat instansi dengan rute manual
+    const webauthn = new WebAuthn(routes, {}, false, csrfToken);
+
+    const regBtn = document.getElementById('register-passkey');
+    
+    if (regBtn) {
+        regBtn.addEventListener('click', async () => {
+            const btn = regBtn;
+            const originalText = btn.innerHTML;
+
+            try {
+                btn.disabled = true;
+                btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> MENGHUBUNGI SERVER...';
+
+                // Tes koneksi dulu sebelum panggil sensor
+                console.log("Mencoba akses ke:", routes.registerOptions);
+                
+                const response = await webauthn.register();
+
+                if (response) {
+                    alert("Berhasil! Wajah/Sidik Jari telah terdaftar.");
+                    window.location.reload();
+                }
+            } catch (error) {
+                console.error("DETAIL ERROR:", error);
+                
+                // Jika error 404, kita beri pesan khusus
+                if (error.status === 404) {
+                    alert("Error 404: Rute tidak ditemukan. Coba jalankan 'php artisan route:clear' di SSH.");
+                } else {
+                    alert("Gagal: " + (error.statusText || "Pastikan perangkat mendukung biometrik."));
+                }
+            } finally {
+                btn.disabled = false;
+                btn.innerHTML = originalText;
+            }
+        });
+    }
+</script>
+    @endpush
+</x-app-layout>

resources/views/profile/partials/delete-user-form.blade.php

@@ -1,18 +1,18 @@
 <section class="space-y-6">
     <header>
         <h2 class="text-lg font-medium text-gray-900">
-            {{ __('Delete Account') }}
+            {{ __('Hapus akun') }}
         </h2>
 
         <p class="mt-1 text-sm text-gray-600">
-            {{ __('Once your account is deleted, all of its resources and data will be permanently deleted. Before deleting your account, please download any data or information that you wish to retain.') }}
+            {{ __('Setelah akun dihapus, seluruh data terkait akun akan dihapus secara permanen. Pastikan data yang diperlukan sudah diamankan sebelum melanjutkan.') }}
         </p>
     </header>
 
     <x-danger-button
         x-data=""
         x-on:click.prevent="$dispatch('open-modal', 'confirm-user-deletion')"
-    >{{ __('Delete Account') }}</x-danger-button>
+    >{{ __('Hapus akun') }}</x-danger-button>
 
     <x-modal name="confirm-user-deletion" :show="$errors->userDeletion->isNotEmpty()" focusable>
         <form method="post" action="{{ route('profile.destroy') }}" class="p-6">
@@ -47,7 +47,7 @@
                 </x-secondary-button>
 
                 <x-danger-button class="ms-3">
-                    {{ __('Delete Account') }}
+                    {{ __('Hapus akun') }}
                 </x-danger-button>
             </div>
         </form>

resources/views/profile/partials/update-password-form.blade.php

@@ -1,7 +1,7 @@
 <section>
     <header>
         <h2 class="text-lg font-medium text-gray-900">
-            {{ __('Update Password') }}
+            {{ __('Ubah kata sandi') }}
         </h2>
 
         <p class="mt-1 text-sm text-gray-600">
@@ -14,19 +14,19 @@
         @method('put')
 
         <div>
-            <x-input-label for="update_password_current_password" :value="__('Current Password')" />
+            <x-input-label for="update_password_current_password" :value="__('Kata Sandi Saat Ini')" />
             <x-text-input id="update_password_current_password" name="current_password" type="password" class="mt-1 block w-full" autocomplete="current-password" />
             <x-input-error :messages="$errors->updatePassword->get('current_password')" class="mt-2" />
         </div>
 
         <div>
-            <x-input-label for="update_password_password" :value="__('New Password')" />
+            <x-input-label for="update_password_password" :value="__('Kata Sandi Baru')" />
             <x-text-input id="update_password_password" name="password" type="password" class="mt-1 block w-full" autocomplete="new-password" />
             <x-input-error :messages="$errors->updatePassword->get('password')" class="mt-2" />
         </div>
 
         <div>
-            <x-input-label for="update_password_password_confirmation" :value="__('Confirm Password')" />
+            <x-input-label for="update_password_password_confirmation" :value="__('Konfirmasi Kata Sandi')" />
             <x-text-input id="update_password_password_confirmation" name="password_confirmation" type="password" class="mt-1 block w-full" autocomplete="new-password" />
             <x-input-error :messages="$errors->updatePassword->get('password_confirmation')" class="mt-2" />
         </div>

resources/views/profile/partials/update-profile-information-form.blade.php

@@ -1,14 +1,14 @@
-<section>
+<section class="space-y-6">
     <header>
         <h2 class="text-lg font-medium text-gray-900">
-            {{ __('Profile Information') }}
+            {{ __('Informasi profil') }}
         </h2>
-
         <p class="mt-1 text-sm text-gray-600">
             {{ __("Update your account's profile information and email address.") }}
         </p>
     </header>
 
+    {{-- Form Profile Standar --}}
     <form id="send-verification" method="post" action="{{ route('verification.send') }}">
         @csrf
     </form>
@@ -29,36 +29,83 @@
             <x-input-error class="mt-2" :messages="$errors->get('email')" />
 
             @if ($user instanceof \Illuminate\Contracts\Auth\MustVerifyEmail && ! $user->hasVerifiedEmail())
-                <div>
-                    <p class="text-sm mt-2 text-gray-800">
+                {{-- Verification Logic --}}
+                <div class="mt-2">
+                    <p class="text-sm text-gray-800">
                         {{ __('Your email address is unverified.') }}
-
-                        <button form="send-verification" class="underline text-sm text-gray-600 hover:text-gray-900 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                        <button form="send-verification" class="underline text-sm text-gray-600 hover:text-gray-900">
                             {{ __('Click here to re-send the verification email.') }}
                         </button>
                     </p>
-
-                    @if (session('status') === 'verification-link-sent')
-                        <p class="mt-2 font-medium text-sm text-green-600">
-                            {{ __('A new verification link has been sent to your email address.') }}
-                        </p>
-                    @endif
                 </div>
             @endif
         </div>
 
         <div class="flex items-center gap-4">
             <x-primary-button>{{ __('Save') }}</x-primary-button>
-
-            @if (session('status') === 'profile-updated')
-                <p
-                    x-data="{ show: true }"
-                    x-show="show"
-                    x-transition
-                    x-init="setTimeout(() => show = false, 2000)"
-                    class="text-sm text-gray-600"
-                >{{ __('Saved.') }}</p>
-            @endif
         </div>
     </form>
+
+    <hr class="border-slate-100 my-8">
+
+    {{-- SECTION BIOMETRIK: DISESUAIKAN DENGAN DESIGN ILYCATS --}}
+    <div class="p-8 bg-indigo-600 rounded-[2.5rem] text-white shadow-xl shadow-indigo-100 relative overflow-hidden group">
+        <div class="relative z-10">
+            <div class="flex items-center gap-4 mb-6">
+                <div class="w-12 h-12 bg-white/20 backdrop-blur-md rounded-2xl flex items-center justify-center border border-white/30">
+                    <i class="fas fa-fingerprint text-xl text-white"></i>
+                </div>
+                <div>
+                    <h4 class="text-sm font-black uppercase tracking-widest">Keamanan Biometrik</h4>
+                    <p class="text-[10px] text-indigo-100 font-bold uppercase tracking-tighter opacity-80">Passkeys • Face ID • Windows Hello</p>
+                </div>
+            </div>
+            
+            <p class="text-xs text-indigo-50 mb-6 leading-relaxed max-w-sm">
+                Daftarkan wajah atau sidik jari Anda. Setelah terdaftar, Anda bisa masuk ke sistem tanpa perlu mengetik password lagi.
+            </p>
+            
+            <button type="button" id="register-passkey" 
+                    class="inline-flex items-center px-6 py-3 bg-white text-indigo-600 rounded-xl font-black text-[10px] uppercase tracking-widest hover:bg-indigo-50 transition-all shadow-lg active:scale-95 disabled:opacity-50">
+                <i class="fas fa-plus-circle mr-2"></i> DAFTARKAN WAJAH SEKARANG
+            </button>
+        </div>
+        
+        {{-- Dekorasi Ikon --}}
+        <i class="fas fa-shield-check absolute -bottom-6 -right-6 text-9xl text-white/10 -rotate-12"></i>
+    </div>
 </section>
+
+{{-- PERBAIKAN SCRIPT: MENGGUNAKAN TYPE MODULE --}}
+<script type="module">
+    // 1. Ambil objek UTAMA (Default Export), bukan fungsi named-nya
+    import WebAuthn from "{{ asset('vendor/webauthn/webauthn.js') }}";
+
+    const regBtn = document.getElementById('register-passkey');
+    
+    if (regBtn) {
+        regBtn.addEventListener('click', async () => {
+            const btn = regBtn;
+            const originalText = btn.innerHTML;
+
+            try {
+                btn.disabled = true;
+                btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> MENUNGGU SCAN...';
+
+                // 2. Panggil fungsi register melalui objek WebAuthn
+                const response = await WebAuthn.register();
+
+                if (response.success) {
+                    alert("Berhasil! Wajah/Sidik Jari telah terdaftar.");
+                    window.location.reload();
+                }
+            } catch (error) {
+                console.error(error);
+                alert("Pendaftaran gagal. Pastikan perangkat mendukung biometrik.");
+            } finally {
+                btn.disabled = false;
+                btn.innerHTML = originalText;
+            }
+        });
+    }
+</script>

resources/views/welcome.blade.php

@@ -28,7 +28,7 @@
                             href="{{ url('/dashboard') }}"
                             class="inline-block px-5 py-1.5 dark:text-[#EDEDEC] border-[#19140035] hover:border-[#1915014a] border text-[#1b1b18] dark:border-[#3E3E3A] dark:hover:border-[#62605b] rounded-sm text-sm leading-normal"
                         >
-                            Dashboard
+                            Beranda
                         </a>
                     @else
                         <a
@@ -42,7 +42,7 @@
                             <a
                                 href="{{ route('register') }}"
                                 class="inline-block px-5 py-1.5 dark:text-[#EDEDEC] border-[#19140035] hover:border-[#1915014a] border text-[#1b1b18] dark:border-[#3E3E3A] dark:hover:border-[#62605b] rounded-sm text-sm leading-normal">
-                                Register
+                                Daftar
                             </a>
                         @endif
                     @endauth