Merge commit '06316e17152006aa1395930ad76efb0b86d46657' as 'frontend'

frontend/src/app/admin-view/account-mgmt/account-mgmt.component.html

@@ -0,0 +1,39 @@
+<div id="upper-bar">
+  <mat-form-field subscriptSizing="dynamic">
+    <mat-label>Wyszukaj</mat-label>
+    <input matInput (keyup)="filter($event)">
+  </mat-form-field>
+  <button mat-icon-button (click)="openUserCard()"><mat-icon>add</mat-icon></button>
+</div>
+<div class="mainc">
+  @if (ac.state() !== STATE.LOADED) {
+    <app-load-shade [state]="ac.state()" [error]="ac.error()" (refresh)="ac.refresh()"/>
+  }
+  <table mat-table [dataSource]="users">
+    <div matColumnDef="name">
+      <th mat-header-cell *matHeaderCellDef>Imię</th>
+      <td mat-cell *matCellDef="let element">{{element.fname}}</td>
+    </div>
+    <div matColumnDef="surname">
+      <th mat-header-cell *matHeaderCellDef>Nazwisko</th>
+      <td mat-cell *matCellDef="let element">{{element.surname}}</td>
+    </div>
+    <div matColumnDef="room">
+      <th mat-header-cell *matHeaderCellDef>Pokój</th>
+      <td mat-cell *matCellDef="let element">{{element.room}}</td>
+    </div>
+    <div matColumnDef="uname">
+      <th mat-header-cell *matHeaderCellDef>Nazwa użytkownika</th>
+      <td mat-cell *matCellDef="let element">{{element.uname}}</td>
+    </div>
+    <div matColumnDef="actions">
+      <th mat-header-cell *matHeaderCellDef>Karta użytkownika</th>
+      <td mat-cell *matCellDef="let element">
+        <button mat-mini-fab (click)="openUserCard(element._id)"><mat-icon>manage_accounts</mat-icon></button>
+      </td>
+    </div>
+    <tr mat-header-row *matHeaderRowDef="collumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: collumns"></tr>
+  </table>
+  <mat-paginator pageSize="9" [pageSizeOptions]="[9, 15, 20, 50, 160]"></mat-paginator>
+</div>

frontend/src/app/admin-view/account-mgmt/account-mgmt.component.scss

@@ -0,0 +1,30 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.mainc {
+  position: relative;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+mat-paginator {
+  margin-top: auto;
+}
+
+mat-form-field {
+  flex-grow: 1;
+}
+
+#upper-bar {
+  display: flex;
+}
+
+button[mat-icon-button] {
+  margin-left: 4pt;
+  margin-right: 4pt;
+  margin-top: 4pt;
+}

frontend/src/app/admin-view/account-mgmt/account-mgmt.component.spec.ts

@@ -0,0 +1,54 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { AccountMgmtComponent } from './account-mgmt.component'
+import { MatDialogModule } from '@angular/material/dialog'
+import { MatSnackBarModule } from '@angular/material/snack-bar'
+import { MatFormFieldModule } from '@angular/material/form-field'
+import { MatIconModule } from '@angular/material/icon'
+import { MatPaginatorModule } from '@angular/material/paginator'
+import { MatTableModule } from '@angular/material/table'
+import { MatInputModule } from '@angular/material/input'
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'
+import { AccountMgmtService } from './account-mgmt.service'
+import { LoadShadeComponent } from 'src/app/commonComponents/load-shade/load-shade.component'
+import { of } from 'rxjs'
+import { signal } from '@angular/core'
+import { STATE } from 'src/app/types/state'
+
+describe('AccountMgmtComponent', () => {
+  let component: AccountMgmtComponent
+  let fixture: ComponentFixture<AccountMgmtComponent>
+  let acMock
+
+  beforeEach(async () => {
+    acMock = {
+      accs: of([]),
+      state: signal(STATE.NOT_LOADED),
+      refresh: jasmine.createSpy('getAccs'),
+      error: signal(undefined)
+    }
+    await TestBed.configureTestingModule({
+      declarations: [AccountMgmtComponent, LoadShadeComponent],
+      providers: [{ provide: AccountMgmtService, useValue: acMock }],
+      imports: [
+        MatDialogModule,
+        MatSnackBarModule,
+        MatFormFieldModule,
+        MatIconModule,
+        MatPaginatorModule,
+        MatTableModule,
+        MatInputModule,
+        BrowserAnimationsModule,
+        MatProgressSpinnerModule,
+      ],
+    }).compileComponents()
+    fixture = TestBed.createComponent(AccountMgmtComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+})

frontend/src/app/admin-view/account-mgmt/account-mgmt.component.ts

@@ -0,0 +1,79 @@
+import { AfterViewInit, Component, inject, ViewChild } from '@angular/core'
+import { MatDialog } from '@angular/material/dialog'
+import { MatTableDataSource } from '@angular/material/table'
+import { MatPaginator } from '@angular/material/paginator'
+import { UserEditComponent, UserEditComponentInputData, UserEditComponentReturnData } from './user-edit/user-edit.component'
+import { LocalStorageService } from 'src/app/services/local-storage.service'
+import { Group } from 'src/app/types/group'
+import { User } from 'src/app/admin-view/account-mgmt/account.model'
+import { AccountMgmtService } from './account-mgmt.service'
+import { STATE } from 'src/app/types/state'
+
+@Component({
+  selector: 'app-account-mgmt',
+  templateUrl: './account-mgmt.component.html',
+  styleUrls: ['./account-mgmt.component.scss'],
+  standalone: false,
+})
+export class AccountMgmtComponent implements AfterViewInit {
+  protected groups: Group[] = []
+  users: MatTableDataSource<User>
+  @ViewChild(MatPaginator) paginator!: MatPaginator
+
+  protected ac = inject(AccountMgmtService)
+  private dialog = inject(MatDialog)
+  protected ls = inject(LocalStorageService)
+
+  constructor() {
+    this.users = new MatTableDataSource<User>()
+    this.users.filterPredicate = (
+      data: User,
+      filter: string
+    ): boolean => {
+      const dataStr = Object.keys(data)
+        .reduce((curr: string, key: string) => {
+          if (['_id', 'admin', 'groups', '__v', 'locked'].find(v => v == key)) {
+            return curr + ''
+          }
+          return curr + data[key as keyof User] + '⫂'
+        }, '')
+        .toLowerCase()
+      const filternew = filter.trim().toLowerCase()
+      return dataStr.indexOf(filternew) != -1
+    }
+    this.ac.refresh()
+    this.ac.accs.subscribe(d => {
+      this.users.data = d
+    })
+  }
+
+  protected get STATE(): typeof STATE {
+    return STATE
+  }
+
+  ngAfterViewInit() {
+    this.users.paginator = this.paginator
+  }
+
+  filter(event: Event) {
+    const value = (event.target as HTMLInputElement).value
+    this.users.filter = value.toLowerCase().trim()
+  }
+
+  openUserCard(id?: string) {
+    this.dialog
+      .open<
+        UserEditComponent,
+        UserEditComponentInputData,
+        UserEditComponentReturnData
+      >(UserEditComponent, {
+        data: { id: id, type: id ? 'edit' : 'new', groups: this.groups },
+      })
+      .afterClosed()
+      .subscribe(r => {
+        if (r) this.ac.refresh()
+      })
+  }
+
+  collumns = ['name', 'surname', 'uname', 'actions']
+}

frontend/src/app/admin-view/account-mgmt/account-mgmt.service.spec.ts

@@ -0,0 +1,96 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AccountMgmtService } from './account-mgmt.service';
+import { provideHttpClient } from '@angular/common/http';
+import { HttpTestingController, provideHttpClientTesting } from '@angular/common/http/testing';
+import { environment } from 'src/environments/environment';
+import { skip } from 'rxjs';
+
+describe('AccountMgmtService', () => {
+  let service: AccountMgmtService;
+  let httpTesting: HttpTestingController;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [
+        provideHttpClient(),
+        provideHttpClientTesting()
+      ]
+    });
+    httpTesting = TestBed.inject(HttpTestingController);
+    service = TestBed.inject(AccountMgmtService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+  it('should get user accounts', () => {
+    service.refresh()
+    const req = httpTesting.expectOne(environment.apiEndpoint + "/admin/accs", "Request to load all users")
+
+    expect(req.request.method).toBe("GET")
+
+    req.flush([])
+    httpTesting.verify()
+  })
+
+  describe('create user', () => {
+    xit('should create a user account and refresh list', () => {
+      const test_user = {
+        uname: "test",
+        groups: []
+      }
+      service.postAcc(test_user).subscribe(v => {
+        expect(v).toEqual(jasmine.objectContaining(test_user))
+      })
+      const req = httpTesting.expectOne(environment.apiEndpoint + "/admin/accs", "Request new user")
+
+      expect(req.request.method).toBe("POST")
+
+      req.flush({
+        ...test_user,
+        _id: "test_id"
+      })
+
+      const req2 = httpTesting.expectOne(environment.apiEndpoint + "/admin/accs", "Request to load all users")
+
+      expect(req2.request.method).toBe("GET")
+
+      // service.accs.pipe(skip(1)).subscribe(v => {
+      //   expect(v).toContain(createdUser)
+      // })
+
+
+      req2.flush([
+        {
+          ...test_user,
+          _id: "test_id"
+        }
+      ])
+      httpTesting.verify()
+    })
+  })
+
+  describe("delete user", () => {
+    it('should refresh accounts and not to contain deleted user', async () => {
+      service.deleteAcc("test").subscribe()
+      const req = httpTesting.expectOne(environment.apiEndpoint + "/admin/accs/test", "Request delete user")
+
+      expect(req.request.method).toBe("DELETE")
+
+      req.flush({ status: 200 })
+
+      const req2 = httpTesting.expectOne(environment.apiEndpoint + "/admin/accs", "Request to load all users")
+
+      expect(req2.request.method).toBe("GET")
+      service.accs.pipe(skip(1)).subscribe(v => {
+        expect(v).not.toContain(jasmine.objectContaining({ _id: "test" }))
+      })
+
+      req2.flush([])
+
+      httpTesting.verify()
+    })
+  })
+});

frontend/src/app/admin-view/account-mgmt/account-mgmt.service.ts

@@ -0,0 +1,109 @@
+import { HttpClient } from '@angular/common/http';
+import { inject, Injectable, signal } from '@angular/core';
+import { BehaviorSubject, catchError, map, of, tap } from 'rxjs';
+import { STATE } from 'src/app/types/state';
+import { Status } from 'src/app/types/status';
+import { User, UserAPI } from 'src/app/admin-view/account-mgmt/account.model';
+import { environment } from 'src/environments/environment';
+import { DateTime } from 'luxon';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AccountMgmtService {
+  private http = inject(HttpClient)
+
+  private _accs = new BehaviorSubject<User[]>([])
+  public readonly accs = this._accs.asObservable()
+  private _state = signal(STATE.NOT_LOADED);
+  public readonly state = this._state.asReadonly();
+  private _error = signal<string | undefined>(undefined);
+  public readonly error = this._error.asReadonly();
+  private _selAcc = new BehaviorSubject<User | null>(null)
+  public readonly selAcc = this._selAcc.asObservable()
+
+  public refresh() {
+    this.getAccs()
+  }
+
+  private getAccs() {
+    this._state.set(STATE.PENDING)
+    this.http.get
+      <UserAPI[]>
+      (environment.apiEndpoint + `/admin/accs`, { withCredentials: true })
+      .pipe(
+        catchError((err: Error) => {
+          this._state.set(STATE.ERROR)
+          this._error.set(err.message)
+          return of()
+        }),
+        map<UserAPI[], User[]>(v => {
+          return v.map(i => ({
+            ...i,
+            regDate: DateTime.fromISO(i.regDate)
+          }))
+        })
+      ).subscribe(v => {
+        this._error.set(undefined)
+        this._accs.next(v ?? [])
+        this._state.set(STATE.LOADED)
+      })
+  }
+
+  selectAccount(acc: User) {
+    this._selAcc.next(acc)
+  }
+
+  //#region legacy
+  postAcc(item: Omit<User, "_id" | "regDate">) {
+    return this.http.post<User>(
+      environment.apiEndpoint + `/admin/accs`,
+      item,
+      { withCredentials: true }
+    ).pipe(tap(v => {
+      if (v instanceof Array) this.refresh()
+    }))
+  }
+
+  putAcc(id: string, update: Partial<User>) {
+    return this.http.put<Status>(
+      environment.apiEndpoint + `/admin/accs/${id}`,
+      update,
+      { withCredentials: true }
+    )
+  }
+
+  resetPass(id: string) {
+    return this.http.patch<Status>(
+      environment.apiEndpoint + `/admin/accs/${id}/reset`,
+      undefined,
+      { withCredentials: true }
+    )
+  }
+
+  deleteAcc(id: string) {
+    return this.http.delete<Status>(
+      environment.apiEndpoint + `/admin/accs/${id}`,
+      { withCredentials: true }
+    )
+      .pipe(tap(v => {
+        if (v.status == 200) this.refresh()
+      }))
+  }
+
+  getUser(id: string) {
+    return this.http.get<
+      Omit<User, 'regDate'> & { lockout: boolean; regDate: string }
+    >(environment.apiEndpoint + `/admin/accs/${id}`, {
+      withCredentials: true,
+    })
+  }
+
+  clearLockout(id: string) {
+    return this.http.delete<Status>(
+      environment.apiEndpoint + `/admin/accs/${id}/lockout`,
+      { withCredentials: true }
+    )
+  }
+  //#endregion
+}

frontend/src/app/admin-view/account-mgmt/account.model.ts

@@ -0,0 +1,16 @@
+import { DateTime } from 'luxon'
+
+export interface User {
+  _id: string
+  uname: string
+  room?: string
+  admin?: string[]
+  locked?: boolean
+  fname?: string
+  surname?: string
+  groups: string[]
+  regDate: DateTime
+  defaultPage?: string
+}
+
+export type UserAPI = Omit<User, "regDate"> & {regDate: "string"}

frontend/src/app/admin-view/account-mgmt/user-delete/user-delete.component.html

@@ -0,0 +1,5 @@
+<h1 mat-dialog-title>Czy na pewno chcesz usunąć tego użytkownika</h1>
+<mat-dialog-actions align="end">
+    <button mat-button mat-dialog-close>Nie</button>
+    <button mat-button class="error-color" [mat-dialog-close]="true">Tak</button>
+</mat-dialog-actions>

frontend/src/app/admin-view/account-mgmt/user-delete/user-delete.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { UserDeleteComponent } from './user-delete.component'
+import { MatDialogModule } from '@angular/material/dialog'
+
+describe('UserDeleteComponent', () => {
+  let component: UserDeleteComponent
+  let fixture: ComponentFixture<UserDeleteComponent>
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [UserDeleteComponent],
+      imports: [MatDialogModule],
+    })
+    fixture = TestBed.createComponent(UserDeleteComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+})

frontend/src/app/admin-view/account-mgmt/user-delete/user-delete.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core'
+
+@Component({
+  selector: 'app-user-delete',
+  templateUrl: './user-delete.component.html',
+  styleUrls: ['./user-delete.component.scss'],
+  standalone: false,
+})
+export class UserDeleteComponent {}

frontend/src/app/admin-view/account-mgmt/user-edit/user-edit.component.html

