Merge pull request 'İzin-Bedel-Orani-CRUD' (#7) from İzin-Bedel-Orani-CRUD into main

Reviewed-on: #7

src/layouts/admin-inc/SideMenu.vue

@@ -142,6 +142,10 @@
           title: 'Piyango Listesi',
           to: '/muhasebe/piyango-listesi'
         },
+        {
+          title: 'İzin Bedel Oranı',
+          to: '/muhasebe/izin-bedel-orani'
+        },
         {
           title: 'Ayarlar',
           to: '/muhasebe/ayarlar'

src/module/cekilisler/components/TabPiyangoOnayDurumu.vue

@@ -8,6 +8,11 @@
         <form-piyango-onay-kisiler />
       </div>
     </!--div-->
+    <div class="form-inner-content">
+      <div class="form-part">
+        <form-piyango-onay-durum />
+      </div>
+    </div>
     <div class="form-inner-content">
       <div class="form-part">
         <form-piyango-onay-log />
@@ -16,6 +21,7 @@
   </div>
 </template>
 <script setup lang="ts">
+  import FormPiyangoOnayDurum from './form/FormPiyangoOnayDurum.vue'
   import FormPiyangoOnayLog from './form/FormPiyangoOnayLog.vue'
   import FormPiyangoOnay from './form/FormPiyangoOnay.vue'
   import FormPiyangoOnayKisiler from './form/FormPiyangoOnayKisiler.vue'

src/module/cekilisler/components/TabPiyangoOnayDurumuUser.vue

@@ -10,7 +10,7 @@
     </div>
     <div class="form-inner-content">
       <div class="form-part">
-        <form-piyango-onay-log />
+        <form-piyango-onay-durum />
       </div>
     </div>
   </div>
@@ -19,6 +19,6 @@
   import { usePiyangoStore } from '../stores/piyangoStore'
   const piyangoStore = usePiyangoStore()
 
-  import FormPiyangoOnayLog from './form/FormPiyangoOnayLog.vue'
+  import FormPiyangoOnayDurum from './form/FormPiyangoOnayDurum.vue'
   import FormPiyangoUserOnayaGonder from './form/FormPiyangoUserOnayaGonder.vue'
 </script>

src/module/cekilisler/components/form/FormPiyangoOnayDurum.vue

@@ -0,0 +1,88 @@
+<template>
+  <list-table-content
+  v-if="loaded"
+    :tableHeader="tableHeader"
+    formTitle="Piyango Onay Durumları"
+    listText="Kayıt"
+    :apiList="'OnayDurumu/GetSonOnayDurumlariList/' + piyangoStore.selectedLottery"
+    apiText="Piyango Onay Log Listesi"
+    page="form"
+    :refresh="piyangoOnayStore.refreshList" />
+</template>
+<script setup lang="ts">
+  import { ref,onBeforeMount,computed } from 'vue'
+  import axios from 'axios'
+  import { useDateStore } from '@/stores/dateStore'
+  const dateStore = useDateStore()
+  import { useGlobalStore } from '@/stores/globalStore'
+  const globalStore = useGlobalStore()
+  import { usePiyangoOnayStore } from '../../stores/piyangoOnayStore'
+  const piyangoOnayStore = usePiyangoOnayStore()
+  import { usePiyangoStore } from '../../stores/piyangoStore'
+  const piyangoStore = usePiyangoStore()
+  import { usePiyangoDataStore } from '../../stores/piyangoDataStore'
+  const piyangoDataStore = usePiyangoDataStore()
+  import { usePiyangoServices } from '../../service/piyangoServices'
+  const piyangoServices = usePiyangoServices()
+
+  const loaded = ref<boolean>(false)
+
+  const piyangoOnayDurumlari = computed<Record<string, any>[]>(() => {
+    return piyangoDataStore.piyangoOnayDurumlari
+  })
+
+  const tableHeader = ref<Record<string, any>[]>([
+    {
+      name: 'tarih',
+      title: 'Tarih',
+      compute: (v: Record<string, any>): string => {
+        return v.tarih === null
+          ? ''
+          : dateStore.dateFormat({ pattern: 'dd-mm-yy', date: v.tarih })
+      },
+      sort: true,
+        filter: {
+          type: 'date',
+          range: true
+        }
+    },
+    {
+      name: 'kisiAdi',
+      title: 'Kişi',
+      sort: true,
+      style: { width: '20%' }
+    },
+    {
+      name: 'onayDurumuIslemTipiAdi',
+      title: 'İşlem',
+      sort: true,
+        filter: {
+          type: 'select',
+          data: piyangoOnayDurumlari,
+          listVal: 'id',
+          listText: 'tipAdi',
+          filterId: 'onayDurumuIslemTipiId'
+        }
+    },
+    {
+      name: 'aciklama',
+      title: 'Açıklama',
+      sort: true,
+      style: { width: '30%' }
+    },
+    {
+      dosyaUrl: 'aciklama',
+      title: 'Dosya',
+      computeHtml: (v: Record<string, any>) => {
+        if (v.dosyaUrl !== null && v.dosyaUrl !== undefined) {
+          return globalStore.TableCellDocument(v.dosyaUrl)
+        }
+      },
+      style: { width: '20%' }
+    }
+  ])
+
+  onBeforeMount(async () => {
+    loaded.value = true
+  })
+</script>

src/module/cekilisler/components/form/FormPiyangoOnayLog.vue

@@ -4,7 +4,7 @@
     :tableHeader="tableHeader"
     formTitle="Piyango Onay Logları"
     listText="Kayıt"
-    :apiList="'OnayDurumu/GetSonOnayDurumlariList/' + piyangoStore.selectedLottery"
+    :apiList="'OnayDurumLog/Cekilis/' + piyangoStore.selectedLottery"
     apiText="Piyango Onay Log Listesi"
     page="form"
     :refresh="piyangoOnayStore.refreshList" />
@@ -47,38 +47,24 @@
         }
     },
     {
-      name: 'kisiAdi',
+      name: 'islemYapanKullanici.email',
       title: 'Kişi',
       sort: true,
       style: { width: '20%' }
     },
     {
-      name: 'onayDurumuIslemTipiAdi',
+      name: 'eskiDurum',
-      title: 'İşlem',
+      title: 'Eski Durum',
-      sort: true,
+    },
-        filter: {
+    {
-          type: 'select',
+      name: 'yeniDurum',
-          data: piyangoOnayDurumlari,
+      title: 'Yeni Durum',
-          listVal: 'id',
-          listText: 'tipAdi',
-          filterId: 'onayDurumuIslemTipiId'
-        }
     },
     {
       name: 'aciklama',
       title: 'Açıklama',
       sort: true,
       style: { width: '30%' }
-    },
-    {
-      dosyaUrl: 'aciklama',
-      title: 'Dosya',
-      computeHtml: (v: Record<string, any>) => {
-        if (v.dosyaUrl !== null && v.dosyaUrl !== undefined) {
-          return globalStore.TableCellDocument(v.dosyaUrl)
-        }
-      },
-      style: { width: '20%' }
     }
   ])
 

