Merge pull request #8 from String-sg/fix/copywriting-waitlist-postlogin

Fix/copywriting waitlist postlogin

public/data/teachers_age_data_2019_2023.csv

@@ -1,4 +1,12 @@
 Year,Age Group,Primary Total,Primary Female,Secondary Total,Secondary Female,Pre-University Total,Pre-University Female,Overall Total,Overall Female
+2011,24 and below,493,469,573,556,50,47,1116,1072
+2011,25-29,2464,2036,3116,2336,712,473,6292,4845
+2011,30-34,3200,2566,3186,1946,762,409,7148,4921
+2011,35-39,2979,2346,2558,1447,470,226,6007,4019
+2011,40-44,2012,1630,1654,946,281,124,3947,2700
+2011,45-49,1062,865,1059,680,191,108,2312,1653
+2011,50-54,834,719,960,675,198,138,1992,1532
+2011,55 and above,859,721,937,587,205,123,2001,1431
 2019,24 and below,72,72,56,55,2,2,130,129
 2019,25-29,1569,"1,419","1,684","1,323",216,155,"3,469","2,897"
 2019,30-34,"2,852","2,294","2,830","1,895",537,317,6219,"4,506"

src/pages/home.tsx

@@ -1,50 +1,201 @@
+import { useState } from 'react'
 import Link from 'next/link'
-import { Flex, Stack, Text } from '@chakra-ui/react'
-import { Button } from '@opengovsg/design-system-react'
+import {
+  Box,
+  Button,
+  Flex,
+  Input,
+  Select,
+  Stack,
+  Table,
+  Tbody,
+  Td,
+  Text,
+  Th,
+  Thead,
+  Tr,
+} from '@chakra-ui/react'
+import { Attachment } from '@opengovsg/design-system-react'
 
 import { APP_GRID_COLUMN, APP_PX } from '~/constants/layouts'
