Frontend Documentation

// App.js - Auth0 Setup
import { useAuth0 } from "@auth0/auth0-react";

const { getAccessTokenSilently } = useAuth0();

useEffect(() => {
  const getUserMetadata = async () => {
    try {
      const accessToken = await getAccessTokenSilently({
        audience: process.env.REACT_APP_AUTH0_AUDIENCE,
      });

      axios.defaults.headers.common["Authorization"] = `Bearer ${accessToken}`;
      localStorage.setItem("token", accessToken);
      localStorage.setItem("login_type", "auth0");
    } catch (e) {
      // Handle error
    }
  };
  getUserMetadata();
}, [getAccessTokenSilently]);

// store.js
import { configureStore } from "@reduxjs/toolkit";
import rootReducer from "./rootReducer";

const store = configureStore({
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false,
    }),
  reducer: rootReducer,
});

// Auto-save to localStorage
store.subscribe(() => 
  saveToLocalStorage(store.getState())
);

// routes.js structure
const routes = [
  {
    type: "collapse",
    name: "Dashboard",
    key: "dashboard",
    icon: dashboard,
    route: "/dashboard",
    component: ,
  },
  {
    type: "collapse",
    name: "Policies",
    key: "policies",
    icon: description,
    collapse: [
      {
        name: "Policy Management",
        key: "policy-management",
        route: "/policies",
        component: ,
      },
      {
        name: "Policy Templates", 
        key: "policy-templates",
        route: "/policy-templates",
        component: ,
      }
    ]
  }
];

// Example: Formik Integration
import { Formik, Form } from 'formik';
import * as Yup from 'yup';

const validationSchema = Yup.object({
  policyTitle: Yup.string()
    .required('Policy title is required')
    .min(3, 'Title must be at least 3 characters'),
  category: Yup.string()
    .required('Category is required'),
  description: Yup.string()
    .max(500, 'Description too long')
});

const PolicyForm = () => (
  
    {/* Form fields */}
  
);