Merge branch 'css' of https://github.com/RIT-SWEN-261-02/team-project-2245-swen-261-02-2b into css

20 files changed, 386 insertions, 133 deletions

diff --git a/ufund-ui/src/app/app.component.css b/ufund-ui/src/app/app.component.css
index 0bcd658..f4ed668 100644
--- a/ufund-ui/src/app/app.component.css
+++ b/ufund-ui/src/app/app.component.css
@@ -38,29 +38,33 @@
         text-decoration: none;
     }
 
-    a {
-        display: block;
-        position: relative;
-        padding: 0.1em 0;
+    a:hover {
+        text-decoration: underline;
     }
 
-    a::after {
-        content: '';
-        position: absolute;
-        bottom: 4px;
-        left: 0;
-        width: 100%;
-        height: 0.03em;
-        background-color: white;
-        opacity: 0;
-        transition: opacity 300ms, transform 300ms;
-    }
+    /*a {*/
+    /*    display: block;*/
+    /*    position: relative;*/
+    /*    padding: 0.1em 0;*/
+    /*}*/
 
-    a:hover::after,
-    a:focus::after {
-        opacity: 1;
-        transform: translate3d(0, 0.2em, 0);
-    }
+    /*a::after {*/
+    /*    content: '';*/
+    /*    position: absolute;*/
+    /*    bottom: 4px;*/
+    /*    left: 0;*/
+    /*    width: 100%;*/
+    /*    height: 0.03em;*/
+    /*    background-color: white;*/
+    /*    opacity: 0;*/
+    /*    transition: opacity 300ms, transform 300ms;*/
+    /*}*/
+
+    /*a:hover::after,*/
+    /*a:focus::after {*/
+    /*    opacity: 1;*/
+    /*    transform: translate3d(0, 0.2em, 0);*/
+    /*}*/
 
 
 }
diff --git a/ufund-ui/src/app/app.module.ts b/ufund-ui/src/app/app.module.ts
index c91256e..16455be 100644
--- a/ufund-ui/src/app/app.module.ts
+++ b/ufund-ui/src/app/app.module.ts
@@ -17,6 +17,7 @@ import {LoginComponent} from './components/login/login.component';
 import { MiniNeedListComponent } from './components/mini-need-list/mini-need-list.component';
 import { SignupComponent } from './components/signup/signup.component';
 import { ToastComponent } from './components/toast/toast.component';
+import { NeedEditComponent } from './components/need-edit/need-edit.component';
 
 @NgModule({
     declarations: [
@@ -31,6 +32,7 @@ import { ToastComponent } from './components/toast/toast.component';
         SignupComponent,
         MiniNeedListComponent,
         ToastComponent,
+        NeedEditComponent,
     ],
     imports: [
         BrowserModule,
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.css b/ufund-ui/src/app/components/cupboard/cupboard.component.css
index faff4d4..e45d929 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.css
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.css
@@ -4,7 +4,7 @@
 }
 
 #box {
-    width: 1000px;
+    width: 800px;
     display: flex;
     flex-direction: column;
 }
@@ -22,7 +22,7 @@
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    margin-right: 5px;
-   border-bottom: 0px;
+   border-bottom: 0;
 }
 
 .selected-tab {
@@ -30,13 +30,25 @@
 }
 
 #create-form, #delete-form, #update-form {
-   background-color: #d9d9d9;
+   background-color: #3a3a3a;
    padding: 10px 20px 20px 20px;
    border: 2px solid #000;
    border-radius: 5px;
    visibility: visible;
+    /*position: absolute;*/
 }
 
-#create-button {
-   padding: 10px 20px;
+#header {
+    display: flex;
+    gap: 20px;
+    align-items: center;
+
+    h1 {
+        display: inline;
+        width: min-content;
+    }
+
+    button {
+        margin-top: 3px;
+    }
 }
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.html b/ufund-ui/src/app/components/cupboard/cupboard.component.html
index 6f7799e..37954bb 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.html
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.html
@@ -1,13 +1,14 @@
 <div id="box">
