#4

package.json

@@ -48,4 +48,4 @@
       "last 1 safari version"
     ]
   }
-}
+}

src/components/CreationDate/CreationDate.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import TableCell from '@mui/material/TableCell';
+import {formatDate} from './utils'
+
+const CreationDate: React.FC<{date: string} > = ({date}) => {
+    const properDate = formatDate(date);
+
+    return(
+        <TableCell component="th" scope="row">
+            {properDate}
+        </TableCell>
+    );
+}
+
+export default CreationDate;

src/components/CreationDate/index.ts

@@ -0,0 +1 @@
+export {default} from './CreationDate'

src/components/CreationDate/utils.ts

@@ -0,0 +1,9 @@
+export function formatDate(baseDate: string): string{
+    const newDate = new Date(baseDate);
+
+    const year = newDate.getFullYear();
+    const month = newDate.getMonth();
+    const day = newDate.getDay();
+
+    return `${day < 10 ? `0${day}` : day }-${month}-${year}`;
+}

src/components/ListModal/ListModal.tsx

@@ -0,0 +1,50 @@
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemText from '@mui/material/ListItemText';
+import Checkbox from '@mui/material/Checkbox';
+import { useState } from 'react';
+
+
+
+const ListModal = () =>{
+
+    let myList: string[] = ["jeden", "dwa", "trzy"];
+
+    const [checked, setChecked] = useState([1]);
+
+    const handleToggle = (value: string) => () => {
+        const newChecked = [...checked];
+
+        setChecked(newChecked);
+    };
+
+  return (
+    <List dense sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}>
+      {myList.map((value) => {
+        const labelId = `checkbox-list-secondary-label-${value}`;
+        return (
+          <ListItem
+            key={value}
+            secondaryAction={
+              <Checkbox
+                edge="end"
+                onChange={handleToggle(value)}
+                //checked={checked.indexOf(value) !== -1}
+                inputProps={{ 'aria-labelledby': labelId }}
+              />
+            }
+            disablePadding
+          >
+            <ListItemButton>
+              <ListItemText id={labelId} primary={`${value}`} />
+            </ListItemButton>
+          </ListItem>
+        );
+      })}
+    </List>
+  );
+
+}
+
+export default ListModal

src/components/ListModal/index.ts

@@ -0,0 +1 @@
+export { default } from './ListModal';

src/components/Name/Country.tsx

@@ -0,0 +1,9 @@
+import Typography from '@mui/material/Typography/Typography'
+import React from 'react'
+
+const Country = ({country}: {country : string}) => (
+    <Typography>{country}</Typography>
+)
+
+
+export default Country;

src/components/Name/Name.tsx

@@ -0,0 +1,9 @@
+import Typography from '@mui/material/Typography';
+import React from 'react';
+
+const Name = ({fullName}: {fullName: string}) => {
+    return <Typography>{fullName}</Typography>
+}
+
+export default Name;
+

src/components/PackagesList/PackagesList.tsx

@@ -0,0 +1,62 @@
+import Box from "@mui/system/Box"
+import * as React from 'react';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import {PackageDistribution} from './types';
+
+interface PackagesListProps {
+    children: React.ReactNode;
+}
+function formatAddress (row: PackageDistribution) 
+{
+
+    return  <>{row.address} {row.postcode} {row.city} {row.country} {row.lat} {row.lng}</>
+}
+
+
+const PackagesList = () => {
+
+    const [packages, setPackages] = React.useState<PackageDistribution[]>([]);
+
+    React.useEffect(
+        () => {
+            fetch("https://santa.deployed.space/api/distribution")
+                .then((response) => response.json())
+                .then((data) => { setPackages(data) });
+        }, [])
+
+
+    return (
+        <>
+
+            <TableContainer >
+                <Table sx={{ minWidth: 80, backgroundColor: "#FFFFFF" }} aria-label="simple table">
+                    <TableHead>
+                        <TableRow>
+                            <TableCell>ID Paczki</TableCell>
+                            <TableCell align="left">Imie i Nazwisko</TableCell>
+                            <TableCell align="left">Adress</TableCell>
+                        </TableRow>
+                    </TableHead>
+                    <TableBody>
+                        {
+                            packages.map((row) => (
+                                <TableRow>
+                                    <TableCell>{row.id}</TableCell>
+                                    <TableCell>{row.name}</TableCell>
+                                    <TableCell>{formatAddress(row)}</TableCell> 
+                                </TableRow>
+                            ))}
+                    </TableBody>
+                </Table>
+            </TableContainer>
+
+        </>
+    )
+}
+
+export default PackagesList