src/module/muhasebe/components/TabIzinBedelOraniForm.vue

@@ -0,0 +1,8 @@
+<template>
+  <section class="section-list form-inner-content-left">
+    <form-izin-bedel-orani />
+  </section>
+</template>
+<script setup lang="ts">
+  import FormIzinBedelOrani from './form/FormIzinBedelOrani.vue'
+</script>

src/module/muhasebe/components/TabIzinBedelOraniListe.vue

@@ -0,0 +1,106 @@
+<template>
+  <section class="section-list">
+    <div class="section-list-header">
+      <h2>İzin Bedel Oranı Listesi</h2>
+      <div class="section-list-header-buttons">
+        <button class="button-c button-add" @click="izinBedelOraniStore.NewForm()">
+          <i class="ico-c">
+            <svg width="16" height="16">
+              <use href="@/assets/images/icons.svg#plus"></use>
+            </svg>
+          </i>
+          Yeni İzin Bedel Oranı Ekle
+        </button>
+      </div>
+    </div>
+    
+    <list-table-content
+      v-if="izinBedelOraniService.loaded"
+      :tableHeader="tableHeader"
+      :rowAction="EditIzinBedelOrani"
+      icon="draws"
+      title="İzin Bedel Oranları"
+      listText="İzin Bedel Oranı"
+      :apiList="'IzinBedelOrani'"
+      apiText="İzin Bedel Oranı Listesi" />
+  </section>
+</template>
+<script setup lang="ts">
+  import { ref, computed, onBeforeMount } from 'vue'
+  import ListTableContent from '@/components/global/ListTableContent.vue'
+  import { useIzinBedelOraniStore } from '../store/izinBedelOraniStore'
+  import { useIzinBedelOraniService } from '../service/izinBedelOraniService'
+
+  const izinBedelOraniStore = useIzinBedelOraniStore()
+  const izinBedelOraniService = useIzinBedelOraniService()
+
+  const tableHeader = ref<Record<string, any>[]>(
+     [
+      {
+        name: 'id',
+        title: 'ID',
+        sort: true,
+        style: { width: '8%' }
+      },
+      {
+        name: 'ad',
+        title: 'Ad',
+        sort: true,
+        style: { width: '20%' }
+      },
+      {
+        name: 'oran',
+        title: 'Oran (%)',
+        sort: true,
+        style: { width: '15%' },
+        compute: (v: Record<string, any>): string => {
+          return `%${v.oran}`
+        }
+      },
+      {
+        name: 'aciklama',
+        title: 'Açıklama',
+        sort: true,
+        style: { width: '30%' }
+      },
+      {
+        name: 'aktif',
+        title: 'Durum',
+        sort: true,
+        style: { width: '12%' },
+        computeHtml: (v: Record<string, any>): string => {
+          if (v.aktif) {
+            return `<span class="back-grad back-grad-ok">Aktif</span>`
+          } else {
+            return `<span class="back-grad back-grad-alert">Pasif</span>`
+          }
+        }
+      },
+      {
+        name: 'actions',
+        title: 'İşlemler',
+        style: { width: '15%' },
+        computeHtml: (v: Record<string, any>): string => {
+          let actions = `<button class="button-c button-edit" onclick="window.editIzinBedelOrani(${v.id})">
+            <i class="ico-c">
+              <svg width="14" height="14">
+                <use href="@/assets/images/icons.svg#edit"></use>
+              </svg>
+            </i>
+            Düzenle
+          </button> `
+          return actions
+        }
+      }
+    ]
+  )
+
+  const EditIzinBedelOrani = (row: any) => {
+    izinBedelOraniStore.EditForm(row)
+  }
+
+  onBeforeMount(async () => {
+    await izinBedelOraniService.GetIzinBedelOraniList()
+    izinBedelOraniService.loaded = true
+  })
+</script>

