Gig  Overview: The goal of this project is to convert the GAC Loader Pages into a dynamic, responsive, and user-friendly interface using Vue.js 3 Composition API and TailwindCSS. The page will feature an active tab navigation for “Ten Different Tabs” each with unique functionality. Each tab includes a table with search, pagination, and date filters, there’s also a view link to download documents uploaded, there’s a create button at the top of each table. You are provided with a link to UI design for the conversion of the Resources and Onboarding  Page. 

Scope of Work:

1. Tab Navigation:

Features:

-Implementation of ten distinct tabs, each offering unique functionalities.

-Active tab highlights with smooth transitions between views.

Tasks:

-Create a reusable tab component using Vue.js Composition API.

-Style the tabs using TailwindCSS for accessibility and responsiveness.

2. Table Component per Tab:

Features:

Table:

-Displays a list of data with columns of different name tags.

-There’s an Action column with a view link and a create button at the top of the button.

-Search functionality for efficient data retrieval.

-Pagination to enhance usability and performance.

-Date filters to refine search results based on specific timeframes.

Create Button Component:

-Form fields for General Calendar details.

-A pop form to upload CSV files, a submit button

-Validation for required fields.

Single View:

-Displays a pop modal with an input field.

-A download button for the CSV file.

Tasks:

-Build the table components with Vue.js for dynamic data handling.

-Add search, date filtering, and pagination functionality.

-Design and implement the "Forms", "Upload Popup Forms" modal with form validation.

-Create a single view with a download button.

3. Preview Page:

Features:

Excel-Like Table:

-Displays the uploaded CSV or Excel file in a structured table format for preview before final submission.

Submit Button:

-A prominent submission button with a tooltip or hover effect for enhanced user interaction.

Tasks:

-Embed an Excel-Like Table to display uploaded data.

-Design a table layout using TailwindCSS for responsiveness and aesthetics.

-Style and implement the "Submit" button with appropriate hover effects.

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/5nEgpCR8a2aq3JU2WrumdO/GAC?node-id=0-1&m=dev&t=hwzJSefVU1CtdJ5M-1

Repository: Clone from gac_loader branch for this project https://github.com/suburban-fiber-company/Suburban_Gac_Loader/tree/gac_loader

When selected, please share your github username in the chatbox.