First version

frontend/.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

frontend/Dockerfile.dev

@@ -0,0 +1,21 @@
+FROM node:20 AS base
+WORKDIR /app
+RUN npm i -g pnpm
+COPY package.json pnpm-lock.yaml ./
+
+RUN pnpm install
+
+COPY . .
+
+FROM node:20-alpine3.19 as release
+WORKDIR /app
+RUN npm i -g pnpm
+
+COPY --from=base /app/node_modules ./node_modules
+COPY --from=base /app/package.json ./package.json
+COPY --from=base /app/.next ./.next
+COPY --from=base /app .
+
+EXPOSE 3000
+
+CMD ["pnpm", "dev"]

frontend/Dockerfile.prod

@@ -0,0 +1,65 @@
+FROM node:alpine AS base
+
+# Install dependencies only when needed
+FROM base AS deps
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+# Install dependencies based on the preferred package manager
+COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
+RUN \
+  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
+  elif [ -f package-lock.json ]; then npm ci; \
+  elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i --frozen-lockfile; \
+  else echo "Lockfile not found." && exit 1; \
+  fi
+
+
+# Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+# Next.js collects completely anonymous telemetry data about general usage.
+# Learn more here: https://nextjs.org/telemetry
+# Uncomment the following line in case you want to disable telemetry during the build.
+# ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN yarn build
+
+# If using npm comment out above and use below instead
+# RUN npm run build
+
+# Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+# Uncomment the following line in case you want to disable telemetry during runtime.
+ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+
+# Set the correct permission for prerender cache
+RUN mkdir .next
+RUN chown nextjs:nodejs .next
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT 3000
+# set hostname to localhost
+ENV HOSTNAME "0.0.0.0"
+
+CMD ["node", "server.js"]

frontend/app/api/meals/route.ts