-    <h1> Cupboard </h1>
+    <div id="header">
+        <h1> Cupboard </h1>
+        <button *ngIf="isManager()" class="button2" (click)="this.selectForm('create')"><span class="icon">add</span>Create Need</button>
+    </div>
     <app-need-list (currentNeed) = populateForm($event) #needList></app-need-list>
 </div>
-<div *ngIf="isManager()" >
-    <h2 > Admin View </h2>
-    <div id="menu">
-        <button [ngClass]="selectedForm === 'create' ? 'selected-tab' : 'tab'" (click)="selectForm('create')">Create new Need</button>
-        <button [ngClass]="selectedForm === 'update' ? 'selected-tab' : 'tab'" (click)="selectForm('update')">Update existing Need</button>
-    </div>
+<ng-template [ngIf]="isManager()" >
+<div>
+    <app-need-edit *ngIf="selectedForm === 'update'" [selectedNeed]="selectedNeed" (refreshNeedList)="needList.refresh()"></app-need-edit>
+    <div>
     <div id="create-form" *ngIf="selectedForm === 'create'">
         <h1> Create Need </h1>
         <form #cupboardForm="ngForm" (ngSubmit)="submit(cupboardForm.value)">
@@ -26,35 +27,12 @@
             <label>Physical</label><br>
             <input type="checkbox" name="urgent" value="false" ngModel>
             <label>Urgent</label><br>
-            <label>Description</label>
-            <textarea name="description" [(ngModel)]="selectedNeed.description"></textarea><br>
+            <label>Description</label><br>
+            <textarea name="description"></textarea><br>
             <input type="submit" value="Submit">
 
         </form>
     </div>
-    <div id="update-form" *ngIf="selectedForm === 'update'">
-        <h1> Update Need </h1>
-        <label>Needs:</label><br>
-        <form #updateForm="ngForm" (ngSubmit)="update(updateForm.value)">
-            <input type="text" name="name" [(ngModel)]="selectedNeed.name"><br>
-            <input type="text" name="image" [(ngModel)]="selectedNeed.image"><br>
-            <input type="text" name="location" [(ngModel)]="selectedNeed.location"><br>
-            <label>Max Goal:</label><br>
-            <input type="number" name="maxGoal" [(ngModel)]="selectedNeed.maxGoal"><br>
-            <label>Type</label><br>
-            <input type="radio" name="type" value="MONETARY" [(ngModel)]="selectedNeed.type">
-            <label>Monetary</label><br>
-            <input type="radio" name="type" value="PHYSICAL" [(ngModel)]="selectedNeed.type">
-            <label>Physical</label><br>
-            <input type="checkbox" name="urgent" [(ngModel)]="selectedNeed.urgent">
-            <label>Urgent</label> <br>
-            <label>Description</label> <br>
-            <textarea name="description" [(ngModel)]="selectedNeed.description"></textarea><br>
-            <input type="submit" value="Submit">
-
-        </form>
-
     </div>
-    <hr>
-
 </div>
