<script setup>
import { date } from 'alga-js'

const detechMobile = ref('')

// Use the centralized role menu composable
const { getMenuType } = useRoleMenu()

// This will be set using the composable method
const defaultSideBarMenu = ref('Menu')



onBeforeMount(() => {
  /*detechMobile.value = !navigator.userAgent.match(/Android/i) || !navigator.userAgent.match(/webOS/i) || !navigator.userAgent.match(/iPhone/i) || !navigator.userAgent.match(/iPad/i) || !navigator.userAgent.match(/iPod/i) || !navigator.userAgent.match(/BlackBerry/i) || !navigator.userAgent.match(/Windows Phone/i)

  if(detechMobile.value) {
    router.push('/military-metals-corp')
  }*/

  let mediaQuery = window.matchMedia("(max-width: 800px)");

  function mediaChangeHandler(mq) {
    if(mq.matches) {
      detechMobile.value = 'mobile'
    } else {
      detechMobile.value = 'desktop'
    }
  }

  mediaChangeHandler(mediaQuery)
  mediaQuery.addEventListener("change", mediaChangeHandler)
})

definePageMeta({
  middleware: ['auth', 'org']
})

const route = useRoute()

const breadCrumb = computed(() => ([
  { link: '/', text: 'Home'},
  { link: '/', text: 'Dashboard', active: true}
]))

const { data: shippedData } = await useFetch('/api/orders/shipped')
const { data: notshippedData } = await useFetch('/api/orders/openso')
const { data: notshippedview } = await useFetch('/api/orders/sales/notfulfilled')
const { data: warehouseVolumeData } = await useFetch('/api/warehouse/volume')
const { data: productsWithoutDimensionsData } = await useFetch('/api/products/missing-dimensions')


const shippedOrders = computed(() =>{
  return shippedData.value || {records: []}
})

const ordersWithoutShipments = computed(() => {
  return notshippedData.value?.records?.filter(record => !record.m_inout || record.m_inout.length === 0)?.length ?? 0
})

const ordersWithoutShipmentsByOrg = computed(() => {
  const shippedRecords = shippedData.value?.records || []
  const grouped = {}

  shippedRecords.forEach(record => {
    const orgName = record.AD_Org_ID?.identifier || 'Unknown'
    grouped[orgName] = (grouped[orgName] || 0) + 1
  })

  return grouped
})

const ordersWithoutShipmentsByOrgFormatted = computed(() => {
  const grouped = ordersWithoutShipmentsByOrg.value
  const entries = Object.entries(grouped)

  if (entries.length === 0) return 'No data'

  return entries
    .map(([org, count]) => `${org}: ${count}`)
    .join(' | ')
})

const notshippedviewCount = computed(() => {
  return notshippedview.value?.records?.length ?? 0
})

const totalWarehouseVolume = computed(() => {
  return warehouseVolumeData.value?.totalVolume || '0.00'
})

const productsWithoutDimensionsCount = computed(() => {
  return productsWithoutDimensionsData.value?.records?.length ?? 0
})

const links = [{
  label: 'Documentation',
  icon: 'i-heroicons-book-open-solid',
  to: '/getting-started'
}, {
  label: 'Playground',
  icon: 'i-simple-icons-stackblitz',
  to: '/playground'
}, {
  label: 'Roadmap',
  icon: 'i-heroicons-beaker',
  to: '/roadmap'
}, {
  label: 'Pro',
  icon: 'i-heroicons-square-3-stack-3d',
  to: '/pro'
}, {
  label: 'Releases',
  icon: 'i-heroicons-rocket-launch',
  to: 'https://github.com/nuxt/ui/releases',
  target: '_blank'
}]

const overviewActive = ref(route.query?.period ?? 'last_week')
const overviewDataSet = ref([])
const overviewCard = ref({})
const overviewHandler = async (val) => {
  overviewActive.value = val
  location.href = '/?period='+overviewActive.value
}
const getOverviewDataSet = async () => {
  const res = await $fetch('/api/dashboard/overviews?period='+(route.query?.period ?? overviewActive.value))
  if(res?.records) {
    overviewDataSet.value = res.records
    overviewCard.value = {
      orders: overviewDataSet.value.map(i => i.orders).reduce((acc, prev) => Number(acc) + Number(prev), 0),
      invoices: overviewDataSet.value.map(i => i.invoices).reduce((acc, prev) => Number(acc) + Number(prev), 0),
      shipments: overviewDataSet.value.map(i => i.shipments).reduce((acc, prev) => Number(acc) + Number(prev), 0),
      requests: overviewDataSet.value.map(i => i.requests).reduce((acc, prev) => Number(acc) + Number(prev), 0)
    }
  }
}
onMounted(() => {
  getOverviewDataSet()
  defaultSideBarMenu.value = getMenuType()
})

