Index: bus-n-go-pavel-216049/bus-n-go-frontend/src/app/components/controls/control/control.component.css
===================================================================
--- bus-n-go-pavel-216049/bus-n-go-frontend/src/app/components/controls/control/control.component.css	(revision baf4cc4b66f1d62e9dc9c2e71bcc078c9c3956a3)
+++ bus-n-go-pavel-216049/bus-n-go-frontend/src/app/components/controls/control/control.component.css	(revision baf4cc4b66f1d62e9dc9c2e71bcc078c9c3956a3)
@@ -0,0 +1,3 @@
+::ng-deep .mdc-notched-outline__notch {
+  border-right: none !important;
+}
Index: bus-n-go-pavel-216049/bus-n-go-frontend/src/app/components/controls/control/control.component.html
===================================================================
--- bus-n-go-pavel-216049/bus-n-go-frontend/src/app/components/controls/control/control.component.html	(revision baf4cc4b66f1d62e9dc9c2e71bcc078c9c3956a3)
+++ bus-n-go-pavel-216049/bus-n-go-frontend/src/app/components/controls/control/control.component.html	(revision baf4cc4b66f1d62e9dc9c2e71bcc078c9c3956a3)
@@ -0,0 +1,78 @@
+<div class="flex flex-col justify-center items-center">
+  <div class="w-full flex flex-col justify-center items-center p-10">
+    <h1 class="text-3xl p-5">Create new fine</h1>
+    <div class="w-1/3">
+      <form (ngSubmit)="onSubmit($event)" class="flex flex-wrap gap-x-5" [formGroup]="fineForm">
+        <mat-form-field>
+          <mat-label>Iznos</mat-label>
+          <input formControlName="iznos" matInput placeholder="1000" value="" type="number">
+        </mat-form-field>
+
+        <mat-checkbox class="w-1/3" formControlName="plateno">Plateno</mat-checkbox>
+
+        <mat-form-field>
+          <mat-label>Dokument</mat-label>
+          <input formControlName="dokument" matInput placeholder="DC-1234" value="" type="text">
+        </mat-form-field>
+
+        <mat-form-field (click)="onClick()" [appearance]="'outline'">
+          <mat-label>Select patnik (if is registered)</mat-label>
+          <mat-select formControlName="patnikId">
+            @for (passenger of passengers; track passenger.email) {
+              <mat-option [value]="passenger.id">{{ passenger.name }} -> {{ passenger.email }}</mat-option>
+            }
+          </mat-select>
+        </mat-form-field>
+
+        <mat-form-field>
+          <mat-label>Telefon</mat-label>
+          <input formControlName="telefon" matInput placeholder="07x xxx xxx" value="" type="text">
+        </mat-form-field>
+
+        <mat-form-field>
+          <mat-label>Adresa</mat-label>
+          <input formControlName="adresa" matInput placeholder="ul. Jane Sandanski" value="" type="text">
+        </mat-form-field>
+
+        <mat-form-field>
+          <mat-label>Ime</mat-label>
+          <input formControlName="ime" matInput placeholder="Zoran Stojkovski" value="" type="text">
+        </mat-form-field>
+
+        <button class="w-3/4" type="submit" mat-flat-button>Create new fine</button>
+      </form>
+    </div>
+  </div>
+
+  <div class="relative overflow-x-auto">
+    <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
+      <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
+      <tr>
+        <th scope="col" class="px-6 py-3">#</th>
+        <th scope="col" class="px-6 py-3">Conductor</th>
+        <th scope="col" class="px-6 py-3">Passenger</th>
+        <th scope="col" class="px-6 py-3">Date Created</th>
+        <th scope="col" class="px-6 py-3">Payed</th>
+        <th scope="col" class="px-6 py-3">Date Payed</th>
+
+      </tr>
+      </thead>
+      <tbody>
+
+        @for (fine of fines; track fine.id) {
+          <tr>
+            <td class="px-6 py-4">
+              {{ fine.id }}
+            </td>
+            <td class="px-6 py-4">{{ fine.kondukter.name }}</td>
+            <td class="px-6 py-4">{{ fine.ime }}{{ fine.patnik?.name }}</td>
+            <td class="px-6 py-4">{{ fine.dateCreated }}</td>
+            <td class="px-6 py-4">{{ fine.plateno }}</td>
+            <td class="px-6 py-4">{{ fine.datePayed || 'not payed' }}</td>
+          </tr>
+        }
+      </tbody>
+    </table>
+  </div>
+
+</div>
Index: bus-n-go-pavel-216049/bus-n-go-frontend/src/app/components/controls/control/control.component.ts
===================================================================
--- bus-n-go-pavel-216049/bus-n-go-frontend/src/app/components/controls/control/control.component.ts	(revision baf4cc4b66f1d62e9dc9c2e71bcc078c9c3956a3)
+++ bus-n-go-pavel-216049/bus-n-go-frontend/src/app/components/controls/control/control.component.ts	(revision baf4cc4b66f1d62e9dc9c2e71bcc078c9c3956a3)
@@ -0,0 +1,83 @@
+import {Component, OnInit} from '@angular/core';
+import {ActivatedRoute, Router} from "@angular/router";
+import {ControlsService} from "../../../services/controls/controls.service";
+import {FineResponse} from "../../../model/responses/FineResponse";
+import {MatInputModule} from '@angular/material/input';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators} from '@angular/forms';
+import {MatOption} from "@angular/material/core";
+import {MatSelect} from "@angular/material/select";
+import {UserService} from "../../../services/user/user.service";
+import {UserResponse} from "../../../model/responses/UserResponse";
+import {MatButton} from "@angular/material/button";
+import {MatCheckbox} from "@angular/material/checkbox";
+import {FineRequest} from "../../../model/requests/FineRequest";
+import {FineService} from "../../../services/fine/fine.service";
+import {Subject, switchMap} from "rxjs";
+
+@Component({
+  selector: 'app-control',
+  standalone: true,
+  imports: [
+    FormsModule, MatFormFieldModule, MatInputModule, ReactiveFormsModule, MatOption, MatSelect, MatButton, MatCheckbox
+  ],
+  templateUrl: './control.component.html',
+  styleUrl: './control.component.css'
+})
+export class ControlComponent implements OnInit {
+  controlId: number = +this.route.snapshot.paramMap.get('id')!!;
+  fines: FineResponse[] = []
+  passengers: UserResponse[] = []
+
+  fineForm: FormGroup = new FormGroup({
+    dokument: new FormControl(null, [Validators.required]),
+    plateno: new FormControl(null, [Validators.required]),
+    iznos: new FormControl(null, [Validators.required]),
+    patnikId: new FormControl(null, []),
+    telefon: new FormControl(null, []),
+    ime: new FormControl(null, []),
+    adresa: new FormControl(null, []),
+    kontrolaId: new FormControl(this.controlId, []),
+  })
+  private refreshFines$ = new Subject<void>();
+
+  constructor(private route: ActivatedRoute, private router: Router,
+              private controlsService: ControlsService,
+              private userService: UserService,
+              private fineService: FineService) {
+  }
+
+  ngOnInit(): void {
+    this.controlId = +this.route.snapshot.paramMap.get('id')!!
+    this.refreshFines$.pipe(
+      switchMap(() => this.controlsService.getControlInfo(this.controlId))
+    ).subscribe({
+      next: response => {
+        this.fines = response
+      }
+    })
+    this.refreshFines$.next()
+  }
+
+
+  onClick() {
+    this.userService.getAllPassengers().subscribe(
+      res => {
+        this.passengers = res;
+      }
+    )
+  }
+
+  protected readonly onsubmit = onsubmit;
+
+  onSubmit($event: any) {
+    console.log($event)
+    console.log(this.fineForm.value)
+    this.fineService.createFine(this.fineForm.value as FineRequest).subscribe({
+      next: res => {
+        console.log(res)
+        this.refreshFines$.next()
+      }
+    })
+  }
+}
Index: bus-n-go-pavel-216049/bus-n-go-frontend/src/app/components/controls/controls/controls.component.css
===================================================================
--- bus-n-go-pavel-216049/bus-n-go-frontend/src/app/components/controls/controls/controls.component.css	(revision baf4cc4b66f1d62e9dc9c2e71bcc078c9c3956a3)
+++ bus-n-go-pavel-216049/bus-n-go-frontend/src/app/components/controls/controls/controls.component.css	(revision baf4cc4b66f1d62e9dc9c2e71bcc078c9c3956a3)
@@ -0,0 +1,3 @@
+::ng-deep .mdc-notched-outline__notch {
+  border-right: none !important;
+}
Index: bus-n-go-pavel-216049/bus-n-go-frontend/src/app/components/controls/controls/controls.component.html
===================================================================
--- bus-n-go-pavel-216049/bus-n-go-frontend/src/app/components/controls/controls/controls.component.html	(revision baf4cc4b66f1d62e9dc9c2e71bcc078c9c3956a3)
+++ bus-n-go-pavel-216049/bus-n-go-frontend/src/app/components/controls/controls/controls.component.html	(revision baf4cc4b66f1d62e9dc9c2e71bcc078c9c3956a3)
@@ -0,0 +1,51 @@
+<div class="w-full h-full flex flex-col justify-center items-center">
+
+  <div>
+    <div>
+      <mat-form-field (click)="onClick()" [appearance]="'outline'">
+        <mat-label>Select instance</mat-label>
+        <mat-select (selectionChange)="onInstancePick($event)">
+          @for (instance of instances; track instance.id) {
+            <mat-option [value]="instance.id">{{ instance.line.ime }} -> {{instance.direction.pravec}}</mat-option>
+          }
+        </mat-select>
+      </mat-form-field>
+    </div>
+
+      <button mat-flat-button (click)="onStart()">
+        Start new
+      </button>
+
+
+  </div>
+
+
+  <div class="relative overflow-x-auto">
+    <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
+      <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
+      <tr>
+        <th scope="col" class="px-6 py-3">Link</th>
+        <th scope="col" class="px-6 py-3">Conductor</th>
+        <th scope="col" class="px-6 py-3">Route Instance</th>
+        <th scope="col" class="px-6 py-3">Date Created</th>
+
+      </tr>
+      </thead>
+      <tbody>
+
+        @for (control of controls; track control.id) {
+          <tr>
+            <td class="px-6 py-4" [routerLink]="[control.id]">
+              <a class="text-blue-700 cursor-pointer">Go to control</a>
+            </td>
+            <td class="px-6 py-4">{{control.kondukter.name}}</td>
+            <td class="px-6 py-4">{{control.instancaNaLinija.line.ime}} - {{control.instancaNaLinija.direction.pravec}} - {{control.instancaNaLinija.driver.name}}</td>
+            <td class="px-6 py-4">{{control.dateCreated}}</td>
+          </tr>
+        }
+      </tbody>
+    </table>
+  </div>
+
+
+</div>
Index: bus-n-go-pavel-216049/bus-n-go-frontend/src/app/components/controls/controls/controls.component.ts
===================================================================
--- bus-n-go-pavel-216049/bus-n-go-frontend/src/app/components/controls/controls/controls.component.ts	(revision baf4cc4b66f1d62e9dc9c2e71bcc078c9c3956a3)
+++ bus-n-go-pavel-216049/bus-n-go-frontend/src/app/components/controls/controls/controls.component.ts	(revision baf4cc4b66f1d62e9dc9c2e71bcc078c9c3956a3)
@@ -0,0 +1,61 @@
+import {Component, OnInit} from '@angular/core';
+import {ControlsService} from "../../../services/controls/controls.service";
+import {ControlsResponse} from "../../../model/responses/ControlsResponse";
+import {Router, RouterLink} from "@angular/router";
+import {MatButton} from "@angular/material/button";
+import {MatFormField, MatLabel} from "@angular/material/form-field";
+import {MatOption} from "@angular/material/core";
+import {MatSelect, MatSelectChange} from "@angular/material/select";
+import {RouteInstanceService} from "../../../services/route-instance/route-instance.service";
+import {RouteInstanceResponse} from "../../../model/responses/RouteInstanceResponse";
+
+@Component({
+  selector: 'app-controls',
+  standalone: true,
+  imports: [
+    RouterLink,
+    MatButton,
+    MatFormField,
+    MatLabel,
+    MatOption,
+    MatSelect
+  ],
+  templateUrl: './controls.component.html',
+  styleUrl: './controls.component.css'
+})
+export class ControlsComponent implements OnInit {
+  controls: ControlsResponse[] = []
+  instances: RouteInstanceResponse[] = []
+
+  instanceId: number | undefined;
+
+  constructor(private _controlsService: ControlsService,
+              private _routeInstanceService: RouteInstanceService,
+              private router: Router) {
+  }
+
+  ngOnInit() {
+    this._controlsService.getControls().subscribe(controls => {
+      this.controls = controls
+    })
+
+
+  }
+
+  onClick() {
+    this._routeInstanceService.getAll().subscribe(instances => this.instances = instances)
+  }
+
+  onInstancePick(event: MatSelectChange) {
+    this.instanceId = event.value
+  }
+
+  onStart() {
+    if (this.instanceId) {
+      this._controlsService.start(this.instanceId).subscribe(response => {
+        console.log(response);
+        this.router.navigate(['/controls', response.id])
+      })
+    }
+  }
+}
Index: bus-n-go-pavel-216049/bus-n-go-frontend/src/app/components/controls/start-ccontrol/start-ccontrol.component.html
===================================================================
--- bus-n-go-pavel-216049/bus-n-go-frontend/src/app/components/controls/start-ccontrol/start-ccontrol.component.html	(revision baf4cc4b66f1d62e9dc9c2e71bcc078c9c3956a3)
+++ bus-n-go-pavel-216049/bus-n-go-frontend/src/app/components/controls/start-ccontrol/start-ccontrol.component.html	(revision baf4cc4b66f1d62e9dc9c2e71bcc078c9c3956a3)
@@ -0,0 +1,1 @@
+<p>start-ccontrol works!</p>
Index: bus-n-go-pavel-216049/bus-n-go-frontend/src/app/components/controls/start-ccontrol/start-ccontrol.component.ts
===================================================================
--- bus-n-go-pavel-216049/bus-n-go-frontend/src/app/components/controls/start-ccontrol/start-ccontrol.component.ts	(revision baf4cc4b66f1d62e9dc9c2e71bcc078c9c3956a3)
+++ bus-n-go-pavel-216049/bus-n-go-frontend/src/app/components/controls/start-ccontrol/start-ccontrol.component.ts	(revision baf4cc4b66f1d62e9dc9c2e71bcc078c9c3956a3)
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-start-ccontrol',
+  standalone: true,
+  imports: [],
+  templateUrl: './start-ccontrol.component.html',
+  styleUrl: './start-ccontrol.component.css'
+})
+export class StartCcontrolComponent {
+
+}