src/module/muhasebe/components/form/FormIzinBedelOrani.vue

@@ -0,0 +1,90 @@
+<template>
+  <div
+    :class="['form-part', izinBedelOraniValidationStore.formChanged ? 'changed' : '']">
+    <div class="form-part-title">
+      <h4>{{ izinBedelOraniStore.isNew ? 'Yeni İzin Bedel Oranı' : 'İzin Bedel Oranı Düzenle' }}</h4>
+      <div class="form-part-title-buttons"></div>
+    </div>
+    <div class="form-part-content">
+      <form-input
+        required
+        half
+        modelKey="ad"
+        v-model="izinBedelOraniStore.izinBedelOraniForm.ad"
+        :invalidText="izinBedelOraniValidationStore.invalidTexts.ad"
+        label="Ad"
+        maxlength="100"
+        @keyup="OnKeyup" />
+      <form-input
+        required
+        half
+        modelKey="oran"
+        v-model="izinBedelOraniStore.izinBedelOraniForm.oran"
+        :invalidText="izinBedelOraniValidationStore.invalidTexts.oran"
+        label="Oran (%)"
+        maxlength="3"
+        @keydown="validationStore.allowNumbersWithKeys"
+        description="1-100 arasında bir rakam giriniz"
+        @keyup="OnKeyup" />
+      <form-textarea
+        required
+        modelKey="aciklama"
+        v-model="izinBedelOraniStore.izinBedelOraniForm.aciklama"
+        :invalidText="izinBedelOraniValidationStore.invalidTexts.aciklama"
+        label="Açıklama"
+        maxlength="500"
+        rows="4"
+        @keyup="OnKeyup" />
+      <form-checkbox
+        modelKey="aktif"
+        v-model="izinBedelOraniStore.izinBedelOraniForm.aktif"
+        label="Aktif"
+        @change="OnKeyup" />
+      <div
+        class="form-item"
+        v-if="izinBedelOraniStore.isNew || izinBedelOraniValidationStore.formChanged">
+        <button
+          class="button-c button-save"
+          @click="izinBedelOraniService.SaveIzinBedelOrani">
+          {{ izinBedelOraniStore.isNew ? 'Kaydet' : 'Güncelle' }}
+        </button>
+        <button 
+          class="button-c button-cancel" 
+          @click="CancelForm" 
+          v-if="izinBedelOraniValidationStore.formChanged">
+          Vazgeç
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+  import { onBeforeMount } from 'vue'
+  import { useValidationStore } from '@/stores/validationStore'
+  const validationStore = useValidationStore()
+  import { useIzinBedelOraniStore } from '../../store/izinBedelOraniStore'
+  const izinBedelOraniStore = useIzinBedelOraniStore()
+  import { useIzinBedelOraniValidationStore } from '../../validation/izinBedelOraniValidationStore'
+  const izinBedelOraniValidationStore = useIzinBedelOraniValidationStore()
+  import { useIzinBedelOraniService } from '../../service/izinBedelOraniService'
+  const izinBedelOraniService = useIzinBedelOraniService()
+
+  const OnKeyup = () => {
+    izinBedelOraniValidationStore.formChanged = true
+  }
+
+  const CancelForm = () => {
+    if (izinBedelOraniStore.isNew) {
+      izinBedelOraniStore.isNew = false
+    } else {
+      izinBedelOraniStore.RestoreData()
+      izinBedelOraniValidationStore.formChanged = false
+    }
+  }
+
+  onBeforeMount(() => {
+    if (izinBedelOraniStore.isNew) {
+      izinBedelOraniStore.ResetForm()
+    }
+  })
+</script>

