Finance page

package.json

@@ -23,7 +23,7 @@
     "dayjs-plugin-utc": "^0.1.2",
     "graphql": "^16.8.0",
     "install": "^0.13.0",
-    "next": "14.0.4",
+    "next": "14.1.3",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },

src/app/(admin)/finance/[id]/page.tsx

@@ -0,0 +1,24 @@
+import DynamicFinances from "@/modules/Finances/screens/Dynamic/DynamicFinances"
+
+const Page = async ({ params }: { params: { id: string } }) => {
+  const endpointIdMatcher = (id: string) => {
+    switch (parseInt(id)) {
+      case 0:
+        return "endp1"
+      case 1:
+        return "endp2"
+      default:
+        return "endpdefault"
+    }
+  }
+
+  const heading = endpointIdMatcher(params.id)
+
+  return (
+    <DynamicFinances heading={heading} />
+  )
+}
+
+export default Page
+
+

src/app/(admin)/finance/page.tsx

@@ -1,7 +1,7 @@
-import { Fragment } from "react";
+import { Finances } from "@/modules/Finances/screens";
 
 const Page = async () => {
-  return <Fragment />;
+  return <Finances />
 };
 
 export default Page;

src/components/AdminLayout/AdminLayout.module.css

@@ -1,12 +1,16 @@
 .container {
-    display: flex;
-    flex-direction: row;
-    min-height: 100vh;
-    height: 100vh;
+  display: flex;
+  flex-direction: row;
+  min-height: 100vh;
+  height: 100vh;
 }
 
 .children {
-    width: 100%;
-    padding: 8rem 6rem 11.69rem 6rem;
-    box-sizing: border-box;
-}
+  width: 100%;
+  padding: 8rem 6rem 11.69rem 6rem;
+  box-sizing: border-box;
+
+  @media (max-width: 1440px) {
+    padding: 8rem 2rem 11.69rem 2rem;
+  }
+}

src/components/Typography/Typography.module.css

@@ -49,6 +49,10 @@
     &.lg {
       font-size: 2rem;
     }