watch(() => route.query, () => {
  if(route.query?.period) {
    overviewActive.value = route.query.period
    getOverviewDataSet()
  }
})
</script>

<template>
  <NuxtLayout name="new-dash">
    <NewBreadCrumb :items="breadCrumb" />

    <section v-if="defaultSideBarMenu !== 'c'" class="section">

      <div class="columns">

        <div class="column">
          <div class="card">
            <div class="card-content">
              <p class="title">
                {{notshippedviewCount}}<br>
                <span class="orgtextsmall">  {{ ordersWithoutShipmentsByOrgFormatted }}</span>
              </p>
              <p class="subtitle">Offene Aufträge</p>
            </div>
          </div>
        </div>

        <div class="column">
          <div class="card">
            <div class="card-content">
              <p class="subtitle" style="margin-bottom: 20px;">Offene Aufträge pro Merchant</p>
              <ClientOnly>
                <ChartsPieChart 
                  :data="ordersWithoutShipmentsByOrg" 
                  title="Orders by Organization"
                />
              </ClientOnly>
            </div>
          </div>
        </div>

        <div class="column">
          <div class="card">
            <div class="card-content">
              <p class="title">
                {{totalWarehouseVolume}} qm3
              </p>
              <p class="subtitle">Lagernutzung</p>
              <div v-if="warehouseVolumeData?.debug?.length" class="mt-3">
                <details>
                  <summary class="cursor-pointer">Debug Information ({{warehouseVolumeData.debug.length}} products)</summary>
                  <div class="mt-2 max-height-200px overflow-y-auto">
                    <table class="table is-narrow is-striped">
                      <thead>
                        <tr>
                          <th>Product</th>
                          <th>SKU</th>
                          <th>Qty</th>
                          <th>W×H×D</th>
                          <th>Vol/Unit</th>
                          <th>Total Vol</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr v-for="item in warehouseVolumeData.debug" :key="item.index">
                          <td class="truncate max-w-[200px]">
                            <a :href="`/materials/products/${item.productId}/edit`" target="_blank" rel="noopener noreferrer" class="has-text-link">
                              {{ item.productName }}
                            </a>
                          </td>
                          <td>{{ item.sku }}</td>
                          <td>{{ item.qtyOnHand }}</td>
                          <td>{{ item.width }}×{{ item.height }}×{{ item.length }}</td>
                          <td>{{ item.singleProductVolume }}</td>
                          <td>{{ item.totalVolumeForProduct }}</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </details>
              </div>
            </div>
          </div>
        </div>

        <div class="column">
          <div class="card">
            <div class="card-content">
              <p class="title">
                {{productsWithoutDimensionsCount}}
              </p>
              <p class="subtitle">Produkte ohne Abmessungen</p>
              <div v-if="productsWithoutDimensionsData?.records?.length" class="mt-3">
                <details>
                  <summary class="cursor-pointer">Details ({{productsWithoutDimensionsData.records.length}} products)</summary>
                  <div class="mt-2 max-height-200px overflow-y-auto">
                    <table class="table is-narrow is-striped">
                      <thead>
                        <tr>
                          <th>Product</th>
                          <th>SKU</th>
                          <th>Missing</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr v-for="item in productsWithoutDimensionsData.records" :key="item.id">
                          <td class="truncate max-w-[200px]">
                            <a :href="`/materials/products/${item.id}/edit`" target="_blank" rel="noopener noreferrer" class="has-text-link">
                              {{ item.name }}
                            </a>
                          </td>
                          <td>{{ item.sku }}</td>
                          <td>
                            <span v-if="!item.width" class="tag is-danger is-light">W</span>
                            <span v-if="!item.length" class="tag is-danger is-light">L</span>
                            <span v-if="!item.height" class="tag is-danger is-light">H</span>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </details>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>


    <section class="section">
      <div class="d-flex gap-10px">
        <button class="button" @click="overviewHandler('today')" :class="{buttonActive: overviewActive === 'today'}">Heute</button>
        <button class="button" @click="overviewHandler('yesterday')" :class="{buttonActive: overviewActive === 'yesterday'}">Gestern</button>
        <button class="button" @click="overviewHandler('last_week')" :class="{buttonActive: overviewActive === 'last_week'}">7 Tage</button>
        <button class="button" @click="overviewHandler('last_month')" :class="{buttonActive: overviewActive === 'last_month'}">1 Monat</button>
        <button class="button" @click="overviewHandler('last_year')" :class="{buttonActive: overviewActive === 'last_year'}">1 Jahr</button>
      </div>
    </section>

    <section class="section">

      <div :class="detechMobile == 'desktop' ? 'columns' : 'columns'">




        <div class="column">
            <div class="card">
              <div class="card-content">
                <p class="title">
                  {{ overviewCard?.orders  || '0' }}
                </p>
                <p class="subtitle">Aufträge</p>
              </div>