src/module/muhasebe/components/form/FormMuhasebeAyarlari.vue

@@ -6,17 +6,17 @@
       <div class="form-part-title-buttons"></div>
     </div>
     <div class="form-part-content" v-if="muhasebeSettingsService.loaded">
-      <form-input
+<!--      <form-input-->
-        required
+<!--        required-->
-        half
+<!--        half-->
-        modelKey="izinBedeliOrani"
+<!--        modelKey="izinBedeliOrani"-->
-        v-model="muhasebeSettingsStore.muhasebeSettingsForm.izinBedeliOrani"
+<!--        v-model="muhasebeSettingsStore.muhasebeSettingsForm.izinBedeliOrani"-->
-        :invalidText="muhasebeSettingsValidationStore.invalidTexts.izinBedeliOrani"        
+<!--        :invalidText="muhasebeSettingsValidationStore.invalidTexts.izinBedeliOrani"        -->
-        label="İzin Bedeli Oranı"
+<!--        label="İzin Bedeli Oranı"-->
-        maxlength="3"
+<!--        maxlength="3"-->
-        @keydown="validationStore.allowNumbersWithKeys"
+<!--        @keydown="validationStore.allowNumbersWithKeys"-->
-        description="1-100 arasında bir rakam giriniz"
+<!--        description="1-100 arasında bir rakam giriniz"-->
-        @keyup="OnKeyup" />
+<!--        @keyup="OnKeyup" />-->
       <form-input
         required
         half

