├── .eslintrc
├── .gitignore
├── .node-version
├── README.md
├── app
    ├── components
    │   ├── About.tsx
    │   ├── Chart.tsx
    │   ├── CompForm.tsx
    │   ├── CompModal.tsx
    │   ├── CompTable.tsx
    │   ├── FormField.tsx
    │   ├── Logo.tsx
    │   ├── Modal.tsx
    │   └── Navigation.tsx
    ├── entry.client.tsx
    ├── entry.server.tsx
    ├── global.css
    ├── lib
    │   ├── comp.ts
    │   └── formProps.ts
    ├── root.tsx
    └── routes
    │   ├── api
    │       ├── search.tsx
    │       └── stock.tsx
    │   └── index.tsx
├── package-lock.json
├── package.json
├── public
    ├── _headers
    └── favicon
    │   ├── android-chrome-192x192.png
    │   ├── android-chrome-512x512.png
    │   ├── apple-touch-icon.png
    │   ├── browserconfig.xml
    │   ├── favicon-16x16.png
    │   ├── favicon-32x32.png
    │   ├── favicon.ico
    │   ├── mstile-144x144.png
    │   ├── mstile-150x150.png
    │   ├── mstile-310x150.png
    │   ├── mstile-310x310.png
    │   ├── mstile-70x70.png
    │   ├── safari-pinned-tab.svg
    │   └── site.webmanifest
├── remix.config.js
├── remix.env.d.ts
├── scripts
    └── dev-wrangler.mjs
├── server.js
├── tailwind.config.js
└── tsconfig.json


/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": ["@remix-run/eslint-config"]
3 | }
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | node_modules
 2 | 
 3 | /.cache
 4 | /functions/\[\[path\]\].js
 5 | /functions/\[\[path\]\].js.map
 6 | /public/build
 7 | .env
 8 | 
 9 | /app/tailwind.css
10 | 