<!--              <footer class="card-footer">-->
<!--                <p class="card-footer-item">-->
<!--                  <span>-->
<!--                    <nuxt-link to="/sales/orders/create">New Order</nuxt-link>-->
<!--                  </span>-->
<!--                </p>-->
<!--                <p class="card-footer-item">-->
<!--                  <nuxt-link to="/sales/orders">Show Orders</nuxt-link>-->
<!--                </p>-->
<!--              </footer>-->
            </div>
        </div>

        <div v-if="defaultSideBarMenu !== 'c'" class="column">
          <div class="card">
            <div class="card-content">
              <p class="title">
                {{ overviewCard?.invoices || '0' }}
              </p>
              <p class="subtitle">Invoices</p>
            </div>
<!--            <footer class="card-footer">-->
<!--              <p class="card-footer-item">-->
<!--                <span>-->
<!--                  <nuxt-link to="/sales/invoices/create">New Invoice</nuxt-link>-->
<!--                </span>-->
<!--              </p>-->
<!--              <p class="card-footer-item">-->
<!--                <nuxt-link to="/sales/invoices">Show Invoices</nuxt-link>-->
<!--              </p>-->
<!--            </footer>-->
          </div>

        </div>

        <div v-if="defaultSideBarMenu !== 'c'" class="column">


          <div class="card">
            <div class="card-content">
              <p class="title">
                {{ overviewCard?.requests  || '0'}}
              </p>
              <p class="subtitle">Requests</p>
            </div>
<!--            <footer class="card-footer">-->
<!--              <p class="card-footer-item">-->
<!--                <span>-->
<!--                  <nuxt-link to="/requests/requests/create">New Request</nuxt-link>-->
<!--                </span>-->
<!--              </p>-->
<!--              <p class="card-footer-item">-->
<!--                <nuxt-link to="/requests/requests">Show Requests</nuxt-link>-->
<!--              </p>-->
<!--            </footer>-->
          </div>

        </div>

        <div v-if="defaultSideBarMenu !== 'c'" class="column">

          <div class="card">
            <div class="card-content">
              <p class="title">
                {{ overviewCard?.shipments  || '0'}}
              </p>
              <p class="subtitle">Shipments</p>
            </div>
<!--            <footer class="card-footer">-->
<!--              <p class="card-footer-item">-->
<!--                <span>-->
<!--                  <nuxt-link to="/sales/shipments/create">New Shipment</nuxt-link>-->
<!--                </span>-->
<!--              </p>-->
<!--              <p class="card-footer-item">-->
<!--                <nuxt-link to="/sales/shipments">Show Shipments</nuxt-link>-->
<!--              </p>-->
<!--            </footer>-->
          </div>

        </div>
      </div>
    </section>

    <section class="section">
      <div class="card">
        <ClientOnly>
          <ChartsOverviewChart :dataSet="overviewDataSet" />
        </ClientOnly>
      </div>
    </section>

<!--    <section class="section">-->
<!--      <div class="columns">-->

<!--        <div class="column">-->
<!--          <div class="card">-->
<!--            <ChartsBarCharts />-->
<!--          </div>-->
<!--        </div>-->

<!--        <div class="column">-->
<!--          <div class="card">-->
<!--            <ChartsLineCharts />-->
<!--          </div>-->
<!--        </div>-->


