Gig Overview: This project involves converting and implementing the Gig Automation Platform UI using Vue.js Composition API (JavaScript) and TailwindCSS. The UI will feature widgets for data correlation, search bars, tables with pagination, modals for data entry, and chart visualizations. The aim is to build a responsive, user-friendly, and visually appealing interface that aligns with modern web standards. You are provided with a Figma design to guide the UI implementation.

Scope of Work:

1. Navigation Bar:

Required Features:

-Sidebar with Workplace (BRD Request, Obligation)

-Navbar with Profile Pic, User Name, and Dropdown

-Responsive design & state handling

-Responsive layout for desktop, tablet, and mobile devices.

-TailwindCSS for styling to match the desired color scheme and responsive behavior.

Expected Tasks:

-Develop a collapsible, dynamic sidebar component

-Implement state management for dropdowns and active links

-TailwindCSS classes for styling the page and ensuring it’s fully responsive.

2. BRD Request Page:

Required Features:

-Responsive design to adjust the layout for various screen sizes.

-Widgets for data summary correlation.

-Search bar for filtering request

-A responsive, data-driven table with pagination for structured data display

- Button → Opens a modal form with fields: Project Dropdown, Title Input, WYSIWYG Editor (WYSIWYG Editor suggested API: TipTap or Quill.js)

-View Page to display detailed table information.

-Responsive design with a clean layout and user-friendly form.

Expected Tasks:

-Create reusable Table & Widget components

-Implement Modal form logic and validation

-Use TailwindCSS to apply appropriate styling and responsiveness.

-Ensure that the layout is simple yet visually appealing for a smooth user experience.

3. Obligation - Projects:

Required Features:

-Responsive design to adjust the layout for various screen sizes.

-Widgets for data summary correlation.

-Search bar for filtering request

-A responsive, data-driven table with pagination for structured data display

-An Active tab with : Projects, Scoping Document, Gigs . Each tab should be dynamically loads corresponding content

-Button → Opens a modal form with fields: Project input field, Title Input field,  WYSIWYG Editor (WYSIWYG Editor suggested API: TipTap or Quill.js).

-View Page to display detailed table information, and has a button that when clicked brings out a modal form.

Expected Tasks:

-Create reusable Table & Widget components

-Develop Dynamic tabs for data organization

-Implement Form handling and validation

-Use TailwindCSS to apply appropriate styling and responsiveness.

-Ensure that the layout is simple yet visually appealing for a smooth user experience.

-Ensure dynamic data (such as summary stats) can be rendered effectively.

4. Scoping Document:

Required Features:

-Responsive design to adjust the layout for various screen sizes.

-Widgets for data summary correlation.

-Search bar for filtering request

-A responsive, data-driven table with pagination for structured data display

-An Active tab with : Projects, Scoping Document, Gigs . Each tab should be dynamically loads corresponding content

-Button → That opens a create gig form page :  with input fields, single and multi -select dropdown and a WYSIWYG Editor (WYSIWYG Editor suggested API: TipTap or Quill.js).

-View Page to display detailed table information.

Expected Tasks:

-Create reusable Table & Widget components

-Develop Dynamic tabs for data organization

-Implement Form handling and validation

-Use TailwindCSS to apply appropriate styling and responsiveness.

-Ensure that the layout is simple yet visually appealing for a smooth user experience.

-Ensure dynamic data (such as summary stats) can be rendered effectively.

5. Obligation - Gigs:

Required Features:

-Responsive design to adjust the layout for various screen sizes.

-Widgets for data summary correlation on the overview tab and also the all gigs tab

-Search bar for filtering request

-A responsive, data-driven table with pagination for structured data display for all gigs.

-Bar chart and Line graph for trends (suggested chart API: chart.js , Apexchart)

-An Active tab with : Projects, Scoping Document, Gigs . Each tab should dynamically load corresponding content.

-An inner Active tab with: Overview and All Gigs.

-View Page to display detailed table information.

Expected Tasks:

-Create reusable Table & Widget components

-Develop Dynamic tabs for data organization.

-Develop interactive widgets for key metrics.

-Implement Data visualization with charts.

-Use TailwindCSS to apply appropriate styling and responsiveness.

-Ensure that the layout is simple yet visually appealing for a smooth user experience.

-Ensure dynamic data (such as summary stats) can be rendered effectively.

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

-Widget color : #FFECEC

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/yb3Uzak9oo00wnsGXY4d3B/Gig-Pipline?node-id=0-1&p=f&t=kWkh4MO6fup2SsOm-0

Repository: Clone from main branch to gig_automation for this project