-import { StarterKitSvgr } from '~/features/home/components/StarterKitSvgr'
 import { type NextPageWithLayout } from '~/lib/types'
 import { AppGrid } from '~/templates/AppGrid'
 import { AdminLayout } from '~/templates/layouts/AdminLayout'
 
 const Home: NextPageWithLayout = () => {
+  const [csvFile, setCsvFile] = useState<File | null>(null)
+  const [birthdays, setBirthdays] = useState([])
+  const [filter, setFilter] = useState('')
+
+  // Handle CSV file upload
+  const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0] || null
+    setCsvFile(file)
+  }
+
+  const handleUpload = async () => {
+    if (!csvFile) {
+      alert('Please upload a CSV file')
+      return
+    }
+
+    const formData = new FormData()
+    formData.append('file', csvFile)
+
+    try {
+      const res = await fetch('/api/birthdays/upload', {
+        method: 'POST',
+        body: formData,
+      })
+
+      if (res.ok) {
+        alert('CSV uploaded successfully!')
+        setCsvFile(null) // Reset the file input
+      } else {
+        const error = await res.json()
+        alert(`Error: ${error.message}`)
+      }
+    } catch (err) {
+      console.error(err)
+      alert('Failed to upload the file.')
+    }
+  }
+
+  const fetchBirthdays = async () => {
+    try {
+      const res = await fetch(`/api/birthdays/get?filter=${filter}`)
+      const data = await res.json()
+      setBirthdays(data)
+    } catch (err) {
+      console.error(err)
+      alert('Failed to fetch birthdays.')
+    }
+  }
+
+  const handleDelete = async () => {
+    if (!confirm('Are you sure you want to delete all birthday data?')) return
+
+    try {
+      const res = await fetch('/api/birthdays/delete', { method: 'DELETE' })
+      if (res.ok) {
+        alert('All data deleted successfully!')
+        setBirthdays([]) // Reset the displayed data
+      } else {
+        alert('Failed to delete data.')
+      }
+    } catch (err) {
+      console.error(err)
+      alert('Failed to delete data.')
+    }
+  }
   return (
-    <AppGrid flex={1} bg="white" px={APP_PX} textAlign="center">
-      <Flex py="3rem" gridColumn={APP_GRID_COLUMN} justify="center" my="auto">
+    <AppGrid
+      flex={1}
+      bg="white"
+      px={APP_PX}
+      textAlign="center"
+      templateColumns="1fr" // Ensure single-column layout
+    >
+      {/* Introduction Section */}
+      <Box gridColumn="1 / -1" py="3rem">
         <Stack align="center" gap="1.25rem">
           <Text textStyle="responsive-display.heavy-1280" as="h1">
-            You are on the waitlist for {' '}
+            Welcome to{' '}
             <Text as="span" color="interaction.main.default">
               EduEDA
             </Text>
           </Text>
           <Text textStyle="body-1">
-            You will receive an email once we have more features/releases. Check
-            out our repositories:
-            <Link
-              href="https://github.com/String-sg/education-digest-eda"
-              isExternal
-            >
-              education raw data
-            </Link>
-            and
-            <Link href="https://github.com/String-sg/eduEDA" isExternal>
-              code for this web-application
-            </Link>
-            .
+            Start with an introductory tool:{' '}
+            <b>Birthdays</b> or explore other data. <br></br>
           </Text>
+        </Stack>
+      </Box>
 
-          <Button
-            as={Link}
-            href="https://string.beta.gov.sg"
-            target="_blank"
+      {/* Birthday Management Section */}
+      <Box
+        bg="gray.100"
+        p={6}
+        borderRadius="md"
+        gridColumn="1 / -1"
+        maxWidth="200rem" // Correct property and value
+        mx="auto" // Center the box horizontally
+      >
+        <Text as="h2" fontSize="xl" fontWeight="bold" mb={4}>
+        🎉 Manage Student Birthdays
+        </Text>
+        <Text textStyle="body-1">
+            You can opt in to receive email notifications to facilitate
+            planning, or import this into your calendar of choice.
+          </Text>
+          <Text textStyle="body-1">
+            <b>You own this data</b> and can delete it anytime.
+          </Text>
+        <Stack spacing={4}>
+          {/* Upload CSV */}
+          <Attachment
+            onFilesSelected={handleFileUpload}
+            accept="text/csv"
+            hint="Upload a CSV file with columns: name, class, birthday (DD/MM)"
+            isRequired
+          />
+          {/* Filter Birthdays */}
+          <Select
+            placeholder="Select a filter"
+            value={filter}
+            onChange={(e) => setFilter(e.target.value)}
           >
-            See other String products
+            <option value="today">Today</option>
+            <option value="week">This Week</option>
+            <option value="month">This Month</option>
+            <option value="term">This Term</option>
+          </Select>
+          <Button colorScheme="green" onClick={fetchBirthdays}>
+            View Birthdays
+          </Button>
+
+          {/* Display Birthdays */}
+          {birthdays.length > 0 && (
+            <Table variant="simple">
+              <Thead>
+                <Tr>
+                  <Th>Name</Th>
+                  <Th>Class</Th>
+                  <Th>Birthday</Th>
+                </Tr>
+              </Thead>
+              <Tbody>
+                {birthdays.map((student, index) => (
+                  <Tr key={index}>
+                    <Td>{student.name}</Td>
+                    <Td>{student.class}</Td>
+                    <Td>{`${student.birthday_day}/${student.birthday_month}`}</Td>
+                  </Tr>
+                ))}
+              </Tbody>
+            </Table>
+          )}
+
+          {/* Delete Data */}
+          <Button colorScheme="red" onClick={handleDelete}>
+            Delete All Data
           </Button>
-          <StarterKitSvgr />
         </Stack>
-      </Flex>
+      </Box>
+
+      {/* Advanced Features Section */}
+      <Box gridColumn="1 / -1" mt={8}>
+        <Text textStyle="body-1" color="gray.600">
+          Interested to contribute?<br></br>
+          <Link
+            href="https://github.com/String-sg/eduEDA"
+            isExternal
+            color="interaction.main.default"
+          >
+            See GitHub
+          </Link>{' '}
+        </Text>
+      </Box>
     </AppGrid>
   )
 }

src/pages/index.tsx

@@ -165,9 +165,9 @@ const LandingPage = () => {
         </Stack>
       </LandingSection>
       <LandingSection>
-        <SectionHeadingText>Teacher Strength</SectionHeadingText>
+        <SectionHeadingText>Teacher Numbers</SectionHeadingText>
         <SectionBodyText>
-          How has the number of teachers changed from 2019 to 2023?
+          How has the number of teachers changed from 2011 to 2023?
         </SectionBodyText>
         <Box mt="2rem" textAlign="center">
           <Text mb="1rem" fontWeight="bold">

src/templates/AppGrid.tsx

@@ -6,7 +6,7 @@ import { APP_GRID_TEMPLATE_COLUMN } from '~/constants/layouts'
  * Component that controls the various grid areas according to the app's
  * responsive breakpoints.
  */
-export const AppGrid = (props: GridProps) => (
+export const AppGrid = ({ templateColumns = APP_GRID_TEMPLATE_COLUMN, ...props }: GridProps) => (
   <Grid
     columnGap={{ base: '0.5rem', lg: '1rem' }}
     templateColumns={APP_GRID_TEMPLATE_COLUMN}