<!--    </div>-->
<!--    </section>-->

    <section v-if="defaultSideBarMenu !== 'c'" class="section">
      <div class="b-table">
        <div class="table-wrapper has-mobile-cards">
          <h1>Offene Aufträge</h1>
          <table class="table is-fullwidth is-striped is-hoverable is-fullwidth">
            <thead>
              <tr>
                <th>Date Ordered</th>
                <th>Document No</th>
                <th>Client</th>
                <th>Order Source</th>
                <th>External Order Id</th>
                <th>Customer</th>
              </tr>
            </thead>
            <tbody>
<!--            {{shippedOrders}}-->
              <template v-for="(shipItem, shipIndex) in shippedOrders.records" :key="shipIndex">
<!--                <tr v-if="Number(shipItem.m_inout?.length ?? 0) >= 1">-->
                <tr>
                  <td>{{ shipItem?.created }}</td>
                  <td><nuxt-link target="_blank" :to="`/sales/orders/${shipItem?.id}/edit`"> {{  shipItem?.documentNo }}</nuxt-link></td>
                  <td>{{ shipItem?.AD_Org_ID?.identifier }}</td>
                  <td>{{ shipItem?.C_OrderSource_ID?.identifier }}</td>
                  <td>{{ shipItem?.externalOrderId }}</td>
                  <td>{{ shipItem?.C_BPartner_ID?.identifier }}</td>
                </tr>
              </template>
            <!--<tr>
              <td class="is-image-cell">
                <div class="image">
                  <img src="https://avatars.dicebear.com/v2/initials/rebecca-bauch.svg" class="is-rounded">
                </div>
              </td>
              <td data-label="Name">Rebecca Bauch</td>
              <td data-label="Company">Daugherty-Daniel</td>
              <td data-label="City">South Cory</td>
              <td data-label="Progress" class="is-progress-cell">
                <progress max="100" class="progress is-small is-primary" value="79">79</progress>
              </td>
              <td data-label="Created">
                <small class="has-text-grey is-abbr-like" title="Oct 25, 2020">Oct 25, 2020</small>
              </td>
              <td class="is-actions-cell">
                <div class="buttons is-right">
                  <button class="button is-small is-primary" type="button">
                    <span class="icon"><i class="mdi mdi-eye"></i></span>
                  </button>
                  <button class="button is-small is-danger jb-modal" data-target="sample-modal" type="button">
                    <span class="icon"><i class="mdi mdi-trash-can"></i></span>
                  </button>
                </div>
              </td>
            </tr>-->
            </tbody>
          </table>
        </div>
      </div>
    </section>



