[SAH-53]: Add pre-commit hooks for code linting and formatting

apps/admin/tailwind.config.ts

@@ -5,7 +5,7 @@ const baseConfig: Config = require("@sahil/configs/tailwind/tailwind.config");
 const extendedConfig: Config = {
   ...baseConfig,
   content: [
-    // @ts-expect-error
+    // @ts-ignore
     ...baseConfig.content,
     "./src/Addresses/**/**.{js,ts,jsx,tsx,mdx}",
     "./src/Agents/**/*.{js,ts,tsx,tsx,mdx}",

apps/agent/next.config.js

@@ -2,6 +2,7 @@
 const nextConfig = {
   reactStrictMode: true,
   transpilePackages: ['@sahil/lib', 'ui', '@sahil/configs'],
+  output: "standalone",
   images: {
     remotePatterns: [
       {

apps/agent/src/Businesses/BusinessRegistrationForm/BusinessInfo.tsx

@@ -25,7 +25,7 @@ export const BusinessInfo = () => {
 
   const router = useRouter();
 
-  const { formData } = useBusinessFormStore((state) => state);
+  //const { formData } = useBusinessFormStore((state) => state);
   const onSubmit: SubmitHandler<FormData> = async (data) => {
     const validatedInput = businessInfoSchema.parse(data);
   };
@@ -36,7 +36,7 @@ export const BusinessInfo = () => {
           <input
             type="text"
             className="input input-sm input-bordered w-full bg-gray-100"
-            placeholder="Keji's Foods"
+            placeholder="Keji Foods"
           />
         </FormControl>
         <div className="btn btn-sm btn-primary w-fit">

apps/agent/src/Businesses/BusinessRegistrationForm/BusinessStepsPaginator.tsx

@@ -14,7 +14,7 @@ export const BusinessStepsPaginator = ({
   onNextStep,
   onPrevStep,
 }: Props) => {
-  const { steps, currentStep } = useBusinessFormStore((state) => state);
+  const { steps, currentStep } = useBusinessFormStore()((state) => state);
   const currentIndex = steps.indexOf(currentStep);
   return (
     <>

apps/agent/src/Couriers/CourierRegistrationForm/CourierContactDetails.tsx

@@ -22,6 +22,7 @@ const courierContactSchema = z.object({
 type FormData = z.infer<typeof courierContactSchema>;
 
 export const CourierContactDetails = () => {
+  // @ts-ignore
   const { goToStep, updateStepFormData } = useCourierFormStore((state) => ({
     formData: state.formData,
     goToStep: state.goToStep,

apps/agent/src/Couriers/CourierRegistrationForm/CourierFormStepsPaginator.tsx

@@ -4,7 +4,8 @@ import { JoinGrid } from "ui";
 import { HiArrowSmallLeft, HiArrowSmallRight } from "react-icons/hi2";
 
 export const CourierFormStepPaginator = () => {
-  const { steps, goToStep, currentStep } = useCourierFormStore(
+  // @ts-ignore
+  const { steps, goToStep, currentStep } = useCourierFormStore()(
     (state) => state
   );
   const router = useRouter();

apps/agent/src/Couriers/CourierRegistrationForm/CourierFormSummary.tsx

@@ -7,7 +7,7 @@ import toast, { Toaster } from "react-hot-toast";
 
 export const CourierFormSummary = () => {
   const router = useRouter();
-  const formData = useCourierFormStore((state) => state.formData);
+  const formData = useCourierFormStore()((state) => state.formData);
 
   const { insertCourier, loading, error } = useRegisterCourier();
 

apps/agent/src/Couriers/CourierRegistrationForm/CourierPersonalInfo.tsx

@@ -24,7 +24,7 @@ const courierInfoSchema = z.object({
 type FormData = z.infer<typeof courierInfoSchema>;
 
 export const CourierPersonalInfo = () => {
-  const { goToStep, updateStepFormData } = useCourierFormStore((state) => ({
+  const { goToStep, updateStepFormData } = useCourierFormStore()((state) => ({
     formData: state.formData,
     goToStep: state.goToStep,
     updateStepFormData: state.updateStepFormData,

apps/agent/src/Couriers/CourierRegistrationForm/CourierVehicleInfo.tsx

@@ -24,7 +24,7 @@ const courierVehicleSchema = z.object({
 type FormData = z.infer<typeof courierVehicleSchema>;
 
 export const CourierVehicleInfo = () => {
-  const { goToStep, updateStepFormData } = useCourierFormStore((state) => ({
+  const { goToStep, updateStepFormData } = useCourierFormStore()((state) => ({
     formData: state.formData,
     goToStep: state.goToStep,
     updateStepFormData: state.updateStepFormData,

apps/agent/src/Couriers/types.ts

@@ -0,0 +1 @@
+export const em = "";

apps/agent/src/Orders/OrderProcessingForm/DeliveryDetails.tsx

@@ -35,7 +35,7 @@ export const DeliveryDetails = ({ navigateToNextStep }) => {
     watch,
     formState: { errors },
   } = useForm<FormData>({
-    // @ts-expect-error
+    // @ts-ignore
     resolver: zodResolver(deliveryDetailsSchema),
   });
   const onSubmit: SubmitHandler<FormData> = async (data) => {

apps/agent/src/Orders/OrderProcessingForm/OrderSummary.tsx

@@ -58,7 +58,7 @@ export const OrderSummary = () => {
     watch,
     formState: { errors },
   } = useForm<FormData>({
-    // @ts-expect-error
+    // @ts-ignore
     resolver: zodResolver(checkoutSchema),
   });
   const orderItems = useOrderItemsStore((state) => state.orderItems);

apps/agent/src/Orders/ProductsCatalogue.tsx

@@ -38,8 +38,8 @@ export const ProductsCatalogue = () => {
           <HiSignalSlash />
         </span>
         <p>
-          Products aren't loading due to a technical problem on our side. Please
-          try again. If the issue continues,{" "}
+          Products are not loading due to a technical problem on our side.
+          Please try again. If the issue continues,{" "}
           <span className="text-primary">contact support.</span>
         </p>
         <div className="card-actions justify-end">

apps/agent/src/Suppliers/FilterSuppliersModal.tsx

@@ -40,7 +40,7 @@ const FilterSuppliersModal = () => {
       <button
         className="btn btn-sm normal-case"
         onClick={() => {
-          // @ts-expect-error
+          // @ts-ignore
           return document.getElementById("filter_suppliers_modal")?.showModal();
         }}
       >

apps/agent/src/Suppliers/SupplierProductForm.tsx

@@ -37,7 +37,7 @@ const SupplierProductForm = ({
     setValue,
     formState: { errors },
   } = useForm<ProductFormData>({
-    // @ts-expect-error
+    // @ts-ignore
     resolver: zodResolver(supplierProductSchema),
   });
 

apps/agent/src/Suppliers/SupplierRegistrationForm/PreviewSupplierInfo.tsx

@@ -13,7 +13,7 @@ export const PreviewSupplierInfo = () => {
     formState: { errors },
   } = useForm<FormData>();
   const router = useRouter();
-  const formData = useSupplierFormStore((state) => state.formData);
+  const formData = useSupplierFormStore()((state) => state.formData);
 
   const { error, insertSupplier, loading, supplier } = useRegisterSupplier();
 

apps/agent/src/Suppliers/SupplierRegistrationForm/SupplierBasicInfoForm.tsx

@@ -13,7 +13,7 @@ const supplierBasicInfoSchema = z.object({
 type FormData = z.infer<typeof supplierBasicInfoSchema>;
 
 export const SupplierBasicInfoForm = () => {
-  const { formData, goToStep, updateStepFormData } = useSupplierFormStore(
+  const { formData, goToStep, updateStepFormData } = useSupplierFormStore()(
     (state) => ({
       formData: state.formData,
       goToStep: state.goToStep,
@@ -26,7 +26,7 @@ export const SupplierBasicInfoForm = () => {
     handleSubmit,
     formState: { errors },
   } = useForm<FormData>({
-    // @ts-expect-error
+    // @ts-ignore
     resolver: zodResolver(supplierBasicInfoSchema),
   });
 

apps/agent/src/Suppliers/SupplierRegistrationForm/SupplierBusinessInfoForm.tsx

@@ -15,7 +15,7 @@ const supplierContactInfoSchema = z.object({
 type FormData = z.infer<typeof supplierContactInfoSchema>;
 
 export const SupplierBusinessInfoForm = () => {
-  const { currentStep, goToStep, updateStepFormData } = useSupplierFormStore(
+  const { currentStep, goToStep, updateStepFormData } = useSupplierFormStore()(
     (state) => state
   );
   const {
@@ -24,7 +24,7 @@ export const SupplierBusinessInfoForm = () => {
     watch,
     formState: { errors },
   } = useForm<FormData>({
-    // @ts-expect-error
+    // @ts-ignore
     resolver: zodResolver(supplierContactInfoSchema),
   });
   const router = useRouter();

apps/agent/src/Suppliers/SupplierRegistrationForm/SupplierPreferencesForm.tsx

@@ -12,7 +12,7 @@ const supplierPrefencesSchema = z.object({
 type FormData = z.infer<typeof supplierPrefencesSchema>;
 
 export const SupplierPreferencesForm = () => {
-  const { goToStep, updateStepFormData } = useSupplierFormStore((state) => ({
+  const { goToStep, updateStepFormData } = useSupplierFormStore()((state) => ({
     goToStep: state.goToStep,
     updateStepFormData: state.updateStepFormData,
   }));
@@ -22,7 +22,7 @@ export const SupplierPreferencesForm = () => {
     watch,
     formState: { errors },
   } = useForm<FormData>({
-    // @ts-expect-error
+    // @ts-ignore
     resolver: zodResolver(supplierPrefencesSchema),
   });
   const router = useRouter();

apps/agent/src/hooks/suppliers.ts

@@ -61,7 +61,7 @@ export const useFetchSupplierProducts = (page: number = 0, id?: string) => {
   // Memoize the result based on the page and ids
   return useMemo(() => {
     return { error, data: data?.products, loading };
-  }, [page, id, product, supplierId, error, data, loading]);
+  }, [error, data, loading]);
 };
 
 export const useRegisterSupplier = () => {

apps/agent/src/hooks/useBusinessFormStore.ts

@@ -9,4 +9,5 @@ const steps = [
   "summary",
 ] as const;
 
-export const useBusinessFormStore = useCreateFormStore(INITIAL_STEP, steps);
+export const useBusinessFormStore = () =>
+  useCreateFormStore(INITIAL_STEP, steps);

apps/agent/src/hooks/useCourierFormStore.tsx

@@ -1,4 +1,5 @@
 import { INITIAL_STEP, steps } from "@/Couriers/constants";
 import { useCreateFormStore } from "@sahil/lib";
 
-export const useCourierFormStore = useCreateFormStore(INITIAL_STEP, steps);
+export const useCourierFormStore = () =>
+  useCreateFormStore(INITIAL_STEP, steps);

apps/agent/src/hooks/useSupplierFormStore.ts

@@ -8,4 +8,5 @@ const steps = [
   "preview",
 ] as const;
 
-export const useSupplierFormStore = useCreateFormStore(INITIAL_STEP, steps);
+export const useSupplierFormStore = () =>
+  useCreateFormStore(INITIAL_STEP, steps);

apps/agent/src/pages/auth/signin.tsx

@@ -1,4 +1,3 @@
-// @ts-ignore
 import { useEffect } from "react";
 import type { NextPage } from "next";
 import { getProviders, signIn, useSession } from "next-auth/react";
@@ -12,7 +11,7 @@ const SignInPage: NextPage = ({ providers }: any) => {
     if (session) {
       router.push("/auth/new");
     }
-  }, [session]);
+  }, [router, session]);
 
   return (
     <div className="p-4">

apps/agent/src/pages/businesses/register/[...step].tsx

@@ -45,7 +45,7 @@ const headers = [
 
 export default function BusinessRegistrationPage() {
   const { currentStep, goToStep, steps, updateStepByIndex } =
-    useBusinessFormStore((state) => state);
+    useBusinessFormStore()((state) => state);
   const currentIndex = steps.indexOf(currentStep);
   const router = useRouter();
 

apps/agent/src/pages/couriers/register/[...step].tsx

@@ -48,7 +48,7 @@ const headers = [
 
 export default function CourierRegistrationPage() {
   const { steps, currentStep, goToStep, updateStepByIndex } =
-    useCourierFormStore((state) => state);
+    useCourierFormStore()((state) => state);
   const router = useRouter();
   const params = useParams();
   const currentIndex = steps.indexOf(currentStep);

apps/agent/src/pages/suppliers/register/[[...step]].tsx

@@ -15,7 +15,7 @@ import { Card, IconButton } from "ui";
 import { HiArrowSmallLeft, HiArrowSmallRight } from "react-icons/hi2";
 
 const StepsPaginator = () => {
-  const { steps, goToStep, currentStep } = useSupplierFormStore(
+  const { steps, goToStep, currentStep } = useSupplierFormStore()(
     (state) => state
   );
   const router = useRouter();
@@ -82,7 +82,7 @@ const headers = [
 ];
 
 export default function SupplierRegistrationPage() {
-  const { steps, currentStep, updateStepByIndex } = useSupplierFormStore(
+  const { steps, currentStep, updateStepByIndex } = useSupplierFormStore()(
     (state) => state
   );
   const router = useRouter();

apps/agent/tailwind.config.ts

@@ -5,7 +5,7 @@ const baseConfig: Config = require("@sahil/configs/tailwind/tailwind.config");
 const extendedConfig: Config = {
   ...baseConfig,
   content: [
-    // @ts-expect-error
+    // @ts-ignore
     ...baseConfig.content,
     "./src/Suppliers/**/**.{js,ts,jsx,tsx,mdx}",
     "./src/Businesses/**/*.{js,ts,tsx,tsx,mdx}",

apps/client/next.config.js

@@ -2,6 +2,7 @@
 const nextConfig = {
   reactStrictMode: true,
   transpilePackages: ['@sahil/lib', 'ui', '@sahil/configs'],
+  output: "standalone",
   images: {
     remotePatterns: [
       {

apps/client/package.json

@@ -9,22 +9,33 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@apollo/client": "^3.8.10",
+    "@formkit/auto-animate": "^0.8.1",
+    "@hookform/resolvers": "^3.3.4",
+    "@react-google-maps/api": "^2.19.2",
+    "@sahil/configs": "*",
+    "@sahil/lib": "*",
+    "daisyui": "^4.6.0",
+    "date-fns": "^3.2.0",
+    "graphql": "^16.8.1",
+    "next": "14.0.1",
     "react": "^18",
     "react-dom": "^18",
-    "next": "14.0.1",
+    "react-hook-form": "^7.49.3",
+    "react-icons": "^5.0.1",
     "ui": "*",
-    "@sahil/lib": "*",
-    "@sahil/configs": "*"
+    "zod": "^3.22.4",
+    "zustand": "^4.4.7"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "autoprefixer": "^10.0.1",
+    "eslint": "^8",
+    "eslint-config-next": "14.0.1",
     "postcss": "^8",
     "tailwindcss": "^3.3.0",
-    "eslint": "^8",
-    "eslint-config-next": "14.0.1"
+    "typescript": "^5"
   }
 }

apps/client/src/Products/ProductsCatalogue.tsx

@@ -31,10 +31,10 @@ export const ProductsCatalogue = () => {
     orderItems,
     setProducts,
     products: availableProducts,
-  } = useOrderItemsStore((state) => state);
+  } = useOrderItemsStore((state: any) => state);
 
   const orderItemsMap = new Map(
-    orderItems.map((item) => [item.productId, item])
+    orderItems.map((item: any) => [item.productId, item])
   );
 
   useEffect(() => {
@@ -49,8 +49,8 @@ export const ProductsCatalogue = () => {
           <HiSignalSlash />
         </span>
         <p>
-          Products aren't loading due to a technical problem on our side. Please
-          try again. If the issue continues,{" "}
+          Products are not loading due to a technical problem on our side.
+          Please try again. If the issue continues,{" "}
           <span className="text-primary">contact support.</span>
         </p>
         <div className="card-actions justify-end">
@@ -104,7 +104,7 @@ export const ProductsCatalogue = () => {
         error={error}
         loading={loading}
         cols={4}
-        renderItem={(product) => {
+        renderItem={(product: any) => {
           const isInCart = orderItemsMap.has(product.id);
           return (
             <ProductSummary

apps/client/tailwind.config.ts

@@ -5,7 +5,7 @@ const baseConfig: Config = require("@sahil/configs/tailwind/tailwind.config");
 const extendedConfig: Config = {
   ...baseConfig,
   content: [
-    // @ts-expect-error
+    // @ts-ignore
     ...baseConfig.content,
     "./src/Addresses/**/**.{js,ts,jsx,tsx,mdx}",
     "./src/Maps/**/*.{js,ts,tsx,tsx,mdx}",
@@ -23,7 +23,7 @@ const extendedConfig: Config = {
       ...baseConfig.theme?.extend,
     },
   },
-  // @ts-expect-error
+  // @ts-ignore
   plugins: [...baseConfig.plugins, require("daisyui")],
   daisyui: {
     themes: [