Next streamline

.prettierrc.cjs

@@ -3,4 +3,5 @@ module.exports = {
   singleQuote: true,
   quoteProps: 'consistent',
   printWidth: 100,
-};
+  plugins: ['prettier-plugin-tailwindcss'],
+};

package.json

@@ -45,18 +45,19 @@
     "@hookform/devtools": "^4.3.1",
     "@tanstack/eslint-plugin-query": "^5.18.0",
     "@types/node": "^20.12.4",
-    "@types/react": "^18.2.37",
     "@types/react-dom": "^18.2.15",
+    "@types/react": "^18.2.37",
     "@typescript-eslint/eslint-plugin": "^6.19.0",
     "@typescript-eslint/parser": "^6.19.0",
     "@vitejs/plugin-react": "^4.2.0",
-    "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.4",
+    "eslint": "^8.56.0",
+    "prettier-plugin-tailwindcss": "^0.6.5",
     "prettier": "^3.1.1",
     "typescript": "^5.5.2",
-    "vite": "^5.0.0",
-    "vite-plugin-node-polyfills": "^0.17.0"
+    "vite-plugin-node-polyfills": "^0.17.0",
+    "vite": "^5.0.0"
   }
 }

packages/api/src/fetchUserOptions.ts

@@ -0,0 +1,24 @@
+import { GetUserOptionsResponse } from './types/UserOptionType';
+
+async function fetchUserOptions(userId: string): Promise<GetUserOptionsResponse | null> {
+  try {
+    const response = await fetch(`${import.meta.env.VITE_SERVER_URL}/api/users/${userId}/options`, {
+      credentials: 'include',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+
+    if (!response.ok) {
+      throw new Error(`HTTP Error! Status: ${response.status}`);
+    }
+
+    const userOptions = (await response.json()) as { data: GetUserOptionsResponse };
+    return userOptions.data;
+  } catch (error) {
+    console.error('Error fetching user options:', error);
+    return null;
+  }
+}
+
+export default fetchUserOptions;

packages/api/src/index.ts

@@ -37,4 +37,5 @@ export { default as putRegistration } from './putRegistration';
 export { default as putUser } from './putUser';
 export { default as putUsersToGroups } from './putUsersToGroups';
 export { default as fetchEventGroupCategories } from './fetchEventGroupCategories';
+export { default as fetchUserOptions } from './fetchUserOptions';
 export * from './types';

packages/api/src/types/CycleType.ts

@@ -1,5 +1,6 @@
 export type GetCycleResponse = {
   id: string;
+  eventId: string;
   createdAt: string;
   updatedAt: string;
   status: 'OPEN' | 'CLOSED' | 'UPCOMING' | null;

packages/api/src/types/RegistrationType.ts

@@ -1,4 +1,4 @@
-export type RegistrationStatus = 'DRAFT' | 'APPROVED' | 'PUBLISHED' | null;
+export type RegistrationStatus = 'DRAFT' | 'APPROVED' | 'REJECTED' | null;
 
 export type GetRegistrationResponseType = {
   id?: string | undefined;
@@ -8,6 +8,16 @@ export type GetRegistrationResponseType = {
   eventId?: string | undefined;
   createdAt: string;
   updatedAt: string;
+  event?: {
+    id: string;
+    name: string;
+    imageUrl: string;
+    link: string | null;
+    registrationDescription: string | null;
+    createdAt: string;
+    updatedAt: string;
+    description: string | null;
+  };
 };
 
 export type GetRegistrationsResponseType = GetRegistrationResponseType[];

packages/api/src/types/UserOptionType.ts

@@ -0,0 +1,21 @@
+export type GetUserOptionsResponse = {
+  id: string;
+  createdAt: Date;
+  updatedAt: Date;
+  userId: string | null;
+  registrationId: string | null;
+  questionId: string;
+  optionTitle: string;
+  optionSubTitle: string | null;
+  accepted: boolean | null;
+  voteScore: string;
+  fundingRequest: string | null;
+  forumQuestion: {
+    id: string;
+    createdAt: string;
+    updatedAt: string;
+    description: string | null;
+    cycleId: string;
+    title: string;
+  };
+}[];

packages/berlin/src/_components/ui/navigation-menu.tsx

@@ -0,0 +1,117 @@
+import * as React from 'react';
+import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
+import { cva } from 'class-variance-authority';
+
+import { cn } from '@/lib/utils';
+
+const NavigationMenu = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Root
+    ref={ref}
+    className={cn('relative z-10 flex max-w-max flex-1 items-center justify-center', className)}
+    {...props}
+  >
+    {children}
+  </NavigationMenuPrimitive.Root>
+));
+NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
+
+const NavigationMenuList = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.List
+    ref={ref}
+    className={cn('group flex flex-1 list-none items-center justify-center space-x-1', className)}
+    {...props}
+  />
+));
+NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
+
+const NavigationMenuItem = NavigationMenuPrimitive.Item;
+
+const navigationMenuTriggerStyle = cva();
+// "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50"
+
+const NavigationMenuTrigger = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Trigger
+    ref={ref}
+    className={cn(navigationMenuTriggerStyle(), 'group', className)}
+    {...props}
+  >
+    {children}
+  </NavigationMenuPrimitive.Trigger>
+));
+NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
+
+const NavigationMenuContent = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Content
+    ref={ref}
+    className={cn(
+      'absolute right-0',
+      'bg-primary absolute w-fit',
+      'data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52',
+      'origin-top-center bg-primary text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 absolute mt-4 h-[var(--radix-navigation-menu-viewport-height)] w-fit overflow-hidden rounded-md shadow-lg',
+
+      className,
+    )}
+    {...props}
+  />
+));
+NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
+
+const NavigationMenuLink = NavigationMenuPrimitive.Link;
+
+const NavigationMenuViewport = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
+>(({ className, ...props }, ref) => (
+  <div className={cn('absolute left-0 top-full flex justify-center')}>
+    <NavigationMenuPrimitive.Viewport
+      className={cn(
+        'origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]',
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  </div>
+));
+NavigationMenuViewport.displayName = NavigationMenuPrimitive.Viewport.displayName;
+
+const NavigationMenuIndicator = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Indicator
+    ref={ref}
+    className={cn(
+      'data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden',
+      className,
+    )}
+    {...props}
+  >
+    <div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
+  </NavigationMenuPrimitive.Indicator>
+));
+NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayName;
+
+export {
+  navigationMenuTriggerStyle,
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+};