src/module/muhasebe/routes/index.ts

@@ -1,9 +1,11 @@
 import muhasebePiyangoListesi from './muhasebe-piyango-listesi'
 import muhasebePiyangoDetay from './muhasebe-piyango-detay'
 import muhasebeAyarlar from './muhasebe-ayarlar'
+import izinBedelOrani from './izin-bedel-orani'
 
 export default [
   muhasebePiyangoListesi,
   muhasebePiyangoDetay,
   muhasebeAyarlar,
+  izinBedelOrani,
 ]

src/module/muhasebe/routes/izin-bedel-orani.ts

@@ -0,0 +1,10 @@
+import IzinBedelOrani from '../views/IzinBedelOrani.vue'
+
+export default {
+  path: '/muhasebe/izin-bedel-orani',
+  name: 'IzinBedelOrani',
+  component: IzinBedelOrani,
+  meta: {
+    authRequired: true
+  }
+}

src/module/muhasebe/service/izinBedelOraniService.ts

@@ -0,0 +1,102 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import { useDataStore } from '@/stores/dataStore'
+import { useIzinBedelOraniStore } from '../store/izinBedelOraniStore'
+import { useIzinBedelOraniValidationStore } from '../validation/izinBedelOraniValidationStore'
+
+export const useIzinBedelOraniService = defineStore('izinBedelOraniService', () => {
+  const dataStore = useDataStore()
+  const izinBedelOraniStore = useIzinBedelOraniStore()
+  const izinBedelOraniValidationStore = useIzinBedelOraniValidationStore()
+
+  const loaded = ref<boolean>(false)
+
+  const SaveIzinBedelOrani = async (panelData: Record<string, any>, isUpdate: boolean = false) => {
+    if (izinBedelOraniValidationStore.FormCheck(panelData)) {
+      var res: any
+
+      if (!isUpdate) {
+        res = await dataStore.dataPost('IzinBedelOrani', {
+          data: {
+            adi: panelData.ad,
+            oran: panelData.oran,
+            aciklama: panelData.aciklama,
+            aktif: panelData.aktif
+          }
+        })
+      } else {
+        res = await dataStore.dataPut('IzinBedelOrani/' + panelData.id, {
+          data: {
+            id: panelData.id,
+            adi: panelData.ad,
+            oran: panelData.oran,
+            aciklama: panelData.aciklama,
+            aktif: panelData.aktif
+          }
+        })
+      }
+
+      if (res !== 'errorfalse') {
+        return true
+      }
+    }
+    return false
+  }
+
+  const DeleteIzinBedelOrani = async (id: number | string) => {
+    var res = await dataStore.dataDelete('IzinBedelOrani/' + id)
+    return res !== 'errorfalse'
+  }
+
+  const GetIzinBedelOraniList = async () => {
+    var res = await dataStore.dataGet('IzinBedelOrani')
+    if (res !== 'errorfalse') {
+      izinBedelOraniStore.izinBedelOraniList = res
+      return res
+    }
+    return []
+  }
+
+  const GetIzinBedelOraniById = async (id: number | string) => {
+    var res = await dataStore.dataGet('IzinBedelOrani/' + id)
+    if (res !== 'errorfalse') {
+      return res
+    }
+    return null
+  }
+
+  const GetAktifIzinBedelOraniList = async () => {
+    var res = await dataStore.dataGet('IzinBedelOrani/Aktif')
+    if (res !== 'errorfalse') {
+      izinBedelOraniStore.aktifIzinBedelOraniList = res
+      return res
+    }
+    return []
+  }
+
+  const UpdateIzinBedelOraniStatus = async (id: number | string, aktif: boolean) => {
+    var res = await dataStore.dataPut('IzinBedelOrani/' + id + '/Status', {
+      data: {
+        Aktif: aktif
+      }
+    })
+    return res !== 'errorfalse'
+  }
+
+  const LoadData = async () => {
+    await GetIzinBedelOraniList()
+    await GetAktifIzinBedelOraniList()
+    loaded.value = true
+  }
+
+  return {
+    loaded,
+    SaveIzinBedelOrani,
+    DeleteIzinBedelOrani,
+    GetIzinBedelOraniList,
+    GetIzinBedelOraniById,
+    GetAktifIzinBedelOraniList,
+    UpdateIzinBedelOraniStatus,
+    LoadData
+  }
+})