@@ -0,0 +1,85 @@
+<h1 mat-dialog-title>Karta użytkownika</h1>
+<mat-dialog-content>
+  <form [formGroup]="form">
+    <div>
+      <mat-form-field appearance="outline">
+        <mat-label>Imię</mat-label>
+        <input type="text" matInput formControlName="fname">
+      </mat-form-field>
+      <mat-form-field appearance="outline">
+        <mat-label>Nazwisko</mat-label>
+        <input type="text" matInput formControlName="surname">
+      </mat-form-field>
+      <mat-form-field appearance="outline">
+        <mat-label>Pokój</mat-label>
+        <input type="text" matInput formControlName="room">
+      </mat-form-field>
+      <mat-form-field appearance="outline">
+        <mat-label>Grupy</mat-label>
+        <mat-select multiple formControlName="groups">
+          @for (item of adsyn.groups; track $index) {
+            <mat-option [value]="item._id">{{item.name}}</mat-option>
+          }
+        </mat-select>
+      </mat-form-field>
+      @if (data.type === 'edit') {
+        <span>Data rejestracji:<br>{{regDate?.toFormat('D')}}</span>
+      }
+    </div>
+    <div>
+      <mat-form-field appearance="outline">
+        <mat-label>Nazwa użytkownika</mat-label>
+        <input type="text" matInput required formControlName="uname">
+      </mat-form-field>
+      @if (data.type === "edit") {
+        <button mat-stroked-button (click)="resetPass()">Resetuj hasło</button>
+        @if (locked) {
+          <button mat-stroked-button class="error-color" (click)="toggleLock(false)"><mat-icon>lock</mat-icon>Blokada ręczna</button>
+        } @else {
+          <button mat-stroked-button (click)="toggleLock(true)">Zablokuj konto</button>
+        }
+        @if (lockout) {
+          <button mat-stroked-button class="error-color" (click)="disableLockout()"><mat-icon>lock_clock</mat-icon>Auto-Blokada</button>
+        } @else {
+          <button mat-stroked-button disabled>Auto-Blokada nieczynna</button>
+        }
+        @if (ls.permChecker("accs")) {
+          <mat-form-field>
+            <mat-label>Uprawnienia</mat-label>
+            <mat-select multiple formControlName="flags">
+              @if (ls.capCheck("news")) {
+                <mat-option value="news">Wiadomości</mat-option>
+              }
+              @if (ls.capCheck("menu")) {
+                <mat-option value="menu">Jadłospis</mat-option>
+              }
+              @if (ls.capCheck("notif")) {
+                <mat-option value="notif">Powiadomienia</mat-option>
+              }
+              @if (ls.capCheck("groups")) {
+                <mat-option value="groups">Grupy</mat-option>
+              }
+              <mat-option value="accs">Konta</mat-option>
+              @if (ls.capCheck("key")) {
+                <mat-option value="keys">Klucze</mat-option>
+              }
+              @if (ls.capCheck("clean")) {
+                <mat-option value="grades">Czystość</mat-option>
+              }
+            </mat-select>
+          </mat-form-field>
+        }
+      }
+    </div>
+  </form>
+</mat-dialog-content>
+<mat-dialog-actions>
+  @if (data.type === "edit") {
+    <button mat-stroked-button class="error-color" style="margin-right: auto;" (click)="delete()">Usuń konto</button>
+  }
+  <button mat-stroked-button mat-dialog-close>Zamknij</button>
+  <button mat-flat-button (click)="submit()">Zapisz</button>
+  @if (loading) {
+    <mat-spinner diameter="32"></mat-spinner>
+  }
+</mat-dialog-actions>

frontend/src/app/admin-view/account-mgmt/user-edit/user-edit.component.scss

@@ -0,0 +1,32 @@
+:host {
+  padding: 8pt;
+  display: block;
+}
+
+form {
+  margin-top: 1ch !important;
+  display: flex;
+  grid-auto-flow: column;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  column-gap: 3ch;
+  div {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: repeat(5, 1fr);
+    align-items: center;
+    button {
+      align-self: stretch;
+      justify-self: stretch;
+      height: auto;
+      margin-bottom: 1lh;
+    }
+  }
+}
+
+mat-dialog-actions {
+  display: flex;
+  justify-content: flex-end;
+}

frontend/src/app/admin-view/account-mgmt/user-edit/user-edit.component.spec.ts

@@ -0,0 +1,47 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { UserEditComponent } from './user-edit.component'
+import {
+  MAT_DIALOG_DATA,
+  MatDialogModule,
+  MatDialogRef,
+} from '@angular/material/dialog'
+import { MatFormFieldModule } from '@angular/material/form-field'
+import { ReactiveFormsModule } from '@angular/forms'
+import { MatInputModule } from '@angular/material/input'
+import { NoopAnimationsModule } from '@angular/platform-browser/animations'
+import { MatSelectModule } from '@angular/material/select'
+import { AccountMgmtService } from '../account-mgmt.service'
+
+xdescribe('UserEditComponent', () => {
+  let component: UserEditComponent
+  let fixture: ComponentFixture<UserEditComponent>
+  let acMock
+
+  beforeEach(async () => {
+    acMock = {}
+    await TestBed.configureTestingModule({
+      declarations: [UserEditComponent],
+      imports: [
+        MatDialogModule,
+        MatFormFieldModule,
+        ReactiveFormsModule,
+        MatInputModule,
+        NoopAnimationsModule,
+        MatSelectModule,
+      ],
+      providers: [
+        { provide: MatDialogRef, useValue: {} },
+        { provide: MAT_DIALOG_DATA, useValue: { groups: [] } },
+        { provide: AccountMgmtService, useValue: acMock },
+      ],
+    }).compileComponents()
+    fixture = TestBed.createComponent(UserEditComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+})

frontend/src/app/admin-view/account-mgmt/user-edit/user-edit.component.ts

@@ -0,0 +1,198 @@
+import { Component, inject } from '@angular/core'
+import {
+  MAT_DIALOG_DATA,
+  MatDialog,
+  MatDialogRef,
+} from '@angular/material/dialog'
+import { FormControl, FormGroup } from '@angular/forms'
+import { LocalStorageService } from 'src/app/services/local-storage.service'
+import { Group } from 'src/app/types/group'
+import { UserDeleteComponent } from '../user-delete/user-delete.component'
+import { MatSnackBar } from '@angular/material/snack-bar'
+import { UserResetComponent } from '../user-reset/user-reset.component'
+import { catchError, throwError } from 'rxjs'
+import { DateTime } from 'luxon'
+import { AccountMgmtService } from '../account-mgmt.service'
+import { AdminSyncService } from '../../admin-sync.service'
+
+export interface UserEditComponentInputData { type: 'new' | 'edit'; id?: string; groups: Group[] }
+export type UserEditComponentReturnData = true | undefined
+
+@Component({
+  selector: 'app-user-edit',
+  templateUrl: './user-edit.component.html',
+  styleUrls: ['./user-edit.component.scss'],
+  standalone: false,
+})
+export class UserEditComponent {
+  lockout = false
+  locked = false
+  loading = false
+  form: FormGroup = new FormGroup({
+    fname: new FormControl<string>(''),
+    surname: new FormControl<string>(''),
+    room: new FormControl<string>(''),
+    uname: new FormControl<string>(''),
+    groups: new FormControl<string[]>([]),
+    flags: new FormControl<string[]>([]),
+  })
+  id?: string
+  regDate?: DateTime
+
+  public dialogRef: MatDialogRef<UserEditComponent> = inject(MatDialogRef)
+  public data: UserEditComponentInputData = inject(MAT_DIALOG_DATA)
+  protected ls = inject(LocalStorageService)
+  private acu = inject(AccountMgmtService)
+  private dialog = inject(MatDialog)
+  private sb = inject(MatSnackBar)
+  protected adsyn = inject(AdminSyncService)
+
+  constructor() {
+    if (this.data.type == 'edit') {
+      this.id = this.data.id
+      this.acu.getUser(this.data.id!).subscribe(r => {
+        this.regDate = DateTime.fromISO(r.regDate)
+        this.locked = r.locked ? true : false
+        this.lockout = r.lockout
+        this.form.get('fname')?.setValue(r.fname)
+        this.form.get('surname')?.setValue(r.surname)
+        this.form.get('room')?.setValue(r.room)
+        this.form.get('uname')?.setValue(r.uname)
+        this.form.get('groups')?.setValue(r.groups)
+        this.form.get('flags')?.setValue(r.admin)
+      })
+    }
+  }
+
+  protected submit() {
+    this.loading = true
+    if (this.data.type == 'edit') {
+      this.acu
+        .putAcc(this.id!, this.getForm())
+        .pipe(
+          catchError(err => {
+            this.sb.open('Wystąpił błąd. Skontaktuj się z obsługą programu.')
+            return throwError(() => new Error(err.message))
+          })
+        )
+        .subscribe(data => {
+          if (data.status == 200) {
+            this.sb.open('Użytkownik został zmodyfikowany.', undefined, {
+              duration: 2500,
+            })
+            this.dialogRef.close(true)
+          } else {
+            this.sb.open('Wystąpił błąd. Skontaktuj się z obsługą programu.')
+            this.loading = false
+          }
+        })
+    } else {
+      this.acu
+        .postAcc(this.getForm())
+        .pipe(
+          catchError(err => {
+            this.sb.open('Wystąpił błąd. Skontaktuj się z obsługą programu.')
+            return throwError(() => new Error(err.message))
+          })
+        )
+        .subscribe(data => {
+          if (data) {
+            this.sb.open('Użytkownik został utworzony.', undefined, {
+              duration: 2500,
+            })
+            this.dialogRef.close(true)
+          } else {
+            this.sb.open('Wystąpił błąd. Skontaktuj się z obsługą programu.')
+            this.loading = false
+          }
+        })
+    }
+  }
+
+  protected disableLockout() {
+    this.loading = true
+    this.acu
+      .clearLockout(this.id!)
+      .pipe(
+        catchError(err => {
+          this.sb.open('Wystąpił błąd. Skontaktuj się z obsługą programu.')
+          return throwError(() => new Error(err.message))
+        })
+      )
+      .subscribe(s => {
+        if (s.status == 200) {
+          this.loading = false
+          this.lockout = false
+        } else {
+          this.sb.open('Wystąpił błąd. Skontaktuj się z obsługą programu.')
+          this.loading = false
+        }
+      })
+  }
+
+  protected getForm() {
+    return {
+      fname: this.form.get('fname')?.value,
+      surname: this.form.get('surname')?.value,
+      room: this.form.get('room')?.value,
+      uname: this.form.get('uname')?.value,
+      groups: this.form.get('groups')?.value,
+      admin: (() => {
+        const value = this.form.get('flags')?.value
+        if (this.ls.permChecker("super")) {
+          return value
+        } else {
+          return undefined
+        }
+      })(),
+    }
+  }
+
+  protected delete() {
+    this.dialog
+      .open(UserDeleteComponent)
+      .afterClosed()
+      .subscribe(reply => {
+        if (reply) {
+          this.acu.deleteAcc(this.id!).subscribe(res => {
+            if (res.status == 200) {
+              this.sb.open('Użytkownik został usunięty.', undefined, {
+                duration: 2500,
+              })
+              this.dialogRef.close()
+            } else {
+              this.sb.open('Wystąpił błąd. Skontaktuj się z obsługą programu.')
+              console.error(res)
+            }
+          })
+        }
+      })
+  }
+
+  protected resetPass() {
+    this.loading = true
+    this.dialog
+      .open(UserResetComponent)
+      .afterClosed()
+      .subscribe(res => {
+        if (res == true) {
+          this.acu.resetPass(this.id!).subscribe(patch => {
+            if (patch.status == 200) {
+              this.sb.open('Hasło zostało zresetowane', undefined, {
+                duration: 2500,
+              })
+              this.loading = false
+            }
+          })
+        }
+      })
+  }
+
+  protected toggleLock(state: boolean) {
+    this.acu.putAcc(this.id!, { locked: state }).subscribe(res => {
+      if (res.status == 200) {
+        this.locked = state
+      }
+    })
+  }
+}

frontend/src/app/admin-view/account-mgmt/user-reset/user-reset.component.html

@@ -0,0 +1,8 @@
+<h1 mat-dialog-title>Reset hasła</h1>
+<mat-dialog-content>
+    Czy chcesz zresetować hasło temu użytkownikowi?
+</mat-dialog-content>
+<mat-dialog-actions>
+    <button mat-button [mat-dialog-close]="true" class="error-color">Tak</button>
+    <button mat-button mat-dialog-close>Nie</button>
+</mat-dialog-actions>

frontend/src/app/admin-view/account-mgmt/user-reset/user-reset.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { UserResetComponent } from './user-reset.component'
+import { MatDialogModule } from '@angular/material/dialog'
+
+describe('UserResetComponent', () => {
+  let component: UserResetComponent
+  let fixture: ComponentFixture<UserResetComponent>
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [UserResetComponent],
+      imports: [MatDialogModule],
+    })
+    fixture = TestBed.createComponent(UserResetComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+})

frontend/src/app/admin-view/account-mgmt/user-reset/user-reset.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core'
+
+@Component({
+  selector: 'app-user-reset',
+  templateUrl: './user-reset.component.html',
+  styleUrls: ['./user-reset.component.scss'],
+  standalone: false,
+})
+export class UserResetComponent {}

frontend/src/app/admin-view/admin-sync.service.spec.ts

@@ -0,0 +1,23 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AdminSyncService } from './admin-sync.service';
+import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+
+describe('AdminSyncService', () => {
+  let service: AdminSyncService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [
+        provideHttpClient(),
+        provideHttpClientTesting()
+      ]
+    });
+    service = TestBed.inject(AdminSyncService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

frontend/src/app/admin-view/admin-sync.service.ts

@@ -0,0 +1,27 @@
+import { HttpClient } from '@angular/common/http';
+import { inject, Injectable } from '@angular/core';
+import { Group } from '../types/group';
+import { environment } from 'src/environments/environment';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AdminSyncService {
+  private http = inject(HttpClient)
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  private _data: any
+
+  private sync() {
+    this.http.get(environment.apiEndpoint + `/admin/sync`, { withCredentials: true }).subscribe(v => {
+      this._data = v
+    })
+  }
+
+  public get groups(): Group[] {
+    const groups = this._data?.groups
+    if (!groups) this.sync()
+    return groups
+  }
+
+}

frontend/src/app/admin-view/admin-view.component.html

@@ -0,0 +1,24 @@
+<app-toolbar [drawer]="drawer"/>
+<mat-sidenav-container>
+    <mat-sidenav #drawer mode="over" autoFocus="false">
+        <mat-nav-list>
+            @for (link of LINKS; track $index) {
+                <mat-list-item [routerLink]="link.href" routerLinkActive #rla="routerLinkActive" [activated]="rla.isActive">
+                    <mat-icon matListItemIcon>{{link.icon}}</mat-icon>
+                    <a matListItemTitle>{{link.title}}</a>
+                </mat-list-item>
+            }
+            <a mat-list-item href="https://foliand.men/wiki/index.php/IPWA:Start" target="_blank">
+                <mat-icon matListItemIcon>developer_guide</mat-icon>
+                <a matListItemTitle>Dokumentacja</a>
+            </a>
+            <mat-list-item (click)="goNormal()">
+                <mat-icon matListItemIcon>close</mat-icon>
+                <h4 matListItemTitle>Zakończ edycję</h4>
+            </mat-list-item>
+        </mat-nav-list>
+    </mat-sidenav>
+    <mat-sidenav-content>
+        <router-outlet></router-outlet>
+    </mat-sidenav-content>
+</mat-sidenav-container>

frontend/src/app/admin-view/admin-view.component.scss

@@ -0,0 +1,21 @@
+@use "@angular/material" as mat;
+@use "../../theme-colors" as theme;
+
+:host {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  @include mat.theme((
+    color: theme.$tertiary-palette
+  ))
+}
+
+mat-sidenav,
+mat-toolbar {
+  padding: 8pt;
+}
+
+mat-sidenav-container {
+  flex-grow: 1;
+}

frontend/src/app/admin-view/admin-view.component.spec.ts

@@ -0,0 +1,45 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { AdminViewComponent } from './admin-view.component'
+import { MatToolbarModule } from '@angular/material/toolbar'
+import { MatIconModule } from '@angular/material/icon'
+import { MatDrawer, MatSidenavModule } from '@angular/material/sidenav'
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
+import { MatListModule } from '@angular/material/list'
+import { RouterModule } from '@angular/router'
+import { Component, Input } from '@angular/core'
+
+@Component({
+  selector: 'app-toolbar',
+  template: '',
+  standalone: false,
+})
+class ToolbarMock {
+  @Input() drawer!: MatDrawer
+}
+
+describe('AdminViewComponent', () => {
+  let component: AdminViewComponent
+  let fixture: ComponentFixture<AdminViewComponent>
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [AdminViewComponent, ToolbarMock],
+      imports: [
+        MatToolbarModule,
+        MatIconModule,
+        MatSidenavModule,
+        BrowserAnimationsModule,
+        MatListModule,
+        RouterModule.forRoot([]),
+      ],
+    })
+    fixture = TestBed.createComponent(AdminViewComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+})

frontend/src/app/admin-view/admin-view.component.ts

@@ -0,0 +1,78 @@
+import { Component, inject } from '@angular/core'
+import { Router } from '@angular/router'
+import { LocalStorageService } from '../services/local-storage.service'
+import { Link } from '../types/link'
+
+@Component({
+  selector: 'app-admin-view',
+  templateUrl: './admin-view.component.html',
+  styleUrls: ['./admin-view.component.scss'],
+  standalone: false,
+})
+export class AdminViewComponent {
+  readonly router = inject(Router)
+  readonly ls = inject(LocalStorageService)
+
+  private readonly _LINKS: Link[] = [
+    {
+      title: 'Wiadomości',
+      icon: 'newspaper',
+      href: 'news',
+      enabled: this.ls.permChecker("news") && this.ls.capCheck("news"),
+    },
+    {
+      title: 'Jadłospis',
+      icon: 'restaurant_menu',
+      href: 'menu',
+      enabled: this.ls.permChecker("menu") && this.ls.capCheck("menu"),
+    },
+    {
+      title: 'Wysyłanie powiadomień',
+      icon: 'notifications',
+      href: 'notifications',
+      enabled: this.ls.permChecker("notif") && this.ls.capCheck("notif"),
+    },
+    {
+      title: 'Grupy',
+      icon: 'groups',
+      href: 'groups',
+      enabled: this.ls.permChecker("groups") && this.ls.capCheck("groups"),
+    },
+    {
+      title: 'Zarządzanie kontami',
+      icon: 'manage_accounts',
+      href: 'accounts',
+      enabled: this.ls.permChecker("accs"),
+    },
+    {
+      title: 'Klucze',
+      icon: 'key',
+      href: 'keys',
+      enabled: this.ls.permChecker("keys") && this.ls.capCheck("key"),
+    },
+    {
+      title: 'Czystość',
+      icon: 'cleaning_services',
+      href: 'grades',
+      enabled: this.ls.permChecker("grades") && this.ls.capCheck("clean"),
+    },
+    {
+      title: 'Frekwencja',
+      icon: 'checklist',
+      href: 'attendence',
+      enabled: false,
+    },
+    {
+      title: 'Ustawienia',
+      icon: 'settings_applications',
+      href: 'settings',
+      enabled: this.ls.permChecker("super"),
+    },
+  ]
+  public get LINKS(): Link[] {
+    return this._LINKS.filter(v => v.enabled)
+  }
+  goNormal() {
+    this.router.navigateByUrl('app')
+  }
+}

frontend/src/app/admin-view/grades/attendence-summary/attendence-summary.component.html

@@ -0,0 +1,29 @@
+<div id="guide">
+  <p><b>Uwaga:</b> Obecność resetuje się o codziennie o 00:00</p>
+  <div id="legend">
+    <b>Legenda: </b>
+    <span class="circle">Wychowanek obecny</span>
+    <span class="circle">Wyjście w ciągu 30 min.</span>
+    <span class="circle">Wychowanek nieobecny</span>
+  </div>
+</div>
+<table mat-table [dataSource]="data" matSort>
+  <div matColumnDef="room">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header>Pokój</th>
+    <td mat-cell *matCellDef="let item">{{item.room}}</td>
+  </div>
+  <div matColumnDef="hours">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header>Godziny</th>
+    <td mat-cell *matCellDef="let item">@for (i of item.hours.sort().reverse(); track i; let isLast = $last) {
+      <span><app-hour-display [value]="i"></app-hour-display>{{ isLast ? '' : ', '}}</span>
+      }<span>{{item.notes}}</span></td>
+    </div>
+    <div matColumnDef="actions">
+      <th mat-header-cell *matHeaderCellDef>Usuń</th>
+      <td mat-cell *matCellDef="let item">@if (!item.auto) {
+        <button mat-mini-fab class="error-color" (click)="delete(item.room)"><mat-icon>delete</mat-icon></button>
+      }</td>
+    </div>
+    <tr mat-header-row *matHeaderRowDef="collumns"></tr>
+    <tr mat-row *matRowDef="let rowData; columns: collumns"></tr>
+  </table>

frontend/src/app/admin-view/grades/attendence-summary/attendence-summary.component.scss

@@ -0,0 +1,34 @@
+@use "sass:list";
+
+#guide {
+  margin: 1em;
+}
+
+#legend {
+  display: flex;
+  justify-self: center;
+  gap: 3ch;
+  * {
+    margin: 2px;
+  }
+}
+
+.circle {
+  &::before {
+    border-radius: 7.5%;
+    width: 2.5ch;
+    height: 2.5ch;
+    display: inline-block;
+    content: "";
+    vertical-align: middle;
+    margin-right: 3px;
+  }
+
+  $list: (red, yellow, green);
+
+  @for $n from 1 through 3 {
+    &:nth-of-type(#{$n})::before {
+      background-color: list.nth($list, $n);
+    }
+  }
+}

