Merge branch 'main' into julee/webscraping-fixes

calblueprint · Dec 31, 2024 · 3d629d3 · 3d629d3
2 parents c5ac89d + b973748
commit 3d629d3
Show file tree

Hide file tree

Showing 18 changed files with 646 additions and 157 deletions.
diff --git a/assets/KDM-Icons/icons.tsx b/assets/KDM-Icons/icons.tsx
@@ -1,14 +1,19 @@
-export const CheckmarkIcon = () => (
+import COLORS from '@/styles/colors';
+
+export const CheckmarkIcon = (props: {
+  width: string | undefined;
+  height: string | undefined;
+}) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    width="8"
-    height="7"
+    width={props.width}
+    height={props.height}
     viewBox="0 0 8 7"
     fill="none"
   >
     <path
-      d="M7.66153 6.5C7.66153 6.77614 7.43768 7 7.16153 7H1.26923C0.993084 7 0.769226 6.77614 0.769226 6.5C0.769226 6.22386 0.993084 6 1.26923 6H7.16153C7.43768 6 7.66153 6.22386 7.66153 6.5ZM4.23064 3.6945C3.68095 4.25278 2.78058 4.25278 2.23088 3.6945L1.60357 3.05738C1.41381 2.86466 1.41381 2.55534 1.60357 2.36262C1.79726 2.1659 2.11443 2.1656 2.3085 2.36194L2.59323 2.65C2.94392 3.0048 3.51705 3.00425 3.86705 2.64877L6.12011 0.360506C6.31505 0.162524 6.63452 0.163088 6.82876 0.361758C7.01783 0.55515 7.01729 0.864315 6.82753 1.05704L4.23064 3.6945Z"
-      fill="#ABBFF0"
+      d="M7.48145 7H0.481445V6H7.48145V7ZM2.98145 4.71L0.981445 2.71L1.68645 2.005L2.98145 3.295L6.27645 0L6.98145 0.71L2.98145 4.71Z"
+      fill={COLORS.electricBlue}
     />
   </svg>
 );
@@ -27,3 +32,33 @@ export const DotDotDotIcon = () => (
     />
   </svg>
 );