src/module/muhasebe/store/izinBedelOraniStore.ts

@@ -0,0 +1,59 @@
+import { defineStore } from 'pinia'
+import { ref, reactive } from 'vue'
+import { useUsersStore } from '@/stores/usersStore'
+
+export const useIzinBedelOraniStore = defineStore('izinBedelOraniStore', () => {
+  const usersStore = useUsersStore()
+
+  const izinBedelOraniBaseForm = reactive<Record<string, any>>({
+    ad: '',
+    oran: 0,
+    aciklama: '',
+    aktif: true,
+    appUserId: usersStore.userId
+  })
+  
+  const izinBedelOraniForm = reactive<Record<string, any>>({})
+  const izinBedelOraniSafeForm = reactive<Record<string, any>>({})
+  const izinBedelOraniList = ref<Record<string, any>[]>([])
+  const aktifIzinBedelOraniList = ref<Record<string, any>[]>([])
+  const isNew = ref<boolean>(false)
+  const izinBedelOraniLoaded = ref<boolean>(false)
+
+  const ResetForm = () => {
+    Object.assign(izinBedelOraniForm, izinBedelOraniBaseForm)
+  }
+  
+  const SafeServerData = () => {
+    Object.assign(izinBedelOraniSafeForm, izinBedelOraniForm)
+  }
+
+  const RestoreData = () => {
+    Object.assign(izinBedelOraniForm, izinBedelOraniSafeForm)
+  }
+
+  const NewForm = () => {
+    ResetForm()
+    isNew.value = true
+  }
+
+  const EditForm = (item: Record<string, any>) => {
+    Object.assign(izinBedelOraniForm, item)
+    isNew.value = false
+  }
+
+  return {
+    izinBedelOraniBaseForm,
+    izinBedelOraniForm,
+    izinBedelOraniSafeForm,
+    izinBedelOraniList,
+    aktifIzinBedelOraniList,
+    isNew,
+    izinBedelOraniLoaded,
+    ResetForm,
+    SafeServerData,
+    RestoreData,
+    NewForm,
+    EditForm
+  }
+})

src/module/muhasebe/validation/izinBedelOraniValidationStore.ts

