Please modify the following nextjs project so that they interface with the backend. Give ne the full code for each file back.

Here is the backend docs
```
REST API Documentation
Base URL
/api/v1
Authentication
Za pristup većini ruta potrebno je imati JWT Bearer Token.

POST /user/login
Description
Autentikacija korisnika.
Request Body
    • username (string, required) - Jedinstveno korisničko ime.
    • password (string, required) - Lozinka korisnika.
Json:
{
  "username": "user_example",
  "password": "password_example"
}

POST /user/register
Description
Registracija novog korisnika.
Request Body
    • username (string, required) - Jedinstveno korisničko ime.
    • password (string, required) - Lozinka korisnika.
    • email (string, required) - Jedinstvena email adresa.
Json:
{
  "username": "user_example",
  "password": "password_example",
  "email": "email@example.com"
}

GET /user/profile
Description
Dohvaća korisnički profil.
Headers
    • Authorization: Bearer JWT Token

POST /report/submit
Description
Podnošenje izvještaja o prirodnoj katastrofi.
Request Body
    • disasterType (enum, required) - Tip katastrofe (vidi dostupne vrijednosti u ENUM sekciji).
    • location (object, required) - Lokacija s koordinatama katastrofe.
        ◦ latitude (float, required) - Geografska širina.
        ◦ longitude (float, required) - Geografska dužina.
    • description (string, optional, max=500) - Opis situacije (maksimalno 500 znakova).


Example
Json:
{
  "disasterType": "EARTHQUAKE",
  "location": {
    "latitude": 46.106167,
    "longitude": 16.697167
  },
  "description": "Description of the event"
}
Headers
    • Authorization: Bearer JWT Token

GET /report/all
Description
Dohvaća listu svih izvještaja o katastrofama.
Headers
    • Authorization: Bearer JWT Token







ENUMS
DisasterType
Moguće vrijednosti za tip katastrofe:
    • EARTHQUAKE
    • FLOOD
    • FIRE
    • HURRICANE
    • TORNADO
    • TSUNAMI
    • VOLCANO
    • OTHER
```
index.tsx
```
// import GoogleMapParent from "@/components/maps/GoogleMap";
import UserAddReport from "@/components/maps/UserAddReport";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import UserIcon from "@/components/user/UserIcon";
import { Inter } from 'next/font/google'
import dynamic from 'next/dynamic';

const GoogleMapParent = dynamic(() => import('@/components/maps/GoogleMap'), { 
  ssr: false 
});
const inter = Inter({ subsets: ['latin'] })

export default function Home() {
  return (
    <div>
      <style jsx global>{`
        html {
          font-family: ${inter.style.fontFamily};
        }
      `}</style>
      <GoogleMapParent />
      <div className="absolute top-0 left-0 w-full">
        <div className="p-4 w-full flex">
          <UserIcon />
        </div>
      </div>
      <div className="absolute bottom-0 left-0 w-full">
        <div className="p-4 pb-8 lg:p-16 lg:px-28 w-full flex justify-end">
          <UserAddReport />
        </div>
        {/* <Link href="/about">
        <Button>
          About
        </Button>
      </Link> */}
      </div>
    </div>
  );
}
```
login.tsx
```
import * as React from "react";

import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import Link from "next/link";

function Login() {
  return (
    <div className="w-full h-screen flex items-center justify-center p-4">
      <Card className="max-w-[350px] w-full">
        <CardHeader>
          <CardTitle className="text-3xl">Prijava</CardTitle>
          <CardDescription>
            Prijavi se na svoj korisnicki racun ili se registriraj ovdje.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <form>
            <div className="grid w-full items-center gap-4">
              <div className="flex flex-col space-y-1.5">
                <Input id="email" type="email" placeholder="Email" />
              </div>
              <div className="flex flex-col space-y-1.5">
                <Input id="password" type="password" placeholder="Sifra" />
              </div>
            </div>
          </form>
          <div className="w-full pt-4">
            <Button className="w-full">Prijava</Button>
          </div>
          <div className="pt-4">
            <p className="text-sm text-center">
              Nemate korisnicki racun?{" "}
              <Link href="/register" className="text-blue-500">
                Registriraj se
              </Link>
            </p>
          </div>
        </CardContent>
        <CardFooter className="flex justify-between">
          <Link href="/" className="w-full">
            <Button className="w-full" variant={"outline"}>
              <img
                src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Google_%22G%22_logo.svg/768px-Google_%22G%22_logo.svg.png"
                className="w-6 h-6 mr-2"
                alt="google logo"
              />
              Login With Google
            </Button>
          </Link>
        </CardFooter>
      </Card>
    </div>
  );
}

export default Login;
```
register.tsx
```
import * as React from "react";

import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import Link from "next/link";

function Login() {
  return (
    <div className="w-full h-screen flex items-center justify-center p-4">
      <Card className="max-w-[350px] w-full">
        <CardHeader>
          <CardTitle className="text-3xl">Prijava</CardTitle>
          <CardDescription>
            Prijavi se na svoj korisnicki racun ili se registriraj ovdje.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <form>
            <div className="grid w-full items-center gap-4">
              <div className="flex flex-col space-y-1.5">
                <Input id="name" placeholder="Ime" />
              </div>
              <div className="flex flex-col space-y-1.5">
                <Input id="last_name" placeholder="Prezime" />
              </div>
              <div className="flex flex-col space-y-1.5">
                <Input id="email" type="email" placeholder="Vas email" />
              </div>
              <div className="flex flex-col space-y-1.5">
                <Input id="password" type="password" placeholder="Vasa sifra" />
              </div>
              <div className="flex flex-col space-y-1.5">
                <Input
                  id="repeat_password"
                  type="password"
                  placeholder="Ponovite sifru"
                />
              </div>
            </div>
          </form>
          <div className="w-full pt-4">
            <Button className="w-full">Prijava</Button>
          </div>
          <div className="pt-4">
            <p className="text-sm text-center">
              Vec imate racun?{" "}
              <Link href="/login" className="text-blue-500">
                Prijavite se
              </Link>
            </p>
          </div>
        </CardContent>
        <CardFooter className="flex justify-between">
          <Link href="/" className="w-full">
            <Button className="w-full" variant={"outline"}>
              <img
                src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Google_%22G%22_logo.svg/768px-Google_%22G%22_logo.svg.png"
                className="w-6 h-6 mr-2"
                alt="google logo"
              />
              Login With Google
            </Button>
          </Link>
        </CardFooter>
      </Card>
    </div>
  );
}

export default Login;
```