packages/berlin/src/components/cycles/Cycles.tsx

@@ -0,0 +1,31 @@
+import { GetCycleResponse } from 'api';
+import { Body } from '../typography/Body.styled';
+
+type CyclesProps = {
+  cycles: GetCycleResponse[] | undefined;
+  errorMessage: string;
+};
+
+function Cycles({ cycles, errorMessage }: CyclesProps) {
+  const formatDate = (date: string) => {
+    const eventEndDate = new Date(date);
+    return new Intl.DateTimeFormat('en-US', { month: 'long', day: 'numeric' }).format(eventEndDate);
+  };
+
+  return (
+    <>
+      {cycles?.length ? (
+        cycles.map((cycle) => (
+          <div className='flex flex-col border-secondary w-full p-4 gap-4' key={cycle.id}>
+            <Body>{cycle.forumQuestions[0]?.questionTitle}</Body>
+            <Body>{formatDate(cycle.endAt)}</Body>
+          </div>
+        ))
+      ) : (
+        <Body>{errorMessage}</Body>
+      )}
+    </>
+  );
+}
+
+export default Cycles;

packages/berlin/src/components/cycles/index.ts

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

packages/berlin/src/components/event-card/EventCard.styled.tsx

@@ -3,7 +3,7 @@ import { FlexColumn } from '../containers/FlexColumn.styled';
 import { FlexRowToColumn } from '../containers/FlexRowToColumn.styled';
 
 export const Card = styled(FlexRowToColumn)`
-  border-radius: 1rem;
+  border-radius: 0.5rem;
   border: 1px solid var(--color-black);
   overflow: hidden;
   width: 100%;

packages/berlin/src/components/event-card/EventCard.tsx

@@ -15,7 +15,7 @@ type EventCardProps = {
 
 function EventCard({ event, onClick }: EventCardProps) {
   return (
-    <Card>
+    <Card $gap="0">
       <ImageContainer>
         <img src={event.imageUrl} alt={`${event.name} image`} />
       </ImageContainer>

packages/berlin/src/components/footer/Footer.tsx

@@ -1,27 +1,25 @@
 import { useAppStore } from '../../store';
-import { FlexRow } from '../containers/FlexRow.styled';
 import { Link as RouterLink } from 'react-router-dom';
-import { Copy, FooterContainer, SyledFooter } from './Footer.styled';
 import footerData from '../../data/footer';
 
 function Footer() {
   const theme = useAppStore((state) => state.theme);
 
   return (
-    <SyledFooter>
-      <FooterContainer $gap="0.75rem" $align="center">
+    <footer className="bg-primary border-secondary border-t py-4 text-sm">
+      <section className="mx-auto flex w-[min(90%,1080px)] flex-col items-center gap-2">
         {footerData.copy.map(({ id, text }) => (
-          <Copy key={id}>{text}</Copy>
+          <p key={id}>{text}</p>
         ))}
-        <FlexRow $justify="center">
+        <div className="flex">
           {footerData.logos.map((logo) => (
             <RouterLink key={logo.src} to={logo.link}>
               <img src={`/logos/${logo.src}-${theme}.svg`} alt={logo.alt} height={24} width={24} />
             </RouterLink>
           ))}
-        </FlexRow>
-      </FooterContainer>
-    </SyledFooter>
+        </div>
+      </section>
+    </footer>
   );
 }
 

packages/berlin/src/components/form/FormInput.tsx → packages/berlin/src/components/form-input/FormInput.tsx

@@ -1,8 +1,8 @@
 import { FieldValues, Path, UseFormReturn } from 'react-hook-form';
-import { SelectInput } from './SelectInput';
-import { TextAreaInput } from './TextAreaInput';
-import { TextInput } from './TextInput';
-import { NumberInput } from './NumberInput';
+import { FormSelectInput } from './FormSelectInput';
+import { FormTextAreaInput } from './FormTextAreaInput';
+import { FormTextInput } from './FormTextInput';
+import { FormNumberInput } from './FormNumberInput';
 
 export function FormInput<T extends FieldValues>(props: {
   form: UseFormReturn<T>;
@@ -15,7 +15,7 @@ export function FormInput<T extends FieldValues>(props: {
   switch (props.type) {
     case 'TEXT':
       return (
-        <TextInput
+        <FormTextInput
           form={props.form}
           name={props.name}
           label={props.label}
@@ -24,7 +24,7 @@ export function FormInput<T extends FieldValues>(props: {
       );
     case 'TEXTAREA':
       return (
-        <TextAreaInput
+        <FormTextAreaInput
           form={props.form}
           name={props.name}
           label={props.label}
@@ -33,7 +33,7 @@ export function FormInput<T extends FieldValues>(props: {
       );
     case 'SELECT':
       return (
-        <SelectInput
+        <FormSelectInput
           form={props.form}
           name={props.name}
           label={props.label}
@@ -43,7 +43,7 @@ export function FormInput<T extends FieldValues>(props: {
       );
     case 'NUMBER':
       return (
-        <NumberInput
+        <FormNumberInput
           form={props.form}
           name={props.name}
           label={props.label}

packages/berlin/src/components/form/NumberInput.tsx → packages/berlin/src/components/form-input/FormNumberInput.tsx

@@ -1,7 +1,7 @@
 import { Controller, FieldValues, Path, UseFormReturn } from 'react-hook-form';
 import Input from '../input';
 
-export function NumberInput<T extends FieldValues>(props: {
+export function FormNumberInput<T extends FieldValues>(props: {
   form: UseFormReturn<T>;
   name: Path<T>;
   label: string;