--------------------------------------------------------------------------------
/.node-version:
--------------------------------------------------------------------------------
1 | 16.17.0
2 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Total Compensation Calculator
 2 | 
 3 | [🚀 Live Site](https://tc.kyh.io)
 4 | 
 5 | > Understand your total compensation under current market conditions.
 6 | 
 7 | ![alt text](https://cdn.dribbble.com/users/237579/screenshots/18254177/media/05fc481a5b735fadc969d6d905a25357.png?resize=800x600)
 8 | 
 9 | The term <strong>Total Compensation</strong> captures all the different ways you are financially compensated by your employer: base salary, bonus, equity, benefits, etc.
10 | 
11 | This calculator normalizes all these different forms of compensation into dollar values (from private or public companies) so you can estimate the final amount you are paid.
12 | 
13 | ## Stack
14 | 
15 | This project uses the following libraries and services:
16 | 
17 | - Framework - [Remix](https://remix.run)
18 | - Styling - [Tailwind](https://tailwindcss.com)
19 | - API - [IEX](https://iexcloud.io/)
20 | - Hosting - [Cloudflare Pages](https://pages.cloudflare.com/)
21 | 
22 | ## Development
23 | 
24 | ```sh
25 | npm i
26 | # start the remix dev server and wrangler
27 | npm run dev
28 | ```
29 | 
30 | Open up [http://127.0.0.1:8788](http://127.0.0.1:8788) and you should be ready to go!
31 | 


--------------------------------------------------------------------------------
/app/components/About.tsx:
--------------------------------------------------------------------------------
  1 | import { useState } from "react";
  2 | import { Portal } from "react-portal";
  3 | import type {
  4 |   CallBackProps,
  5 |   Step,
  6 |   Placement,
  7 |   TooltipRenderProps,
  8 | } from "react-joyride";
  9 | import Joyride, { ACTIONS, EVENTS, STATUS } from "react-joyride";
 10 | 
 11 | const defaultStepProps = {
 12 |   disableBeacon: true,
 13 |   placement: "right" as Placement,
 14 |   floaterProps: {
 15 |     disableAnimation: true,
 16 |   },
 17 | };
 18 | 
 19 | export const defaultSteps: Step[] = [
 20 |   {
 21 |     ...defaultStepProps,
 22 |     target: ".title-section",
 23 |     content: (
 24 |       <>
 25 |         <p>
 26 |           The term <strong>Total Compensation</strong> captures all the
 27 |           different ways you are financially compensated by your employer: base
 28 |           salary, bonus, equity, benefits, etc.
 29 |         </p>
 30 |         <p className="mt-2 font-bold text-emerald-500">
 31 |           This calculator normalizes all these different forms of compensation
 32 |           into dollar values (from private or public companies) so you can
 33 |           estimate the final amount you are paid.
 34 |         </p>
 35 |       </>
 36 |     ),
 37 |   },
 38 |   {
 39 |     ...defaultStepProps,
 40 |     target: ".cash-section",
 41 |     content: (
 42 |       <>
 43 |         <p>
 44 |           Cash compensation is the simplest category to understand because it's
 45 |           what gets directly deposited into your bank account.
 46 |         </p>
 47 |         <p className="mt-4 text-xs uppercase text-slate-400">
 48 |           Types of cash compensation:
 49 |         </p>
 50 |         <ul>
 51 |           <li className="mt-2">
 52 |             <strong>Base Salary</strong> - amount of money you receive just for
 53 |             being employed (regardless of the performance of the company or your
 54 |             performance)
 55 |           </li>
 56 |           <li className="mt-2">
 57 |             <strong>Bonuses</strong> - a single lump sum of cash (sometimes it's
 58 |             a yearly bonus, other times it could be a one time bonus at certain
 59 |             milestones)
 60 |           </li>
 61 |         </ul>
 62 |       </>
 63 |     ),
 64 |   },
 65 |   {
 66 |     ...defaultStepProps,
 67 |     target: ".equity-section",
 68 |     content: (
 69 |       <>
 70 |         <p>
 71 |           Equity compensation is more complex, you only recieve during certain
 72 |           periods and it's difficult to get the exact dollar value of your
 73 |           equity.
 74 |         </p>
 75 |         <p className="mt-4 text-xs uppercase text-slate-400">
 76 |           Types of equity compensation:
 77 |         </p>
 78 |         <ul>
 79 |           <li className="mt-2">
 80 |             <strong>ISO</strong> - your typical startup equity package consists
 81 |             of stock options which translate to stocks once you buy them for a
 82 |             certain strike price
 83 |           </li>
 84 |           <li className="mt-2">
 85 |             <strong>RSU</strong> - these are just like any other shares of
 86 |             company stock once they are vested
 87 |           </li>
 88 |         </ul>
 89 |       </>
 90 |     ),
 91 |   },
 92 |   {
 93 |     ...defaultStepProps,
 94 |     target: ".equity-value-section",
 95 |     content: (
 96 |       <>
 97 |         <p>
 98 |           Estimating the value of your equity is the hard part. Investors often
 99 |           look at value from multiple dimensions. To keep things simple, we
100 |           offer 2 different approaches.
101 |         </p>
102 |         <p className="mt-4 text-xs uppercase text-slate-400">
103 |           Estimating equity value:
104 |         </p>
105 |         <ul>
106 |           <li className="mt-2">
107 |             <strong>Growth based</strong> - At high-growth startup companies it
108 |             may be easier to think of your stock value as an N multiple after 4
109 |             years. Often, VCs expect a 10x return on their investment
110 |           </li>
111 |           <li className="mt-2">
112 |             <strong>Revenue based</strong> - If you know the revenue of your
113 |             company, you can estimate the value of your equity by comparing it
114 |             against the revenue multiple of an equivalent public company
115 |           </li>
116 |         </ul>
117 |       </>
118 |     ),
119 |   },
120 |   {
121 |     ...defaultStepProps,
122 |     target: ".estimate-modal-button",
123 |     content: (
124 |       <>
125 |         <p>
126 |           If you don't know what numbers to use, we can offer reasonable
127 |           defaults for you by looking at competitors.
128 |         </p>
129 |       </>
130 |     ),
131 |   },
132 | ];
133 | 
134 | export const useAbout = () => {
135 |   const [run, setRun] = useState(false);
136 |   const [stepIndex, setStepIndex] = useState(0);
137 |   const [steps] = useState(defaultSteps);
138 | 
139 |   const handleJoyrideCallback = ({
140 |     action,
141 |     index,
142 |     type,
143 |     status,
144 |   }: CallBackProps) => {
145 |     if (
146 |       action === ACTIONS.CLOSE ||
147 |       ([STATUS.FINISHED, STATUS.SKIPPED] as string[]).includes(status)
148 |     ) {
149 |       setRun(false);
150 |       setStepIndex(0);
151 |       window.scrollTo({
152 |         top: 0,
153 |         left: 0,
154 |         behavior: "smooth",
155 |       });
156 |     } else if (
157 |       ([EVENTS.STEP_AFTER, EVENTS.TARGET_NOT_FOUND] as string[]).includes(type)
158 |     ) {
159 |       const stepIndex = index + (action === ACTIONS.PREV ? -1 : 1);
160 |       setStepIndex(stepIndex);
161 |     }
162 |   };
163 | 
164 |   return {
165 |     run,
166 |     setRun,
167 |     stepIndex,
168 |     setStepIndex,
169 |     steps,
170 |     handleJoyrideCallback,
171 |   };
172 | };
173 | 
174 | const Tooltip = ({
175 |   index,
176 |   step,
177 |   backProps,
178 |   primaryProps,
179 |   tooltipProps,
180 |   isLastStep,
181 | }: TooltipRenderProps) => (
182 |   <div
183 |     className="text-slate-200 text-sm shadow-xl bg-black rounded p-6 max-w-sm"
184 |     {...tooltipProps}
185 |   >
186 |     {step.title && (
187 |       <h1 className="text-2xl font-bold leading-6 text-slate-50 mb-5">
188 |         {step.title}
189 |       </h1>
190 |     )}
191 |     {step.content}
192 |     <footer className="mt-5 flex items-center justify-between">
193 |       <div className="flex gap-1">
194 |         {defaultSteps.map((_s, i) => (
195 |           <div
196 |             key={i}
197 |             className={`w-2 h-2 rounded-full border border-slate-200 ${
198 |               i === index ? "bg-slate-200" : "bg-transparent"
199 |             }`}
200 |             aria-hidden="true"
201 |           />
202 |         ))}
203 |       </div>
204 |       <div>
205 |         {index > 0 && (
206 |           <button
207 |             className="inline-flex items-center px-4 py-1.5 text-xs font-medium rounded text-emerald-600"
208 |             type="button"
209 |             {...backProps}
210 |           >
211 |             Back
212 |           </button>
213 |         )}
214 |         <button
215 |           className="inline-flex items-center px-4 py-1.5 text-xs font-medium rounded text-emerald-100 bg-emerald-900 hover:bg-emerald-700"
216 |           type="button"
217 |           {...primaryProps}
218 |         >
219 |           {isLastStep ? "Done" : "Next"}
220 |         </button>
221 |       </div>
222 |     </footer>
223 |   </div>
224 | );
225 | 
226 | type Props = ReturnType<typeof useAbout>;
227 | 
228 | export const About = ({
229 |   run,
230 |   stepIndex,
231 |   steps,
232 |   handleJoyrideCallback,
233 | }: Props) => (
234 |   <Portal>
235 |     <Joyride
236 |       continuous
237 |       tooltipComponent={Tooltip}
238 |       callback={handleJoyrideCallback}
239 |       run={run}
240 |       stepIndex={stepIndex}
241 |       steps={steps}
242 |       styles={{
243 |         options: {
244 |           arrowColor: "transparent",
245 |         },
246 |       }}
247 |     />
248 |   </Portal>
249 | );
250 | 


--------------------------------------------------------------------------------
/app/components/Chart.tsx:
--------------------------------------------------------------------------------
  1 | import type { SeriesPoint } from "@visx/shape/lib/types";
  2 | import { BarStack } from "@visx/shape";
  3 | import { Group } from "@visx/group";
  4 | import { Grid } from "@visx/grid";
  5 | import { AxisBottom } from "@visx/axis";
  6 | import { scaleBand, scaleLinear, scaleOrdinal } from "@visx/scale";
  7 | import { useTooltip, useTooltipInPortal, defaultStyles } from "@visx/tooltip";
  8 | import { localPoint } from "@visx/event";
  9 | import NumberFormat from "react-number-format";
 10 | 
 11 | type CompTypes = "base" | "bonus" | "stock";
 12 | 
 13 | type Comp = {
 14 |   year: string;
 15 |   base: number;
 16 |   bonus: number;
 17 |   stock: number;
 18 | };
 19 | 
 20 | type Data = Comp[];
 21 | 
 22 | type TooltipData = {
 23 |   bar: SeriesPoint<Comp>;
 24 |   key: CompTypes;
 25 |   index: number;
 26 |   height: number;
 27 |   width: number;
 28 |   x: number;
 29 |   y: number;
 30 |   color: string;
 31 | };
 32 | 
 33 | export type BarStackProps = {
 34 |   data: Data;
 35 |   width: number;
 36 |   height: number;
 37 |   margin?: { top: number; right: number; bottom: number; left: number };
 38 | };
 39 | 
 40 | const base = "#059669";
 41 | const bonus = "#0ea5e9";
 42 | const stock = "#f59e0b";
 43 | const defaultMargin = { top: 0, right: 0, bottom: 0, left: 0 };
 44 | const tooltipStyles = {
 45 |   ...defaultStyles,
 46 |   minWidth: 60,
 47 |   backgroundColor: "rgba(0,0,0,0.8)",
 48 |   borderRadius: "0.5rem",
 49 | };
 50 | 
 51 | let tooltipTimeout: number;
 52 | 
 53 | export default function Chart({
 54 |   data,
 55 |   width,
 56 |   height,
 57 |   margin = defaultMargin,
 58 | }: BarStackProps) {
 59 |   const {
 60 |     tooltipOpen,
 61 |     tooltipLeft,
 62 |     tooltipTop,
 63 |     tooltipData,
 64 |     hideTooltip,
 65 |     showTooltip,
 66 |   } = useTooltip<TooltipData>();
 67 | 
 68 |   const { containerRef, TooltipInPortal } = useTooltipInPortal({
 69 |     // TooltipInPortal is rendered in a separate child of <body /> and positioned
 70 |     // with page coordinates which should be updated on scroll. consider using
 71 |     // Tooltip or TooltipWithBounds if you don't need to render inside a Portal
 72 |     scroll: true,
 73 |   });
 74 | 
 75 |   const keys = Object.keys(data[0]).filter((d) => d !== "year") as CompTypes[];
 76 | 
 77 |   const totals = data.reduce((all, current) => {
 78 |     const tc = keys.reduce((d, k) => {
 79 |       d += Number(current[k]);
 80 |       return d;
 81 |     }, 0);
 82 |     all.push(tc);
 83 |     return all;
 84 |   }, [] as number[]);
 85 | 
 86 |   const xScale = scaleBand<string>({
 87 |     domain: data.map((d) => d.year),
 88 |     padding: 0.2,
 89 |   });
 90 | 
 91 |   const yScale = scaleLinear<number>({
 92 |     domain: [0, Math.max(...totals)],
 93 |     nice: true,
 94 |   });
 95 | 
 96 |   const colorScale = scaleOrdinal<CompTypes, string>({
 97 |     domain: keys,
 98 |     range: [base, bonus, stock],
 99 |   });
100 | 
101 |   // bounds
102 |   const xMax = width;
103 |   const yMax = height - margin.top - 100;
104 | 
105 |   xScale.rangeRound([0, xMax]);
106 |   yScale.range([yMax, 0]);
107 | 
108 |   return (
109 |     <div style={{ position: "relative" }}>
110 |       <svg ref={containerRef} width={width} height={height}>
111 |         <Grid
112 |           top={margin.top}
113 |           left={margin.left}
114 |           xScale={xScale}
115 |           yScale={yScale}
116 |           width={xMax}
117 |           height={yMax}
118 |           stroke="white"
119 |           strokeOpacity={0.1}
120 |         />
121 |         <Group top={margin.top}>
122 |           <BarStack
123 |             data={data}
124 |             keys={keys}
125 |             x={(d) => d.year}
126 |             xScale={xScale}
127 |             yScale={yScale}
128 |             color={colorScale}
129 |           >
130 |             {(barStacks) =>
131 |               barStacks.map((barStack) =>
132 |                 barStack.bars.map((bar) => (
133 |                   <rect
134 |                     key={`bar-stack-${barStack.index}-${bar.index}`}
135 |                     x={bar.x + bar.width / 4}
136 |                     y={bar.y}
137 |                     height={bar.height}
138 |                     width={bar.width / 2}
139 |                     fill={bar.color}
140 |                     onMouseLeave={() => {
141 |                       tooltipTimeout = window.setTimeout(() => {
142 |                         hideTooltip();
143 |                       }, 300);
144 |                     }}
145 |                     onMouseMove={(event) => {
146 |                       if (tooltipTimeout) clearTimeout(tooltipTimeout);
147 |                       const eventSvgCoords = localPoint(event);
148 |                       const left = bar.x + bar.width / 2;
149 |                       showTooltip({
150 |                         tooltipData: bar,
151 |                         tooltipTop: eventSvgCoords?.y,
152 |                         tooltipLeft: left,
153 |                       });
154 |                     }}
155 |                   />
156 |                 ))
157 |               )
158 |             }
159 |           </BarStack>
160 |         </Group>
161 |         <AxisBottom
162 |           top={yMax + margin.top}
163 |           scale={xScale}
164 |           tickFormat={(d) => `Year ${d}`}
165 |           stroke="#64748b"
166 |           tickStroke="#64748b"
167 |           tickLabelProps={() => ({
168 |             fill: "#64748b",
169 |             fontSize: 10,
170 |             textAnchor: "middle",
171 |           })}
172 |         />
173 |       </svg>
174 |       {tooltipOpen && tooltipData && (
175 |         <TooltipInPortal
176 |           top={tooltipTop}
177 |           left={tooltipLeft}
178 |           style={tooltipStyles}
179 |         >
180 |           <p className="text-xs text-slate-400">
181 |             Year {tooltipData.bar.data["year"]}
182 |           </p>
183 |           <p className="mt-1 text-xs text-slate-50 capitalize">
184 |             {tooltipData.key} compensation
185 |           </p>
186 |           <NumberFormat
187 |             style={{ color: colorScale(tooltipData.key) }}
188 |             className="text-xl mt-1"
189 |             thousandSeparator
190 |             displayType="text"
191 |             prefix="$"
192 |             value={tooltipData.bar.data[tooltipData.key]}
193 |           />
194 |         </TooltipInPortal>
195 |       )}
196 |     </div>
197 |   );
198 | }
199 | 


--------------------------------------------------------------------------------
/app/components/CompForm.tsx:
--------------------------------------------------------------------------------
  1 | import { useState, useEffect } from "react";
  2 | import { RadioGroup, Listbox } from "@headlessui/react";
  3 | import NumberFormat from "react-number-format";
  4 | import { FormField } from "~/components/FormField";
  5 | import { CompModal } from "~/components/CompModal";
  6 | import { useModal } from "~/components/Modal";
  7 | import type { CompHooksType } from "~/lib/comp";
  8 | import {
  9 |   currencyInputFormatProps,
 10 |   staticInputFormatProps,
 11 | } from "~/lib/formProps";
 12 | 
 13 | type Props = {
 14 |   comp: CompHooksType;
 15 | };
 16 | 
 17 | export const CompForm = ({ comp }: Props) => {
 18 |   const [shouldUpdate, setShouldUpdate] = useState(false);
 19 |   const modalProps = useModal();
 20 | 
 21 |   useEffect(() => {
 22 |     if (shouldUpdate) {
 23 |       comp.updateData();
 24 |       setShouldUpdate(false);
 25 |     }
 26 |   }, [comp, shouldUpdate]);
 27 | 
 28 |   return (
 29 |     <>
 30 |       <div>
 31 |         <fieldset className="cash-section">
 32 |           <legend className="text-sm text-slate-300">Cash Compensation</legend>
 33 |           <div className="isolate -space-y-px rounded-md shadow-sm mt-2">
 34 |             <FormField
 35 |               className="rounded-b-none"
 36 |               label="Base Salary"
 37 |               name="base"
 38 |               placeholder="$100,000.00"
 39 |             >
 40 |               <NumberFormat
 41 |                 {...currencyInputFormatProps}
 42 |                 value={comp.base}
 43 |                 onValueChange={({ value }) => comp.setBase(value)}
 44 |                 onBlur={() => setShouldUpdate(true)}
 45 |               />
 46 |             </FormField>
 47 |             <FormField
 48 |               className="rounded-none"
 49 |               label="Sign on bonus"
 50 |               name="signon"
 51 |               placeholder="$10,000.00"
 52 |             >
 53 |               <NumberFormat
 54 |                 {...currencyInputFormatProps}
 55 |                 value={comp.signOnBonus}
 56 |                 onValueChange={({ value }) => comp.setSignOnBonus(value)}
 57 |                 onBlur={() => setShouldUpdate(true)}
 58 |               />
 59 |             </FormField>
 60 |             <FormField
 61 |               className="rounded-t-none"
 62 |               label="Yearly bonus target"
 63 |               name="target"
 64 |               placeholder="$10,000.00"
 65 |             >
 66 |               <NumberFormat
 67 |                 {...currencyInputFormatProps}
 68 |                 value={comp.targetBonus}
 69 |                 onValueChange={({ value }) => comp.setTargetBonus(value)}
 70 |                 onBlur={() => setShouldUpdate(true)}
 71 |               />
 72 |             </FormField>
 73 |           </div>
 74 |         </fieldset>
 75 |         <fieldset className="equity-section mt-10">
 76 |           <legend className="flex justify-between w-full text-sm text-slate-300">
 77 |             <span>Equity Compensation</span>
 78 |             <RadioGroup
 79 |               className="flex gap-2"
 80 |               value={comp.shareType}
 81 |               onChange={(shareType) => {
 82 |                 comp.setShareType(shareType);
 83 |                 comp.setIso("");
 84 |                 comp.setStrikePrice("");
 85 |                 comp.setRsu("");
 86 |                 comp.setExpectedGrowthMultiple("");
 87 |               }}
 88 |               onBlur={() => setShouldUpdate(true)}
 89 |             >
 90 |               <RadioGroup.Option value="iso">
 91 |                 {({ checked }) => (
 92 |                   <span
 93 |                     className={`cursor-pointer transition ${
 94 |                       checked ? "text-emerald-600" : ""
 95 |                     }`}
 96 |                   >
 97 |                     ISO
 98 |                   </span>
 99 |                 )}
100 |               </RadioGroup.Option>
101 |               <RadioGroup.Option value="rsu">
102 |                 {({ checked }) => (
103 |                   <span
104 |                     className={`cursor-pointer transition ${
105 |                       checked ? "text-emerald-600" : ""
106 |                     }`}
107 |                   >
108 |                     RSU
109 |                   </span>
110 |                 )}
111 |               </RadioGroup.Option>
112 |             </RadioGroup>
113 |           </legend>
114 |           {comp.shareType === "iso" && (
115 |             <div className="isolate -space-y-px rounded-md shadow-sm mt-2">
116 |               <FormField
117 |                 className="rounded-b-none"
118 |                 label="Stock options per year"
119 |                 name="shares"
120 |                 placeholder="1,000"
121 |               >
122 |                 <NumberFormat
123 |                   {...staticInputFormatProps}
124 |                   value={comp.iso}
125 |                   onValueChange={({ value }) => comp.setIso(value)}
126 |                   onBlur={() => setShouldUpdate(true)}
127 |                 />
128 |               </FormField>
129 |               <FormField
130 |                 className="rounded-t-none"
131 |                 label="Strike Price per share"
132 |                 name="strike"
133 |                 placeholder="$10"
134 |               >
135 |                 <NumberFormat
136 |                   {...currencyInputFormatProps}
137 |                   value={comp.strikePrice}
138 |                   onValueChange={({ value }) => comp.setStrikePrice(value)}
139 |                   onBlur={() => setShouldUpdate(true)}
140 |                 />
141 |               </FormField>
142 |             </div>
143 |           )}
144 |           {comp.shareType === "rsu" && (
145 |             <div className="isolate -space-y-px rounded-md shadow-sm mt-2">
146 |               <FormField
147 |                 label="Shares per year"
148 |                 name="shares"
149 |                 placeholder="1,000"
150 |               >
151 |                 <NumberFormat
152 |                   {...staticInputFormatProps}
153 |                   value={comp.rsu}
154 |                   onValueChange={({ value }) => comp.setRsu(value)}
155 |                   onBlur={() => setShouldUpdate(true)}
156 |                 />
157 |               </FormField>
158 |             </div>
159 |           )}
160 |         </fieldset>
161 |         <fieldset className="equity-value-section mt-10">
162 |           <legend className="flex justify-between items-center w-full text-sm text-slate-300">
163 |             <div className="flex items-center">
164 |               <span>Estimate Equity Value</span>
165 |               <button
166 |                 type="button"
167 |                 className="estimate-modal-button p-1"
168 |                 onClick={() => modalProps.openModal()}
169 |               >
170 |                 <span className="sr-only">Find out for me</span>
171 |                 <svg
172 |                   xmlns="http://www.w3.org/2000/svg"
173 |                   className="h-4 w-4"
174 |                   viewBox="0 0 24 24"
175 |                   fill="none"
176 |                   stroke="currentColor"
177 |                   strokeWidth="2"
178 |                   strokeLinecap="round"
179 |                   strokeLinejoin="round"
180 |                 >
181 |                   <circle cx="12" cy="12" r="10"></circle>
182 |                   <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
183 |                   <line x1="12" y1="17" x2="12.01" y2="17"></line>
184 |                 </svg>
185 |               </button>
186 |             </div>
187 |             <Listbox
188 |               value={comp.shareCalcType}
189 |               onChange={(shareCalcType) => {
190 |                 comp.setShareCalcType(shareCalcType);
191 |                 comp.setPreferredSharePrice("");
192 |                 comp.setExpectedGrowthMultiple("");
193 |                 comp.setSharesOutstanding("");
194 |                 comp.setExpectedRevenue("");
195 |                 comp.setRevenueMultiple("");
196 |               }}
197 |             >
198 |               <div className="relative">
199 |                 <Listbox.Button className="text-emerald-500">
200 |                   {comp.shareCalcType === "current"
201 |                     ? "Growth Based"
202 |                     : comp.shareCalcType === "revenue"
203 |                     ? "Revenue Based"
204 |                     : null}
205 |                 </Listbox.Button>
206 |                 <Listbox.Options className="absolute z-10 w-[200px] right-0 mt-1 overflow-auto text-sm bg-black rounded-lg shadow-lg max-h-60 ring-1 ring-black ring-opacity-5 focus:outline-none">
207 |                   <Listbox.Option
208 |                     value="current"
209 |                     className={({ active }) =>
210 |                       `cursor-pointer select-none relative py-2 px-4 ${
211 |                         active ? "text-emerald-100 bg-emerald-900" : ""
212 |                       }`
213 |                     }
214 |                   >
215 |                     Growth Based
216 |                   </Listbox.Option>
217 |                   <Listbox.Option
218 |                     value="revenue"
219 |                     className={({ active }) =>
220 |                       `cursor-pointer select-none relative py-2 px-4 ${
221 |                         active ? "text-emerald-100 bg-emerald-900" : ""
222 |                       }`
223 |                     }
224 |                   >
225 |                     Revenue Based
226 |                   </Listbox.Option>
227 |                 </Listbox.Options>
228 |               </div>
229 |             </Listbox>
230 |           </legend>
231 |           {comp.shareCalcType === "current" && (
232 |             <div className="isolate -space-y-px rounded-md shadow-sm mt-2">
233 |               <FormField
234 |                 className="rounded-b-none"
235 |                 label={
236 |                   comp.shareType === "rsu"
237 |                     ? "Current Market Value"
238 |                     : "Preffered Stock Price"
239 |                 }
240 |                 name="preferredSharePrice"
241 |                 placeholder="$10.00"
242 |               >
243 |                 <NumberFormat
244 |                   {...currencyInputFormatProps}
245 |                   value={comp.preferredSharePrice}
246 |                   onValueChange={({ value }) =>
247 |                     comp.setPreferredSharePrice(value)
248 |                   }
249 |                   onBlur={() => setShouldUpdate(true)}
250 |                 />
251 |               </FormField>
252 |               <FormField
253 |                 className="rounded-t-none"
254 |                 label={
255 |                   comp.shareType === "rsu"
256 |                     ? "Expected Market Growth (per year)"
257 |                     : "Expected Growth over 4 years"
258 |                 }
259 |                 name="revenue-multiple"
260 |                 placeholder={comp.shareType === "rsu" ? "30%" : "5x"}
261 |               >
262 |                 <NumberFormat
263 |                   {...staticInputFormatProps}
264 |                   allowNegative
265 |                   suffix={comp.shareType === "rsu" ? "%" : "x"}
266 |                   value={comp.expectedGrowthMultiple}
267 |                   onValueChange={({ value }) =>
268 |                     comp.setExpectedGrowthMultiple(value)
269 |                   }
270 |                   onBlur={() => setShouldUpdate(true)}
271 |                 />
272 |               </FormField>
273 |             </div>
274 |           )}
275 |           {comp.shareCalcType === "revenue" && (
276 |             <div className="isolate -space-y-px rounded-md shadow-sm mt-2">
277 |               <FormField
278 |                 className="rounded-b-none"
279 |                 label="Shares Outstanding"
280 |                 name="outstanding"
281 |                 placeholder="10,000,000"
282 |               >
283 |                 <NumberFormat
284 |                   {...staticInputFormatProps}
285 |                   value={comp.sharesOutstanding}
286 |                   onValueChange={({ value }) =>
287 |                     comp.setSharesOutstanding(value)
288 |                   }
289 |                   onBlur={() => setShouldUpdate(true)}
290 |                 />
291 |               </FormField>
292 |               <FormField
293 |                 className="rounded-none"
294 |                 label="Expected Company Revenue"
295 |                 name="revenue"
296 |                 placeholder="$100,000,000"
297 |               >
298 |                 <NumberFormat
299 |                   {...currencyInputFormatProps}
300 |                   value={comp.expectedRevenue}
301 |                   onValueChange={({ value }) => comp.setExpectedRevenue(value)}
302 |                   onBlur={() => setShouldUpdate(true)}
303 |                 />
304 |               </FormField>
305 |               <FormField
306 |                 className="rounded-t-none"
307 |                 label="Revenue Multiple"
308 |                 name="revenue-multiple"
309 |                 placeholder="15"
310 |               >
311 |                 <NumberFormat
312 |                   {...staticInputFormatProps}
313 |                   value={comp.revenueMultiple}
314 |                   onValueChange={({ value }) => comp.setRevenueMultiple(value)}
315 |                   onBlur={() => setShouldUpdate(true)}
316 |                 />
317 |               </FormField>
318 |             </div>
319 |           )}
320 |         </fieldset>
321 |       </div>
322 |       <CompModal {...comp} {...modalProps} setShouldUpdate={setShouldUpdate} />
323 |     </>
324 |   );
325 | };
326 | 


--------------------------------------------------------------------------------
/app/components/CompModal.tsx:
--------------------------------------------------------------------------------
  1 | import { useState } from "react";
  2 | import { useFetcher } from "@remix-run/react";
  3 | import Select, { components } from "react-select";
  4 | import NumberFormat from "react-number-format";
  5 | import { useDebouncedCallback } from "use-debounce";
  6 | import { Modal } from "~/components/Modal";
  7 | import { FormField } from "~/components/FormField";
  8 | import {
  9 |   currencyTextFormatProps,
 10 |   staticTextFormatProps,
 11 | } from "~/lib/formProps";
 12 | 
 13 | import type { OptionProps, MultiValue } from "react-select";
 14 | import type { Props as ModalProps } from "~/components/Modal";
 15 | import type { CompHooksType } from "~/lib/comp";
 16 | 
 17 | type Props = { setShouldUpdate: (t: boolean) => void } & CompHooksType &
 18 |   Omit<ModalProps, "title" | "children">;
 19 | 
 20 | const Option = ({ children, ...rest }: OptionProps<any>) => {
 21 |   return (
 22 |     <components.Option {...rest}>
 23 |       <span className="mr-1 inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-slate-800">
 24 |         {rest.data.symbol}
 25 |       </span>
 26 |       <span>{children}</span>
 27 |     </components.Option>
 28 |   );
 29 | };
 30 | 
 31 | export const CompModal = ({
 32 |   isOpen,
 33 |   closeModal,
 34 |   openModal,
 35 |   shareType,
 36 |   shareCalcType,
 37 |   setExpectedGrowthMultiple,
 38 |   setPreferredSharePrice,
 39 |   setSharesOutstanding,
 40 |   setExpectedRevenue,
 41 |   setRevenueMultiple,
 42 |   setShouldUpdate,
 43 | }: Props) => {
 44 |   const [view, setView] = useState("estimate");
 45 |   const search = useFetcher();
 46 |   const companies = useFetcher();
 47 | 
 48 |   const loadOptions = useDebouncedCallback((value) => {
 49 |     search.load(`/api/search?q=${value}`);
 50 |   }, 300);
 51 | 
 52 |   const loadCompaniesData = (selected: MultiValue<any>) => {
 53 |     const query = selected.map((s) => s.symbol).join(",");
 54 |     companies.load(`/api/stock?s=${query}`);
 55 |   };
 56 | 
 57 |   const handleClose = () => {
 58 |     loadCompaniesData([]);
 59 |     closeModal();
 60 |   };
 61 | 
 62 |   const handleUse = (c: any) => {
 63 |     if (isoCurrent) {
 64 |       setExpectedGrowthMultiple(c.year5ChangePercent.toFixed(2));
 65 |     }
 66 |     if (rsuCurrent) {
 67 |       setPreferredSharePrice((c.marketcap / c.sharesOutstanding).toFixed(2));
 68 |       setExpectedGrowthMultiple(((c.year5ChangePercent / 5) * 100).toFixed(2));
 69 |     }
 70 |     if (isoRevenue || rsuRevenue) {
 71 |       setSharesOutstanding(c.sharesOutstanding.toString());
 72 |       setExpectedRevenue(c.revenue.toString());
 73 |       setRevenueMultiple(c.revenuePerShare.toString());
 74 |     }
 75 |     setShouldUpdate(true);
 76 |     handleClose();
 77 |   };
 78 | 
 79 |   const isoCurrent = shareType === "iso" && shareCalcType == "current";
 80 |   const rsuCurrent = shareType === "rsu" && shareCalcType == "current";
 81 |   const isoRevenue = shareType === "iso" && shareCalcType == "revenue";
 82 |   const rsuRevenue = shareType === "rsu" && shareCalcType == "revenue";
 83 | 
 84 |   return (
 85 |     <Modal
 86 |       isOpen={isOpen}
 87 |       openModal={openModal}
 88 |       closeModal={handleClose}
 89 |       title={
 90 |         <div className="flex justify-between items-end">
 91 |           <h1>
 92 |             {view === "estimate" ? "Estimate Equity Value" : "Terminology"}
 93 |           </h1>
 94 |           <span className="relative z-0 inline-flex shadow-sm rounded-md">
 95 |             <button
 96 |               type="button"
 97 |               className={`relative inline-flex items-center px-2 py-2 rounded-l-md border border-slate-600 bg-black text-sm hover:bg-emerald-900 focus:z-10 focus:outline-none focus:ring-1 focus:ring-emerald-500 focus:border-emerald-500 transition ${
 98 |                 view === "estimate" ? "bg-slate-800" : ""
 99 |               }`}
100 |               onClick={() => setView("estimate")}
101 |             >
102 |               <span className="sr-only">Estimate Equity Value</span>
103 |               <svg
104 |                 className="w-3 h-3"
105 |                 viewBox="0 0 24 24"
106 |                 fill="none"
107 |                 stroke="currentColor"
108 |                 strokeWidth="2"
109 |                 strokeLinecap="round"
110 |                 strokeLinejoin="round"
111 |               >
112 |                 <line x1="4" y1="21" x2="4" y2="14"></line>
113 |                 <line x1="4" y1="10" x2="4" y2="3"></line>
114 |                 <line x1="12" y1="21" x2="12" y2="12"></line>
115 |                 <line x1="12" y1="8" x2="12" y2="3"></line>
116 |                 <line x1="20" y1="21" x2="20" y2="16"></line>
117 |                 <line x1="20" y1="12" x2="20" y2="3"></line>
118 |                 <line x1="1" y1="14" x2="7" y2="14"></line>
119 |                 <line x1="9" y1="8" x2="15" y2="8"></line>
120 |                 <line x1="17" y1="16" x2="23" y2="16"></line>
121 |               </svg>
122 |             </button>
123 |             <button
124 |               type="button"
125 |               className={`-ml-px relative inline-flex items-center px-2 py-2 rounded-r-md border border-slate-600 bg-black text-sm hover:bg-emerald-900 focus:z-10 focus:outline-none focus:ring-1 focus:ring-emerald-500 focus:border-emerald-500 transition ${
126 |                 view === "terminology" ? "bg-slate-800" : ""
127 |               }`}
128 |               onClick={() => setView("terminology")}
129 |             >
130 |               <span className="sr-only">Terminology</span>
131 |               <svg
132 |                 className="w-3 h-3"
133 |                 viewBox="0 0 24 24"
134 |                 fill="none"
135 |                 stroke="currentColor"
136 |                 strokeWidth="2"
137 |                 strokeLinecap="round"
138 |                 strokeLinejoin="round"
139 |               >
140 |                 <polyline points="4 7 4 4 20 4 20 7"></polyline>
141 |                 <line x1="9" y1="20" x2="15" y2="20"></line>
142 |                 <line x1="12" y1="4" x2="12" y2="20"></line>
143 |               </svg>
144 |             </button>
145 |           </span>
146 |         </div>
147 |       }
148 |     >
149 |       {view === "terminology" && (
150 |         <div className="mt-3">
151 |           {isoCurrent && (
152 |             <div>
153 |               <h2 className="text-slate-50 font-bold">Preferred Stock Price</h2>
154 |               <p className="mt-1">
155 |                 The preferred stock price is the price at which investors
156 |                 currently pay for shares of the company. You can ask your
157 |                 recruiter what the current price is.
158 |               </p>
159 |             </div>
160 |           )}
161 |           {rsuCurrent && (
162 |             <div className="mt-3">
163 |               <h2 className="text-slate-50 font-bold">Current Market Price</h2>
164 |               <p className="mt-1">
165 |                 This is the stock price at which the company is currently
166 |                 trading
167 |               </p>
168 |             </div>
169 |           )}
170 |           {(isoRevenue || rsuRevenue) && (
171 |             <div className="mt-3">
172 |               <h2 className="text-slate-50 font-bold">Shares Outstanding</h2>
173 |               <p className="mt-1">
174 |                 The shares outstanding is the number of shares that the company
175 |                 has available in the market.
176 |               </p>
177 |             </div>
178 |           )}
179 |           <div className="mt-3">
180 |             {isoCurrent && (
181 |               <>
182 |                 <h2 className="text-slate-50 font-bold">
183 |                   Expected Growth over 4 years
184 |                 </h2>
185 |                 <p className="mt-1">
186 |                   Depending on the stage of the company expected growth can
187 |                   vary. Investors typically expect a 10x return on what they put
188 |                   in.
189 |                 </p>
190 |               </>
191 |             )}
192 |             {rsuCurrent && (
193 |               <>
194 |                 <h2 className="text-slate-50 font-bold">
195 |                   Expected Market Growth
196 |                 </h2>
197 |                 <p className="mt-1">
198 |                   How much do you expect the stock price to change every year?
199 |                   Anualized growth over the last 4 years is a good estimate.
200 |                 </p>
201 |               </>
202 |             )}
203 |             {(isoRevenue || rsuRevenue) && (
204 |               <>
205 |                 <h2 className="text-slate-50 font-bold">
206 |                   Expected Company Revenue
207 |                 </h2>
208 |                 <p className="mt-1">
209 |                   How much do you expect the company to make every year? Divide
210 |                   this number by the number of shares outstanding to get the
211 |                   revenue multiple.
212 |                 </p>
213 |                 <h2 className="text-slate-50 font-bold mt-3">
214 |                   Revenue Multiple
215 |                 </h2>
216 |                 <p className="mt-1">
217 |                   The revenue multiple is the ratio of the company's revenue
218 |                   relative to its stock price. You can use your competitors
219 |                   revenue multiple to estimate what your share value would be.
220 |                 </p>
221 |               </>
222 |             )}
223 |           </div>
224 |         </div>
225 |       )}
226 |       {view === "estimate" && (
227 |         <div className="flex flex-col gap-3 min-h-[360px]">
228 |           <div className="mt-3">
229 |             <p>
230 |               Estimate reasonable numbers for your equity value by looking at
231 |               competitors:
232 |             </p>
233 |             <div className="mt-3">
234 |               <FormField
235 |                 className="rounded"
236 |                 label="Add your company or a competitor"
237 |                 name="competitor"
238 |                 placeholder="Google"
239 |               >
240 |                 <Select
241 |                   className="react-select-container"
242 |                   classNamePrefix="react-select"
243 |                   components={{ Option, IndicatorsContainer: () => null }}
244 |                   isMulti
245 |                   isLoading={search.state !== "idle"}
246 |                   defaultValue={[]}
247 |                   onInputChange={loadOptions}
248 |                   options={search.data}
249 |                   onChange={loadCompaniesData}
250 |                   isSearchable={
251 |                     !companies.data ||
252 |                     (companies.data && companies.data.length < 3)
253 |                   }
254 |                   openMenuOnFocus={false}
255 |                   openMenuOnClick={false}
256 |                 />
257 |               </FormField>
258 |             </div>
259 |           </div>
260 |           {companies.data && companies.data.length ? (
261 |             <table className="relative min-w-full divide-y divide-slate-600 text-sm">
262 |               <thead className="font-semibold">
263 |                 <tr>
264 |                   <th scope="col" className="px-3 py-3.5 text-left table-cell">
265 |                     Company
266 |                   </th>
267 |                   {isoCurrent && (
268 |                     <th scope="col" className="px-3 py-3.5 table-cell">
269 |                       Growth over last 4 years
270 |                     </th>
271 |                   )}
272 |                   {rsuCurrent && (
273 |                     <>
274 |                       <th
275 |                         scope="col"
276 |                         className="px-3 py-3.5 text-left table-cell"
277 |                       >
278 |                         Current Market Value
279 |                       </th>
280 |                       <th
281 |                         scope="col"
282 |                         className="px-3 py-3.5 text-left table-cell"
283 |                       >
284 |                         Average Growth per year
285 |                       </th>
286 |                     </>
287 |                   )}
288 |                   {(isoRevenue || rsuRevenue) && (
289 |                     <>
290 |                       <th
291 |                         scope="col"
292 |                         className="px-3 py-3.5 text-left table-cell"
293 |                       >
294 |                         Shares Outstanding
295 |                       </th>
296 |                       <th
297 |                         scope="col"
298 |                         className="px-3 py-3.5 text-left table-cell"
299 |                       >
300 |                         Revenue
301 |                       </th>
302 |                       <th
303 |                         scope="col"
304 |                         className="px-3 py-3.5 text-left table-cell"
305 |                       >
306 |                         Revenue Multiple
307 |                       </th>
308 |                     </>
309 |                   )}
310 |                   <th scope="col" className="py-3.5 text-right table-cell" />
311 |                 </tr>
312 |               </thead>
313 |               <tbody className="text-slate-500">
314 |                 {companies.data.map((c: any) => (
315 |                   <tr key={c.companyName}>
316 |                     <td className="px-3 py-3.5 table-cell">{c.companyName}</td>
317 |                     {isoCurrent && (
318 |                       <td className="px-3 py-3.5 table-cell">
319 |                         <NumberFormat
320 |                           {...staticTextFormatProps}
321 |                           allowNegative
322 |                           suffix="%"
323 |                           value={c.year5ChangePercent * 100}
324 |                         />
325 |                       </td>
326 |                     )}
327 |                     {rsuCurrent && (
328 |                       <>
329 |                         <td className="px-3 py-3.5 table-cell">
330 |                           <NumberFormat
331 |                             {...currencyTextFormatProps}
332 |                             value={c.day200MovingAvg}
333 |                           />
334 |                         </td>
335 |                         <td className="px-3 py-3.5 table-cell">
336 |                           <NumberFormat
337 |                             {...staticTextFormatProps}
338 |                             allowNegative
339 |                             suffix="%"
340 |                             value={(c.year5ChangePercent / 5) * 100}
341 |                           />
342 |                         </td>
343 |                       </>
344 |                     )}
345 |                     {(isoRevenue || rsuRevenue) && (
346 |                       <>
347 |                         <td className="px-3 py-3.5 table-cell">
348 |                           <NumberFormat
349 |                             displayType="text"
350 |                             thousandSeparator
351 |                             isNumericString
352 |                             value={c.sharesOutstanding}
353 |                           />
354 |                         </td>
355 |                         <td className="px-3 py-3.5 table-cell">
356 |                           <NumberFormat
357 |                             {...currencyTextFormatProps}
358 |                             value={c.revenue}
359 |                           />
360 |                         </td>
361 |                         <td className="px-3 py-3.5 table-cell">
362 |                           <NumberFormat
363 |                             displayType="text"
364 |                             thousandSeparator
365 |                             isNumericString
366 |                             value={c.revenuePerShare}
367 |                           />
368 |                         </td>
369 |                       </>
370 |                     )}
371 |                     <td className="py-3.5 table-cell text-right">
372 |                       <button
373 |                         type="button"
374 |                         className="text-white inline-flex items-center px-2 py-1 rounded-md border border-slate-600 text-xs hover:bg-emerald-900 focus:z-10 focus:outline-none focus:ring-1 focus:ring-emerald-500 focus:border-emerald-500 transition"
375 |                         onClick={() => handleUse(c)}
376 |                       >
377 |                         Use
378 |                       </button>
379 |                     </td>
380 |                   </tr>
381 |                 ))}
382 |               </tbody>
383 |             </table>
384 |           ) : (
385 |             <div className="flex justify-center items-center flex-1">
386 |               <h2 className="text-slate-700">Add a company above</h2>
387 |             </div>
388 |           )}
389 |         </div>
390 |       )}
391 |     </Modal>
392 |   );
393 | };
394 | 


--------------------------------------------------------------------------------
/app/components/CompTable.tsx:
--------------------------------------------------------------------------------
 1 | import type { BaseDataType } from "~/lib/comp";
 2 | import NumberFormat from "react-number-format";
 3 | import { currencyTextFormatProps } from "~/lib/formProps";
 4 | 
 5 | type Props = {
 6 |   data: BaseDataType;
 7 | };
 8 | 
 9 | export const CompTable = ({ data }: Props) => (
10 |   <table className="min-w-full text-sm divide-y  divide-slate-600">
11 |     <thead className="font-semibold">
12 |       <tr>
13 |         <th scope="col" className="px-3 py-3.5 text-left table-cell">
14 |           Year
15 |         </th>
16 |         <th scope="col" className="px-3 py-3.5 text-left table-cell">
17 |           Base
18 |         </th>
19 |         <th scope="col" className="px-3 py-3.5 text-left table-cell">
20 |           Bonus
21 |         </th>
22 |         <th scope="col" className="px-3 py-3.5 text-left table-cell">
23 |           Stock
24 |         </th>
25 |         <th scope="col" className="px-3 py-3.5 text-right table-cell">
26 |           Total
27 |         </th>
28 |       </tr>
29 |     </thead>
30 |     <tbody className="text-slate-500">
31 |       {data.map((c) => (
32 |         <tr key={c.year}>
33 |           <td className="px-3 py-3.5 table-cell">{c.year}</td>
34 |           <td className="px-3 py-3.5 table-cell">
35 |             <NumberFormat value={c.base} {...currencyTextFormatProps} />
36 |           </td>
37 |           <td className="px-3 py-3.5 table-cell">
38 |             <NumberFormat value={c.bonus} {...currencyTextFormatProps} />
39 |           </td>
40 |           <td className="px-3 py-3.5 table-cell">
41 |             <NumberFormat value={c.stock} {...currencyTextFormatProps} />
42 |           </td>
43 |           <td className="px-3 py-3.5 table-cell text-right text-white">
44 |             <NumberFormat
45 |               value={c.base + c.bonus + c.stock}
46 |               {...currencyTextFormatProps}
47 |             />
48 |           </td>
49 |         </tr>
50 |       ))}
51 |     </tbody>
52 |   </table>
53 | );
54 | 


--------------------------------------------------------------------------------
/app/components/FormField.tsx:
--------------------------------------------------------------------------------
 1 | import { cloneElement } from "react";
 2 | 
 3 | type Props = {
 4 |   label: string;
 5 |   name: string;
 6 |   className?: string;
 7 |   placeholder?: string;
 8 |   children?: any;
 9 | };
10 | 
11 | export const FormField = ({
12 |   label,
13 |   name,
14 |   className = "",
15 |   placeholder,
16 |   children,
17 | }: Props) => {
18 |   const fieldProps = {
19 |     id: name,
20 |     type: "text",
21 |     className:
22 |       "block w-full border-0 p-0 text-emerald-500 placeholder-slate-500 bg-transparent focus:ring-0",
23 |     name,
24 |     placeholder,
25 |   };
26 | 
27 |   const field = children ? (
28 |     cloneElement(children, fieldProps)
29 |   ) : (
30 |     <input {...fieldProps} />
31 |   );
32 | 
33 |   return (
34 |     <div
35 |       className={`relative border border-slate-600 rounded-md px-3 py-2 focus-within:z-10 focus-within:ring-1 focus-within:ring-emerald-600 focus-within:border-emerald-600 ${className}`}
36 |     >
37 |       <label
38 |         htmlFor={name}
39 |         className="block text-sm font-medium text-slate-50 pb-1 cursor-text"
40 |       >
41 |         {label}
42 |       </label>
43 |       {field}
44 |     </div>
45 |   );
46 | };
47 | 


--------------------------------------------------------------------------------
/app/components/Logo.tsx:
--------------------------------------------------------------------------------
 1 | export const Logo = () => (
 2 |   <svg width="35" viewBox="0 0 581 672">
 3 |     <path
 4 |       transform="translate(-222 -177)"
 5 |       fill="#fff"
 6 |       d="M514.295541,177.479824 L514.378142,177.52591 L773.170435,327.082098 C774.372106,327.777488 774.407028,328.932889 773.265438,329.672954 L773.206377,329.710222 L492.89748,501.785472 C491.717022,502.509035 490.746312,504.216333 490.708698,505.615783 L490.707567,505.69937 L490.707567,769.931247 C490.707567,771.323149 491.672311,771.895657 492.860361,771.229644 L492.918019,771.19645 L723.980824,634.572585 C725.174326,633.866397 726.155449,632.175719 726.192743,630.77664 L726.193843,630.694688 L726.193843,564.304988 C726.193843,562.912735 725.238564,562.357733 724.062657,563.047159 L724.006497,563.080931 L553.218936,668.319031 C552.03621,669.050597 551.064938,668.526287 551.034875,667.160639 L551.034158,539.371242 C551.034158,537.984089 551.98986,536.277842 553.174657,535.535869 L553.244609,535.493345 L799.926913,389.437036 C801.121974,388.730962 802.108174,389.270168 802.144074,390.63553 L802.145067,390.702238 L803,677.931484 C803.005016,679.318638 802.049411,681.019937 800.862194,681.759294 L800.792096,681.801667 L516.378074,848.461232 C515.185703,849.157722 513.249626,849.180575 512.0218,848.520176 L511.9392,848.47409 L386.223288,775.827811 C385.022233,775.134234 384.038494,773.451219 384,772.05243 L384,442.374959 C384,440.987805 384.953233,439.279085 386.13309,438.529738 L386.20275,438.486775 L545.216639,343.370294 C546.40148,342.661232 548.352116,342.596305 549.604591,343.213974 L549.688888,343.257146 L608.356998,374.514333 C609.576983,375.163049 611.535764,375.145504 612.766984,374.485737 L612.849786,374.439758 L658.958628,347.883364 C660.162824,347.190503 660.192823,346.047577 659.038863,345.322598 L658.979167,345.286099 L445.368917,217.984102 C444.17482,217.27354 444.159883,216.122859 445.319225,215.407407 L445.379187,215.371407 L509.939267,177.538768 C511.131639,176.842278 513.067716,176.819425 514.295541,177.479824 Z M394.588878,246.542504 L394.668062,246.59074 L479.108101,299.918734 C480.287637,300.661193 480.295161,301.852995 479.14293,302.588722 L479.082298,302.626365 L315.837748,401.359837 C314.648754,402.080139 313.670574,403.783165 313.632671,405.181081 L313.631531,405.264579 L313.631531,730.414037 C313.631531,731.80451 312.656881,732.386382 311.455248,731.731163 L311.396931,731.698492 L224.234601,681.63815 C223.029965,680.945286 222.038788,679.263999 222,677.866646 L222,347.078777 C222,345.693048 222.963047,343.993494 224.156402,343.254897 L224.22686,343.212568 L390.26079,246.511104 C391.45982,245.814985 393.384855,245.83427 394.588878,246.542504 Z"
 7 |     />
 8 |   </svg>
 9 | );
10 | 


--------------------------------------------------------------------------------
/app/components/Modal.tsx:
--------------------------------------------------------------------------------
 1 | import { Dialog, Transition } from "@headlessui/react";
 2 | import { Fragment, useState } from "react";
 3 | 
 4 | export const useModal = () => {
 5 |   const [isOpen, setIsOpen] = useState(false);
 6 | 
 7 |   const closeModal = () => {
 8 |     setIsOpen(false);
 9 |   };
10 | 
11 |   const openModal = () => {
12 |     setIsOpen(true);
13 |   };
14 | 
15 |   return { isOpen, closeModal, openModal };
16 | };
17 | 
18 | export type Props = {
19 |   title?: React.ReactNode;
20 |   children: React.ReactNode;
21 | } & ReturnType<typeof useModal>;
22 | 
23 | export const Modal = ({ isOpen, closeModal, title, children }: Props) => {
24 |   return (
25 |     <Transition appear show={isOpen} as={Fragment}>
26 |       <Dialog as="div" className="relative z-10" onClose={closeModal}>
27 |         <Transition.Child
28 |           as={Fragment}
29 |           enter="ease-out duration-300"
30 |           enterFrom="opacity-0"
31 |           enterTo="opacity-100"
32 |           leave="ease-in duration-200"
33 |           leaveFrom="opacity-100"
34 |           leaveTo="opacity-0"
35 |         >
36 |           <div className="fixed inset-0 bg-black bg-opacity-25" />
37 |         </Transition.Child>
38 | 
39 |         <div className="fixed inset-0 overflow-y-auto">
40 |           <div className="flex justify-center py-10 px-4 text-center">
41 |             <Transition.Child
42 |               as={Fragment}
43 |               enter="ease-out duration-300"
44 |               enterFrom="opacity-0 scale-95"
45 |               enterTo="opacity-100 scale-100"
46 |               leave="ease-in duration-200"
47 |               leaveFrom="opacity-100 scale-100"
48 |               leaveTo="opacity-0 scale-95"
49 |             >
50 |               <Dialog.Panel className="w-full max-w-xl transform overflow-hidden rounded-2xl bg-black p-6 text-left shadow-xl transition-all text-slate-300 text-sm">
51 |                 {title && (
52 |                   <Dialog.Title
53 |                     as="h3"
54 |                     className="text-lg font-medium leading-6 text-slate-50"
55 |                   >
56 |                     {title}
57 |                   </Dialog.Title>
58 |                 )}
59 |                 {children}
60 |               </Dialog.Panel>
61 |             </Transition.Child>
62 |           </div>
63 |         </div>
64 |       </Dialog>
65 |     </Transition>
66 |   );
67 | };
68 | 


--------------------------------------------------------------------------------
/app/components/Navigation.tsx:
--------------------------------------------------------------------------------
 1 | import { Logo } from "~/components/Logo";
 2 | import { About, useAbout } from "~/components/About";
 3 | 
 4 | export const Navigation = () => {
 5 |   const aboutProps = useAbout();
 6 | 
 7 |   return (
 8 |     <nav className="relative max-w-7xl mx-auto flex justify-between mb-10">
 9 |       <a href="/" className="inline-flex py-5 px-3">
10 |         <span className="sr-only">Logo</span>
11 |         <Logo />
12 |       </a>
13 |       <div className="flex items-center gap-5 pr-2 md:gap-6">
14 |         <button
15 |           type="button"
16 |           className="hover:underline"
17 |           onClick={() => aboutProps.setRun(true)}
18 |         >
19 |           About
20 |         </button>
21 |         <a
22 |           className="hover:underline"
23 |           href="https://docs.google.com/spreadsheets/d/1MorR4RBtiFMexFv91w9sKcqBRIkLyv7tb394j8BHlig/edit?usp=sharing"
24 |           target="_blank"
25 |           rel="noopener noreferrer"
26 |         >
27 |           Spreadsheet
28 |         </a>
29 |         <a
30 |           className="hover:underline"
31 |           href="https://github.com/kyh/tc"
32 |           target="_blank"
33 |           rel="noopener noreferrer"
34 |         >
35 |           Github
36 |         </a>
37 |       </div>
38 |       <About {...aboutProps} />
39 |     </nav>
40 |   );
41 | };
42 | 


--------------------------------------------------------------------------------
/app/entry.client.tsx:
--------------------------------------------------------------------------------
1 | import { hydrate } from "react-dom";
2 | import { RemixBrowser } from "@remix-run/react";
3 | 
4 | hydrate(<RemixBrowser />, document);
5 | 


--------------------------------------------------------------------------------
/app/entry.server.tsx:
--------------------------------------------------------------------------------
 1 | import { renderToString } from "react-dom/server";
 2 | import type { EntryContext } from "@remix-run/cloudflare";
 3 | import { RemixServer } from "@remix-run/react";
 4 | 
 5 | export default function handleRequest(
 6 |   request: Request,
 7 |   responseStatusCode: number,
 8 |   responseHeaders: Headers,
 9 |   remixContext: EntryContext
10 | ) {
11 |   let markup = renderToString(
12 |     <RemixServer context={remixContext} url={request.url} />
13 |   );
14 | 
15 |   responseHeaders.set("Content-Type", "text/html");
16 | 
17 |   return new Response("<!DOCTYPE html>" + markup, {
18 |     status: responseStatusCode,
19 |     headers: responseHeaders,
20 |   });
21 | }
22 | 


--------------------------------------------------------------------------------
/app/global.css:
--------------------------------------------------------------------------------
 1 | div.react-select__control,
 2 | div.react-select__control:hover,
 3 | div.react-select__control.react-select__control--is-focused {
 4 |   background-color: transparent;
 5 |   border: none;
 6 |   box-shadow: none;
 7 | }
 8 | 
 9 | div.react-select__value-container {
10 |   padding: 0;
11 | }
12 | 
13 | div.react-select__input-container {
14 |   color: #10b981;
15 |   margin: 0;
16 |   padding: 0;
17 | }
18 | 
19 | input.react-select__input:focus {
20 |   box-shadow: none;
21 | }
22 | 
23 | div.react-select__value-container {
24 |   gap: 2px;
25 | }
26 | 
27 | div.react-select__multi-value {
28 |   background-color: #1e293b;
29 | }
30 | 
31 | div.react-select__multi-value__label {
32 |   color: #cbd5e1;
33 | }
34 | 
35 | div.react-select__multi-value__remove:hover {
36 |   background-color: transparent;
37 | }
38 | 
39 | div.react-select__menu {
40 |   margin: 0;
41 |   background-color: #1e293b;
42 |   border: 1px solid #475569;
43 | }
44 | 
45 | .react-select__option.react-select__option--is-focused {
46 |   background-color: #0f172a;
47 | }
48 | 


--------------------------------------------------------------------------------
/app/lib/comp.ts:
--------------------------------------------------------------------------------
  1 | import { useState } from "react";
  2 | 
  3 | const baseData = [
  4 |   {
  5 |     year: "1",
  6 |     base: 0,
  7 |     bonus: 0,
  8 |     stock: 0,
  9 |   },
 10 |   {
 11 |     year: "2",
 12 |     base: 0,
 13 |     bonus: 0,
 14 |     stock: 0,
 15 |   },
 16 |   {
 17 |     year: "3",
 18 |     base: 0,
 19 |     bonus: 0,
 20 |     stock: 0,
 21 |   },
 22 |   {
 23 |     year: "4",
 24 |     base: 0,
 25 |     bonus: 0,
 26 |     stock: 0,
 27 |   },
 28 | ];
 29 | 
 30 | export type BaseDataType = typeof baseData;
 31 | 
 32 | const calculateBase = (base = "0") => {
 33 |   return parseFloat(base || "0");
 34 | };
 35 | 
 36 | const calculateBonus = (year = "1", signOnBonus = "0", targetBonus = "0") => {
 37 |   if (year === "1")
 38 |     return parseFloat(signOnBonus || "0") + parseFloat(targetBonus || "0");
 39 |   return parseFloat(targetBonus || "0");
 40 | };
 41 | 
 42 | const calculateStocks = (shares = "0", strikePrice = "0", shareValue = "0") => {
 43 |   const total =
 44 |     parseFloat(shares || "0") * parseFloat(shareValue || "0") -
 45 |     parseFloat(shares || "0") * parseFloat(strikePrice || "0");
 46 |   return total > 0 ? total : 0;
 47 | };
 48 | 
 49 | const compoundInterest = (
 50 |   principle: number = 0,
 51 |   rate: number = 0,
 52 |   time: number = 1,
 53 |   n: number = 1
 54 | ) => {
 55 |   const amount = principle * Math.pow(1 + rate / n, n * time);
 56 |   const interest = amount - principle;
 57 |   return interest;
 58 | };
 59 | 
 60 | const calculateShareValueFromMultiple = (
 61 |   preferredSharePrice = "0",
 62 |   multiple = "0",
 63 |   calcTotal = true,
 64 |   year = "1"
 65 | ) => {
 66 |   const price = parseFloat(preferredSharePrice || "0");
 67 |   const rate = parseFloat(multiple || "0");
 68 | 
 69 |   if (calcTotal) return (price * rate || 1).toFixed(2);
 70 | 
 71 |   const interest = compoundInterest(price, rate / 100, parseInt(year));
 72 |   return (price + interest).toFixed(2);
 73 | };
 74 | 
 75 | const calculateShareValueFromRevenue = (
 76 |   sharesOutstanding = "0",
 77 |   expectedRevenue = "0",
 78 |   revenueMultiple = "0"
 79 | ) => {
 80 |   const valuation =
 81 |     parseFloat(expectedRevenue || "0") * parseFloat(revenueMultiple || "0");
 82 |   const shareValue = valuation / parseInt(sharesOutstanding || "1");
 83 | 
 84 |   return shareValue.toFixed(2);
 85 | };
 86 | 
 87 | export const useCompHooks = () => {
 88 |   const [data, setData] = useState(baseData);
 89 | 
 90 |   // cash comp
 91 |   const [base, setBase] = useState("");
 92 |   const [signOnBonus, setSignOnBonus] = useState("");
 93 |   const [targetBonus, setTargetBonus] = useState("");
 94 | 
 95 |   // stock info
 96 |   const [shareType, setShareType] = useState("iso");
 97 |   const [iso, setIso] = useState("");
 98 |   const [strikePrice, setStrikePrice] = useState("");
 99 |   const [rsu, setRsu] = useState("");
100 | 
101 |   // stock comp
102 |   const [shareCalcType, setShareCalcType] = useState("current");
103 |   // common
104 |   const [preferredSharePrice, setPreferredSharePrice] = useState("");
105 |   const [expectedGrowthMultiple, setExpectedGrowthMultiple] = useState("");
106 |   // revenue
107 |   const [sharesOutstanding, setSharesOutstanding] = useState("");
108 |   const [expectedRevenue, setExpectedRevenue] = useState("");
109 |   const [revenueMultiple, setRevenueMultiple] = useState("");
110 | 
111 |   const updateData = () => {
112 |     setData((prevData) =>
113 |       prevData.map((d) => {
114 |         const sv =
115 |           shareCalcType === "current"
116 |             ? calculateShareValueFromMultiple(
117 |                 preferredSharePrice,
118 |                 expectedGrowthMultiple,
119 |                 shareType === "iso",
120 |                 d.year
121 |               )
122 |             : calculateShareValueFromRevenue(
123 |                 sharesOutstanding,
124 |                 expectedRevenue,
125 |                 revenueMultiple
126 |               );
127 | 
128 |         return {
129 |           ...d,
130 |           base: calculateBase(base),
131 |           bonus: calculateBonus(d.year, signOnBonus, targetBonus),
132 |           stock:
133 |             shareType === "iso"
134 |               ? calculateStocks(iso, strikePrice, sv)
135 |               : calculateStocks(rsu, "0", sv),
136 |         };
137 |       })
138 |     );
139 |   };
140 | 
141 |   return {
142 |     data,
143 |     updateData,
144 |     base,
145 |     setBase,
146 |     signOnBonus,
147 |     setSignOnBonus,
148 |     targetBonus,
149 |     setTargetBonus,
150 | 
151 |     shareType,
152 |     setShareType,
153 | 
154 |     iso,
155 |     setIso,
156 |     rsu,
157 |     setRsu,
158 |     strikePrice,
159 |     setStrikePrice,
160 | 
161 |     shareCalcType,
162 |     setShareCalcType,
163 | 
164 |     preferredSharePrice,
165 |     setPreferredSharePrice,
166 |     expectedGrowthMultiple,
167 |     setExpectedGrowthMultiple,
168 | 
169 |     sharesOutstanding,
170 |     setSharesOutstanding,
171 |     expectedRevenue,
172 |     setExpectedRevenue,
173 |     revenueMultiple,
174 |     setRevenueMultiple,
175 |   };
176 | };
177 | 
178 | export type CompHooksType = ReturnType<typeof useCompHooks>;
179 | 


--------------------------------------------------------------------------------
/app/lib/formProps.ts:
--------------------------------------------------------------------------------
 1 | export const staticInputFormatProps = {
 2 |   displayType: "input" as "input",
 3 |   thousandSeparator: true,
 4 |   isNumericString: true,
 5 |   allowNegative: false,
 6 | };
 7 | 
 8 | export const staticTextFormatProps = {
 9 |   decimalSeparator: ".",
10 |   displayType: "text" as "text",
11 |   thousandSeparator: true,
12 |   isNumericString: true,
13 |   allowNegative: false,
14 |   decimalScale: 2,
15 |   fixedDecimalScale: true,
16 | };
17 | 
18 | export const currencyInputFormatProps = {
19 |   prefix: "$",
20 |   decimalSeparator: ".",
21 |   displayType: "input" as "input",
22 |   thousandSeparator: true,
23 |   isNumericString: true,
24 |   allowNegative: false,
25 | };
26 | 
27 | export const currencyTextFormatProps = {
28 |   prefix: "$",
29 |   decimalSeparator: ".",
30 |   displayType: "text" as "text",
31 |   thousandSeparator: true,
32 |   isNumericString: true,
33 |   allowNegative: false,
34 |   decimalScale: 2,
35 |   fixedDecimalScale: true,
36 | };
37 | 


--------------------------------------------------------------------------------
/app/root.tsx:
--------------------------------------------------------------------------------
 1 | import type { LinksFunction, MetaFunction } from "@remix-run/cloudflare";
 2 | import {
 3 |   Links,
 4 |   LiveReload,
 5 |   Meta,
 6 |   Outlet,
 7 |   Scripts,
 8 |   ScrollRestoration,
 9 | } from "@remix-run/react";
10 | import styles from "./tailwind.css";
11 | import global from "./global.css";
12 | 
13 | export const meta: MetaFunction = () => ({
14 |   title: "Total Compensation Calculator",
15 |   charset: "utf-8",
16 |   viewport: "width=device-width,initial-scale=1",
17 |   "msapplication-TileColor": "#da532c",
18 |   "msapplication-config": "/favicon/browserconfig.xml",
19 |   "theme-color": "#ffffff",
20 | });
21 | 
22 | export const links: LinksFunction = () => [
23 |   { rel: "stylesheet", href: styles },
24 |   { rel: "stylesheet", href: global },
25 |   {
26 |     rel: "apple-touch-icon",
27 |     sizes: "180x180",
28 |     href: "/favicon/apple-touch-icon.png",
29 |   },
30 |   {
31 |     rel: "icon",
32 |     type: "image/png",
33 |     sizes: "32x32",
34 |     href: "/favicon/favicon-32x32.png",
35 |   },
36 |   {
37 |     rel: "icon",
38 |     type: "image/png",
39 |     sizes: "16x16",
40 |     href: "/favicon/favicon-16x16.png",
41 |   },
42 |   { rel: "manifest", href: "/favicon/site.webmanifest" },
43 |   {
44 |     rel: "mask-icon",
45 |     href: "/favicon/safari-pinned-tab.svg",
46 |     color: "#555555",
47 |   },
48 |   { rel: "shortcut icon", href: "/favicon/favicon.ico" },
49 |   { rel: "canonical", href: "https://tc.kyh.io" },
50 | ];
51 | 
52 | export default function App() {
53 |   return (
54 |     <html lang="en">
55 |       <head>
56 |         <Meta />
57 |         <Links />
58 |       </head>
59 |       <body className="bg-slate-900 text-white bg-gradient-to-br from-slate-800 via-slate-900 to-black">
60 |         <Outlet />
61 |         <ScrollRestoration />
62 |         <Scripts />
63 |         <LiveReload />
64 |         <script
65 |           defer
66 |           src="https://static.cloudflareinsights.com/beacon.min.js"
67 |           data-cf-beacon='{"token": "bf6b3130589941b59b2adc056e1ad215"}'
68 |         />
69 |       </body>
70 |     </html>
71 |   );
72 | }
73 | 


--------------------------------------------------------------------------------
/app/routes/api/search.tsx:
--------------------------------------------------------------------------------
 1 | import { json } from "@remix-run/cloudflare";
 2 | import type { LoaderFunction } from "@remix-run/cloudflare";
 3 | 
 4 | export const loader: LoaderFunction = async ({ request, context }) => {
 5 |   const baseUrl = context.env.IEX_URL;
 6 |   const iexToken = context.env.IEX_PUBLISHABLE_KEY;
 7 |   const proxyToken = context.env.PROXY_API_KEY;
 8 | 
 9 |   const url = new URL(request.url);
10 |   const fragment = url.searchParams.get("q");
11 | 
12 |   if (!fragment) return json([]);
13 | 
14 |   const response = await fetch(
15 |     `${baseUrl}/search/${fragment}?token=${iexToken}`,
16 |     {
17 |       headers: { "proxy-apiKey": proxyToken },
18 |     }
19 |   );
20 |   const data: Record<string, string>[] = await response.json();
21 | 
22 |   const formatted = data.map((d) => ({ ...d, label: d.name, value: d.symbol }));
23 | 
24 |   return json(formatted);
25 | };
26 | 


--------------------------------------------------------------------------------
/app/routes/api/stock.tsx:
--------------------------------------------------------------------------------
 1 | import { json } from "@remix-run/cloudflare";
 2 | import type { LoaderFunction } from "@remix-run/cloudflare";
 3 | 
 4 | export const loader: LoaderFunction = async ({ request, context }) => {
 5 |   const baseUrl = context.env.IEX_URL;
 6 |   const iexToken = context.env.IEX_PUBLISHABLE_KEY;
 7 |   const proxyToken = context.env.PROXY_API_KEY;
 8 | 
 9 |   const url = new URL(request.url);
10 |   const fragment = url.searchParams.get("s");
11 | 
12 |   if (!fragment) return json([]);
13 | 
14 |   const queries = fragment.split(",");
15 |   const promises = queries.map((q) =>
16 |     fetch(`${baseUrl}/stock/${q}/advanced-stats?token=${iexToken}`, {
17 |       headers: { "proxy-apiKey": proxyToken },
18 |     })
19 |       .then((r) => r.json())
20 |       .catch(() => ({}))
21 |   );
22 | 
23 |   const data: unknown[] = await Promise.all(promises);
24 | 
25 |   return json(data);
26 | };
27 | 


--------------------------------------------------------------------------------
/app/routes/index.tsx:
--------------------------------------------------------------------------------
 1 | import NumberFormat from "react-number-format";
 2 | import ParentSize from "@visx/responsive/lib/components/ParentSize";
 3 | import { Navigation } from "~/components/Navigation";
 4 | import { CompTable } from "~/components/CompTable";
 5 | import { CompForm } from "~/components/CompForm";
 6 | import Chart from "~/components/Chart";
 7 | import { useCompHooks } from "~/lib/comp";
 8 | import { currencyTextFormatProps } from "~/lib/formProps";
 9 | 
10 | export default function Index() {
11 |   const comp = useCompHooks();
12 |   const totalTc = comp.data.reduce<number>(
13 |     (acc, curr) => acc + curr.base + curr.bonus + curr.stock,
14 |     0
15 |   );
16 |   const avgTc = totalTc / comp.data.length;
17 | 
18 |   return (
19 |     <>
20 |       <Navigation />
21 |       <main className="relative max-w-7xl mx-auto mb-20 md:grid md:grid-cols-5">
22 |         <section className="md:col-span-2 px-8 -ml-5">
23 |           <div className="title-section">
24 |             <h1 className="text-2xl font-bold tracking-tight">
25 |               A layman's Total Compensation Calculator
26 |             </h1>
27 |             <p className="mt-3 text-slate-300">
28 |               Understand your total compensation under current market
29 |               conditions.
30 |             </p>
31 |           </div>
32 |           <div className="mt-10">
33 |             <CompForm comp={comp} />
34 |           </div>
35 |         </section>
36 |         <section
37 |           className={`py-10 md:col-span-3 md:px-20 md:py-0 sticky top-5 md:h-screen overflow-y-auto overflow-x-hidden transition-opacity ${
38 |             avgTc ? "opacity-100" : "opacity-30 pointer-events-none"
39 |           }`}
40 |         >
41 |           <p className="text-sm text-slate-400 px-3 md:px-0">
42 |             Estimated Total Compensation
43 |           </p>
44 |           <div className="flex justify-between items-center mt-1 px-3 md:px-0">
45 |             <div>
46 |               <NumberFormat
47 |                 className="text-3xl font-bold tracking-tight"
48 |                 value={avgTc}
49 |                 {...currencyTextFormatProps}
50 |               />
51 |               {!!avgTc && (
52 |                 <span className="text-xs ml-1 text-slate-400">(per year)</span>
53 |               )}
54 |             </div>
55 |           </div>
56 |           <ParentSize
57 |             className="mt-10"
58 |             parentSizeStyles={{ height: "auto", width: "100%" }}
59 |           >
60 |             {({ width }) => (
61 |               <Chart width={width} height={400} data={comp.data} />
62 |             )}
63 |           </ParentSize>
64 |           <div className="relative w-full -mt-8 overflow-x-auto">
65 |             <CompTable data={comp.data} />
66 |           </div>
67 |         </section>
68 |       </main>
69 |       <a
70 |         href="https://www.producthunt.com/posts/total-compensation-calculator?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-total&#0045;compensation&#0045;calculator"
71 |         target="_blank"
72 |         rel="noopener noreferrer"
73 |       >
74 |         <img
75 |           src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=347810&theme=dark"
76 |           alt="Total&#0032;Compensation&#0032;Calculator - Your&#0032;total&#0032;compensation&#0032;under&#0032;current&#0032;market&#0032;conditions | Product Hunt"
77 |           width="250"
78 |           height="54"
79 |           style={{ position: "fixed", bottom: 20, right: 20 }}
80 |         />
81 |       </a>
82 |     </>
83 |   );
84 | }
85 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "tc",
 3 |   "private": true,
 4 |   "description": "A laymans total compensation calculator",
 5 |   "license": "MIT",
 6 |   "sideEffects": false,
 7 |   "scripts": {
 8 |     "build": "npm run build:css && npm run build:remix",
 9 |     "build:css": "npm run generate:css -- --minify",
10 |     "build:remix": "remix build",
11 |     "dev": "remix build && run-p dev:*",
12 |     "dev:css": "npm run generate:css -- --watch",
13 |     "dev:remix": "remix watch",
14 |     "dev:wrangler": "cross-env NODE_ENV=development node ./scripts/dev-wrangler.mjs",
15 |     "generate:css": "npx tailwindcss -o ./app/tailwind.css",
16 |     "start": "cross-env NODE_ENV=production npm run dev:wrangler"
17 |   },
18 |   "dependencies": {
19 |     "@headlessui/react": "^1.5.0",
20 |     "@remix-run/cloudflare": "^1.3.4",
21 |     "@remix-run/cloudflare-pages": "^1.3.4",
22 |     "@remix-run/react": "^1.3.4",
23 |     "@visx/axis": "^2.6.0",
24 |     "@visx/event": "^2.6.0",
25 |     "@visx/grid": "^2.6.0",
26 |     "@visx/group": "^2.1.0",
27 |     "@visx/responsive": "^2.8.0",
28 |     "@visx/scale": "^2.2.2",
29 |     "@visx/shape": "^2.4.0",
30 |     "@visx/tooltip": "^2.8.0",
31 |     "cross-env": "^7.0.3",
32 |     "react": "^18.1.0",
33 |     "react-dom": "^18.1.0",
34 |     "react-joyride": "^2.4.0",
35 |     "react-number-format": "^4.9.1",
36 |     "react-portal": "^4.2.2",
37 |     "react-select": "^5.3.2",
38 |     "use-debounce": "^8.0.1"
39 |   },
40 |   "devDependencies": {
41 |     "@cloudflare/workers-types": "^3.10.0",
42 |     "@remix-run/dev": "^1.3.4",
43 |     "@remix-run/eslint-config": "^1.3.4",
44 |     "@tailwindcss/forms": "^0.5.0",
45 |     "@types/react": "^18.0.9",
46 |     "@types/react-dom": "^18.0.4",
47 |     "@types/react-portal": "^4.0.4",
48 |     "eslint": "^8.15.0",
49 |     "npm-run-all": "^4.1.5",
50 |     "tailwindcss": "^3.0.23",
51 |     "typescript": "^4.5.5",
52 |     "wrangler": "beta"
53 |   },
54 |   "engines": {
55 |     "node": ">=14"
56 |   }
57 | }
58 | 


--------------------------------------------------------------------------------
/public/_headers:
--------------------------------------------------------------------------------
1 | /build/*
2 |   Cache-Control: public, max-age=31536000, s-maxage=31536000
3 | 


--------------------------------------------------------------------------------
/public/favicon/android-chrome-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kyh/tc/cd96d50dd71c06908853f171a1c8e72cafd596b0/public/favicon/android-chrome-192x192.png


--------------------------------------------------------------------------------
/public/favicon/android-chrome-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kyh/tc/cd96d50dd71c06908853f171a1c8e72cafd596b0/public/favicon/android-chrome-512x512.png


--------------------------------------------------------------------------------
/public/favicon/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kyh/tc/cd96d50dd71c06908853f171a1c8e72cafd596b0/public/favicon/apple-touch-icon.png


--------------------------------------------------------------------------------
/public/favicon/browserconfig.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <browserconfig>
 3 |     <msapplication>
 4 |         <tile>
 5 |             <square150x150logo src="favicon/mstile-150x150.png"/>
 6 |             <TileColor>#da532c</TileColor>
 7 |         </tile>
 8 |     </msapplication>
 9 | </browserconfig>
10 | 


--------------------------------------------------------------------------------
/public/favicon/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kyh/tc/cd96d50dd71c06908853f171a1c8e72cafd596b0/public/favicon/favicon-16x16.png


--------------------------------------------------------------------------------
/public/favicon/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kyh/tc/cd96d50dd71c06908853f171a1c8e72cafd596b0/public/favicon/favicon-32x32.png


--------------------------------------------------------------------------------
/public/favicon/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kyh/tc/cd96d50dd71c06908853f171a1c8e72cafd596b0/public/favicon/favicon.ico


--------------------------------------------------------------------------------
/public/favicon/mstile-144x144.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kyh/tc/cd96d50dd71c06908853f171a1c8e72cafd596b0/public/favicon/mstile-144x144.png


--------------------------------------------------------------------------------
/public/favicon/mstile-150x150.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kyh/tc/cd96d50dd71c06908853f171a1c8e72cafd596b0/public/favicon/mstile-150x150.png


--------------------------------------------------------------------------------
/public/favicon/mstile-310x150.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kyh/tc/cd96d50dd71c06908853f171a1c8e72cafd596b0/public/favicon/mstile-310x150.png


--------------------------------------------------------------------------------
/public/favicon/mstile-310x310.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kyh/tc/cd96d50dd71c06908853f171a1c8e72cafd596b0/public/favicon/mstile-310x310.png


--------------------------------------------------------------------------------
/public/favicon/mstile-70x70.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kyh/tc/cd96d50dd71c06908853f171a1c8e72cafd596b0/public/favicon/mstile-70x70.png


--------------------------------------------------------------------------------
/public/favicon/safari-pinned-tab.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" standalone="no"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
 3 |  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
 4 | <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 5 |  width="700.000000pt" height="700.000000pt" viewBox="0 0 700.000000 700.000000"
 6 |  preserveAspectRatio="xMidYMid meet">
 7 | <metadata>
 8 | Created by potrace 1.14, written by Peter Selinger 2001-2017
 9 | </metadata>
10 | <g transform="translate(0.000000,700.000000) scale(0.100000,-0.100000)"
11 | fill="#000000" stroke="none">
12 | <path d="M1045 6985 c-134 -21 -234 -53 -360 -115 -257 -127 -442 -314 -565
13 | -573 -56 -117 -84 -211 -105 -347 -22 -143 -22 -4757 0 -4900 40 -261 152
14 | -491 329 -673 140 -146 355 -276 536 -327 187 -52 88 -50 2620 -50 2532 0
15 | 2434 -2 2620 50 99 28 261 106 356 172 92 63 210 178 282 273 66 87 164 285
16 | 192 385 52 188 50 89 50 2620 0 2532 2 2434 -50 2620 -28 99 -106 261 -172
17 | 357 -68 99 -202 233 -301 301 -96 66 -258 144 -357 172 -187 52 -86 50 -2630
18 | 49 -1847 -1 -2383 -4 -2445 -14z m3354 -1709 c484 -281 881 -513 881 -516 0
19 | -4 -84 -59 -187 -122 -104 -64 -377 -231 -608 -373 -231 -142 -581 -357 -777
20 | -477 l-358 -220 0 -915 c0 -860 1 -915 17 -909 20 8 1515 890 1556 918 l27 19
21 | 0 241 c0 132 -4 238 -8 236 -5 -1 -265 -162 -580 -356 -314 -194 -578 -355
22 | -587 -358 -13 -6 -15 42 -15 444 l0 450 842 498 c463 275 847 500 853 502 10
23 | 2 14 -167 19 -750 4 -414 6 -861 4 -993 l-3 -240 -240 -141 c-1313 -772 -1718
24 | -1006 -1735 -1001 -19 5 -804 455 -852 489 l-28 19 0 1139 0 1140 546 326
25 | c300 179 554 328 563 331 9 2 110 -46 223 -106 114 -61 211 -111 215 -111 17
26 | 1 326 185 326 195 0 6 -325 204 -722 441 -397 237 -726 435 -731 440 -13 13
27 | 427 274 456 271 12 -1 418 -231 903 -511z m-1415 -141 c157 -99 286 -184 286
28 | -190 0 -5 -253 -163 -563 -350 l-562 -340 -3 -1122 c-1 -711 -6 -1123 -12
29 | -1123 -14 0 -604 340 -612 354 -4 6 -8 518 -8 1137 0 1059 1 1128 18 1147 25
30 | 29 1134 673 1154 670 9 -2 145 -84 302 -183z"/>
31 | </g>
32 | </svg>
33 | 


--------------------------------------------------------------------------------
/public/favicon/site.webmanifest:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "",
 3 |     "short_name": "",
 4 |     "icons": [
 5 |         {
 6 |             "src": "/favicon/android-chrome-192x192.png",
 7 |             "sizes": "192x192",
 8 |             "type": "image/png"
 9 |         },
10 |         {
11 |             "src": "/favicon/android-chrome-512x512.png",
12 |             "sizes": "512x512",
13 |             "type": "image/png"
14 |         }
15 |     ],
16 |     "theme_color": "#ffffff",
17 |     "background_color": "#ffffff",
18 |     "display": "standalone"
19 | }
20 | 


--------------------------------------------------------------------------------
/remix.config.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @type {import('@remix-run/dev').AppConfig}
 3 |  */
 4 | module.exports = {
 5 |   serverBuildTarget: "cloudflare-pages",
 6 |   server: "./server.js",
 7 |   devServerBroadcastDelay: 1000,
 8 |   ignoredRouteFiles: [".*"],
 9 |   // appDirectory: "app",
10 |   // assetsBuildDirectory: "public/build",
11 |   // serverBuildPath: "functions/[[path]].js",
12 |   // publicPath: "/build/",
13 | };
14 | 


--------------------------------------------------------------------------------
/remix.env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="@remix-run/dev" />
2 | /// <reference types="@remix-run/cloudflare-pages/globals" />
3 | /// <reference types="@cloudflare/workers-types" />
4 | 


--------------------------------------------------------------------------------
/scripts/dev-wrangler.mjs:
--------------------------------------------------------------------------------
 1 | import "dotenv/config";
 2 | import { spawn } from "child_process";
 3 | 
 4 | const child = spawn(
 5 |   "wrangler",
 6 |   [
 7 |     "pages",
 8 |     "dev",
 9 |     "./public",
10 |     "--kv",
11 |     "PROXY",
12 |     "--binding",
13 |     ...Object.keys(process.env).map((k) => `${k}=${process.env[k]}`),
14 |   ],
15 |   { stdio: "inherit" }
16 | );
17 | 
18 | process.on("SIGTERM", () => {
19 |   child.kill();
20 | });
21 | 


--------------------------------------------------------------------------------
/server.js:
--------------------------------------------------------------------------------
 1 | import { createPagesFunctionHandler } from "@remix-run/cloudflare-pages";
 2 | import * as build from "@remix-run/dev/server-build";
 3 | 
 4 | const handleRequest = createPagesFunctionHandler({
 5 |   build,
 6 |   mode: process.env.NODE_ENV,
 7 |   getLoadContext: (context) => context,
 8 | });
 9 | 
10 | export function onRequest(context) {
11 |   return handleRequest(context);
12 | }
13 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   content: ["./app/**/*.{ts,tsx,jsx,js}"],
3 |   darkMode: "class",
4 |   theme: {
5 |     extend: {},
6 |   },
7 |   plugins: [require("@tailwindcss/forms")],
8 | };
9 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
 3 |   "compilerOptions": {
 4 |     "lib": ["DOM", "DOM.Iterable", "ES2019"],
 5 |     "isolatedModules": true,
 6 |     "esModuleInterop": true,
 7 |     "jsx": "react-jsx",
 8 |     "moduleResolution": "node",
 9 |     "resolveJsonModule": true,
10 |     "target": "ES2019",
11 |     "strict": true,
12 |     "baseUrl": ".",
13 |     "paths": {
14 |       "~/*": ["./app/*"]
15 |     },
16 |     "noEmit": true,
17 |     "forceConsistentCasingInFileNames": true,
18 |     "allowJs": true
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------