frontend/src/app/admin-view/grades/attendence-summary/attendence-summary.component.spec.ts

@@ -0,0 +1,29 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { AttendenceSummaryComponent } from './attendence-summary.component'
+import { RouterModule } from '@angular/router'
+import { MatTableModule } from '@angular/material/table'
+import { GradesService } from '../grades.service'
+
+xdescribe('AttendenceSummaryComponent', () => {
+  let component: AttendenceSummaryComponent
+  let fixture: ComponentFixture<AttendenceSummaryComponent>
+  let acMock
+
+  beforeEach(async () => {
+    acMock = {}
+    await TestBed.configureTestingModule({
+      declarations: [AttendenceSummaryComponent],
+      imports: [RouterModule.forRoot([]), MatTableModule],
+      providers: [{ provide: GradesService, useValue: acMock }],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(AttendenceSummaryComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+})

frontend/src/app/admin-view/grades/attendence-summary/attendence-summary.component.ts

@@ -0,0 +1,54 @@
+import { Component, inject, OnInit } from '@angular/core'
+import { ToolbarService } from '../../toolbar/toolbar.service'
+import { Router, ActivatedRoute } from '@angular/router'
+import { MatTableDataSource } from '@angular/material/table'
+import { GradesService } from '../grades.service'
+
+@Component({
+  selector: 'app-attendence-summary',
+  templateUrl: './attendence-summary.component.html',
+  styleUrl: './attendence-summary.component.scss',
+  standalone: false,
+})
+export class AttendenceSummaryComponent implements OnInit {
+  data: MatTableDataSource<{
+    room: string
+    hours: string[]
+    notes: string
+    auto: boolean
+  }> = new MatTableDataSource<{
+    room: string
+    hours: string[]
+    notes: string
+    auto: boolean
+  }>()
+  collumns = ['room', 'hours', 'actions']
+
+  private toolbar = inject(ToolbarService)
+  private router = inject(Router)
+  private route = inject(ActivatedRoute)
+  private ac = inject(GradesService)
+
+  constructor() {
+    this.toolbar.comp = this
+    this.toolbar.menu = [
+      { check: true, title: 'Ocenianie', fn: 'goBack', icon: 'arrow_back' },
+    ]
+  }
+
+  delete(room: string) {
+    this.ac.attendence.deleteRoom(room).subscribe(() => {
+      this.ngOnInit()
+    })
+  }
+
+  ngOnInit(): void {
+    this.ac.attendence.getSummary().subscribe(v => {
+      this.data.data = v
+    })
+  }
+
+  goBack() {
+    this.router.navigate(['../'], { relativeTo: this.route })
+  }
+}

frontend/src/app/admin-view/grades/attendence-summary/hour-display/hour-display.component.html

@@ -0,0 +1 @@
+<span [ngStyle]="style()">{{value}}</span>

frontend/src/app/admin-view/grades/attendence-summary/hour-display/hour-display.component.scss

@@ -0,0 +1,8 @@
+:host {
+  display: inline;
+}
+
+span {
+  padding: 2px;
+  border-radius: 7.5%;
+}

frontend/src/app/admin-view/grades/attendence-summary/hour-display/hour-display.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { HourDisplayComponent } from './hour-display.component'
+
+describe('HourDisplayComponent', () => {
+  let component: HourDisplayComponent
+  let fixture: ComponentFixture<HourDisplayComponent>
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [HourDisplayComponent],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(HourDisplayComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+})

frontend/src/app/admin-view/grades/attendence-summary/hour-display/hour-display.component.ts

@@ -0,0 +1,27 @@
+import { Component, Input } from '@angular/core'
+import { DateTime } from 'luxon'
+
+@Component({
+  selector: 'app-hour-display',
+  templateUrl: './hour-display.component.html',
+  styleUrl: './hour-display.component.scss',
+  standalone: false,
+})
+export class HourDisplayComponent {
+  @Input() value = ''
+
+  style() {
+    if (/(0+[0-9]|1[0-9]|2[0-3]):(0+[0-9]|[1-5][0-9])/g.test(this.value)) {
+      const diff = DateTime.fromFormat(this.value, 'HH:mm').diffNow('minutes')
+      if (diff.as('minutes') > 30) {
+        return { 'background-color': 'red' }
+      } else if (diff.as('minutes') > 0) {
+        return { 'background-color': 'yellow', color: 'black' }
+      } else {
+        return { 'background-color': 'green' }
+      }
+    } else {
+      return { color: 'gray' }
+    }
+  }
+}

frontend/src/app/admin-view/grades/attendence/attendence.component.html

@@ -0,0 +1,22 @@
+<span mat-dialog-title>Obecność w {{room}}</span>
+<mat-dialog-content>
+    <form [formGroup]="this.form">
+        <div formArrayName="users">
+            @for (item of users.controls; track i; let i = $index) {
+                <div [formGroupName]="i">
+                    <mat-checkbox formControlName="att" #cb>
+                        <span control="label"></span>:
+                        <input type="time" formControlName="hour" (input)="cb.writeValue(true)">
+                    </mat-checkbox>
+                </div>
+            }
+        </div>
+        <mat-form-field>
+            <mat-label>Notatki</mat-label>
+            <input type="text" matInput formControlName="notes">
+        </mat-form-field>
+    </form>
+</mat-dialog-content>
+<mat-dialog-actions>
+    <button mat-button (click)="save()">Zapisz</button>
+</mat-dialog-actions>

frontend/src/app/admin-view/grades/attendence/attendence.component.spec.ts

@@ -0,0 +1,46 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { AttendenceComponent } from './attendence.component'
+import {
+  MAT_DIALOG_DATA,
+  MatDialogModule,
+  MatDialogRef,
+} from '@angular/material/dialog'
+import { MatFormFieldModule } from '@angular/material/form-field'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { MatInputModule } from '@angular/material/input'
+import { NoopAnimationsModule } from '@angular/platform-browser/animations'
+import { GradesService } from '../grades.service'
+
+xdescribe('AttendenceComponent', () => {
+  let component: AttendenceComponent
+  let fixture: ComponentFixture<AttendenceComponent>
+
+  beforeEach(async () => {
+    const acMock = {}
+    await TestBed.configureTestingModule({
+      declarations: [AttendenceComponent],
+      providers: [
+        { provide: MAT_DIALOG_DATA, useValue: {} },
+        { provide: MatDialogRef, useValue: {} },
+        { provide: GradesService, useValue: acMock },
+      ],
+      imports: [
+        MatDialogModule,
+        MatFormFieldModule,
+        FormsModule,
+        ReactiveFormsModule,
+        MatInputModule,
+        NoopAnimationsModule,
+      ],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(AttendenceComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+})

frontend/src/app/admin-view/grades/attendence/attendence.component.ts

@@ -0,0 +1,55 @@
+import { Component, inject, OnInit } from '@angular/core'
+import { FormArray, FormBuilder, FormGroup } from '@angular/forms'
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'
+import { GradesService } from '../grades.service'
+
+@Component({
+  selector: 'app-attendence',
+  templateUrl: './attendence.component.html',
+  styleUrl: './attendence.component.scss',
+  standalone: false,
+})
+export class AttendenceComponent implements OnInit {
+  private fb = inject(FormBuilder)
+  public data: { room: string } = inject(MAT_DIALOG_DATA)
+  public dialogRef: MatDialogRef<AttendenceComponent> = inject(MatDialogRef)
+  private ac = inject(GradesService)
+
+  ngOnInit(): void {
+    this.room = this.data.room
+    this.ac.attendence.getUsers(this.room).subscribe(query => {
+      query.users.forEach(v => {
+        const att = query.attendence
+          ? query.attendence.auto.find(z => z.id == v._id)
+          : false
+        this.users.push(
+          this.fb.group({
+            id: v._id,
+            label: `${v.fname} ${v.surname}`,
+            att: this.fb.control(att),
+            hour: this.fb.control(att ? att.hour : ''),
+          })
+        )
+      })
+      this.form.get('notes')?.setValue(query.attendence?.notes)
+    })
+  }
+
+  save() {
+    this.dialogRef.close({
+      room: this.room,
+      ...this.form.value,
+    })
+  }
+
+  room = ''
+
+  form: FormGroup = this.fb.group({
+    users: this.fb.array([]),
+    notes: this.fb.control(''),
+  })
+
+  get users() {
+    return this.form.get('users') as FormArray
+  }
+}

frontend/src/app/admin-view/grades/grades.component.html

@@ -0,0 +1,34 @@
+<app-date-selector [(date)]="date" [filter]="filter" (dateChange)="downloadData()"></app-date-selector>
+<app-room-chooser [rooms]="rooms" (room)="roomNumber($event)"/>
+<form [formGroup]="form">
+  <p>Czystość pokoju {{room}} na {{date().toFormat("cccc, D")}}</p>
+  <p>Ocena: <span [appGradeColor]="grade">{{grade}}</span></p>
+  <div id="buttons">
+    <button mat-mini-fab (click)="downloadData()"><mat-icon>cancel</mat-icon></button>
+    <button mat-mini-fab (click)="attendence()"><mat-icon>overview</mat-icon></button>
+    <button mat-mini-fab (click)="save()"><mat-icon>save</mat-icon></button>
+    @if (id) {
+      <button mat-mini-fab class="error-color" (click)="remove()"><mat-icon>delete</mat-icon></button>
+    }
+  </div>
+  @for (item of things.controls; track item; let i = $index) {
+    <div formArrayName="things" id="things">
+      <div formGroupName="{{i}}">
+        <mat-checkbox formControlName="cb" #cb>
+          <span control="label"></span>
+          @if (cb.checked) {
+            <span>
+              <button mat-icon-button (click)="group.sub(i)"><mat-icon>remove</mat-icon></button>
+              <span control="weight"></span>
+              <button mat-icon-button (click)="group.add(i)"><mat-icon>add</mat-icon></button>
+            </span>
+          }
+        </mat-checkbox>
+      </div>
+    </div>
+  }
+  <mat-form-field style="width: 100%;">
+    <mat-label>Dodatkowe uwagi</mat-label>
+    <textarea matNativeControl cdkTextareaAutosize formControlName="tips"></textarea>
+  </mat-form-field>
+</form>

frontend/src/app/admin-view/grades/grades.component.scss

@@ -0,0 +1,10 @@
+div#things {
+  display: flex;
+  flex-direction: column;
+}
+
+div#buttons {
+  * {
+    margin: 0 2px 0 2px;
+  }
+}

frontend/src/app/admin-view/grades/grades.component.spec.ts

@@ -0,0 +1,64 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { GradesComponent } from './grades.component'
+import { RouterModule } from '@angular/router'
+import { Component, EventEmitter, Input, Output } from '@angular/core'
+import { MatIconModule } from '@angular/material/icon'
+import { MatFormFieldModule } from '@angular/material/form-field'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { MatInputModule } from '@angular/material/input'
+import { NoopAnimationsModule } from '@angular/platform-browser/animations'
+import { DateTime } from 'luxon'
+import { GradesService } from './grades.service'
+
+@Component({
+  selector: 'app-date-selector',
+  template: '',
+  standalone: false,
+})
+class DateSelectorStub {
+  @Input() date: string = DateTime.now().toISODate()
+  @Output() dateChange = new EventEmitter<string>()
+  @Input() filter: (date: DateTime | null) => boolean = () => true
+}
+
+@Component({
+  selector: 'app-room-chooser',
+  template: '',
+  standalone: false,
+})
+class RoomSelectorStub {
+  @Input() rooms: string[] = []
+  @Output() room: EventEmitter<string> = new EventEmitter<string>()
+}
+
+xdescribe('GradesComponent', () => {
+  let component: GradesComponent
+  let fixture: ComponentFixture<GradesComponent>
+  let acMock
+
+  beforeEach(async () => {
+    acMock = {}
+    await TestBed.configureTestingModule({
+      declarations: [GradesComponent, DateSelectorStub, RoomSelectorStub],
+      providers: [{ provide: GradesService, useValue: acMock }],
+      imports: [
+        RouterModule.forRoot([]),
+        MatIconModule,
+        MatFormFieldModule,
+        FormsModule,
+        ReactiveFormsModule,
+        MatInputModule,
+        NoopAnimationsModule,
+      ],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(GradesComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+})

frontend/src/app/admin-view/grades/grades.component.ts

@@ -0,0 +1,221 @@
+import { Component, inject, OnDestroy, OnInit, signal } from '@angular/core'
+import { FormArray, FormBuilder } from '@angular/forms'
+import { filterLook, weekendFilter } from 'src/app/util'
+import { MatSnackBar } from '@angular/material/snack-bar'
+import { ToolbarService } from '../toolbar/toolbar.service'
+import { ActivatedRoute, Router } from '@angular/router'
+import { MatDialog } from '@angular/material/dialog'
+import { AttendenceComponent } from './attendence/attendence.component'
+import { DateTime } from 'luxon'
+import { GradesService } from './grades.service'
+
+@Component({
+  selector: 'app-grades',
+  templateUrl: './grades.component.html',
+  styleUrl: './grades.component.scss',
+  standalone: false,
+})
+export class GradesComponent implements OnInit, OnDestroy {
+  private ac = inject(GradesService)
+  private fb = inject(FormBuilder)
+  private sb = inject(MatSnackBar)
+  private toolbar = inject(ToolbarService)
+  private router = inject(Router)
+  private route = inject(ActivatedRoute)
+  private dialog = inject(MatDialog)
+
+  rooms!: string[]
+  room = '0'
+  grade = 6
+  gradeDate?: DateTime
+  id?: string
+  filter = weekendFilter
+  date = signal<DateTime>(filterLook(this.filter, "behind", DateTime.now(), 7)!)
+
+  get notes(): { label: string; weight: number }[] {
+    const th = this.things.value as {
+      cb: boolean
+      label: string
+      weight: number
+    }[]
+    return th
+      .filter(v => v.cb)
+      .map(v => {
+        return { ...v, cb: undefined }
+      })
+  }
+
+  set notes(value: { label: string; weight: number }[]) {
+    const things = this.things.controls
+    things.forEach(v => {
+      const thing = value.find(s => s.label == v.get('label')?.value)
+      if (thing) {
+        v.get('cb')?.setValue(true)
+        v.get('weight')?.setValue(thing.weight)
+      } else {
+        v.get('cb')?.setValue(false)
+        v.get('weight')?.setValue(1)
+      }
+    })
+  }
+
+  constructor() {
+    // if (!this.filter(this.date)) this.date.isoWeekday(8);
+    this.toolbar.comp = this
+    this.toolbar.menu = [
+      {
+        title: 'Pokoje do sprawdzenia',
+        check: true,
+        fn: 'attendenceSummary',
+        icon: 'overview',
+      },
+      { title: 'Podsumowanie', check: true, fn: 'summary', icon: 'analytics' },
+    ]
+    this.form.valueChanges.subscribe(() => {
+      this.calculate()
+    })
+  }
+
+  form = this.fb.group({
+    things: this.fb.array([]),
+    tips: this.fb.control(''),
+  })
+
+  get things() {
+    return this.form.get('things') as FormArray
+  }
+
+  summary() {
+    this.router.navigate(['summary'], { relativeTo: this.route })
+  }
+
+  attendenceSummary() {
+    this.router.navigate(['attendenceSummary'], { relativeTo: this.route })
+  }
+
+  ngOnInit(): void {
+    this.ac.getConfig().subscribe(s => {
+      this.rooms = s.rooms
+      s.things.forEach(s =>
+        this.things.push(
+          this.fb.group({
+            cb: this.fb.control(false),
+            label: this.fb.control(s),
+            weight: this.fb.control(1),
+          })
+        )
+      )
+    })
+  }
+
+  ngOnDestroy(): void {
+    this.toolbar.comp = undefined
+    this.toolbar.menu = undefined
+  }
+
+  downloadData() {
+    this.ac.getClean(this.date(), this.room).subscribe(v => {
+      if (v) {
+        this.notes = v.notes
+        this.gradeDate = DateTime.fromISO(v.gradeDate)
+        this.grade = v.grade
+        this.id = v._id
+        this.form.get('tips')?.setValue(v.tips)
+      } else {
+        this.gradeDate = undefined
+        this.grade = 6
+        this.notes = []
+        this.id = undefined
+        this.form.get('tips')?.setValue('')
+      }
+    })
+  }
+
+  calculate() {
+    this.grade = 6
+    this.things.controls.forEach(s => {
+      if (s.get('cb')?.value) this.grade -= 1 * s.get('weight')?.value
+      if (this.grade < 0) this.grade = 0
+    })
+  }
+
+  group = {
+    add: (index: number) => {
+      const weight = this.things.at(index).get('weight')!
+      weight.setValue(weight.value + 1)
+    },
+    sub: (index: number) => {
+      const weight = this.things.at(index).get('weight')!
+      if (weight.value < 1) {
+        weight.setValue(1)
+      } else {
+        if (weight.value - 1 < 1) {
+          weight.setValue(1)
+        } else {
+          weight.setValue(weight.value - 1)
+        }
+      }
+    },
+  }
+
+  save() {
+    this.calculate()
+    const obj = {
+      grade: this.grade,
+      date: this.date().toISODate(),
+      room: this.room,
+      notes: this.notes,
+      tips: this.form.get('tips')?.value,
+    }
+    this.ac.postClean(obj).subscribe(() => {
+      this.sb.open('Zapisano!', undefined, { duration: 1500 })
+      this.downloadData()
+    })
+  }
+
+  remove() {
+    this.ac.delete(this.id!).subscribe(s => {
+      if (s.status == 200) {
+        this.downloadData()
+      }
+    })
+  }
+
+  roomNumber(value: string) {
+    this.room = value
+    this.downloadData()
+  }
+
+  attendence() {
+    this.dialog
+      .open(AttendenceComponent, { data: { room: this.room } })
+      .afterClosed()
+      .subscribe(
+        (v: {
+          room: string
+          users: { att: boolean; id: string; hour: string }[]
+          notes: string
+        }) => {
+          if (!v) return
+          const x: { room: string; users: { id: string; hour?: string }[] } = {
+            room: v.room,
+            users: [],
+          }
+          v.users.forEach(i => {
+            if (i.att && i.hour) {
+              x.users.push({ id: i.id, hour: i.hour })
+            }
+          })
+          this.ac.attendence
+            .postAttendence(x.room, { auto: x.users, notes: v.notes })
+            .subscribe(s => {
+              if (s.status == 200) {
+                this.sb.open('Zapisano obecność!', undefined, {
+                  duration: 1500,
+                })
+              }
+            })
+        }
+      )
+  }
+}

frontend/src/app/admin-view/grades/grades.service.spec.ts

@@ -0,0 +1,23 @@
+import { TestBed } from '@angular/core/testing';
+
+import { GradesService } from './grades.service';
+import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+
+describe('GradesService', () => {
+  let service: GradesService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [
+        provideHttpClient(),
+        provideHttpClientTesting()
+      ]
+    });
+    service = TestBed.inject(GradesService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

frontend/src/app/admin-view/grades/grades.service.ts

@@ -0,0 +1,92 @@
+import { HttpClient } from '@angular/common/http';
+import { inject, Injectable } from '@angular/core';
+import { DateTime } from 'luxon';
+import { Status } from 'src/app/types/status';
+import { environment } from 'src/environments/environment';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class GradesService {
+  private http = inject(HttpClient)
+
+  getConfig() {
+    return this.http.get<{ rooms: string[]; things: string[] }>(
+      environment.apiEndpoint + `/admin/clean/config`,
+      { withCredentials: true }
+    )
+  }
+
+  getClean(date: DateTime, room: string) {
+    return this.http.get<{
+      _id: string
+      date: string
+      grade: number
+      gradeDate: string
+      notes: { label: string; weight: number }[]
+      room: string
+      tips: string
+    } | null>(environment.apiEndpoint + `/admin/clean/${date.toISODate()}/${room}`, {
+      withCredentials: true,
+    })
+  }
+
+  postClean(obj: object) {
+    return this.http.post<Status>(
+      environment.apiEndpoint + `/admin/clean/`,
+      obj,
+      { withCredentials: true }
+    )
+  }
+
+  delete(id: string) {
+    return this.http.delete<Status>(
+      environment.apiEndpoint + `/admin/clean/${id}`,
+      { withCredentials: true }
+    )
+  }
+
+  summary = {
+    getSummary: (start: DateTime, end: DateTime) => {
+      return this.http.get<{ room: string; avg: number }[]>(
+        environment.apiEndpoint +
+        `/admin/clean/summary/${start.toISO()}/${end.toISO()}`,
+        { withCredentials: true }
+      )
+    },
+  }
+
+  attendence = {
+    getUsers: (room: string) => {
+      return this.http.get<{
+        users: { fname: string; surname: string; _id: string }[]
+        attendence?: { auto: { id: string; hour?: string }[]; notes: string }
+      }>(environment.apiEndpoint + `/admin/clean/attendence/${room}`, {
+        withCredentials: true,
+      })
+    },
+    postAttendence: (
+      room: string,
+      attendence: { auto: { id: string; hour?: string }[]; notes: string }
+    ) => {
+      return this.http.post<Status>(
+        environment.apiEndpoint + `/admin/clean/attendence/${room}`,
+        attendence,
+        { withCredentials: true }
+      )
+    },
+    getSummary: () => {
+      return this.http.get<
+        { room: string; hours: string[]; notes: string; auto: boolean }[]
+      >(environment.apiEndpoint + `/admin/clean/attendenceSummary`, {
+        withCredentials: true,
+      })
+    },
+    deleteRoom: (room: string) => {
+      return this.http.delete<Status>(
+        environment.apiEndpoint + `/admin/clean/attendence/${room}`,
+        { withCredentials: true }
+      )
+    },
+  }
+}

frontend/src/app/admin-view/grades/summary/summary.component.html

@@ -0,0 +1,25 @@
+<div>
+    <mat-form-field>
+        <mat-label>Wybierz tydzień</mat-label>
+        <mat-date-range-input [rangePicker]="picker" [formGroup]="dateSelector">
+            <input matStartDate formControlName="start">
+            <input matEndDate formControlName="end">
+        </mat-date-range-input>
+        <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
+        <mat-date-range-picker #picker></mat-date-range-picker>
+    </mat-form-field>
+    <button mat-icon-button><mat-icon>query_stats</mat-icon></button>
+</div>
+<table mat-table [dataSource]="data" matSort>
+    <div matColumnDef="room">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>Pokój</th>
+        <td mat-cell *matCellDef="let item">{{item.room}}</td>
+    </div>
+    <div matColumnDef="avg">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>Średnia</th>
+        <td mat-cell *matCellDef="let item">{{item.avg}}</td>
+    </div>
+
+    <tr mat-header-row *matHeaderRowDef="collumns"></tr>
+    <tr mat-row *matRowDef="let rowData; columns: collumns"></tr>
+</table>

frontend/src/app/admin-view/grades/summary/summary.component.spec.ts

@@ -0,0 +1,46 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { SummaryComponent } from './summary.component'
+import { RouterModule } from '@angular/router'
+import { MatFormFieldModule } from '@angular/material/form-field'
+import { MatDatepickerModule } from '@angular/material/datepicker'
+import { MatIconModule } from '@angular/material/icon'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { MatTableModule } from '@angular/material/table'
+import { NoopAnimationsModule } from '@angular/platform-browser/animations'
+import { provideLuxonDateAdapter } from '@angular/material-luxon-adapter'
+import { GradesService } from '../grades.service'
+
+xdescribe('SummaryComponent', () => {
+  let component: SummaryComponent
+  let fixture: ComponentFixture<SummaryComponent>
+
+  beforeEach(async () => {
+    const acMock = {}
+    await TestBed.configureTestingModule({
+      declarations: [SummaryComponent],
+      providers: [
+        { provide: GradesService, useValue: acMock },
+        provideLuxonDateAdapter(),
+      ],
+      imports: [
+        RouterModule.forRoot([]),
+        MatFormFieldModule,
+        MatDatepickerModule,
+        MatIconModule,
+        FormsModule,
+        ReactiveFormsModule,
+        MatTableModule,
+        NoopAnimationsModule,
+      ],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(SummaryComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+})

frontend/src/app/admin-view/grades/summary/summary.component.ts

@@ -0,0 +1,68 @@
+import { Component, inject, OnDestroy, OnInit, ViewChild } from '@angular/core'
+import { ToolbarService } from '../../toolbar/toolbar.service'
+import { ActivatedRoute, Router } from '@angular/router'
+import { MatTableDataSource } from '@angular/material/table'
+import { FormBuilder } from '@angular/forms'
+import { MatSort } from '@angular/material/sort'
+import { DateTime } from 'luxon'
+import { GradesService } from '../grades.service'
+
+@Component({
+  selector: 'app-summary',
+  templateUrl: './summary.component.html',
+  styleUrl: './summary.component.scss',
+  standalone: false,
+})
+export class SummaryComponent implements OnInit, OnDestroy {
+  private toolbar = inject(ToolbarService)
+  private router = inject(Router)
+  private route = inject(ActivatedRoute)
+  private ac = inject(GradesService)
+  private fb = inject(FormBuilder)
+
+  data: MatTableDataSource<{ room: string; avg: number }> =
+    new MatTableDataSource<{ room: string; avg: number }>()
+  collumns = ['room', 'avg']
+
+  dateSelector = this.fb.group({
+    start: this.fb.control(DateTime.utc().startOf('day')),
+    end: this.fb.control(DateTime.utc().endOf('day')),
+  })
+
+  @ViewChild(MatSort, { static: false }) set content(sort: MatSort) {
+    this.data.sort = sort
+  }
+
+  constructor() {
+    this.toolbar.comp = this
+    this.toolbar.menu = [
+      { check: true, title: 'Ocenianie', fn: 'goBack', icon: 'arrow_back' },
+    ]
+    this.dateSelector.valueChanges.subscribe(() => {
+      this.download()
+    })
+  }
+  ngOnInit(): void {
+    this.download()
+  }
+
+  download() {
+    this.ac.summary
+      .getSummary(
+        this.dateSelector.get('start')!.value!.startOf('day')!,
+        this.dateSelector.get('end')!.value!.endOf('day')!
+      )
+      .subscribe(v => {
+        this.data.data = v
+      })
+  }
+
+  goBack() {
+    this.router.navigate(['../'], { relativeTo: this.route })
+  }
+
+  ngOnDestroy(): void {
+    this.toolbar.comp = undefined
+    this.toolbar.menu = undefined
+  }
+}

frontend/src/app/admin-view/groups/groups.component.html

@@ -0,0 +1,11 @@
+<button matButton="outlined" (click)="newGroup()">Nowa grupa</button>
+@for (item of groups; track item) {
+  <mat-card>
+    <mat-card-header>
+      <mat-card-title contenteditable appCe (edit)="nameEdit(item._id, $event)">{{item.name}}</mat-card-title>
+    </mat-card-header>
+    <mat-card-actions>
+      <button mat-button class="error-color" (click)="remove(item._id)">Usuń</button>
+    </mat-card-actions>
+  </mat-card>
+}

frontend/src/app/admin-view/groups/groups.component.scss

@@ -0,0 +1,12 @@
+:host {
+  display: flex;
+}
+
+mat-card {
+  margin: 15px;
+  padding: 1ch;
+}
+
+mat-card-title {
+  font-size: 1.5rem;
+}

frontend/src/app/admin-view/groups/groups.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { GroupsComponent } from './groups.component'
+import { GroupsService } from './groups.service'
+
+xdescribe('GroupsComponent', () => {
+  let component: GroupsComponent
+  let fixture: ComponentFixture<GroupsComponent>
+
+  beforeEach(() => {
+    const acMock = {}
+    TestBed.configureTestingModule({
+      declarations: [GroupsComponent],
+      providers: [{ provide: GroupsService, useValue: acMock }],
+    })
+    fixture = TestBed.createComponent(GroupsComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+})

frontend/src/app/admin-view/groups/groups.component.ts

@@ -0,0 +1,69 @@
+import { Component, inject, OnInit } from '@angular/core'
+import { Group } from 'src/app/types/group'
+import { Status } from 'src/app/types/status'
+import { MatDialog } from '@angular/material/dialog'
+import { RemoveConfirmComponent } from './remove-confirm/remove-confirm.component'
+import { GroupsService } from './groups.service'
+
+@Component({
+  selector: 'app-groups',
+  templateUrl: './groups.component.html',
+  styleUrls: ['./groups.component.scss'],
+  standalone: false,
+})
+export class GroupsComponent implements OnInit {
+  protected acs = inject(GroupsService)
+  private dialog = inject(MatDialog)
+
+  groups?: Group[]
+
+  ngOnInit(): void {
+    this.acs.getGroups().subscribe(v => {
+      this.groups = v
+    })
+  }
+
+  private refreshIfGood(s: Status) {
+    if (s.status.toString().match(/2\d\d/)) {
+      this.ngOnInit()
+    }
+  }
+
+  get groupOptions(): { id: string; text: string }[] {
+    return this.groups!.map(v => {
+      return { id: v._id as string, text: v.name as string }
+    })
+  }
+
+  protected getId(g: Group[] | undefined) {
+    if (!g) return undefined
+    return g.map(v => v._id)
+  }
+
+  groupNames(groups: Group[]) {
+    return groups.flatMap(g => g.name)
+  }
+
+  protected nameEdit(id: string, name: string | string[]) {
+    name = name as string
+    this.acs.editName(id, name).subscribe(s => this.refreshIfGood(s))
+  }
+
+  protected newGroup() {
+    const name = prompt('Nazwa grupy')
+    if (name) {
+      this.acs.newGroup(name).subscribe(s => this.refreshIfGood(s))
+    }
+  }
+
+  protected remove(id: string) {
+    this.dialog
+      .open(RemoveConfirmComponent)
+      .afterClosed()
+      .subscribe(v => {
+        if (v) {
+          this.acs.remove(id).subscribe(s => this.refreshIfGood(s))
+        }
+      })
+  }
+}

frontend/src/app/admin-view/groups/groups.service.spec.ts

@@ -0,0 +1,23 @@
+import { TestBed } from '@angular/core/testing';
+
+import { GroupsService } from './groups.service';
+import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+
+describe('GroupsService', () => {
+  let service: GroupsService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [
+        provideHttpClient(),
+        provideHttpClientTesting()
+      ]
+    });
+    service = TestBed.inject(GroupsService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

frontend/src/app/admin-view/groups/groups.service.ts

@@ -0,0 +1,45 @@
+import { HttpClient } from '@angular/common/http';
+import { inject, Injectable } from '@angular/core';
+import { Group } from 'src/app/types/group';
+import { Status } from 'src/app/types/status';
+import { environment } from 'src/environments/environment';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class GroupsService {
+  private http = inject(HttpClient)
+
+  getGroups() {
+    return this.http.get<Group[]>(environment.apiEndpoint + `/admin/groups`, {
+      withCredentials: true,
+    })
+  }
+
+  newGroup(name: string) {
+    return this.http.post<Status>(
+      environment.apiEndpoint + `/admin/groups`,
+      { name: name },
+      { withCredentials: true }
+    )
+  }
+
+  editName(id: string, name: string) {
+    return this.putGroups(id, { name: name.trim() })
+  }
+
+  remove(id: string) {
+    return this.http.delete<Status>(
+      environment.apiEndpoint + `/admin/groups/${id}`,
+      { withCredentials: true }
+    )
+  }
+
+  private putGroups(id: string, update: Partial<Group>) {
+    return this.http.put<Status>(
+      environment.apiEndpoint + `/admin/groups/${id}`,
+      update,
+      { withCredentials: true }
+    )
+  }
+}

frontend/src/app/admin-view/groups/remove-confirm/remove-confirm.component.html

@@ -0,0 +1,8 @@
+<h1 mat-dialog-title>Czy chcesz usunąć tą grupę?</h1>
+<mat-dialog-content>
+    Ta akcja jest nieodwracalna!
+</mat-dialog-content>
+<mat-dialog-actions align="end">
+    <button mat-button mat-dialog-close>Nie</button>
+    <button mat-button mat-dialog-close="yes" class="error-color">Tak</button>
+</mat-dialog-actions>

frontend/src/app/admin-view/groups/remove-confirm/remove-confirm.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { RemoveConfirmComponent } from './remove-confirm.component'
+import { MatDialogModule } from '@angular/material/dialog'
+
+describe('RemoveConfirmComponent', () => {
+  let component: RemoveConfirmComponent
+  let fixture: ComponentFixture<RemoveConfirmComponent>
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [RemoveConfirmComponent],
+      imports: [MatDialogModule],
+    })
+    fixture = TestBed.createComponent(RemoveConfirmComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+})

frontend/src/app/admin-view/groups/remove-confirm/remove-confirm.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core'
+
+@Component({
+  selector: 'app-remove-confirm',
+  templateUrl: './remove-confirm.component.html',
+  styleUrls: ['./remove-confirm.component.scss'],
+  standalone: false,
+})
+export class RemoveConfirmComponent {}

frontend/src/app/admin-view/key/key.component.html

@@ -0,0 +1,46 @@
+<div id="upper-bar">
+  <mat-form-field>
+    <mat-label>Wyszukaj</mat-label>
+    <input matInput (keyup)="filter($event)">
+  </mat-form-field>
+  <mat-chip-listbox [(ngModel)]="filters" multiple>
+    <mat-chip-option value="showAll">Pokaż wszystko</mat-chip-option>
+  </mat-chip-listbox>
+  <button mat-icon-button (click)="new()"><mat-icon>add</mat-icon></button>
+</div>
+@if (loading) {
+  <mat-spinner></mat-spinner>
+}
+<table mat-table [dataSource]="keys">
+  <div matColumnDef="room">
+    <th mat-header-cell *matHeaderCellDef>Sala</th>
+    <td mat-cell *matCellDef="let element">{{element.room}}</td>
+  </div>
+  <div matColumnDef="whom">
+    <th mat-header-cell *matHeaderCellDef>Wypożyczający</th>
+    <td mat-cell *matCellDef="let element"><app-user-display [item]="element.whom"/></td>
+  </div>
+  <div matColumnDef="borrow">
+    <th mat-header-cell *matHeaderCellDef>Data wypożyczenia</th>
+    <td mat-cell *matCellDef="let element">{{element.borrow.toFormat("HH:mm, ccc d.LL.")}}</td>
+  </div>
+  <div matColumnDef="tb">
+    <th mat-header-cell *matHeaderCellDef>Data zwrotu</th>
+    <td mat-cell *matCellDef="let element">
+      @if (element.tb) {
+        {{element.tb.toFormat("HH:mm, ccc d.LL.")}}
+      }
+    </td>
+  </div>
+  <div matColumnDef="actions">
+    <th mat-header-cell *matHeaderCellDef>Akcje</th>
+    <td mat-cell *matCellDef="let element">
+      @if (!element.tb) {
+        <button mat-mini-fab (click)="tb(element._id)"><mat-icon>person_cancel</mat-icon></button>
+      }
+    </td>
+  </div>
+  <tr mat-header-row *matHeaderRowDef="collumns"></tr>
+  <tr mat-row *matRowDef="let row; columns: collumns"></tr>
+</table>
+<mat-paginator pageSize="9" [pageSizeOptions]="[9, 15, 20, 50, 160]"></mat-paginator>

frontend/src/app/admin-view/key/key.component.scss

@@ -0,0 +1,5 @@
+#upper-bar {
+  display: flex;
+  align-items: baseline;
+  gap: 4pt;
+}

frontend/src/app/admin-view/key/key.component.spec.ts

@@ -0,0 +1,46 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { AdminKeyComponent } from './key.component'
+import { MatFormFieldModule } from '@angular/material/form-field'
+import { MatChipsModule } from '@angular/material/chips'
+import { MatIconModule } from '@angular/material/icon'
+import { MatPaginatorModule } from '@angular/material/paginator'
+import { FormsModule } from '@angular/forms'
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'
+import { MatTableModule } from '@angular/material/table'
+import { MatInputModule } from '@angular/material/input'
+import { NoopAnimationsModule } from '@angular/platform-browser/animations'
+import { KeyService } from './key.service'
+
+xdescribe('AdminKeyComponent', () => {
+  let component: AdminKeyComponent
+  let fixture: ComponentFixture<AdminKeyComponent>
+  let acMock
+
+  beforeEach(async () => {
+    acMock = {}
+    await TestBed.configureTestingModule({
+      declarations: [AdminKeyComponent],
+      providers: [{ provide: KeyService, useValue: acMock }],
+      imports: [
+        MatFormFieldModule,
+        MatChipsModule,
+        MatIconModule,
+        MatPaginatorModule,
+        FormsModule,
+        MatProgressSpinnerModule,
+        MatTableModule,
+        MatInputModule,
+        NoopAnimationsModule,
+      ],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(AdminKeyComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+})

frontend/src/app/admin-view/key/key.component.ts

@@ -0,0 +1,111 @@
+import { AfterViewInit, Component, inject, OnInit, ViewChild } from '@angular/core'
+import { MatPaginator } from '@angular/material/paginator'
+import { MatTableDataSource } from '@angular/material/table'
+import { AKey } from 'src/app/types/key'
+import { MatDialog } from '@angular/material/dialog'
+import { NewKeyComponent } from './new-key/new-key.component'
+import { catchError, throwError } from 'rxjs'
+import { MatSnackBar } from '@angular/material/snack-bar'
+import { KeyService } from './key.service'
+
+@Component({
+  selector: 'app-admin-key',
+  templateUrl: './key.component.html',
+  styleUrl: './key.component.scss',
+  standalone: false,
+})
+export class AdminKeyComponent implements AfterViewInit, OnInit {
+  private ac = inject(KeyService)
+  private dialog = inject(MatDialog)
+  private sb = inject(MatSnackBar)
+
+  keys: MatTableDataSource<AKey> = new MatTableDataSource<AKey>()
+  pureData: AKey[] = []
+  private _filters: string[] = []
+  public get filters(): string[] {
+    return this._filters
+  }
+  public set filters(value: string[]) {
+    if (value.includes('showAll')) {
+      this.collumns = ['room', 'whom', 'borrow', 'tb', 'actions']
+    } else {
+      this.collumns = ['room', 'whom', 'borrow', 'actions']
+    }
+    this._filters = value
+    this.transformData()
+  }
+
+  collumns = ['room', 'whom', 'borrow', 'tb', 'actions']
+
+  loading = true
+  @ViewChild(MatPaginator) paginator!: MatPaginator
+
+  constructor(
+  ) {
+    this.filters = []
+  }
+
+  fetchData() {
+    this.loading = true
+    this.ac.getKeys().subscribe(r => {
+      this.loading = false
+      this.pureData = r
+      this.transformData()
+    })
+  }
+
+  transformData() {
+    let finalData: AKey[] = this.pureData
+    if (!this.filters.includes('showAll'))
+      finalData = finalData.filter(v => v.tb == undefined)
+    this.keys.data = finalData
+  }
+
+  filter(event: Event) {
+    const value = (event.target as HTMLInputElement).value
+    this.keys.filter = value.toLowerCase().trim()
+  }
+
+  ngAfterViewInit(): void {
+    this.keys.paginator = this.paginator
+  }
+
+  ngOnInit(): void {
+    this.fetchData()
+  }
+
+  new() {
+    this.dialog
+      .open(NewKeyComponent)
+      .afterClosed()
+      .subscribe(v => {
+        if (v) {
+          this.ac
+            .postKey(v.room, v.user)
+            .pipe(
+              catchError((err) => {
+                if (err.status == 404) {
+                  this.sb.open('Nie znaleziono użytkownika', undefined, {
+                    duration: 2500,
+                  })
+                }
+                return throwError(() => new Error(err.message))
+              })
+            )
+            .subscribe(s => {
+              if (s.status == 201) {
+                this.fetchData()
+              }
+            })
+        }
+      })
+  }
+
+  tb(id: string) {
+    this.ac.returnKey(id).subscribe(r => {
+      if (r.status == 200) {
+        this.fetchData()
+      }
+    })
+  }
+}

frontend/src/app/admin-view/key/key.service.spec.ts

@@ -0,0 +1,23 @@
+import { TestBed } from '@angular/core/testing';
+
+import { KeyService } from './key.service';
+import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+
+describe('KeyService', () => {
+  let service: KeyService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [
+        provideHttpClient(),
+        provideHttpClientTesting()
+      ]
+    });
+    service = TestBed.inject(KeyService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

frontend/src/app/admin-view/key/key.service.ts

@@ -0,0 +1,55 @@
+import { HttpClient } from '@angular/common/http';
+import { inject, Injectable } from '@angular/core';
+import { DateTime } from 'luxon';
+import { map } from 'rxjs';
+import { AKey, AKeyAPI } from 'src/app/types/key';
+import { Status } from 'src/app/types/status';
+import { environment } from 'src/environments/environment';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class KeyService {
+
+  private http = inject(HttpClient)
+
+  getKeys() {
+    return this.http
+      .get<AKeyAPI[]>(environment.apiEndpoint + `/admin/keys`, { withCredentials: true })
+      .pipe(
+        map<AKeyAPI[], AKey[]>(v => v.map(r => ({
+          ...r,
+          borrow: DateTime.fromISO(r.borrow!),
+          tb: r.tb ? DateTime.fromISO(r.tb!) : undefined
+        })))
+      )
+  }
+
+  avalKeys() {
+    return this.http.get<string[]>(
+      environment.apiEndpoint + `/admin/keys/available`,
+      { withCredentials: true }
+    )
+  }
+
+  postKey(room: string, uname: string) {
+    return this.http.post<Status>(
+      environment.apiEndpoint + `/admin/keys/`,
+      { room: room, whom: uname },
+      { withCredentials: true }
+    )
+  }
+
+  returnKey(id: string) {
+    return this.putKeys(id, { tb: DateTime.now() })
+  }
+
+  private putKeys(id: string, update: Partial<AKey>) {
+    return this.http.put<Status>(
+      environment.apiEndpoint + `/admin/keys/${id}`,
+      update,
+      { withCredentials: true }
+    )
+  }
+
+}

frontend/src/app/admin-view/key/new-key/new-key.component.html

@@ -0,0 +1,23 @@
+<mat-dialog-content>
+  <form (ngSubmit)="send()" [formGroup]="form">
+    <mat-form-field>
+      <mat-label>Sala</mat-label>
+      <mat-select formControlName="room" required>
+        @for (item of rooms; track $index) {
+          <mat-option [value]="item">{{item}}</mat-option>
+        }
+      </mat-select>
+      @if (form.controls['room'].hasError('required')) {
+        <mat-error>Wymagane</mat-error>
+      }
+    </mat-form-field>
+    <mat-form-field>
+      <mat-label>Wypożyczający</mat-label>
+      <app-user-search formControlName="user" required/>
+      @if (form.controls['user'].hasError('required')) {
+        <mat-error>Wymagane</mat-error>
+      }
+    </mat-form-field>
+    <button mat-button>Wyślij</button>
+  </form>
+</mat-dialog-content>

frontend/src/app/admin-view/key/new-key/new-key.component.scss

@@ -0,0 +1,4 @@
+form {
+  display: flex;
+  flex-direction: column;
+}

frontend/src/app/admin-view/key/new-key/new-key.component.spec.ts

@@ -0,0 +1,102 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { NewKeyComponent } from './new-key.component'
+import { MatDialogModule, MatDialogRef } from '@angular/material/dialog'
+import {
+  MatFormFieldControl,
+  MatFormFieldModule,
+} from '@angular/material/form-field'
+import { MatSelectModule } from '@angular/material/select'
+import { Component, forwardRef } from '@angular/core'
+import { Observable, of } from 'rxjs'
+import {
+  AbstractControlDirective,
+  ControlValueAccessor,
+  FormsModule,
+  NG_VALUE_ACCESSOR,
+  NgControl,
+  ReactiveFormsModule,
+} from '@angular/forms'
+import { NoopAnimationsModule } from '@angular/platform-browser/animations'
+import { KeyService } from '../key.service'
+
+@Component({
+  selector: 'app-user-search',
+  template: '',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => UserSearchStub),
+      multi: true,
+    },
+    {
+      provide: MatFormFieldControl,
+      useExisting: UserSearchStub,
+    },
+  ],
+  standalone: false,
+})
+class UserSearchStub
+  implements ControlValueAccessor, MatFormFieldControl<never>
+{
+  value = null
+  stateChanges: Observable<void> = of()
+  id = ''
+  placeholder = ''
+  ngControl: NgControl | AbstractControlDirective | null = null
+  focused = false
+  empty = true
+  shouldLabelFloat = true
+  required = false
+  disabled = false
+  errorState = false
+  controlType?: string | undefined
+  autofilled?: boolean | undefined
+  userAriaDescribedBy?: string | undefined
+  // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars
+  setDescribedByIds(ids: string[]): void {}
+  // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars
+  onContainerClick(event: MouseEvent): void {}
+  // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars
+  writeValue(obj: unknown): void {}
+  // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars
+  registerOnChange(fn: unknown): void {}
+  // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars
+  registerOnTouched(fn: unknown): void {}
+  // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars
+  setDisabledState?(isDisabled: boolean): void {}
+}
+
+xdescribe('NewKeyComponent', () => {
+  let component: NewKeyComponent
+  let fixture: ComponentFixture<NewKeyComponent>
+  let acMock
+
+  beforeEach(async () => {
+    acMock = {
+    }
+    await TestBed.configureTestingModule({
+      declarations: [NewKeyComponent, UserSearchStub],
+      providers: [
+        { provide: KeyService, useValue: acMock },
+        { provide: MatDialogRef, useValue: {} },
+      ],
+      imports: [
+        MatDialogModule,
+        MatFormFieldModule,
+        MatSelectModule,
+        FormsModule,
+        ReactiveFormsModule,
+        NoopAnimationsModule,
+      ],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(NewKeyComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+})

frontend/src/app/admin-view/key/new-key/new-key.component.ts

@@ -0,0 +1,32 @@
+import { Component, inject, OnInit } from '@angular/core'
+import { MatDialogRef } from '@angular/material/dialog'
+import { FormControl, FormGroup } from '@angular/forms'
+import { UserSearchResult } from 'src/app/commonComponents/user-search/user-search.component'
+import { KeyService } from '../key.service'
+
+@Component({
+  selector: 'app-new-key',
+  templateUrl: './new-key.component.html',
+  styleUrl: './new-key.component.scss',
+  standalone: false,
+})
+export class NewKeyComponent implements OnInit {
+  private ac = inject(KeyService)
+  public dialogRef: MatDialogRef<NewKeyComponent> = inject(MatDialogRef)
+
+  rooms: string[] = []
+  form = new FormGroup({
+    room: new FormControl<string>(''),
+    user: new FormControl<UserSearchResult | null>(null),
+  })
+
+  ngOnInit(): void {
+    this.ac.avalKeys().subscribe(v => {
+      this.rooms = v
+    })
+  }
+
+  send() {
+    if (this.form.valid) this.dialogRef.close(this.form.value)
+  }
+}

frontend/src/app/admin-view/menu-edit/menu-add/menu-add.component.html

@@ -0,0 +1,33 @@
+<h1 mat-dialog-title>Tworzenie wpisów do jadłospisu</h1>
+<mat-dialog-content>
+    <mat-radio-group [(ngModel)]="type">
+        <mat-radio-button value="day">Dzień</mat-radio-button>
+        <mat-radio-button value="week">Tydzień</mat-radio-button>
+        <mat-radio-button value="file">Plik</mat-radio-button>
+    </mat-radio-group>
+    <div>
+        @switch (type) {
+            @case ("day") {
+                <app-date-selector [filter]="filter" [(date)]="day"></app-date-selector>
+            }
+            @case ("week") {
+                <mat-form-field>
+                    <mat-label>Wybierz tydzień</mat-label>
+                    <mat-date-range-input [rangePicker]="picker" [formGroup]="range">
+                        <input matStartDate formControlName="start">
+                        <input matEndDate formControlName="end">
+                    </mat-date-range-input>
+                    <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
+                    <mat-date-range-picker #picker></mat-date-range-picker>
+                </mat-form-field>
+            }
+            @case ("file") {
+                <button mat-flat-button (click)="activateUpload()">Otwórz okno</button>
+            }
+        }
+    </div>
+</mat-dialog-content>
+<mat-dialog-actions>
+    <button matButton="outlined" (click)="submit()">Utwórz pozycje</button>
+    <button mat-button mat-dialog-close>Anuluj</button>
+</mat-dialog-actions>

frontend/src/app/admin-view/menu-edit/menu-add/menu-add.component.spec.ts

@@ -0,0 +1,39 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { MenuAddComponent } from './menu-add.component'
+import {
+  MAT_DIALOG_DATA,
+  MatDialogModule,
+  MatDialogRef,
+} from '@angular/material/dialog'
+import { MatRadioModule } from '@angular/material/radio'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+
+describe('MenuAddComponent', () => {
+  let component: MenuAddComponent
+  let fixture: ComponentFixture<MenuAddComponent>
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [MenuAddComponent],
+      providers: [
+        { provide: MAT_DIALOG_DATA, useValue: {} },
+        { provide: MatDialogRef, useValue: {} },
+      ],
+      imports: [
+        MatDialogModule,
+        MatRadioModule,
+        ReactiveFormsModule,
+        FormsModule,
+      ],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(MenuAddComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+})

frontend/src/app/admin-view/menu-edit/menu-add/menu-add.component.ts

@@ -0,0 +1,59 @@
+import { Component, inject, signal } from '@angular/core'
+import { MenuUploadComponent } from '../menu-upload/menu-upload.component'
+import { MatDialog, MatDialogRef } from '@angular/material/dialog'
+import { FDSelection } from 'src/app/fd.da'
+import { FormControl, FormGroup } from '@angular/forms'
+import { MAT_DATE_RANGE_SELECTION_STRATEGY } from '@angular/material/datepicker'
+import { DateTime } from 'luxon'
+import { weekendFilter } from 'src/app/util'
+
+@Component({
+  selector: 'app-menu-add',
+  templateUrl: './menu-add.component.html',
+  styleUrl: './menu-add.component.scss',
+  providers: [
+    { provide: MAT_DATE_RANGE_SELECTION_STRATEGY, useClass: FDSelection },
+  ],
+  standalone: false,
+})
+export class MenuAddComponent {
+  public dialogRef: MatDialogRef<MenuAddComponent> = inject(MatDialogRef)
+  private dialog = inject(MatDialog)
+
+  type: string | undefined
+  filter = weekendFilter
+
+  day = signal<DateTime>(DateTime.now())
+
+  range = new FormGroup({
+    start: new FormControl<DateTime | null>(null),
+    end: new FormControl<DateTime | null>(null),
+  })
+
+  submit() {
+    switch (this.type) {
+      case 'day':
+        this.dialogRef.close({ type: 'day', value: this.day() })
+        break
+      case 'week':
+        this.dialogRef.close({
+          type: 'week',
+          value: { start: this.range.value.start, count: 5 },
+        })
+        break
+      default:
+        break
+    }
+  }
+
+  activateUpload() {
+    this.dialog
+      .open(MenuUploadComponent)
+      .afterClosed()
+      .subscribe(data => {
+        if (data) {
+          this.dialogRef.close({ type: 'file', ...data })
+        }
+      })
+  }
+}

frontend/src/app/admin-view/menu-edit/menu-edit.component.html

@@ -0,0 +1,147 @@
+<div id="upper-bar">
+  <mat-form-field subscriptSizing="dynamic">
+    <mat-label>Wybierz tydzień</mat-label>
+    <mat-date-range-input [rangePicker]="picker" [formGroup]="range">
+      <input matStartDate formControlName="start">
+      <input matEndDate formControlName="end">
+    </mat-date-range-input>
+    <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
+    <mat-date-range-picker #picker></mat-date-range-picker>
+  </mat-form-field>
+  <button mat-icon-button (click)="ac.refresh()"><mat-icon>search</mat-icon></button>
+  <button mat-icon-button (click)="addDate()"><mat-icon>add</mat-icon></button>
+  <button mat-icon-button (click)="print()"><mat-icon>print</mat-icon></button>
+</div>
+
+<div class="mainc">
+  @switch (ac.state()) {
+    @case (0) {
+      <p>Wybierz zakres dat powyżej i kliknij szukaj</p>
+    }
+    @case (1) {
+      <div class="spinner">
+        <mat-spinner/>
+      </div>
+    }
+    @case (2) {
+      <table mat-table [dataSource]="dataSource">
+        <div matColumnDef="day">
+          <th mat-header-cell *matHeaderCellDef>Dzień</th>
+          <td mat-cell *matCellDef="let element">
+            <span>{{element.day.toFormat('dd.LL.yyyy')}}r.</span>
+            <p>{{element.day.toFormat('cccc') | titlecase }}</p>
+            <app-field-editor category="Nazwa" [(word)]="element.dayTitle" (wordChange)="editTitle(element._id)"/><br><hr>
+            <button (click)="remove(element._id)">Usuń dzień</button>
+          </td>
+        </div>
+        <div matColumnDef="sn">
+          <th mat-header-cell *matHeaderCellDef>Śniadanie</th>
+          <td mat-cell *matCellDef="let element">
+            <ul class="non-editable">
+              @for (i of ls.defaultItems.sn; track i) {
+                <li>{{i}}</li>
+              }
+            </ul><hr>
+            <app-list-editor [(list)]="element.sn.fancy" (edit)="editSn(element._id)" dataList="sn-fancy"/><hr>
+            <ul>
+              <li><app-field-editor category="II Śniadanie" [(word)]="element.sn.second" list="sn-second" (wordChange)="editSn(element._id)"/></li>
+            </ul>
+          </td>
+        </div>
+        <div matColumnDef="ob">
+          <th mat-header-cell *matHeaderCellDef>Obiad</th>
+          <td mat-cell *matCellDef="let element">
+            <ul>
+              <li><app-field-editor category="Zupa" [(word)]="element.ob.soup" list="ob-soup" (wordChange)="editOb(element._id)"/></li>
+              <li><app-field-editor category="Vege" [(word)]="element.ob.vege" list="ob-vege" (wordChange)="editOb(element._id)"/></li>
+              <li><app-field-editor category="Danie główne" [(word)]="element.ob.meal" list="ob-meal" (wordChange)="editOb(element._id)"/></li>
+            </ul><hr>
+            <app-list-editor [(list)]="element.ob.condiments" (edit)="editOb(element._id)" dataList="ob-condiments"/><hr>
+            <ul>
+              <li><app-field-editor category="Napój" [(word)]="element.ob.drink" list="ob-drink" (wordChange)="editOb(element._id)"/></li>
+            </ul><hr>
+            <app-list-editor [(list)]="element.ob.other" (edit)="editOb(element._id)" dataList="ob-other"/>
+          </td>
+        </div>
+        <div matColumnDef="kol">
+          <th mat-header-cell *matHeaderCellDef>Kolacja</th>
+          <td mat-cell *matCellDef="let element">
+            <div>
+              @switch (element.day.weekday) {
+                @default {
+                  <div>
+                    <ul class="non-editable">
+                      @for (i of ls.defaultItems.kol; track i) {
+                        <li>{{i}}</li>
+                      }
+                    </ul><hr>
+                    <ul>
+                      <li><app-field-editor category="Kolacja" [(word)]="element.kol" list="kol" (wordChange)="editKol(element._id)"/></li>
+                    </ul>
+                  </div>
+                }
+                @case (5) {
+                  <div class="non-editable">
+                    <p>Kolacja w domu!</p>
+                    <p>(Nie edytowalne)</p>
+                  </div>
+                }
+              }
+            </div>
+          </td>
+        </div>
+
+        <tr mat-header-row *matHeaderRowDef="dcols"></tr>
+        <tr mat-row *matRowDef="let row; columns: dcols"></tr>
+      </table>
+    }
+  }
+</div>
+
+@if (options) {
+  <datalist id="sn-fancy">
+    @for (i of options.sn.fancy; track i) {
+      <option>{{i}}</option>
+    }
+  </datalist>
+  <datalist id="sn-second">
+    @for (i of options.sn.second; track i) {
+      <option>{{i}}</option>
+    }
+  </datalist>
+  <datalist id="ob-soup">
+    @for (i of options.ob.soup; track i) {
+      <option>{{i}}</option>
+    }
+  </datalist>
+  <datalist id="ob-vege">
+    @for (i of options.ob.vege; track i) {
+      <option>{{i}}</option>
+    }
+  </datalist>
+  <datalist id="ob-meal">
+    @for (i of options.ob.meal; track i) {
+      <option>{{i}}</option>
+    }
+  </datalist>
+  <datalist id="ob-condiments">
+    @for (i of options.ob.condiments; track i) {
+      <option>{{i}}</option>
+    }
+  </datalist>
+  <datalist id="ob-drink">
+    @for (i of options.ob.drink; track i) {
+      <option>{{i}}</option>
+    }
+  </datalist>
+  <datalist id="ob-other">
+    @for (i of options.ob.other; track i) {
+      <option>{{i}}</option>
+    }
+  </datalist>
+  <datalist id="kol">
+    @for (i of options.kol; track i) {
+      <option>{{i}}</option>
+    }
+  </datalist>
+}

frontend/src/app/admin-view/menu-edit/menu-edit.component.scss

@@ -0,0 +1,34 @@
+#upper-bar {
+  display: flex;
+}
+
+mat-form-field {
+  flex-grow: 1;
+}
+
+button[mat-icon-button] {
+  margin-left: 4pt;
+  margin-right: 4pt;
+  margin-top: 4pt;
+}
+
+.non-editable {
+  color: gray;
+  font-style: italic;
+}
+
+.mainc {
+  height: 100%;
+  position: relative;
+}
+
+.spinner {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

frontend/src/app/admin-view/menu-edit/menu-edit.component.spec.ts

@@ -0,0 +1,49 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { MenuEditComponent } from './menu-edit.component'
+import { MatTableModule } from '@angular/material/table'
+import { MatInputModule } from '@angular/material/input'
+import {
+  MAT_DATE_RANGE_SELECTION_STRATEGY,
+  MatDatepickerModule,
+} from '@angular/material/datepicker'
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
+import { FDSelection } from 'src/app/fd.da'
+import { ReactiveFormsModule } from '@angular/forms'
+import { MatDialogModule } from '@angular/material/dialog'
+import { MatIconModule } from '@angular/material/icon'
+import { provideLuxonDateAdapter } from '@angular/material-luxon-adapter'
+import { MenuEditService } from './menu-edit.service'
+
+xdescribe('MenuEditComponent', () => {
+  let component: MenuEditComponent
+  let fixture: ComponentFixture<MenuEditComponent>
+
+  beforeEach(() => {
+    const acMock = jasmine.createSpyObj('MenuEditService', {})
+    TestBed.configureTestingModule({
+      declarations: [MenuEditComponent],
+      imports: [
+        MatTableModule,
+        MatInputModule,
+        MatDatepickerModule,
+        BrowserAnimationsModule,
+        ReactiveFormsModule,
+        MatDialogModule,
+        MatIconModule,
+      ],
+      providers: [
+        provideLuxonDateAdapter(),
+        { provide: MAT_DATE_RANGE_SELECTION_STRATEGY, useClass: FDSelection },
+        { provide: MenuEditService, useValue: acMock },
+      ],
+    })
+    fixture = TestBed.createComponent(MenuEditComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+})

frontend/src/app/admin-view/menu-edit/menu-edit.component.ts

@@ -0,0 +1,160 @@
+import { Component, inject, OnDestroy } from '@angular/core'
+import { FormControl, FormGroup } from '@angular/forms'
+import { MAT_DATE_RANGE_SELECTION_STRATEGY } from '@angular/material/datepicker'
+import { FDSelection } from 'src/app/fd.da'
+import { Menu } from 'src/app/types/menu'
+import { MatTableDataSource } from '@angular/material/table'
+import { MatDialog } from '@angular/material/dialog'
+import { MenuUploadComponent } from './menu-upload/menu-upload.component'
+import { Status } from 'src/app/types/status'
+import { MatSnackBar } from '@angular/material/snack-bar'
+import { MenuAddComponent } from './menu-add/menu-add.component'
+import { LocalStorageService } from 'src/app/services/local-storage.service'
+import { DateTime } from 'luxon'
+import { MenuEditService } from './menu-edit.service'
+import { MenuOptions } from './menu-edit.model'
+import { ToolbarService } from '../toolbar/toolbar.service'
+import { ActivatedRoute, Router } from '@angular/router'
+
+@Component({
+  selector: 'app-menu-edit',
+  templateUrl: './menu-edit.component.html',
+  styleUrls: ['./menu-edit.component.scss'],
+  providers: [
+    { provide: MAT_DATE_RANGE_SELECTION_STRATEGY, useClass: FDSelection },
+  ],
+  standalone: false,
+})
+export class MenuEditComponent implements OnDestroy {
+  protected ac = inject(MenuEditService)
+  private dialog = inject(MatDialog)
+  private sb = inject(MatSnackBar)
+  private tb = inject(ToolbarService)
+  private router = inject(Router)
+  private route = inject(ActivatedRoute)
+  readonly ls = inject(LocalStorageService)
+
+  dcols: string[] = ['day', 'sn', 'ob', 'kol']
+  dataSource: MatTableDataSource<Menu> = new MatTableDataSource<Menu>()
+  range = new FormGroup({
+    start: new FormControl<DateTime | null>(null),
+    end: new FormControl<DateTime | null>(null),
+  })
+  public options?: MenuOptions
+
+  constructor() {
+    this.range.setValue(this.ac.seDates())
+    this.range.valueChanges.subscribe(v => {
+      this.ac.seDates.set({start: v.start!, end: v.end!})
+    })
+    this.ac.menuItems.subscribe(v => {
+      this.dataSource.data = v
+    })
+    this.refresh()
+    this.tb.comp = this
+    this.tb.menu = [
+      { title: "Badanie opinii", icon: "analytics", fn: "statistics"}
+    ]
+  }
+
+  ngOnDestroy(): void {
+    this.tb.comp = undefined
+    this.tb.menu = undefined
+  }
+
+  statistics() {
+    this.router.navigate(['stats'], { relativeTo: this.route })
+  }
+
+  print() {
+    this.ac
+      .print(this.range.value.start, this.range.value.end)
+      ?.subscribe(r => {
+        if (r && r.length > 0) {
+          const mywindow = window.open(
+            undefined,
+            'Drukowanie',
+            'height=400,width=400'
+          )
+          mywindow?.document.write(r)
+          mywindow?.print()
+          mywindow?.close()
+        }
+      })
+  }
+
+  addDate() {
+    this.dialog
+      .open(MenuAddComponent)
+      .afterClosed()
+      .subscribe(data => {
+        if (data) {
+          switch (data.type) {
+            case 'day':
+              this.ac.new
+                .single(data.value)
+                .subscribe(s => this.refreshIfGood(s))
+              break
+            case 'week':
+              this.ac.new
+                .range(data.value.start, data.value.count)
+                .subscribe(s => this.refreshIfGood(s))
+              break
+            case 'file':
+              this.refresh()
+              break
+            default:
+              break
+          }
+        }
+      })
+  }
+
+  refresh() {
+    this.ac.refresh()
+    this.ac.getOpts().subscribe(o => {
+      this.options = o
+    })
+  }
+
+  private refreshIfGood(s: Status) {
+    if (s.status.toString().match(/2\d\d/)) this.refresh()
+  }
+
+  activateUpload() {
+    this.dialog
+      .open(MenuUploadComponent)
+      .afterClosed()
+      .subscribe(data => {
+        if (data) this.refresh()
+      })
+  }
+
+  editSn(id: string) {
+    this.ac
+      .editSn(id, this.dataSource.data.find(v => v._id == id)!.sn)
+      .subscribe(s => this.refreshIfGood(s))
+  }
+
+  editOb(id: string) {
+    this.ac
+      .editOb(id, this.dataSource.data.find(v => v._id == id)!.ob)
+      .subscribe(s => this.refreshIfGood(s))
+  }
+
+  editKol(id: string) {
+    this.ac
+      .editKol(id, this.dataSource.data.find(v => v._id == id)?.kol)
+      .subscribe(s => this.refreshIfGood(s))
+  }
+
+  editTitle(id: string) {
+    this.ac
+      .editTitle(id, this.dataSource.data.find(v => v._id == id)?.dayTitle)
+      .subscribe(s => this.refreshIfGood(s))
+  }
+
+  remove(id: string) {
+    this.ac.rm(id).subscribe(s => this.refreshIfGood(s))
+  }
+}

frontend/src/app/admin-view/menu-edit/menu-edit.model.ts

@@ -0,0 +1,15 @@
+export interface MenuOptions {
+  sn: {
+    fancy: string[]
+    second: string[]
+  }
+  ob: {
+    soup: string[]
+    vege: string[]
+    meal: string[]
+    condiments: string[]
+    drink: string[]
+    other: string[]
+  }
+  kol: string[]
+}

frontend/src/app/admin-view/menu-edit/menu-edit.service.spec.ts

@@ -0,0 +1,23 @@
+import { TestBed } from '@angular/core/testing';
+
+import { MenuEditService } from './menu-edit.service';
+import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+
+describe('MenuEditService', () => {
+  let service: MenuEditService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [
+        provideHttpClient(),
+        provideHttpClientTesting()
+      ]
+    });
+    service = TestBed.inject(MenuEditService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

frontend/src/app/admin-view/menu-edit/menu-edit.service.ts

@@ -0,0 +1,145 @@
+import { HttpClient } from '@angular/common/http';
+import { inject, Injectable, signal } from '@angular/core';
+import { DateTime } from 'luxon';
+import { BehaviorSubject, catchError, map, of } from 'rxjs';
+import { Menu, MenuAPI } from 'src/app/types/menu';
+import { STATE } from 'src/app/types/state';
+import { Status } from 'src/app/types/status';
+import { environment } from 'src/environments/environment';
+import { MenuOptions } from './menu-edit.model';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class MenuEditService {
+  private http = inject(HttpClient)
+
+  private _menuItems = new BehaviorSubject<Menu[]>([])
+  public readonly menuItems = this._menuItems.asObservable()
+  private _state = signal(STATE.NOT_LOADED);
+  public readonly state = this._state.asReadonly();
+  private _error = signal<string | undefined>(undefined);
+  public readonly error = this._error.asReadonly();
+
+  seDates = signal<{
+    start: DateTime | null,
+    end: DateTime | null
+  }>({
+    start: null,
+    end: null
+  })
+
+  public refresh() {
+    this.getMenu()
+  }
+
+  private getMenu() {
+    if (!(this.seDates().start && this.seDates().end)) return
+    this._state.set(STATE.PENDING)
+    const body = { start: this.seDates().start!.toString(), end: this.seDates().end!.toString() }
+    this.http.get
+      <MenuAPI[]>
+      (environment.apiEndpoint + `/admin/menu`, { withCredentials: true, params: body })
+      .pipe(
+        catchError((err: Error) => {
+          this._state.set(STATE.ERROR)
+          this._error.set(err.message)
+          return of()
+        }),
+        map<MenuAPI[], Menu[]>(v =>
+          v.map(i => ({
+            ...i,
+            day: DateTime.fromISO(i.day)
+          })))
+      ).subscribe(v => {
+        this._error.set(undefined)
+        this._menuItems.next(v ?? [])
+        this._state.set(STATE.LOADED)
+      })
+  }
+
+  getOpts() {
+    return this.http.get<MenuOptions>(environment.apiEndpoint + `/admin/menu/opts`, {
+      withCredentials: true,
+    })
+  }
+
+  postMenu(file: File) {
+    if (file) {
+      const formData = new FormData()
+      formData.append('menu', file)
+      return this.http.post<Status>(
+        environment.apiEndpoint + '/admin/menu/upload',
+        formData,
+        { withCredentials: true }
+      )
+    }
+    return
+  }
+
+  editSn(id: string, content: Menu['sn']) {
+    return this.putMenu(id, { sn: content })
+  }
+
+  editOb(id: string, content: Menu['ob']) {
+    return this.putMenu(id, { ob: content })
+  }
+
+  editKol(id: string, content: Menu['kol']) {
+    return this.putMenu(id, { kol: content })
+  }
+
+  editTitle(id: string, content: Menu['dayTitle']) {
+    return this.putMenu(id, { dayTitle: content })
+  }
+
+  print(start?: DateTime | null, end?: DateTime | null) {
+    if (start && end) {
+      const body = { start: start.toString(), end: end.toString() }
+      return this.http.get(environment.apiEndpoint + '/admin/menu/print', {
+        withCredentials: true,
+        params: body,
+        responseType: 'text',
+      })
+    }
+    return
+  }
+
+  stat(day: DateTime, m: 'ob' | 'kol') {
+    return this.http.get<{ y: number; n: number }>(
+      environment.apiEndpoint + `/admin/menu/${day.toISO()}/votes/${m}`,
+      { withCredentials: true }
+    )
+  }
+
+  new = {
+    single: (day: DateTime) => {
+      return this.http.post<Status>(
+        environment.apiEndpoint + `/admin/menu/${day.toISO()}`,
+        null,
+        { withCredentials: true }
+      )
+    },
+    range: (start: DateTime, count: number) => {
+      return this.http.post<Status>(
+        environment.apiEndpoint + `/admin/menu/${start.toISO()}/${count}/`,
+        null,
+        { withCredentials: true }
+      )
+    },
+  }
+  rm(id: string) {
+    return this.http.delete<Status>(
+      environment.apiEndpoint + `/admin/menu/${id}`,
+      { withCredentials: true }
+    )
+  }
+
+  private putMenu(id: string, update: Partial<Menu>) {
+    return this.http.put<Status>(
+      environment.apiEndpoint + `/admin/menu/${id}`,
+      update,
+      { withCredentials: true }
+    )
+  }
+}

frontend/src/app/admin-view/menu-edit/menu-stats/menu-item-stats-dialog/menu-item-stats-dialog.component.html

@@ -0,0 +1,45 @@
+<h2 mat-dialog-title>
+  {{ data.date.toFormat('dd.LL.yyyy') }}<br />
+  {{ data.item }}
+</h2>
+
+<mat-dialog-content>
+  @switch (msi.state()) {
+  @case (1) {
+  <div class="spinner">
+    <mat-spinner />
+  </div>
+  }
+  @case (2) {
+  <p>Ilość opinii: {{ count }}</p>
+  <p>Ocena:</p>
+  <app-star-control [value]="rating" [display]="true"></app-star-control>
+  <p>Komentarze:</p>
+  @for (item of comments; track $index) {
+  <mat-card class="comment">
+    <mat-card-content>
+      {{item}}
+    </mat-card-content>
+  </mat-card>
+  }
+  @empty {
+    <p class="gray">Brak</p>
+  }
+  <p>Tagi:</p>
+  <mat-chip-set role="list">
+    @for (tag of tags | keyvalue; track tag.key) {
+    <mat-chip role="listitem">
+      {{tag.key}} — {{tag.value}}
+    </mat-chip>
+    }
+  </mat-chip-set>
+  }
+  @case (3) {
+  <p>Wystąpił błąd podczas ładowania statystyk: {{msi.error()}}</p>
+  }
+  }
+</mat-dialog-content>
+
+<mat-dialog-actions align="end">
+  <button mat-button mat-dialog-close>Close</button>
+</mat-dialog-actions>

frontend/src/app/admin-view/menu-edit/menu-stats/menu-item-stats-dialog/menu-item-stats-dialog.component.scss

@@ -0,0 +1,12 @@
+h2 {
+  text-align: center;
+}
+
+.gray {
+  color: gray;
+  font-style: italic;
+}
+
+mat-card {
+  margin: 5px;
+}

frontend/src/app/admin-view/menu-edit/menu-stats/menu-item-stats-dialog/menu-item-stats-dialog.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MenuItemStatsDialogComponent } from './menu-item-stats-dialog.component';
+
+describe('MenuItemStatsDialogComponent', () => {
+  let component: MenuItemStatsDialogComponent;
+  let fixture: ComponentFixture<MenuItemStatsDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [MenuItemStatsDialogComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(MenuItemStatsDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/admin-view/menu-edit/menu-stats/menu-item-stats-dialog/menu-item-stats-dialog.component.ts

@@ -0,0 +1,34 @@
+import { Component, inject, OnInit } from '@angular/core';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { DateTime } from 'luxon';
+import { MenuItemStatsService } from './menu-item-stats.service';
+
+@Component({
+  selector: 'app-menu-item-stats-dialog',
+  standalone: false,
+  templateUrl: './menu-item-stats-dialog.component.html',
+  styleUrl: './menu-item-stats-dialog.component.scss'
+})
+export class MenuItemStatsDialogComponent implements OnInit {
+  public data: { date: DateTime; item: string } = inject(MAT_DIALOG_DATA)
+  protected msi = inject(MenuItemStatsService)
+
+  protected rating = 0;
+  protected comments: string[] = [];
+  protected tags: Record<string, number> = {}
+  protected count = 0;
+
+  ngOnInit(): void {
+    this.msi.date.set(this.data.date)
+    this.msi.item.set(this.data.item)
+    this.msi.refresh()
+
+    this.msi.menuItems.subscribe(v => {
+      this.rating = v.value.rating ?? 0
+      this.comments = v.value.comments ?? []
+      this.tags = v.value.tags ?? {}
+      this.count = v.value.count ?? 0
+    })
+  }
+
+}

frontend/src/app/admin-view/menu-edit/menu-stats/menu-item-stats-dialog/menu-item-stats.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { MenuItemStatsService } from './menu-item-stats.service';
+
+describe('MenuItemStatsService', () => {
+  let service: MenuItemStatsService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(MenuItemStatsService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

frontend/src/app/admin-view/menu-edit/menu-stats/menu-item-stats-dialog/menu-item-stats.service.ts

@@ -0,0 +1,57 @@
+import { HttpClient } from '@angular/common/http';
+import { inject, Injectable, signal } from '@angular/core';
+import { DateTime } from 'luxon';
+import { BehaviorSubject, catchError, of } from 'rxjs';
+import { MenuStats } from 'src/app/types/menu-stats';
+import { STATE } from 'src/app/types/state';
+import { environment } from 'src/environments/environment';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class MenuItemStatsService {
+  protected http = inject(HttpClient)
+
+  private _menuItems = new BehaviorSubject<MenuStats>({
+    name: '',
+    type: 'other',
+    value: {
+      count: 0,
+      comments: [],
+      rating: 0,
+      tags: {}
+    }
+  });
+  public readonly menuItems = this._menuItems.asObservable()
+  private _state = signal(STATE.NOT_LOADED);
+  public readonly state = this._state.asReadonly();
+  private _error = signal<string | undefined>(undefined);
+  public readonly error = this._error.asReadonly();
+
+  public date = signal<DateTime | null>(null)
+  public item = signal<string>('')
+
+  public refresh() {
+    this.getStats()
+  }
+
+  private getStats() {
+    if (!(this.date() && this.item())) return
+    this._state.set(STATE.PENDING)
+    const body = { date: this.date()!.toString(), item: this.item() }
+    this.http.get
+      <MenuStats>
+      (environment.apiEndpoint + `/admin/menu/editor/stats`, { withCredentials: true, params: body })
+      .pipe(
+        catchError((err: Error) => {
+          this._state.set(STATE.ERROR)
+          this._error.set(err.message)
+          return of()
+        })
+      ).subscribe(v => {
+        this._error.set(undefined)
+        this._menuItems.next(v)
+        this._state.set(STATE.LOADED)
+      })
+  }
+}

frontend/src/app/admin-view/menu-edit/menu-stats/menu-stats.component.html

@@ -0,0 +1,121 @@
+<div id="upper-bar">
+  <mat-form-field subscriptSizing="dynamic">
+    <mat-label>Wybierz tydzień</mat-label>
+    <mat-date-range-input [rangePicker]="picker" [formGroup]="range">
+      <input matStartDate formControlName="start">
+      <input matEndDate formControlName="end">
+    </mat-date-range-input>
+    <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
+    <mat-date-range-picker #picker></mat-date-range-picker>
+  </mat-form-field>
+  <button mat-icon-button (click)="ss.refresh()"><mat-icon>search</mat-icon></button>
+</div>
+
+<div class="mainc">
+  @switch (ss.state()) {
+  @case (0) {
+  <p>Wybierz zakres dat powyżej i kliknij szukaj</p>
+  }
+  @case (1) {
+  <div class="spinner">
+    <mat-spinner />
+  </div>
+  }
+  @case (2) {
+  <table mat-table [dataSource]="dataSource">
+    <div matColumnDef="day">
+      <th mat-header-cell *matHeaderCellDef>Dzień</th>
+      <td mat-cell *matCellDef="let element">
+        <span>{{element.day.toFormat('dd.LL.yyyy')}}r.</span>
+        <p>{{element.day.toFormat('cccc') | titlecase }}</p>
+        <p>
+          {{element.dayTitle}}
+        </p>
+      </td>
+    </div>
+    <div matColumnDef="sn">
+      <th mat-header-cell *matHeaderCellDef>Śniadanie</th>
+      <td mat-cell *matCellDef="let element">
+        <ul class="non-editable">
+          @for (i of ls.defaultItems.sn; track i) {
+          <li>{{i}}</li>
+          }
+        </ul>
+        <ul>
+          @for (i of element.sn.fancy; track $index) {
+          <li><button mat-button (click)="openDialog(element.day, i)"><mat-icon>bar_chart</mat-icon><span>{{i}}</span></button></li>
+          }
+        </ul>
+        @if (element.sn.second) {
+        <ul class="non-editable">
+          <li>{{element.sn.second}}</li>
+        </ul>
+        }
+      </td>
+    </div>
+    <div matColumnDef="ob">
+      <th mat-header-cell *matHeaderCellDef>Obiad</th>
+      <td mat-cell *matCellDef="let element">
+        <ul>
+          @if (element.ob.soup) {
+          <li><button mat-button (click)="openDialog(element.day, element.ob.soup)"><mat-icon>bar_chart</mat-icon><span>{{element.ob.soup}}</span></button></li>
+          }
+          @if (element.ob.vege) {
+          <li><button mat-button (click)="openDialog(element.day, element.ob.vege)"><mat-icon>bar_chart</mat-icon><span>{{element.ob.vege}}</span></button></li>
+          }
+          @if (element.ob.meal) {
+          <li><button mat-button (click)="openDialog(element.day, element.ob.meal)"><mat-icon>bar_chart</mat-icon><span>{{element.ob.meal}}</span></button></li>
+          }
+        </ul>
+        <ul>
+          @for (i of element.ob.condiments; track $index) {
+          <li><button mat-button (click)="openDialog(element.day, i)"><mat-icon>bar_chart</mat-icon><span>{{i}}</span></button></li>
+          }
+        </ul>
+        <ul>
+          @if (element.ob.drink) {
+          <li><button mat-button (click)="openDialog(element.day, element.ob.drink)"><mat-icon>bar_chart</mat-icon><span>{{element.ob.drink}}</span></button></li>
+          }
+        </ul>
+        <ul>
+          @for (i of element.ob.other; track $index) {
+          <li><button mat-button (click)="openDialog(element.day, i)"><mat-icon>bar_chart</mat-icon><span>{{i}}</span></button></li>
+          }
+        </ul>
+      </td>
+    </div>
+    <div matColumnDef="kol">
+      <th mat-header-cell *matHeaderCellDef>Kolacja</th>
+      <td mat-cell *matCellDef="let element">
+        <div>
+          @switch (element.day.weekday) {
+          @default {
+          <div>
+            <ul class="non-editable">
+              @for (i of ls.defaultItems.kol; track i) {
+              <li>{{i}}</li>
+              }
+            </ul>
+            <ul>
+              @if (element.kol) {
+              <li><button mat-button (click)="openDialog(element.day, element.kol)"><mat-icon>bar_chart</mat-icon><span>{{element.kol}}</span></button></li>
+              }
+            </ul>
+          </div>
+          }
+          @case (5) {
+          <div class="non-editable">
+            <p>Kolacja w domu!</p>
+          </div>
+          }
+          }
+        </div>
+      </td>
+    </div>
+
+    <tr mat-header-row *matHeaderRowDef="dcols"></tr>
+    <tr mat-row *matRowDef="let row; columns: dcols"></tr>
+  </table>
+  }
+  }
+</div>

frontend/src/app/admin-view/menu-edit/menu-stats/menu-stats.component.scss

@@ -0,0 +1,23 @@
+#upper-bar {
+  display: flex;
+}
+
+mat-form-field {
+  flex-grow: 1;
+}
+
+button[mat-icon-button] {
+  margin-left: 4pt;
+  margin-right: 4pt;
+  margin-top: 4pt;
+}
+
+.mainc {
+  height: 100%;
+  position: relative;
+}
+
+.non-editable {
+  color: gray;
+  font-style: italic;
+}

frontend/src/app/admin-view/menu-edit/menu-stats/menu-stats.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MenuStatsComponent } from './menu-stats.component';
+
+describe('MenuStatsComponent', () => {
+  let component: MenuStatsComponent;
+  let fixture: ComponentFixture<MenuStatsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [MenuStatsComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(MenuStatsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/admin-view/menu-edit/menu-stats/menu-stats.component.ts

@@ -0,0 +1,71 @@
+import { Component, inject, OnDestroy } from '@angular/core';
+import { MenuEditService } from '../menu-edit.service';
+import { FormControl, FormGroup } from '@angular/forms';
+import { DateTime } from 'luxon';
+import { MAT_DATE_RANGE_SELECTION_STRATEGY } from '@angular/material/datepicker';
+import { FDSelection } from 'src/app/fd.da';
+import { MatTableDataSource } from '@angular/material/table';
+import { Menu } from 'src/app/types/menu';
+import { LocalStorageService } from 'src/app/services/local-storage.service';
+import { MatDialog } from '@angular/material/dialog';
+import { MenuItemStatsDialogComponent } from './menu-item-stats-dialog/menu-item-stats-dialog.component';
+import { ToolbarService } from '../../toolbar/toolbar.service';
+import { ActivatedRoute, Router } from '@angular/router';
+
+@Component({
+  selector: 'app-menu-stats',
+  standalone: false,
+  templateUrl: './menu-stats.component.html',
+  styleUrl: './menu-stats.component.scss',
+  providers: [
+    { provide: MAT_DATE_RANGE_SELECTION_STRATEGY, useClass: FDSelection },
+  ],
+})
+export class MenuStatsComponent implements OnDestroy {
+  protected ss = inject(MenuEditService)
+  protected ls = inject(LocalStorageService)
+  protected tb = inject(ToolbarService)
+  protected dialog = inject(MatDialog)
+  protected router = inject(Router)
+  protected route = inject(ActivatedRoute)
+
+  dcols: string[] = ['day', 'sn', 'ob', 'kol']
+
+  range = new FormGroup({
+    start: new FormControl<DateTime | null>(null),
+    end: new FormControl<DateTime | null>(null),
+  })
+  dataSource: MatTableDataSource<Menu> = new MatTableDataSource<Menu>()
+
+  constructor() {
+    this.range.setValue(this.ss.seDates())
+    this.range.valueChanges.subscribe(v => {
+      this.ss.seDates.set({ start: v.start!, end: v.end! })
+    })
+    this.ss.menuItems.subscribe(v => {
+      this.dataSource.data = v
+    })
+    this.tb.comp = this
+    this.tb.menu = [
+      {
+        fn: "goBack",
+        title: "Edytowanie jadłospisu",
+        icon: "arrow_back"
+      }
+    ]
+  }
+
+  ngOnDestroy(): void {
+    this.tb.comp = undefined
+    this.tb.menu = undefined
+  }
+
+  openDialog(date: DateTime, item: string) {
+    this.dialog.open(MenuItemStatsDialogComponent, {
+      data: { date, item }
+    })
+  }
+  goBack() {
+    this.router.navigate(['../'], { relativeTo: this.route })
+  }
+}

frontend/src/app/admin-view/menu-edit/menu-upload/menu-upload.component.html

@@ -0,0 +1,20 @@
+<h1 mat-dialog-title>Import z pliku</h1>
+<mat-dialog-content>
+    <input type="file" name="menu" #fu style="display: none;" (change)="onFileChange($event)" accept=".xlsx,.ods,application/vnd.oasis.opendocument.spreadsheet">
+    <button matButton="outlined" (click)="fu.click()">Wybierz plik</button>
+    <div style="color: red;">
+        <h1>UWAGA!</h1>
+        <h3>Przed wysłaniem upewnij się że</h3>
+        <ul>
+            <li>Daty w pliku są prawidłowe i poprawnie sformatowane (DD.MM.RRRR)</li>
+            <li>Wszystkie pozycje w menu są w osobnych linijkach</li>
+            <li>Załączony dokument to arkusz w formacie XLSX lub ODS</li>
+        </ul>
+        <h2>Nie spełnienie któregokolwiek z tych wymagań może skutkować szkodami w programie!</h2>
+        <h3>Późniejsza modyfikacja danych jest niemożliwa w tej wersji programu.</h3>
+    </div>
+</mat-dialog-content>
+<mat-dialog-actions>
+    <button matButton="outlined" class="error-color" [disabled]="file === undefined" (click)="submit()">Wyślij</button>
+    <button mat-button mat-dialog-close>Anuluj</button>
+</mat-dialog-actions>

frontend/src/app/admin-view/menu-edit/menu-upload/menu-upload.component.scss

@@ -0,0 +1,4 @@
+:host {
+  margin: 8pt;
+  display: block;
+}

frontend/src/app/admin-view/menu-edit/menu-upload/menu-upload.component.spec.ts

@@ -0,0 +1,29 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { MenuUploadComponent } from './menu-upload.component'
+import { MatDialogModule, MatDialogRef } from '@angular/material/dialog'
+import { MenuEditService } from '../menu-edit.service'
+
+xdescribe('MenuUploadComponent', () => {
+  let component: MenuUploadComponent
+  let fixture: ComponentFixture<MenuUploadComponent>
+
+  beforeEach(() => {
+    const acMock = jasmine.createSpyObj('AdminCommService')
+    TestBed.configureTestingModule({
+      declarations: [MenuUploadComponent],
+      providers: [
+        { provide: MenuEditService, useValue: acMock },
+        { provide: MatDialogRef, useValue: {} },
+      ],
+      imports: [MatDialogModule],
+    })
+    fixture = TestBed.createComponent(MenuUploadComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+})

frontend/src/app/admin-view/menu-edit/menu-upload/menu-upload.component.ts

@@ -0,0 +1,30 @@
+import { Component, inject } from '@angular/core'
+import { MatDialogRef } from '@angular/material/dialog'
+import { MenuEditService } from '../menu-edit.service'
+
+@Component({
+  selector: 'app-upload-edit',
+  templateUrl: './menu-upload.component.html',
+  styleUrls: ['./menu-upload.component.scss'],
+  standalone: false,
+})
+export class MenuUploadComponent {
+  private ac = inject(MenuEditService)
+  public dialogRef: MatDialogRef<MenuUploadComponent> = inject(MatDialogRef)
+
+  protected file: File | undefined
+  onFileChange(event: Event) {
+    const file: File = (event.target as HTMLInputElement).files![0]
+    if (file) {
+      this.file = file
+    } else {
+      this.file = undefined
+    }
+  }
+
+  submit() {
+    this.ac.postMenu(this.file!)?.subscribe(value => {
+      this.dialogRef.close(value)
+    })
+  }
+}

frontend/src/app/admin-view/news-edit/new-post/edit-post.component.html

@@ -0,0 +1,11 @@
+<form [formGroup]="form" (ngSubmit)="makePost()">
+    <mat-form-field appearance="outline">
+        <mat-label>Tytuł</mat-label>
+        <input type="text" matInput required formControlName="title">
+    </mat-form-field>
+    <mat-form-field appearance="outline">
+        <mat-label>Treść</mat-label>
+        <textarea matInput required formControlName="content" cdkTextareaAutosize></textarea>
+    </mat-form-field>
+    <button mat-stroked-button>Wyślij</button>
+</form>

frontend/src/app/admin-view/news-edit/new-post/edit-post.component.scss

@@ -0,0 +1,10 @@
+:host {
+  padding: 8pt;
+  display: block;
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}

frontend/src/app/admin-view/news-edit/new-post/edit-post.component.spec.ts

@@ -0,0 +1,41 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { NewPostComponent } from './edit-post.component'
+import {
+  MAT_DIALOG_DATA,
+  MatDialogModule,
+  MatDialogRef,
+} from '@angular/material/dialog'
+import { MatFormFieldModule } from '@angular/material/form-field'
+import { MatInputModule } from '@angular/material/input'
+import { ReactiveFormsModule } from '@angular/forms'
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
+
+describe('NewPostComponent', () => {
+  let component: NewPostComponent
+  let fixture: ComponentFixture<NewPostComponent>
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [NewPostComponent],
+      imports: [
+        MatDialogModule,
+        MatFormFieldModule,
+        MatInputModule,
+        ReactiveFormsModule,
+        BrowserAnimationsModule,
+      ],
+      providers: [
+        { provide: MatDialogRef, useValue: {} },
+        { provide: MAT_DIALOG_DATA, useValue: {} },
+      ],
+    })
+    fixture = TestBed.createComponent(NewPostComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+})

frontend/src/app/admin-view/news-edit/new-post/edit-post.component.ts

@@ -0,0 +1,35 @@
+import { Component, inject } from '@angular/core'
+import { FormControl, FormGroup } from '@angular/forms'
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'
+import { News } from 'src/app/types/news.model'
+
+@Component({
+  selector: 'app-edit-post',
+  templateUrl: './edit-post.component.html',
+  styleUrls: ['./edit-post.component.scss'],
+  standalone: false,
+})
+export class NewPostComponent {
+  public dialogRef: MatDialogRef<NewPostComponent> = inject(MatDialogRef)
+  public data: Partial<News> = inject(MAT_DIALOG_DATA)
+  form: FormGroup
+  constructor() {
+    if (this.data == null) {
+      this.data = {
+        title: '',
+        content: '',
+      }
+    }
+    this.form = new FormGroup({
+      title: new FormControl(this.data.title),
+      content: new FormControl(this.data.content),
+    })
+  }
+
+  protected makePost() {
+    this.dialogRef.close({
+      title: this.form.get('title')?.value,
+      content: this.form.get('content')?.value,
+    })
+  }
+}

frontend/src/app/admin-view/news-edit/news-edit.component.html

@@ -0,0 +1,43 @@
+<button matButton="outlined" (click)="newPost()" class="newPost">Nowy post</button>
+<div class="mainc">
+  @if (ac.state() !== 2) {
+    <app-load-shade [state]="ac.state()" [error]="ac.error()" (refresh)="ac.refresh()"/>
+  }
+  @for (item of ac.news | async; track item) {
+    <mat-card>
+      <mat-card-header>
+        <mat-card-title>{{item.title}}</mat-card-title>
+        @if (item.pinned) {
+          <mat-icon>push_pin</mat-icon>
+        }
+      </mat-card-header>
+      <mat-card-content [innerHTML]="item.formatted"></mat-card-content>
+      <mat-card-actions>
+        <button mat-mini-fab (click)="editPost(item)"><mat-icon>edit</mat-icon></button>
+        <button mat-mini-fab (click)="pinToggle(item)"><mat-icon>push_pin</mat-icon></button>
+        @switch (item.visible) {
+          @case (true) {
+              <button mat-mini-fab (click)="visibleToggle(item)">
+                <mat-icon>visibility</mat-icon>
+              </button>
+            }
+            @default {
+              <button mat-mini-fab (click)="visibleToggle(item)" class="error-color">
+                <mat-icon>visibility_off</mat-icon>
+              </button>
+            }
+          }
+        <button mat-mini-fab (click)="delete(item._id)"><mat-icon>delete_forever</mat-icon></button>
+      </mat-card-actions>
+      <mat-card-footer>
+        <p>{{fullName(item)}} {{item.date | date:'d-LL-yyyy HH:mm'}}</p>
+      </mat-card-footer>
+    </mat-card>
+  } @empty {
+    <mat-card>
+      <p>
+        Brak wiadomości.
+      </p>
+    </mat-card>
+  }
+</div>

frontend/src/app/admin-view/news-edit/news-edit.component.scss

@@ -0,0 +1,48 @@
+mat-card {
+  margin: 15px;
+  padding: 1ch;
+}
+
+mat-card-title {
+  font-size: 1.5rem;
+}
+
+mat-card-footer p {
+  font-size: 0.8rem;
+  color: #4a4a4a;
+  margin-bottom: 0;
+  text-align: end;
+  @media (prefers-color-scheme: dark) {
+    color: #999999;
+  }
+}
+
+mat-card-content p {
+  white-space: pre-line;
+}
+
+mat-card p {
+  margin: 15px;
+}
+
+button {
+  margin-right: 4pt;
+}
+
+:host {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+}
+
+.mainc {
+  position: relative;
+  height: 100%;
+  width: 100%;
+}
+
+.newPost {
+  margin: 1ch;
+}

frontend/src/app/admin-view/news-edit/news-edit.component.spec.ts

@@ -0,0 +1,29 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { NewsEditComponent } from './news-edit.component'
+import { MatDialogModule } from '@angular/material/dialog'
+import { MatSnackBarModule } from '@angular/material/snack-bar'
+import { MatCardModule } from '@angular/material/card'
+import { NewsEditService } from './news-edit.service'
+
+xdescribe('NewsEditComponent', () => {
+  let component: NewsEditComponent
+  let fixture: ComponentFixture<NewsEditComponent>
+  let acMock
+
+  beforeEach(() => {
+    acMock = {}
+    TestBed.configureTestingModule({
+      declarations: [NewsEditComponent],
+      providers: [{ provide: NewsEditService, useValue: acMock }],
+      imports: [MatDialogModule, MatSnackBarModule, MatCardModule],
+    })
+    fixture = TestBed.createComponent(NewsEditComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+})

frontend/src/app/admin-view/news-edit/news-edit.component.ts

@@ -0,0 +1,123 @@
+import { Component, inject, OnInit } from '@angular/core'
+import { MatDialog } from '@angular/material/dialog'
+import { NewPostComponent } from './new-post/edit-post.component'
+import { catchError, throwError } from 'rxjs'
+import { MatSnackBar } from '@angular/material/snack-bar'
+import { News } from 'src/app/types/news.model'
+import { NewsEditService } from './news-edit.service'
+
+@Component({
+  selector: 'app-news-edit',
+  templateUrl: './news-edit.component.html',
+  styleUrls: ['./news-edit.component.scss'],
+  standalone: false,
+})
+export class NewsEditComponent implements OnInit {
+  protected ac = inject(NewsEditService)
+  private dialog = inject(MatDialog)
+  private sb = inject(MatSnackBar)
+
+  ngOnInit() {
+    this.ac.refresh()
+  }
+
+  newPost() {
+    this.dialog
+      .open(NewPostComponent, { width: '90vw' })
+      .afterClosed()
+      .subscribe(result => {
+        if (result == undefined) return
+        this.ac
+          .postNews(result.title, result.content)
+          .pipe(
+            catchError(err => {
+              this.sb.open('Wystąpił błąd. Skontaktuj się z obsługą programu.')
+              return throwError(() => new Error(err.message))
+            })
+          )
+          .subscribe(data => {
+            if (data.status == 201) {
+              this.ngOnInit()
+            } else {
+              this.sb.open('Wystąpił błąd. Skontaktuj się z obsługą programu.')
+            }
+          })
+      })
+  }
+
+  editPost(item: News) {
+    this.dialog
+      .open(NewPostComponent, { data: item, width: '90vh' })
+      .afterClosed()
+      .subscribe(result => {
+        if (result == undefined) return
+        this.ac
+          .updateNews(item._id, result.title, result.content)
+          .pipe(
+            catchError(err => {
+              this.sb.open('Wystąpił błąd. Skontaktuj się z obsługą programu.')
+              return throwError(() => new Error(err.message))
+            })
+          )
+          .subscribe(data => {
+            if (data.status == 200) {
+              this.ngOnInit()
+            } else {
+              this.sb.open('Wystąpił błąd. Skontaktuj się z obsługą programu.')
+            }
+          })
+      })
+  }
+
+  delete(id: string) {
+    this.ac.deleteNews(id).subscribe(data => {
+      if (data.status == 200) {
+        this.ngOnInit()
+      }
+    })
+  }
+
+  visibleToggle(item: News) {
+    this.ac
+      .toggleNews(item._id, !!item.visible)
+      .pipe(
+        catchError(err => {
+          this.sb.open('Wystąpił błąd. Skontaktuj się z obsługą programu.')
+          return throwError(() => new Error(err.message))
+        })
+      )
+      .subscribe(data => {
+        if (data.status == 200) {
+          this.ngOnInit()
+        } else {
+          this.sb.open('Wystąpił błąd. Skontaktuj się z obsługą programu.')
+        }
+      })
+  }
+
+  pinToggle(item: News) {
+    this.ac
+      .togglePin(item._id, !!item.pinned)
+      .pipe(
+        catchError(err => {
+          this.sb.open('Wystąpił błąd. Skontaktuj się z obsługą programu.')
+          return throwError(() => new Error(err.message))
+        })
+      )
+      .subscribe(data => {
+        if (data.status == 200) {
+          this.ngOnInit()
+        } else {
+          this.sb.open('Wystąpił błąd. Skontaktuj się z obsługą programu.')
+        }
+      })
+  }
+
+  fullName(n: News): string {
+    const { author: { fname, surname, uname } } = n;
+    if (fname || surname) {
+      return [fname, surname].filter(Boolean).join(' ');
+    }
+    return uname;
+  }
+}