@@ -0,0 +1,64 @@
+import { defineStore } from 'pinia'
+import { ref, reactive } from 'vue'
+import { useValidationStore } from '@/stores/validationStore'
+
+export const useIzinBedelOraniValidationStore = defineStore(
+  'izinBedelOraniValidationStore',
+  () => {
+    const validationStore = useValidationStore()
+
+    const formChanged = ref<boolean>(false)
+    const isFormValid = ref<boolean>(true)
+    const invalidTexts = reactive<Record<string, any>>({})
+
+    const FormCheck = (panelData: Record<string, any>): boolean => {
+      Object.assign(invalidTexts, {})
+
+      validationStore.IsFieldEmpty(
+        panelData,
+        invalidTexts,
+        'ad',
+        'Ad alanı zorunludur'
+      )
+
+      validationStore.IsFieldEmpty(
+        panelData,
+        invalidTexts,
+        'oran',
+        'Oran alanı zorunludur'
+      )
+
+      validationStore.IsFieldEmpty(
+        panelData,
+        invalidTexts,
+        'aciklama',
+        'Açıklama alanı zorunludur'
+      )
+
+      // Oran validation (0-100 arası)
+      if (panelData.oran !== undefined && panelData.oran !== '') {
+        const oran = parseFloat(panelData.oran)
+        if (isNaN(oran) || oran < 0 || oran > 100) {
+          invalidTexts.oran = 'Oran 0-100 arasında olmalıdır'
+        }
+      }
+
+      isFormValid.value = Object.keys(invalidTexts).length === 0
+      return isFormValid.value
+    }
+
+    const ResetValidation = () => {
+      Object.assign(invalidTexts, {})
+      formChanged.value = false
+      isFormValid.value = true
+    }
+
+    return {
+      formChanged,
+      isFormValid,
+      invalidTexts,
+      FormCheck,
+      ResetValidation
+    }
+  }
+)

src/module/muhasebe/views/IzinBedelOrani.vue