+</ng-template>
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.ts b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
index 662def4..2230cd3 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.ts
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
@@ -16,7 +16,7 @@ import {ToastsService, ToastType} from '../../services/toasts.service';
 
 export class CupboardComponent implements OnInit {
 
-    selectedForm = "create";
+    selectedForm?: string = undefined;
     needs: any;
     @ViewChild("needList") needList?: NeedListComponent
 
@@ -82,45 +82,6 @@ export class CupboardComponent implements OnInit {
         return type === ("MANAGER" as unknown as userType);
     }
 
-    update(form: any) {
-        console.log(form);
-        const need: Need = {
-            name: form.name,
-            image: form.image,
-            location: form.location,
-            id: this.selectedNeed.id, //system will control this
-            maxGoal: form.maxGoal,
-            type: GoalType[form.type as keyof typeof GoalType],
-            urgent: form.urgent,
-            filterAttributes: [],
-            current: 0,
-            description: form.description
-        };
-
-        this.cupboardService.updateNeed(need.id, need)
-            .pipe(catchError((ex, _) => {
-                if (ex.status == 500) {
-                    this.toastService.sendToast(ToastType.ERROR, 'Fields cannot be blank');
-                } else if (ex.status == 400) {
-                    this.toastService.sendToast(ToastType.ERROR, ex.error);
-                } else {
-                    this.toastService.sendToast(ToastType.ERROR, "Error on creating need");
-                }
-                return of()
-            }))
-            .subscribe(
-                (result) => {
-                    if (result) {
-                        console.log("need updated successfully");
-                        this.needList?.refresh()
-                    } else {
-                        console.log("need update failed");
-                    }
-                }
-
-            );
-    }
-
     submit(form: any) {
         const need: Need = {
             name: form.name,
diff --git a/ufund-ui/src/app/components/dashboard/dashboard.component.html b/ufund-ui/src/app/components/dashboard/dashboard.component.html
index 330d1f3..6a95ecd 100644
--- a/ufund-ui/src/app/components/dashboard/dashboard.component.html
+++ b/ufund-ui/src/app/components/dashboard/dashboard.component.html
@@ -2,4 +2,4 @@
 <h1>Your Dashboard</h1>
 <app-mini-need-list [needList]="topNeeds" jtitle="Top needs" url="/cupboard"/>
 <app-mini-need-list [needList]="almostThere" jtitle="Almost there" url="/cupboard"/>
-<app-mini-need-list [needList]="inBasket" jtitle="In your basket" url="/cupboard"/>
+<app-mini-need-list [needList]="inBasket" jtitle="In your basket" url="/basket"/>
diff --git a/ufund-ui/src/app/components/dashboard/dashboard.component.ts b/ufund-ui/src/app/components/dashboard/dashboard.component.ts
index 645893f..c94b5c6 100644
--- a/ufund-ui/src/app/components/dashboard/dashboard.component.ts
+++ b/ufund-ui/src/app/components/dashboard/dashboard.component.ts
@@ -4,6 +4,7 @@ import {Router} from '@angular/router';
 import {Need} from '../../models/Need';
 import {CupboardService} from '../../services/cupboard.service';
 import {firstValueFrom} from 'rxjs';
+import {UsersService} from '../../services/users.service';
 
 @Component({
     selector: 'app-dashboard',
@@ -20,7 +21,8 @@ export class DashboardComponent implements OnInit{
     constructor(
         protected authService: AuthService,
         protected router: Router,
-        protected cupboardService: CupboardService
+        protected cupboardService: CupboardService,
+        protected userService: UsersService
     ) {}
 
     ngOnInit() {
@@ -33,7 +35,10 @@ export class DashboardComponent implements OnInit{
         firstValueFrom(this.cupboardService.getNeeds()).then(r => {
             this.topNeeds = r.sort((a, b) => b.current - a.current)
             this.almostThere = r.sort((a, b) => a.current/a.maxGoal - b.current/b.maxGoal)
-            this.inBasket = r.filter(n => n.id in user!.basket)
+        })
+
+        this.userService.getBasket().subscribe(r => {
+            this.inBasket = r;
         })
     }
 
diff --git a/ufund-ui/src/app/components/funding-basket/funding-basket.component.css b/ufund-ui/src/app/components/funding-basket/funding-basket.component.css
index a17f710..c46ef57 100644
--- a/ufund-ui/src/app/components/funding-basket/funding-basket.component.css
+++ b/ufund-ui/src/app/components/funding-basket/funding-basket.component.css
@@ -5,7 +5,7 @@
 
 #box {
     display: flex;
-    width: 1000px;
+    width: 800px;
     flex-direction: column;
     gap: 10px;
 }
@@ -20,7 +20,7 @@
 #needList {
     display: flex;
     flex-direction: column;
-    gap: 10px;
+    gap: 15px;
     max-width: 1000px;
 }
 
diff --git a/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts b/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts
index ecf452a..dcacca1 100644
--- a/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts
+++ b/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts
@@ -13,7 +13,6 @@ import {ToastsService, ToastType} from '../../services/toasts.service';
     styleUrl: './funding-basket.component.css'
 })
 export class FundingBasketComponent implements OnInit {
-    statusText: any;
 
     constructor(
         private router: Router,
diff --git a/ufund-ui/src/app/components/home-page/home-page.component.css b/ufund-ui/src/app/components/home-page/home-page.component.css
index 16f3140..a10377f 100644
--- a/ufund-ui/src/app/components/home-page/home-page.component.css
+++ b/ufund-ui/src/app/components/home-page/home-page.component.css
@@ -4,6 +4,7 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
+    overflow: clip;
 }
 
 #hero {
diff --git a/ufund-ui/src/app/components/need-edit/need-edit.component.css b/ufund-ui/src/app/components/need-edit/need-edit.component.css
new file mode 100644
index 0000000..17605c2
--- /dev/null
+++ b/ufund-ui/src/app/components/need-edit/need-edit.component.css
@@ -0,0 +1,21 @@
+:host {
+    /*position: absolute;*/
+    /*background-color: rgba(0, 0, 0, 0.5);*/
+    /*display: flex;*/
+    /*height: 100%;*/
+    /*top: 0;*/
+    /*left: 0;*/
+    /*right: 0;*/
+    /*z-index: 5;*/
+    /*justify-content: center;*/
+}
+
+#create-form, #delete-form, #update-form {
+    margin-top: 50px;
+    background-color: #3a3a3a;
+    padding: 10px 20px 20px 20px;
+    border: 2px solid #000;
+    border-radius: 5px;
+    /*visibility: visible;*/
+    /*position: absolute;*/
+}
diff --git a/ufund-ui/src/app/components/need-edit/need-edit.component.html b/ufund-ui/src/app/components/need-edit/need-edit.component.html
new file mode 100644
index 0000000..e776415
--- /dev/null
+++ b/ufund-ui/src/app/components/need-edit/need-edit.component.html
@@ -0,0 +1,24 @@
+<div id="update-form">
+    <h1> Update Need </h1>
+    <form #updateForm="ngForm" (ngSubmit)="update(updateForm.value)">
+        <label>Name:</label><br>
+        <input type="text" name="name" [(ngModel)]="selectedNeed.name"><br>
+        <label>Image:</label><br>
+        <input type="text" name="image" [(ngModel)]="selectedNeed.image"><br>
+        <label>Location:</label><br>
+        <input type="text" name="location" [(ngModel)]="selectedNeed.location"><br>
+        <label>Max Goal:</label><br>
+        <input type="number" name="maxGoal" [(ngModel)]="selectedNeed.maxGoal"><br>
+        <label>Type</label><br>
+        <input type="radio" name="type" value="MONETARY" [(ngModel)]="selectedNeed.type">
+        <label>Monetary</label><br>
+        <input type="radio" name="type" value="PHYSICAL" [(ngModel)]="selectedNeed.type">
+        <label>Physical</label><br>
+        <input type="checkbox" name="urgent" [(ngModel)]="selectedNeed.urgent">
+        <label>Urgent</label> <br>
+        <label>Description</label> <br>
+        <textarea name="description" [(ngModel)]="selectedNeed.description"></textarea><br>
+        <input type="submit" value="Submit">
+
+    </form>
+</div>
diff --git a/ufund-ui/src/app/components/need-edit/need-edit.component.ts b/ufund-ui/src/app/components/need-edit/need-edit.component.ts
new file mode 100644
index 0000000..2462534
--- /dev/null
+++ b/ufund-ui/src/app/components/need-edit/need-edit.component.ts
@@ -0,0 +1,61 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Need, GoalType } from '../../models/Need'; 
+import { CupboardService } from '../../services/cupboard.service';
+import { catchError, of } from 'rxjs';
+import { ToastsService, ToastType } from '../../services/toasts.service';
+
+@Component({
+  selector: 'app-need-edit',
+  standalone: false,
+  templateUrl: './need-edit.component.html',
+  styleUrl: './need-edit.component.css'
+})
+export class NeedEditComponent {
+  constructor(
+    private cupboardService: CupboardService,
+    private toastService: ToastsService
+
+  ) {}
+
+  @Input() selectedNeed!: Need;
+  @Output() refreshNeedList = new EventEmitter<void>();
+
+  update(form: any) {
+    console.log(form);
+    const need: Need = {
+        name: form.name,
+        image: form.image,
+        location: form.location,
+        id: this.selectedNeed.id, //system will control this
+        maxGoal: form.maxGoal,
+        type: GoalType[form.type as keyof typeof GoalType],
+        urgent: form.urgent,
+        filterAttributes: [],
+        current: 0,
+        description: form.description
+    };
+
+    this.cupboardService.updateNeed(need.id, need)
+        .pipe(catchError((ex, _) => {
+            if (ex.status == 500) {
+                this.toastService.sendToast(ToastType.ERROR, 'Fields cannot be blank');
+            } else if (ex.status == 400) {
+                this.toastService.sendToast(ToastType.ERROR, ex.error);
+            } else {
+                this.toastService.sendToast(ToastType.ERROR, "Error on creating need");
+            }
+            return of()
+        }))
+        .subscribe(
+            (result) => {
+                if (result) {
+                    console.log("need updated successfully");
+                    this.refreshNeedList.emit();
+                } else {
+                    console.log("need update failed");
+                }
+            }
+
+        );
+  }
+}
\ No newline at end of file
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.css b/ufund-ui/src/app/components/need-list/need-list.component.css
index d4be5fa..5f2e5e1 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.css
+++ b/ufund-ui/src/app/components/need-list/need-list.component.css
@@ -14,7 +14,7 @@
 #needList {
     display: flex;
     flex-direction: column;
-    gap: 10px
+    gap: 15px
 }
 
 select {
@@ -100,3 +100,11 @@ select {
     padding: 5px;
     gap: 5px;
 }
+
+#page-selector {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 10px;
+    gap: 10px
+}
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.html b/ufund-ui/src/app/components/need-list/need-list.component.html
index 84f83d6..c0501ba 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.html
+++ b/ufund-ui/src/app/components/need-list/need-list.component.html
@@ -15,6 +15,8 @@
         <button (click)="changeSortMode(searchForm.value)">
             <span class="icon">{{sortMode === 'Ascending' ? 'arrow_upward': 'arrow_downward'}}</span>
         </button>
+        <label>Needs per page: </label>
+        <input type ="number" [(ngModel)]="itemsPerPage" (change)="resetVisibleNeeds()" min="1" max="{{searchResults.length}}">
     </div>
     <!--<button (click)="close()">Close</button>-->
 </div>
@@ -23,9 +25,8 @@
 <h2 *ngIf="searchResults.length < needs.length && searchResults.length != 0"> Search Results({{needs.length - searchResults.length}} needs filtered): </h2>
 <h2 *ngIf="searchResults.length == needs.length"> All Needs </h2>
 <h2 *ngIf="searchResults.length == 0"> No Results Found </h2>
-
 <div id="needList">
-    <div *ngFor="let need of searchResults" class="needEntry">
+    <div *ngFor="let need of visibleNeeds" class="needEntry">
         <div [routerLink]="'/need/' + need.id" class="clickable">
             <div class="split">
                 <div class="left">
@@ -54,11 +55,17 @@
                 <span class="icon">add</span>Add To Basket
             </button>
             <button *ngIf="isManager()" (click)="select(need)">
-                <span class="icon">edit</span>Delete Need
+                <span class="icon">edit</span>Edit Need
             </button>
             <button *ngIf="isManager()" (click)="delete(need.id)" >
-                <span class="icon">delete</span>Edit Need
+                <span class="icon">delete</span>Delete Need
             </button>
         </div>
     </div>
 </div>
+
+<div id="page-selector">
+    <button *ngIf="currentPage > 0" (click)="decrementPage()"><span class="icon">arrow_back_ios</span></button>
+    <span>Page {{currentPage + 1}} of {{totalPages}}</span>
+    <button *ngIf="currentPage < totalPages - 1" (click)="incrementPage()"><span class="icon">arrow_forward_ios</span></button>
+</div>
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.ts b/ufund-ui/src/app/components/need-list/need-list.component.ts
index 7a9d647..cd3d9bd 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.ts
+++ b/ufund-ui/src/app/components/need-list/need-list.component.ts
@@ -66,7 +66,36 @@ export class NeedListComponent {
   selectedNeed: Need | null = null;
   needs: Need[] = [];
   searchResults: Need[] = [];
+  visibleNeeds: Need[] = [];
   sortMode: 'Ascending' | 'Descending' = 'Ascending'
+  currentPage: number = 0;
+  itemsPerPage: number = 5;
+  totalPages: number = Math.ceil(this.needs.length / this.itemsPerPage);
+
+  decrementPage() {
+    this.currentPage--;
+    this.updateVisibleNeeds();    
+  }
+
+  incrementPage() {
+    this.currentPage++;
+    this.updateVisibleNeeds();    
+  }
+
+  editNeedsPerPage(amount: number) {
+    this.itemsPerPage = amount;
+    this.updateVisibleNeeds();
+  }
+
+  updateVisibleNeeds() {
+    this.totalPages = Math.ceil(this.searchResults.length / this.itemsPerPage);
+    this.visibleNeeds = this.searchResults.slice(this.currentPage * this.itemsPerPage, (this.currentPage + 1) * this.itemsPerPage);
+  }
+
+  resetVisibleNeeds() {
+    this.currentPage = 0;
+    this.updateVisibleNeeds();
+  }
 
   currentSortAlgo: sortAlgo = sortByPriority;
   sortSelection: string = 'sortByPriority';
@@ -96,6 +125,7 @@ export class NeedListComponent {
             this.needs = n.sort(this.currentSortAlgo).reverse();
           }
           this.searchResults = this.needs;
+          this.updateVisibleNeeds();
         });
 
         const form = document.getElementById('search-form') as HTMLFormElement;
