initial: bootstrap from BukidBountyApp base

resources/js/Components/Ultimate/UltimateQueryModal.vue

@@ -0,0 +1,194 @@
+<template>
+  <BaseModal
+    :modelValue="show"
+    @update:modelValue="$emit('close')"
+    modalTitle="Ultimate Query Console"
+  >
+    <div class="query-lab-body">
+      <div class="mb-4">
+        <label class="form-label fw-bold text-muted small text-uppercase mb-2 d-flex justify-content-between align-items-center">
+          SQL Query
+          <span v-if="loading" class="spinner-border spinner-border-sm text-primary" role="status"></span>
+        </label>
+        <div class="query-input-container">
+          <textarea 
+            v-model="query" 
+            class="form-control font-monospace rounded-4 p-3 border-2 focus-ring shadow-sm" 
+            rows="6" 
+            placeholder="SELECT * FROM users WHERE active = 1..."
+            spellcheck="false"
+          ></textarea>
+          <div class="d-flex justify-content-end mt-3">
+            <button 
+              @click="execute" 
+              :disabled="loading || !query" 
+              class="btn btn-primary rounded-pill px-4 py-2 d-flex align-items-center gap-2 shadow-sm"
+            >
+              <i class="fas fa-play"></i>
+              Run Query
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Results Section -->
+      <div v-if="results || affectedRows > 0" class="results-container animate-fade-in">
+        <h6 class="fw-bold mb-3 d-flex align-items-center gap-2">
+          <i class="fas fa-database text-success"></i>
+          Query Results
+          <span class="badge bg-secondary rounded-pill small ms-auto" v-if="results">
+            {{ results.length }} rows found
+          </span>
+          <span class="badge bg-info rounded-pill small ms-auto" v-else-if="affectedRows > 0">
+            {{ affectedRows }} rows affected
+          </span>
+        </h6>
+
+        <div class="table-responsive rounded-4 shadow-sm bg-white border overflow-auto" style="max-height: 400px;">
+          <table v-if="results && results.length > 0" class="table table-hover table-sm mb-0">
+            <thead class="bg-light sticky-top">
+              <tr>
+                <th v-for="key in Object.keys(results[0])" :key="key" class="text-uppercase small fw-bold px-3 py-2 border-bottom">
+                  {{ key }}
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="(row, i) in results" :key="i">
+                <td v-for="(val, key) in row" :key="key" class="px-3 py-2 border-bottom font-monospace small">
+                  {{ val }}
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          <div v-else-if="results && results.length === 0" class="p-5 text-center text-muted">
+            <i class="fas fa-empty-set fa-3x mb-3 opacity-25"></i>
+            <p>No results found for this query.</p>
+          </div>
+          <div v-else-if="affectedRows > 0" class="p-4 text-center text-success">
+            <i class="fas fa-check-circle fa-2x mb-2"></i>
+            <p class="mb-0">Query executed successfully. {{ affectedRows }} rows affected.</p>
+          </div>
+        </div>
+      </div>
+
+      <!-- Error Alert -->
+      <div v-if="error" class="alert alert-danger rounded-4 border-0 shadow-sm d-flex align-items-start gap-3 mt-3 animate-shake">
+        <i class="fas fa-exclamation-triangle mt-1"></i>
+        <div>
+          <div class="fw-bold">Query Error</div>
+          <div class="small opacity-75">{{ error }}</div>
+        </div>
+      </div>
+    </div>
+
+    <template #footer>
+      <div class="d-flex w-100 gap-2">
+        <button type="button" class="btn btn-light rounded-pill px-4 flex-fill fw-bold" @click="clear">Clear Results</button>
+        <button type="button" class="btn btn-outline-secondary rounded-pill px-4 flex-fill fw-bold" @click="$emit('close')">Close</button>
+      </div>
+    </template>
+  </BaseModal>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { useUltimate } from '@/composables/useUltimate';
+import BaseModal from '@/Components/Core/BaseModal.vue';
+
+const props = defineProps({
+  show: Boolean,
+});
+
+const emit = defineEmits(['close']);
+
+const { runQuery, loading } = useUltimate();
+const query = ref('');
+const results = ref(null);
+const affectedRows = ref(0);
+const error = ref(null);
+
+const execute = async () => {
+    error.value = null;
+    results.value = null;
+    affectedRows.value = 0;
+    
+    try {
+        const response = await runQuery(query.value);
+        if (response.success) {
+            results.value = response.data || null;
+            affectedRows.value = response.affected || 0;
+        } else {
+            error.value = response.message;
+        }
+    } catch (err) {
+        error.value = err.response?.data?.message || 'Failed to execute query';
+    }
+};
+
+const clear = () => {
+    query.value = '';
+    results.value = null;
+    affectedRows.value = 0;
+    error.value = null;
+};
+</script>
+
+<style scoped>
+.focus-ring:focus {
+    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.15);
+}
+
+.query-lab-body {
+  padding: 1rem;
+}
+
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+::-webkit-scrollbar-track {
+    background: transparent;
+}
+::-webkit-scrollbar-thumb {
+    background: #e2e8f0;
+    border-radius: 10px;
+}
+::-webkit-scrollbar-thumb:hover {
+    background: #cbd5e1;
+}
+
+.animate-fade-in {
+  animation: fadeIn 0.4s ease-out;
+}
+
+.animate-shake {
+  animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes shake {
+  10%, 90% { transform: translate3d(-1px, 0, 0); }
+  20%, 80% { transform: translate3d(2px, 0, 0); }
+  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
+  40%, 60% { transform: translate3d(4px, 0, 0); }
+}
+
+:global(.dark-mode) .table-responsive {
+  background-color: #1e293b;
+  border-color: #334155;
+}
+
+:global(.dark-mode) .table {
+  color: #f8fafc;
+}
+
+:global(.dark-mode) .table thead.bg-light {
+  background-color: #0f172a !important;
+}
+</style>
+