+
+    &.xxl {
+      font-size: 2.5rem;
+    }
   }
 
   &.button {

src/components/Typography/Typography.tsx

@@ -12,7 +12,7 @@ import cx from "classnames";
 import styles from "./Typography.module.css";
 
 type Variant = "heading" | "button";
-type Size = "sm" | "smMd" | "XLsmMd" | "md" | "mdLg" | "lg" | "xl";
+type Size = "sm" | "smMd" | "XLsmMd" | "md" | "mdLg" | "lg" | "xl" | "xxl";
 type Weight = "light" | "normal" | "base" | "semibold" | "semibolder" | "bold";
 
 interface Props {
@@ -46,6 +46,7 @@ const Typography = ({
         [styles.mdLg]: isSize("mdLg"),
         [styles.lg]: isSize("lg"),
         [styles.xl]: isSize("xl"),
+        [styles.xxl]: isSize("xxl"),
         [styles.light]: isWeight("light"),
         [styles.normal]: isWeight("normal"),
         [styles.base]: isWeight("base"),

src/modules/Finances/components/FinanceItems/FinanceItems.module.css

@@ -0,0 +1,5 @@
+.item {
+  width: 35.6rem;
+  max-width: 41.875rem;
+  padding: 2rem 3rem;
+}

src/modules/Finances/components/FinanceItems/FinanceItems.tsx

@@ -0,0 +1,35 @@
+import { Item } from "./components"
+import type { FinanceItem } from "./types/financeItem";
+
+import styles from "./FinanceItems.module.css";
+
+const FinanceItems = () => {
+
+  const mockedFinanceItems: FinanceItem[] = [
+    {
+      total: 100,
+      date: 1706518661,
+      groups: [
+        {
+          name: 'test',
+          money: 20,
+        },
+        {
+          name: 'test1',
+          money: 80,
+        }
+      ]
+
+    }
+  ]
+
+  const renderedItems = mockedFinanceItems.map((item, index) => <Item id={index} className={styles.item} mockedData={item} />)
+
+  return (
+    <div className={styles.container}>
+      {renderedItems}
+    </div>
+  )
+}
+
+export default FinanceItems;

src/modules/Finances/components/FinanceItems/components/Item/Item.module.css

@@ -0,0 +1,22 @@
+.container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+
+  &.groupsContainer {
+    gap: 0.75rem;
+    padding-left: 1.56rem;
+
+    @media (max-width: 1080px) {
+      padding-left: 0;
+    }
+  }
+}
+
+.section {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+}

src/modules/Finances/components/FinanceItems/components/Item/Item.tsx

@@ -0,0 +1,37 @@
+import type { FinanceItem } from "../../types/financeItem";
+import { Typography } from "@/components/Typography";
+import { ItemWrapper } from "../../..";
+import cx from "classnames";
+
+import styles from "./Item.module.css";
+
+interface Props {
+  id: number;
+  mockedData: FinanceItem;
+  className?: string;
+}
+
+const Item = (props: Props) => {
+  const renderedGroups = props.mockedData.groups.map((group, index) => (
+    <div key={index} className={styles.section}>
+      <Typography.Heading Tag="h5" size="smMd" weight="semibold">{group.name}</Typography.Heading>
+      <Typography.Heading Tag="h5" size="smMd" weight="semibold">{group.money}</Typography.Heading>
+    </div >
+  ))
+
+  return (
+    <ItemWrapper id={props.id} className={props.className}>
+      <div className={styles.container}>
+        <div className={styles.section}>
+          <Typography.Heading Tag="h3" weight="semibolder" size="md">{props.mockedData.date}</Typography.Heading>
+          <Typography.Heading Tag="h3" weight="semibolder" size="md">{props.mockedData.total}</Typography.Heading>
+        </div>
+        <div className={cx(styles.container, styles.groupsContainer)}>
+          {renderedGroups}
+        </div>
+      </div>
+    </ItemWrapper>
+  )
+}
+
+export default Item;

src/modules/Finances/components/FinanceItems/components/index.tsx

@@ -0,0 +1 @@
+export { default as Item } from "./Item/Item";

src/modules/Finances/components/FinanceItems/types/financeItem.ts

@@ -0,0 +1,8 @@
+export interface FinanceItem {
+  date: number;
+  total: number;
+  groups: Array<{
+    name: string;
+    money: number;
+  }>
+}

src/modules/Finances/components/Heading/Heading.tsx

@@ -0,0 +1,17 @@
+import { Typography } from "@/components/Typography";
+
+import styles from "./Heading.module.css";
+
+interface Props {
+  heading: string;
+}
+
+const Heading = (props: Props) => {
+  return (
+    <Typography.Heading Tag="h1" weight="bold" size="lg" className={styles.heading}>
+      {props.heading}
+    </Typography.Heading>
+  )
+}
+
+export default Heading;

src/modules/Finances/components/ItemWrapper/ItemWrapper.module.css

@@ -0,0 +1,20 @@
+.wrapper {
+  display: flex;
+  height: 10.6875rem;
+  min-height: fit-content;
+  border-radius: 1.25rem;
+  border: 2px solid var(--Beige, #EEE8DA);
+  background: var(--Light-beige, #F5F2EB);
+
+  &.pointer {
+    cursor: pointer;
+  }
+
+  @media (max-width: 1440px) {
+    width: 100%;
+  }
+
+  @media (max-width: 1080px) {
+    flex-direction: column;
+  }
+}

src/modules/Finances/components/ItemWrapper/ItemWrapper.tsx

@@ -0,0 +1,28 @@
+"use client"
+
+import { ReactNode } from "react";
+import cx from "classnames";
+
+import styles from "./ItemWrapper.module.css"
+
+interface Props {
+  id: number;
+  redirect?: {
+    push: (id: number) => void;
+    path: string
+  }
+  className?: string;
+  children: ReactNode;
+}
+
+const BoxItemSkeleton = (props: Props) => {
+  return (
+    <div onClick={() => props.redirect?.path && props.redirect.push(props.id)} className={cx(styles.wrapper, {
+      [styles.pointer]: props.redirect?.path
+    }, props.className)}>
+      {props.children}
+    </div>
+  )
+}
+
+export default BoxItemSkeleton;

src/modules/Finances/components/NavigationSection/NavigationSection.module.css

@@ -0,0 +1,37 @@
+.container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2.31rem;
+  row-gap: 1.5rem;
+}
+
+.itemWrapper {
+  display: flex;
+  width: 45%;
+  max-width: 41.875rem;
+  height: 10.6875rem;
+  min-height: fit-content;
+  border-radius: 1.25rem;
+  border: 2px solid var(--Beige, #EEE8DA);
+  background: var(--Light-beige, #F5F2EB);
+  padding: 2rem 2.5rem;
+  cursor: pointer;
+}
+
+.compartment {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+
+  &.first {
+    justify-content: start;
+    align-items: start;
+  }
+
+  &.second {
+    justify-content: end;
+    align-items: end;
+  }
+}

src/modules/Finances/components/NavigationSection/NavigationSection.tsx

@@ -0,0 +1,24 @@
+import { useRouter } from "next/navigation";
+import { Item } from "./components/Item";
+
+import styles from "./NavigationSection.module.css";
+
+const NavigationSection = () => {
+  const router = useRouter();
+  const mockedSections = ["Starý zůstatek záloh", "Vydané obědy", "Nový zůstatek záloh", "Suma příjmu záloh"]
+
+  const handleDynamicFinanceRouteRedirect = (id: number) => {
+    router.push(`/finance/${id}`)
+  }
+
+  return (
+    <div className={styles.container}>
+      {mockedSections.map((section, index) => (
+        <Item key={`${section}${index}`} id={index} heading={section} redirect={{ path: section, push: handleDynamicFinanceRouteRedirect }} summary={23000} isSummaryPrice={true} />
+      ))}
+    </div>
+  )
+
+}
+
+export default NavigationSection;