Add eslint rule and fix as many issues as possible

frontend/src/pages/settings/billing/[id].tsx

@@ -1,16 +1,16 @@
-import { useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import Head from 'next/head';
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import Head from "next/head";
 
-import Plan from '@app/components/billing/Plan';
-import NavHeader from '@app/components/navigation/NavHeader';
-import { plans as plansConstant } from '@app/const';
+import Plan from "@app/components/billing/Plan";
+import NavHeader from "@app/components/navigation/NavHeader";
+import { plans as plansConstant } from "@app/const";
 
-import getOrganizationSubscriptions from '../../api/organization/GetOrgSubscription';
-import getOrganizationUsers from '../../api/organization/GetOrgUsers';
+import getOrganizationSubscriptions from "../../api/organization/GetOrgSubscription";
+import getOrganizationUsers from "../../api/organization/GetOrgUsers";
 
 export default function SettingsBilling() {
-  const [currentPlan, setCurrentPlan] = useState('');
+  const [currentPlan, setCurrentPlan] = useState("");
   const [numUsers, setNumUsers] = useState(0);
 
   const { t } = useTranslation();
@@ -18,50 +18,50 @@ export default function SettingsBilling() {
   const plans = [
     {
       key: 1,
-      name: t('billing.starter.name')!,
-      price: t('billing.free')!,
-      priceExplanation: t('billing.starter.price-explanation')!,
-      text: t('billing.starter.text')!,
-      subtext: t('billing.starter.subtext')!,
-      buttonTextMain: t('billing.downgrade')!,
-      buttonTextSecondary: t('billing.learn-more')!,
+      name: t("billing.starter.name")!,
+      price: t("billing.free")!,
+      priceExplanation: t("billing.starter.price-explanation")!,
+      text: t("billing.starter.text")!,
+      subtext: t("billing.starter.subtext")!,
+      buttonTextMain: t("billing.downgrade")!,
+      buttonTextSecondary: t("billing.learn-more")!,
       current: currentPlan === plansConstant.starter
     },
     {
       key: 2,
-      name: 'Team',
-      price: '$8',
-      priceExplanation: t('billing.professional.price-explanation')!,
-      text: 'Unlimited members, up to 10 projects. Additional developer experience features.',
-      buttonTextMain: t('billing.upgrade')!,
-      buttonTextSecondary: t('billing.learn-more')!,
+      name: "Team",
+      price: "$8",
+      priceExplanation: t("billing.professional.price-explanation")!,
+      text: "Unlimited members, up to 10 projects. Additional developer experience features.",
+      buttonTextMain: t("billing.upgrade")!,
+      buttonTextSecondary: t("billing.learn-more")!,
       current: currentPlan === plansConstant.team
     },
     {
       key: 3,
-      name: t('billing.professional.name')!,
-      price: '$18',
-      priceExplanation: t('billing.professional.price-explanation')!,
-      text: t('billing.enterprise.text')!,
-      subtext: t('billing.professional.subtext')!,
-      buttonTextMain: t('billing.upgrade')!,
-      buttonTextSecondary: t('billing.learn-more')!,
+      name: t("billing.professional.name")!,
+      price: "$18",
+      priceExplanation: t("billing.professional.price-explanation")!,
+      text: t("billing.enterprise.text")!,
+      subtext: t("billing.professional.subtext")!,
+      buttonTextMain: t("billing.upgrade")!,
+      buttonTextSecondary: t("billing.learn-more")!,
       current: currentPlan === plansConstant.professional
     },
     {
       key: 4,
-      name: t('billing.enterprise.name')!,
-      price: t('billing.custom-pricing')!,
-      text: 'Boost the security and efficiency of your engineering teams.',
-      buttonTextMain: t('billing.schedule-demo')!,
-      buttonTextSecondary: t('billing.learn-more')!,
+      name: t("billing.enterprise.name")!,
+      price: t("billing.custom-pricing")!,
+      text: "Boost the security and efficiency of your engineering teams.",
+      buttonTextMain: t("billing.schedule-demo")!,
+      buttonTextSecondary: t("billing.learn-more")!,
       current: false
     }
   ];
 
   useEffect(() => {
     (async () => {
-      const orgId = localStorage.getItem('orgData.id') as string;
+      const orgId = localStorage.getItem("orgData.id") as string;
       const subscriptions = await getOrganizationSubscriptions({
         orgId
       });
@@ -78,31 +78,31 @@ export default function SettingsBilling() {
   return (
     <div className="flex flex-col justify-between bg-bunker-800 pb-4 text-white">
       <Head>
-        <title>{t('common.head-title', { title: t('billing.title') })}</title>
+        <title>{t("common.head-title", { title: t("billing.title") })}</title>
         <link rel="icon" href="/infisical.ico" />
       </Head>
       <div className="flex flex-row">
         <div className="w-full pb-2">
-          <NavHeader pageName={t('billing.title')} />
+          <NavHeader pageName={t("billing.title")} />
           <div className="my-8 ml-6 flex max-w-5xl flex-row items-center justify-between text-xl">
             <div className="flex flex-col items-start justify-start text-3xl">
-              <p className="mr-4 font-semibold text-gray-200">{t('billing.title')}</p>
-              <p className="mr-4 text-base font-normal text-gray-400">{t('billing.description')}</p>
+              <p className="mr-4 font-semibold text-gray-200">{t("billing.title")}</p>
+              <p className="mr-4 text-base font-normal text-gray-400">{t("billing.description")}</p>
             </div>
           </div>
           <div className="ml-6 flex w-max flex-col text-mineshaft-50">
-            <p className="text-xl font-semibold">{t('billing.subscription')}</p>
+            <p className="text-xl font-semibold">{t("billing.subscription")}</p>
             <div className="mt-4 grid grid-cols-2 grid-rows-2 gap-y-6 gap-x-3 overflow-x-auto">
               {plans.map((plan) => (
                 <Plan key={plan.name} plan={plan} />
               ))}
             </div>
-            <p className="mt-12 text-xl font-bold">{t('billing.current-usage')}</p>
+            <p className="mt-12 text-xl font-bold">{t("billing.current-usage")}</p>
             <div className="flex flex-row">
               <div className="mr-4 mt-8 flex w-60 flex-col items-center justify-center rounded-md bg-white/5 pt-6 pb-10 text-gray-300">
                 <p className="text-6xl font-bold">{numUsers}</p>
                 <p className="text-gray-300">
-                  {numUsers > 1 ? 'Organization members' : 'Organization member'}
+                  {numUsers > 1 ? "Organization members" : "Organization member"}
                 </p>
               </div>
               {/* <div className="mr-4 mt-8 text-gray-300 w-60 pt-6 pb-10 rounded-md bg-white/5 flex justify-center items-center flex flex-col">