readme + credit added

Author: KhanAnupamShafi

README.md

@@ -1,37 +1,13 @@
 # TailAdmin Vue.js Dashboard
 
-A modern Vue.js admin dashboard template built with Tailwind CSS.
+#### Preview
+ - [Demo](https://themewagon.github.io/tailadmin-vuejs/)
 
-## GitHub Pages Deployment
+#### Download
+ - [Download from ThemeWagon](https://themewagon.com/themes/tailadmin-vuejs/)
 
-This project is configured for automatic deployment to GitHub Pages using GitHub Actions.
 
-### Setup Instructions
-
-1. **Fork or clone this repository**
-2. **Enable GitHub Pages in your repository settings:**
-   - Go to your repository on GitHub
-   - Click on **Settings** tab
-   - Scroll down to **Pages** section in the left sidebar
-   - Under "Source", select **"GitHub Actions"**
-   - Save the settings
-3. **Push your changes to the main branch**
-4. **The GitHub Action will automatically build and deploy your site**
-
-### Troubleshooting
-
-If you get an error about "Pages site not found":
-1. Make sure you've enabled GitHub Pages in repository settings first
-2. The workflow includes `enablement: true` to help with initial setup
-3. After enabling Pages, push your changes again
-
-### Repository Configuration
-
-- **Username:** `themewagon`
-- **Repository:** `tailadmin-vuejs`
-- **GitHub Pages URL:** `https://themewagon.github.io/tailadmin-vuejs/`
-
-### Local Development
+### Getting Started
 
 ```bash
 # Install dependencies
@@ -47,47 +23,14 @@ npm run build
 npm run preview
 ```
 
-### Deployment Features
-
-- ✅ Automatic deployment via GitHub Actions
-- ✅ Hash-based routing for GitHub Pages compatibility
-- ✅ Proper base URL configuration
-- ✅ Production-optimized builds
-
-### Manual Deployment (Alternative)
-
-If you prefer manual deployment:
-
-```bash
-# Build for GitHub Pages
-npm run build:gh-pages
-
-# Deploy using gh-pages (requires gh-pages package)
-npm run deploy
-```
-
-### Project Structure
 
+## Author 
 ```
-src/
-├── components/     # Reusable Vue components
-├── views/         # Page components
-├── router/        # Vue Router configuration
-├── assets/        # Static assets
-└── icons/         # SVG icon components
+Design and code is completely written by TailAdmin and development team. 
 ```
 
-### Technologies Used
-
-- Vue 3 with Composition API
-- Vue Router 4
-- Tailwind CSS
-- Vite
-- TypeScript
-- ApexCharts
-- FullCalendar
-- And more...
-
-### License
+## License
 
-This project is licensed under the MIT License.
+ - Design and Code is Copyright © [TailAdmin](https://tailadmin.com/)
+ - Licensed cover under [MIT]
+ - Distributed by [ThemeWagon](https://themewagon.com)

src/components/layout/AdminLayout.vue

@@ -10,14 +10,38 @@
       <div class="p-4 mx-auto max-w-(--breakpoint-2xl) md:p-6">
         <slot></slot>
       </div>
+      <!-- Footer -->
+      <footer class="p-4 mx-auto max-w-(--breakpoint-2xl) md:p-6 pt-0">
+        <p class="text-sm text-center text-gray-500 dark:text-gray-400">
+          Designed and Developed by 
+          <a 
+            href="https://tailadmin.com/" 
+            target="_blank" 
+            rel="noopener noreferrer"
+            class="text-brand-500 hover:text-brand-600 transition-colors duration-200 font-medium"
+          >
+            TailAdmin
+          </a>
+          ~ Distributed by 
+          <a 
+            href="https://themewagon.com/" 
+            target="_blank" 
+            rel="noopener noreferrer"
+            class="text-brand-500 hover:text-brand-600 transition-colors duration-200 font-medium"
+          >
+            ThemeWagon
+          </a>
+          .
+        </p>
+      </footer>
     </div>
   </div>
 </template>
 
-<script setup>
-import AppSidebar from './AppSidebar.vue'
-import AppHeader from './AppHeader.vue'
+<script setup lang="ts">
 import { useSidebar } from '@/composables/useSidebar'
+import AppHeader from './AppHeader.vue'
+import AppSidebar from './AppSidebar.vue'
 import Backdrop from './Backdrop.vue'
 const { isExpanded, isHovered } = useSidebar()
 </script>

src/components/layout/SidebarWidget.vue

@@ -6,13 +6,5 @@
     <p class="mb-4 text-gray-500 text-theme-sm dark:text-gray-400">
       Leading Tailwind CSS Admin Template with 400+ UI Component and Pages.
     </p>
-    <a
-      href="https://tailadmin.com/pricing"
-      target="_blank"
-      rel="nofollow"
-      class="flex items-center justify-center p-3 font-medium text-white rounded-lg bg-brand-500 text-theme-sm hover:bg-brand-600"
-    >
-      Purchase Plan
-    </a>
   </div>
 </template>

src/components/layout/header/UserMenu.vue

@@ -57,17 +57,17 @@
   </div>
 </template>
 
-<script setup>
-import { UserCircleIcon, ChevronDownIcon, LogoutIcon, SettingsIcon, InfoCircleIcon } from '@/icons'
+<script setup lang="ts">
+import { ChevronDownIcon, InfoCircleIcon, LogoutIcon, SettingsIcon, UserCircleIcon } from '@/icons'
+import { onMounted, onUnmounted, ref } from 'vue'
 import { RouterLink } from 'vue-router'
-import { ref, onMounted, onUnmounted } from 'vue'
 
 const dropdownOpen = ref(false)
-const dropdownRef = ref(null)
+const dropdownRef = ref<HTMLElement | null>(null)
 
 const menuItems = [
   { href: '/profile', icon: UserCircleIcon, text: 'Edit profile' },
-  { href: '/chat', icon: SettingsIcon, text: 'Account settings' },
+  { href: '/profile', icon: SettingsIcon, text: 'Account settings' },
   { href: '/profile', icon: InfoCircleIcon, text: 'Support' },
 ]
 
@@ -85,8 +85,8 @@ const signOut = () => {
   closeDropdown()
 }
 
-const handleClickOutside = (event) => {
-  if (dropdownRef.value && !dropdownRef.value.contains(event.target)) {
+const handleClickOutside = (event: Event) => {
+  if (dropdownRef.value && !dropdownRef.value.contains(event.target as Node)) {
     closeDropdown()
   }
 }