Gig  Overview:

This project focuses on converting the Admin Dashboard Page into a responsive, modern, and functional interface using Vue.js 3 Composition API and TailwindCSS. The Admin Dashboard will include a collapsible left sidebar for navigation, widgets for key metrics, interactive charts, and a streamlined layout for managing data effectively. You are provided with a link to UI design for the conversion of the Admin Dashboard  Page.

Scope of Work:

1. Main Dashboard Layout:

Features:

-Displays navigation links (e.g., User Management, Classroom, Rewards, Settings).

-Includes icons and labels for better UX.

-Smooth toggle animation for expansion/collapse.

-Displays profile options, notifications, and a global search bar.

-Key metrics such as total users, total courses, and courses assigned.

-Optimized for desktop, tablet, and mobile devices.

-Ensure the quick action icon is clickable and pops up a modal when clicked.

-Collapsible Left Sidebar:

-Top Navigation Bar:

-Dashboard Widgets:

-Responsive Design:

-Dashboard Tab:

Tasks:

-Develop a collapsible sidebar component with Vue.js reactivity.

-Create a top navigation bar with dropdowns and search functionality.

-Design a grid-based layout for widgets using TailwindCSS.

2. Widgets and Charts:

Features:

-Total Users, Total Courses, Course Assigned, etc.

-Each widget should be interactive and highlight actionable insights.

-Line chart for activity trends with date filter.

-Circle Gauge for training progress growth(Completed, In Progress, Not Started).

-Widgets:

-Charts:

Tasks:

-Integrate a charting library like Chart.js or ApexCharts for dynamic charts.

-Style and format widgets for clarity and consistency.

-Ensure charts are interactive and update dynamically based on data.

3. User Management Section:

Features:

-Table displaying user details (Name, Training, Date,Amount, Status, Actions) below the line graph with header Recent Activity.

-A view-all link to view all users.

-Action buttons (e.g., View, Edit, Delete) for user management.

-A right side card to show upcoming task and buttons to update training and email

Tasks:

-Build a responsive table component with TailwindCSS.

-Add search and filter capabilities using Vue.js.

-Implement reusable buttons with hover and active states.

4. Notification Bar:

Feature:

-Displays recent alerts with timestamps.

-Option to mark all as read or clear notifications.

-Notifications Dropdown:

Profile Dropdown:

-Show the options to select when the profile dropdown is clicked.

Tasks:

-Create a notification and profile dropdown component with Vue animations.

-Style these components for consistency with the dashboard.

Required Skills:

-Strong proficiency in Vue.js 3 with experience in using the Composition API.

-Expertise in TailwindCSS for creating responsive and modern UI layouts.

-Ability to work with Vue.js state management (Vuex or Composition API’s reactive states) for dynamic data rendering.

-Experience with form validation and handling user input securely in frontend applications.

-Knowledge of responsive design principles and mobile-first development.

-Familiarity with Git for version control.

Design & Aesthetic Requirements:

-Color Scheme:

-Primary color: #D50036 

-Secondary color: #C4C4C4

-Primary-green: #00B454

-Primary-yellow:#F39D1C

-Primary-gray:#4B5054

-Primary-black:#0F151F

-Primary-red:#E50303

-Background color: #F5F5F5 

-Text color: #000000, #D50036, #FFFFFF 

-Button color: #D50036

-Border color: #E5E5E5

These color codes are the company’s brand colors and design guide

Fonts:

-Use a clean, modern font like Source-san.

Spacing:

-Generous padding and margin for a spacious design that enhances readability.

Responsiveness:

-Ensure that all pages are responsive across all device sizes, from desktop to mobile.

Layout:

-Use TailwindCSS grid and flex utilities for consistent alignment.

-Ensure buttons, progress bars, and question layouts are accessible and easy to interact with on all devices.

Expectations: 

   As a Techo chosen to participate in this gig, we have some expectations.

-Timely Completion: complete each gig within the given timeframe. If the gig has not been completed within this frame, the project will be re-assigned.

-Communication: Stay in touch with the Community Manager for guidance, support and feedback throughout the project. This can be done through the chat box in the My Gigs section underneath the gig description.

-Work-Ethic Alignment: Make a concerted effort to comply with our standards.

Figma Link: 

• https://www.figma.com/design/3ox2IT1QmV1XxOtLSnf9H2/Admin-Dashboard?node-id=0-1&p=f&t=cdXfpOzuqreXPA0S-0