From 9f4f923cfdb6733ccf4f4d770e2c16637f4a2810 Mon Sep 17 00:00:00 2001
From: pratishta <ypradhi9@gmail.com>
Date: Wed, 17 Jul 2024 13:10:45 -0400
Subject: [PATCH] Format the list and panel

---
 .../CapitalProjectsAccordionPanel.tsx         | 31 +++----
 app/components/CapitalProjectsList.tsx        | 93 ++++++++-----------
 2 files changed, 50 insertions(+), 74 deletions(-)

diff --git a/app/components/CapitalProjectsAccordionPanel.tsx b/app/components/CapitalProjectsAccordionPanel.tsx
index c59f92c..e593d1b 100644
--- a/app/components/CapitalProjectsAccordionPanel.tsx
+++ b/app/components/CapitalProjectsAccordionPanel.tsx
@@ -1,4 +1,4 @@
-import { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, Box, Flex, HStack, Heading, IconButton } from "@nycplanning/streetscape"
+import { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, Box, Text, Flex, HStack, Heading, IconButton, Stack } from "@nycplanning/streetscape"
 import { Agency, CapitalProject } from "~/gen";
 import { CapitalProjectsList } from "./CapitalProjectsList";
 import { ChevronLeftIcon } from "@chakra-ui/icons";