<!--    <section class="section">-->
<!--      <table class="table">-->
<!--      <thead>-->
<!--      <tr>-->
<!--        <th><abbr title="Position">Zeitraum</abbr></th>-->
<!--        <th>Created Orders</th>-->
<!--        <th><abbr title="Played">Orders Shipped -</abbr></th>-->
<!--        <th><abbr title="Won">Articles Shipped -</abbr></th>-->
<!--        <th><abbr title="Drawn">Cut-Off Success</abbr></th>-->
<!--        <th><abbr title="Lost">Material OUT -</abbr></th>-->
<!--        <th><abbr title="Goals for">Material IN +</abbr></th>-->
<!--        <th><abbr title="Goals against">Articles IN +</abbr></th>-->
<!--      </tr>-->
<!--      </thead>-->
<!--      <tfoot>-->
<!--      <tr>-->
<!--        <th><abbr title="Position">Pos</abbr></th>-->
<!--        <th>Team</th>-->
<!--        <th><abbr title="Played">Pld</abbr></th>-->
<!--        <th><abbr title="Won">W</abbr></th>-->
<!--        <th><abbr title="Drawn">D</abbr></th>-->
<!--        <th><abbr title="Lost">L</abbr></th>-->
<!--        <th><abbr title="Goals for">GF</abbr></th>-->
<!--        <th><abbr title="Goals against">GA</abbr></th>-->
<!--      </tr>-->
<!--      </tfoot>-->
<!--      <tbody>-->
<!--      <tr>-->
<!--        <th>Today</th>-->
<!--        <td>-->
<!--          <a-->
<!--              href="https://en.wikipedia.org/wiki/Leicester_City_F.C."-->
<!--              title="Leicester City F.C."-->
<!--          >Leicester City</a-->
<!--          >-->
<!--          <strong>(C)</strong>-->
<!--        </td>-->
<!--        <td>38</td>-->
<!--        <td>23</td>-->
<!--        <td>12</td>-->
<!--        <td>3</td>-->
<!--        <td>68</td>-->
<!--        <td>36</td>-->
<!--      </tr>-->
<!--      <tr>-->
<!--        <th>Yesterday</th>-->
<!--        <td>-->
<!--          <a-->
<!--              href="https://en.wikipedia.org/wiki/Arsenal_F.C."-->
<!--              title="Arsenal F.C."-->
<!--          >Arsenal</a-->
<!--          >-->
<!--        </td>-->
<!--        <td>38</td>-->
<!--        <td>20</td>-->
<!--        <td>11</td>-->
<!--        <td>7</td>-->
<!--        <td>65</td>-->
<!--        <td>36</td>-->
<!--      </tr>-->
<!--      <tr>-->
<!--        <th>Last 7 Days</th>-->
<!--        <td>-->
<!--          <a-->
<!--              href="https://en.wikipedia.org/wiki/Tottenham_Hotspur_F.C."-->
<!--              title="Tottenham Hotspur F.C."-->
<!--          >Tottenham Hotspur</a-->
<!--          >-->
<!--        </td>-->
<!--        <td>38</td>-->
<!--        <td>19</td>-->
<!--        <td>13</td>-->
<!--        <td>6</td>-->
<!--        <td>69</td>-->
<!--        <td>35</td>-->
<!--      </tr>-->
<!--      <tr class="is-selected">-->
<!--        <th>Last 30 Days</th>-->
<!--        <td>-->
<!--          <a-->
<!--              href="https://en.wikipedia.org/wiki/Manchester_City_F.C."-->
<!--              title="Manchester City F.C."-->
<!--          >Manchester City</a-->
<!--          >-->
<!--        </td>-->
<!--        <td>38</td>-->
<!--        <td>19</td>-->
<!--        <td>9</td>-->
<!--        <td>10</td>-->
<!--        <td>71</td>-->
<!--        <td>41</td>-->
<!--      </tr>-->
<!--      <tr>-->
<!--        <th>Current Month</th>-->
<!--        <td>-->
<!--          <a-->
<!--              href="https://en.wikipedia.org/wiki/Manchester_United_F.C."-->
<!--              title="Manchester United F.C."-->
<!--          >Manchester United</a-->
<!--          >-->
<!--        </td>-->
<!--        <td>38</td>-->
<!--        <td>19</td>-->
<!--        <td>9</td>-->
<!--        <td>10</td>-->
<!--        <td>49</td>-->
<!--        <td>35</td>-->
<!--      </tr>-->
<!--      <tr>-->
<!--        <th>Previous Month</th>-->
<!--        <td>-->
<!--          <a-->
<!--              href="https://en.wikipedia.org/wiki/Southampton_F.C."-->
<!--              title="Southampton F.C."-->
<!--          >Southampton</a-->
<!--          >-->
<!--        </td>-->
<!--        <td>38</td>-->
<!--        <td>18</td>-->
<!--        <td>9</td>-->
<!--        <td>11</td>-->
<!--        <td>59</td>-->
<!--        <td>41</td>-->
<!--      </tr>-->
<!--      <tr>-->
<!--        <th>Current Year</th>-->
<!--        <td>-->
<!--          <a-->
<!--              href="https://en.wikipedia.org/wiki/West_Ham_United_F.C."-->
<!--              title="West Ham United F.C."-->
<!--          >West Ham United</a-->
<!--          >-->
<!--        </td>-->
<!--        <td>38</td>-->
<!--        <td>16</td>-->
<!--        <td>14</td>-->
<!--        <td>8</td>-->
<!--        <td>65</td>-->
<!--        <td>51</td>-->
<!--      </tr>-->
<!--      <tr>-->
<!--        <th>Previous Year</th>-->
<!--        <td>-->
<!--          <a-->
<!--              href="https://en.wikipedia.org/wiki/Liverpool_F.C."-->
<!--              title="Liverpool F.C."-->
<!--          >Liverpool</a-->
<!--          >-->
<!--        </td>-->
<!--        <td>38</td>-->
<!--        <td>16</td>-->
<!--        <td>12</td>-->
<!--        <td>10</td>-->
<!--        <td>63</td>-->
<!--        <td>50</td>-->
<!--        <td></td>-->
<!--      </tr>-->
<!--      </tbody>-->
<!--    </table>-->
<!--    </section>-->