@@ -105,6 +135,7 @@ export class NeedListComponent {
 
   ngOnInit(): void {
     this.refresh()
+   
   }
 
   changeSortMode(form : any) {
@@ -145,8 +176,7 @@ export class NeedListComponent {
             } else {
               this.searchResults = n.sort(this.currentSortAlgo).reverse();
             }
-
-            console.log(currentSearchValue, this.searchResults);
+            this.updateVisibleNeeds();
             });
           }
         }, 250);
@@ -160,6 +190,7 @@ export class NeedListComponent {
 
   delete(id : number) {
     this.cupboardService.deleteNeed(id).subscribe(() => {
+        this.toastService.sendToast(ToastType.INFO, "Need deleted.")
       this.needs = this.needs.filter(n => n.id !== id)
     })
     this.refresh();
@@ -199,10 +230,7 @@ export class NeedListComponent {
       } else {
         this.toastService.sendToast(ToastType.ERROR, "This need is already in your basket!")
       }
-
-
     }
-
   }
 
   back() {
diff --git a/ufund-ui/src/app/components/need-page/need-page.component.css b/ufund-ui/src/app/components/need-page/need-page.component.css
index a3a4014..844410f 100644
--- a/ufund-ui/src/app/components/need-page/need-page.component.css
+++ b/ufund-ui/src/app/components/need-page/need-page.component.css
@@ -6,5 +6,68 @@
 #box {
     display: flex;
     flex-direction: column;
-    width: 1000px;
+    width: 800px;
+    justify-content: start;
+    gap: 10px;
 }