@@ -32,10 +32,8 @@ export const CapitalProjectsAccordionPanel = ({
             <AccordionItem border="none">
                 <h2>
                 <AccordionButton padding="0px">
-               
                <Box as='span' flex='1' textAlign='left'>
-                {/* <p>sdlkfja;sdlkjf;sa</p> */}
-                   <Heading color="gray.600" fontWeight={"bold"} fontSize={"lg"}>
+                   <Heading color="gray.600" fontWeight={"bold"} fontSize={"lg"} paddingBottom={"8px"}>
                    {district}
                    </Heading>
                   
@@ -43,23 +41,16 @@ export const CapitalProjectsAccordionPanel = ({
                <AccordionIcon size="lg" />
                </AccordionButton>
                 </h2>
-                
-        
-                
+ 
                 <AccordionPanel padding={"0px"}>
-                <p>sadlkfja;dsk</p>
-                <Box padding="20px">
-                <Divider borderColor={'cyan'} orientation="horizontal" />
-
-                </Box>
-                <CapitalProjectsList
-                    capitalProjects={capitalProjects}
-                    limit={limit}
-                    offset={offset}
-                    path={path}
-                    total={total}
-                    agencies={agencies}
-                /> 
+                    <CapitalProjectsList
+                        capitalProjects={capitalProjects}
+                        limit={limit}
+                        offset={offset}
+                        path={path}
+                        total={total}
+                        agencies={agencies}
+                    />                 
                 </AccordionPanel>
             </AccordionItem>
         </Accordion>
diff --git a/app/components/CapitalProjectsList.tsx b/app/components/CapitalProjectsList.tsx
index 7cdcc7d..f604790 100644
--- a/app/components/CapitalProjectsList.tsx
+++ b/app/components/CapitalProjectsList.tsx
@@ -1,14 +1,12 @@
-import { Box, Flex, Hide, FlexProps, VStack, HStack, IconButton, Link} from "@nycplanning/streetscape";
+import { Box, Flex, Hide, Text, VStack, HStack, IconButton, Link} from "@nycplanning/streetscape";
 import { useState } from "react";
 import { Agency, CapitalProject } from "~/gen";
-import { getYear, getMonth, compareAsc } from "date-fns";
+import { getYear, getMonth, compareAsc, format } from "date-fns";
 import { CapitalProjectsListItem } from "./CapitalProjectsListItem";
 import { Button } from "@chakra-ui/react";
-import { defineStyle, defineStyleConfig } from '@chakra-ui/react'
 import { ArrowLeftIcon, ArrowRightIcon, Icon } from "@chakra-ui/icons";
 import { Pagination } from "./Pagination";
-import ReactPaginate from 'react-paginate';
-import { useSearchParams } from "@remix-run/react";
+
 
 export interface CapitalProjectsListProps {
     capitalProjects: Array<CapitalProject>;
@@ -23,36 +21,8 @@ export const CapitalProjectsList = ({
     capitalProjects, limit, offset, total, path, agencies,
 }: CapitalProjectsListProps) => {
 
-    const [searchParams] = useSearchParams();
-    console.log(searchParams);
-
-    function setSearchParamsString(
-        searchParams: URLSearchParams,
-        changes: Record<string, string | number | undefined>,
-      ) {
-        const newSearchParams = new URLSearchParams(searchParams)
-        for (const [key, value] of Object.entries(changes)) {
-          if (value === undefined) {
-            newSearchParams.delete(key)
-            continue
-          }
-          newSearchParams.set(key, String(value))
-        }
-        // Print string manually to avoid over-encoding the URL
-        // Browsers are ok with $ nowadays
-        // optional: return newSearchParams.toString()
-        return Array.from(newSearchParams.entries())
-          .map(([key, value]) =>
-            value ? `${key}=${encodeURIComponent(value)}` : key,
-          )
-          .join("&")
-      }
-
     const [isExpanded, setIsExpanded] = useState(false);
 
-    const numberOfPages = total / limit;
-    // Invoke when user click to request another page.
-
     const getFiscalYearForDate = (date: Date): number => {
         const year = getYear(date);
         const month = getMonth(date);
@@ -65,9 +35,23 @@ export const CapitalProjectsList = ({
           : `FY${getFiscalYearForDate(minDate)}-FY${getFiscalYearForDate(maxDate)}`;
       };
 
-    // const Pagination = () => <Button colorScheme="blue" borderRadius="0" aria-label="Page" size="xs">{offset+1}</Button>
+      const currentDate = () => {
+        return `${format(new Date(), 'MM/dd/yyyy')}`;
+      }
+
     return (
         <>
+        <Box
+            borderTopWidth={"1px"}
+            borderTopColor={"gray.400"}
+            paddingTop={"16px"}
+        >
+            <Text
+                as={"span"}
+            >
+                Mapped Capital Projects as of <Text as={"b"}>{currentDate()}</Text>
+            </Text>
+        </Box>
         <Flex
         direction={"column"}
         overflow={"hidden"}
@@ -78,29 +62,30 @@ export const CapitalProjectsList = ({
             height={{ base: isExpanded ? "70vh" : "70vh"}}
             overflowY={{ base: "scroll" }}
         >
-            {/* this should be a generic panel for project detail and list */}
-            
-            {/* we need a separate component for project list item */}
+
+                        
             <VStack
                 align='stretch'
+                paddingTop={"12px"} 
+                gap={"12px"}
             >
-
-            {capitalProjects.map((capitalProject) => {
-                return (
-                    <CapitalProjectsListItem
-                        description={capitalProject.description}
-                        minDate={capitalProject.minDate}
-                        maxDate={capitalProject.maxDate}
-                        agency= { agencies.find(
-                            (agency) => agency.initials === capitalProject.managingAgency,
-                          )?.name }
-                        yearRange={formatFiscalYearRange(
-                            new Date(capitalProject.minDate),
-                            new Date(capitalProject.maxDate),
-                          )}
-                    />
-                )
-            })}
+                
+                {capitalProjects.map((capitalProject) => {
+                    return (
+                        <CapitalProjectsListItem
+                            description={capitalProject.description}
+                            minDate={capitalProject.minDate}
+                            maxDate={capitalProject.maxDate}
+                            agency= { agencies.find(
+                                (agency) => agency.initials === capitalProject.managingAgency,
+                            )?.name }
+                            yearRange={formatFiscalYearRange(
+                                new Date(capitalProject.minDate),
+                                new Date(capitalProject.maxDate),
+                            )}
+                        />
+                    )
+                })}
             </VStack>
         </Box>
         </Flex>