<!--    <section class="section quicklinks">-->
<!--      Quicklinks-->

<!--      <div class="columns">-->
<!--        <div class="column">-->
<!--          <UAsideLinks :links="links" />-->
<!--        </div>-->
<!--        <div class="column">-->
<!--          <UAsideLinks :links="links" />-->
<!--        </div>-->
<!--        <div class="column">-->
<!--          <UAsideLinks :links="links" />-->
<!--        </div>-->
<!--        <div class="column">-->
<!--          <UAsideLinks :links="links" />-->
<!--        </div>-->
<!--      </div>-->
<!--    </section>-->

<!--    <section class="section">-->

<!--      <section class="hero is-info">-->
<!--        <div class="hero-body">-->
<!--          <p class="title">Welcome Onboarding</p>-->
<!--          <p class="subtitle">Let's begin your journey with LogShip ERP</p>-->
<!--        </div>-->


<!--        <section class="section">-->

<!--          <DashboardQuickLinks />-->

<!--        </section>-->





<!--      </section>-->


<!--    </section>-->

<!--    <section class="section">-->

<!--    <div class="info__cards">-->

<!--      <div class="card__wrapper">-->
<!--        <div class="card">-->
<!--          <div class="header">-->
<!--            <div class="icon">-->
<!--              <img src="/assets/s1.png" alt="" />-->

<!--              <div class="ic">-->
<!--                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">-->
<!--                  <path-->
<!--                      d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 48c110.5 0 200 89.5 200 200 0 110.5-89.5 200-200 200-110.5 0-200-89.5-200-200 0-110.5 89.5-200 200-200m140.2 130.3l-22.5-22.7c-4.7-4.7-12.3-4.7-17-.1L215.3 303.7l-59.8-60.3c-4.7-4.7-12.3-4.7-17-.1l-22.7 22.5c-4.7 4.7-4.7 12.3-.1 17l90.8 91.5c4.7 4.7 12.3 4.7 17 .1l172.6-171.2c4.7-4.7 4.7-12.3 .1-17z" />-->
<!--                </svg>-->
<!--              </div>-->
<!--            </div>-->

<!--            <div class="info">-->
<!--              <h3>100+</h3>-->
<!--              <p>All Posts</p>-->
<!--            </div>-->
<!--          </div>-->

<!--          <div class="footer">-->
<!--            <button>-->
<!--              View Posts-->

<!--              <span>-->
<!--                    <svg width="15" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">-->
<!--                      <path-->
<!--                          d="M313.9 216H12c-6.6 0-12 5.4-12 12v56c0 6.6 5.4 12 12 12h301.9v46.1c0 21.4 25.9 32.1 41 17l86.1-86.1c9.4-9.4 9.4-24.6 0-33.9l-86.1-86.1c-15.1-15.1-41-4.4-41 17V216z" />-->
<!--                    </svg>-->
<!--                  </span>-->
<!--            </button>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->

<!--      <div class="card__wrapper">-->
<!--        <div class="card">-->
<!--          <div class="header">-->
<!--            <div class="icon">-->
<!--              <img src="/assets/s2.png" alt="" />-->

<!--              <div class="ic">-->
<!--                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 544 512">-->
<!--                  <path-->
<!--                      d="M527.8 288H290.5l158 158c6 6 16 6.5 22.2 .7 38.7-36.5 65.3-85.6 73.1-140.9 1.3-9.5-6.5-17.9-16.1-17.9zm-15.8-64.8C503.7 103.7 408.3 8.3 288.8 0 279.7-.6 272 7.1 272 16.2V240h223.8c9.1 0 16.8-7.7 16.2-16.8zM224 288V50.7c0-9.6-8.4-17.4-17.8-16.1C87 51.5-4.1 155.6 .1 280.4 4.5 408.5 114.8 513.6 243 512c50.4-.6 97-16.9 135.3-44 7.9-5.6 8.4-17.2 1.6-24.1L224 288z" />-->
<!--                </svg>-->
<!--              </div>-->
<!--            </div>-->

<!--            <div class="info">-->
<!--              <h3>100+</h3>-->
<!--              <p>All Category</p>-->
<!--            </div>-->
<!--          </div>-->

<!--          <div class="footer">-->
<!--            <button>-->
<!--              View Category-->

