2907 range slider component

frontend/Dockerfile

@@ -7,7 +7,8 @@ WORKDIR /home/app
 
 COPY --chown=app:app ./package.json ./bun.lockb /home/app/
 
-RUN bun install --production --frozen-lockfile
+# RUN bun install --production --frozen-lockfile
+RUN bun install
 
 COPY --chown=app:app index.html /home/app/
 COPY --chown=app:app src /home/app/src

frontend/package.json

@@ -1,111 +1,113 @@
 {
- "name": "opre-ops",
- "version": "1.0.1",
- "license": "CC0-1.0",
- "private": true,
- "type": "module",
- "dependencies": {
- "@azure/storage-blob": "^12.24.0",
- "@fortawesome/fontawesome-svg-core": "6.5.2",
- "@fortawesome/free-regular-svg-icons": "6.5.2",
- "@fortawesome/free-solid-svg-icons": "6.5.2",
- "@fortawesome/react-fontawesome": "0.2.2",
- "@nivo/bar": "0.87.0",
- "@nivo/core": "0.87.0",
- "@nivo/pie": "0.87.0",
- "@reduxjs/toolkit": "2.2.8",
- "@uswds/uswds": "3.9.0",
- "axios": "1.7.7",
- "clsx": "2.1.1",
- "crypto-random-string": "5.0.0",
- "js-cookie": "3.0.5",
- "jwt-decode": "4.0.0",
- "lodash": "4.17.21",
- "react": "18.3.1",
- "react-currency-format": "1.1.0",
- "react-dom": "18.3.1",
- "react-markdown": "9.0.1",
- "react-modal": "3.16.1",
- "react-redux": "9.1.2",
- "react-router-dom": "6.27.0",
- "react-select": "5.8.1",
- "sass": "1.79.6",
- "sass-loader": "14.2.1",
- "vest": "5.4.3",
- "@eslint/compat": "1.2.0",
- "@eslint/js": "9.12.0",
- "@vitejs/plugin-react": "4.3.2",
- "eslint": "9.12.0",
- "eslint-config-prettier": "9.1.0",
- "eslint-plugin-cypress": "4.0.0",
- "eslint-plugin-import": "2.29.1",
- "eslint-plugin-jest": "28.8.3",
- "eslint-plugin-jsx-a11y": "6.10.0",
- "eslint-plugin-prettier": "5.2.1",
- "eslint-plugin-react": "7.37.1",
- "eslint-plugin-react-hooks": "5.0.0",
- "eslint-plugin-react-refresh": "0.4.12",
- "eslint-plugin-testing-library": "6.3.2",
- "jose": "5.9.4",
- "jsdom": "25.0.1",
- "vite": "5.4.9",
- "vite-jsconfig-paths": "2.0.1",
- "vite-plugin-babel-macros": "1.0.6",
- "vite-plugin-eslint": "1.8.1",
- "vite-plugin-svgr": "4.2.0"
- },
- "overrides": {
- "rollup": "4.24.0"
- },
- "devDependencies": {
- "@testing-library/jest-dom": "6.5.0",
- "@testing-library/react": "16.0.1",
- "@testing-library/user-event": "14.5.2",
- "@types/testing-library__jest-dom": "6.0.0",
- "@types/testing-library__react": "10.2.0",
- "@vitest/coverage-istanbul": "2.1.3",
- "@vitest/ui": "2.1.3",
- "axe-core": "4.10.1",
- "cypress": "13.13.3",
- "cypress-axe": "1.5.0",
- "cypress-localstorage-commands": "2.2.6",
- "globals": "15.9.0",
- "history": "5.3.0",
- "msw": "2.3.5",
- "prettier": "3.3.3",
- "redux-mock-store": "1.5.4",
- "@uswds/compile": "1.2.0",
- "vitest": "2.1.3"
- },
- "scripts": {
- "start": "vite",
- "start:debug": "vite --inspect=0.0.0.0:9229",
- "build": "vite build",
- "test": "vitest",
- "test:coverage": "vitest --coverage",
- "test:ui": "vitest --ui --coverage.enabled=true",
- "test:e2e:interactive": "cypress open --config-file ./cypress.config.js",
- "test:e2e": "cypress run --config-file ./cypress.config.js --headless",
- "test:e2e:debug": "DEBUG=cypress:* cypress run --config-file ./cypress.config.js --headless",
- "lint": "eslint './src/**'",
- "cypress:open": "cypress open",
- "uswds:update": "bunx gulp compile"
- },
- "browserslist": {
- "production": [
- ">0.2%",
- "not dead",
- "not op_mini all"
- ],
- "development": [
- "last 1 chrome version",
- "last 1 firefox version",
- "last 1 safari version"
- ]
- },
- "babelMacros": {
- "fontawesome-svg-core": {
- "license": "free"
+ "name": "opre-ops",
+ "version": "1.0.1",
+ "license": "CC0-1.0",
+ "private": true,
+ "type": "module",
+ "dependencies": {
+ "@azure/storage-blob": "12.24.0",
+ "@eslint/compat": "1.2.0",
+ "@eslint/js": "9.12.0",
+ "@fortawesome/fontawesome-svg-core": "6.5.2",
+ "@fortawesome/free-regular-svg-icons": "6.5.2",
+ "@fortawesome/free-solid-svg-icons": "6.5.2",
+ "@fortawesome/react-fontawesome": "0.2.2",
+ "@nivo/bar": "0.87.0",
+ "@nivo/core": "0.87.0",
+ "@nivo/pie": "0.87.0",
+ "@reduxjs/toolkit": "2.2.8",
+ "@uswds/uswds": "3.9.0",
+ "@vitejs/plugin-react": "4.3.2",
+ "axios": "1.7.7",
+ "clsx": "2.1.1",
+ "crypto-random-string": "5.0.0",
+ "eslint": "9.12.0",
+ "eslint-config-prettier": "9.1.0",
+ "eslint-plugin-cypress": "4.0.0",
+ "eslint-plugin-import": "2.29.1",
+ "eslint-plugin-jest": "28.8.3",
+ "eslint-plugin-jsx-a11y": "6.10.0",
+ "eslint-plugin-prettier": "5.2.1",
+ "eslint-plugin-react": "7.37.1",
+ "eslint-plugin-react-hooks": "5.0.0",
+ "eslint-plugin-react-refresh": "0.4.12",
+ "eslint-plugin-testing-library": "6.3.2",
+ "jose": "5.9.4",
+ "js-cookie": "3.0.5",
+ "jsdom": "25.0.1",
+ "jwt-decode": "4.0.0",
+ "lodash": "4.17.21",
+ "react": "18.3.1",
+ "react-currency-format": "1.1.0",
+ "react-dom": "18.3.1",
+ "react-markdown": "9.0.1",
+ "react-modal": "3.16.1",
+ "react-redux": "9.1.2",
+ "react-router-dom": "6.27.0",
+ "react-select": "5.8.1",
+ "react-slider": "2.0.6",
+ "sass": "1.79.6",
+ "sass-loader": "14.2.1",
+ "styled-components": "6.1.13",
+ "vest": "5.4.3",
+ "vite": "5.4.9",
+ "vite-jsconfig-paths": "2.0.1",
+ "vite-plugin-babel-macros": "1.0.6",
+ "vite-plugin-eslint": "1.8.1",
+ "vite-plugin-svgr": "4.2.0"
+ },
+ "overrides": {
+ "rollup": "4.24.0"
+ },
+ "devDependencies": {
+ "@testing-library/jest-dom": "6.5.0",
+ "@testing-library/react": "16.0.1",
+ "@testing-library/user-event": "14.5.2",
+ "@types/testing-library__jest-dom": "6.0.0",
+ "@types/testing-library__react": "10.2.0",
+ "@vitest/coverage-istanbul": "2.1.3",
+ "@vitest/ui": "2.1.3",
+ "axe-core": "4.10.1",
+ "cypress": "13.13.3",
+ "cypress-axe": "1.5.0",
+ "cypress-localstorage-commands": "2.2.6",
+ "globals": "15.9.0",
+ "history": "5.3.0",
+ "msw": "2.3.5",
+ "prettier": "3.3.3",
+ "redux-mock-store": "1.5.4",
+ "@uswds/compile": "1.2.0",
+ "vitest": "2.1.3"
+ },
+ "scripts": {
+ "start": "vite",
+ "start:debug": "vite --inspect=0.0.0.0:9229",
+ "build": "vite build",
+ "test": "vitest",
+ "test:coverage": "vitest --coverage",
+ "test:ui": "vitest --ui --coverage.enabled=true",
+ "test:e2e:interactive": "cypress open --config-file ./cypress.config.js",
+ "test:e2e": "cypress run --config-file ./cypress.config.js --headless",
+ "test:e2e:debug": "DEBUG=cypress:* cypress run --config-file ./cypress.config.js --headless",
+ "lint": "eslint './src/**'",
+ "cypress:open": "cypress open",
+ "uswds:update": "bunx gulp compile"
+ },
+ "browserslist": {
+ "production": [
+ ">0.2%",
+ "not dead",
+ "not op_mini all"
+ ],
+ "development": [
+ "last 1 chrome version",
+ "last 1 firefox version",
+ "last 1 safari version"
+ ]
+ },
+ "babelMacros": {
+ "fontawesome-svg-core": {
+ "license": "free"
+ }
  }
- }
 }

frontend/src/api/opsAPI.js

@@ -24,7 +24,8 @@ export const opsApi = createApi({
  "ServicesComponents",
  "ChangeRequests",
  "Divisions",
- "Documents"
+ "Documents",
+ "Cans"
  ],
  baseQuery: fetchBaseQuery({
  baseUrl: `${BACKEND_DOMAIN}/api/v1/`,

frontend/src/components/CANs/CANFYBudgetRangeSlider/CANFYBudgetRangeSlider.jsx

@@ -0,0 +1,104 @@
+import React from "react";
+import DoubleRangeSlider from "../../UI/DoubleRangeSlider";
+import CurrencyFormat from "react-currency-format";
+/**
+ * @typedef {Object} CANFYBudgetRangeSliderProps
+ * @property {[number, number]} fyBudgetRange - The min and max of the fiscal year budget range
+ * @property {string} [legendClassname] - CSS class for the legend
+ * @property {[number, number]} budget - The current budget range
+ * @property {function([number, number]): void} setBudget - Function to update the budget
+ */
+
+/**
+ * @description CANFYBudgetRangeSlider component
+ * @component
+ * @param {CANFYBudgetRangeSliderProps} props
+ * @returns {JSX.Element} - The CAN FY Budget Range Slider component
+ */
+const CANFYBudgetRangeSlider = ({ fyBudgetRange, legendClassname = "usa-label margin-top-0", budget, setBudget }) => {
+ const [minValue, maxValue] = budget;
+ const [fyBudgetMin, fyBudgetMax] = fyBudgetRange;
+ const [sliderValue, setSliderValue] = React.useState([0, 100]);
+ /**
+ * Calculate percentage of a value within a range
+ * @param {number} value - The value to calculate percentage for
+ * @param {number} min - The minimum value of the range
+ * @param {number} max - The maximum value of the range
+ * @returns {number} The calculated percentage
+ */
+ const calculatePercentage = (value, min, max) => {
+ return ((value - min) / (max - min)) * 100;
+ };
+ /**
+ * Calculate value based on percentage within a range
+ * @param {number} percentage - The percentage to calculate value for
+ * @param {number} min - The minimum value of the range
+ * @param {number} max - The maximum value of the range
+ * @returns {number} The calculated value
+ */
+ const calculateValue = (percentage, min, max) => {
+ return Math.round(min + (percentage / 100) * (max - min));
+ };
+
+ /**
+ * Calculate the new budget range based on slider values
+ * @param {[number, number]} newRange - The new range from the slider
+ */
+ const calculateBudgetRange = (newRange) => {
+ const [minPercentage, maxPercentage] = newRange;
+ const selectedMinFYBudget = calculateValue(minPercentage, fyBudgetMin, fyBudgetMax);
+ const selectedMaxFYBudget = calculateValue(maxPercentage, fyBudgetMin, fyBudgetMax);
+
+ setBudget([selectedMinFYBudget, selectedMaxFYBudget]);
+ setSliderValue(newRange);
+ };
+
+ React.useEffect(() => {
+ const minPercentage = calculatePercentage(minValue, fyBudgetMin, fyBudgetMax);
+ const maxPercentage = calculatePercentage(maxValue, fyBudgetMin, fyBudgetMax);
+
+ setSliderValue([minPercentage, maxPercentage]);
+ }, [budget, fyBudgetRange]);
+
+ return (
+ <>
+ <div className="display-flex flex-justify">
+ <label
+ className={legendClassname}
+ htmlFor="can-FY-budgey-combobox-input"
+ >
+ FY Budget
+ </label>
+ </div>
+ <div className="padding-right-10">
+ <DoubleRangeSlider
+ handleChange={calculateBudgetRange}
+ defaultValue={[0, 100]}
+ value={sliderValue}
+ />
+ </div>
+
+ <div className="margin-top-1 display-flex flex-justify-center font-12px padding-right-10">
+ <span>
+ <CurrencyFormat
+ value={minValue}
+ decimalScale={2}
+ thousandSeparator={true}
+ displayType="text"
+ prefix={"$ "}
+ />
+ <span> - </span>
+ <CurrencyFormat
+ value={maxValue}
+ decimalScale={2}
+ thousandSeparator={true}
+ displayType="text"
+ prefix={"$ "}
+ />
+ </span>
+ </div>
+ </>
+ );
+};
+
+export default CANFYBudgetRangeSlider;

frontend/src/components/CANs/CANFYBudgetRangeSlider/index.js

@@ -0,0 +1 @@
+export { default } from "./CANFYBudgetRangeSlider.jsx";

frontend/src/components/CANs/CANTable/CANTable.jsx

@@ -16,15 +16,10 @@ import styles from "./style.module.css";
  * @returns {JSX.Element}
  */
 const CANTable = ({ cans, fiscalYear }) => {
- // Filter CANs by fiscal year
- const filteredCANsByFiscalYear = React.useMemo(() => {
- if (!fiscalYear) return cans;
- return cans.filter((can) => can.funding_details.fiscal_year === fiscalYear);
- }, [cans, fiscalYear]);
  // TODO: once in prod, change this to 25
  const CANS_PER_PAGE = 10;
  const [currentPage, setCurrentPage] = React.useState(1);
- let cansPerPage = [...filteredCANsByFiscalYear];
+ let cansPerPage = [...cans];
  cansPerPage = cansPerPage.slice((currentPage - 1) * CANS_PER_PAGE, currentPage * CANS_PER_PAGE);
 
  if (cansPerPage.length === 0) {
@@ -52,7 +47,7 @@ const CANTable = ({ cans, fiscalYear }) => {
  ))}
  </tbody>
  </table>
- {filteredCANsByFiscalYear.length > CANS_PER_PAGE && (
+ {cans.length > CANS_PER_PAGE && (
  <PaginationNav
  currentPage={currentPage}
  setCurrentPage={setCurrentPage}