• I will work on the UI and UI components from scratch using tailwindcss
• I will work on the SEO and SGC "static generated components" on the end of the project to save more time meanwhile.

• Admins theme currentlly working on it
  • full access epic
• HR epic
  • Humen Resource epic: access the insturctors and lower position
• Instructor theme
  • Dashboard Epic
• Public theme.
  • overview epic

• fonts
  • main color gray-800
  • second color gray-700
  • hover color gray-900
  • success text color green-600
  • error text color red-600
  • warnint text color yellow-600
• backgrounds
  • main color gray-900
  • second color gray-800
  • light mani color gray-600
  • light second color gray-500
  • light hover color gray-700
• buttons
  • success:
    • main color gray-800
    • second color gray-700
    • hover color gray-900
    • disabled color gray-500
  • danger:
    • main color red-800
    • second color red-700
    • hover color red-900
    • disabled color red-500
  • warning:
    • main color yellow-800
    • second color yellow-700
    • hover color yellow-900
    • disabled color yellow-500
  • info:
    • main color blue-800
    • second color blue-700
    • hover color blue-900
    • disabled color blue-500
• inputs
  • static
    • main color gray-800
    • second color gray-700
    • focus-visible color gray-800
    • focus-visible outline color gray-200
  • success
    • main color green-800
    • second color green-700
    • focus-visible color green-800
    • focus-visible outline color green-200
  • error
    • main color red-800
    • second color red-700
    • focus-visible color red-800
    • focus-visible outline color red-200

• created Button, Input, Dynamic navbar UI components

• I needed to share the dynamic navbar between the home "/" routes and the '/dashboard/** routes, So it was confusing to handle the navbar that was displayed in the Drawer.tsx UI component of the dashboard and the main layout.tsx of the nextjs root, because it will duplicate if I navigate to /dashboard/**, However I found out that I should use the following file structure to manage the layout as I want:

  /app
  | /(home) // don't add '/home' route
  |-- page.tsx
  |-- layout.tsx
  | /dashboard
  |-- page.tsx
  |-- layout.tsx
  | layout.tsx // the root layout of the app
  

• input status
• style the button status (status, variants, sizes)
• customize the home page layout.
• login form
• changed the color palette and write the brand
• login-form.tsx
• avatar dropdown list more customization and its navlinks.
• a lot and alot of layout changes.
• style the inputs (sizes)

• auto overflow the drawer nav links.
• adding hero component for home page.
• reinforce the button component, you can using it as a link or button and added the width and loading props.

• fixed the action.tsx redirect issue by removing the "use server" directive.
• set up axios and endpoints reusable snippets
• users table
• Loading status for dashboard content
• protected route using is-auth.tsx component
• enable deploying to vercel by disable typescript error😑
• title component

facing issues while redirect the user after login, because of my wrong nextjs component usage

• I need to know where to use nextjs cookies and clien cookies. done
• understanding how the cookies and the composition pattern works in nextjs
• change the way I display avatar-list data, I need to seperate the aciton buttons and the navlinks
• set up react hook forms and yup
• change none .tsx files to .ts

notes: you will encounter the following error message, it because when you pass a null value in the react child like mapping an array of objects, let's say we have an array of objects for users we get it from an API. In this scenario you should implement a functionality to handle this error, and if you have an key of an object let's say address: null you can return it this way {address === null && "no address"}. There is another way to break this bug, but I did not try, you can check here and here with use cases

Unhandled Runtime Error

Error: Objects are not valid as a React child (found: object with keys {street, city, state, zipCode, country}). If you meant to render a collection of children, use an array instead.

it is hard to share the response of the catch and the try, so I should use ether RTK or React Query

• return the error message from the API request for the login form.
• update the api schema by the database changes
• changed the is-auth.tsx component to an async component and add "use server" directive.
• is-auth.tsx checks if the user is signed in or not using an endpoint that responds if the token is valid or not, this procedure helped me to manage the authentication process efficiantly with no depending on the cookies
• create custom skeleton UI Component. it needs more enhancements

• subtask: remove the navlink from the avatar list if the pathname === the navlink pathname
• badge UI Component

• create table, thead,tbody, tr,th,and td UI Components
• add outline button variant
• remove the <Link> feature of the Button-with-link.tsx UI Component and only use it as a button, and change the component name to Button.tsx. If you need to use the same format of the button for the nextjs's Link you can wrap the Button UI Component with the nextjs's Link navigation tag.

• set up the initial procedures of react hook form "onChange"
• instructors data
• students data
• departments data
• subjects data
• reinforce the table and data component
• created reusable skeleton table
• user protected-routes depends on the role

• Refactor: button.tsx component now has props.outline prop contains boolean type.
• Refactor: badge.tsx component you can add variant prop

• set up cookies functions for the cookies of the nextjs next/headers
• display the nav with the loading UI of the isAuth component
• set up the base settings for the forms validation
• registration page and form
• user and the current user's profile
• change the avatar and dropdown UI Components
• I need to change the authentication of the user avatar and list to the api instead of the cookies
• implement the refresh token function. bug from the backend, it returns 500 "internal server error" status instead of 204 "no content"
• in UI Components we need some times to add-on a customization while it is currentlly a customized component, thus you need to add the following snippet into the className of the UI Component ${props?.className}. I need to check all the UI Components to add this feature

• button: you can pass any props or attribute it will dynamically work, but you must pass the value prop
• inputs: you can pass any prop or attribute it will dynamically work.
• nav: dynamically displaying the data depending on the user status
• user avatar with a list: displays data and links depending on its authentication data if authenticated or not
• logo layout: provide some props to customize it