<!--              <span>-->
<!--                    <svg width="15" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">-->
<!--                      <path-->
<!--                          d="M313.9 216H12c-6.6 0-12 5.4-12 12v56c0 6.6 5.4 12 12 12h301.9v46.1c0 21.4 25.9 32.1 41 17l86.1-86.1c9.4-9.4 9.4-24.6 0-33.9l-86.1-86.1c-15.1-15.1-41-4.4-41 17V216z" />-->
<!--                    </svg>-->
<!--                  </span>-->
<!--            </button>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->

<!--      <div class="card__wrapper">-->
<!--        <div class="card">-->
<!--          <div class="header">-->
<!--            <div class="icon">-->
<!--              <img src="/assets/s3.png" alt="" />-->

<!--              <div class="ic">-->
<!--                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">-->
<!--                  <path-->
<!--                      d="M256 8C119 8 8 119 8 256S119 504 256 504 504 393 504 256 393 8 256 8zm92.5 313h0l-20 25a16 16 0 0 1 -22.5 2.5h0l-67-49.7a40 40 0 0 1 -15-31.2V112a16 16 0 0 1 16-16h32a16 16 0 0 1 16 16V256l58 42.5A16 16 0 0 1 348.5 321z" />-->
<!--                </svg>-->
<!--              </div>-->
<!--            </div>-->

<!--            <div class="info">-->
<!--              <h3>100+</h3>-->
<!--              <p>Recent Comments</p>-->
<!--            </div>-->
<!--          </div>-->

<!--          <div class="footer">-->
<!--            <button>-->
<!--              View Comments-->

<!--              <span>-->
<!--                    <svg width="15" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">-->
<!--                      <path-->
<!--                          d="M313.9 216H12c-6.6 0-12 5.4-12 12v56c0 6.6 5.4 12 12 12h301.9v46.1c0 21.4 25.9 32.1 41 17l86.1-86.1c9.4-9.4 9.4-24.6 0-33.9l-86.1-86.1c-15.1-15.1-41-4.4-41 17V216z" />-->
<!--                    </svg>-->
<!--                  </span>-->
<!--            </button>-->
<!--          </div>-->
<!--        </div>-->

<!--      </div>-->
<!--      <div class="card__wrapper">-->
<!--        <div class="card">-->
<!--          <div class="header">-->
<!--            <div class="icon">-->
<!--              <img src="/assets/s1.png" alt="" />-->

<!--              <div class="ic">-->
<!--                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">-->
<!--                  <path-->
<!--                      d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 48c110.5 0 200 89.5 200 200 0 110.5-89.5 200-200 200-110.5 0-200-89.5-200-200 0-110.5 89.5-200 200-200m140.2 130.3l-22.5-22.7c-4.7-4.7-12.3-4.7-17-.1L215.3 303.7l-59.8-60.3c-4.7-4.7-12.3-4.7-17-.1l-22.7 22.5c-4.7 4.7-4.7 12.3-.1 17l90.8 91.5c4.7 4.7 12.3 4.7 17 .1l172.6-171.2c4.7-4.7 4.7-12.3 .1-17z" />-->
<!--                </svg>-->
<!--              </div>-->
<!--            </div>-->

<!--            <div class="info">-->
<!--              <h3>100+</h3>-->
<!--              <p>Admin Users</p>-->
<!--            </div>-->
<!--          </div>-->

<!--          <div class="footer">-->
<!--            <button>-->
<!--              View Users-->

<!--              <span>-->
<!--                    <svg width="15" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">-->
<!--                      <path-->
<!--                          d="M313.9 216H12c-6.6 0-12 5.4-12 12v56c0 6.6 5.4 12 12 12h301.9v46.1c0 21.4 25.9 32.1 41 17l86.1-86.1c9.4-9.4 9.4-24.6 0-33.9l-86.1-86.1c-15.1-15.1-41-4.4-41 17V216z" />-->
<!--                    </svg>-->
<!--                  </span>-->
<!--            </button>-->
<!--          </div>-->
<!--        </div>-->

<!--      </div>-->
<!--      <div class="card__wrapper">-->
<!--        <div class="card">-->
<!--          <div class="header">-->
<!--            <div class="icon">-->
<!--              <img src="/assets/s2.png" alt="" />-->