+
+.needName {
+    font-weight: bold;
+}
+
+.needType {
+    text-transform: uppercase;
+    /*font-size: 10pt;*/
+    margin-top: -20px;
+    /*margin-bottom: 20px;*/
+}
+
+.split {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+
+
+    .left {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .right {
+        display: flex;
+        flex-direction: column;
+        align-items: end;
+    }
+}
+
+.urgent {
+    font-size: 11pt;
+    background-color: rgba(255, 165, 0, 0.27);
+    color: rgba(255, 165, 0, 1);
+    padding: 2px;
+    border-radius: 5px;
+}
+
+.prog {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 15px;
+}
+
+.actionArea {
+    display: flex;
+    padding: 5px;
+    gap: 5px;
+    margin-top: 10px;
+}
+
+/*#editor {*/
+/*    position: absolute;*/
+/*    background-color: #4a4a4a;*/
+/*    display: flex;*/
+/*    flex-direction: column;*/
+/*    justify-self: center;*/
+/*    align-self: center;*/
+/*    padding: 20px;*/
+/*    box-shadow: 0 0 100px black;*/
+/*}*/
diff --git a/ufund-ui/src/app/components/need-page/need-page.component.html b/ufund-ui/src/app/components/need-page/need-page.component.html
index a72167c..958dfa6 100644
--- a/ufund-ui/src/app/components/need-page/need-page.component.html
+++ b/ufund-ui/src/app/components/need-page/need-page.component.html
@@ -1,10 +1,29 @@
 <div id="box">
     <h1>{{need?.name}}</h1>
-    <div>
-        <h3>Looking for <u>{{need?.type}}</u> Donations.</h3>
+    <span class="needType">{{need?.type}} GOAL</span>
+
+    <img *ngIf="need.image" alt="Need image" [src]="need?.image"/>
+
+    <p>{{need?.description}}</p>
+    <div class="prog">
+<!--        <span>{{need?.current}} / {{need?.maxGoal}}</span>-->
+        <progress [value]="need?.current" [max]="need?.maxGoal"></progress>
+        <span>This goal is <strong>{{(((need?.current ?? 0)*100) / (need?.maxGoal ?? 0)).toFixed(0)}}%</strong> complete!</span>
     </div>
-    <div *ngIf="need?.filterAttributes">
-        <p>Tags:</p>
+
+    <span><strong>Target Goal:</strong> {{need.maxGoal}}</span>
+
+    <span><strong>Amount Currently Collected:</strong> {{need.current}}</span>
+
+    <span><strong>Location:</strong> {{need.location}}</span>
+
+    <span><strong>Urgency: </strong>
+        <span *ngIf="!need.urgent">Not urgent</span>
+        <span *ngIf="need.urgent" class="urgent">URGENT</span>
+    </span>
+
+    <div *ngIf="need.filterAttributes.length > 0">
+        <strong>Tags:</strong>
         <ul style="display: flex; column-gap: 24px;">
             <li *ngFor="let tag of need?.filterAttributes">
                 <p>{{tag}}</p>
@@ -12,15 +31,15 @@
         </ul>
     </div>
 
-    <hr>
-    <p>Location: {{need?.location}}</p>
-    <p>Urgent: {{need?.urgent}}</p>
-    <span>{{need?.current}} / {{need?.maxGoal}}</span>
-    <progress [value]="need?.current" [max]="need?.maxGoal"></progress>
-    <span>This goal is <strong>{{(((need?.current ?? 0)*100) / (need?.maxGoal ?? 0)).toFixed(0)}}%</strong> complete!</span>
-    <div>
-        <button>Add to basket</button>
-        <button>Edit</button>
-        <button>Delete</button>
+    <div class="actionArea">
+        <button *ngIf="isHelper()" (click)="add(need!)">
+            <span class="icon">add</span>Add To Basket
+        </button>
+<!--        <button *ngIf="isManager()" (click)="edit(need!)">-->
+<!--            <span class="icon">edit</span>Edit Need-->
+<!--        </button>-->
+        <button *ngIf="isManager()" (click)="delete(need!.id)" >
+            <span class="icon">delete</span>Delete Need
+        </button>
     </div>
 </div>
diff --git a/ufund-ui/src/app/components/need-page/need-page.component.ts b/ufund-ui/src/app/components/need-page/need-page.component.ts
index e38554c..ad4cacf 100644
--- a/ufund-ui/src/app/components/need-page/need-page.component.ts
+++ b/ufund-ui/src/app/components/need-page/need-page.component.ts
@@ -1,8 +1,12 @@
 import {Component, Input} from '@angular/core';
 import {GoalType, Need} from '../../models/Need';
-import {ActivatedRoute} from "@angular/router";
+import {ActivatedRoute, Router} from "@angular/router";
 import {CupboardService} from "../../services/cupboard.service";
-import {NgFor} from '@angular/common';
+import {userType} from '../../models/User';
+import {AuthService} from '../../services/auth.service';
+import {catchError, of} from 'rxjs';
+import {ToastsService, ToastType} from '../../services/toasts.service';
+import {UsersService} from '../../services/users.service';
 
 @Component({
     selector: 'app-need-page',
@@ -14,11 +18,15 @@ export class NeedPageComponent {
     constructor(
         private route: ActivatedRoute,
         private cupboardService: CupboardService,
+        private authService: AuthService,
+        private usersService: UsersService,
+        private toastService: ToastsService,
+        private router: Router
     ) {}
 
     public GoalType = GoalType;
 
-    @Input() need?: Need;
+    @Input() need!: Need;
 
     ngOnInit(): void {
         const id = Number(this.route.snapshot.paramMap.get('id'));
@@ -28,4 +36,52 @@ export class NeedPageComponent {
     back() {
         window.history.back();
     }
+
+    isManager() {
+        const type = this.authService.getCurrentUser()?.type;
+        return type === ("MANAGER" as unknown as userType);
+    }
+
+    isHelper() {
+        const type = this.authService.getCurrentUser()?.type;
+        return type === ("HELPER" as unknown as userType);
+    }
+
+    add(need: Need) {
+        const currentUser = this.authService.getCurrentUser();
+        //console.log("get current user in angular:", currentUser)
+        if (currentUser) {
+            if (!currentUser.basket.includes(need.id)) {
+                currentUser.basket.push(need.id);
+                this.usersService.updateUser(currentUser)
+                    .pipe(catchError((err, _) =>  {
+                        console.error(err);
+                        return of();
+                    }))
+                    .subscribe(() => {
+                        this.usersService.refreshBasket();
+                    });
+            } else {
+                this.toastService.sendToast(ToastType.ERROR, "This need is already in your basket!")
+            }
+        }
+    }
+
+    delete(id : number) {
+        this.cupboardService.deleteNeed(id)
+            .pipe(catchError((ex, r) => {
+                this.toastService.sendToast(ToastType.ERROR, ex.error)
+                return of()
+            }))
+            .subscribe(() => {
+                // this.needs = this.needs.filter(n => n.id !== id)
+                this.toastService.sendToast(ToastType.INFO, "Need deleted")
+                this.router.navigate(['/'])
+            })
+        // this.refresh();
+    }
+
+    edit(need: Need) {
+
+    }
 }
diff --git a/ufund-ui/src/styles.css b/ufund-ui/src/styles.css
index f515154..75d6b36 100644
--- a/ufund-ui/src/styles.css
+++ b/ufund-ui/src/styles.css
@@ -1,7 +1,7 @@
 /* You can add global styles to this file, and also import other style files */
 
 :root {
-    color-scheme: light dark;
+    color-scheme: /*light*/ dark;
 }
 
 * {
@@ -65,3 +65,7 @@ button, input[type=button], input[type=reset], input[type=submit], .button {
 h1 {
     font-size: 40px;
 }
+
+progress {
+    min-width: 100%;
+}