From 89b36b7d1f991c5e63aa6eeb971f40f6b4ecc39e Mon Sep 17 00:00:00 2001
From: bagus-arie05 <bagus.arie05@gmail.com>
Date: Wed, 27 Aug 2025 15:52:38 +0700
Subject: [PATCH] update komponen, data pasien, list pasien, screen

---
 components/TabelLayanan.vue        |  17 +-
 components/TabelListPasien.vue     | 318 +++++++++++++++++++++++++++++
 pages/List-Pasien.vue              | 310 ++++++++++++++++++++++++++++
 pages/Setting/Screen/edit/[id].vue | 204 ++++++++++++++++++
 pages/Setting/Screen/index.vue     | 151 ++++++++++++++
 pages/data-pasien/edit/[id].vue    | 307 ++++++++++++++++++++++++++++
 pages/data-pasien/index.vue        | 312 ++++++++++++++++++++++++++++
 7 files changed, 1618 insertions(+), 1 deletion(-)
 create mode 100644 components/TabelListPasien.vue
 create mode 100644 pages/List-Pasien.vue
 create mode 100644 pages/Setting/Screen/edit/[id].vue
 create mode 100644 pages/Setting/Screen/index.vue
 create mode 100644 pages/data-pasien/edit/[id].vue
 create mode 100644 pages/data-pasien/index.vue

diff --git a/components/TabelLayanan.vue b/components/TabelLayanan.vue
index afaaf1c..783f1a9 100644
--- a/components/TabelLayanan.vue
+++ b/components/TabelLayanan.vue
@@ -9,8 +9,13 @@
       <v-checkbox
         :model-value="isSelected(item.id)"
         @change="toggleService(item.id)"
+        color="primary"
       ></v-checkbox>
     </template>
+    
+    <template v-slot:item.no="{ item }">
+      {{ item.no }}
+    </template>
   </v-data-table>
 </template>
 