<!--              <div class="ic">-->
<!--                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 544 512">-->
<!--                  <path-->
<!--                      d="M527.8 288H290.5l158 158c6 6 16 6.5 22.2 .7 38.7-36.5 65.3-85.6 73.1-140.9 1.3-9.5-6.5-17.9-16.1-17.9zm-15.8-64.8C503.7 103.7 408.3 8.3 288.8 0 279.7-.6 272 7.1 272 16.2V240h223.8c9.1 0 16.8-7.7 16.2-16.8zM224 288V50.7c0-9.6-8.4-17.4-17.8-16.1C87 51.5-4.1 155.6 .1 280.4 4.5 408.5 114.8 513.6 243 512c50.4-.6 97-16.9 135.3-44 7.9-5.6 8.4-17.2 1.6-24.1L224 288z" />-->
<!--                </svg>-->
<!--              </div>-->
<!--            </div>-->

<!--            <div class="info">-->
<!--              <h3>100+</h3>-->
<!--              <p>Users</p>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="footer">-->
<!--            <button>-->
<!--              View Users-->

<!--              <span>-->
<!--                    <svg width="15" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">-->
<!--                      <path-->
<!--                          d="M313.9 216H12c-6.6 0-12 5.4-12 12v56c0 6.6 5.4 12 12 12h301.9v46.1c0 21.4 25.9 32.1 41 17l86.1-86.1c9.4-9.4 9.4-24.6 0-33.9l-86.1-86.1c-15.1-15.1-41-4.4-41 17V216z" />-->
<!--                    </svg>-->
<!--                  </span>-->
<!--            </button>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="card__wrapper">-->
<!--        <div class="card">-->
<!--          <div class="header">-->
<!--            <div class="icon">-->
<!--              <img src="/assets/s3.png" alt="" />-->

<!--              <div class="ic">-->
<!--                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">-->
<!--                  <path-->
<!--                      d="M256 8C119 8 8 119 8 256S119 504 256 504 504 393 504 256 393 8 256 8zm92.5 313h0l-20 25a16 16 0 0 1 -22.5 2.5h0l-67-49.7a40 40 0 0 1 -15-31.2V112a16 16 0 0 1 16-16h32a16 16 0 0 1 16 16V256l58 42.5A16 16 0 0 1 348.5 321z" />-->
<!--                </svg>-->
<!--              </div>-->
<!--            </div>-->

<!--            <div class="info">-->
<!--              <h3>100+</h3>-->
<!--              <p>Tatal Visitor</p>-->
<!--            </div>-->
<!--          </div>-->

<!--          <div class="footer">-->
<!--            <button>-->
<!--              View Visitor-->

<!--              <span>-->
<!--                    <svg width="15" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">-->
<!--                      <path-->
<!--                          d="M313.9 216H12c-6.6 0-12 5.4-12 12v56c0 6.6 5.4 12 12 12h301.9v46.1c0 21.4 25.9 32.1 41 17l86.1-86.1c9.4-9.4 9.4-24.6 0-33.9l-86.1-86.1c-15.1-15.1-41-4.4-41 17V216z" />-->
<!--                    </svg>-->
<!--                  </span>-->
<!--            </button>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
<!--    <div class="my__courses">-->
<!--      <div class="header">-->
<!--        <h4>Our Activities</h4>-->
<!--      </div>-->

<!--      <div class="courses">-->
<!--        <div class="card">-->
<!--          <div class="img__wrapper">-->
<!--            <img src="/assets/1.svg" alt="" />-->
<!--          </div>-->

<!--          <h5>Management</h5>-->
<!--        </div>-->

<!--        <div class="card">-->
<!--          <div class="img__wrapper">-->
<!--            <img src="/assets/2.svg" alt="" />-->
<!--          </div>-->

<!--          <h5>Management</h5>-->
<!--        </div>-->

<!--        <div class="card">-->
<!--          <div class="img__wrapper">-->
<!--            <img src="/assets/3.svg" alt="" />-->
<!--          </div>-->

<!--          <h5>Management</h5>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->

<!--    </section>-->

  </NuxtLayout>
</template>

<style scoped>
section.section {
  padding-top: 10px !important;
  padding-bottom: 20px !important;
}

section.hero.is-info {
  border-radius: 0.75rem;
}

.orgtextsmall {
  font-size: 16px;
}

.max-height-200px {
  max-height: 200px;
}

.overflow-y-auto {
  overflow-y: auto;
}

.cursor-pointer {
  cursor: pointer;
}
</style>