src/components/PackagesList/index.ts

@@ -0,0 +1 @@
+export { default } from './PackagesList';

src/components/PackagesList/types.ts

@@ -0,0 +1,10 @@
+export interface PackageDistribution {
+    id: number;
+    name: string;
+    address: string;
+    postcode: string;
+    city: string;
+    country: string;
+    lat: string;
+    lng: string;
+}

src/components/PackagingStatus/PackagingStatus.tsx

@@ -0,0 +1,12 @@
+import Box from "@mui/system/Box";
+import { useEffect, useState } from "react";
+import {DeliveryStatus} from './types';
+
+const PackagingStatus = ({status}: {status:string}) => {  
+  return (
+    <Box> {status}
+    </Box>
+  )
+}
+
+export default PackagingStatus;

src/components/PackagingStatus/index.ts

@@ -0,0 +1 @@
+export { default } from './PackagingStatus';

src/components/PackagingStatus/types.ts

@@ -0,0 +1,11 @@
+export interface DeliveryStatus{
+    id: number
+    wish_list_id: number
+    name: string
+    kindness: number
+    status: string
+    country: string
+    city: string
+    created_at: string
+  }
+

src/components/ProgressBar/ProgressBar.tsx

@@ -0,0 +1,37 @@
+import { LinearProgress, Typography } from "@mui/material";
+import Box from "@mui/system/Box";
+import { useEffect, useState } from "react";
+import { PackageDistribution } from "./types";
+
+const ProgressBar = () => {
+  const fetchData = async () => {
+    const data = await fetch("https://santa.deployed.space/api/distribution/");
+    const distribution: PackageDistribution[] = await data.json();
+    setVal(distribution.length);
+  };
+  const [val, setVal] = useState<number>(0);
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+  return (
+    <Box width={"210px"}>
+      <Typography
+        fontFamily={"roboto"}
+        fontStyle={"normal"}
+        fontWeight={400}
+        fontSize={"16px"}
+        lineHeight={"150%"}
+      >
+        {" "}
+        Obłożenie sań:{" "}
+      </Typography>
+      <Typography align="right"> {Math.floor((val * 100) / 15)}% </Typography>
+      <Box>
+        <LinearProgress variant="buffer" value={Math.floor((val * 100) / 15)} />
+      </Box>
+    </Box>
+  );
+};
+
+export default ProgressBar;

src/components/ProgressBar/index.ts

@@ -0,0 +1 @@
+export { default } from './ProgressBar';

src/components/ProgressBar/types.ts

@@ -0,0 +1,13 @@
+export interface ProgressBarProps {
+    children: React.ReactNode;
+}
+export interface PackageDistribution {
+    id: number
+    name: string
+    address: string
+    postcode: string
+    city: string
+    country: string
+    lat: string
+    lng: string
+  }

src/components/SendPresents/SendPresents.tsx