+
+export const OpenIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="10"
+    height="7"
+    viewBox="0 0 10 7"
+    fill="none"
+  >
+    <path
+      d="M4.98157 6.16104L9.83813 1.62824L8.69631 0.561035L4.98157 4.0304L1.26763 0.561035L0.125 1.62749L4.98157 6.16104Z"
+      fill="#949AA9"
+    />
+  </svg>
+);
+
+export const CloseIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="10"
+    height="7"
+    viewBox="0 0 10 7"
+    fill="none"
+  >
+    <path
+      d="M5.00012 0.561011L9.85669 5.09381L8.71487 6.16101L5.00012 2.69165L1.28618 6.16101L0.143555 5.09456L5.00012 0.561011Z"
+      fill="#949AA9"
+    />
+  </svg>
+);
diff --git a/assets/Project-Modal-Tag-Icons/icons.tsx b/assets/Project-Modal-Tag-Icons/icons.tsx
@@ -0,0 +1,44 @@
+export const UtilityIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="10"
+    height="10"
+    viewBox="0 0 10 10"
+    fill="none"
+  >
+    <path
+      d="M8.9507 3.11972C9.28873 3.45775 9.28873 4.00704 8.9507 4.30282L7.76761 5.48592L4.47183 2.19014L5.65493 1.00704C5.99296 0.669014 6.54225 0.669014 6.83803 1.00704L7.59859 1.76761L8.8662 0.5L9.45775 1.09155L8.19014 2.35915L8.9507 3.11972ZM6.5 5.57042L5.90845 4.97887L4.72535 6.16197L3.83803 5.27465L5.02113 4.09155L4.42958 3.5L3.24648 4.6831L2.61268 4.09155L1.42958 5.27465C1.09155 5.61268 1.09155 6.16197 1.42958 6.45775L2.19014 7.21831L0.5 8.90845L1.09155 9.5L2.78169 7.80986L3.54225 8.57042C3.88028 8.90845 4.42958 8.90845 4.72535 8.57042L5.90845 7.38732L5.3169 6.79577L6.5 5.57042Z"
+      fill="#4974E0"
+    />
+  </svg>
+);
+
+export const ProjectSizeIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="7"
+    height="10"
+    viewBox="0 0 7 10"
+    fill="none"
+  >
+    <path
+      d="M4.78571 9.5H2.21429V8.6H4.78571V9.5ZM4.78571 8.15H2.21429L2.11871 7.25C2.0673 6.95231 1.98227 6.66211 1.86543 6.38555C1.71371 6.16055 1.55557 5.9684 1.40257 5.78075C0.840335 5.22739 0.514851 4.459 0.5 3.65C0.5 1.9103 1.84315 0.5 3.5 0.5C5.15685 0.5 6.5 1.9103 6.5 3.65C6.48256 4.45406 6.15958 5.2174 5.603 5.76995L5.59571 5.77895C5.44314 5.9666 5.28543 6.161 5.13671 6.38375C5.01998 6.66105 4.93468 6.95179 4.88257 7.25L4.78571 8.15ZM3.5 1.4C2.31712 1.40149 1.35856 2.40798 1.35714 3.65C1.35714 4.3448 1.63314 4.68185 2.05057 5.1926C2.20914 5.387 2.38914 5.6066 2.56486 5.86355C2.7781 6.29862 2.92379 6.76667 2.99643 7.25H4.004C4.07851 6.76807 4.22396 6.30124 4.43514 5.86625C4.60657 5.6093 4.78614 5.38835 4.94429 5.19395L4.95071 5.18585C5.36729 4.67285 5.64286 4.334 5.64286 3.65C5.64144 2.40798 4.68288 1.40149 3.5 1.4Z"
+      fill="#4974E0"
+    />
+  </svg>
+);
+
+export const LastUpdatedIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="9"
+    height="9"
+    viewBox="0 0 9 9"
+    fill="none"
+  >
+    <path
+      d="M0.5 8.49998V5H3.99997L2.39148 6.60998C2.94646 7.17749 3.7062 7.49818 4.49996 7.49997C5.76967 7.4981 6.9007 6.69709 7.32394 5.49999H7.33293C7.3902 5.3373 7.43353 5.17003 7.46243 5H8.46842C8.21646 6.99993 6.5157 8.4999 4.49996 8.49998H4.49496C3.43435 8.50313 2.41656 8.08183 1.66849 7.32998L0.5 8.49998ZM1.53699 4.00001H0.531C0.782872 2.00083 2.48248 0.501112 4.49746 0.50002H4.49996C5.56077 0.496626 6.5788 0.917957 7.32693 1.67003L8.49992 0.50002V4.00001H4.99996L6.61094 2.39002C6.05539 1.82185 5.2946 1.5011 4.49996 1.50003C3.23025 1.50191 2.09923 2.30291 1.67599 3.50001H1.66699C1.60927 3.66256 1.56593 3.82987 1.53749 4.00001H1.53699Z"
+      fill="#4974E0"
+    />
+  </svg>
+);
diff --git a/components/DefaultTag/index.tsx b/components/DefaultTag/index.tsx
@@ -0,0 +1,77 @@
+import {
+  LastUpdatedIcon,
+  ProjectSizeIcon,
+  UtilityIcon,
+} from '@/assets/Project-Modal-Tag-Icons/icons';
+import COLORS from '@/styles/colors';
+import { TagText1 } from '../../styles/texts';
+import { DefaultTagStyles } from './styles';
+
+export default function DefaultTag({
+  content,
+  icon_category,
+  size,
+}: {
+  content: string | undefined;
+  icon_category: string;
+  size: number | undefined;
+}) {
+  const categories: { [key: string]: JSX.Element } = {
+    'Utility Service Territory': <UtilityIcon />,
+    'Project Size': <ProjectSizeIcon />,
+    'Last Updated': <LastUpdatedIcon />,
+  };
+
+  const utility_territories: { [key: string]: string } = {
+    NGRID: 'National Grid',
+    'RG&E': ' Rochester Gas & Electric',
+    NYSEG: 'NYS Electric & Gas',
+    'CHG&E': 'Central Hudson Gas & Electric',
+    ORU: 'Orange & Rockland Utilities',
+    LIPA: 'Long Island Power Authority',
+    ConEd: 'Consolidated Edison',
+  };
+
+  const icon = icon_category ? categories[icon_category] : null;
+
+  const getProjectScale = () => {
+    if (!size) {
+      return null;
+    }
+    if (size <= 5) {
+      return 'Community Scale';
+    } else if (size >= 25) {
+      return 'Utility Scale';
+    } else {
+      return null;
+    }
+  };
+
+  const getContent = () => {
+    if (icon_category === 'Utility Service Territory') {
+      return (
+        <DefaultTagStyles>
+          {icon}{' '}
+          <TagText1 $color={COLORS.electricBlue}>
+            {content ? utility_territories[content] : null}
+          </TagText1>
+        </DefaultTagStyles>
+      );
+    }
+    if (icon_category === 'Project Size') {
+      const scale = getProjectScale();
+      return scale ? (
+        <DefaultTagStyles>
+          {icon} <TagText1 $color={COLORS.electricBlue}>{scale}</TagText1>
+        </DefaultTagStyles>
+      ) : null;
+    }
+    return (
+      <DefaultTagStyles>
+        {icon} <TagText1 $color={COLORS.electricBlue}>{content}</TagText1>
+      </DefaultTagStyles>
+    );
+  };
+
+  return <div>{icon && getContent()}</div>;
+}
diff --git a/components/DefaultTag/styles.ts b/components/DefaultTag/styles.ts
@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+import COLORS from '@/styles/colors';
+
+export const DefaultTagStyles = styled.div`
+  display: flex;
+  gap: 0.625rem;
+  height: 1.2rem;
+  padding: 0.1rem 0.625rem;
+  align-items: center;
+  flex-direction: row;
+  gap: 0.375rem;
+  border-radius: 5px;
+  background: ${COLORS.electricBlue10};
+`;
diff --git a/components/KDMDropdown/index.tsx b/components/KDMDropdown/index.tsx
@@ -0,0 +1,104 @@
+import { CheckmarkIcon, CloseIcon, OpenIcon } from '@/assets/KDM-Icons/icons';
+import { SubHeading2, TagText2 } from '@/styles/texts';
+import { Milestone } from '@/types/schema';
+import KeyDevelopmentMilestone from '../KeyDevelopmentMilestone';
+import {
+  CompletionIndicatorTag,
+  Header,
+  KDMContainer,
+  ProgressBar,
+  ProgressBox,
+} from './styles';
+
+export default function KDMDropdown({
+  key_development_milestones,
+  isOpen,
+  setIsOpen,
+}: {
+  key_development_milestones: Milestone[] | undefined;
+  isOpen: boolean;
+  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}) {
+  // Map KDMs
+  const KDMs = key_development_milestones?.map(
+    (milestone: Milestone, i: number) => {
+      return (
+        <KeyDevelopmentMilestone
+          key={i}
+          index={i}
+          completed={milestone.completed}
+          date={milestone.date}
+        ></KeyDevelopmentMilestone>
+      );
+    },
+  );
+
+  const totalCompletedKDMs = key_development_milestones
+    ? Object.values(key_development_milestones).reduce(
+        (a, item) => a + (item.completed === true ? 1 : 0),
+        0,
+      )
+    : 0;
+
+  const ProgressBarContent = key_development_milestones?.map(
+    (milestone: Milestone, i: number) => {
+      return (
+        <ProgressBox key={i} completed={milestone.completed}></ProgressBox>
+      );
+    },
+  );
+
+  const toggleKDM = () => {
+    setIsOpen(!isOpen);
+  };
+
+  return (
+    <KDMContainer>
+      <Header onClick={toggleKDM}>
+        <SubHeading2>KEY DEVELOPMENT MILESTONES</SubHeading2>
+        <CompletionIndicatorTag>
+          <CheckmarkIcon width={'7'} height={'8'} />
+          <TagText2>{totalCompletedKDMs} / 6</TagText2>
+        </CompletionIndicatorTag>
+        {isOpen ? <CloseIcon /> : <OpenIcon />}
+      </Header>
+      {isOpen ? KDMs : <ProgressBar>{ProgressBarContent}</ProgressBar>}
+    </KDMContainer>
+    /*<FilterBackgroundStyles isActive={isActive}>
+          {isActive ? (
+            filter.id === 'technology' ? (
+              <TechnologyDropdown
+                selectedTechnologies={selectedFilters.technology}
+                setSelectedTechnologies={filterChangeHandlers.technology}
+                handleButtonClick={handleButtonClick}
+                icon={filter.icon}
+                label={filter.label}
+                currFilter={filter}
+                handleFilterButtonClick={handleFilterButtonClick}
+                clearFilters={clearFilters}
+                setActiveFilter={setActiveFilter}
+              />
+            ) : filter.id === 'status' ? (
+              <StatusDropdown
+                selectedStatus={selectedFilters.status}
+                setSelectedStatus={filterChangeHandlers.status}
+                handleButtonClick={handleButtonClick}
+                icon={filter.icon}
+                label={filter.label}
+                currFilter={filter}
+                handleFilterButtonClick={handleFilterButtonClick}
+                clearFilters={clearFilters}
+                setActiveFilter={setActiveFilter}
+              />
+            ) : // Add other filter dropdown components here
+            null
+          ) : (
+            <FilterButtonStyles onClick={() => handleButtonClick(filter)}>
+              <IconStyle>{filter.icon}</IconStyle>
+              <FilterHeadingUnused>{filter.label}</FilterHeadingUnused>
+              <DropIcon />
+            </FilterButtonStyles>
+          )}
+        </FilterBackgroundStyles> */
+  );
+}
diff --git a/components/KDMDropdown/styles.ts b/components/KDMDropdown/styles.ts
@@ -0,0 +1,63 @@
+import { styled } from 'styled-components';
+import COLORS from '@/styles/colors';
+
+export const KDMContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  width: 16.95rem;
+  gap: 0.875rem;
+  padding: 1.25rem 1.4rem;
+  border-radius: 12px 12px 8px 8px;
+  border: 1px solid rgba(46, 58, 89, 0.05);
+  box-shadow: 0px -2px 5px 0px rgba(255, 255, 255, 0.1);
+`;
+
+export const Header = styled.button`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+
+  /* remove button's complete styling */
+  background: none;
+  color: inherit;
+  border: none;
+  padding: 0;
+  font: inherit;
+  cursor: pointer;
+  outline: inherit;
+`;
+
+export const CompletionIndicatorTag = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: 5px;
+  background: ${COLORS.electricBlue10};
+  padding: 0.2rem 0.35rem;
+  gap: 0.25rem;
+`;
+
+export const ProgressBar = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+`;
+
+export const ProgressBox = styled.div<{ completed: boolean }>`
+  width: 2.625rem;
+  height: 0.5rem;
+  border-radius: 2px;
+  background: ${COLORS.electricBlue};
+  opacity: ${props => (props.completed ? '0.85' : '0.5')};
+  box-shadow: ${props =>
+    props.completed
+      ? '0px 3px 4px 0px rgba(46, 58, 89, 0.10)'
+      : '0px 2px 4px 0px rgba(73, 116, 224, 0.10) inset'};
+`;
diff --git a/components/KeyDevelopmentMilestone/index.tsx b/components/KeyDevelopmentMilestone/index.tsx
@@ -1,5 +1,5 @@
 import { CheckmarkIcon, DotDotDotIcon } from '../../assets/KDM-Icons/icons';
-import { Milestone, MilestoneLabel } from './styles';
+import { Milestone, MilestoneLabel, MilestoneTitle } from './styles';
 
 export default function KeyDevelopmentMilestone({
   completed,
@@ -44,11 +44,15 @@ export default function KeyDevelopmentMilestone({
 
   return (
     <Milestone completed={completed}>
-      {milestoneLabels[index]}
-      <MilestoneLabel status={completed}>
-        {completed ? <CheckmarkIcon /> : <DotDotDotIcon />}
-        {statusLabel}
-      </MilestoneLabel>
+      <MilestoneTitle>
+        {milestoneLabels[index]}
+        {completed ? (
+          <CheckmarkIcon width={'9'} height={'8'} />
+        ) : (
+          <DotDotDotIcon />
+        )}
+      </MilestoneTitle>
+      <MilestoneLabel status={completed}>{statusLabel}</MilestoneLabel>
     </Milestone>
   );
 }