Quasar

<!-- App.vue - تطبيق كامل بقالب واحد -->
<template>
  <q-layout view="hHh lpR fFf">
    <q-header reveal class="bg-primary text-white">
      <q-toolbar>
        <q-btn flat dense round icon="menu" aria-label="Menu" @click="toggleLeftDrawer" />
        <q-toolbar-title>تطبيقي</q-toolbar-title>
        <q-btn flat dense round icon="notifications" />
      </q-toolbar>
    </q-header>

    <q-drawer v-model="leftDrawerOpen" show-if-above bordered>
      <q-list>
        <q-item-label header>القائمة الرئيسية</q-item-label>
        
        <EssentialLink
          v-for="link in linksList"
          :key="link.title"
          v-bind="link"
        />
      </q-list>
    </q-drawer>

    <q-page-container>
      <q-page padding>
        <div class="q-pa-md">
          <q-card flat bordered>
            <q-card-section>
              <div class="text-h6">قائمة المستخدمين</div>
            </q-card-section>
            <q-card-section class="q-pt-none">
              <q-table
                flat bordered
                :rows="rows"
                :columns="columns"
                row-key="id"
                :filter="filter"
                :pagination="pagination">
                <template v-slot:top>
                  <span class="text-h6">المستخدمون</span>
                  <q-space />
                  <q-input dense debounce="300" v-model="filter" placeholder="بحث..." class="q-ml-md">
                    <template v-slot:append>
                      <q-icon name="search" />
                    </template>
                  </q-input>
                </template>
                <template v-slot:body-cell-actions="props">
                  <q-td :props="props">
                    <q-btn color="primary" flat round icon="edit" size="sm" />
                    <q-btn color="negative" flat round icon="delete" size="sm" />
                  </q-td>
                </template>
              </q-table>
            </q-card-section>
          </q-card>
        </div>
      </q-page>
    </q-page-container>
  </q-layout>
</template>

<script setup>
import { ref } from 'vue';
import EssentialLink from 'components/EssentialLink.vue';

const leftDrawerOpen = ref(false);
const filter = ref('');
const pagination = ref({ rowsPerPage: 10 });

const columns = [
  { name: 'id', label: 'الرقم', field: 'id', align: 'left', sortable: true },
  { name: 'name', label: 'الاسم', field: 'name', align: 'left', sortable: true },
  { name: 'email', label: 'البريد', field: 'email', align: 'left', sortable: true },
  { name: 'role', label: 'الدور', field: 'role', align: 'left' },
  { name: 'actions', label: 'إجراءات', field: 'actions', align: 'center' }
];

const rows = ref([
  { id: 1, name: 'أحمد محمد', email: 'ahmad@example.com', role: 'مدير' },
  { id: 2, name: 'فاطمة علي', email: 'fatima@example.com', role: 'مستخدم' },
  { id: 3, name: 'محمد حسن', email: 'mohamed@example.com', role: 'محرر' }
]);

const linksList = [
  { title: 'الرئيسية', icon: 'home', link: '/' },
  { title: 'المستخدمون', icon: 'people', link: '/users' },
  { title: 'الإعدادات', icon: 'settings', link: '/settings' }
];

const toggleLeftDrawer = () => {
  leftDrawerOpen.value = !leftDrawerOpen.value;
};
</script>

<style>
/* RTL support مدمج تلقائياً */
</style>