@@ -0,0 +1,202 @@
+<template>
+  <AdminLayout>
+    <Breadcrumb currentPageText="Muhasebe / İzin Bedel Oranı" />
+    <section class="section-list">
+      <list-table-content
+        :tableHeader="tableHeader"
+        :rowAction="updateAction"
+        :addAction="addAction"
+        icon="draws"
+        title="İzin Bedel Oranları"
+        listText="İzin Bedel Oranı"
+        :tableData="izinBedelOraniList"
+        apiText="İzin Bedel Oranı Listesi"
+        apiList="IzinBedelOrani"
+        v-model:refresh="refresh"
+        :rowActions="rowActions"
+        :rowActionStyle="'width:15%;'" />
+    </section>
+    
+    <panel-wrapper
+      v-if="panel"
+      v-model="panel"
+      :panel-title="isUpdate ? 'İzin Bedel Oranı Düzenle' : 'Yeni İzin Bedel Oranı Ekle'">
+      <template #panelContent>
+        <form-input 
+          required 
+          v-model="panelIzinBedelOrani.ad" 
+          label="Ad" 
+          maxlength="100" />
+        <form-input 
+          required 
+          v-model="panelIzinBedelOrani.oran" 
+          label="Oran (%)" 
+          maxlength="3"
+          @keydown="validationStore.allowNumbersWithKeys"
+          description="1-100 arasında bir rakam giriniz" />
+        <form-textarea 
+          required 
+          v-model="panelIzinBedelOrani.aciklama" 
+          label="Açıklama" 
+          maxlength="500"
+          rows="4" />
+        <form-checkbox 
+          v-model="panelIzinBedelOrani.aktif" 
+          label="Aktif" />
+      </template>
+      <template #footerButton>
+        <div class="button-c button-save" @click="save">
+          {{ isUpdate ? 'Güncelle' : 'Ekle' }}
+        </div>
+      </template>
+    </panel-wrapper>
+  </AdminLayout>
+</template>
+<script setup lang="ts">
+  import { ref, onBeforeMount, computed } from 'vue'
+  import AdminLayout from '@/layouts/AdminLayout.vue'
+  import { Breadcrumb, ListTableContent } from '@/components/global'
+  import PanelWrapper from '@/components/PanelWrapper.vue'
+  import { useIzinBedelOraniStore } from '../store/izinBedelOraniStore'
+  import { useIzinBedelOraniService } from '../service/izinBedelOraniService'
+  import { useValidationStore } from '@/stores/validationStore'
+  import { useDialogStore } from '@/components/global/dialogStore'
+  import { useDataStore } from '@/stores/dataStore'
+
+  const izinBedelOraniStore = useIzinBedelOraniStore()
+  const izinBedelOraniService = useIzinBedelOraniService()
+  const validationStore = useValidationStore()
+  const dialogStore = useDialogStore()
+  const dataStore = useDataStore()
+
+  const panel = ref<boolean>(false)
+  const isUpdate = ref<boolean>(false)
+  const refresh = ref<boolean>(false)
+  const panelIzinBedelOrani = ref<Record<string, any>>({})
+  const izinBedelOraniList = ref<Record<string, any>[]>([])
+
+  const tableHeader = ref<Record<string, any>[]>(
+      [
+      {
+        name: 'id',
+        title: 'ID',
+        sort: true,
+        style: { width: '8%' }
+      },
+      {
+        name: 'adi',
+        title: 'Ad',
+        sort: true,
+        style: { width: '20%' }
+      },
+      {
+        name: 'oran',
+        title: 'Oran (%)',
+        sort: true,
+        style: { width: '15%' },
+        compute: (v: Record<string, any>): string => {
+          return `%${v.oran}`
+        }
+      },
+      {
+        name: 'aciklama',
+        title: 'Açıklama',
+        sort: true,
+        style: { width: '30%' }
+      },
+      {
+        name: 'aktif',
+        title: 'Durum',
+        sort: true,
+        style: { width: '12%' },
+        computeHtml: (v: Record<string, any>): string => {
+          if (v.aktif) {
+            return `<span class="back-grad back-grad-ok">Aktif</span>`
+          } else {
+            return `<span class="back-grad back-grad-alert">Pasif</span>`
+          }
+        }
+      }
+    ]
+  )
+
+  const DeleteRowPop = (data: Record<string, any>, i: number) => {
+    dialogStore.CreateDialog({
+      title: 'İzin Bedel Oranı Sil',
+      id: 'deleteIzinBedelOrani',
+      content: 'İzin bedel oranını silmek istediğinize emin misiniz?',
+      closeText: 'Vazgeç',
+      buttons: [
+        {
+          label: 'İzin Bedel Oranı Sil',
+          type: 'alert',
+          function: () => DeleteRow(data.id)
+        }
+      ]
+    })
+  }
+
+  const DeleteRow = async (id: number | string) => {
+    var dt = await dataStore.dataDelete('IzinBedelOrani/' + id)
+
+    if (dt !== 'errorfalse') {
+      dialogStore.CloseDialog('deleteIzinBedelOrani')
+      refresh.value = true
+    }
+  }
+
+  const rowActions = ref<Record<string, any>[]>([
+    {
+      text: 'Sil',
+      class: 'alert',
+      action: DeleteRowPop
+    }
+  ])
+
+  const addAction = async () => {
+    isUpdate.value = false
+    panelIzinBedelOrani.value = {
+      ad: '',
+      oran: 0,
+      aciklama: '',
+      aktif: true
+    }
+    panel.value = true
+  }
+
+  const updateAction = (row: any) => {
+    const foundItem = izinBedelOraniList.value.find((x) => x.id == row.id)
+    if (foundItem) {
+      panelIzinBedelOrani.value = {
+        id: foundItem.id,
+        ad: foundItem.adi,
+        oran: foundItem.oran,
+        aciklama: foundItem.aciklama,
+        aktif: foundItem.aktif
+      }
+    }
+    panel.value = true
+    isUpdate.value = true
+  }
+
+  const save = async () => {
+    const result = await izinBedelOraniService.SaveIzinBedelOrani(panelIzinBedelOrani.value, isUpdate.value)
+    if (result) {
+      panel.value = false
+      isUpdate.value = false
+      refresh.value = true
+      await loadIzinBedelOraniList()
+    }
+  }
+
+  const loadIzinBedelOraniList = async () => {
+    const data = await dataStore.dataGet('IzinBedelOrani')
+    if (data !== 'errorfalse') {
+      izinBedelOraniList.value = data
+    }
+  }
+
+  onBeforeMount(async () => {
+    await loadIzinBedelOraniList()
+  })
+</script>