@@ -0,0 +1,10 @@
+export async function GET() {
+  const res = await fetch('http://backend:8000/api/meals', {
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+  const data = await res.json();
+
+  return Response.json(data);
+}

frontend/app/api/orders/route.ts

@@ -0,0 +1,42 @@
+import { NextRequest } from "next/server";
+
+export async function GET(request: NextRequest) {
+  const searchParams = request.nextUrl.searchParams
+  const query = searchParams.get('waiter')
+  const res = await fetch(!!query ? `http://backend:8000/api/orders/?waiter=${query}` : 'http://backend:8000/api/orders/', {
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+  const data = await res.json();
+
+  return Response.json(data);
+}
+
+export async function POST(request: NextRequest) {
+  const body = await request.json()
+  const res = await fetch('http://backend:8000/api/orders/', {
+    method: 'POST',
+    body: JSON.stringify(body),
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+
+  return Response.json({ status: res.status });
+}
+
+export async function PUT(request: NextRequest) {
+  const searchParams = request.nextUrl.searchParams
+  const query = searchParams.get('id')
+  const body = await request.json()
+  const res = await fetch(`http://backend:8000/api/orders/${query}/`, {
+    method: 'PUT',
+    body: JSON.stringify(body),
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+
+  return Response.json({ status: res.status });
+}

frontend/app/api/tools.ts

@@ -0,0 +1,16 @@
+"use client"
+
+import useSWR from 'swr'
+
+export const fetcher = (...args) => fetch(...args).then(res => res.json()) // @ts-ignore
+
+
+export function useUser (id: number) {
+  const { data, error, isLoading } = useSWR(`/api/waiters/${id}`, fetcher)
+ 
+  return {
+    user: data,
+    isLoading,
+    isError: error
+  }
+}

frontend/app/api/waiters/route.ts

@@ -0,0 +1,10 @@
+export async function GET() {
+  const res = await fetch('http://backend:8000/api/waiters', {
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+  const data = await res.json();
+
+  return Response.json(data);
+}

frontend/app/globals.css

@@ -0,0 +1,48 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+
+form#form p {
+  @apply flex flex-col;
+}
+
+form#form label {
+  @apply text-gray-700 font-bold text-sm;
+}
+
+form#form input:not([type='checkbox']),
+textarea {
+  @apply p-1 ps-2 transition ease-in-out focus:outline-none border-b-2 border-b-gray-400 mb-2 focus:bg-gray-100 focus:border-gray-600 appearance-none;
+}
+
+form#form select {
+  @apply p-2 ps-2 rounded-md bg-gray-100;
+}
+
+select.form {
+  @apply p-2 ps-2 rounded-md bg-gray-200;
+}
+
+.dropdown:focus-within .dropdown-menu {
+  /* @apply block; */
+  display: block;
+}
+
+@layer components {
+  button {
+    @apply std-btn
+  }
+
+  .prose-with-table {
+    @apply prose-table:max-w-screen-2xl prose-table:text-center max-w-screen-xl w-full prose-td:py-1 prose-td:px-2 prose-th:py-1 prose-th:px-2 prose-td:align-middle prose-th:align-middle prose-thead:mx-auto;
+  }
+
+  .std-btn {
+    @apply inline-flex text-center justify-center items-center no-underline px-3 py-2 text-sm font-medium leading-5 text-gray-700 transition duration-150 ease-in-out bg-white border border-gray-300 rounded-md hover:text-gray-700 focus:outline-none focus:border-blue-300 active:bg-gray-50 active:text-gray-800;
+  }
+
+  .std-menu-item {
+    @apply text-gray-700 flex justify-between w-full px-4 py-2 text-sm leading-5 text-left
+  }
+}

frontend/app/kitchen/page.tsx

@@ -0,0 +1,106 @@
+'use client';
+
+import { fetcher } from '@/app/api/tools';
+import useSWR from 'swr';
+import Link from 'next/link';
+
+type Order = {
+  id: number;
+  created_on: string;
+  updated_on: string;
+  waiter: number;
+  waiter_name: string;
+  data: [{ item: string; additional_info: string; finished: boolean }];
+  status: string;
+  status_name: string;
+};
+
+export default function Home() {
+  const { data, mutate, error, isLoading } = useSWR(`/api/orders`, fetcher, {
+    refreshInterval: 1000,
+  });
+
+  const update_finished = (o: number, i: number, v: boolean) => {
+    let d = data;
+    d[o].data[i].finished = v;
+    console.log(v);
+    fetch(`/api/orders?id=${d[o].id}`, {
+      method: 'PUT',
+      body: JSON.stringify(d[o]),
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    }).then(() => mutate(d));
+  };
+
+  const update_status = (o: number, v: number) => {
+    let d = data;
+    d[o].status = v;
+    console.log(v);
+    fetch(`/api/orders?id=${d[o].id}`, {
+      method: 'PUT',
+      body: JSON.stringify(d[o]),
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    }).then(() => mutate(d));
+  };
+
+  if (error) return <div>Błąd przy ładowaniu danych</div>;
+  if (isLoading) return <div>Ładowanie</div>;
+
+  return (
+    <>
+      <p className="text-4xl">Zamówienia:</p>
+      <ul className="max-w-screen-md w-full">
+        {data?.map((order: Order, oi: number) => (
+          <li key={order.id} className="m-2 p-2 border-2 bg-gray-100">
+            <h1 className="text-xl">
+              <span className="font-mono">
+                {'['}
+                {String(order.id % 1000).padStart(3, '0')}
+                {']'}
+              </span>{' '}
+              - {new Date(order.updated_on).toLocaleTimeString('pl-PL')}
+            </h1>
+            <h2 className="text-xl">{order.waiter_name}</h2>
+            <h3>
+              <select
+                value={order.status}
+                onChange={(e) =>
+                  update_status(oi, e.target.value as unknown as number)
+                }
+                className='form'
+              >
+                <option value="1">Zamówienie złożone</option>
+                <option value="2">Zamówienie w trakcie przygotowywania</option>
+                <option value="3">Zamówienie gotowe</option>
+                <option value="4">Zamówienie skończone</option>
+              </select>
+            </h3>
+            <div className="">
+              <ul>
+                {order.data.map((dish, i) => (
+                  <li
+                    key={dish.item}
+                    className="p-2 m-2 flex gap-4 bg-gray-200 border-2 border-gray-400"
+                  >
+                    <input
+                      type="checkbox"
+                      checked={dish.finished}
+                      onChange={(e) => update_finished(oi, i, e.target.checked)}
+                    />
+                    <div>
+                      <p className="text-lg">{dish.item}</p>
+                      <div>{dish.additional_info}</div>
+                    </div>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </li>
+        ))}
+      </ul>
+    </>
+  );
+}

frontend/app/layout.tsx

@@ -0,0 +1,23 @@
+import type { Metadata } from "next";
+import "./globals.css";
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="pl">
+      <body
+        className={`antialiased p-4 flex flex-col gap-2 items-center`}
+      >
+        {children}
+      </body>
+    </html>
+  );
+}

frontend/app/page.tsx

@@ -0,0 +1,18 @@
+import Image from 'next/image';
+import Link from 'next/link';
+
+export default function Home() {
+  return (
+    <>
+    <p className='text-xl'>Witamy</p>
+      <div className="flex gap-4">
+        <Link href={'/kitchen/'}>
+          <button>Kuchnia</button>
+        </Link>
+        <Link href={'/waiter/'}>
+          <button>Kelner</button>
+        </Link>
+      </div>
+    </>
+  );
+}

frontend/app/waiter/[id]/new/page.tsx

@@ -0,0 +1,147 @@
+'use client';
+
+import Link from 'next/link';
+import { useParams, useRouter } from 'next/navigation';
+import * as React from 'react';
+import { useForm, useFieldArray, useWatch, Control } from 'react-hook-form';
+import { fetcher } from '@/app/api/tools';
+import useSWR from 'swr';
+
+type FormValues = {
+  data: {
+    item: string;
+    additional_info: string;
+    finished: boolean;
+  }[];
+};
+
+export default function App() {
+  const { data, error, isLoading } = useSWR('/api/meals', fetcher);
+
+  const { id } = useParams();
+  const router = useRouter();
+  const {
+    register,
+    control,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<FormValues>({
+    defaultValues: {
+      data: [{ item: '', additional_info: '', finished: false }],
+    },
+    mode: 'onBlur',
+  });
+  const { fields, append, remove } = useFieldArray({
+    name: 'data',
+    control,
+  });
+  const onSubmit = (data: FormValues) => {
+    console.log(data);
+    fetch('/api/orders', {
+      method: 'POST',
+      body: JSON.stringify({ waiter: id, ...data }),
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    })
+      .then(({ status }) => console.log(status))
+      .then((_) => router.push(`/waiter/${id}`));
+  };
+
+  if (error) return <div>Błąd przy ładowaniu danych</div>;
+  if (isLoading) return <div>Ładowanie</div>;
+
+  return (
+    <>
+      <form
+        id="form"
+        onSubmit={handleSubmit(onSubmit)}
+        className="flex flex-col max-w-screen-md w-full my-4"
+      >
+        <p className="text-2xl text-center">Nowe zamówienie</p>
+        {fields.map((field, index) => {
+          return (
+            <div
+              key={field.id}
+              className="border-2 m-2 p-2 gap-4 flex flex-col items-stretch justify-around content-center"
+            >
+              <input
+                type="checkbox"
+                className="hidden"
+                {...register(`data.${index}.finished` as const, {
+                  required: false,
+                })}
+              />
+              <p className="basis-1/3">
+                <label htmlFor={`data.${index}.item`}>Danie</label>
+                <select
+                  {...register(`data.${index}.item` as const, {
+                    required: true,
+                  })}
+                  className={errors?.data?.[index]?.item ? 'error' : ''}
+                >
+                  <option value="Inne">Inne</option>
+                  {data?.map((data: { id: number; name: string }) => (
+                    <option key={data.name} value={data.name}>
+                      {data.name}
+                    </option>
+                  ))}
+                </select>
+              </p>
+              <p className="basis-1/3">
+                <label htmlFor={`data.${index}.additional_info`}>
+                  Dodatkowe informacje
+                </label>
+                <textarea
+                  placeholder="Dodatkowe informacje"
+                  {...register(`data.${index}.additional_info` as const, {
+                    required: false,
+                  })}
+                  className={
+                    errors?.data?.[index]?.additional_info ? 'error' : ''
+                  }
+                />
+              </p>
+              {fields.length > 1 ? (
+                <p className="basis-1/3 flex items-center justify-center">
+                  <button type="button" onClick={() => remove(index)}>
+                    Usuń
+                  </button>
+                </p>
+              ) : (
+                <></>
+              )}
+            </div>
+          );
+        })}
+
+        <button
+          type="button"
+          className="mx-auto"
+          onClick={() =>
+            append({
+              item: '',
+              additional_info: '',
+              finished: false,
+            })
+          }
+        >
+          Dodaj kolejne danie
+        </button>
+        <button
+          type="submit"
+          className={
+            'mt-10 mx-auto p-2 border-2 text-black hover:text-black ' +
+            (!!errors.data
+              ? 'bg-red-300 border-red-500'
+              : 'bg-green-300 border-green-500')
+          }
+          disabled={!!errors.data}
+        >
+          Złóż zamówienie
+        </button>
+      </form>
+      <Link href={`/waiter/${id}`} className='mt-10'><button>Powrót</button></Link>
+    </>
+  );
+}

frontend/app/waiter/[id]/page.tsx

@@ -0,0 +1,76 @@
+'use client';
+
+import { fetcher } from '@/app/api/tools';
+import useSWR from 'swr';
+import { useParams } from 'next/navigation';
+import Link from 'next/link';
+
+export default function Home() {
+  const { id } = useParams();
+  const { data, error, isLoading } = useSWR(
+    `/api/orders?waiter=${id}`,
+    fetcher,
+    {
+      refreshInterval: 1000,
+    }
+  );
+
+  if (error) return <div>Błąd przy ładowaniu danych</div>;
+  if (isLoading) return <div>Ładowanie</div>;
+
+  return (
+    <>
+      <p className="text-lg">
+        <Link href={`/waiter/${id}/new`}>
+          <button>Nowe zamówienie</button>
+        </Link>
+      </p>
+      <p className="text-4xl">Zamówienia:</p>
+      <ul className="max-w-screen-md w-full">
+        {data?.map(
+          (order: {
+            id: number;
+            created_on: string;
+            updated_on: string;
+            waiter: number;
+            waiter_name: string;
+            data: [
+              { item: string; additional_info: string; finished: boolean }
+            ];
+            status: string;
+            status_name: string;
+          }) => (
+            <li key={order.id} className="m-2 p-2 border-2 bg-gray-100">
+              <h1 className="text-xl">
+                <span className="font-mono">
+                  {'['}
+                  {String(order.id % 1000).padStart(3, '0')}
+                  {']'}
+                </span>{' '}
+                - {new Date(order.updated_on).toLocaleTimeString('pl-PL')}
+              </h1>
+              <h2 className="text-xl">{order.waiter_name}</h2>
+              <h3>{order.status_name}</h3>
+              <div className="">
+                <ul>
+                  {order.data.map((dish) => (
+                    <li
+                      key={dish.item}
+                      className="p-2 m-2 flex gap-4 bg-gray-200 border-2 border-gray-400"
+                    >
+                      <input type="checkbox" checked={dish.finished} readOnly />
+                      <div>
+                        <p className="text-lg">{dish.item}</p>
+                        <div>{dish.additional_info}</div>
+                      </div>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            </li>
+          )
+        )}
+      </ul>
+    </>
+  );
+}

frontend/app/waiter/page.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import Link from 'next/link';
+import { fetcher } from '@/app/api/tools';
+import useSWR from 'swr';
+
+export default function Home() {
+  const { data, error, isLoading } = useSWR('/api/waiters', fetcher);
+
+  if (error) return <div>Błąd przy ładowaniu danych</div>;
+  if (isLoading) return <div>Ładowanie</div>;
+
+  return (
+    <>
+      <p className="text-xl">Kelnerzy:</p>
+      <ul className="text-lg flex flex-col items-center gap-2">
+        {data?.map((data: { id: number; name: string }) => (
+          <li key={data.id}>
+            <Link href={`/waiter/${data.id}`}>
+              <button>{data.name}</button>
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </>
+  );
+}

frontend/eslint.config.mjs

@@ -0,0 +1,16 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+const eslintConfig = [
+  ...compat.extends("next/core-web-vitals", "next/typescript"),
+];
+
+export default eslintConfig;

frontend/next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;

frontend/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "frontend",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --turbopack",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "next": "15.1.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-hook-form": "^7.54.0",
+    "swr": "^2.2.5"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "15.1.0",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5"
+  }
+}

frontend/postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;

frontend/tailwind.config.ts

@@ -0,0 +1,19 @@
+import type { Config } from "tailwindcss";
+
+export default {
+  darkMode: "class",
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        background: "var(--background)",
+        foreground: "var(--foreground)",
+      },
+    },
+  },
+  plugins: [],
+} satisfies Config;

frontend/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}