Kunafa Dashboard Vue

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

---

Demo Link Here

---

✨ Features

• 🌐 Internationalization (i18n) with Vue I18n
• 🔌 Ready Integrated with API endpoints via DummyJson
• ↔️ 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 .

---

Components

• 📊 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

---

🛠️ Technologies

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 from Chart.js .
• user icons from Iconify .

---

🚀 Quick Start

Prerequisites

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

Installation

1. Clone the repository:

git clone [email protected]:kunafaPlus/kunafa-dashboard-vue.git
cd 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

---

📸 Screenshots

LTR	RTL

Forms

Charts

Datatables

---

TODO

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

• Replace all SVG icons with Iconify icons.
• Translate the entire application into both Arabic and English.
• Convert all CSS files to SASS for better maintainability and customization.
• Fix images and certain HTML properties in DataTables components.
• Implement proper pagination for server-side DataTables.
• Enhance Mobile Responsive and breakpoints .
• Complete Dark Mode .
• Login and signup pages .
• profile page .
• Integrate the vue-advanced-chat package for real-time chat functionality.
  (vue-advanced-chat)
• Add a Kanban dashboard for task management using the following open-source library:
  (kanban-task-management).

---

Dependencies Overview

📦 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 integrating vue-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

---

🤝 Contributing

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 .

Contributors ✨

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

Omar AlAlwi 🏆 Creator

Mohammed Jamal 🏆 Contributer

Zainab Mohamed 🏆 Contributer

License

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

Community

Join to Kunafa Community in Telegram.