@@ -34,4 +39,14 @@ const toggleService = (id) => {
   
   emit('update:selectedItems', newSelection);
 };
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+.v-data-table {
+  border-radius: 8px;
+}
+
+.v-checkbox {
+  justify-content: center;
+}
+</style>
\ No newline at end of file
diff --git a/components/TabelListPasien.vue b/components/TabelListPasien.vue
new file mode 100644
index 0000000..3b59911
--- /dev/null
+++ b/components/TabelListPasien.vue
@@ -0,0 +1,318 @@
+<template>
+  <div>
+    <!-- Filter Section -->
+    <v-row class="mb-4">
+      <v-col cols="12" md="3">
+        <v-text-field
+          v-model="filterDate"
+          type="date"
+          label="Tanggal"
+          density="compact"
+          hide-details
+          variant="outlined"
+        />
+      </v-col>
+      <v-col cols="12" md="3">
+        <v-select
+          v-model="filterStatus"
+          :items="statusOptions"
+          label="Status"
+          density="compact"
+          hide-details
+          variant="outlined"
+        />
+      </v-col>
+      <v-col cols="12" md="6" class="d-flex align-center gap-2">
+        <v-btn color="primary" @click="searchData">
+          Search
+        </v-btn>
+        <v-btn color="success" variant="outlined" @click="exportLaporan">
+          Laporan Pasien
+        </v-btn>
+        <v-btn color="info" variant="outlined" @click="exportLaporanPerKlinik">
+          Laporan Pasien Per Klinik
+        </v-btn>
+      </v-col>
+    </v-row>
+
+    <!-- Table Controls -->
+    <v-row class="mb-3">
+      <v-col cols="12" md="6" class="d-flex align-center">
+        <span class="mr-2">Show</span>
+        <v-select
+          v-model="itemsPerPage"
+          :items="[10, 25, 50, 100]"
+          density="compact"
+          hide-details
+          style="width: 80px"
+          variant="outlined"
+        />
+        <span class="ml-2">entries</span>
+      </v-col>
+      <v-col cols="12" md="6" class="d-flex justify-end">
+        <div class="d-flex align-center">
+          <span class="mr-2">Search:</span>
+          <v-text-field
+            v-model="search"
+            density="compact"
+            hide-details
+            style="min-width: 200px"
+            variant="outlined"
+          />
+        </div>
+      </v-col>
+    </v-row>
+
+    <!-- Data Table -->
+    <v-data-table
+      :headers="headers"
+      :items="paginatedItems"
+      :search="search"
+      hide-default-footer
+      class="elevation-1"
+    >
+      <!-- Custom Status Column -->
+      <template v-slot:item.status="{ item }">
+        <v-chip
+          :color="getStatusColor(item.status)"
+          size="small"
+          variant="flat"
+        >
+          {{ item.status }}
+        </v-chip>
+      </template>
+
+      <!-- Custom Keterangan Column -->
+      <template v-slot:item.keterangan="{ item }">
+        <span :class="getKeteranganClass(item.keterangan)">
+          {{ item.keterangan }}
+        </span>
+      </template>
+
+      <!-- No Data -->
+      <template #no-data>
+        <div class="text-center pa-4">
+          No data available in table
+        </div>
+      </template>
+    </v-data-table>
+
+    <!-- Pagination -->
+    <div class="d-flex justify-space-between align-center pa-4">
+      <div class="text-body-2 text-grey-darken-1">
+        Showing {{ currentPageStart }} to {{ currentPageEnd }} of {{ totalFilteredItems }} entries
+      </div>
+      <div class="d-flex align-center">
+        <v-btn
+          :disabled="currentPage === 1"
+          @click="previousPage"
+          variant="text"
+          size="small"
+        >
+          Previous
+        </v-btn>
+        <template v-for="page in visiblePages" :key="page">
+          <v-btn
+            v-if="page !== '...'"
+            :color="page === currentPage ? 'primary' : ''"
+            :variant="page === currentPage ? 'flat' : 'text'"
+            @click="goToPage(page)"
+            size="small"
+            class="mx-1"
+            min-width="40"
+          >
+            {{ page }}
+          </v-btn>
+          <span v-else class="mx-1">...</span>
+        </template>
+        <v-btn
+          :disabled="currentPage === totalPages"
+          @click="nextPage"
+          variant="text"
+          size="small"
+        >
+          Next
+        </v-btn>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue'
+
+const props = defineProps({
+  items: {
+    type: Array,
+    default: () => []
+  }
+})
+
+const emit = defineEmits(['search', 'export-laporan', 'export-laporan-per-klinik'])
+
+// Filter states
+const filterDate = ref('')
+const filterStatus = ref('Semua')
+const search = ref('')
+
+// Pagination states
+const itemsPerPage = ref(10)
+const currentPage = ref(1)
+
+// Status options
+const statusOptions = ['Semua', 'Online', 'Offline', 'Tunggu Daftar', 'Barcode']
+
+// Table headers
+const headers = [
+  { title: 'No', key: 'no', sortable: false, width: '60px' },
+  { title: 'Tgl Periksa', key: 'tglPeriksa', sortable: true },
+  { title: 'NIK', key: 'nik', sortable: true },
+  { title: 'RM', key: 'rm', sortable: true },
+  { title: 'Barcode', key: 'barcode', sortable: true },
+  { title: 'No Antrian', key: 'noAntrian', sortable: true },
+  { title: 'Klinik', key: 'klinik', sortable: true },
+  { title: 'First Name Last Name', key: 'fullName', sortable: true },
+  { title: 'Shift', key: 'shift', sortable: true },
+  { title: 'Pembayaran', key: 'pembayaran', sortable: true },
+  { title: 'Keterangan', key: 'keterangan', sortable: true },
+  { title: 'Status', key: 'status', sortable: true }
+]
+
+// Computed properties
+const filteredItems = computed(() => {
+  let filtered = props.items
+
+  // Filter by date
+  if (filterDate.value) {
+    filtered = filtered.filter(item => 
+      item.tglPeriksa === filterDate.value
+    )
+  }
+
+  // Filter by status
+  if (filterStatus.value && filterStatus.value !== 'Semua') {
+    filtered = filtered.filter(item => 
+      item.status === filterStatus.value
+    )
+  }
+
+  return filtered
+})
+
+const totalFilteredItems = computed(() => filteredItems.value.length)
+const totalPages = computed(() => Math.ceil(totalFilteredItems.value / itemsPerPage.value))
+
+const paginatedItems = computed(() => {
+  const start = (currentPage.value - 1) * itemsPerPage.value
+  const end = start + itemsPerPage.value
+  return filteredItems.value.slice(start, end).map((item, index) => ({
+    ...item,
+    no: start + index + 1
+  }))
+})
+
+const currentPageStart = computed(() => 
+  totalFilteredItems.value === 0 ? 0 : (currentPage.value - 1) * itemsPerPage.value + 1
+)
+
+const currentPageEnd = computed(() => 
+  Math.min(currentPage.value * itemsPerPage.value, totalFilteredItems.value)
+)
+
+const visiblePages = computed(() => {
+  const pages = []
+  const total = totalPages.value
+  const current = currentPage.value
+
+  if (total <= 7) {
+    for (let i = 1; i <= total; i++) {
+      pages.push(i)
+    }
+  } else {
+    if (current <= 4) {
+      for (let i = 1; i <= 5; i++) {
+        pages.push(i)
+      }
+      pages.push('...')
+      pages.push(total)
+    } else if (current >= total - 3) {
+      pages.push(1)
+      pages.push('...')
+      for (let i = total - 4; i <= total; i++) {
+        pages.push(i)
+      }
+    } else {
+      pages.push(1)
+      pages.push('...')
+      for (let i = current - 1; i <= current + 1; i++) {
+        pages.push(i)
+      }
+      pages.push('...')
+      pages.push(total)
+    }
+  }
+  return pages
+})
+
+// Methods
+const searchData = () => {
+  currentPage.value = 1
+  emit('search', {
+    date: filterDate.value,
+    status: filterStatus.value
+  })
+}
+
+const exportLaporan = () => {
+  emit('export-laporan')
+}
+
+const exportLaporanPerKlinik = () => {
+  emit('export-laporan-per-klinik')
+}
+
+const getStatusColor = (status) => {
+  const colorMap = {
+    'Online': 'success',
+    'Offline': 'error', 
+    'Tunggu Daftar': 'warning',
+    'Barcode': 'info'
+  }
+  return colorMap[status] || 'default'
+}
+
+const getKeteranganClass = (keterangan) => {
+  return keterangan === 'Online' ? 'text-success' : ''
+}
+
+const previousPage = () => {
+  if (currentPage.value > 1) {
+    currentPage.value--
+  }
+}
+
+const nextPage = () => {
+  if (currentPage.value < totalPages.value) {
+    currentPage.value++
+  }
+}
+
+const goToPage = (page) => {
+  currentPage.value = page
+}
+
+// Watchers
+watch(itemsPerPage, () => {
+  currentPage.value = 1
+})
+
+watch([filterDate, filterStatus], () => {
+  currentPage.value = 1
+})
+</script>
+
+<style scoped>
+.text-success {
+  color: rgb(76, 175, 80) !important;
+}
+</style>
\ No newline at end of file
diff --git a/pages/List-Pasien.vue b/pages/List-Pasien.vue
new file mode 100644
index 0000000..1db5cb0
--- /dev/null
+++ b/pages/List-Pasien.vue
@@ -0,0 +1,310 @@
+<template>
+  <div>
+    <!-- Page Header -->
+    <v-container fluid>
+      <v-row>
+        <v-col cols="12">
+          <h1 class="text-h4 font-weight-bold mb-6">List Pasien</h1>
+        </v-col>
+      </v-row>
+
+      <!-- Main Content Card -->
+      <v-card elevation="2">
+        <v-card-text class="pa-6">
+          <TabelListPasien
+            :items="pasienData"
+            @search="handleSearch"
+            @export-laporan="handleExportLaporan"
+            @export-laporan-per-klinik="handleExportLaporanPerKlinik"
+          />
+        </v-card-text>
+      </v-card>
+    </v-container>
+
+    <!-- Loading Overlay -->
+    <v-overlay v-model="loading" class="align-center justify-center">
+      <v-progress-circular
+        color="primary"
+        indeterminate
+        size="64"
+      />
+    </v-overlay>
+
+    <!-- Success Snackbar -->
+    <v-snackbar
+      v-model="snackbar.show"
+      :color="snackbar.color"
+      :timeout="3000"
+      location="top right"
+    >
+      {{ snackbar.message }}
+      <template v-slot:actions>
+        <v-btn
+          variant="text"
+          @click="snackbar.show = false"
+        >
+          Close
+        </v-btn>
+      </template>
+    </v-snackbar>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import TabelListPasien from '~/components/TabelListPasien.vue'
+
+// Meta untuk SEO
+definePageMeta({
+  title: 'List Pasien',
+  layout: 'default'
+})
+
+// Reactive states
+const loading = ref(false)
+const snackbar = ref({
+  show: false,
+  message: '',
+  color: 'success'
+})
+
+// Sample data (replace with actual API call)
+const pasienData = ref([
+  {
+    tglPeriksa: '27/08/2025',
+    nik: '3507264104730004',
+    rm: '11412584',
+    barcode: '250627100001',
+    noAntrian: 'HQ1001',
+    klinik: 'HOM',
+    fullName: 'Binti Almatul',
+    shift: 'Shift 1',
+    pembayaran: 'JKN',
+    keterangan: 'Online',
+    status: 'Tunggu Daftar'
+  },
+  {
+    tglPeriksa: '27/08/2025',
+    nik: '3504096063630001',
+    rm: '',
+    barcode: '250627100002',
+    noAntrian: 'QB1001',
+    klinik: 'KANDUNGAN',
+    fullName: 'maret kumalal',
+    shift: 'Shift 1',
+    pembayaran: 'JKN',
+    keterangan: 'Online',
+    status: 'Tunggu Daftar'
+  },
+  {
+    tglPeriksa: '27/08/2025',
+    nik: '3507114102250002',
+    rm: '11555560',
+    barcode: '250627100003',
+    noAntrian: 'QB1002',
+    klinik: 'KANDUNGAN',
+    fullName: 'ayu rafti lelu amanda',
+    shift: 'Shift 1',
+    pembayaran: 'JKN',
+    keterangan: 'Online',
+    status: 'Tunggu Daftar'
+  },
+  {
+    tglPeriksa: '27/08/2025',
+    nik: '3508185040150002',
+    rm: '11333655',
+    barcode: '250627100004',
+    noAntrian: 'AN1001',
+    klinik: 'ANAK',
+    fullName: 'Erin Wahyuni',
+    shift: 'Shift 1',
+    pembayaran: 'JKN',
+    keterangan: 'Online',
+    status: 'Tunggu Daftar'
+  },
+  {
+    tglPeriksa: '27/08/2025',
+    nik: '3515085040110004',
+    rm: '11585554',
+    barcode: '250627100005',
+    noAntrian: 'IP1001',
+    klinik: 'IPD',
+    fullName: 'Yohana Karina Pusplta Sari',
+    shift: 'Shift 1',
+    pembayaran: 'JKN',
+    keterangan: 'Online',
+    status: 'Tunggu Daftar'
+  },
+  {
+    tglPeriksa: '27/08/2025',
+    nik: '3506246105750002',
+    rm: '11527608',
+    barcode: '250627100006',
+    noAntrian: 'IP1001',
+    klinik: 'IPD',
+    fullName: 'Elok Suharsti',
+    shift: 'Shift 1',
+    pembayaran: 'JKN',
+    keterangan: 'Online',
+    status: 'Tunggu Daftar'
+  },
+  {
+    tglPeriksa: '27/08/2025',
+    nik: '',
+    rm: '',
+    barcode: '250627100007',
+    noAntrian: 'HQ1002',
+    klinik: 'HOM',
+    fullName: '',
+    shift: 'Shift 1',
+    pembayaran: 'JKN',
+    keterangan: 'Offline',
+    status: 'Barcode'
+  },
+  {
+    tglPeriksa: '27/08/2025',
+    nik: '',
+    rm: '',
+    barcode: '250627100008',
+    noAntrian: 'IP1002',
+    klinik: 'IPD',
+    fullName: '',
+    shift: 'Shift 1',
+    pembayaran: 'JKN',
+    keterangan: 'Offline',
+    status: 'Barcode'
+  },
+  {
+    tglPeriksa: '27/08/2025',
+    nik: '',
+    rm: '',
+    barcode: '250627100009',
+    noAntrian: 'IP1001',
+    klinik: 'IPD',
+    fullName: '',
+    shift: 'Shift 1',
+    pembayaran: 'JKN',
+    keterangan: 'Offline',
+    status: 'Barcode'
+  },
+  {
+    tglPeriksa: '27/08/2025',
+    nik: '',
+    rm: '',
+    barcode: '250627100010',
+    noAntrian: 'IP1001',
+    klinik: 'IPD',
+    fullName: '',
+    shift: 'Shift 1',
+    pembayaran: 'JKN',
+    keterangan: 'Offline',
+    status: 'Barcode'
+  }
+])
+
+// Methods
+const handleSearch = async (filters) => {
+  loading.value = true
+  
+  try {
+    // Simulate API call
+    await new Promise(resolve => setTimeout(resolve, 1000))
+    
+    // Here you would typically call your API with filters
+    console.log('Search filters:', filters)
+    
+    showSnackbar('Data berhasil difilter', 'success')
+  } catch (error) {
+    console.error('Error searching data:', error)
+    showSnackbar('Gagal memfilter data', 'error')
+  } finally {
+    loading.value = false
+  }
+}
+
+const handleExportLaporan = async () => {
+  loading.value = true
+  
+  try {
+    // Simulate export process
+    await new Promise(resolve => setTimeout(resolve, 2000))
+    
+    // Here you would typically call your export API
+    console.log('Exporting laporan pasien...')
+    
+    showSnackbar('Laporan pasien berhasil diexport', 'success')
+  } catch (error) {
+    console.error('Error exporting laporan:', error)
+    showSnackbar('Gagal export laporan pasien', 'error')
+  } finally {
+    loading.value = false
+  }
+}
+
+const handleExportLaporanPerKlinik = async () => {
+  loading.value = true
+  
+  try {
+    // Simulate export process
+    await new Promise(resolve => setTimeout(resolve, 2000))
+    
+    // Here you would typically call your export API
+    console.log('Exporting laporan pasien per klinik...')
+    
+    showSnackbar('Laporan pasien per klinik berhasil diexport', 'success')
+  } catch (error) {
+    console.error('Error exporting laporan per klinik:', error)
+    showSnackbar('Gagal export laporan pasien per klinik', 'error')
+  } finally {
+    loading.value = false
+  }
+}
+
+const showSnackbar = (message, color = 'success') => {
+  snackbar.value = {
+    show: true,
+    message,
+    color
+  }
+}
+
+const fetchPasienData = async () => {
+  loading.value = true
+  
+  try {
+    // Simulate API call to fetch patient data
+    await new Promise(resolve => setTimeout(resolve, 1000))
+    
+    // Here you would typically call your API
+    // const response = await $fetch('/api/pasien')
+    // pasienData.value = response.data
+    
+    console.log('Patient data loaded successfully')
+  } catch (error) {
+    console.error('Error fetching patient data:', error)
+    showSnackbar('Gagal memuat data pasien', 'error')
+  } finally {
+    loading.value = false
+  }
+}
+
+// Lifecycle
+onMounted(() => {
+  fetchPasienData()
+})
+
+// Head untuk SEO
+useHead({
+  title: 'List Pasien - Antrean RSSA',
+  meta: [
+    {
+      name: 'description',
+      content: 'Daftar master data seluruh pasien rumah sakit'
+    }
+  ]
+})
+</script>
+
+<style scoped>
+/* Custom styles if needed */
+</style>
\ No newline at end of file
diff --git a/pages/Setting/Screen/edit/[id].vue b/pages/Setting/Screen/edit/[id].vue
new file mode 100644
index 0000000..8b94631
--- /dev/null
+++ b/pages/Setting/Screen/edit/[id].vue
@@ -0,0 +1,204 @@
+<template>
+  <div class="screen-edit">
+    <!-- Header -->
+    <div class="d-flex align-center mb-4">
+      <v-btn icon="mdi-arrow-left" @click="goBack" class="mr-2"></v-btn>
+      <h2>Edit Screen</h2>
+    </div>
+
+    <!-- Screen Selection Cards -->
+    <div class="screen-cards mb-6">
+      <v-row>
+        <v-col cols="12" md="4" v-for="screen in screens" :key="screen.id">
+          <v-card
+            :class="['screen-card', { active: selectedScreen?.id === screen.id }]"
+            @click="selectScreen(screen)"
+            elevation="2"
+          >
+            <v-card-title class="text-center">
+              {{ screen.nama }}
+            </v-card-title>
+          </v-card>
+        </v-col>
+      </v-row>
+    </div>
+
+    <!-- Selected Screen Display -->
+    <div v-if="selectedScreen" class="mb-4">
+      <v-chip color="primary" size="large">
+        Selected: {{ selectedScreen.nama }}
+      </v-chip>
+    </div>
+
+    <!-- Clinic Selection Table -->
+    <TabelLayanan
+      v-if="selectedScreen"
+      :headers="computedHeaders"
+      :items="klinikItems"
+      :selectedItems="selectedKlinik"
+      @update:selectedItems="updateSelectedKlinik"
+    />
+
+    <!-- Action Buttons -->
+    <div class="d-flex justify-end gap-4 mt-6">
+      <v-btn variant="outlined" @click="cancel">
+        Cancel
+      </v-btn>
+      <v-btn color="warning" @click="submit" :disabled="!selectedScreen">
+        Submit
+      </v-btn>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+import TabelLayanan from '~/components/TabelLayanan.vue';
+
+// Get route parameter
+const route = useRoute();
+const screenId = route.params.id;
+
+// Data
+const selectedScreen = ref(null);
+const selectedKlinik = ref([]);
+
+const screens = ref([
+  { id: 1, nama: 'Screen 1' },
+  { id: 2, nama: 'Screen 2' },
+  { id: 3, nama: 'Screen 3' }
+]);
+
+const klinikItems = ref([
+  { id: 1, no: 1, nama_klinik: 'ANAK' },
+  { id: 2, no: 2, nama_klinik: 'ANESTESI' },
+  { id: 3, no: 3, nama_klinik: 'BEDAH' },
+  { id: 4, no: 4, nama_klinik: 'GIGI DAN MULUT' },
+  { id: 5, no: 5, nama_klinik: 'GERIATRI' },
+  { id: 6, no: 6, nama_klinik: 'GIZI' },
+  { id: 7, no: 7, nama_klinik: 'IPD' },
+  { id: 8, no: 8, nama_klinik: 'JANTUNG' },
+  { id: 9, no: 9, nama_klinik: 'JIWA' },
+  { id: 10, no: 10, nama_klinik: 'KUL KEL' },
+  { id: 11, no: 11, nama_klinik: 'KOMPLEMENTER' },
+  { id: 12, no: 12, nama_klinik: 'MATA' },
+  { id: 13, no: 13, nama_klinik: 'SARAF' },
+  { id: 14, no: 14, nama_klinik: 'KANDUNGAN' },
+  { id: 15, no: 15, nama_klinik: 'ONKOLOGI' },
+  { id: 16, no: 16, nama_klinik: 'PARU' },
+  { id: 17, no: 17, nama_klinik: 'RADIOTERAPI' },
+  { id: 18, no: 18, nama_klinik: 'REHAB MEDIK' },
+  { id: 19, no: 19, nama_klinik: 'THT' },
+  { id: 20, no: 20, nama_klinik: 'MCU' },
+  { id: 21, no: 21, nama_klinik: 'KEMOTERAPI' },
+  { id: 22, no: 22, nama_klinik: 'R. TINDAKAN' },
+  { id: 23, no: 23, nama_klinik: 'HOM' }
+]);
+
+// Computed headers based on selected screen
+const computedHeaders = computed(() => {
+  return [
+    { title: 'No', key: 'no', sortable: false, width: '80px' },
+    { title: 'Nama Klinik', key: 'nama_klinik', sortable: true },
+    { title: 'Pilih', key: 'pilih', sortable: false, width: '100px' }
+  ];
+});
+
+// Methods
+const selectScreen = (screen) => {
+  selectedScreen.value = screen;
+  loadScreenData(screen.id);
+};
+
+const loadScreenData = (screenId) => {
+  // Simulate loading existing selections for the screen
+  switch(parseInt(screenId)) {
+    case 1:
+      selectedKlinik.value = [1, 2, 3, 4, 5, 6, 7, 8]; // ANAK, ANESTESI, etc.
+      break;
+    case 2:
+      selectedKlinik.value = [9, 10, 11, 12, 13, 14, 15, 16]; // JIWA, KUL KEL, etc.
+      break;
+    case 3:
+      selectedKlinik.value = [17, 18, 19, 20, 21, 22, 23]; // RADIOTERAPI, REHAB MEDIK, etc.
+      break;
+    default:
+      selectedKlinik.value = [];
+  }
+};
+
+const updateSelectedKlinik = (newSelection) => {
+  selectedKlinik.value = newSelection;
+};
+
+const submit = () => {
+  if (!selectedScreen.value) {
+    alert('Please select a screen first');
+    return;
+  }
+
+  // Simulate API call to save the configuration
+  const data = {
+    screenId: selectedScreen.value.id,
+    selectedKlinik: selectedKlinik.value
+  };
+
+  console.log('Saving configuration:', data);
+  alert('Configuration saved successfully!');
+  goBack();
+};
+
+const cancel = () => {
+  goBack();
+};
+
+const goBack = () => {
+  navigateTo('/setting/screen');
+};
+
+// Lifecycle
+onMounted(() => {
+  // Auto-select screen based on route parameter
+  if (screenId) {
+    const screen = screens.value.find(s => s.id == screenId);
+    if (screen) {
+      selectScreen(screen);
+    }
+  }
+});
+</script>
+
+<style scoped>
+.screen-edit {
+  padding: 20px;
+}
+
+.screen-cards {
+  margin-bottom: 2rem;
+}
+
+.screen-card {
+  cursor: pointer;
+  transition: all 0.3s ease;
+  border: 2px solid transparent;
+}
+
+.screen-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+}
+
+.screen-card.active {
+  border-color: #1976d2;
+  background-color: #f3f7ff;
+}
+
+.screen-card .v-card-title {
+  font-weight: 600;
+  padding: 20px;
+}
+
+.gap-4 {
+  gap: 16px;
+}
+</style>
\ No newline at end of file
diff --git a/pages/Setting/Screen/index.vue b/pages/Setting/Screen/index.vue
new file mode 100644
index 0000000..6be789b
--- /dev/null
+++ b/pages/Setting/Screen/index.vue
@@ -0,0 +1,151 @@
+<template>
+  <div class="screen-list">
+    <!-- Header -->
+    <div class="d-flex justify-space-between align-center mb-4">
+      <h2>Screen</h2>
+      <div class="d-flex gap-2">
+        <v-btn color="primary" variant="outlined" prepend-icon="mdi-eye">
+          View
+        </v-btn>
+        <v-btn color="warning" prepend-icon="mdi-pencil">
+          Edit
+        </v-btn>
+      </div>
+    </div>
+
+    <!-- Controls -->
+    <div class="d-flex justify-space-between align-center mb-4">
+      <div class="d-flex align-center gap-2">
+        <span>Show</span>
+        <v-select
+          v-model="itemsPerPage"
+          :items="[10, 25, 50, 100]"
+          density="compact"
+          variant="outlined"
+          style="width: 80px;"
+        ></v-select>
+        <span>entries</span>
+      </div>
+      
+      <div class="d-flex align-center gap-2">
+        <span>Search:</span>
+        <v-text-field
+          v-model="search"
+          density="compact"
+          variant="outlined"
+          hide-details
+          style="width: 200px;"
+        ></v-text-field>
+      </div>
+    </div>
+
+    <!-- Table -->
+    <v-data-table
+      :headers="headers"
+      :items="screenItems"
+      :items-per-page="itemsPerPage"
+      :search="search"
+      class="elevation-1"
+    >
+      <template v-slot:item.no="{ index }">
+        {{ index + 1 }}
+      </template>
+      
+      <template v-slot:item.klinik="{ item }">
+        <div class="klinik-tags">
+          <v-chip
+            v-for="klinik in item.klinik"
+            :key="klinik"
+            size="small"
+            class="ma-1"
+            color="red"
+            text-color="white"
+          >
+            {{ klinik }}
+          </v-chip>
+        </div>
+      </template>
+
+      <template v-slot:item.actions="{ item }">
+        <v-btn
+          icon="mdi-pencil"
+          size="small"
+          color="primary"
+          @click="editScreen(item)"
+        ></v-btn>
+      </template>
+    </v-data-table>
+
+    <!-- Footer -->
+    <div class="d-flex justify-space-between align-center mt-4">
+      <div>
+        Showing {{ currentPageStart }} to {{ currentPageEnd }} of {{ totalItems }} entries
+      </div>
+      
+      <v-pagination
+        v-model="currentPage"
+        :length="totalPages"
+        :total-visible="5"
+      ></v-pagination>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+
+// Data
+const search = ref('');
+const itemsPerPage = ref(10);
+const currentPage = ref(1);
+
+const headers = [
+  { title: 'No', key: 'no', sortable: false, width: '60px' },
+  { title: 'Nama Screen', key: 'nama_screen', sortable: true },
+  { title: 'Klinik', key: 'klinik', sortable: false },
+  { title: 'Actions', key: 'actions', sortable: false, width: '100px' }
+];
+
+const screenItems = ref([
+  {
+    id: 1,
+    nama_screen: 'Layar Screen 1',
+    klinik: ['ANAK', 'ANESTESI', 'BEDAH', 'GIGI DAN MULUT', 'GERIATRI', 'GIZI', 'IPD', 'JANTUNG']
+  },
+  {
+    id: 2,
+    nama_screen: 'Layar Screen 2',
+    klinik: ['JIWA', 'KUL KEL', 'KOMPLEMENTER', 'MATA', 'SARAF', 'KANDUNGAN', 'ONKOLOGI', 'PARU']
+  },
+  {
+    id: 3,
+    nama_screen: 'Layar Screen 3',
+    klinik: ['RADIOTERAPI', 'REHAB MEDIK', 'THT', 'MCU', 'KEMOTERAPI', 'R. TINDAKAN', 'HOM']
+  }
+]);
+
+// Computed
+const totalItems = computed(() => screenItems.value.length);
+const totalPages = computed(() => Math.ceil(totalItems.value / itemsPerPage.value));
+const currentPageStart = computed(() => (currentPage.value - 1) * itemsPerPage.value + 1);
+const currentPageEnd = computed(() => Math.min(currentPage.value * itemsPerPage.value, totalItems.value));
+
+// Methods
+const editScreen = (item) => {
+  navigateTo(`/setting/screen/edit/${item.id}`);
+};
+</script>
+
+<style scoped>
+.screen-list {
+  padding: 20px;
+}
+
+.klinik-tags {
+  max-width: 600px;
+}
+
+.gap-2 {
+  gap: 8px;
+}
+</style>
\ No newline at end of file
diff --git a/pages/data-pasien/edit/[id].vue b/pages/data-pasien/edit/[id].vue
new file mode 100644
index 0000000..8fc6e6d
--- /dev/null
+++ b/pages/data-pasien/edit/[id].vue
@@ -0,0 +1,307 @@
+<template>
+  <div class="edit-pasien">
+    <!-- Header -->
+    <div class="d-flex align-center mb-4">
+      <v-btn icon="mdi-arrow-left" @click="goBack" class="mr-2"></v-btn>
+      <h2>Edit Pasien</h2>
+    </div>
+
+    <!-- Form -->
+    <v-card class="pa-6" elevation="2">
+      <v-form ref="form" v-model="valid">
+        <v-row>
+          <!-- Tanggal Daftar -->
+          <v-col cols="12" md="6">
+            <v-text-field
+              v-model="formData.tanggal_daftar"
+              label="Tanggal Daftar"
+              variant="outlined"
+              readonly
+              density="compact"
+            ></v-text-field>
+          </v-col>
+
+          <!-- Tanggal Periksa -->
+          <v-col cols="12" md="6">
+            <v-text-field
+              v-model="formData.tanggal_periksa"
+              label="Tanggal Periksa"
+              variant="outlined"
+              type="date"
+              density="compact"
+              :rules="[rules.required]"
+            ></v-text-field>
+          </v-col>
+
+          <!-- No Barcode -->
+          <v-col cols="12" md="6">
+            <v-text-field
+              v-model="formData.no_barcode"
+              label="No Barcode"
+              variant="outlined"
+              readonly
+              density="compact"
+            ></v-text-field>
+          </v-col>
+
+          <!-- No Antrian -->
+          <v-col cols="12" md="6">
+            <v-text-field
+              v-model="formData.no_antrian"
+              label="No Antrian"
+              variant="outlined"
+              readonly
+              density="compact"
+            ></v-text-field>
+          </v-col>
+
+          <!-- No Klinik -->
+          <v-col cols="12" md="6">
+            <v-text-field
+              v-model="formData.no_klinik"
+              label="No Klinik"
+              variant="outlined"
+              placeholder="Belum Mendapatkan Antrian Klinik"
+              density="compact"
+            ></v-text-field>
+          </v-col>
+
+          <!-- No Rekammedik -->
+          <v-col cols="12" md="6">
+            <v-text-field
+              v-model="formData.no_rekammedik"
+              label="No Rekammedik"
+              variant="outlined"
+              density="compact"
+            ></v-text-field>
+          </v-col>
+
+          <!-- Klinik -->
+          <v-col cols="12" md="6">
+            <v-select
+              v-model="formData.klinik"
+              label="Klinik"
+              :items="klinikOptions"
+              variant="outlined"
+              density="compact"
+              :rules="[rules.required]"
+            ></v-select>
+          </v-col>
+
+          <!-- Shift -->
+          <v-col cols="12" md="6">
+            <v-select
+              v-model="formData.shift"
+              label="Shift"
+              :items="shiftOptions"
+              variant="outlined"
+              density="compact"
+              :rules="[rules.required]"
+            ></v-select>
+          </v-col>
+
+          <!-- Keterangan -->
+          <v-col cols="12">
+            <v-text-field
+              v-model="formData.keterangan"
+              label="Keterangan"
+              variant="outlined"
+              density="compact"
+              readonly
+            >
+              <template v-slot:append-inner>
+                <span class="text-red font-weight-bold">
+                  {{ formData.keterangan }}
+                </span>
+              </template>
+            </v-text-field>
+          </v-col>
+
+          <!-- Pembayaran -->
+          <v-col cols="12" md="6">
+            <v-select
+              v-model="formData.pembayaran"
+              label="Pembayaran"
+              :items="pembayaranOptions"
+              variant="outlined"
+              density="compact"
+              :rules="[rules.required]"
+            ></v-select>
+          </v-col>
+        </v-row>
+
+        <!-- Action Buttons -->
+        <div class="d-flex justify-end gap-4 mt-6">
+          <v-btn variant="outlined" @click="cancel">
+            Cancel
+          </v-btn>
+          <v-btn 
+            color="warning" 
+            @click="submit"
+            :disabled="!valid"
+            :loading="loading"
+          >
+            Submit
+          </v-btn>
+        </div>
+      </v-form>
+    </v-card>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+
+const route = useRoute();
+const pasienId = route.params.id;
+
+// Form data
+const valid = ref(false);
+const loading = ref(false);
+const form = ref(null);
+
+const formData = ref({
+  tanggal_daftar: '',
+  tanggal_periksa: '',
+  no_barcode: '',
+  no_antrian: '',
+  no_klinik: '',
+  no_rekammedik: '',
+  klinik: '',
+  shift: '',
+  keterangan: '',
+  pembayaran: ''
+});
+
+// Options
+const klinikOptions = [
+  'HOM',
+  'KANDUNGAN', 
+  'ANAK',
+  'IPD',
+  'JIWA',
+  'KUL KEL',
+  'KOMPLEMENTER',
+  'MATA',
+  'SARAF',
+  'ONKOLOGI',
+  'PARU',
+  'RADIOTERAPI',
+  'REHAB MEDIK',
+  'THT',
+  'MCU',
+  'KEMOTERAPI',
+  'R. TINDAKAN',
+  'ANESTESI',
+  'BEDAH',
+  'GIGI DAN MULUT',
+  'GERIATRI',
+  'GIZI',
+  'JANTUNG'
+];
+
+const shiftOptions = [
+  'Shift 1 = Mulai Pukul 07:00',
+  'Shift 2 = Mulai Pukul 13:00',
+  'Shift 3 = Mulai Pukul 19:00'
+];
+
+const pembayaranOptions = [
+  'JKN',
+  'UMUM',
+  'ASURANSI',
+  'KARYAWAN'
+];
+
+// Validation rules
+const rules = {
+  required: value => !!value || 'Field ini wajib diisi'
+};
+
+// Mock data for editing
+const mockPasienData = {
+  1: {
+    tanggal_daftar: '2025-08-13 00:00:03',
+    tanggal_periksa: '2025-08-27',
+    no_barcode: '25027100007',
+    no_antrian: 'IP1001',
+    no_klinik: 'Belum Mendapatkan Antrian Klinik',
+    no_rekammedik: '11555500',
+    klinik: 'IPD',
+    shift: 'Shift 1 = Mulai Pukul 07:00',
+    keterangan: 'FINGATMANA ONLINE',
+    pembayaran: 'JKN'
+  },
+  2: {
+    tanggal_daftar: '2025-07-24 13:50:01',
+    tanggal_periksa: '2025-08-27',
+    no_barcode: '25027100002',
+    no_antrian: 'OB1001',
+    no_klinik: '',
+    no_rekammedik: '',
+    klinik: 'KANDUNGAN',
+    shift: 'Shift 1 = Mulai Pukul 07:00',
+    keterangan: '',
+    pembayaran: 'JKN'
+  }
+};
+
+// Methods
+const loadPasienData = () => {
+  const data = mockPasienData[pasienId];
+  if (data) {
+    formData.value = { ...data };
+  }
+};
+
+const submit = async () => {
+  if (!valid.value) return;
+  
+  loading.value = true;
+  
+  try {
+    // Simulate API call
+    await new Promise(resolve => setTimeout(resolve, 1000));
+    
+    console.log('Updating pasien data:', formData.value);
+    
+    // Show success message (you can use a toast/snackbar here)
+    alert('Data pasien berhasil diperbarui!');
+    
+    // Navigate back to list
+    goBack();
+  } catch (error) {
+    console.error('Error updating pasien:', error);
+    alert('Gagal memperbarui data pasien!');
+  } finally {
+    loading.value = false;
+  }
+};
+
+const cancel = () => {
+  goBack();
+};
+
+const goBack = () => {
+  navigateTo('/data-pasien');
+};
+
+// Lifecycle
+onMounted(() => {
+  loadPasienData();
+});
+</script>
+
+<style scoped>
+.edit-pasien {
+  padding: 20px;
+}
+
+.gap-4 {
+  gap: 16px;
+}
+
+.text-red {
+  color: #d32f2f;
+}
+</style>
\ No newline at end of file
diff --git a/pages/data-pasien/index.vue b/pages/data-pasien/index.vue
new file mode 100644
index 0000000..c8fdd1b
--- /dev/null
+++ b/pages/data-pasien/index.vue
@@ -0,0 +1,312 @@
+<template>
+  <div class="data-pasien">
+    <!-- Header -->
+    <div class="d-flex justify-space-between align-center mb-4">
+      <h2>Data Pasien</h2>
+      <div class="d-flex gap-2">
+        <v-btn color="primary" prepend-icon="mdi-plus">
+          Add Patient
+        </v-btn>
+      </div>
+    </div>
+
+    <!-- Controls -->
+    <div class="d-flex justify-space-between align-center mb-4">
+      <div class="d-flex align-center gap-2">
+        <span>Show</span>
+        <v-select
+          v-model="itemsPerPage"
+          :items="[10, 25, 50, 100]"
+          density="compact"
+          variant="outlined"
+          style="width: 80px;"
+        ></v-select>
+        <span>entries</span>
+      </div>
+      
+      <div class="d-flex align-center gap-2">
+        <span>Search:</span>
+        <v-text-field
+          v-model="search"
+          density="compact"
+          variant="outlined"
+          hide-details
+          style="width: 200px;"
+        ></v-text-field>
+      </div>
+    </div>
+
+    <!-- Table -->
+    <v-data-table
+      :headers="headers"
+      :items="pasienItems"
+      :items-per-page="itemsPerPage"
+      :search="search"
+      class="elevation-1"
+      item-value="id"
+    >
+      <template v-slot:item.no="{ index }">
+        {{ (currentPage - 1) * itemsPerPage + index + 1 }}
+      </template>
+      
+      <template v-slot:item.status="{ item }">
+        <v-chip
+          :color="getStatusColor(item.status)"
+          size="small"
+          text-color="white"
+        >
+          {{ item.status }}
+        </v-chip>
+      </template>
+
+      <template v-slot:item.keterangan="{ item }">
+        <span v-if="item.keterangan" class="text-red font-weight-bold">
+          {{ item.keterangan }}
+        </span>
+        <span v-else>-</span>
+      </template>
+
+      <template v-slot:item.aksi="{ item }">
+        <div class="d-flex gap-1">
+          <v-btn
+            icon="mdi-eye"
+            size="small"
+            color="primary"
+            @click="viewPasien(item)"
+          ></v-btn>
+          <v-btn
+            icon="mdi-pencil"
+            size="small"
+            color="warning"
+            @click="editPasien(item)"
+          ></v-btn>
+        </div>
+      </template>
+    </v-data-table>
+
+    <!-- Footer Pagination -->
+    <div class="d-flex justify-space-between align-center mt-4">
+      <div>
+        Showing {{ currentPageStart }} to {{ currentPageEnd }} of {{ totalItems }} entries
+      </div>
+      
+      <v-pagination
+        v-model="currentPage"
+        :length="totalPages"
+        :total-visible="7"
+      ></v-pagination>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+
+// Data
+const search = ref('');
+const itemsPerPage = ref(10);
+const currentPage = ref(1);
+
+const headers = [
+  { title: 'No', key: 'no', sortable: false, width: '60px' },
+  { title: 'Tgl Daftar', key: 'tgl_daftar', sortable: true, width: '140px' },
+  { title: 'No Barcode', key: 'no_barcode', sortable: true, width: '120px' },
+  { title: 'No Antrian', key: 'no_antrian', sortable: true, width: '100px' },
+  { title: 'No Klinik', key: 'no_klinik', sortable: true, width: '100px' },
+  { title: 'RM', key: 'rm', sortable: true, width: '100px' },
+  { title: 'Klinik', key: 'klinik', sortable: true, width: '120px' },
+  { title: 'Shift', key: 'shift', sortable: true, width: '80px' },
+  { title: 'Ket', key: 'keterangan', sortable: false, width: '150px' },
+  { title: 'Pembayaran', key: 'pembayaran', sortable: true, width: '100px' },
+  { title: 'Status', key: 'status', sortable: true, width: '120px' },
+  { title: 'Aksi', key: 'aksi', sortable: false, width: '100px' }
+];
+
+const pasienItems = ref([
+  {
+    id: 1,
+    tgl_daftar: '2025-07-15 13:47:33',
+    no_barcode: '25027100001',
+    no_antrian: 'HO1001',
+    no_klinik: '',
+    rm: '',
+    klinik: 'HOM',
+    shift: 'Shift 1',
+    keterangan: '',
+    pembayaran: 'JKN',
+    status: 'Tunggu Daftar',
+    aksi: ''
+  },
+  {
+    id: 2,
+    tgl_daftar: '2025-07-24 13:50:01',
+    no_barcode: '25027100002',
+    no_antrian: 'OB1001',
+    no_klinik: '',
+    rm: '',
+    klinik: 'KANDUNGAN',
+    shift: 'Shift 1',
+    keterangan: '',
+    pembayaran: 'JKN',
+    status: 'Barcode',
+    aksi: ''
+  },
+  {
+    id: 3,
+    tgl_daftar: '2025-07-24 13:50:37',
+    no_barcode: '25027100003',
+    no_antrian: 'OB1002',
+    no_klinik: '',
+    rm: '',
+    klinik: 'KANDUNGAN',
+    shift: 'Shift 1',
+    keterangan: '',
+    pembayaran: 'JKN',
+    status: 'Barcode',
+    aksi: ''
+  },
+  {
+    id: 4,
+    tgl_daftar: '2025-07-28 08:18:20',
+    no_barcode: '25027100004',
+    no_antrian: 'AN1001',
+    no_klinik: '',
+    rm: '',
+    klinik: 'ANAK',
+    shift: 'Shift 1',
+    keterangan: '',
+    pembayaran: 'JKN',
+    status: 'Barcode',
+    aksi: ''
+  },
+  {
+    id: 5,
+    tgl_daftar: '2025-08-13 00:00:02',
+    no_barcode: '25027100005',
+    no_antrian: 'HO1002',
+    no_klinik: '',
+    rm: '11412684',
+    klinik: 'HOM',
+    shift: 'Shift 1',
+    keterangan: 'Online 25#27100005',
+    pembayaran: 'JKN',
+    status: 'Tunggu Daftar',
+    aksi: ''
+  },
+  {
+    id: 6,
+    tgl_daftar: '2025-08-13 00:00:03',
+    no_barcode: '25027100006',
+    no_antrian: 'HO1003',
+    no_klinik: '',
+    rm: '',
+    klinik: 'HOM',
+    shift: 'Shift 1',
+    keterangan: 'Online 25#27100006',
+    pembayaran: 'JKN',
+    status: 'Tunggu Daftar',
+    aksi: ''
+  },
+  {
+    id: 7,
+    tgl_daftar: '2025-08-13 00:00:03',
+    no_barcode: '25027100007',
+    no_antrian: 'IP1001',
+    no_klinik: '',
+    rm: '11555500',
+    klinik: 'IPD',
+    shift: 'Shift 1',
+    keterangan: 'Online 25#27100007',
+    pembayaran: 'JKN',
+    status: 'Tunggu Daftar',
+    aksi: ''
+  },
+  {
+    id: 8,
+    tgl_daftar: '2025-08-13 00:00:04',
+    no_barcode: '25027100008',
+    no_antrian: 'IP1001',
+    no_klinik: '',
+    rm: '11333855',
+    klinik: 'IPD',
+    shift: 'Shift 1',
+    keterangan: 'Online 25#27100008',
+    pembayaran: 'JKN',
+    status: 'Tunggu Daftar',
+    aksi: ''
+  },
+  {
+    id: 9,
+    tgl_daftar: '2025-08-13 00:00:04',
+    no_barcode: '25027100009',
+    no_antrian: 'IP1001',
+    no_klinik: '',
+    rm: '11565554',
+    klinik: 'IPD',
+    shift: 'Shift 1',
+    keterangan: 'Online 25#27100009',
+    pembayaran: 'JKN',
+    status: 'Tunggu Daftar',
+    aksi: ''
+  },
+  {
+    id: 10,
+    tgl_daftar: '2025-08-13 00:00:04',
+    no_barcode: '25027100010',
+    no_antrian: 'IP1001',
+    no_klinik: '',
+    rm: '11627608',
+    klinik: 'IPD',
+    shift: 'Shift 1',
+    keterangan: 'Online 25#27100010',
+    pembayaran: 'JKN',
+    status: 'Tunggu Daftar',
+    aksi: ''
+  }
+]);
+
+// Computed
+const totalItems = computed(() => pasienItems.value.length);
+const totalPages = computed(() => Math.ceil(totalItems.value / itemsPerPage.value));
+const currentPageStart = computed(() => (currentPage.value - 1) * itemsPerPage.value + 1);
+const currentPageEnd = computed(() => Math.min(currentPage.value * itemsPerPage.value, totalItems.value));
+
+// Methods
+const getStatusColor = (status) => {
+  switch (status) {
+    case 'Tunggu Daftar':
+      return 'orange';
+    case 'Barcode':
+      return 'blue';
+    default:
+      return 'grey';
+  }
+};
+
+const viewPasien = (item) => {
+  // Implement view functionality
+  console.log('View pasien:', item);
+};
+
+const editPasien = (item) => {
+  navigateTo(`/data-pasien/edit/${item.id}`);
+};
+</script>
+
+<style scoped>
+.data-pasien {
+  padding: 20px;
+}
+
+.gap-1 {
+  gap: 4px;
+}
+
+.gap-2 {
+  gap: 8px;
+}
+
+.text-red {
+  color: #d32f2f;
+}
+</style>
\ No newline at end of file