Initial commit

2025-03-05 21:38:10 +01:00
commit 503909d762
198 changed files with 19203 additions and 0 deletions
--- a/src/app/admin-view/account-mgmt/account-mgmt.component.html
+++ b/src/app/admin-view/account-mgmt/account-mgmt.component.html
@@ -0,0 +1,43 @@
+<div id="upper-bar">
+    <mat-form-field>
+        <mat-label>Wyszukaj</mat-label>
+        <input matInput (keyup)="filter($event)">
+    </mat-form-field>
+    <button mat-icon-button (click)="new()"><mat-icon>add</mat-icon></button>
+</div>
+<mat-spinner *ngIf="loading"></mat-spinner>
+<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>Akcje</th>
+        <td mat-cell *matCellDef="let element">
+            <button mat-mini-fab (click)="resetPass(element._id)"><mat-icon>lock_reset</mat-icon></button>
+            <button mat-mini-fab (click)="edit(element)"><mat-icon>edit</mat-icon></button>
+            <button mat-mini-fab (click)="toggleLock(element)">
+                <div [ngSwitch]="element.locked">
+                    <mat-icon *ngSwitchCase="true">lock</mat-icon>
+                    <mat-icon *ngSwitchDefault>lock_open</mat-icon>
+                </div>
+            </button>
+            <button mat-mini-fab (click)="delete(element._id)"><mat-icon>delete_forever</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>
--- a/src/app/admin-view/account-mgmt/account-mgmt.component.scss
+++ b/src/app/admin-view/account-mgmt/account-mgmt.component.scss
@@ -0,0 +1,23 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+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;
+}
--- a/src/app/admin-view/account-mgmt/account-mgmt.component.spec.ts
+++ b/src/app/admin-view/account-mgmt/account-mgmt.component.spec.ts
@@ -0,0 +1,38 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AccountMgmtComponent } from './account-mgmt.component';
+import { AdminCommService } from '../admin-comm.service';
+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 { of } from 'rxjs';
+import { MatTableModule } from '@angular/material/table';
+import { MatInputModule } from '@angular/material/input';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+describe('AccountMgmtComponent', () => {
+  let component: AccountMgmtComponent;
+  let fixture: ComponentFixture<AccountMgmtComponent>;
+
+  beforeEach(async () => {
+    const acMock = jasmine.createSpyObj("AdminCommService", {
+      getAccs: of()
+    })
+    await TestBed.configureTestingModule({
+      declarations: [AccountMgmtComponent],
+      providers: [
+        {provide: AdminCommService, useValue: acMock}
+      ],
+      imports: [MatDialogModule, MatSnackBarModule, MatFormFieldModule, MatIconModule, MatPaginatorModule, MatTableModule, MatInputModule, BrowserAnimationsModule]
+    }).compileComponents();
+    fixture = TestBed.createComponent(AccountMgmtComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/admin-view/account-mgmt/account-mgmt.component.ts
+++ b/src/app/admin-view/account-mgmt/account-mgmt.component.ts
@@ -0,0 +1,130 @@
+import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
+import { AdminCommService } from '../admin-comm.service';
+import { MatDialog } from '@angular/material/dialog';
+import { MatTableDataSource } from '@angular/material/table';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { UserDeleteComponent } from './user-delete/user-delete.component';
+import { UserEditComponent } from './user-edit/user-edit.component';
+import { catchError, throwError } from 'rxjs';
+import { UserResetComponent } from './user-reset/user-reset.component';
+import { LocalStorageService } from 'src/app/services/local-storage.service';
+
+@Component({
+  selector: 'app-account-mgmt',
+  templateUrl: './account-mgmt.component.html',
+  styleUrls: ['./account-mgmt.component.scss']
+})
+
+
+export class AccountMgmtComponent implements OnInit, AfterViewInit {
+  users: MatTableDataSource<any>
+  loading = false
+  @ViewChild(MatPaginator) paginator!: MatPaginator
+
+  constructor(readonly ac:AdminCommService, private dialog: MatDialog, private sb: MatSnackBar, protected readonly ls: LocalStorageService) {
+    this.users = new MatTableDataSource<any>();
+    this.users.filterPredicate = (data: Record<string, any>, filter: string): boolean => {
+      const dataStr = Object.keys(data).reduce((curr: string, key: string) => {
+        if (key == "_id") {
+          return ''
+        }
+        return curr + data[key] + '⫂'
+      }, '').toLowerCase()
+      const filternew = filter.trim().toLowerCase()
+
+      return dataStr.indexOf(filternew) != -1
+    }
+  }
+  
+  ngAfterViewInit() {
+    this.users.paginator = this.paginator
+  }
+
+  ngOnInit() {
+    this.loading = true
+    this.ac.accs.getAccs().subscribe((data)=>{
+      this.loading = false
+      this.users.data = data
+    })
+  }
+
+  filter(event: Event) {
+    const value = (event.target as HTMLInputElement).value
+    this.users.filter = value.toLowerCase().trim()
+  }
+
+  edit(item: any) {
+    this.dialog.open(UserEditComponent, {data: item}).afterClosed().subscribe(reply => {
+      if (reply) {
+        this.ac.accs.putAcc(item._id, reply).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.ngOnInit()
+          } else {
+            this.sb.open("Wystąpił błąd. Skontaktuj się z obsługą programu.")
+          }
+        })
+      }
+    })
+  }
+
+  new() {
+    this.dialog.open(UserEditComponent).afterClosed().subscribe(reply => {
+      if (reply) {
+        this.ac.accs.postAcc(reply).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.sb.open("Użytkownik został utworzony.", undefined, {duration: 2500})
+            this.ngOnInit()
+          } else {
+            this.sb.open("Wystąpił błąd. Skontaktuj się z obsługą programu.")
+          }
+        })
+      }
+    })
+  }
+
+  delete(id: string) {
+    this.dialog.open(UserDeleteComponent).afterClosed().subscribe(reply => {
+      if (reply) {
+        this.ac.accs.deleteAcc(id).subscribe((res) => {
+          if (res.status == 200) {
+            this.sb.open("Użytkownik został usunięty.", undefined, {duration: 2500})
+            this.ngOnInit()
+          } else {
+            this.sb.open("Wystąpił błąd. Skontaktuj się z obsługą programu.")
+            console.error(res);
+          }
+        })
+      }
+    })
+  }
+
+  resetPass(id: string) {
+    this.dialog.open(UserResetComponent).afterClosed().subscribe((res) => {
+      if (res == true) {
+        this.ac.accs.resetPass(id).subscribe((patch)=>{
+          if (patch.status == 200) {
+            this.sb.open("Hasło zostało zresetowane", undefined, {duration: 2500})
+          }
+        })
+      }
+    })
+  }
+
+  toggleLock(item: any) {
+    this.ac.accs.putAcc(item._id, {locked: !item.locked}).subscribe((res) => {
+      if (res.status == 200) {
+        item.locked = !item.locked
+      }
+    })
+  }
+
+  collumns = ['name', 'surname', 'uname', 'actions']
+}
--- a/src/app/admin-view/account-mgmt/user-delete/user-delete.component.html
+++ b/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 color="warn" [mat-dialog-close]="true">Tak</button>
+</mat-dialog-actions>
--- a/src/app/admin-view/account-mgmt/user-delete/user-delete.component.scss
+++ b/src/app/admin-view/account-mgmt/user-delete/user-delete.component.scss
--- a/src/app/admin-view/account-mgmt/user-delete/user-delete.component.spec.ts
+++ b/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();
+  });
+});
--- a/src/app/admin-view/account-mgmt/user-delete/user-delete.component.ts
+++ b/src/app/admin-view/account-mgmt/user-delete/user-delete.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-user-delete',
+  templateUrl: './user-delete.component.html',
+  styleUrls: ['./user-delete.component.scss']
+})
+export class UserDeleteComponent {
+
+}
--- a/src/app/admin-view/account-mgmt/user-edit/user-edit.component.html
+++ b/src/app/admin-view/account-mgmt/user-edit/user-edit.component.html
@@ -0,0 +1,31 @@
+<form [formGroup]="form" (ngSubmit)="editUser()">
+    <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>Nazwa użytkownika</mat-label>
+        <input type="text" matInput required formControlName="uname">
+    </mat-form-field>
+    <mat-form-field *ngIf="this.ls.permChecker(32)">
+        <mat-label>Uprawnienia</mat-label>
+        <mat-select multiple formControlName="flags">
+            <mat-option [value]="1" *ngIf="ls.capCheck(1)">Wiadomości</mat-option>
+            <mat-option [value]="2" *ngIf="ls.capCheck(2)">Jadłospis</mat-option>
+            <mat-option [value]="4" *ngIf="ls.capCheck(4)">Powiadomienia</mat-option>
+            <mat-option [value]="8" *ngIf="ls.capCheck(8)">Grupy</mat-option>
+            <mat-option [value]="16">Konta</mat-option>
+            <mat-option [value]="64" *ngIf="ls.capCheck(32)">Klucze</mat-option>
+            <mat-option [value]="128" *ngIf="ls.capCheck(16)">Czystość</mat-option>
+        </mat-select>
+    </mat-form-field>
+    <button mat-stroked-button>Wyślij</button>
+</form>
--- a/src/app/admin-view/account-mgmt/user-edit/user-edit.component.scss
+++ b/src/app/admin-view/account-mgmt/user-edit/user-edit.component.scss
@@ -0,0 +1,10 @@
+:host {
+    padding: 8pt;
+    display: block;
+}
+
+form {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
--- a/src/app/admin-view/account-mgmt/user-edit/user-edit.component.spec.ts
+++ b/src/app/admin-view/account-mgmt/user-edit/user-edit.component.spec.ts
@@ -0,0 +1,31 @@
+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 { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+describe('UserEditComponent', () => {
+  let component: UserEditComponent;
+  let fixture: ComponentFixture<UserEditComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [UserEditComponent],
+      imports: [MatDialogModule, MatFormFieldModule, ReactiveFormsModule, MatInputModule, BrowserAnimationsModule],
+      providers: [
+        {provide: MatDialogRef, useValue: {}},
+        {provide: MAT_DIALOG_DATA, useValue: {}}
+      ]
+    }).compileComponents();
+    fixture = TestBed.createComponent(UserEditComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/admin-view/account-mgmt/user-edit/user-edit.component.ts
+++ b/src/app/admin-view/account-mgmt/user-edit/user-edit.component.ts
@@ -0,0 +1,59 @@
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { FormControl, FormGroup } from '@angular/forms';
+import { LocalStorageService } from 'src/app/services/local-storage.service';
+
+@Component({
+  selector: 'app-user-edit',
+  templateUrl: './user-edit.component.html',
+  styleUrls: ['./user-edit.component.scss']
+})
+export class UserEditComponent {
+  form: FormGroup
+  constructor (public dialogRef: MatDialogRef<UserEditComponent>, @Inject(MAT_DIALOG_DATA) public data: any, readonly ls: LocalStorageService) {
+    if (data == null) {
+      data = {
+        fname: "",
+        surname: "",
+        room: 0,
+        uname: "",
+        admin: 0
+      }
+    }
+    var flags: Array<number> = []
+    if (data.admin) {
+      if ((data.admin & 1) == 1) flags.push(1)
+      if ((data.admin & 2) == 2) flags.push(2)
+      if ((data.admin & 4) == 4) flags.push(4)
+      if ((data.admin & 8) == 8) flags.push(8)
+      if ((data.admin & 16) == 16) flags.push(16)
+      if ((data.admin & 32) == 32) flags.push(32)
+      if ((data.admin & 64) == 64) flags.push(64)
+      if ((data.admin & 128) == 128) flags.push(128)
+    }
+    this.form = new FormGroup({
+      fname: new FormControl(data.fname),
+      surname: new FormControl(data.surname),
+      room: new FormControl<number>(data.room),
+      uname: new FormControl(data.uname),
+      flags: new FormControl<Array<number>>(flags),
+    })
+  }
+
+  protected editUser() {
+    this.dialogRef.close({
+      fname: this.form.get('fname')?.value,
+      surname: this.form.get('surname')?.value,
+      room: this.form.get('room')?.value,
+      uname: this.form.get('uname')?.value,
+      flags: (() => {
+        var value = this.form.get('flags')?.value.reduce((a: number,b: number)=>a+b,0)
+        if (this.ls.capCheck(32)) {
+          return value
+        } else {
+          return undefined
+        }
+      })()
+    })
+  }
+}
--- a/src/app/admin-view/account-mgmt/user-reset/user-reset.component.html
+++ b/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" color="warn">Tak</button>
+    <button mat-button mat-dialog-close>Nie</button>
+</mat-dialog-actions>
--- a/src/app/admin-view/account-mgmt/user-reset/user-reset.component.scss
+++ b/src/app/admin-view/account-mgmt/user-reset/user-reset.component.scss
--- a/src/app/admin-view/account-mgmt/user-reset/user-reset.component.spec.ts
+++ b/src/app/admin-view/account-mgmt/user-reset/user-reset.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UserResetComponent } from './user-reset.component';
+
+describe('UserResetComponent', () => {
+  let component: UserResetComponent;
+  let fixture: ComponentFixture<UserResetComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [UserResetComponent]
+    });
+    fixture = TestBed.createComponent(UserResetComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/admin-view/account-mgmt/user-reset/user-reset.component.ts
+++ b/src/app/admin-view/account-mgmt/user-reset/user-reset.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-user-reset',
+  templateUrl: './user-reset.component.html',
+  styleUrls: ['./user-reset.component.scss']
+})
+export class UserResetComponent {
+
+}
--- a/src/app/admin-view/admin-comm.service.spec.ts
+++ b/src/app/admin-view/admin-comm.service.spec.ts
@@ -0,0 +1,24 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AdminCommService } from './admin-comm.service';
+import { HttpClient } from '@angular/common/http';
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+
+describe('AdminCommService', () => {
+  let service: AdminCommService;
+  let httpClient: HttpClient
+  let httpTestingController: HttpTestingController
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [ HttpClientTestingModule ]
+    });
+    service = TestBed.inject(AdminCommService);
+    httpClient = TestBed.inject(HttpClient);
+    httpTestingController = TestBed.inject(HttpTestingController);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
--- a/src/app/admin-view/admin-comm.service.ts
+++ b/src/app/admin-view/admin-comm.service.ts
@@ -0,0 +1,250 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Moment } from 'moment';
+import { environment } from 'src/environments/environment';
+import { Menu } from '../types/menu';
+import { Status } from '../types/status';
+import { Group } from '../types/group';
+import { map, of } from 'rxjs';
+import { Notification } from '../types/notification';
+import { News } from '../types/news';
+import { AKey } from '../types/key';
+import * as moment from 'moment';
+import { IUSettings } from './settings/settings.component';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AdminCommService {
+
+  constructor(private http: HttpClient) { }
+
+  //#region Menu
+  menu = {
+    getMenu: (start?: Moment | null, end?: Moment | null) => {
+      if (start && end) {
+        const body = {start: start.toString(), end: end.toString()}
+        return this.http.get<Menu[]>(environment.apiEndpoint+"/admin/menu", {withCredentials: true, params: body})
+      }
+      return
+    },
+
+    getOpts: () => {
+      return this.http.get<any>(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?: Moment | null, end?: Moment | 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: Moment, m: "ob" | "kol") => {
+      return this.http.get<{y: number, n: number}>(environment.apiEndpoint+`/admin/menu/${day.toISOString()}/votes/${m}`, {withCredentials: true})
+    },
+    new: {
+      single: (day: Moment) => {
+        return this.http.post<Status>(environment.apiEndpoint+`/admin/menu/${day.toISOString()}`, null, {withCredentials: true})
+      },
+      range: (start: Moment, count: number) => {
+        return this.http.post<Status>(environment.apiEndpoint+`/admin/menu/${start.toISOString()}/${count}/`, null, {withCredentials: true})
+      }
+    }
+  }
+  
+  private putMenu(id: string, update: Partial<Menu>) {
+    return this.http.put<Status>(environment.apiEndpoint+`/admin/menu/${id}`, update, {withCredentials: true})
+  }
+  //#endregion
+  //#region News
+  news = {
+    getNews: () => {
+      return this.http.get<News[]>(environment.apiEndpoint+`/admin/news`, {withCredentials: true})
+    },
+
+    postNews: (title: string, content: string) => {
+      return this.http.post<any>(environment.apiEndpoint+`/admin/news`, {title: title, content: content}, {withCredentials: true})
+    },
+
+    deleteNews: (id: string) => {
+      return this.http.delete<any>(environment.apiEndpoint+`/admin/news/${id}`, {withCredentials: true})
+    },
+
+    toggleNews: (id: string, inverter: boolean) => {
+      return this.putNews(id,{visible: !inverter})
+    },
+
+    togglePin: (id: string, inverter: boolean) => {
+      return this.putNews(id,{pinned: !inverter})
+    },
+
+    updateNews: (id: string, title: string, content: string) => {
+      return this.putNews(id,{title: title, content: content, date: Date.now})
+    }
+  }
+
+  private putNews(id: string, update: object) {
+    return this.http.put<any>(environment.apiEndpoint+`/admin/news/${id}`, update, {withCredentials: true})
+  }
+  //#endregion
+  //#region amgmt
+  accs = {
+    getAccs: () => {
+      return this.http.get<any[]>(environment.apiEndpoint+`/admin/accs`, {withCredentials: true})
+    },
+
+    postAcc: (item: any) => {
+      return this.http.post<Status>(environment.apiEndpoint+`/admin/accs`, item, {withCredentials: true})
+    },
+
+    putAcc: (id: string, update: object) => {
+      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`, {}, {withCredentials: true})
+    },
+    
+    deleteAcc: (id: string) => {
+      return this.http.delete<Status>(environment.apiEndpoint+`/admin/accs/${id}`, {withCredentials: true})
+    }
+  }
+  //#endregion
+  //#region Groups
+  groups = {
+    getGroups: () => {
+      return this.http.get<Group[]>(environment.apiEndpoint+`/admin/groups`, {withCredentials: true})
+    },
+    
+    editRooms: (id: string, rooms: number[]) => {
+      return this.putGroups(id, {rooms: rooms})
+    },
+
+    editUsers: (id: string, users: string[]) => {
+      return this.putGroups(id, {unames: users})
+    },
+
+    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})
+  }
+  //#endregion
+  //#region Notif
+  notif = {
+    send: (n: Notification) => {
+      return this.http.post<{sent: number, possible: number}>(environment.apiEndpoint+"/admin/notif/send", n, {withCredentials: true})   
+    },
+    getGroups: () => {
+      return this.http.get<Group[]>(environment.apiEndpoint+"/admin/notif/groups", {withCredentials: true})
+    }
+  }
+  //#endregion
+  //#region Keys
+  keys = {
+    getKeys: () => {
+      return this.http.get<AKey[]>(environment.apiEndpoint+`/admin/keys`, {withCredentials: true}).pipe(map((v) => {
+        return v.map((r) => {
+          r.borrow = moment(r.borrow)
+          if (r.tb) r.tb = moment(r.tb) 
+          return r
+        })
+      }))
+    },
+
+    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: moment.utc()})
+    }
+  }
+
+  private putKeys(id: string, update: Partial<AKey>) {
+    return this.http.put<Status>(environment.apiEndpoint+`/admin/keys/${id}`, update, {withCredentials: true})
+  }
+  //#endregion
+  //#region Clean
+  clean = {
+    getConfig: () => {
+      return this.http.get<{rooms: number[], things: string[]}>(environment.apiEndpoint+`/admin/clean/config`, {withCredentials: true})
+    },
+    getClean: (date: moment.Moment, room: number) => {
+      return this.http.get<{_id: string, date: string, grade: number, gradeDate: string, notes: {label: string, weight: number}[], room: number, tips: string} | null>(environment.apiEndpoint+`/admin/clean/${date.toISOString()}/${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: moment.Moment, end: moment.Moment) => {
+        return this.http.get<{room: number, avg: number}[]>(environment.apiEndpoint+`/admin/clean/summary/${start.toISOString()}/${end.toISOString()}`, {withCredentials: true})
+      }
+    }
+  }
+  //#endregion
+  //#region Settings
+  settings = {
+    getAll: () => {
+      return this.http.get<IUSettings>(environment.apiEndpoint+`/admin/settings/`, {withCredentials: true})
+    },
+    post: (settings: IUSettings) => {
+      return this.http.post<Status>(environment.apiEndpoint+`/admin/settings/`, settings, {withCredentials: true})
+    },
+    reload: () => {
+      return this.http.get<Status>(environment.apiEndpoint+`/admin/settings/reload/`, {withCredentials: true})
+    }
+  }
+  //#endregion
+
+  //#region misc
+  userFilter = (query: string) => {
+    return this.http.get<any[]>(environment.apiEndpoint+`/admin/usearch`, {params: {q: query}, withCredentials: true})
+  }
+  //#endregion
+}
--- a/src/app/admin-view/admin-view.component.html
+++ b/src/app/admin-view/admin-view.component.html
@@ -0,0 +1,33 @@
+<mat-toolbar color="accent">
+    <button mat-icon-button (click)="drawer.toggle()"><mat-icon>menu</mat-icon></button>
+    <span>{{title.getTitle()}}</span>
+    <span style="flex: 1 1 auto"></span>
+    <button mat-icon-button *ngIf="toolbar.menu" [matMenuTriggerFor]="menu"><mat-icon>more_vert</mat-icon></button>
+</mat-toolbar>
+<mat-menu #menu="matMenu">
+    @for (item of toolbar.menu; track $index) {
+        <button mat-menu-item *ngIf="item.check" (click)="toolbar.comp[item.fn]()">
+            <mat-icon *ngIf="item.icon">{{item.icon}}</mat-icon>
+            <span>{{item.title}}</span>
+        </button>
+    }
+</mat-menu>
+<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>
+            }
+            <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>
--- a/src/app/admin-view/admin-view.component.scss
+++ b/src/app/admin-view/admin-view.component.scss
@@ -0,0 +1,14 @@
+:host {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+mat-sidenav, mat-toolbar {
+    padding: 8pt
+}
+
+mat-sidenav-container {
+    flex-grow: 1;
+}
--- a/src/app/admin-view/admin-view.component.spec.ts
+++ b/src/app/admin-view/admin-view.component.spec.ts
@@ -0,0 +1,28 @@
+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 { MatSidenavModule } from '@angular/material/sidenav';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MatListModule } from '@angular/material/list';
+import { RouterModule } from '@angular/router';
+
+describe('AdminViewComponent', () => {
+  let component: AdminViewComponent;
+  let fixture: ComponentFixture<AdminViewComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [AdminViewComponent],
+      imports: [MatToolbarModule, MatIconModule, MatSidenavModule, BrowserAnimationsModule, MatListModule, RouterModule.forRoot([])]
+    });
+    fixture = TestBed.createComponent(AdminViewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/admin-view/admin-view.component.ts
+++ b/src/app/admin-view/admin-view.component.ts
@@ -0,0 +1,33 @@
+import { Component } from '@angular/core';
+import { Title } from '@angular/platform-browser';
+import { Router } from '@angular/router';
+import { LocalStorageService } from '../services/local-storage.service';
+import { Link } from '../types/link';
+import { ToolbarService } from './toolbar.service';
+
+@Component({
+  selector: 'app-admin-view',
+  templateUrl: './admin-view.component.html',
+  styleUrls: ['./admin-view.component.scss']
+})
+export class AdminViewComponent {
+  private readonly _LINKS: Link[] = [
+    { title: "Wiadomości", icon: "newspaper", href: "news", enabled: this.ls.permChecker(1) && this.ls.capCheck(1) },
+    { title: "Jadłospis", icon: "restaurant_menu", href: "menu", enabled: this.ls.permChecker(2) && this.ls.capCheck(2) },
+    { title: "Wysyłanie powiadomień", icon: "notifications", href: "notifications", enabled: this.ls.permChecker(4) && this.ls.capCheck(4) },
+    { title: "Grupy", icon: "groups", href: "groups", enabled: this.ls.permChecker(8) && this.ls.capCheck(8) },
+    { title: "Zarządzanie kontami", icon: "manage_accounts", href: "accounts", enabled: this.ls.permChecker(16) },
+    { title: "Klucze", icon: "key", href: "keys", enabled: this.ls.permChecker(64) && this.ls.capCheck(32) },
+    { title: "Czystość", icon: "cleaning_services", href: "grades", enabled: this.ls.permChecker(128) && this.ls.capCheck(16) },
+    { title: "Frekwencja", icon: "checklist", href: "attendence", enabled: false },
+    { title: "Ustawienia", icon: "settings_applications", href: "settings", enabled: this.ls.permChecker(32) },
+    { title: "Instrukcje", icon: "description", href: "guide", enabled: true }
+  ];
+  public get LINKS(): Link[] {
+    return this._LINKS.filter(v => v.enabled);
+  }
+  constructor(readonly title: Title, readonly router: Router, readonly ls: LocalStorageService, protected toolbar: ToolbarService) { }
+  goNormal() {
+    this.router.navigateByUrl('app')
+  }
+}
--- a/src/app/admin-view/grades/grades.component.html
+++ b/src/app/admin-view/grades/grades.component.html
@@ -0,0 +1,26 @@
+<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 dzień {{date.format("dddd")}}</p>
+    <p>Ocena: {{grade}}</p>
+    <button mat-flat-button (click)="downloadData()">Anuluj</button>
+    <!-- <button mat-flat-button (click)="calculate()">Oblicz</button> -->
+    <button mat-flat-button (click)="save()">Zapisz</button>
+    <button mat-raised-button color="warn" (click)="remove()" *ngIf="id">Usuń</button>
+    <div *ngFor="let item of things.controls; let i = index" formArrayName="things" id="things">
+        <div formGroupName="{{i}}">
+            <mat-checkbox formControlName="cb" #cb>
+                <span control="label"></span>
+                <span *ngIf="cb.checked">
+                    <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>
--- a/src/app/admin-view/grades/grades.component.scss
+++ b/src/app/admin-view/grades/grades.component.scss
@@ -0,0 +1,4 @@
+div#things {
+    display: flex;
+    flex-direction: column;
+}
--- a/src/app/admin-view/grades/grades.component.spec.ts
+++ b/src/app/admin-view/grades/grades.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GradesComponent } from './grades.component';
+
+describe('GradesComponent', () => {
+  let component: GradesComponent;
+  let fixture: ComponentFixture<GradesComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [GradesComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(GradesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/admin-view/grades/grades.component.ts
+++ b/src/app/admin-view/grades/grades.component.ts
@@ -0,0 +1,157 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { AdminCommService } from '../admin-comm.service';
+import * as moment from 'moment';
+import { FormArray, FormBuilder } from '@angular/forms';
+import { weekendFilter } from 'src/app/fd.da';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { ToolbarService } from '../toolbar.service';
+import { ActivatedRoute, Router } from '@angular/router';
+
+@Component({
+  selector: 'app-grades',
+  templateUrl: './grades.component.html',
+  styleUrl: './grades.component.scss'
+})
+export class GradesComponent implements OnInit, OnDestroy {
+  rooms!: number[]
+  room: number = 0;
+  date: moment.Moment;
+  grade: number = 6
+  gradeDate?: moment.Moment;
+  id?: string
+  filter = weekendFilter
+
+  get notes(): { label: string, weight: number }[] {
+    var 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 }[]) {
+    var things = this.things.controls
+    things.forEach((v) => {
+      var 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(private ac: AdminCommService, private fb: FormBuilder, private sb: MatSnackBar, private toolbar: ToolbarService, private router: Router, private route: ActivatedRoute) {
+    this.date = moment.utc().startOf('day')
+    if (!this.filter(this.date)) this.date.isoWeekday(8);
+    this.toolbar.comp = this
+    this.toolbar.menu = [
+      { title: "Podsumowanie", check: true, fn: "summary", icon: "analytics" }
+    ]
+    this.form.valueChanges.subscribe((v) => {
+      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 })
+  }
+
+  ngOnInit(): void {
+    this.ac.clean.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.clean.getClean(this.date, this.room).subscribe((v) => {
+      if (v) {
+        this.notes = v.notes
+        this.gradeDate = moment(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) => {
+      var weight = this.things.at(index).get('weight')!
+      weight.setValue(weight.value + 1)
+    },
+    sub: (index: number) => {
+      var 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()
+    var obj = {
+      grade: this.grade,
+      date: this.date.toDate(),
+      room: this.room,
+      notes: this.notes,
+      tips: this.form.get("tips")?.value
+    }
+    this.ac.clean.postClean(obj).subscribe((s) => {
+      this.sb.open("Zapisano!", undefined, { duration: 1500 })
+    })
+  }
+
+  remove() {
+    this.ac.clean.delete(this.id!).subscribe((s) => {
+      if (s.status == 200) {
+        this.downloadData()
+      }
+    })
+  }
+
+  roomNumber(value: number) {
+    this.room = value
+    this.downloadData()
+  }
+}
--- a/src/app/admin-view/grades/summary/summary.component.html
+++ b/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>
--- a/src/app/admin-view/grades/summary/summary.component.scss
+++ b/src/app/admin-view/grades/summary/summary.component.scss
--- a/src/app/admin-view/grades/summary/summary.component.spec.ts
+++ b/src/app/admin-view/grades/summary/summary.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SummaryComponent } from './summary.component';
+
+describe('SummaryComponent', () => {
+  let component: SummaryComponent;
+  let fixture: ComponentFixture<SummaryComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SummaryComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(SummaryComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/admin-view/grades/summary/summary.component.ts
+++ b/src/app/admin-view/grades/summary/summary.component.ts
@@ -0,0 +1,52 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { ToolbarService } from '../../toolbar.service';
+import { ActivatedRoute, Router } from '@angular/router';
+import { AdminCommService } from '../../admin-comm.service';
+import * as moment from 'moment';
+import { MatTableDataSource } from '@angular/material/table';
+import { FormBuilder } from '@angular/forms';
+
+@Component({
+  selector: 'app-summary',
+  templateUrl: './summary.component.html',
+  styleUrl: './summary.component.scss'
+})
+export class SummaryComponent implements OnInit, OnDestroy {
+
+  data: MatTableDataSource<{room: number, avg: number}> = new MatTableDataSource<{room: number, avg: number}>();
+  collumns = ['room', 'avg']
+
+  dateSelector = this.fb.group({
+    start: this.fb.control(moment.utc().startOf('day')),
+    end: this.fb.control(moment.utc().endOf('day'))
+  })
+
+  constructor (private toolbar: ToolbarService, private router: Router, private route: ActivatedRoute, private ac: AdminCommService, private fb: FormBuilder) {
+    this.toolbar.comp = this
+    this.toolbar.menu = [
+      {check: true, title: "Ocenianie", fn: "goBack", icon: "arrow_back"}
+    ]
+    this.dateSelector.valueChanges.subscribe((v) => {
+      this.download()
+    })
+  }
+  ngOnInit(): void {
+    this.download()
+  }
+  
+  download() {
+    this.ac.clean.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
+  }
+  
+}
--- a/src/app/admin-view/groups/groups.component.html
+++ b/src/app/admin-view/groups/groups.component.html
@@ -0,0 +1,25 @@
+<button mat-raised-button color="accent" (click)="newGroup()">Nowa grupa</button>
+<mat-card *ngFor="let item of groups">
+    <mat-card-header>
+        <mat-card-title contenteditable appCe (edit)="nameEdit(item._id, $event)">{{item.name}}</mat-card-title>
+    </mat-card-header>
+    <mat-card-content>
+        <table>
+            <thead>
+                <tr>
+                    <th>Pokoje</th>
+                    <th>Użytkownicy</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td><app-list-editor [converter]="item.rooms" (edit)="editRooms(item._id, $event)"/></td>
+                    <td><app-list-editor [converter]="item.unames"/></td>
+                </tr>
+            </tbody>
+        </table>
+    </mat-card-content>
+    <mat-card-actions>
+        <button mat-button color="warn" (click)="remove(item._id)">Usuń</button>
+    </mat-card-actions>
+</mat-card>
--- a/src/app/admin-view/groups/groups.component.scss
+++ b/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;
+}
--- a/src/app/admin-view/groups/groups.component.spec.ts
+++ b/src/app/admin-view/groups/groups.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GroupsComponent } from './groups.component';
+
+describe('GroupsComponent', () => {
+  let component: GroupsComponent;
+  let fixture: ComponentFixture<GroupsComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [GroupsComponent]
+    });
+    fixture = TestBed.createComponent(GroupsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/admin-view/groups/groups.component.ts
+++ b/src/app/admin-view/groups/groups.component.ts
@@ -0,0 +1,68 @@
+import { Component, OnInit } from '@angular/core';
+import { AdminCommService } from '../admin-comm.service';
+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';
+
+@Component({
+  selector: 'app-groups',
+  templateUrl: './groups.component.html',
+  styleUrls: ['./groups.component.scss']
+})
+export class GroupsComponent implements OnInit {
+  groups?: Group[]
+  constructor (protected readonly acs: AdminCommService, private readonly dialog: MatDialog) {}
+  ngOnInit(): void {
+    this.acs.groups.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 editRooms(id: string, rooms: string[]) {
+    this.acs.groups.editRooms(id, rooms.map(Number)).subscribe((s) => this.refreshIfGood(s))
+  }
+
+  protected editUsers(id: string, users: string[]) {
+    this.acs.groups.editUsers(id, users).subscribe((s) => this.refreshIfGood(s))
+  }
+
+  protected nameEdit(id: string, name: string | string[]) {
+    name = name as string
+    this.acs.groups.editName(id, name).subscribe((s) => this.refreshIfGood(s))
+  }
+
+  protected newGroup() {
+    let name = prompt("Nazwa grupy")
+    if (name) {
+      this.acs.groups.newGroup(name).subscribe((s) => this.refreshIfGood(s))
+    }
+  }
+  
+  protected remove(id: string) {
+    this.dialog.open(RemoveConfirmComponent).afterClosed().subscribe((v) => {
+      if (v) {
+        this.acs.groups.remove(id).subscribe((s) => this.refreshIfGood(s))
+      }
+    })
+  }
+}
--- a/src/app/admin-view/groups/remove-confirm/remove-confirm.component.html
+++ b/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" color="warn">Tak</button>
+</mat-dialog-actions>
--- a/src/app/admin-view/groups/remove-confirm/remove-confirm.component.scss
+++ b/src/app/admin-view/groups/remove-confirm/remove-confirm.component.scss
--- a/src/app/admin-view/groups/remove-confirm/remove-confirm.component.spec.ts
+++ b/src/app/admin-view/groups/remove-confirm/remove-confirm.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RemoveConfirmComponent } from './remove-confirm.component';
+
+describe('RemoveConfirmComponent', () => {
+  let component: RemoveConfirmComponent;
+  let fixture: ComponentFixture<RemoveConfirmComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [RemoveConfirmComponent]
+    });
+    fixture = TestBed.createComponent(RemoveConfirmComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/admin-view/groups/remove-confirm/remove-confirm.component.ts
+++ b/src/app/admin-view/groups/remove-confirm/remove-confirm.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-remove-confirm',
+  templateUrl: './remove-confirm.component.html',
+  styleUrls: ['./remove-confirm.component.scss']
+})
+export class RemoveConfirmComponent {
+
+}
--- a/src/app/admin-view/key/key.component.html
+++ b/src/app/admin-view/key/key.component.html
@@ -0,0 +1,42 @@
+<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>
+<mat-spinner *ngIf="loading"></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">{{element.whom.uname}}</td>
+    </div>
+    <div matColumnDef="borrow">
+        <th mat-header-cell *matHeaderCellDef>Data wypożyczenia</th>
+        <td mat-cell *matCellDef="let element">{{element.borrow.format("HH:mm, ddd D.MM.")}}</td>
+    </div>
+    <div matColumnDef="tb">
+        <th mat-header-cell *matHeaderCellDef>Data zwrotu</th>
+        <td mat-cell *matCellDef="let element">
+            @if (element.tb) {
+                {{element.tb.format("HH:mm, ddd D.MM.")}}
+            }
+        </td>
+    </div>
+    <div matColumnDef="actions">
+        <th mat-header-cell *matHeaderCellDef>Akcje</th>
+        <td mat-cell *matCellDef="let element">
+            <button mat-mini-fab (click)="tb(element._id)" *ngIf="!element.tb"><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>
--- a/src/app/admin-view/key/key.component.scss
+++ b/src/app/admin-view/key/key.component.scss
@@ -0,0 +1,5 @@
+#upper-bar {
+    display: flex;
+    align-items: baseline;
+    gap: 4pt;
+}
--- a/src/app/admin-view/key/key.component.spec.ts
+++ b/src/app/admin-view/key/key.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AdminKeyComponent } from './key.component';
+
+describe('KeyComponent', () => {
+  let component: AdminKeyComponent;
+  let fixture: ComponentFixture<AdminKeyComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AdminKeyComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(AdminKeyComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/admin-view/key/key.component.ts
+++ b/src/app/admin-view/key/key.component.ts
@@ -0,0 +1,90 @@
+import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatTableDataSource } from '@angular/material/table';
+import * as moment from 'moment';
+import { AKey } from 'src/app/types/key';
+import { AdminCommService } from '../admin-comm.service';
+import { FormControl } from '@angular/forms';
+import { MatDialog } from '@angular/material/dialog';
+import { NewKeyComponent } from './new-key/new-key.component';
+
+@Component({
+  selector: 'app-admin-key',
+  templateUrl: './key.component.html',
+  styleUrl: './key.component.scss'
+})
+export class AdminKeyComponent implements AfterViewInit, OnInit {
+  keys: MatTableDataSource<AKey> = new MatTableDataSource<AKey>();
+  pureData: AKey[] = []
+  private _filters: string[] = [];
+  public get filters(): string[] {
+    return this._filters;
+  }
+  collumns = ['room', 'whom', 'borrow', 'tb', 'actions']
+  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();
+  }
+  loading = true
+  @ViewChild(MatPaginator) paginator!: MatPaginator
+  
+  constructor (private ac: AdminCommService, private dialog: MatDialog) {
+    this.filters = []
+  }
+  
+  fetchData() {
+    this.loading = true
+    this.ac.keys.getKeys().subscribe((r) => {
+      this.loading = false
+      this.pureData = r
+      this.transformData()
+    })
+  }
+
+  transformData() {
+    var 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()
+    // [
+    //   {room: "Kawiarenka", borrow: moment().subtract(15, "minutes"), whom: {_id: "test", room: 303, uname: "sk"}}
+    // ]
+  }
+  
+  new() {
+    this.dialog.open(NewKeyComponent).afterClosed().subscribe(v => {
+      if (v) {
+        this.ac.keys.postKey(v.room, v.user).subscribe((s) => {
+          if (s.status == 201) {
+            this.fetchData()
+          }
+        })
+      }
+    })
+  }
+  
+  tb(id: string) {
+    this.ac.keys.returnKey(id).subscribe((r) => {
+      if (r.status == 200) {
+        this.fetchData()
+      }
+    })
+  }
+}
--- a/src/app/admin-view/key/new-key/new-key.component.html
+++ b/src/app/admin-view/key/new-key/new-key.component.html
@@ -0,0 +1,27 @@
+<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>
+            <mat-error *ngIf="form.controls['room'].hasError('required')">Wymagane</mat-error>
+        </mat-form-field>
+        <mat-form-field>
+            <mat-label>Wypożyczający</mat-label>
+            <!-- TODO: Add user selector -->
+            <input matInput placeholder="Nazwa użytkownika" formControlName="user" required>
+            <!-- <input #input matInput placeholder="Nazwa użytkownika" formControlName="user" required [matAutocomplete]="auto" (input)="filter()">
+            <mat-autocomplete requireSelection #auto="matAutocomplete">
+                @for (item of unames; track item) {
+                    <mat-option [value]="item">{{item}}</mat-option>
+                }
+            </mat-autocomplete> -->
+            <mat-error *ngIf="form.controls['user'].hasError('unf')">Zła nazwa użytkownika</mat-error>
+            <mat-error *ngIf="form.controls['user'].hasError('required')">Wymagane</mat-error>
+        </mat-form-field>
+        <button mat-button>Wyślij</button>
+    </form>
+</mat-dialog-content>
--- a/src/app/admin-view/key/new-key/new-key.component.scss
+++ b/src/app/admin-view/key/new-key/new-key.component.scss
@@ -0,0 +1,4 @@
+form {
+    display: flex;
+    flex-direction: column;
+}
--- a/src/app/admin-view/key/new-key/new-key.component.spec.ts
+++ b/src/app/admin-view/key/new-key/new-key.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NewKeyComponent } from './new-key.component';
+
+describe('NewKeyComponent', () => {
+  let component: NewKeyComponent;
+  let fixture: ComponentFixture<NewKeyComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [NewKeyComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(NewKeyComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/admin-view/key/new-key/new-key.component.ts
+++ b/src/app/admin-view/key/new-key/new-key.component.ts
@@ -0,0 +1,49 @@
+import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { AdminCommService } from '../../admin-comm.service';
+import { MatDialogRef } from '@angular/material/dialog';
+import { FormControl, FormGroup } from '@angular/forms';
+import { startWith } from 'rxjs';
+
+@Component({
+  selector: 'app-new-key',
+  templateUrl: './new-key.component.html',
+  styleUrl: './new-key.component.scss'
+})
+export class NewKeyComponent implements OnInit {
+  // @ViewChild('input') input!: ElementRef<HTMLInputElement>
+  rooms: string[] = []
+  form = new FormGroup({
+    room: new FormControl<string>(""),
+    user: new FormControl<string>("")
+  })
+  unames: any[] = []
+  constructor ( private ac: AdminCommService, public dialogRef: MatDialogRef<NewKeyComponent> ) {}
+
+  ngOnInit(): void {
+    this.ac.keys.avalKeys().subscribe((v) => {
+      this.rooms = v
+    })
+  }
+  
+  // filter() {
+  //   const v = this.input.nativeElement.value
+  //   console.log(v);
+    
+  //   if (v) {
+  //     this.ac.userFilter(v.toLowerCase()).subscribe((v) => {
+  //       this.unames = v
+  //     })
+  //   } else {
+  //     this.unames = []
+  //   }
+  // }
+
+  send() {
+    if (this.form.valid) {
+      this.dialogRef.close(this.form.value)
+    } else {
+      this.form.controls['user'].setErrors({unf: true})
+    }
+  }
+
+}
--- a/src/app/admin-view/menu-new/menu-add/menu-add.component.html
+++ b/src/app/admin-view/menu-new/menu-add/menu-add.component.html
@@ -0,0 +1,33 @@
+<h1 mat-dialog-title>Dodawanie</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 color="accent" (click)="activateUpload()">Otwórz okno</button>
+            }
+        }
+    </div>
+</mat-dialog-content>
+<mat-dialog-actions>
+    <button mat-raised-button color="accent" (click)="submit()">Wyślij</button>
+    <button mat-button mat-dialog-close>Anuluj</button>
+</mat-dialog-actions>
--- a/src/app/admin-view/menu-new/menu-add/menu-add.component.scss
+++ b/src/app/admin-view/menu-new/menu-add/menu-add.component.scss
--- a/src/app/admin-view/menu-new/menu-add/menu-add.component.spec.ts
+++ b/src/app/admin-view/menu-new/menu-add/menu-add.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MenuAddComponent } from './menu-add.component';
+
+describe('MenuAddComponent', () => {
+  let component: MenuAddComponent;
+  let fixture: ComponentFixture<MenuAddComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [MenuAddComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(MenuAddComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/admin-view/menu-new/menu-add/menu-add.component.ts
+++ b/src/app/admin-view/menu-new/menu-add/menu-add.component.ts
@@ -0,0 +1,51 @@
+import { Component } from '@angular/core';
+import { MenuUploadComponent } from '../menu-upload/menu-upload.component';
+import { MatDialog, MatDialogRef } from '@angular/material/dialog';
+import { FDSelection, weekendFilter } from 'src/app/fd.da';
+import { FormControl, FormGroup } from '@angular/forms';
+import { Moment } from 'moment';
+import { MAT_DATE_RANGE_SELECTION_STRATEGY } from '@angular/material/datepicker';
+import * as moment from 'moment';
+
+@Component({
+  selector: 'app-menu-add',
+  templateUrl: './menu-add.component.html',
+  styleUrl: './menu-add.component.scss',
+  providers: [
+    {provide: MAT_DATE_RANGE_SELECTION_STRATEGY, useClass: FDSelection}
+  ]
+})
+export class MenuAddComponent {
+  type: string | undefined;
+  filter = weekendFilter
+
+  day: Moment = moment.utc();
+
+  range = new FormGroup({
+    start: new FormControl<Moment|null>(null),
+    end: new FormControl<Moment|null>(null),
+  })
+
+  constructor (public dialogRef: MatDialogRef<MenuAddComponent>, private dialog: MatDialog) { }
+
+  submit() {
+    switch (this.type) {
+      case "day":
+        this.dialogRef.close({type: "day", value: this.day.utc()})
+        break;
+      case "week":
+        this.dialogRef.close({type: "week", value: {start: this.range.value.start?.utc().hours(24), count: 5}})
+        break;
+      default:
+        break;
+    }
+  }
+
+  activateUpload() {
+    this.dialog.open(MenuUploadComponent).afterClosed().subscribe((data) => {
+      if (data) {
+        this.dialogRef.close({type: "file", ...data});
+      }
+    })
+  }
+}
--- a/src/app/admin-view/menu-new/menu-new.component.html
+++ b/src/app/admin-view/menu-new/menu-new.component.html
@@ -0,0 +1,111 @@
+<div id="upper-bar">
+    <mat-form-field>
+        <mat-label>Wybierz tydzień</mat-label>
+        <mat-date-range-input [rangePicker]="picker" [formGroup]="range">
+            <input matStartDate formControlName="start" (dateChange)="requestData()">
+            <input matEndDate formControlName="end" (dateChange)="requestData()">
+        </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)="requestData()"><mat-icon>refresh</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>
+<mat-spinner *ngIf="loading"></mat-spinner>
+<table mat-table [dataSource]="dataSource">
+    <div matColumnDef="day">
+        <th mat-header-cell *matHeaderCellDef>Dzień</th>
+        <td mat-cell *matCellDef="let element">
+            <span>{{element.day.format('DD.MM.YYYY')}}r.</span>
+            <p>{{element.day.format('dddd')}}</p>
+            <app-field-editor category="Nazwa" [(word)]="element.dayTitle" (wordChange)="editTitle(element._id)"/><br><hr>
+            <button>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">
+                <li *ngFor="let i of ls.defaultItems.sn">{{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"/>
+            <button (click)="getStat(element.day, 'ob')">
+                Opinie wychowanków
+            </button>
+        </td>
+    </div>
+    <div matColumnDef="kol">
+        <th mat-header-cell *matHeaderCellDef>Kolacja</th>
+        <td mat-cell *matCellDef="let element">
+            <div [ngSwitch]="element.day.isoWeekday()">
+                <div *ngSwitchDefault>
+                    <ul class="non-editable">
+                        <li *ngFor="let i of ls.defaultItems.kol">{{i}}</li>
+                    </ul><hr>
+                    <ul>
+                        <li><app-field-editor category="Kolacja" [(word)]="element.kol" list="kol" (wordChange)="editKol(element._id)"/></li>
+                    </ul>
+                    <button (click)="getStat(element.day, 'kol')">
+                        Opinie wychowanków
+                    </button>
+                </div>
+                <div *ngSwitchCase="5" 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>
+
+<ng-component *ngIf="options">
+    <datalist id="sn-fancy">
+        <option *ngFor="let i of options.sn.fancy">{{i}}</option>
+    </datalist>
+    <datalist id="sn-second">
+        <option *ngFor="let i of options.sn.second">{{i}}</option>
+    </datalist>
+    <datalist id="ob-soup">
+        <option *ngFor="let i of options.ob.soup">{{i}}</option>
+    </datalist>
+    <datalist id="ob-vege">
+        <option *ngFor="let i of options.ob.vege">{{i}}</option>
+    </datalist>
+    <datalist id="ob-meal">
+        <option *ngFor="let i of options.ob.meal">{{i}}</option>
+    </datalist>
+    <datalist id="ob-condiments">
+        <option *ngFor="let i of options.ob.condiments">{{i}}</option>
+    </datalist>
+    <datalist id="ob-drink">
+        <option *ngFor="let i of options.ob.drink">{{i}}</option>
+    </datalist>
+    <datalist id="ob-other">
+        <option *ngFor="let i of options.ob.other">{{i}}</option>
+    </datalist>
+    <datalist id="kol">
+        <option *ngFor="let i of options.kol">{{i}}</option>
+    </datalist>
+</ng-component>
--- a/src/app/admin-view/menu-new/menu-new.component.scss
+++ b/src/app/admin-view/menu-new/menu-new.component.scss
@@ -0,0 +1,18 @@
+#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;
+}
--- a/src/app/admin-view/menu-new/menu-new.component.spec.ts
+++ b/src/app/admin-view/menu-new/menu-new.component.spec.ts
@@ -0,0 +1,45 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MenuNewComponent } from './menu-new.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 { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
+import { MAT_MOMENT_DATE_ADAPTER_OPTIONS, MAT_MOMENT_DATE_FORMATS, MomentDateAdapter } from '@angular/material-moment-adapter';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { FDSelection } from 'src/app/fd.da';
+import { ReactiveFormsModule } from '@angular/forms';
+import { AdminCommService } from '../admin-comm.service';
+import { of } from 'rxjs';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+
+describe('MenuNewComponent', () => {
+  let component: MenuNewComponent;
+  let fixture: ComponentFixture<MenuNewComponent>;
+
+  beforeEach(() => {
+    const acMock = jasmine.createSpyObj('AdminCommService', {
+      getMenu: of()
+    })
+    TestBed.configureTestingModule({
+      declarations: [MenuNewComponent],
+      imports: [MatTableModule, MatInputModule, MatDatepickerModule, BrowserAnimationsModule, ReactiveFormsModule, MatDialogModule, MatIconModule],
+      providers: [
+        {provide: DateAdapter, useClass: MomentDateAdapter},
+        {provide: MAT_DATE_LOCALE, useValue: "pl-PL"},
+        {provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS}, 
+        {provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: {useUtc: true}},
+        {provide: MAT_DATE_RANGE_SELECTION_STRATEGY, useClass: FDSelection},
+        {provide: AdminCommService, useValue: acMock}
+      ],
+    });
+    fixture = TestBed.createComponent(MenuNewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/admin-view/menu-new/menu-new.component.ts
+++ b/src/app/admin-view/menu-new/menu-new.component.ts
@@ -0,0 +1,127 @@
+import { AfterViewInit, Component, ViewChild } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
+import { MAT_DATE_RANGE_SELECTION_STRATEGY } from '@angular/material/datepicker';
+import { Moment } from 'moment';
+import { FDSelection } from 'src/app/fd.da';
+import { Menu } from 'src/app/types/menu';
+import { AdminCommService } from '../admin-comm.service';
+import { MatTableDataSource } from '@angular/material/table';
+import * as moment from 'moment';
+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';
+
+@Component({
+  selector: 'app-menu-new',
+  templateUrl: './menu-new.component.html',
+  styleUrls: ['./menu-new.component.scss'],
+  providers: [
+    {provide: MAT_DATE_RANGE_SELECTION_STRATEGY, useClass: FDSelection}
+  ]
+})
+export class MenuNewComponent {
+  dcols: string[] = ['day', 'sn', 'ob', 'kol']
+  dataSource: MatTableDataSource<Menu> = new MatTableDataSource<Menu>()
+  range = new FormGroup({
+    start: new FormControl<Moment|null>(null),
+    end: new FormControl<Moment|null>(null),
+  })
+  loading = false
+  public options: any;
+
+  constructor (private ac: AdminCommService, private dialog: MatDialog, private sb: MatSnackBar, readonly ls: LocalStorageService) { 
+    moment.updateLocale('pl', {
+      weekdays: ["Niedziela", "Poniedziałek", "Wtorek", "Środa", "Czwartek", "Piątek", "Sobota"]
+    })
+  }
+
+  print() {
+    this.ac.menu.print(this.range.value.start, this.range.value.end)?.subscribe((r) => {
+      if (r && r.length > 0) {
+        var 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.menu.new.single(data.value).subscribe()
+            break;
+          case "week":
+            this.ac.menu.new.range(data.value.start, data.value.count).subscribe()
+            break;
+          case "file":
+            this.requestData()
+            break;
+          default:
+            break;
+        }
+      }
+    })
+  }
+  
+  requestData() {
+    this.loading = true
+    this.ac.menu.getOpts().subscribe((o) => {
+      this.options = o;
+    })
+    this.ac.menu.getMenu(this.range.value.start, this.range.value.end)?.subscribe((data) => {
+      this.loading = false
+      this.dataSource.data = data.map((v) => {
+        let newMenu: Menu = {
+          ...v,
+          day: moment.utc(v.day)
+        }
+        return newMenu
+      })
+    })
+  }
+
+  private refreshIfGood(s: Status) {
+    if (s.status == 200) {
+      this.requestData()
+    }
+  }
+  
+  activateUpload() {
+    this.dialog.open(MenuUploadComponent).afterClosed().subscribe((data) => {
+      if (data) {
+        this.requestData()
+      }
+    })
+  }
+
+  editDay(v: string | string[], element: Menu) {
+    v = v as string
+    element.day = moment(v, "DD.MM.YYYY", true).utc(true).startOf('day')
+  }
+
+  editSn(id: string) {
+    this.ac.menu.editSn(id, this.dataSource.data.find(v => v._id == id)?.sn).subscribe(this.refreshIfGood)
+  }
+
+  editOb(id: string) {
+    this.ac.menu.editOb(id, this.dataSource.data.find(v => v._id == id)?.ob).subscribe(this.refreshIfGood)
+  }
+
+  editKol(id: string) {
+    this.ac.menu.editKol(id, this.dataSource.data.find(v => v._id == id)?.kol).subscribe(this.refreshIfGood)
+  }
+
+  editTitle(id: string) {
+    this.ac.menu.editTitle(id, this.dataSource.data.find(v => v._id == id)?.dayTitle).subscribe(this.refreshIfGood)
+  }
+
+  getStat(day: moment.Moment, m: "ob" | "kol") {
+    this.ac.menu.stat(day, m).subscribe((s) => this.sb.open(`${s.y} / ${s.y+s.n} = ${((s.y/(s.y+s.n))*100).toFixed(2)}%`, "Zamknij", {duration: 2500}))
+  }
+}
--- a/src/app/admin-view/menu-new/menu-upload/menu-upload.component.html
+++ b/src/app/admin-view/menu-new/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 mat-raised-button color="accent" (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 mat-raised-button color="warn" [disabled]="file == undefined" (click)="submit()">Wyślij</button>
+    <button mat-button mat-dialog-close>Anuluj</button>
+</mat-dialog-actions>
--- a/src/app/admin-view/menu-new/menu-upload/menu-upload.component.scss
+++ b/src/app/admin-view/menu-new/menu-upload/menu-upload.component.scss
@@ -0,0 +1,4 @@
+:host {
+    margin: 8pt;
+    display: block;
+}
--- a/src/app/admin-view/menu-new/menu-upload/menu-upload.component.spec.ts
+++ b/src/app/admin-view/menu-new/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 { AdminCommService } from '../../admin-comm.service';
+import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+
+describe('MenuUploadComponent', () => {
+  let component: MenuUploadComponent;
+  let fixture: ComponentFixture<MenuUploadComponent>;
+
+  beforeEach(() => {
+    const acMock = jasmine.createSpyObj('AdminCommService', ['postMenu'])
+    TestBed.configureTestingModule({
+      declarations: [MenuUploadComponent],
+      providers: [
+        {provide: AdminCommService, useValue: acMock},
+        {provide: MatDialogRef, useValue: {}}
+      ],
+      imports: [MatDialogModule]
+    });
+    fixture = TestBed.createComponent(MenuUploadComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/admin-view/menu-new/menu-upload/menu-upload.component.ts
+++ b/src/app/admin-view/menu-new/menu-upload/menu-upload.component.ts
@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+import { AdminCommService } from '../../admin-comm.service';
+import { MatDialogRef } from '@angular/material/dialog';
+
+@Component({
+  selector: 'app-upload-edit',
+  templateUrl: './menu-upload.component.html',
+  styleUrls: ['./menu-upload.component.scss'],
+})
+export class MenuUploadComponent {
+  constructor(private ac:AdminCommService, public dialogRef: MatDialogRef<MenuUploadComponent>) {}
+  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.menu.postMenu(this.file!)?.subscribe((value) => {
+      this.dialogRef.close(value)
+    })
+  }
+}
--- a/src/app/admin-view/news-edit/new-post/edit-post.component.html
+++ b/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>
--- a/src/app/admin-view/news-edit/new-post/edit-post.component.scss
+++ b/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;
+}
--- a/src/app/admin-view/news-edit/new-post/edit-post.component.spec.ts
+++ b/src/app/admin-view/news-edit/new-post/edit-post.component.spec.ts
@@ -0,0 +1,31 @@
+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();
+  });
+});
--- a/src/app/admin-view/news-edit/new-post/edit-post.component.ts
+++ b/src/app/admin-view/news-edit/new-post/edit-post.component.ts
@@ -0,0 +1,31 @@
+import { Component, Inject } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+
+@Component({
+  selector: 'app-edit-post',
+  templateUrl: './edit-post.component.html',
+  styleUrls: ['./edit-post.component.scss']
+})
+export class NewPostComponent {
+  form: FormGroup;
+  constructor (public dialogRef: MatDialogRef<NewPostComponent>, @Inject(MAT_DIALOG_DATA) public data: any) {
+    if (data == null) {
+      data = {
+        title:"",
+        content:"",
+      }
+    }
+    this.form = new FormGroup({
+      title: new FormControl(data.title),
+      content: new FormControl(data.content)
+    })
+  }
+
+  protected makePost() {
+    this.dialogRef.close({
+      title: this.form.get('title')?.value,
+      content: this.form.get('content')?.value
+    })
+  }
+}
--- a/src/app/admin-view/news-edit/news-edit.component.html
+++ b/src/app/admin-view/news-edit/news-edit.component.html
@@ -0,0 +1,25 @@
+<button mat-raised-button (click)="newPost()" color="accent">Nowy post</button>
+<mat-spinner *ngIf="loading"></mat-spinner>
+<mat-card *ngFor="let item of news">
+    <mat-card-header>
+        <mat-card-title>{{item.title}}</mat-card-title>
+        <mat-icon *ngIf="item.pinned">push_pin</mat-icon>
+        <mat-card-subtitle>{{item._id}}</mat-card-subtitle>
+    </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>
+        <button mat-mini-fab (click)="visibleToggle(item)">
+            <div [ngSwitch]="item.visible">
+                <mat-icon *ngSwitchCase="true">visibility</mat-icon>
+                <mat-icon *ngSwitchDefault>visibility_off</mat-icon>
+            </div>
+        </button>
+        <button mat-mini-fab (click)="delete(item._id)"><mat-icon>delete_forever</mat-icon></button>
+    </mat-card-actions>
+    <mat-card-footer>
+        <p>{{item.date | date:'d-LL-yyyy HH:mm'}}</p>
+    </mat-card-footer>
+</mat-card>
--- a/src/app/admin-view/news-edit/news-edit.component.scss
+++ b/src/app/admin-view/news-edit/news-edit.component.scss
@@ -0,0 +1,34 @@
+mat-card {
+    margin: 15px;
+    padding: 1ch;
+    width: 100%;
+}
+
+mat-card-title {
+    font-size: 1.5rem;
+}
+
+mat-card-footer p {
+    font-size: 0.8rem;
+    color: #4a4a4a;
+    @media (prefers-color-scheme: dark) {
+        color: #999999
+    }
+    margin-bottom: 0;
+    text-align: end;
+}
+
+mat-card-content p {
+    white-space: pre-line;
+}
+
+button {
+    margin-right: 4pt;
+}
+
+:host {
+    padding: 8pt;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
--- a/src/app/admin-view/news-edit/news-edit.component.spec.ts
+++ b/src/app/admin-view/news-edit/news-edit.component.spec.ts
@@ -0,0 +1,32 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NewsEditComponent } from './news-edit.component';
+import { AdminCommService } from '../admin-comm.service';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { of } from 'rxjs';
+
+describe('NewsEditComponent', () => {
+  let component: NewsEditComponent;
+  let fixture: ComponentFixture<NewsEditComponent>;
+
+  beforeEach(() => {
+    const acMock = jasmine.createSpyObj('AdminCommService', {
+      getNews: of()
+    })
+    TestBed.configureTestingModule({
+      declarations: [NewsEditComponent],
+      providers: [
+        {provide: AdminCommService, useValue: acMock}
+      ],
+      imports: [MatDialogModule, MatSnackBarModule]
+    });
+    fixture = TestBed.createComponent(NewsEditComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/admin-view/news-edit/news-edit.component.ts
+++ b/src/app/admin-view/news-edit/news-edit.component.ts
@@ -0,0 +1,101 @@
+import { Component, OnInit } from '@angular/core';
+import { AdminCommService } from '../admin-comm.service';
+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';
+import { marked } from 'marked';
+
+@Component({
+  selector: 'app-news-edit',
+  templateUrl: './news-edit.component.html',
+  styleUrls: ['./news-edit.component.scss']
+})
+export class NewsEditComponent implements OnInit {
+  news:Array<News & {formatted: string}> = new Array<News & {formatted: string}>
+  loading = true
+
+  constructor(private ac:AdminCommService, private dialog:MatDialog, private sb:MatSnackBar) {}
+
+  ngOnInit() {
+    this.loading = true
+    this.ac.news.getNews().subscribe(data => {
+      this.loading = false
+      this.news = data.map(v => {
+        var nd: News & {formatted: string} = {
+          ...v,
+          formatted: marked.parse(v.content, {breaks: true}).toString()
+        }
+        return nd
+      })
+    })
+  }
+
+  newPost() {
+    this.dialog.open(NewPostComponent, {width: "90vw"}).afterClosed().subscribe(result=> {
+      if (result == undefined) return
+      this.ac.news.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: any) {
+    this.dialog.open(NewPostComponent, {data: item, width: "90vh"}).afterClosed().subscribe(result=>{
+      if (result == undefined) return
+      this.ac.news.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.news.deleteNews(id).subscribe(data => {
+      if (data.status == 200) {
+        this.ngOnInit()
+      }
+    })
+  }
+
+  visibleToggle(item: any) {
+    this.ac.news.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:any) {
+    console.log(item.pinned)
+    this.ac.news.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.")
+      }
+    })
+  }
+}
--- a/src/app/admin-view/notifications/notifications.component.html
+++ b/src/app/admin-view/notifications/notifications.component.html
@@ -0,0 +1,44 @@
+<!-- TODO: Remake the notifications module -->
+<form [formGroup]="form" (ngSubmit)="submit()">
+    <div formGroupName="recp">
+        <mat-radio-group formControlName="type">
+            <mat-radio-button value="uname">
+                <mat-form-field>
+                    <mat-label>Nazwa użytkownika</mat-label>
+                    <input matInput type="text" formControlName="uname">
+                </mat-form-field>
+            </mat-radio-button>
+            <mat-radio-button value="room">
+                <mat-form-field>
+                    <mat-label>Pokój</mat-label>
+                    <input matInput type="number" formControlName="room">
+                </mat-form-field>
+            </mat-radio-button>
+            <mat-radio-button value="group" *ngIf="ls.capCheck(8)">
+                <mat-form-field>
+                    <mat-label>Grupa</mat-label>
+                    <mat-select formControlName="group">
+                        <mat-option *ngFor="let item of groups" [value]="item._id">{{item.name}}</mat-option>
+                    </mat-select>
+                </mat-form-field>
+            </mat-radio-button>
+            <mat-radio-button value="all">Wychowankowie</mat-radio-button>
+        </mat-radio-group>
+    </div>
+    <mat-form-field>
+        <mat-label>Tytuł</mat-label>
+        <input matInput type="text" formControlName="title">
+    </mat-form-field>
+    <br>
+    <mat-form-field>
+        <mat-label>Zawartość wiadomości</mat-label>
+        <textarea matInput cdkTextareaAutosize formControlName="body"></textarea>
+    </mat-form-field>
+    <br>
+    <button mat-fab extended type="submit">
+        <mat-icon>send</mat-icon>
+        Wyślij
+    </button>
+</form>
+
+<p *ngIf="success">Udało się wysłać {{success.sent}} z {{success.possible}} = {{success.sent/success.possible | percent}}</p>
--- a/src/app/admin-view/notifications/notifications.component.scss
+++ b/src/app/admin-view/notifications/notifications.component.scss
@@ -0,0 +1,3 @@
+mat-radio-button {
+    display: block;
+}
--- a/src/app/admin-view/notifications/notifications.component.spec.ts
+++ b/src/app/admin-view/notifications/notifications.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NotificationsComponent } from './notifications.component';
+
+describe('NotificationsComponent', () => {
+  let component: NotificationsComponent;
+  let fixture: ComponentFixture<NotificationsComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [NotificationsComponent]
+    });
+    fixture = TestBed.createComponent(NotificationsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/admin-view/notifications/notifications.component.ts
+++ b/src/app/admin-view/notifications/notifications.component.ts
@@ -0,0 +1,54 @@
+import { Component, OnInit } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
+import { AdminCommService } from '../admin-comm.service';
+import { Notification } from 'src/app/types/notification';
+import { Group } from 'src/app/types/group';
+import { LocalStorageService } from 'src/app/services/local-storage.service';
+
+@Component({
+  selector: 'app-notifications',
+  templateUrl: './notifications.component.html',
+  styleUrls: ['./notifications.component.scss']
+})
+export class NotificationsComponent implements OnInit {
+
+  groups!: Group[]
+
+  constructor (private readonly acs: AdminCommService, readonly ls: LocalStorageService) { }
+
+  ngOnInit(): void {
+    this.acs.notif.getGroups().subscribe((v) => {
+      this.groups = v
+    })
+  }
+
+  success?: { sent: number; possible: number; };
+
+  form = new FormGroup<NotificationForm>({
+    recp: new FormGroup({
+      uname: new FormControl<string>(''),
+      room: new FormControl<number|null>(null),
+      group: new FormControl<string>(''),
+      type: new FormControl<"all" | "room" | "uname" | "group">('uname', {nonNullable: true})
+    }),
+    title: new FormControl('', {nonNullable: true}),
+    body: new FormControl('', {nonNullable: true})
+  })
+
+  submit() {
+    this.acs.notif.send(this.form.value as Notification).subscribe((data) => {
+      this.success = data
+    })
+  }
+}
+
+interface NotificationForm {
+  body: FormControl<string>;
+  title: FormControl<string>;
+  recp: FormGroup<{
+      uname: FormControl<string | null>;
+      room: FormControl<number | null>;
+      group: FormControl<string | null>;
+      type: FormControl<"all" | "room" | "uname" | "group">;
+  }>
+}
--- a/src/app/admin-view/settings/settings.component.html
+++ b/src/app/admin-view/settings/settings.component.html
@@ -0,0 +1,44 @@
+<mat-accordion>
+    <mat-expansion-panel>
+        <!-- TODO: Make more ergonomic -->
+        <mat-expansion-panel-header>
+            <mat-panel-title>Pokoje</mat-panel-title>
+            <mat-panel-description>Numery wszystkich pokoi</mat-panel-description>
+        </mat-expansion-panel-header>
+        <p>Kliknij listę aby edytować</p>
+        <app-list-editor [converter]="usettings.rooms" (edit)="saveRoom($event)"></app-list-editor>
+    </mat-expansion-panel>
+    <mat-expansion-panel>
+        <mat-expansion-panel-header>
+            <mat-panel-title>Powody nieczystości</mat-panel-title>
+            <mat-panel-description>Za co są przyznawane oceny za czystość</mat-panel-description>
+        </mat-expansion-panel-header>
+        <p>Kliknij listę aby edytować</p>
+        <app-list-editor [list]="usettings.cleanThings" (edit)="saveCleanThings($event)"></app-list-editor>
+    </mat-expansion-panel>
+    <mat-expansion-panel>
+        <mat-expansion-panel-header>
+            <mat-panel-title>Sale z kluczami</mat-panel-title>
+            <mat-panel-description></mat-panel-description>
+        </mat-expansion-panel-header>
+        <app-list-editor [list]="usettings.keyrooms" (edit)="saveKeyrooms($event)"></app-list-editor>
+    </mat-expansion-panel>
+    <mat-expansion-panel>
+        <mat-expansion-panel-header>
+            <mat-panel-title>Sterowanie programem</mat-panel-title>
+            <mat-panel-description><span style="color: red;">Zachowaj szczególną ostrożność przy tych ustawieniach!</span></mat-panel-description>
+        </mat-expansion-panel-header>
+        <!-- <button mat-fab extended color="warn">
+            <mat-icon>power_settings_new</mat-icon>
+            Restart
+        </button> -->
+        <button mat-fab extended (click)="reloadSettings()">
+            <mat-icon>refresh</mat-icon>
+            Przeładuj ustawienia
+        </button>
+        <!-- <button mat-fab extended color="warn">
+            <mat-icon>logout</mat-icon>
+            Wyloguj wszystkich użytkowników
+        </button> -->
+    </mat-expansion-panel>
+</mat-accordion>
--- a/src/app/admin-view/settings/settings.component.scss
+++ b/src/app/admin-view/settings/settings.component.scss
@@ -0,0 +1,4 @@
+:host {
+    margin: 15px;
+    display: block;
+}
--- a/src/app/admin-view/settings/settings.component.spec.ts
+++ b/src/app/admin-view/settings/settings.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SettingsComponent } from './settings.component';
+
+describe('SettingsComponent', () => {
+  let component: SettingsComponent;
+  let fixture: ComponentFixture<SettingsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SettingsComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(SettingsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/admin-view/settings/settings.component.ts
+++ b/src/app/admin-view/settings/settings.component.ts
@@ -0,0 +1,66 @@
+import { Component, OnInit } from '@angular/core';
+import { AdminCommService } from '../admin-comm.service';
+import { MatSnackBar } from '@angular/material/snack-bar';
+
+@Component({
+  selector: 'app-settings',
+  templateUrl: './settings.component.html',
+  styleUrl: './settings.component.scss'
+})
+export class SettingsComponent implements OnInit {
+  usettings!: IUSettings
+  reloadTimeout: boolean = false;
+
+  constructor (private readonly acu: AdminCommService, private readonly sb: MatSnackBar) { }
+  ngOnInit(): void {
+    this.acu.settings.getAll().subscribe((r) => {
+      this.usettings = r
+    })
+  }
+
+  saveRoom(event: string[]) {
+    this.usettings.rooms = event.map(Number)
+    this.send()
+  }
+  saveCleanThings(event: string[]) {
+    this.usettings.cleanThings = event
+    this.send()
+  }
+  saveKeyrooms(event: string[]) {
+    this.usettings.keyrooms = event
+    this.send()
+  }
+
+  send() {
+    this.acu.settings.post(this.usettings).subscribe((s) => {
+      if (s.status == 200) {
+        this.sb.open("Zapisano!", undefined, {duration: 1000})
+      } else {
+        console.error(s);
+      }
+    })
+  }
+
+  reloadSettings() {
+    if (this.reloadTimeout) {
+      return
+    }
+    this.reloadTimeout = true
+    setTimeout(() => {
+      this.reloadTimeout = false
+    }, 5000);
+    this.acu.settings.reload().subscribe((s) => {
+      if (s.status == 200) {
+        this.sb.open("Przeładowano ustawienia!", undefined, {duration: 3000})
+      } else {
+        console.error(s);
+      }
+    })
+  }
+}
+
+export interface IUSettings {
+  keyrooms: string[];
+  rooms: number[];
+  cleanThings: string[];
+}
--- a/src/app/admin-view/toolbar.service.spec.ts
+++ b/src/app/admin-view/toolbar.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ToolbarService } from './toolbar.service';
+
+describe('ToolbarService', () => {
+  let service: ToolbarService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ToolbarService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
--- a/src/app/admin-view/toolbar.service.ts
+++ b/src/app/admin-view/toolbar.service.ts
@@ -0,0 +1,14 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ToolbarService {
+
+  public comp?: any;
+  public menu?: {title: string, check: boolean, icon?: string, fn: string}[]
+
+  constructor() { }
+
+
+}
--- a/src/app/admin.guard.spec.ts
+++ b/src/app/admin.guard.spec.ts
@@ -0,0 +1,17 @@
+import { TestBed } from '@angular/core/testing';
+import { CanActivateChildFn } from '@angular/router';
+
+import { adminGuard } from './admin.guard';
+
+describe('adminGuard', () => {
+  const executeGuard: CanActivateChildFn = (...guardParameters) => 
+      TestBed.runInInjectionContext(() => adminGuard(...guardParameters));
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+  });
+
+  it('should be created', () => {
+    expect(executeGuard).toBeTruthy();
+  });
+});
--- a/src/app/admin.guard.ts
+++ b/src/app/admin.guard.ts
@@ -0,0 +1,9 @@
+import { inject } from '@angular/core';
+import { CanActivateChildFn, Router } from '@angular/router';
+import { LocalStorageService } from './services/local-storage.service';
+
+export const adminGuard: CanActivateChildFn = (childRoute, state) => {
+  const router = inject(Router)
+  if (inject(LocalStorageService).admin == false) return router.parseUrl('/')
+  return true
+};
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -0,0 +1,50 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { NewsComponent } from './app-view/news/news.component';
+import { MenuComponent } from './app-view/menu/menu.component';
+import { AppViewComponent } from './app-view/app-view.component';
+import { LoginComponent } from './login/login.component';
+import { authGuard } from './auth.guard';
+import { PersonalComponent } from './app-view/personal/personal.component';
+import { AdminViewComponent } from './admin-view/admin-view.component';
+import { NewsEditComponent } from './admin-view/news-edit/news-edit.component';
+import { AccountMgmtComponent } from './admin-view/account-mgmt/account-mgmt.component';
+import { MenuNewComponent } from './admin-view/menu-new/menu-new.component';
+import { adminGuard } from './admin.guard';
+// import { NotificationsComponent } from './admin-view/notifications/notifications.component';
+import { GroupsComponent } from './admin-view/groups/groups.component';
+import { StartComponent } from './app-view/start/start.component';
+import { AdminKeyComponent } from './admin-view/key/key.component';
+import { GradesComponent } from './admin-view/grades/grades.component';
+import { SummaryComponent } from './admin-view/grades/summary/summary.component';
+import { SettingsComponent } from './admin-view/settings/settings.component';
+
+const routes: Routes = [
+  {path: "", redirectTo: "login", pathMatch: "full"},
+  {path: "login", component: LoginComponent},
+  {path: "app", component: AppViewComponent, title: "Internat", canActivateChild: [authGuard], children: [
+    {path: "", component: StartComponent, pathMatch: "full"},
+    {path: "news",component: NewsComponent, title: "Wiadomości"},
+    {path: "menu", component: MenuComponent, title: "Jadłospis"},
+    {path: "grades", component: PersonalComponent, title: "Konto"}
+  ]},
+  {path: "admin", component: AdminViewComponent, title: "Panel administracyjny", canActivateChild: [authGuard, adminGuard], children: [
+    {path: "news", title: "Edytowanie wiadomości", component: NewsEditComponent},
+    {path: "menu", title: "Edytowanie jadłospisu", component: MenuNewComponent},
+    {path: "accounts", title: "Użytkownicy", component: AccountMgmtComponent},
+    // {path: "notifications", title: "Powiadomienia", component: NotificationsComponent},
+    {path: "groups", title: "Grupy", component: GroupsComponent},
+    {path: "keys", title: "Klucze", component: AdminKeyComponent},
+    {path: "grades", children: [
+      {path: "", pathMatch: "full", title: "Oceny", component: GradesComponent},
+      {path: "summary", title: "Podsumowanie ocen", component: SummaryComponent}
+    ]},
+    {path: "settings", title: "Ustawienia", component: SettingsComponent}
+  ]}
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }
--- a/src/app/app-view/app-view.component.html
+++ b/src/app/app-view/app-view.component.html
@@ -0,0 +1,15 @@
+<mat-tab-nav-panel id="outlet" #tp>
+    <div id="scrollable">
+        <router-outlet></router-outlet>
+    </div>
+</mat-tab-nav-panel>
+<nav mat-tab-nav-bar id="bot-navigation" [tabPanel]="tp" color="primary">
+    @for (link of LINKS; track link) {
+        <a mat-tab-link [routerLink]="link.href" routerLinkActive #rla="routerLinkActive" [active]="rla.isActive">
+            <div>
+                <div><mat-icon>{{link.icon}}</mat-icon></div>
+                <div>{{link.title}}</div>
+            </div>
+        </a>
+    }
+</nav>
--- a/src/app/app-view/app-view.component.scss
+++ b/src/app/app-view/app-view.component.scss
@@ -0,0 +1,26 @@
+#bot-navigation {
+    width: 100%;
+}
+
+#outlet {
+    width: 100%;
+    flex: 1 1 auto;
+    overflow-y: auto;
+}
+
+#scrollable {
+    overflow: auto;
+    height: 100%;
+    position: relative;
+}
+
+:host {
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+a {
+    text-decoration-line: none;
+}
--- a/src/app/app-view/app-view.component.spec.ts
+++ b/src/app/app-view/app-view.component.spec.ts
@@ -0,0 +1,38 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AppViewComponent } from './app-view.component';
+import { AuthClient } from '../services/auth.client';
+import { SwPush } from '@angular/service-worker';
+import { UpdatesService } from '../services/updates.service';
+import { MatTabsModule } from '@angular/material/tabs';
+import { RouterModule } from '@angular/router';
+import { MatIconModule } from '@angular/material/icon';
+import { of } from 'rxjs';
+
+describe('AppViewComponent', () => {
+  let component: AppViewComponent;
+  let fixture: ComponentFixture<AppViewComponent>;
+  let authClient: jasmine.SpyObj<AuthClient>;
+
+  beforeEach(() => {
+    const authSpy = jasmine.createSpyObj('AuthClient', ['check'])
+    const pushSpy = jasmine.createSpyObj('SwPush', ['requestSubscription'])
+    const updatesSpy = jasmine.createSpyObj('UpdatesService', ['postNotif'])
+    TestBed.configureTestingModule({
+      declarations: [AppViewComponent],
+      providers: [{provide: AuthClient, useValue: authSpy},
+      {provide: SwPush, useValue: pushSpy},
+      {provide: UpdatesService, useValue: updatesSpy}],
+      imports: [MatTabsModule, RouterModule.forRoot([]), MatIconModule]
+    });
+    fixture = TestBed.createComponent(AppViewComponent);
+    component = fixture.componentInstance;
+    authClient = TestBed.inject(AuthClient) as jasmine.SpyObj<AuthClient>
+
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/app-view/app-view.component.ts
+++ b/src/app/app-view/app-view.component.ts
@@ -0,0 +1,59 @@
+import { Component, OnInit } from '@angular/core';
+import { AuthClient } from '../services/auth.client';
+import { SwPush } from '@angular/service-worker';
+import { environment } from 'src/environments/environment';
+import { UpdatesService } from '../services/updates.service';
+import { Link } from '../types/link';
+import { LocalStorageService } from '../services/local-storage.service';
+import { interval } from 'rxjs';
+import { MatSnackBar } from '@angular/material/snack-bar';
+
+@Component({
+  selector: 'app-app-view',
+  templateUrl: './app-view.component.html',
+  styleUrls: ['./app-view.component.scss']
+})
+export class AppViewComponent implements OnInit {
+  readonly VAPID_PUK = environment.vapid.pubkey
+  private readonly _LINKS: Link[] = [
+    { title: "Jadłospis", href: "menu", icon: "restaurant_menu", enabled: this.ls.capCheck(2) },
+    { title: "Wiadomości", href: "news", icon: "newspaper", enabled: this.ls.capCheck(1) },
+    { title: "Konto", href: "grades", icon: "account_circle", enabled: true }
+  ];
+
+  public get LINKS() {
+    return this._LINKS.filter((v) => {
+      return v.enabled
+    });
+  }
+
+  constructor (private ac: AuthClient, readonly swPush: SwPush, private us: UpdatesService, private ls: LocalStorageService, private sb: MatSnackBar) {}
+  
+  subscribeToNotif() {
+    if (this.swPush.isEnabled && this.ls.capCheck(4)) {
+      this.swPush.requestSubscription({
+        serverPublicKey: this.VAPID_PUK
+      }).then(sub => {
+        this.us.postNotif(sub)
+      })
+    }
+  }
+
+  ngOnInit() {
+    this.subscribeToNotif()
+    this.ac.check()
+    this.newsCheck()
+    interval(1000 * 60 * 15).subscribe(this.newsCheck)
+  }
+
+  newsCheck() {
+    if (this.ls.newsflag) return;
+    this.us.newsCheck().subscribe((s) => {
+      if (s.hash != this.ls.newsCheck.hash) {
+        this.ls.newsflag = this.ls.newsCheck.count - s.count
+        this.ls.newsCheck = s
+        this.sb.open("Nowe wiadomości", "Zamknij", {duration: 5000, verticalPosition: 'bottom'})
+      }
+    })
+  }
+}
--- a/src/app/app-view/menu/allergens/allergens.component.html
+++ b/src/app/app-view/menu/allergens/allergens.component.html
@@ -0,0 +1,10 @@
+<h2><b>Alergeny</b></h2>
+<ol>
+    <!-- Make non-static -->
+    <li>Nabiał</li>
+    <li>Gluten</li>
+    <li>Seler</li>
+    <li>Jaja</li>
+    <li>Ryby</li>
+    <li>Sezam / Orzechy</li>
+</ol>
--- a/src/app/app-view/menu/allergens/allergens.component.scss
+++ b/src/app/app-view/menu/allergens/allergens.component.scss
@@ -0,0 +1,3 @@
+ol>li::marker {
+    font-weight: bold;
+}
--- a/src/app/app-view/menu/allergens/allergens.component.spec.ts
+++ b/src/app/app-view/menu/allergens/allergens.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AllergensComponent } from './allergens.component';
+
+describe('AllergensComponent', () => {
+  let component: AllergensComponent;
+  let fixture: ComponentFixture<AllergensComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [AllergensComponent]
+    });
+    fixture = TestBed.createComponent(AllergensComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/app-view/menu/allergens/allergens.component.ts
+++ b/src/app/app-view/menu/allergens/allergens.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-allergens',
+  templateUrl: './allergens.component.html',
+  styleUrls: ['./allergens.component.scss']
+})
+export class AllergensComponent {
+
+}
--- a/src/app/app-view/menu/menu.component.html
+++ b/src/app/app-view/menu/menu.component.html
@@ -0,0 +1,60 @@
+<div id="cards">
+    <mat-spinner *ngIf="loading"></mat-spinner>
+    <mat-card *ngIf="gettitle">
+        <mat-card-header>
+            <mat-card-title>{{gettitle}}</mat-card-title>
+        </mat-card-header>
+        <mat-card-content></mat-card-content>
+    </mat-card>
+    <mat-card *ngIf="getsn">
+        <mat-card-header>
+            <mat-card-title>Śniadanie</mat-card-title>
+        </mat-card-header>
+        <mat-card-content>
+            <ul>
+                <li *ngFor="let i of ls.defaultItems.sn">{{i}}</li>
+                <li *ngFor="let i of getsn.fancy">{{i.charAt(0).toUpperCase()+i.substring(1)}}</li>
+            </ul>
+        </mat-card-content>
+    </mat-card>
+    <mat-card *ngIf="getob">
+        <mat-card-header>
+            <mat-card-title>Obiad</mat-card-title>
+        </mat-card-header>
+        <mat-card-content>
+            <ul>
+                <li *ngIf="getob.soup">Z: {{getob.soup}}</li>
+                <li *ngIf="getob.vege" style="color: #43A047">V: {{getob.vege}}</li>
+                <li *ngIf="getob.meal">{{getob.meal}}</li>
+                <li *ngFor="let i of getob.condiments">{{i}}</li>
+                <li *ngIf="getob.drink">{{getob.drink}}</li>
+                <li *ngFor="let i of getob.other">{{i}}</li>
+            </ul>
+        </mat-card-content>
+        <mat-card-actions>
+            <button mat-icon-button (click)="vote('ob', '+')"><mat-icon [color]="menu!.obv == '+' ? 'primary' : null">thumb_up</mat-icon></button>
+            <span *ngIf="menu?.stat?.ob != 'NaN'">{{menu?.stat?.ob}}%</span>
+            <button mat-icon-button (click)="vote('ob', '-')"><mat-icon [color]="menu!.obv == '-' ? 'warn' : null">thumb_down</mat-icon></button>
+        </mat-card-actions>
+    </mat-card>
+    <mat-card *ngIf="getkol">
+        <mat-card-header>
+            <mat-card-title>Kolacja</mat-card-title>
+        </mat-card-header>
+        <mat-card-content>
+            <ul [innerHTML]="getkol"></ul>
+        </mat-card-content>
+        <mat-card-actions>
+            <button mat-icon-button (click)="vote('kol', '+')"><mat-icon [color]="menu!.kolv == '+' ? 'primary' : null">thumb_up</mat-icon></button>
+            <span *ngIf="menu?.stat?.kol != 'NaN'">{{menu?.stat?.kol}}%</span>
+            <button mat-icon-button (click)="vote('kol', '-')"><mat-icon [color]="menu!.kolv == '-' ? 'warn' : null">thumb_down</mat-icon></button>
+        </mat-card-actions>
+    </mat-card>
+    <mat-card *ngIf="!(getkol || getob || getsn || loading)">
+        <mat-card-content id="no-data">
+            Brak danych, wybierz inny dzień.
+        </mat-card-content>
+    </mat-card>
+    <button id="alrg" mat-icon-button (click)="alrg()"><mat-icon color="primary">info</mat-icon></button>
+</div>
+<app-date-selector [(date)]="day" [filter]="filter"></app-date-selector>
--- a/src/app/app-view/menu/menu.component.scss
+++ b/src/app/app-view/menu/menu.component.scss
@@ -0,0 +1,41 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    overflow: none;
+    height: 100%;
+}
+
+#cards {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    overflow: auto;
+}
+
+#alrg {
+    align-self: center;
+}
+
+mat-spinner {
+    align-self: center;
+}
+
+mat-card {
+    margin: 15px;
+    padding: 1ch;
+}
+
+#no-data {
+    color: #777;
+    @media (prefers-color-scheme: dark) {
+        color: #AAA
+    }
+}
+
+mat-card-title {
+    font-size: 1.5rem;
+}
+
+app-date-selector {
+    width: 100%;
+}
--- a/src/app/app-view/menu/menu.component.spec.ts
+++ b/src/app/app-view/menu/menu.component.spec.ts
@@ -0,0 +1,45 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MenuComponent } from './menu.component';
+import { UpdatesService } from 'src/app/services/updates.service';
+import { DateSelectorComponent } from '../../commonComponents/date-selector/date-selector.component';
+import { MatIconModule } from '@angular/material/icon';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
+import { MAT_MOMENT_DATE_ADAPTER_OPTIONS, MAT_MOMENT_DATE_FORMATS, MomentDateAdapter } from '@angular/material-moment-adapter';
+import { MatCardModule } from '@angular/material/card';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatInputModule } from '@angular/material/input';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MatDialogRef } from '@angular/material/dialog';
+import { MatBottomSheet, MatBottomSheetModule } from '@angular/material/bottom-sheet';
+
+describe('MenuComponent', () => {
+  let component: MenuComponent;
+  let fixture: ComponentFixture<MenuComponent>;
+
+  beforeEach(async () => {
+    const updatesSpy = jasmine.createSpyObj('UpdatesService', ['getMenu'])
+    await TestBed.configureTestingModule({
+      declarations: [ MenuComponent, DateSelectorComponent],
+      providers: [
+        {provide: UpdatesService, useValue: updatesSpy},
+        {provide: DateAdapter, useClass: MomentDateAdapter},
+        {provide: MAT_DATE_LOCALE, useValue: "pl-PL"},
+        {provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS}, 
+        {provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: {useUtc: true}},
+      ],
+      imports: [MatIconModule, MatFormFieldModule, MatDatepickerModule, MatCardModule, ReactiveFormsModule, MatInputModule, BrowserAnimationsModule, MatBottomSheetModule]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(MenuComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/app-view/menu/menu.component.ts
+++ b/src/app/app-view/menu/menu.component.ts
@@ -0,0 +1,65 @@
+import { Component, OnInit } from '@angular/core';
+import { UpdatesService } from '../../services/updates.service';
+import { Menu } from '../../types/menu';
+import * as moment from 'moment';
+import { MatBottomSheet } from '@angular/material/bottom-sheet';
+import { AllergensComponent } from './allergens/allergens.component';
+import { weekendFilter } from "../../fd.da";
+import { LocalStorageService } from 'src/app/services/local-storage.service';
+
+@Component({
+  selector: 'app-menu',
+  templateUrl: './menu.component.html',
+  styleUrls: ['./menu.component.scss']
+})
+export class MenuComponent {
+    constructor(private uc:UpdatesService, readonly bs: MatBottomSheet, readonly ls: LocalStorageService) { 
+      this.day = moment.utc()
+    }
+    loading = true
+
+    public filter = weekendFilter
+    
+    private _day!: moment.Moment;
+    public get day(): moment.Moment {
+      return this._day;
+    }
+    public set day(value: moment.Moment) {
+      // if (value.isAfter(moment.utc("19:15:00", "HH:mm:ss"))) value.add(1, "day")
+      if (!this.filter(value)) value.isoWeekday(8);
+      this._day = moment.utc(value).startOf('day');
+      this.updateMenu()
+    }
+    
+    menu?: Menu;
+    get getsn() {return (this.menu && this.menu.sn) ? this.menu.sn : null}
+    get getob() {return (this.menu && this.menu.ob) ? this.menu.ob : null}
+    get getkol() {return (this.menu && this.menu.kol) ? this.menu.kol : null}
+    get gettitle() {return (this.menu && this.menu.dayTitle && this.menu.dayTitle != "") ? this.menu.dayTitle : null}
+    
+    updateMenu(silent?: boolean) {
+      this.loading = !silent
+      if (!silent) this.menu = undefined
+      this.uc.getMenu(this.day).subscribe(m => {
+        this.loading = false
+        this.menu = m
+      })
+    }
+
+    alrg() {
+      this.bs.open(AllergensComponent)
+    }
+
+    protected vegeColor(text: string) {
+      if (text.startsWith("V: ")) {
+        return "#43A047"
+      }
+      return "inherit"
+    }
+
+    vote(type: "ob" | "kol", vote: "-" | "+" | "n") {
+      this.uc.postVote(this.menu!.day, type, vote).subscribe((data) => {
+        this.updateMenu(true)
+      })
+    }
+}
--- a/src/app/app-view/news/news.component.html
+++ b/src/app/app-view/news/news.component.html
@@ -0,0 +1,12 @@
+<mat-spinner *ngIf="loading"></mat-spinner>
+<mat-card *ngFor="let item of news">
+    <mat-card-header>
+        <mat-icon *ngIf="item.pinned">push_pin</mat-icon>
+        <mat-card-title>{{item.title}}</mat-card-title>
+    </mat-card-header>
+    <mat-card-content [innerHTML]="item.content">
+    </mat-card-content>
+    <mat-card-footer>
+        <p>{{item.date | date:'d-LL-yyyy HH:mm'}}</p>
+    </mat-card-footer>
+</mat-card>
--- a/src/app/app-view/news/news.component.scss
+++ b/src/app/app-view/news/news.component.scss
@@ -0,0 +1,31 @@
+:host {
+    display: flex;
+    flex-direction: column;
+}
+
+mat-card {
+    margin: 15px;
+    padding: 1ch;
+}
+
+mat-spinner {
+    align-self: center;
+}
+
+mat-card-title {
+    font-size: 1.5rem;
+}
+
+mat-card-footer p {
+    font-size: 0.8rem;
+    color: #4a4a4a;
+    @media (prefers-color-scheme: dark) {
+        color: #999999
+    }
+    margin-bottom: 0;
+    text-align: end;
+}
+
+mat-card-content p {
+    white-space: pre-line;
+}
--- a/src/app/app-view/news/news.component.spec.ts
+++ b/src/app/app-view/news/news.component.spec.ts
@@ -0,0 +1,31 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NewsComponent } from './news.component';
+import { UpdatesService } from 'src/app/services/updates.service';
+import { of } from 'rxjs';
+
+describe('NewsComponent', () => {
+  let component: NewsComponent;
+  let fixture: ComponentFixture<NewsComponent>;
+
+  beforeEach(async () => {
+    const updatesMock = jasmine.createSpyObj('UpdatesService', {
+      getNews: of()
+    })
+    await TestBed.configureTestingModule({
+      declarations: [ NewsComponent ],
+      providers: [
+        {provide: UpdatesService, useValue: updatesMock}
+      ],
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(NewsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/app-view/news/news.component.ts
+++ b/src/app/app-view/news/news.component.ts
@@ -0,0 +1,30 @@
+import { Component, OnInit } from '@angular/core';
+import { UpdatesService } from '../../services/updates.service';
+import { LocalStorageService } from 'src/app/services/local-storage.service';
+import { News } from 'src/app/types/news';
+import { marked } from 'marked';
+
+@Component({
+  selector: 'app-news',
+  templateUrl: './news.component.html',
+  styleUrls: ['./news.component.scss'],
+})
+export class NewsComponent implements OnInit {
+  news:Array<News> = new Array<News>
+  loading = true
+  constructor(private newsapi:UpdatesService, private ls: LocalStorageService) { }
+
+  ngOnInit() {
+    this.ls.newsflag = false
+    this.loading = true
+    this.news = this.ls.news
+    this.newsapi.getNews().subscribe(data => {
+      this.loading = false
+      this.news = data.map(v => {
+        v.content = marked.parse(v.content, {breaks: true}).toString()
+        return v
+      });
+      this.ls.news = this.news
+    })
+  }
+}
--- a/src/app/app-view/personal/change-password-dialog/change-password-dialog.component.html
+++ b/src/app/app-view/personal/change-password-dialog/change-password-dialog.component.html
@@ -0,0 +1,17 @@
+<form [formGroup]="form" (ngSubmit)="changePass()">
+    <mat-form-field appearance="outline">
+        <mat-label>Aktualne hasło</mat-label>
+        <input type="password" matInput formControlName="oldPass">
+    </mat-form-field><br>
+    <mat-form-field appearance="outline">
+        <mat-label>Nowe hasło</mat-label>
+        <input type="password" matInput formControlName="newPass">
+    </mat-form-field><br>
+    <mat-form-field appearance="outline">
+        <mat-label>Powtórz nowe hasło</mat-label>
+        <input type="password" matInput formControlName="newPassRepeat">
+        <mat-error *ngIf="form.errors?.['noMatch']">Hasła muszą się zgadzać</mat-error>
+    </mat-form-field><br>
+    <button mat-stroked-button>Zmień hasło</button><br>
+    <p *ngIf="error" style="color: red;">{{error}}</p>
+</form>
--- a/src/app/app-view/personal/change-password-dialog/change-password-dialog.component.scss
+++ b/src/app/app-view/personal/change-password-dialog/change-password-dialog.component.scss
@@ -0,0 +1,10 @@
+mat-error {
+    font-size: 10pt;
+}
+form {
+    margin: 1rem;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    width: fit-content;
+}
--- a/src/app/app-view/personal/change-password-dialog/change-password-dialog.component.spec.ts
+++ b/src/app/app-view/personal/change-password-dialog/change-password-dialog.component.spec.ts
@@ -0,0 +1,33 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ChangePasswordDialogComponent } from './change-password-dialog.component';
+import { AuthClient } from 'src/app/services/auth.client';
+import { 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 { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+describe('ChangePasswordDialogComponent', () => {
+  let component: ChangePasswordDialogComponent;
+  let fixture: ComponentFixture<ChangePasswordDialogComponent>;
+
+  beforeEach(() => {
+    const authMock = jasmine.createSpyObj('AuthClient', ['chpass'])
+    TestBed.configureTestingModule({
+      declarations: [ChangePasswordDialogComponent],
+      providers: [
+        {provide: AuthClient, useValue: authMock},
+        {provide: MatDialogRef, useValue: {}}
+      ],
+      imports: [MatDialogModule, MatFormFieldModule, ReactiveFormsModule, MatInputModule, BrowserAnimationsModule]
+    });
+    fixture = TestBed.createComponent(ChangePasswordDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/app-view/personal/change-password-dialog/change-password-dialog.component.ts
+++ b/src/app/app-view/personal/change-password-dialog/change-password-dialog.component.ts
@@ -0,0 +1,58 @@
+import { Component } from '@angular/core';
+import { AuthClient } from '../../../services/auth.client';
+import { AbstractControl, FormBuilder, FormControl, FormGroup, ValidationErrors, ValidatorFn, Validators } from '@angular/forms';
+import { catchError, throwError } from 'rxjs';
+import { MatDialogRef } from '@angular/material/dialog';
+import { Router } from '@angular/router';
+import { LocalStorageService } from 'src/app/services/local-storage.service';
+
+@Component({
+  selector: 'app-change-password-dialog',
+  templateUrl: './change-password-dialog.component.html',
+  styleUrls: ['./change-password-dialog.component.scss']
+})
+export class ChangePasswordDialogComponent {
+  error: string | null = null;
+  form: FormGroup;
+  constructor (private ac: AuthClient, public dr: MatDialogRef<ChangePasswordDialogComponent>, private router: Router, private ls: LocalStorageService) {
+    this.form = new FormGroup({
+      oldPass: new FormControl(),
+      newPass: new FormControl(),
+      newPassRepeat: new FormControl(),
+    }, {validators: [this.matchpass(), Validators.required]})
+  }
+
+  private matchpass() : ValidatorFn {
+    return (control: AbstractControl) : ValidationErrors | null => {
+      const newpass = control.get('newPass')
+      const newpassrepeat = control.get("newPassRepeat")
+      if (newpass?.value != newpassrepeat?.value) {
+        const err = {noMatch: true}
+        newpassrepeat?.setErrors(err)
+        return err
+      }
+      newpassrepeat?.setErrors(null)
+      return null
+    }
+  }
+
+  protected changePass() {
+    if (this.form.errors) {
+      return;
+    }
+    this.ac.chpass(this.form.get('oldPass')?.value, this.form.get('newPass')?.value).pipe(catchError((err)=>{
+      if (err.status == 401) {
+        this.error = "Niepoprawne dane"
+        return throwError(() => new Error(err.message))
+      }
+      this.error = "Nieznany błąd"
+      return throwError(() => new Error(err.message))
+    })).subscribe((data) => {
+      if (this.error == null) {
+        this.dr.close()
+        this.ls.logOut()
+        this.router.navigateByUrl("/login")
+      }
+    })
+  }
+}
--- a/src/app/app-view/personal/clean/clean.component.html
+++ b/src/app/app-view/personal/clean/clean.component.html
@@ -0,0 +1,18 @@
+<h1 mat-dialog-title>Czystość</h1>
+<mat-dialog-content>
+    @if (grade) {
+        <h1>Twoja ocena: <span [ngStyle]="gradeColor()">{{grade}}</span></h1>
+    }
+    @else {
+        <h1>Nie oceniono</h1>
+    }
+    <p *ngIf="notes.length > 0">Uwagi:</p>
+    <ul>
+        <li *ngFor="let i of notes">{{i.label}}<span *ngIf="i.weight > 1"> ({{i.weight}})</span></li>
+    </ul>
+    <p>{{tips}}</p>
+    <app-date-selector [(date)]="day" [filter]="filter"/>
+</mat-dialog-content>
+<mat-dialog-actions align="end">
+    <button mat-icon-button mat-dialog-close><mat-icon>close</mat-icon></button>
+</mat-dialog-actions>
--- a/Show More
+++ b/Show More