Repository files navigation

Kunafa Dashboard Vue is an open-source, Vue.js-based admin dashboard that supports multi-language functionality with seamless RTL (Right-to-Left) and LTR (Left-to-Right) layouts. This project is designed to be highly customizable and easy to use for developers building modern web applications

Here’s your updated documentation section with the mobile app and a new contribution invitation:

Kunafa Project is a versatile open-source dashboard available in multiple technologies, catering to different development preferences. Explore the versions below and choose the one that best fits your tech stack!

We’re actively building Kunafa, and we’d love your help! Join our community, contribute to the project, and share your ideas.

💬Join Our Developer Telegram Group:

Let's build something awesome together! 🚀🔥

• 🌐 Internationalization (i18n) with Vue I18n
• 🔌 Ready Integrated with API endpoints viaDummyJson
• ↔️ Bidirectional layout support (RTL/LTR)
• 📊 8+ Chart types powered by Chart.js :
• 📋 Advanced Data Tables with sorting/filtering .
• 🖋️ Dynamic Forms with multiple layouts:
• 🎨 Modern UI built with Tailwind CSS .
• 🗃️ State management via Pinia .
• ⚡ Vite-powered development .
• 🧩 Component-based architecture .

• 📊Charts :
  • bar-charts .
  • bubble-charts .
  • doughnut-charts .
  • line-charts .
  • pie-charts .
  • polar-area-charts.
  • reader-charts .
  • scatter-charts .
• 📋Data Tables .
  • basic-datatables .
  • searchable-datatables .
  • serverside-datatables .
  • sortable-datatables .
• 🖋️Forms:
  • Inline forms
  • Tabbed forms
  • Stepped forms
  • Object-based forms

Core Framework

• Vue.js 3 (Composition API)
• Vue Router 4
• Pinia (State Management)

API Integration

• DummyJSON (Mock REST API)
• Axios (HTTP Client)

Styling & UI

• Tailwind CSS 3
• PostCSS RTL
• Iconify (Icon Library)

Data Visualization

• Chart.js 3
• vue-chart-3

Forms & Tables

• Vueform Builder
• vue3-easy-data-table

Utilities

• Axios (HTTP Client)
• Vue I18n (Internationalization)
• VueUse (Composition Utilities)
• Moment.js (Date handling)
• uses data fromChart.js .
• user icons fromIconify .

• Node.js v20.x or higher
• npm, pnpm, or yarn

1. Clone the repository:

git clone git@github.com:kunafaPlus/kunafa-dashboard-vue.gitcd kunafa-dashboard-vue

2. Install dependencies:

npm install# or pnpm install / yarn install

3. Start development server:

npm run dev

4. Build for production:

npm run build

LTR	RTL

Forms

Charts

Datatables

Here are planned enhancements and fixes for the Kunafa Dashboard Vue project:

• Replace all SVG icons withIconify icons.
• Translate the entire application into bothArabic andEnglish.
• Convert all CSS files toSASS for better maintainability and customization.
• Fix images and certain HTML properties inDataTables components.
• Implement properpagination for server-side DataTables.
• Enhance Mobile Responsive and breakpoints .
• Complete Dark Mode .
• Login and signup pages .
• profile page .
• Integrate thevue-advanced-chat package for real-time chat functionality.
  (vue-advanced-chat)
• Add aKanban dashboard for task management using the following open-source library:
  (kanban-task-management).

📦 Key Dependencies Summary

• tailwindcss: Utility-first CSS framework for rapidly building custom designs
• vite: Next-gen frontend tooling for modern web projects
• @intlify/unplugin-vue-i18n: Plugin for integratingvue-i18n with Vite
• @vueform/vueform: Advanced form builder for Vue.js
• @vueuse/core: Essential Vue composition utilities
• axios: Promise-based HTTP client
• chart.js: Flexible charting library
• chartjs-adapter-moment: Moment.js adapter for Chart.js
• flatpickr: Lightweight date picker
• moment: Date manipulation library
• pinia: Vue state management
• postcss-rtlcss: LTR→RTL styles converter
• vue: Progressive JavaScript framework
• vue-chart-3: Vue wrapper for Chart.js
• vue-flatpickr-component: Vue date picker component
• vue-i18n: Internationalization plugin
• vue-router: Official Vue routing
• vue3-easy-data-table: Vue data table component
• @iconify/vue: Icon component library
• @vitejs/plugin-vue: Vite Vue integration

We welcome contributions! Please follow these steps:

1. Fork the project
2. Create your feature branch (git checkout -b component/AmazingComponent)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request
6. please follow standard in previous work .
7. add screenshot for new component .
8. add component (with it's sub components) in components section in documentation file .

Thanks to these wonderful people for contributing to this project! 💖

Omar AlAlwi 🏆 Creator

Mohammed Jamal 🏆 Contributer

Zainab Mohamed 🏆 Contributer

Kunafa Dashboard Vue is licensed under theMIT License. Feel free to use, modify, and distribute the code as you see fit.

Join toKunafa Community in Telegram.