@@ -0,0 +1,99 @@
+import React from "react";
+import { Box, Button, Card, CardContent, Grid, makeStyles, Modal, Paper, styled, Typography } from "@mui/material";
+import StarIcon from '@mui/icons-material/Star';
+import CloseIcon from '@mui/icons-material/Close';
+import ListModal from "../ListModal";
+
+
+const SendPresents = () =>{
+
+    const [open, setOpen] = React.useState(false);
+    const handleOpen = () => setOpen(true);
+    const handleClose = () => setOpen(false);
+
+    const style = {
+        position: 'absolute',
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+        width: 650,
+        bgcolor: 'background.paper',
+        borderRadius: '12px',
+        boxShadow: 24,
+        p: 4,
+        display: 'flex',
+        padding: '0',
+        flexDirection: 'column',
+    };
+
+
+    return (<>
+        <Button onClick={handleOpen}>Open modal</Button>
+        <Modal
+            open={open}
+            onClose={handleClose}
+            aria-labelledby="verify-letter-modal"
+            aria-describedby="verify-letter-modal"
+        >
+            <Box sx={style}>
+                <Grid container spacing={0}>
+                    <Grid item xs={4}>
+                        <Box sx={{ bgcolor: "#F3F7F9", borderTopLeftRadius: 12, borderBottomLeftRadius: 12 }}>
+                            <img style={{ borderTopLeftRadius: 12 }} src="https://s3-alpha-sig.figma.com/img/66c9/766b/c207d69c2b105689d11455c446de3096?Expires=1672012800&Signature=G-bz4llIrnYsmX7~YJnA3JZA8k8Q7iLhFUYmZbQwzpQfof4hejgLIAabKy1d4ranhvKZbrTKCbacGmz179yYdJ2Yp6y25tjYLSyyaiDCfGXDkS8cGjQCgzKDJJy78nHQjBTwfEtXKi7~MX1GY2mH09fltna7UIMFQsMWym7RyG5SUTnOHkfiSCRVMo1qvs0BgXWiBcj7TRu0CQ7xgjdYTI-hcMUSfuqWu7HbmtwPh0hGmtME23Io1ehvQTp99J9GfrJPPB9xsjPNerJKApJG68LmHQEae3iXBXvmfnwgKA8GbMkQy8o0vNcRQ5Q~4Ctd5RhyVwGCUSDIUy1u9O0L3w__&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4" width="100%" />
+                            <Typography sx={{ padding: 3 }}>
+                                <b>Imię:</b><br />
+                                x<br />
+                                <b>Nazwisko:</b><br />
+                                xxx xxxxxxxx<br />
+                                <b>Wiek:</b><br />
+                                x lat<br />
+                                <b>Grzeczność:</b><br />
+                                x<br />
+                                <b>Kraj:</b><br />
+                                x<br />
+                                <b>Miasto:</b><br />
+                                x<br />
+                                <b>Ulica:</b><br />
+                                x<br />
+                            </Typography>
+                        </Box>
+                    </Grid>
+                    <Grid item xs={8}>
+                        <Box sx={{ borderTopRightRadius: 12, padding: 3 }}>
+                            <Box>
+                                <Grid container spacing={0}>
+                                    <Grid item xs={6}>
+                                        <Typography sx={{ color: "#A9A9A9", width: "50%" }}>
+                                            ID x<br />
+                                            calendar  xx.xx.xxxx<br />
+                                        </Typography>
+                                    </Grid>
+
+                                    <Grid item xs={5}>
+                                        <Typography sx={{ borderRadius: 12, border: "solid", width: 100, textAlign: "center" }}>
+                                            category
+                                        </Typography>
+                                    </Grid>
+
+                                    <Grid item xs={1}>
+                                        <Button variant="text" sx={{ color: "black" }} onClick={handleClose}>
+                                            <CloseIcon />
+                                        </Button>
+                                    </Grid>
+                                </Grid>
+                            </Box>
+                            <Box sx={{ margin: 3 }}>
+                                <Typography sx={{ fontSize: 25 }}>
+                                    <ListModal></ListModal>
+                                </Typography>
+                            </Box>
+
+                        </Box>
+                    </Grid>
+                </Grid>
+            </Box>
+        </Modal>
+    </>)
+}
+
+export default SendPresents

src/components/SendPresents/index.ts

@@ -0,0 +1 @@
+export { default as SendPresents }  from './SendPresents';