Kasir/resources/js/pages/Sales.vue

<template>
  <mainLayout>
    <!-- Modal Create/Edit Sales -->
    <CreateSales v-if="creatingSales" :isOpen="creatingSales" :sales="detail" @close="closeSales" />

    <EditSales v-if="editingSales" :isOpen="editingSales" :sales="detail" @close="closeEditSales" />

    <!-- Modal Delete -->
    <ConfirmDeleteModal :isOpen="confirmDeleteOpen" title="Hapus Sales"
      message="Apakah Anda yakin ingin menghapus sales ini?" @confirm="confirmDelete" @cancel="closeDeleteModal" />

    <div class="p-6 min-h-[75vh]">
      <p class="font-serif italic text-[25px] text-D">SALES</p>
      <div class="flex justify-between items-center mb-6">

        <button @click="tambahSales"
          v-if="isAdmin"
          class="px-4 py-2 bg-C text-D rounded-md hover:bg-C/80 transition duration-200 flex items-center gap-2">
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
          </svg>
          Tambah Sales
        </button>
      </div>

      <!-- Table Section -->
      <div class="bg-white rounded-lg shadow-md border border-C overflow-x-auto">
        <table class="w-full ">
          <thead class="">
            <tr class="bg-C text-white">
              <th class="px-6 py-4 text-center text-D">
                No
              </th>
              <th class="px-6 py-4 text-center text-D">
                Nama Sales
              </th>
              <th class="px-6 py-4 text-center text-D">
                No HP
              </th>
              <th class="px-6 py-4 text-center text-D">
                Alamat
              </th>
              <th v-if="isAdmin" class="px-6 py-4 text-center text-D">
                Aksi
              </th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in sales" :key="item.id"
              class="border-b border-C hover:bg-gray-50 transition duration-150"
              :class="{ 'bg-gray-50': index % 2 === 1 }">
              <td class="px-6 py-4 border-r border-C text-center font-medium text-gray-900">
                {{ index + 1 }}
              </td>
              <td class="px-6 py-4 border-r border-C text-D">
                {{ item.nama }}
              </td>
              <td class="px-6 py-4 border-r border-C text-gray-800">
                {{ item.no_hp }}
              </td>
              <td class="px-6 py-4 border-r border-C text-gray-800">
                {{ item.alamat }}
              </td>
              <td class="px-6 py-4 text-center" v-if="isAdmin">
                <div class="flex justify-center gap-2">
                  <button @click="ubahSales(item)"
                    class="px-3 py-1 bg-yellow-500 text-white text-sm rounded hover:bg-yellow-600 transition duration-200">
                    Ubah
                  </button>
                  <button @click="hapusSales(item)"
                    class="px-3 py-1 bg-red-500 text-white text-sm rounded hover:bg-red-600 transition duration-200">
                    Hapus
                  </button>
                </div>
              </td>
            </tr>

            <!-- Empty State -->
            <tr v-if="sales.length === 0 && !loading">
              <td colspan="5" class="px-6 py-8 text-center text-gray-500">
                <div class="flex flex-col items-center">
                  <svg class="w-12 h-12 text-gray-400 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2 2v-5m16 0h-2M4 13h2" />
                  </svg>
                  <p>Tidak ada data sales</p>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <!-- Loading State -->
      <div v-if="loading" class="flex justify-center items-center py-8">
        <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-[#c6a77d]"></div>
        <span class="ml-2 text-gray-600">Memuat data...</span>
      </div>
    </div>
  </mainLayout>
</template>

<script setup>
import { ref, onMounted } from "vue";
import axios from "axios";
import mainLayout from "../layouts/mainLayout.vue";
import CreateSales from "../components/CreateSales.vue";
import ConfirmDeleteModal from "../components/ConfirmDeleteModal.vue";
import EditSales from "../components/EditSales.vue";

const isAdmin = localStorage.getItem("role") === "owner";

// State
const sales = ref([]);
const loading = ref(false);
const creatingSales = ref(false);
const detail = ref(null);
const editingSales = ref(false);
const confirmDeleteOpen = ref(false);
const salesToDelete = ref(null);

// Fetch data dari API
const fetchSales = async () => {
  loading.value = true;
  try {
    const response = await axios.get("/api/sales", {
      headers: {
        Authorization: `Bearer ${localStorage.getItem("token")}`,
      },
    });
    sales.value = response.data;
  } catch (error) {
    console.error("Error fetching sales:", error);
  } finally {
    loading.value = false;
  }
};

// Tambah
const tambahSales = () => {
  detail.value = null;
  creatingSales.value = true;
};

// Ubah
const ubahSales = (item) => {
  detail.value = item;
  editingSales.value = true;
};

// Hapus
const hapusSales = (item) => {
  salesToDelete.value = item;
  confirmDeleteOpen.value = true;
};

const confirmDelete = async () => {
  try {
    await axios.delete(`/api/sales/${salesToDelete.value.id}`, {
      headers: {
        Authorization: `Bearer ${localStorage.getItem("token")}`,
      },
    });
    fetchSales();
    confirmDeleteOpen.value = false;
  } catch (error) {
    console.error("Error deleting sales:", error);
  }
};

const closeDeleteModal = () => {
  confirmDeleteOpen.value = false;
  salesToDelete.value = null;
};

// Tutup modal Create/Edit
const closeSales = () => {
  creatingSales.value = false;
  fetchSales();
};

const closeEditSales = () => {
  editingSales.value = false;
  fetchSales();
};

// Lifecycle
onMounted(() => {
  fetchSales();
});
</script>