Merge pull request 'dailycart_cm' (#2) from dailycart_cm into master

Reviewed-on: #2
4 years ago · ea6cf48393
110 changed files with 17243 additions and 1 deletions
--- a/FrontEnd/DailyCart
+++ b/FrontEnd/DailyCart
@ -1 +0,0 @@
-Subproject commit 3cf0a3d8dd6c004ea190639a4b8b7327d6051d39
--- a/UI/.browserslistrc
+++ b/UI/.browserslistrc
@ -0,0 +1,17 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR
+not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.
--- a/UI/.editorconfig
+++ b/UI/.editorconfig
@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false
--- a/UI/.gitignore
+++ b/UI/.gitignore
@ -0,0 +1,45 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+/out-tsc
+# Only exists if Bazel was run
+/bazel-out
+
+# dependencies
+/node_modules
+
+# profiling files
+chrome-profiler-events*.json
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+yarn-error.log
+testem.log
+/typings
+
+# System Files
+.DS_Store
+Thumbs.db
--- a/UI/README.md
+++ b/UI/README.md
@ -0,0 +1,27 @@
+# DailyCart
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.2.1.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
--- a/UI/angular.json
+++ b/UI/angular.json
@ -0,0 +1,109 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "DailyCart": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:application": {
+          "strict": true
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/DailyCart",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "tsconfig.app.json",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.css"
+            ],
+            "scripts": [
+              "node_modules/jquery/dist/jquery.min.js",
+              "src/assets/js/main.js"
+            ]
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "browserTarget": "DailyCart:build:production"
+            },
+            "development": {
+              "browserTarget": "DailyCart:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "DailyCart:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "tsconfig.spec.json",
+            "karmaConfig": "karma.conf.js",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.css"
+            ],
+            "scripts": []
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "DailyCart"
+}
--- a/UI/karma.conf.js
+++ b/UI/karma.conf.js
@ -0,0 +1,44 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, './coverage/DailyCart'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};
--- a/UI/package-lock.json
+++ b/UI/package-lock.json
--- a/UI/package.json
+++ b/UI/package.json
@ -0,0 +1,40 @@
+{
+  "name": "daily-cart",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve --port 8001 --proxy-config proxy.config.json",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "~12.2.0",
+    "@angular/common": "~12.2.0",
+    "@angular/compiler": "~12.2.0",
+    "@angular/core": "~12.2.0",
+    "@angular/forms": "~12.2.0",
+    "@angular/platform-browser": "~12.2.0",
+    "@angular/platform-browser-dynamic": "~12.2.0",
+    "@angular/router": "~12.2.0",
+    "jquery": "^3.6.0",
+    "rxjs": "~6.6.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.11.4"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "~12.2.1",
+    "@angular/cli": "~12.2.1",
+    "@angular/compiler-cli": "~12.2.0",
+    "@types/jasmine": "~3.8.0",
+    "@types/node": "^12.11.1",
+    "jasmine-core": "~3.8.0",
+    "karma": "~6.3.0",
+    "karma-chrome-launcher": "~3.1.0",
+    "karma-coverage": "~2.0.3",
+    "karma-jasmine": "~4.0.0",
+    "karma-jasmine-html-reporter": "~1.7.0",
+    "typescript": "~4.3.5"
+  }
+}
--- a/UI/proxy.config.json
+++ b/UI/proxy.config.json
@ -0,0 +1,6 @@
+{
+    "/api1/*" :{
+        "target" : "http://localhost:1005",
+        "secure" : false
+    }
+}
--- a/UI/src/1.jpg
+++ b/UI/src/1.jpg
--- a/UI/src/10.htm
+++ b/UI/src/10.htm
--- a/UI/src/11.png
+++ b/UI/src/11.png
--- a/UI/src/2.jpg
+++ b/UI/src/2.jpg
--- a/UI/src/3.jpg
+++ b/UI/src/3.jpg
--- a/UI/src/4.png
+++ b/UI/src/4.png
--- a/UI/src/5.png
+++ b/UI/src/5.png
--- a/UI/src/6.png
+++ b/UI/src/6.png
--- a/UI/src/7.jpg
+++ b/UI/src/7.jpg
--- a/UI/src/8.png
+++ b/UI/src/8.png
--- a/UI/src/9.png
+++ b/UI/src/9.png
--- a/UI/src/app/app-routing.module.ts
+++ b/UI/src/app/app-routing.module.ts
@ -0,0 +1,38 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { LoginComponent } from './auth/login/login.component';
+import { AuthGuardService } from './auth/service/auth-guard.service';
+import { SignupComponent } from './auth/signup/signup.component';
+import { BannerComponent } from './components/banner/banner.component';
+import { CartComponent } from './components/cart/cart.component';
+import { DairyComponent } from './components/dairy/dairy.component';
+import { FruitsComponent } from './components/fruits/fruits.component';
+import { HouseholdComponent } from './components/household/household.component';
+import { OrderComponent } from './components/order/order.component';
+import { PaymentComponent } from './components/payment/payment.component';
+import { ProductsComponent } from './components/products/products.component';
+import { ProfileComponent } from './components/profile/profile.component';
+import { SnacksComponent } from './components/snacks/snacks.component';
+import { WholegrainComponent } from './components/wholegrain/wholegrain.component';
+
+const routes: Routes = [
+  {path:'products', component:ProductsComponent, canActivate : [AuthGuardService] },
+  {path:'cart', component:CartComponent, canActivate : [AuthGuardService] },
+  {path:'profile/:uid', component:ProfileComponent, canActivate : [AuthGuardService] },
+  {path:'products/fruits', component:FruitsComponent},
+  {path:'products/dairy', component:DairyComponent},
+  {path:'products/household', component:HouseholdComponent},
+  {path:'products/wholegrain', component:WholegrainComponent},
+  {path:'products/snacks', component:SnacksComponent},
+  {path:'login', component:LoginComponent},
+  {path:'signup', component:SignupComponent},
+  {path:'banner', component:BannerComponent},
+  {path:'order', component:OrderComponent, canActivate : [AuthGuardService]},
+  {path:'payment', component:PaymentComponent}
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }
--- a/UI/src/app/app.component.css
+++ b/UI/src/app/app.component.css
--- a/UI/src/app/app.component.html
+++ b/UI/src/app/app.component.html
@ -0,0 +1,32 @@
+
+<style>
+body {
+   
+     background-image: url('1.jpg');
+     background-position: center;
+     background-size: cover; 
+ }
+</style>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>DailyCart</title>
+</head>
+<body>
+<h2 class="logo">DailyCart</h2>
+            <div class="menu">
+                <ul>
+                    <li><a routerLink="banner">HOME</a></li>
+                    <li><a routerLink="products">PRODUCTS</a></li>
+                    <li><a routerLink="cart">CART</a></li>
+                    <li><a routerLink="order">ORDERS</a></li>
+                    <li><a  (click)="onProfile()">PROFILE</a></li>
+                </ul>
+            </div>
+            <div class="search">
+                <input class="srch" type="search" name="" placeholder="Search here...">
+                <a routerLink="products"> <button class="btn">Search</button></a>
+            </div>
+</body>
+</html>
+<router-outlet></router-outlet>
--- a/UI/src/app/app.component.spec.ts
+++ b/UI/src/app/app.component.spec.ts
@ -0,0 +1,35 @@
+import { TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        RouterTestingModule
+      ],
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have as title 'DailyCart'`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('DailyCart');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('.content span')?.textContent).toContain('DailyCart app is running!');
+  });
+});
--- a/UI/src/app/app.component.ts
+++ b/UI/src/app/app.component.ts
@ -0,0 +1,30 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { UserService } from './auth/service/user.service';
+import { ProductsService } from './service/products.service';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent implements OnInit{
+  title = 'DailyCart';
+
+  username:any;
+  uid!:any;
+  constructor(private route : Router,private productService : ProductsService,private userService : UserService)
+  {
+
+  }
+
+  ngOnInit(): void {
+    
+    
+  }
+  
+  onProfile(){
+    this.uid = window.sessionStorage.getItem('userid');
+    this.route.navigateByUrl('/profile/'+this.uid);
+  }
+}
--- a/UI/src/app/app.module.ts
+++ b/UI/src/app/app.module.ts
@ -0,0 +1,52 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppRoutingModule } from './app-routing.module';
+import { AppComponent } from './app.component';
+import { ProductsComponent } from './components/products/products.component';
+import { ReactiveFormsModule } from '@angular/forms';
+import {HttpClientModule} from '@angular/common/http';
+import { CategoryComponent } from './components/category/category.component';
+import { CartComponent } from './components/cart/cart.component';
+import { FruitsComponent } from './components/fruits/fruits.component';
+import { DairyComponent } from './components/dairy/dairy.component';
+import { WholegrainComponent } from './components/wholegrain/wholegrain.component';
+import { HouseholdComponent } from './components/household/household.component';
+import { SnacksComponent } from './components/snacks/snacks.component';
+import { LoginComponent } from './auth/login/login.component';
+import { BannerComponent } from './components/banner/banner.component';
+import { ProfileComponent } from './components/profile/profile.component';
+import { SignupComponent } from './auth/signup/signup.component';
+import { OrderComponent } from './components/order/order.component';
+import { PaymentComponent } from './components/payment/payment.component';
+
+
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    ProductsComponent,
+    CategoryComponent,
+    CartComponent,
+    FruitsComponent,
+    DairyComponent,
+    WholegrainComponent,
+    HouseholdComponent,
+    SnacksComponent,
+    LoginComponent,
+    BannerComponent,
+    ProfileComponent,
+    SignupComponent,
+    OrderComponent,
+    PaymentComponent
+  ],
+  imports: [
+    BrowserModule,
+    AppRoutingModule,
+    ReactiveFormsModule,
+    HttpClientModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }
--- a/UI/src/app/auth/login/login.component.css
+++ b/UI/src/app/auth/login/login.component.css
--- a/UI/src/app/auth/login/login.component.html
+++ b/UI/src/app/auth/login/login.component.html
@ -0,0 +1,108 @@
+
+<Style>
+    a {
+  text-decoration: none;
+  font-size: 17px;
+  color: black;
+}
+body  
+{  
+    margin: 0;  
+    padding: 0;  
+    
+    font-family: 'Arial';  
+}  
+.login{  
+        width: 382px;  
+        overflow: hidden;  
+        margin: auto;  
+        margin: 20 0 0 450px;  
+        padding: 40px;  
+        background: #6abadeba;  
+        border-radius: 15px ;  
+          
+}  
+h2{  
+    
+    color: #ff7200;  
+    padding: 20px;  
+}  
+label{  
+    color: black;  
+    font-size: 17px;  
+}  
+#Uname{  
+    width: 300px;  
+    height: 30px;  
+    border: none;  
+    border-radius: 3px;  
+    padding-left: 8px;  
+}  
+#Pass{  
+    width: 300px;  
+    height: 30px;  
+    border: none;  
+    border-radius: 3px;  
+    padding-left: 8px;  
+      
+}  
+#log{  
+    width: 300px;  
+    height: 30px;  
+    border: none;  
+    border-radius: 17px;  
+    padding-left: 7px;  
+    color: #ff7200;  
+  
+  
+}  
+span{  
+    color: white;  
+    font-size: 17px;  
+}  
+a{  
+    float: right;  
+    background-color: grey;  
+}  
+
+.banner {
+    /* The image used */
+    background-image:
+    url(1.jpg);
+    background-position: center;
+    background-size: cover;
+    }
+</Style>
+<!DOCTYPE html>    
+<html>    
+<head>    
+    <title>Login Form</title>    
+      
+</head>    
+<body>   
+    <div class="banner"> 
+    <br><br><br><br><br><br>
+    <div class="login">    
+    <form id="login" method="get" action="login.php" [formGroup]='loginForm' (submit)='OnLoginFormSubmit()'>    
+        <h2 class="logo">Login to DailyCart</h2><br><br><br><br><br>
+        <label><b>Username <br>     
+        </b>    
+        </label>    
+        <input type="text" id="Uname" formControlName="username">
+        <br><br>    
+        <label><b>Password     
+        </b>    
+        </label>    
+        <input type="password" id="Pass" formControlName="password">   
+        <br><br><br>  
+        <button [disabled]="!loginForm.valid" id="log"> LOGIN </button>      
+        <br><br>  
+        <p>New User?<a href="signup"><img border="0" src="https://previews.123rf.com/images/faysalfarhan/faysalfarhan1711/faysalfarhan171137973/89544623-sign-up-member-icon-isolated-on-elegant-yellow-round-button-abstract-illustration.jpg" width="70" height="70"></a></p>
+    </form>     
+</div> 
+<br><br><br><br><br><br><br><br><br><br><br><br>
+    </div> 
+
+</body>    
+</html>    
+<router-outlet></router-outlet> 
--- a/UI/src/app/auth/login/login.component.spec.ts
+++ b/UI/src/app/auth/login/login.component.spec.ts
@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoginComponent } from './login.component';
+
+describe('LoginComponent', () => {
+  let component: LoginComponent;
+  let fixture: ComponentFixture<LoginComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ LoginComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LoginComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/UI/src/app/auth/login/login.component.ts
+++ b/UI/src/app/auth/login/login.component.ts
@ -0,0 +1,53 @@
+import { Component, OnInit } from '@angular/core';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
+import { User } from 'src/app/model/User';
+import { ProductsService } from 'src/app/service/products.service';
+import { UserService } from '../service/user.service';
+
+@Component({
+  selector: 'app-login',
+  templateUrl: './login.component.html',
+  styleUrls: ['./login.component.css']
+})
+export class LoginComponent implements OnInit {
+
+  loginForm! : FormGroup;
+  user! : User 
+  msg: string;
+  uid!:any;
+
+
+  constructor(private route: Router,private userService:UserService, private productService:ProductsService) 
+  { 
+    this.msg='';
+  }
+  
+  ngOnInit(): void {
+    this.loginForm = new FormGroup({
+      username : new FormControl('', Validators.required),
+      password : new FormControl('', Validators.required)
+    });
+  }
+  OnLoginFormSubmit()
+  {
+    this.user = {
+      username : this.loginForm.value.username,
+      role : this.loginForm.value.role,
+      password : this.loginForm.value.password
+    }
+    this.userService.login(this.user).subscribe((data: any)=>{
+      //save the username and password in local storage
+      window.sessionStorage.setItem("username",this.user.username);
+      window.sessionStorage.setItem("isLoggedIn","true");
+      this.route.navigateByUrl('/banner');
+    }),
+    (err: any)=>{
+      this.msg='Invalid credentials...Check your Login and Password!!!';
+      window.sessionStorage.removeItem("username");
+      window.sessionStorage.removeItem("isLoggedIn");
+    };
+      
+  }
+
+}
--- a/UI/src/app/auth/service/auth-guard.service.spec.ts
+++ b/UI/src/app/auth/service/auth-guard.service.spec.ts
@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AuthGuardService } from './auth-guard.service';
+
+describe('AuthGuardService', () => {
+  let service: AuthGuardService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(AuthGuardService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
--- a/UI/src/app/auth/service/auth-guard.service.ts
+++ b/UI/src/app/auth/service/auth-guard.service.ts
@ -0,0 +1,21 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router';
+import { AuthService } from './auth.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthGuardService implements CanActivate  {
+
+  status! : boolean;
+  constructor(private authService : AuthService, private route :  Router ) { }
+
+  canActivate(route : ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean{
+    this.status = this.authService.isAuthenticated();
+    if(this.status == false){
+      this.route.navigateByUrl('login');
+    }
+    return true;
+
+  }
+}
--- a/UI/src/app/auth/service/auth.service.spec.ts
+++ b/UI/src/app/auth/service/auth.service.spec.ts
@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AuthService } from './auth.service';
+
+describe('AuthService', () => {
+  let service: AuthService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(AuthService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
--- a/UI/src/app/auth/service/auth.service.ts
+++ b/UI/src/app/auth/service/auth.service.ts
@ -0,0 +1,22 @@
+import { Injectable } from '@angular/core';
+import { User } from 'src/app/model/User';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthService {
+
+  user: User = new User();
+  
+  constructor() { 
+   
+  }
+  isAuthenticated() : boolean{
+    this.user.username = window.sessionStorage.getItem('username');
+    let isLoggedIn = window.sessionStorage.getItem('isLoggedIn');
+    if(isLoggedIn == 'true')
+      return true;
+    else
+      return false;
+  }
+}
--- a/UI/src/app/auth/service/user.service.ts
+++ b/UI/src/app/auth/service/user.service.ts
@ -0,0 +1,41 @@
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { User } from 'src/app/model/User';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class UserService {
+
+  path:string='http://localhost:8001/api1';
+    constructor(private httpClient:HttpClient){
+
+    }
+
+    postUser(user : User):Observable<User[]>{
+      let authCode = btoa(user.username+':'+user.password);
+      
+      user.username = authCode;
+      user.password = '';
+      return this.httpClient.post<User[]>(this.path+'/signup/',user);
+  }
+
+    login(user : any):Observable<User[]>{
+      let httpOptions={
+        headers : new HttpHeaders({
+          'Content-Type':'application/json',
+          'Authorization':'Basic ' + btoa(user.username+':'+user.password)
+        })
+      }
+      window.sessionStorage.setItem("code",btoa(user.username+':'+user.password));
+        let login_api = this.path + '/login';
+      return this.httpClient.get<User[]>(login_api,httpOptions);
+    }
+    public getDetails(user:any):Observable<User>{
+      console.log("j",user)
+      
+      let user_api=this.path+'/username/'+user;
+      return this.httpClient.get<any>(user_api);
+    }
+}
--- a/UI/src/app/auth/signup/signup.component.css
+++ b/UI/src/app/auth/signup/signup.component.css
--- a/UI/src/app/auth/signup/signup.component.html
+++ b/UI/src/app/auth/signup/signup.component.html
@ -0,0 +1,125 @@
+
+<Style>
+    body  
+    {  
+        margin: 0;  
+        padding: 0;  
+        
+        font-family: 'Arial';  
+    }  
+    .login{  
+            width: 382px;  
+            overflow: hidden;  
+            margin: auto;  
+            margin: 20 0 0 450px;  
+            padding: 32px;  
+            background: #6abadeba;  
+            border-radius: 15px ;  
+              
+    }  
+    h2{  
+        
+        color: #ff7200;  
+        padding: 20px;  
+    }  
+    label{  
+        color: black;  
+        font-size: 17px;  
+    }  
+    #Uname{  
+        width: 300px;  
+        height: 30px;  
+        border: none;  
+        border-radius: 3px;  
+        padding-left: 8px;  
+    }  
+    #Pass{  
+        width: 300px;  
+        height: 30px;  
+        border: none;  
+        border-radius: 3px;  
+        padding-left: 8px;  
+          
+    }  
+    #log{  
+        width: 300px;  
+        height: 30px;  
+        border: none;  
+        border-radius: 17px;  
+        padding-left: 7px;  
+        color: #ff7200;  
+      
+      
+    }  
+    span{  
+        color: white;  
+        font-size: 17px;  
+    }  
+    a{  
+        float: right;  
+        background-color: grey;  
+    }  
+    
+    .banner {
+        /* The image used */
+        background-image:
+        url(1.jpg);
+        background-position: center;
+        background-size: cover;
+        }
+    </Style>
+    <!DOCTYPE html>    
+    <html>    
+    <head>    
+        <title>Login Form</title>    
+          
+    </head>    
+    <body>   
+        <div class="banner"> 
+        <br><br><br><br><br><br>
+        <div class="login">    
+        <form id="login" method="get" action="login.php" [formGroup]='signUpForm' (submit)='onSignUpFormSubmit()'>    
+            <h2 class="logo">Sign Up to DailyCart</h2><br><br><br><br><br>
+            <label><b>Name <br>     
+            </b>    
+            </label>    
+            <input type="text" id="Uname" formControlName="name">
+            <br><br>    
+            <label><b>Username <br>     
+            </b>    
+            </label>    
+            <input type="text" id="Uname" formControlName="username">
+            <br><br>   
+            <label><b>Role <br>   
+            </b>    
+            </label>    
+            <select name="role" id="Uname" formControlName="role">
+                <option value="Admin">Admin</option>
+                <option value="User">User</option>
+            </select>
+            <br><br>    
+            <label><b>Apartment <br>   
+            </b>    
+            </label>    
+            <select name="apartment" id="Uname" formControlName="apartment">
+                <option value="Apartment 1">Apartment 1</option>
+                <option value="Apartment 2">Apartment 2</option>
+                <option value="Apartment 3">Apartment 3</option>
+                <option value="Apartment 4">Apartment 4</option>
+            </select>
+            <br><br>    
+            <label><b>Password <br>    
+            </b>    
+            </label>    
+            <input type="password" id="Pass" formControlName="password">   
+            <br><br> <br>   
+            <button [disabled]="!signUpForm.valid" id="log"> SIGN IN </button>      
+            <br><br>    
+              
+        </form>     
+    </div> 
+    <br><br><br><br>  <br><br>  <br><br>  <br><br>  
+        </div> 
+    
+    </body>    
+    </html>     
--- a/UI/src/app/auth/signup/signup.component.spec.ts
+++ b/UI/src/app/auth/signup/signup.component.spec.ts
@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SignupComponent } from './signup.component';
+
+describe('SignupComponent', () => {
+  let component: SignupComponent;
+  let fixture: ComponentFixture<SignupComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SignupComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SignupComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/UI/src/app/auth/signup/signup.component.ts
+++ b/UI/src/app/auth/signup/signup.component.ts
@ -0,0 +1,45 @@
+import { Component, OnInit } from '@angular/core';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
+import { User } from 'src/app/model/User';
+import { UserService } from '../service/user.service';
+
+@Component({
+  selector: 'app-signup',
+  templateUrl: './signup.component.html',
+  styleUrls: ['./signup.component.css']
+})
+export class SignupComponent implements OnInit {
+
+  signUpForm! : FormGroup;
+
+
+  constructor(private route: Router, private userService:UserService) 
+  { 
+    
+  }
+  
+  ngOnInit(): void {
+    this.signUpForm = new FormGroup({
+      name : new FormControl('',[Validators.required]),
+      username : new FormControl('',[Validators.required]),
+      password : new FormControl('',[Validators.required]),
+      role : new FormControl('',[Validators.required]),
+      apartment : new FormControl('',[Validators.required])
+    });
+  }
+  onSignUpFormSubmit() : void{
+    let user : User={
+      name : this.signUpForm.value.name,
+      username : this.signUpForm.value.username,
+      password : this.signUpForm.value.password,
+      role : this.signUpForm.value.role,
+      apartment : this.signUpForm.value.apartment
+    };
+    this.userService.postUser(user).subscribe(
+      (data: any)=>{this.route.navigateByUrl('/login');},
+      (err: any)=>{console.log(err)}
+    );
+  }
+
+}
--- a/UI/src/app/components/banner/banner.component.css
+++ b/UI/src/app/components/banner/banner.component.css
--- a/UI/src/app/components/banner/banner.component.html
+++ b/UI/src/app/components/banner/banner.component.html
@ -0,0 +1,19 @@
+<style>
+    .banner {
+    /* The image used */
+    background-image:
+    url(1.jpg);
+    background-position: center;
+    background-size: cover;
+    }
+    
+</style>
+
+<div class="banner">
+    <br><br><br>
+    <div class="content">
+        <h1><span>Welcome to DailyCart</span><br>-Team Seattle<br> </h1>
+        <img src="https://www.pngall.com/wp-content/uploads/4/Grocery-PNG-Picture.png"  style="width:40%">
+    </div>
+    <br><br><br><br>
+</div>
--- a/UI/src/app/components/banner/banner.component.spec.ts
+++ b/UI/src/app/components/banner/banner.component.spec.ts
@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BannerComponent } from './banner.component';
+
+describe('BannerComponent', () => {
+  let component: BannerComponent;
+  let fixture: ComponentFixture<BannerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ BannerComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BannerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/UI/src/app/components/banner/banner.component.ts
+++ b/UI/src/app/components/banner/banner.component.ts
@ -0,0 +1,29 @@
+import { Component, OnInit } from '@angular/core';
+import { UserService } from 'src/app/auth/service/user.service';
+
+@Component({
+  selector: 'app-banner',
+  templateUrl: './banner.component.html',
+  styleUrls: ['./banner.component.css']
+})
+export class BannerComponent implements OnInit {
+
+  constructor(private userService:UserService) { }
+
+  ngOnInit(): void {
+    console.log(window.location.pathname)
+    this.userService.getDetails(window.sessionStorage.getItem("username")).subscribe(data => {
+      window.sessionStorage.setItem('userid', String(data.id));
+      console.log("j",data.id)
+    });
+    this.userService.getDetails(window.sessionStorage.getItem("username")).subscribe(data => {
+      window.sessionStorage.setItem('apartment', String(data.apartment));
+      console.log("j",data.apartment)
+    });
+    this.userService.getDetails(window.sessionStorage.getItem("username")).subscribe(data => {
+      window.sessionStorage.setItem('role', String(data.role));
+      console.log("j",data.role)
+    });
+  }
+
+}
--- a/UI/src/app/components/cart/cart.component.css
+++ b/UI/src/app/components/cart/cart.component.css
@ -0,0 +1,16 @@
+.item {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  
+  .btn-pay {
+    background-color: #C800Da;
+    border: 0;
+    color: #fff;
+    font-weight: 600;
+  }
+  
+  .fa-ticket {
+    color: #0e1fa1;
+  }
--- a/UI/src/app/components/cart/cart.component.html
+++ b/UI/src/app/components/cart/cart.component.html
@ -0,0 +1,278 @@
+<style>
+
+
+    *{
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+    }
+    body{
+        font-family: Helvetica;
+        -webkit-font-smoothing: antialiased;
+        background: rgba( 71, 147, 227, 1);
+    }
+    h2{
+        text-align: center;
+        font-size: 18px;
+        text-transform: uppercase;
+        letter-spacing: 1px;
+        color: white;
+        padding: 30px 0;
+    }
+    
+    /* Table Styles */
+    
+    .table-wrapper{
+        margin: 10px 70px 70px;
+        box-shadow: 0px 35px 50px rgba( 0, 0, 0, 0.2 );
+    }
+    
+    .fl-table {
+        border-radius: 5px;
+        font-size: 16px;
+        font-weight: normal;
+        border: none;
+        border-collapse: collapse;
+        width: 100%;
+        max-width: 100%;
+        white-space: nowrap;
+        background-color: white;
+    }
+    
+    .fl-table td, .fl-table th {
+        text-align: center;
+        padding: 8px;
+    }
+    
+    .fl-table td {
+        border-right: 1px solid #f8f8f8;
+        font-size: 12px;
+    }
+    
+    .fl-table thead th {
+        color: #ffffff;
+        background: #4FC3A1;
+    }
+    
+    
+    .fl-table thead th:nth-child(odd) {
+        color: #ffffff;
+        background: #324960;
+    }
+    
+    .fl-table tr:nth-child(even) {
+        background: #F8F8F8;
+    }
+    
+    /* Responsive */
+    
+    @media (max-width: 767px) {
+        .fl-table {
+            display: block;
+            width: 100%;
+        }
+        .table-wrapper:before{
+            content: "Scroll horizontally >";
+            display: block;
+            text-align: right;
+            font-size: 11px;
+            color: white;
+            padding: 0 0 10px;
+        }
+        .fl-table thead, .fl-table tbody, .fl-table thead th {
+            display: block;
+        }
+        .fl-table thead th:last-child{
+            border-bottom: none;
+        }
+        .fl-table thead {
+            float: left;
+        }
+        .fl-table tbody {
+           
+            position: relative;
+            overflow-x: auto;
+        }
+        .fl-table td, .fl-table th {
+            padding: 20px .625em .625em .625em;
+            height: 60px;
+            vertical-align: middle;
+            box-sizing: border-box;
+            overflow-x: hidden;
+            overflow-y: auto;
+            width: 120px;
+            font-size: 16px;
+            text-overflow: ellipsis;
+        }
+        .fl-table thead th {
+            text-align: left;
+            border-bottom: 1px solid #f7f7f9;
+        }
+        .fl-table tbody tr {
+            display: table-cell;
+        }
+        .fl-table tbody tr:nth-child(odd) {
+            background: none;
+        }
+        .fl-table tr:nth-child(even) {
+            background: transparent;
+        }
+        .fl-table tr td:nth-child(odd) {
+            background: #F8F8F8;
+            border-right: 1px solid #E6E4E4;
+        }
+        .fl-table tr td:nth-child(even) {
+            border-right: 1px solid #E6E4E4;
+        }
+        .fl-table tbody td {
+            display: block;
+            text-align: center;
+        }
+    }
+    
+        .banner {
+        /* The image used */
+        background-image:
+        url(1.jpg);
+        background-position: center;
+        background-size: cover;
+        }
+        .banner1 {
+        /* The image used */
+        background-image:
+        url(9.png);
+        background-position: center;
+        background-size: cover;
+        }
+    
+    
+    
+        .quantity {
+            
+        display: flex;
+        justify-content: center;
+    }
+    
+    .quantity button {
+        width: 35px;
+        height: 35px;
+        border: 1px solid #000;
+        color: #000;
+        border-radius: 0;
+        background: #fff
+    }
+    
+    .quantity input {
+        border: none;
+        border-top: 1px solid #000;
+        border-bottom: 1px solid #000;
+        text-align: center;
+        width: 100px;
+        font-size: 20px;
+        color: #000;
+        font-weight: 300;
+    }
+    
+    .total-price {
+        text-align: center;
+        font-size: 30px;
+        color: black;
+    }
+    
+    .total-price .fa-rupee {
+        display: inline-block;
+        font-size: 90%;
+        margin-right: 5px;
+    }
+    
+    @import url('https://fonts.googleapis.com/css?family=Lato:400,700,900|Open+Sans:300,400|Oswald:400,700');
+    * {
+        padding: 0;
+        margin: 0;
+        box-sizing: border-box;
+        font-family: 'Lato', sans-serif;
+        font-weight: normal;
+    }
+
+    .item {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.btn-pay {
+    background-color: #C800Da;
+    border: 0;
+    color: #fff;
+    font-weight: 600;
+}
+
+.fa-ticket {
+    color: #0e1fa1;
+}
+    </style>
+
+<!doctype html>
+<html lang="en">
+    
+<div class="banner">
+    <br><br><br><br><br>
+    <ng-container *ngIf="role=='User'">
+
+    </ng-container>
+    <ng-container *ngIf="cartdto.length!=0">
+        
+        <div class="table-wrapper">
+            <table class="fl-table">
+                <thead>
+                <tr>
+                    <th>S NO.</th>
+                    <th>IMAGE</th>
+                    <th>PRODUCT NAME</th>
+                    <th>PRICE</th>
+                    <th>QUANTITY</th>
+                    <th>TOTAL</th>
+                    <th>REMOVE</th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr *ngFor="let i of cartdto; let in=index;">
+                    <td>{{in+1}}</td>
+                    <td><img src="{{i.image}}" style="width:80px"></td>
+                    <td>{{i.pname}}</td>
+                    <td>₹<span id="price">{{i.price}}</span></td>
+                    <td><button (click)="dec(i,i.cid)">-</button>{{i.quantity}}<button (click)="inc(i,i.cid)">+</button></td>
+                    <td><b>₹ {{i.quantity*i.price}}</b></td>
+                    <td><button (click)=removeItem(i.cid)>REMOVE</button></td>
+                </tr>
+                <tr>
+                    <td colspan="4"></td>
+                    <td><button routerLink="/products">SHOP MORE</button></td>
+                    <td><button routerLink="/payment">PROCEED TO PAYMENT</button></td>
+                    <td><strong>Grand Total : ₹ {{grandTotal1}}</strong></td>
+                    
+                </tr>
+                
+                <tbody>
+            </table>
+        </div>
+    
+
+        
+
+       <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
+    </ng-container>
+        
+    <ng-container *ngIf="cartdto.length==0">
+        <div class="banner1">
+            <br>&nbsp;
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+            <img src="http://www.shitalexports.com/img/empty-cart.jpg" style="width:40%">
+        </div>
+        <br><br><br><br><br><br><br><br><br>
+    </ng-container>
+</div>
+</html>
--- a/UI/src/app/components/cart/cart.component.spec.ts
+++ b/UI/src/app/components/cart/cart.component.spec.ts
@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CartComponent } from './cart.component';
+
+describe('CartComponent', () => {
+  let component: CartComponent;
+  let fixture: ComponentFixture<CartComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CartComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CartComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/UI/src/app/components/cart/cart.component.ts
+++ b/UI/src/app/components/cart/cart.component.ts
@ -0,0 +1,139 @@
+import { Component, OnInit } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { Cartdto } from 'src/app/model/Cartdto';
+import { CartItem } from 'src/app/model/CartItem';
+import { Orderdto } from 'src/app/model/Orderdto';
+import { CartService } from 'src/app/service/cart.service';
+declare const calc:any
+@Component({
+  selector: 'app-cart',
+  templateUrl: './cart.component.html',
+  styleUrls: ['./cart.component.css']
+})
+export class CartComponent implements OnInit {
+
+  public products : any = [];
+  cartItem!:CartItem[];
+  cartdto!:Cartdto[];
+  orderdto!:Orderdto[];
+  cartdto2!:Cartdto[];
+  uid!:any;
+  pid!:any;
+  cid!:any;
+  oid!:any;
+  role!:any;
+  public grandTotal : number = 0;
+  public grandTotal1 : any;
+  qty!:any;
+  qty1!:any;
+  cartForm!:FormGroup
+  constructor(private cartService:CartService) {
+   }
+
+  ngOnInit(): void {
+    this.cartService.getProducts().subscribe(res=>{
+      this.products = res;
+      this.grandTotal = this.cartService.getTotalPrice();
+      
+    })
+    this.role = window.sessionStorage.getItem('role');
+    console.log(this.role);
+    this.uid = window.sessionStorage.getItem('userid');
+    this.cartService.getCartdto(this.uid).subscribe(res=>{
+      this.cartdto=res;   
+    })
+      
+    
+    this.uid = window.sessionStorage.getItem('userid');
+    this.cartService.getCartsum(this.uid).subscribe(res=>{
+      this.grandTotal1=res;   
+    })
+
+  }
+  removeItem(cid:number)
+  {
+    this.cartService.deleteCartItem(cid).subscribe(data => {
+      this.cartdto.forEach((i, index) => {
+        if (i.cid == cid) {
+          this.cartdto.splice(index, 1);
+          this.cartService.getCartsum(this.uid).subscribe(res=>{
+            this.grandTotal1=res;   
+          })
+        }
+      })
+    }, (err: any) => {
+      console.log(err);
+    })
+
+    this.cartService.deleteOrderItem(cid).subscribe(data => {
+      this.cartdto.forEach((i, index) => {
+        if (i.cid == cid) {
+          this.cartdto.splice(index, 1);
+        }
+      })
+    }, (err: any) => {
+      console.log(err);
+    })
+    
+  }
+  
+  
+  inc(prod:any,ccid:number){
+    
+      prod.quantity = prod.quantity + 1;
+      this.qty = prod.quantity
+      this.cid=ccid;
+      
+      console.log(this.qty,this.cid);
+      this.cartService.addquantity(this.cid,this.qty).subscribe(data=>{
+      this.qty1=data;
+      console.log(this.qty1);
+      this.uid = window.sessionStorage.getItem('userid');
+      this.cartService.getCartsum(this.uid).subscribe(res=>{
+      this.grandTotal1=res;   
+    })
+    
+    
+    })
+    
+    
+  }
+  dec(prod:any,ccid:number){
+    if(prod.quantity != 1)
+    {
+      prod.quantity = prod.quantity - 1;
+      this.qty = prod.quantity
+      this.cid=ccid;
+      
+      console.log(this.qty,this.cid);
+      this.cartService.addquantity(this.cid,this.qty).subscribe(data=>{
+      this.qty1=data;
+      console.log(this.qty1);
+      this.uid = window.sessionStorage.getItem('userid');
+      this.cartService.getCartsum(this.uid).subscribe(res=>{
+      this.grandTotal1=res;   
+    })
+    
+    })
+    }
+    
+  }
+  
+
+  addquantity(id:number,quantity:number)
+  {
+    this.qty = quantity
+    this.cid=id;
+    console.log(this.qty,this.cid);
+    this.cartService.addquantity(this.cid,this.qty).subscribe(data=>{
+      this.qty=data;
+      console.log(this.qty);
+    })
+  }
+
+  getMultiply(price:number, quantity:number) 
+  {
+    return price * quantity;
+  }
+
+}
--- a/UI/src/app/components/category/category.component.css
+++ b/UI/src/app/components/category/category.component.css
--- a/UI/src/app/components/category/category.component.html
+++ b/UI/src/app/components/category/category.component.html
@ -0,0 +1 @@
+<p>category works!</p>
--- a/UI/src/app/components/category/category.component.spec.ts
+++ b/UI/src/app/components/category/category.component.spec.ts
@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CategoryComponent } from './category.component';
+
+describe('CategoryComponent', () => {
+  let component: CategoryComponent;
+  let fixture: ComponentFixture<CategoryComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CategoryComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CategoryComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/UI/src/app/components/category/category.component.ts
+++ b/UI/src/app/components/category/category.component.ts
@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-category',
+  templateUrl: './category.component.html',
+  styleUrls: ['./category.component.css']
+})
+export class CategoryComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
--- a/UI/src/app/components/dairy/dairy.component.css
+++ b/UI/src/app/components/dairy/dairy.component.css
--- a/UI/src/app/components/dairy/dairy.component.html
+++ b/UI/src/app/components/dairy/dairy.component.html
@ -0,0 +1,170 @@
+<style>
+    .card {
+      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+      width: 250px;
+      margin: auto;
+      text-align: center;
+      font-family: arial;
+    }
+    
+    .price {
+      color: grey;
+      font-size: 22px;
+    }
+    
+    .card button {
+      border: none;
+      outline: 0;
+      padding: 12px;
+      color: white;
+      background-color: #000;
+      text-align: center;
+      cursor: pointer;
+      width: 100%;
+      font-size: 18px;
+    }
+    
+    .card button:hover {
+      opacity: 0.7;
+    }
+    
+    
+    *{
+      box-sizing: border-box;
+    }
+    
+    body {
+      font-family: Arial, Helvetica, sans-serif;
+    }
+    
+    /* Float four columns side by side */
+    .column {
+      float: left;
+      width: 25%;
+      padding: 0 10px;
+    }
+    
+    /* Remove extra left and right margins, due to padding in columns */
+    .row {margin: 0 -5px;}
+    
+    /* Clear floats after the columns */
+    .row:after {
+      content: "";
+      display: table;
+      clear: both;
+    }
+    
+    /* Style the counter cards */
+    .card {
+      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* this adds the "card" effect */
+      padding: 16px;
+      text-align: center;
+      background-color: #f1f1f1;
+    }
+    
+    /* Responsive columns - one column layout (vertical) on small screens */
+    @media screen and (max-width: 600px) {
+      .column {
+        width: 100%;
+        display: block;
+        margin-bottom: 20px;
+      }
+    }
+    
+    .grid-container {
+        display: grid;
+        grid-template-columns: auto auto auto;
+        width: 100%; 
+    }
+    .grid-item{
+        display: table-cell;
+        padding: 15px;
+    }
+    
+    .topnav {
+      background-color: #333;
+      overflow: hidden;
+    }
+    
+    /* Style the links inside the navigation bar */
+    .topnav a {
+      float: center;
+      color: #f2f2f2;
+      text-align: center;
+      padding: 14px 16px;
+      text-decoration: none;
+      font-size: 17px;
+    }
+    
+    /* Change the color of links on hover */
+    .topnav a:hover {
+      background-color: #ddd;
+      color: black;
+    }
+    
+    /* Add a color to the active/current link */
+    .topnav a.active {
+      background-color: #04AA6D;
+      color: white;
+    }
+    .banner {
+    /* The image used */
+    background-image:
+    url(1.jpg);
+    background-position: center;
+    background-size: cover;
+    }
+
+    </style>
+    
+    
+    
+     
+    
+            
+    <!DOCTYPE html>
+    <html lang="en">
+    
+    <body>
+      <div class="banner">
+    <div class="menu1" >
+    <ul>
+        <li><a href="products/fruits">FRUITS</a></li>
+        <li><a href="products/household">HOUSEHOLD</a></li>
+        <li><a href="products/dairy">DAIRY</a></li>
+        <li><a href="products/wholegrain">WHOLEGRAIN</a></li>
+        <li><a href="products/snacks">SNACKS</a></li>
+    </ul>
+    </div>
+           
+            <div class="grid-container" >
+                <div class="grid-item"*ngFor="let i of products">
+                    <div class="card">
+                        <img src={{i.image}}  style="width:80%">
+                        <h2 style="color:black">{{ i.name }}</h2>
+                        <p class="price">Rs. {{ i.price }}</p>
+                        <p><button>Add to Cart</button></p>
+                     </div>
+                </div>
+            </div>
+            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
+        </div>
+      </body>
+      </html>  
+         
+      
+    
+     
+      
+      
+    
+    
+            
+                   
+                
+         
+    
+    
+        
+    
+    
--- a/UI/src/app/components/dairy/dairy.component.spec.ts
+++ b/UI/src/app/components/dairy/dairy.component.spec.ts
@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DairyComponent } from './dairy.component';
+
+describe('DairyComponent', () => {
+  let component: DairyComponent;
+  let fixture: ComponentFixture<DairyComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DairyComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DairyComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/UI/src/app/components/dairy/dairy.component.ts
+++ b/UI/src/app/components/dairy/dairy.component.ts
@ -0,0 +1,27 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { Products } from 'src/app/model/Products';
+import { ProductsService } from 'src/app/service/products.service';
+
+@Component({
+  selector: 'app-dairy',
+  templateUrl: './dairy.component.html',
+  styleUrls: ['./dairy.component.css']
+})
+export class DairyComponent implements OnInit {
+
+  products:Products[];
+  name:string;
+
+  constructor(private productsService:ProductsService, private route:Router) { 
+    this.products=[];
+    this.name='Dairy';
+  }
+
+  ngOnInit(): void {
+    this.productsService.getProductsByCategory(this.name).subscribe(data=>{
+      this.products=data;
+    })
+  }
+
+}
--- a/UI/src/app/components/fruits/fruits.component.css
+++ b/UI/src/app/components/fruits/fruits.component.css
--- a/UI/src/app/components/fruits/fruits.component.html
+++ b/UI/src/app/components/fruits/fruits.component.html
@ -0,0 +1,171 @@
+<style>
+    .card {
+      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+      width: 250px;
+      margin: auto;
+      text-align: center;
+      font-family: arial;
+    }
+    
+    .price {
+      color: grey;
+      font-size: 22px;
+    }
+    
+    .card button {
+      border: none;
+      outline: 0;
+      padding: 12px;
+      color: white;
+      background-color: #000;
+      text-align: center;
+      cursor: pointer;
+      width: 100%;
+      font-size: 18px;
+    }
+    
+    .card button:hover {
+      opacity: 0.7;
+    }
+    
+    
+    *{
+      box-sizing: border-box;
+    }
+    
+    body {
+      font-family: Arial, Helvetica, sans-serif;
+    }
+    
+    /* Float four columns side by side */
+    .column {
+      float: left;
+      width: 25%;
+      padding: 0 10px;
+    }
+    
+    /* Remove extra left and right margins, due to padding in columns */
+    .row {margin: 0 -5px;}
+    
+    /* Clear floats after the columns */
+    .row:after {
+      content: "";
+      display: table;
+      clear: both;
+    }
+    
+    /* Style the counter cards */
+    .card {
+      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* this adds the "card" effect */
+      padding: 16px;
+      text-align: center;
+      background-color: #f1f1f1;
+    }
+    
+    /* Responsive columns - one column layout (vertical) on small screens */
+    @media screen and (max-width: 600px) {
+      .column {
+        width: 100%;
+        display: block;
+        margin-bottom: 20px;
+      }
+    }
+    
+    .grid-container {
+        display: grid;
+        grid-template-columns: auto auto auto;
+        width: 100%; 
+    }
+    .grid-item{
+        display: table-cell;
+        padding: 15px;
+    }
+    
+    .topnav {
+      background-color: #333;
+      overflow: hidden;
+    }
+    
+    /* Style the links inside the navigation bar */
+    .topnav a {
+      float: center;
+      color: #f2f2f2;
+      text-align: center;
+      padding: 14px 16px;
+      text-decoration: none;
+      font-size: 17px;
+    }
+    
+    /* Change the color of links on hover */
+    .topnav a:hover {
+      background-color: #ddd;
+      color: black;
+    }
+    
+    /* Add a color to the active/current link */
+    .topnav a.active {
+      background-color: #04AA6D;
+      color: white;
+    }
+    
+    .banner {
+    /* The image used */
+    background-image:
+    url(1.jpg);
+    background-position: center;
+    background-size: cover;
+    }
+
+    </style>
+    
+    
+    
+     
+    
+            
+    <!DOCTYPE html>
+    <html lang="en">
+    
+    <body>
+      <div class="banner">
+    <div class="menu1" >
+    <ul>
+        <li><a href="products/fruits">FRUITS</a></li>
+        <li><a href="products/household">HOUSEHOLD</a></li>
+        <li><a href="products/dairy">DAIRY</a></li>
+        <li><a href="products/wholegrain">WHOLEGRAIN</a></li>
+        <li><a href="products/snacks">SNACKS</a></li>
+    </ul>
+    </div>
+           
+            <div class="grid-container" >
+                <div class="grid-item"*ngFor="let i of products">
+                    <div class="card">
+                        <img src={{i.image}}  style="width:80%">
+                        <h2 style="color:black">{{ i.name }}</h2>
+                        <p class="price">Rs. {{ i.price }}</p>
+                        <p><button>Add to Cart</button></p>
+                     </div>
+                </div>
+            </div>
+            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
+          </div>
+      </body>
+      </html>  
+         
+      
+    
+     
+      
+      
+    
+    
+            
+                   
+                
+         
+    
+    
+        
+    
+    
--- a/UI/src/app/components/fruits/fruits.component.spec.ts
+++ b/UI/src/app/components/fruits/fruits.component.spec.ts
@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FruitsComponent } from './fruits.component';
+
+describe('FruitsComponent', () => {
+  let component: FruitsComponent;
+  let fixture: ComponentFixture<FruitsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ FruitsComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FruitsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/UI/src/app/components/fruits/fruits.component.ts
+++ b/UI/src/app/components/fruits/fruits.component.ts
@ -0,0 +1,27 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { Products } from 'src/app/model/Products';
+import { ProductsService } from 'src/app/service/products.service';
+
+@Component({
+  selector: 'app-fruits',
+  templateUrl: './fruits.component.html',
+  styleUrls: ['./fruits.component.css']
+})
+export class FruitsComponent implements OnInit {
+
+  products:Products[];
+  name:string;
+
+  constructor(private productsService:ProductsService, private route:Router) { 
+    this.products=[];
+    this.name='Fruits & Veggies';
+  }
+
+  ngOnInit(): void {
+    this.productsService.getProductsByCategory(this.name).subscribe(data=>{
+      this.products=data;
+    })
+  }
+
+}
--- a/UI/src/app/components/household/household.component.css
+++ b/UI/src/app/components/household/household.component.css
--- a/UI/src/app/components/household/household.component.html
+++ b/UI/src/app/components/household/household.component.html
@ -0,0 +1,170 @@
+<style>
+    .card {
+      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+      width: 250px;
+      margin: auto;
+      text-align: center;
+      font-family: arial;
+    }
+    
+    .price {
+      color: grey;
+      font-size: 22px;
+    }
+    
+    .card button {
+      border: none;
+      outline: 0;
+      padding: 12px;
+      color: white;
+      background-color: #000;
+      text-align: center;
+      cursor: pointer;
+      width: 100%;
+      font-size: 18px;
+    }
+    
+    .card button:hover {
+      opacity: 0.7;
+    }
+    
+    
+    *{
+      box-sizing: border-box;
+    }
+    
+    body {
+      font-family: Arial, Helvetica, sans-serif;
+    }
+    
+    /* Float four columns side by side */
+    .column {
+      float: left;
+      width: 25%;
+      padding: 0 10px;
+    }
+    
+    /* Remove extra left and right margins, due to padding in columns */
+    .row {margin: 0 -5px;}
+    
+    /* Clear floats after the columns */
+    .row:after {
+      content: "";
+      display: table;
+      clear: both;
+    }
+    
+    /* Style the counter cards */
+    .card {
+      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* this adds the "card" effect */
+      padding: 16px;
+      text-align: center;
+      background-color: #f1f1f1;
+    }
+    
+    /* Responsive columns - one column layout (vertical) on small screens */
+    @media screen and (max-width: 600px) {
+      .column {
+        width: 100%;
+        display: block;
+        margin-bottom: 20px;
+      }
+    }
+    
+    .grid-container {
+        display: grid;
+        grid-template-columns: auto auto auto;
+        width: 100%; 
+    }
+    .grid-item{
+        display: table-cell;
+        padding: 15px;
+    }
+    
+    .topnav {
+      background-color: #333;
+      overflow: hidden;
+    }
+    
+    /* Style the links inside the navigation bar */
+    .topnav a {
+      float: center;
+      color: #f2f2f2;
+      text-align: center;
+      padding: 14px 16px;
+      text-decoration: none;
+      font-size: 17px;
+    }
+    
+    /* Change the color of links on hover */
+    .topnav a:hover {
+      background-color: #ddd;
+      color: black;
+    }
+    
+    /* Add a color to the active/current link */
+    .topnav a.active {
+      background-color: #04AA6D;
+      color: white;
+    }
+    .banner {
+    /* The image used */
+    background-image:
+    url(1.jpg);
+    background-position: center;
+    background-size: cover;
+    }
+    
+    </style>
+    
+    
+    
+     
+    
+            
+    <!DOCTYPE html>
+    <html lang="en">
+    
+    <body>
+    <div class="banner">
+    <div class="menu1" >
+    <ul>
+        <li><a href="products/fruits">FRUITS</a></li>
+        <li><a href="products/household">HOUSEHOLD</a></li>
+        <li><a href="products/dairy">DAIRY</a></li>
+        <li><a href="products/wholegrain">WHOLEGRAIN</a></li>
+        <li><a href="products/snacks">SNACKS</a></li>
+    </ul>
+    </div>
+           
+            <div class="grid-container" >
+                <div class="grid-item"*ngFor="let i of products">
+                    <div class="card">
+                        <img src={{i.image}}  style="width:80%">
+                        <h2 style="color:black">{{ i.name }}</h2>
+                        <p class="price">Rs. {{ i.price }}</p>
+                        <p><button>Add to Cart</button></p>
+                     </div>
+                </div>
+            </div>
+            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
+          </div>
+      </body>
+      </html>  
+         
+      
+    
+     
+      
+      
+    
+    
+            
+                   
+                
+         
+    
+    
+        
+    
+    
--- a/UI/src/app/components/household/household.component.spec.ts
+++ b/UI/src/app/components/household/household.component.spec.ts
@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HouseholdComponent } from './household.component';
+
+describe('HouseholdComponent', () => {
+  let component: HouseholdComponent;
+  let fixture: ComponentFixture<HouseholdComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ HouseholdComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HouseholdComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/UI/src/app/components/household/household.component.ts
+++ b/UI/src/app/components/household/household.component.ts
@ -0,0 +1,26 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { Products } from 'src/app/model/Products';
+import { ProductsService } from 'src/app/service/products.service';
+
+@Component({
+  selector: 'app-household',
+  templateUrl: './household.component.html',
+  styleUrls: ['./household.component.css']
+})
+export class HouseholdComponent implements OnInit {
+
+  products:Products[];
+  name:string;
+
+  constructor(private productsService:ProductsService, private route:Router) { 
+    this.products=[];
+    this.name='Household';
+  }
+
+  ngOnInit(): void {
+    this.productsService.getProductsByCategory(this.name).subscribe(data=>{
+      this.products=data;
+    })
+  }
+}
--- a/UI/src/app/components/order/order.component.css
+++ b/UI/src/app/components/order/order.component.css
--- a/UI/src/app/components/order/order.component.html
+++ b/UI/src/app/components/order/order.component.html
@ -0,0 +1,273 @@
+<style>
+
+
+    *{
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+    }
+    body{
+        font-family: Helvetica;
+        -webkit-font-smoothing: antialiased;
+        background: rgba( 71, 147, 227, 1);
+    }
+    h2{
+        text-align: center;
+        font-size: 18px;
+        text-transform: uppercase;
+        letter-spacing: 1px;
+        color: white;
+        padding: 30px 0;
+    }
+    
+    /* Table Styles */
+    
+    .table-wrapper{
+        margin: 20px 200px 70px;
+        box-shadow: 0px 35px 50px rgba( 0, 0, 0, 0.2 );
+    }
+    
+    .fl-table {
+        border-radius: 5px;
+        font-size: 16px;
+        font-weight: normal;
+        border: none;
+        border-collapse: collapse;
+        width: 100%;
+        max-width: 100%;
+        white-space: nowrap;
+        background-color: white;
+    }
+    
+    .fl-table td, .fl-table th {
+        text-align: center;
+        padding: 8px;
+    }
+    
+    .fl-table td {
+        border-right: 1px solid #f8f8f8;
+        font-size: 12px;
+    }
+    
+    .fl-table thead th {
+        color: #ffffff;
+        background: #4FC3A1;
+    }
+    
+    
+    .fl-table thead th:nth-child(odd) {
+        color: #ffffff;
+        background: #324960;
+    }
+    
+    .fl-table tr:nth-child(even) {
+        background: #F8F8F8;
+    }
+    
+    /* Responsive */
+    
+    @media (max-width: 767px) {
+        .fl-table {
+            display: block;
+            width: 100%;
+        }
+        .table-wrapper:before{
+            content: "Scroll horizontally >";
+            display: block;
+            text-align: right;
+            font-size: 11px;
+            color: white;
+            padding: 0 0 10px;
+        }
+        .fl-table thead, .fl-table tbody, .fl-table thead th {
+            display: block;
+        }
+        .fl-table thead th:last-child{
+            border-bottom: none;
+        }
+        .fl-table thead {
+            float: left;
+        }
+        .fl-table tbody {
+           
+            position: relative;
+            overflow-x: auto;
+        }
+        .fl-table td, .fl-table th {
+            padding: 20px .625em .625em .625em;
+            height: 60px;
+            vertical-align: middle;
+            box-sizing: border-box;
+            overflow-x: hidden;
+            overflow-y: auto;
+            width: 120px;
+            font-size: 16px;
+            text-overflow: ellipsis;
+        }
+        .fl-table thead th {
+            text-align: left;
+            border-bottom: 1px solid #f7f7f9;
+        }
+        .fl-table tbody tr {
+            display: table-cell;
+        }
+        .fl-table tbody tr:nth-child(odd) {
+            background: none;
+        }
+        .fl-table tr:nth-child(even) {
+            background: transparent;
+        }
+        .fl-table tr td:nth-child(odd) {
+            background: #F8F8F8;
+            border-right: 1px solid #E6E4E4;
+        }
+        .fl-table tr td:nth-child(even) {
+            border-right: 1px solid #E6E4E4;
+        }
+        .fl-table tbody td {
+            display: block;
+            text-align: center;
+        }
+    }
+    
+        .banner {
+        /* The image used */
+        background-image:
+        url(1.jpg);
+        background-position: center;
+        background-size: cover;
+        }
+        .banner1 {
+        /* The image used */
+        background-image:
+        url(9.png);
+        background-position: center;
+        background-size: cover;
+        }
+    
+    
+    
+        .quantity {
+            
+        display: flex;
+        justify-content: center;
+    }
+    
+    .quantity button {
+        width: 35px;
+        height: 35px;
+        border: 1px solid #000;
+        color: #000;
+        border-radius: 0;
+        background: #fff
+    }
+    
+    .quantity input {
+        border: none;
+        border-top: 1px solid #000;
+        border-bottom: 1px solid #000;
+        text-align: center;
+        width: 100px;
+        font-size: 20px;
+        color: #000;
+        font-weight: 300;
+    }
+    
+    .total-price {
+        text-align: center;
+        font-size: 30px;
+        color: black;
+    }
+    
+    .total-price .fa-rupee {
+        display: inline-block;
+        font-size: 90%;
+        margin-right: 5px;
+    }
+    
+    @import url('https://fonts.googleapis.com/css?family=Lato:400,700,900|Open+Sans:300,400|Oswald:400,700');
+    * {
+        padding: 0;
+        margin: 0;
+        box-sizing: border-box;
+        font-family: 'Lato', sans-serif;
+        font-weight: normal;
+    }
+
+    .item {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.btn-pay {
+    background-color: #C800Da;
+    border: 0;
+    color: #fff;
+    font-weight: 600;
+}
+
+.fa-ticket {
+    color: #0e1fa1;
+}
+h1 {
+  text-align: center;
+}
+    </style>
+
+<div class="banner">
+    <br><br><br><br><br><br><br>
+    <ng-container *ngIf="orderdto.length!=0">
+    <h1>Congratulations your Order is Placed!</h1>
+        
+        <div class="table-wrapper">
+            <table class="fl-table">
+                
+                <tr *ngFor="let i of orderdto; let in=index">
+                    <th>ORDER NO : {{i.orderNumber}}</th>
+                    <th></th>
+                    <th><img src="{{i.image}}" style="width:80px"><br>{{i.pname}} @ ₹ {{i.price}}<br></th>
+                    <th>X</th>
+                    <th>{{i.quantity}} QTY</th>
+                    <th>₹ {{i.totalPrice}}</th>
+                    <th></th>
+                </tr>
+            
+                <tr>
+                    <th></th>
+                </tr>
+                <tr>
+                    <th></th>
+                    <th>{{orderdto.length}} ITEMS</th>
+                    <th></th>
+                    <th></th>
+                    <th></th>
+                    <th><strong text-align="right">PAYABLE AMOUNT : ₹ {{grandTotal}} <br><br> MODE : CASH ON DELIVERY <br><br>STATUS : DELIVERY BY TOMORROW</strong></th>
+                    <th></th>
+                </tr>
+                <tr>
+                    <th></th>
+                </tr>
+                
+                
+            </table>
+        </div>
+    
+
+        
+
+       <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
+    </ng-container>
+    <ng-container *ngIf="orderdto.length==0">
+        <div class="banner1">
+            <br>&nbsp;
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+            <img src="https://i.pinimg.com/originals/ff/3d/66/ff3d66d438ddff2c520db4d26fce8760.jpg" style="width:40%">
+        </div>
+        <br><br><br><br><br><br><br><br><br>
+    </ng-container>
+    
+</div>
--- a/UI/src/app/components/order/order.component.spec.ts
+++ b/UI/src/app/components/order/order.component.spec.ts
@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { OrderComponent } from './order.component';
+
+describe('OrderComponent', () => {
+  let component: OrderComponent;
+  let fixture: ComponentFixture<OrderComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ OrderComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(OrderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/UI/src/app/components/order/order.component.ts
+++ b/UI/src/app/components/order/order.component.ts
@ -0,0 +1,31 @@
+import { Component, OnInit } from '@angular/core';
+import { Orderdto } from 'src/app/model/Orderdto';
+import { CartService } from 'src/app/service/cart.service';
+declare const calc:any
+@Component({
+  selector: 'app-order',
+  templateUrl: './order.component.html',
+  styleUrls: ['./order.component.css']
+})
+export class OrderComponent implements OnInit {
+
+  public products : any = [];
+  orderdto!:Orderdto[];
+  public grandTotal : any;
+  uid!:any;
+  constructor(private cartService:CartService) { }
+
+  ngOnInit(): void {
+    this.uid = window.sessionStorage.getItem('userid');
+    this.cartService.getOrder(this.uid).subscribe(res=>{
+      this.orderdto = res;
+      
+    })
+    this.cartService.getordersumByUid(this.uid).subscribe(data=>{
+      this.grandTotal=data;
+    })
+  }
+  
+
+
+}
--- a/UI/src/app/components/payment/payment.component.css
+++ b/UI/src/app/components/payment/payment.component.css
--- a/UI/src/app/components/payment/payment.component.html
+++ b/UI/src/app/components/payment/payment.component.html
@ -0,0 +1,103 @@
+<Style>
+    a {
+  text-decoration: none;
+  font-size: 17px;
+  color: black;
+}
+body  
+{  
+    margin: 0;  
+    padding: 0;  
+    
+    font-family: 'Arial';  
+}  
+.login{  
+        width: 382px;  
+        overflow: hidden;  
+        margin: auto;  
+        margin: 20 0 0 450px;  
+        padding: 40px;  
+        background: #6abadeba;  
+        border-radius: 15px ;  
+          
+}  
+h2{  
+    
+    color: #ff7200;  
+    padding: 20px;  
+}  
+label{  
+    color: black;  
+    font-size: 17px;  
+}  
+#Uname{  
+    width: 300px;  
+    height: 30px;  
+    border: none;  
+    border-radius: 3px;  
+    padding-left: 8px;  
+}  
+#Pass{  
+    width: 300px;  
+    height: 30px;  
+    border: none;  
+    border-radius: 3px;  
+    padding-left: 8px;  
+      
+}  
+#log{  
+    width: 300px;  
+    height: 30px;  
+    border: none;  
+    border-radius: 17px;  
+    padding-left: 7px;  
+    color: #ff7200;  
+  
+  
+}  
+span{  
+    color: white;  
+    font-size: 17px;  
+}  
+a{  
+    float: right;  
+    background-color: grey;  
+}  
+
+.banner {
+    /* The image used */
+    background-image:
+    url(1.jpg);
+    background-position: center;
+    background-size: cover;
+    }
+</Style>
+  
+    <div class="banner"> 
+     <br><br><br><br><br><br>
+       <div class="login">    
+           <form id="login" >    
+           <h2 class="logo">SELECT PAYMENT!!</h2><br><br><br><br><br>
+           <label><b>GRAND TOTAL : ₹{{grandTotal1}}<br>    
+           </b> 
+           </label> 
+           <br>  
+           <label><b>PAYMENT METHOD<br>     
+           </b>    
+           </label>    
+           <select name="PAYMENT" id="Uname" formControlName="PAYMENT" >
+            <option value="Cash On Delivery">CASH ON DELIVERY</option>
+            <option value="Credit Card">CREDIT CARD</option>
+            <option value="Debit Card">DEBIT CARD</option>
+            <option value="Wallets">WALLETS</option>
+            <option value="UPI">UPI</option>
+           </select>
+           <br><br>    
+           <button (click)="deleteCart()"> PLACE ORDER </button>      
+           <br><br>  
+           </form>
+        </div> 
+      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
+    </div>
+
+  
--- a/UI/src/app/components/payment/payment.component.spec.ts
+++ b/UI/src/app/components/payment/payment.component.spec.ts
@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PaymentComponent } from './payment.component';
+
+describe('PaymentComponent', () => {
+  let component: PaymentComponent;
+  let fixture: ComponentFixture<PaymentComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PaymentComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PaymentComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/UI/src/app/components/payment/payment.component.ts
+++ b/UI/src/app/components/payment/payment.component.ts
@ -0,0 +1,87 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Cartdto } from 'src/app/model/Cartdto';
+import { Orderdto } from 'src/app/model/Orderdto';
+import { CartService } from 'src/app/service/cart.service';
+
+@Component({
+  selector: 'app-payment',
+  templateUrl: './payment.component.html',
+  styleUrls: ['./payment.component.css']
+})
+export class PaymentComponent implements OnInit {
+
+  public grandTotal : number = 0;
+  public grandTotal1 : any;
+  uid!:any;
+  order:any;
+  cartdto:any;
+  orderNumber:any;
+  constructor(private cartService:CartService,private route:Router) {
+    this.grandTotal = this.cartService.getTotalPrice();
+    this.uid = window.sessionStorage.getItem('userid');
+      this.cartService.getCartsum(this.uid).subscribe(res=>{
+      this.grandTotal1=res;   
+    })
+   }
+
+  ngOnInit(): void {
+    this.uid = window.sessionStorage.getItem('userid');
+    this.cartService.getCartdto(this.uid).subscribe(res=>{
+      this.cartdto=res;
+    })
+  }
+  deleteCart()
+  {
+    this.uid = window.sessionStorage.getItem('userid');
+    this.cartService.getCartsum(this.uid).subscribe(data=>{
+      this.cartService.total.next(data);
+    })
+    
+    this.cartService.getOrder(this.uid).subscribe(data=>{
+      console.log(data.length,':data length');
+      console.log(data,':6:30');
+      if(data.length==0){
+        this.orderNumber=1;
+      }
+      else{
+         var i = data.length-1; 
+        this.orderNumber=data[i].orderNumber+1;
+        console.log(data[i]);
+      }
+      console.log(this.orderNumber,':ordernumnow');
+      
+      window.sessionStorage.setItem("on",this.orderNumber);
+      this.cartService.num1.next(true);
+      console.log(window.sessionStorage.getItem("on"),':else');
+    })
+    
+       this.cartService.num1.subscribe(data=>{
+         if(data){
+          if(window.sessionStorage.getItem("on")){
+            console.log(window.sessionStorage.getItem("on"),': iNif')
+            var order:Orderdto={
+              orderNumber:window.sessionStorage.getItem("on"),
+            }
+           this.cartService.postOrder(order,this.uid).subscribe(data=>{
+             this.cartService.num.next(data);
+             console.log(data,': post');
+             
+           })
+         }
+         }
+       })
+       this.route.navigateByUrl('/order');
+       
+
+
+
+
+
+
+
+    //this.uid = window.sessionStorage.getItem('userid');
+    //this.cartService.deleteCart(this.uid).subscribe(data=>{})
+  }
+
+}
--- a/UI/src/app/components/products/products.component.css
+++ b/UI/src/app/components/products/products.component.css
--- a/UI/src/app/components/products/products.component.html
+++ b/UI/src/app/components/products/products.component.html
@ -0,0 +1,172 @@
+<style>
+.card {
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+  width: 250px;
+  margin: auto;
+  text-align: center;
+  font-family: arial;
+}
+
+.price {
+  color: grey;
+  font-size: 22px;
+}
+
+.card button {
+  border: none;
+  outline: 0;
+  padding: 12px;
+  color: white;
+  background-color: #000;
+  text-align: center;
+  cursor: pointer;
+  width: 100%;
+  font-size: 18px;
+}
+
+.card button:hover {
+  opacity: 0.7;
+}
+
+
+*{
+  box-sizing: border-box;
+}
+
+body {
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+/* Float four columns side by side */
+.column {
+  float: left;
+  width: 25%;
+  padding: 0 10px;
+}
+
+/* Remove extra left and right margins, due to padding in columns */
+.row {margin: 0 -5px;}
+
+/* Clear floats after the columns */
+.row:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+/* Style the counter cards */
+.card {
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* this adds the "card" effect */
+  padding: 16px;
+  text-align: center;
+  background-color: #f1f1f1;
+}
+
+/* Responsive columns - one column layout (vertical) on small screens */
+@media screen and (max-width: 600px) {
+  .column {
+    width: 100%;
+    display: block;
+    margin-bottom: 20px;
+  }
+}
+
+.grid-container {
+    display: grid;
+    grid-template-columns: auto auto auto auto;
+    width: 100%; 
+}
+.grid-item{
+    display: table-cell;
+    padding: 15px;
+}
+
+.topnav {
+  background-color: #333;
+  overflow: hidden;
+}
+
+/* Style the links inside the navigation bar */
+.topnav a {
+  float: center;
+  color: #f2f2f2;
+  text-align: center;
+  padding: 14px 16px;
+  text-decoration: none;
+  font-size: 17px;
+}
+
+/* Change the color of links on hover */
+.topnav a:hover {
+  background-color: #ddd;
+  color: black;
+}
+
+/* Add a color to the active/current link */
+.topnav a.active {
+  background-color: #04AA6D;
+  color: white;
+}
+
+
+
+    .banner {
+    /* The image used */
+    background-image:
+    url(1.jpg);
+    background-position: center;
+    background-size: cover;
+    }
+
+
+</style>
+
+
+
+ 
+
+        
+<!DOCTYPE html>
+<html lang="en">
+
+<body>
+<div class="banner">
+<div class="menu1" >
+<ul>
+  <li><a routerLink="fruits">FRUITS</a></li>
+  <li><a routerLink="household">HOUSEHOLD</a></li>
+  <li><a routerLink="dairy">DAIRY</a></li>
+  <li><a routerLink="wholegrain">WHOLEGRAIN</a></li>
+  <li><a routerLink="snacks">SNACKS</a></li>
+</ul>
+</div>
+       
+        <div class="grid-container" >
+            <div class="grid-item"*ngFor="let i of products">
+                <div class="card">
+                    <img src={{i.image}}  style="width:80%">
+                    <h2 style="color:black">{{ i.name }}</h2>
+                    <p class="price">Rs. {{ i.price }}</p>
+                    <p><button (click)=addtoCart1(i.id) (click)=addtoCart(i)>Add to Cart</button></p>
+                 </div>
+            </div>
+        </div>
+</div>
+  </body>
+  </html>  
+     
+  
+
+ 
+  
+  
+
+
+        
+               
+            
+     
+
+
+    
+
--- a/UI/src/app/components/products/products.component.spec.ts
+++ b/UI/src/app/components/products/products.component.spec.ts
@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProductsComponent } from './products.component';
+
+describe('ProductsComponent', () => {
+  let component: ProductsComponent;
+  let fixture: ComponentFixture<ProductsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ProductsComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProductsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/UI/src/app/components/products/products.component.ts
+++ b/UI/src/app/components/products/products.component.ts
@ -0,0 +1,44 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { CartItem } from 'src/app/model/CartItem';
+import { Products } from 'src/app/model/Products';
+import { CartService } from 'src/app/service/cart.service';
+import { ProductsService } from 'src/app/service/products.service';
+
+@Component({
+  selector: 'app-products',
+  templateUrl: './products.component.html',
+  styleUrls: ['./products.component.css']
+})
+export class ProductsComponent implements OnInit {
+
+  products:Products[];
+  uid!:any;
+  pid!:any;
+
+  constructor(private productsService:ProductsService, private cartService:CartService, private route: Router) 
+  {
+    this.products=[];
+   }
+  ngOnInit(): void {
+    this.productsService.getProducts().subscribe(data=>{
+      this.products=data;
+      
+      this.products.forEach((a:any)=>{
+        Object.assign(a,{quantity:1,total:a.price});
+      }); 
+    })
+  }
+  addtoCart(item:any)
+  {
+    this.cartService.addtoCart(item);
+  }
+  addtoCart1(pid:any)
+  {
+    this.uid = window.sessionStorage.getItem('userid');
+    this.cartService.postCart(this.uid, pid).subscribe(data=>{
+      console.log('added');
+    });  
+     
+  }
+}
--- a/UI/src/app/components/profile/profile.component.css
+++ b/UI/src/app/components/profile/profile.component.css
--- a/UI/src/app/components/profile/profile.component.html
+++ b/UI/src/app/components/profile/profile.component.html
@ -0,0 +1,138 @@
+<style>
+    .card {
+      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+      width: 350px;
+      margin: auto;
+      text-align: center;
+      font-family: arial;
+    }
+    
+    .price {
+      color: grey;
+      font-size: 22px;
+    }
+    
+    .card button {
+      border: none;
+      outline: 0;
+      padding: 12px;
+      color: white;
+      background-color: #000;
+      text-align: center;
+      cursor: pointer;
+      width: 100%;
+      font-size: 18px;
+    }
+    
+    .card button:hover {
+      opacity: 0.7;
+    }
+    
+    
+    *{
+      box-sizing: border-box;
+    }
+    
+    body {
+      font-family: Arial, Helvetica, sans-serif;
+    }
+    
+    /* Float four columns side by side */
+    .column {
+      float: left;
+      width: 25%;
+      padding: 0 10px;
+    }
+    
+    /* Remove extra left and right margins, due to padding in columns */
+    .row {margin: 0 -5px;}
+    
+    /* Clear floats after the columns */
+    .row:after {
+      content: "";
+      display: table;
+      clear: both;
+    }
+    
+    /* Style the counter cards */
+    .card {
+      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* this adds the "card" effect */
+      padding: 14px;
+      text-align: center;
+      background-color: #f1f1f1;
+    }
+    
+    /* Responsive columns - one column layout (vertical) on small screens */
+    @media screen and (max-width: 600px) {
+      .column {
+        width: 100%;
+        display: block;
+        margin-bottom: 20px;
+      }
+    }
+    
+    .grid-container {
+        display: grid;
+        grid-template-columns: auto auto auto auto;
+        width: 100%; 
+    }
+    .grid-item{
+        display: table-cell;
+        padding: 15px;
+    }
+    
+    .topnav {
+      background-color: #333;
+      overflow: hidden;
+    }
+    
+    /* Style the links inside the navigation bar */
+    .topnav a {
+      float: center;
+      color: #f2f2f2;
+      text-align: center;
+      padding: 14px 16px;
+      text-decoration: none;
+      font-size: 17px;
+    }
+    
+    /* Change the color of links on hover */
+    .topnav a:hover {
+      background-color: #ddd;
+      color: black;
+    }
+    
+    /* Add a color to the active/current link */
+    .topnav a.active {
+      background-color: #04AA6D;
+      color: white;
+    }
+    
+    
+    
+        .banner {
+        /* The image used */
+        background-image:
+        url(1.jpg);
+        background-position: center;
+        background-size: cover;
+        }
+    
+    
+    </style>
+
+<body>
+<div class="banner">
+<br><br><br><br><br>
+<div class="card">
+    <img src="https://www.kindpng.com/picc/m/78-785827_user-profile-avatar-login-account-male-user-icon.png"  style="width:100%">
+    
+    <h2 style="color:black">{{user.name}}</h2><br>
+    <p>Username : {{user.username}}</p><br>
+    <p class="price">Account Type : {{user.role}}</p><br>
+    <p class="price">Address : {{user.apartment}}</p><br>
+ </div>
+ <br><br><br><br><br><br><br><br><br><br>
+</div>
+</body>
+
--- a/UI/src/app/components/profile/profile.component.spec.ts
+++ b/UI/src/app/components/profile/profile.component.spec.ts
@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProfileComponent } from './profile.component';
+
+describe('ProfileComponent', () => {
+  let component: ProfileComponent;
+  let fixture: ComponentFixture<ProfileComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ProfileComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProfileComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/UI/src/app/components/profile/profile.component.ts
+++ b/UI/src/app/components/profile/profile.component.ts
@ -0,0 +1,28 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { User } from 'src/app/model/User';
+import { ProductsService } from 'src/app/service/products.service';
+
+@Component({
+  selector: 'app-profile',
+  templateUrl: './profile.component.html',
+  styleUrls: ['./profile.component.css']
+})
+export class ProfileComponent implements OnInit {
+
+  user!:User
+  uid!:any;
+  constructor(private actRoute : ActivatedRoute,private productService : ProductsService,private route: Router) 
+  {
+   }
+  
+ 
+  ngOnInit(): void {
+    this.actRoute.paramMap.subscribe(params => {this.uid = params.get('uid')});
+    this.productService.getUserById(this.uid).subscribe(data=>{
+      this.user=data;
+    })
+  }
+  
+
+}
--- a/UI/src/app/components/snacks/snacks.component.css
+++ b/UI/src/app/components/snacks/snacks.component.css
--- a/UI/src/app/components/snacks/snacks.component.html
+++ b/UI/src/app/components/snacks/snacks.component.html
@ -0,0 +1,172 @@
+<style>
+    .card {
+      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+      width: 250px;
+      margin: auto;
+      text-align: center;
+      font-family: arial;
+    }
+    
+    .price {
+      color: grey;
+      font-size: 22px;
+    }
+    
+    .card button {
+      border: none;
+      outline: 0;
+      padding: 12px;
+      color: white;
+      background-color: #000;
+      text-align: center;
+      cursor: pointer;
+      width: 100%;
+      font-size: 18px;
+    }
+    
+    .card button:hover {
+      opacity: 0.7;
+    }
+    
+    
+    *{
+      box-sizing: border-box;
+    }
+    
+    body {
+      font-family: Arial, Helvetica, sans-serif;
+    }
+    
+    /* Float four columns side by side */
+    .column {
+      float: left;
+      width: 25%;
+      padding: 0 10px;
+    }
+    
+    /* Remove extra left and right margins, due to padding in columns */
+    .row {margin: 0 -5px;}
+    
+    /* Clear floats after the columns */
+    .row:after {
+      content: "";
+      display: table;
+      clear: both;
+    }
+    
+    /* Style the counter cards */
+    .card {
+      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* this adds the "card" effect */
+      padding: 16px;
+      text-align: center;
+      background-color: #f1f1f1;
+    }
+    
+    /* Responsive columns - one column layout (vertical) on small screens */
+    @media screen and (max-width: 600px) {
+      .column {
+        width: 100%;
+        display: block;
+        margin-bottom: 20px;
+      }
+    }
+    
+    .grid-container {
+        display: grid;
+        grid-template-columns: auto auto auto;
+        width: 100%; 
+    }
+    .grid-item{
+        display: table-cell;
+        padding: 15px;
+    }
+    
+    .topnav {
+      background-color: #333;
+      overflow: hidden;
+    }
+    
+    /* Style the links inside the navigation bar */
+    .topnav a {
+      float: center;
+      color: #f2f2f2;
+      text-align: center;
+      padding: 14px 16px;
+      text-decoration: none;
+      font-size: 17px;
+    }
+    
+    /* Change the color of links on hover */
+    .topnav a:hover {
+      background-color: #ddd;
+      color: black;
+    }
+    
+    /* Add a color to the active/current link */
+    .topnav a.active {
+      background-color: #04AA6D;
+      color: white;
+    }
+
+    .banner {
+    /* The image used */
+    background-image:
+    url(1.jpg);
+    background-position: center;
+    background-size: cover;
+    }
+
+    
+    </style>
+    
+    
+    
+     
+    
+            
+    <!DOCTYPE html>
+    <html lang="en">
+    
+    <body>
+    <div class="banner">
+    <div class="menu1" >
+    <ul>
+        <li><a href="products/fruits">FRUITS</a></li>
+        <li><a href="products/household">HOUSEHOLD</a></li>
+        <li><a href="products/dairy">DAIRY</a></li>
+        <li><a href="products/wholegrain">WHOLEGRAIN</a></li>
+        <li><a href="products/snacks">SNACKS</a></li>
+    </ul>
+    </div>
+           
+            <div class="grid-container" >
+                <div class="grid-item"*ngFor="let i of products">
+                    <div class="card">
+                        <img src={{i.image}}  style="width:80%">
+                        <h2 style="color:black">{{ i.name }}</h2>
+                        <p class="price">Rs. {{ i.price }}</p>
+                        <p><button>Add to Cart</button></p>
+                     </div>
+                </div>
+            </div>
+            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
+    </div>
+      </body>
+      </html>  
+         
+      
+    
+     
+      
+      
+    
+    
+            
+                   
+                
+         
+    
+    
+        
+    
+    
--- a/UI/src/app/components/snacks/snacks.component.spec.ts
+++ b/UI/src/app/components/snacks/snacks.component.spec.ts
@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SnacksComponent } from './snacks.component';
+
+describe('SnacksComponent', () => {
+  let component: SnacksComponent;
+  let fixture: ComponentFixture<SnacksComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SnacksComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SnacksComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/UI/src/app/components/snacks/snacks.component.ts
+++ b/UI/src/app/components/snacks/snacks.component.ts
@ -0,0 +1,26 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { Products } from 'src/app/model/Products';
+import { ProductsService } from 'src/app/service/products.service';
+
+@Component({
+  selector: 'app-snacks',
+  templateUrl: './snacks.component.html',
+  styleUrls: ['./snacks.component.css']
+})
+export class SnacksComponent implements OnInit {
+
+  products:Products[];
+  name:string;
+
+  constructor(private productsService:ProductsService, private route:Router) { 
+    this.products=[];
+    this.name='Snacks';
+  }
+
+  ngOnInit(): void {
+    this.productsService.getProductsByCategory(this.name).subscribe(data=>{
+      this.products=data;
+    })
+  }
+}
--- a/UI/src/app/components/wholegrain/wholegrain.component.css
+++ b/UI/src/app/components/wholegrain/wholegrain.component.css
--- a/UI/src/app/components/wholegrain/wholegrain.component.html
+++ b/UI/src/app/components/wholegrain/wholegrain.component.html
@ -0,0 +1,172 @@
+<style>
+    .card {
+      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+      width: 250px;
+      margin: auto;
+      text-align: center;
+      font-family: arial;
+    }
+    
+    .price {
+      color: grey;
+      font-size: 22px;
+    }
+    
+    .card button {
+      border: none;
+      outline: 0;
+      padding: 12px;
+      color: white;
+      background-color: #000;
+      text-align: center;
+      cursor: pointer;
+      width: 100%;
+      font-size: 18px;
+    }
+    
+    .card button:hover {
+      opacity: 0.7;
+    }
+    
+    
+    *{
+      box-sizing: border-box;
+    }
+    
+    body {
+      font-family: Arial, Helvetica, sans-serif;
+    }
+    
+    /* Float four columns side by side */
+    .column {
+      float: left;
+      width: 25%;
+      padding: 0 10px;
+    }
+    
+    /* Remove extra left and right margins, due to padding in columns */
+    .row {margin: 0 -5px;}
+    
+    /* Clear floats after the columns */
+    .row:after {
+      content: "";
+      display: table;
+      clear: both;
+    }
+    
+    /* Style the counter cards */
+    .card {
+      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* this adds the "card" effect */
+      padding: 16px;
+      text-align: center;
+      background-color: #f1f1f1;
+    }
+    
+    /* Responsive columns - one column layout (vertical) on small screens */
+    @media screen and (max-width: 600px) {
+      .column {
+        width: 100%;
+        display: block;
+        margin-bottom: 20px;
+      }
+    }
+    
+    .grid-container {
+        display: grid;
+        grid-template-columns: auto auto auto;
+        width: 100%; 
+    }
+    .grid-item{
+        display: table-cell;
+        padding: 15px;
+    }
+    
+    .topnav {
+      background-color: #333;
+      overflow: hidden;
+    }
+    
+    /* Style the links inside the navigation bar */
+    .topnav a {
+      float: center;
+      color: #f2f2f2;
+      text-align: center;
+      padding: 14px 16px;
+      text-decoration: none;
+      font-size: 17px;
+    }
+    
+    /* Change the color of links on hover */
+    .topnav a:hover {
+      background-color: #ddd;
+      color: black;
+    }
+    
+    /* Add a color to the active/current link */
+    .topnav a.active {
+      background-color: #04AA6D;
+      color: white;
+    }
+
+    .banner {
+    /* The image used */
+    background-image:
+    url(1.jpg);
+    background-position: center;
+    background-size: cover;
+    }
+
+    
+    </style>
+    
+    
+    
+     
+    
+            
+    <!DOCTYPE html>
+    <html lang="en">
+    
+    <body>
+      <div class="banner">
+    <div class="menu1" >
+    <ul>
+        <li><a href="products/fruits">FRUITS</a></li>
+        <li><a href="products/household">HOUSEHOLD</a></li>
+        <li><a href="products/dairy">DAIRY</a></li>
+        <li><a href="products/wholegrain">WHOLEGRAIN</a></li>
+        <li><a href="products/snacks">SNACKS</a></li>
+    </ul>
+    </div>
+           
+            <div class="grid-container" >
+                <div class="grid-item"*ngFor="let i of products">
+                    <div class="card">
+                        <img src={{i.image}}  style="width:80%">
+                        <h2 style="color:black">{{ i.name }}</h2>
+                        <p class="price">Rs. {{ i.price }}</p>
+                        <p><button>Add to Cart</button></p>
+                     </div>
+                </div>
+            </div>
+            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
+          </div>
+      </body>
+      </html>  
+         
+      
+    
+     
+      
+      
+    
+    
+            
+                   
+                
+         
+    
+    
+        
+    
+    
--- a/UI/src/app/components/wholegrain/wholegrain.component.spec.ts
+++ b/UI/src/app/components/wholegrain/wholegrain.component.spec.ts
@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WholegrainComponent } from './wholegrain.component';
+
+describe('WholegrainComponent', () => {
+  let component: WholegrainComponent;
+  let fixture: ComponentFixture<WholegrainComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ WholegrainComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(WholegrainComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/UI/src/app/components/wholegrain/wholegrain.component.ts
+++ b/UI/src/app/components/wholegrain/wholegrain.component.ts
@ -0,0 +1,27 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { Products } from 'src/app/model/Products';
+import { ProductsService } from 'src/app/service/products.service';
+
+@Component({
+  selector: 'app-wholegrain',
+  templateUrl: './wholegrain.component.html',
+  styleUrls: ['./wholegrain.component.css']
+})
+export class WholegrainComponent implements OnInit {
+
+  products:Products[];
+  name:string;
+
+  constructor(private productsService:ProductsService, private route:Router) { 
+    this.products=[];
+    this.name='Whole Grain';
+  }
+
+  ngOnInit(): void {
+    this.productsService.getProductsByCategory(this.name).subscribe(data=>{
+      this.products=data;
+    })
+  }
+
+}
--- a/UI/src/app/model/CartItem.ts
+++ b/UI/src/app/model/CartItem.ts
@ -0,0 +1,25 @@
+export class CartItem{
+    id?: number;
+    quantity?:number;
+    total?:number;
+    product?:Products;
+    user?:User;
+
+}
+export class Products{
+    id?:number;
+    name?:string;
+    price?:number;
+    rating?:number;
+    image?:string;
+    quantity?:number;
+    totalprice?:number;
+}
+export class User{ 
+    id? :any;
+    name?:number;
+    username : any;
+    password : string ='';
+    role?:string;
+    apartment?:string;
+}
--- a/UI/src/app/model/Cartdto.ts
+++ b/UI/src/app/model/Cartdto.ts
@ -0,0 +1,16 @@
+export class Cartdto
+{
+    cid?:any;
+	quantity?:any;
+	totalPrice?:any;
+	
+	pid?:number;
+	image?:string;
+	pname?:string;
+	price?:any;
+	
+	uid?:number;
+	uname?:string;
+	role?:string;
+	apartment?:string;
+}
--- a/UI/src/app/model/Orderdto.ts
+++ b/UI/src/app/model/Orderdto.ts
@ -0,0 +1,17 @@
+export class Orderdto
+{
+	orderNumber?:any;
+    cid?:any;
+	quantity?:any;
+	totalPrice?:any;
+	
+	pid?:number;
+	image?:string;
+	pname?:string;
+	price?:any;
+	
+	uid?:number;
+	uname?:string;
+	role?:string;
+	apartment?:string;
+}
--- a/UI/src/app/model/Products.ts
+++ b/UI/src/app/model/Products.ts
@ -0,0 +1,10 @@
+export class Products
+{
+    id?:number;
+    name?:string;
+    price?:number;
+    rating?:number;
+    image?:string;
+    quantity?:number;
+    totalprice?:number;
+}
--- a/UI/src/app/model/User.ts
+++ b/UI/src/app/model/User.ts
@ -0,0 +1,8 @@
+export class User{ 
+    id? :any;
+    name?:number;
+    username : any;
+    password : string ='';
+    role?:string;
+    apartment?:string;
+}
--- a/UI/src/app/service/cart.service.spec.ts
+++ b/UI/src/app/service/cart.service.spec.ts
@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { CartService } from './cart.service';
+
+describe('CartService', () => {
+  let service: CartService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(CartService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
--- a/UI/src/app/service/cart.service.ts
+++ b/UI/src/app/service/cart.service.ts
@ -0,0 +1,136 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { Cartdto } from '../model/Cartdto';
+import { CartItem } from '../model/CartItem';
+import { Orderdto } from '../model/Orderdto';
+import { Products } from '../model/Products';
+import { User } from '../model/User';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class CartService {
+
+  public cartItemList : any=[];
+  cartItem!:CartItem;
+  public cartdto! : Cartdto[];
+  public orderdto! : Orderdto[];
+  public productList = new BehaviorSubject<any>([]);
+  order = new BehaviorSubject<Orderdto>({});
+  num=new BehaviorSubject<number>(0);
+  num1=new BehaviorSubject<boolean>(false);
+
+  total=new BehaviorSubject<number>(0);
+  
+
+  path : string = 'http://localhost:8001/api1';
+
+  constructor(private httpClient:HttpClient) { }
+
+  public postCart(uid:number,pid:number):Observable<CartItem[]>{
+    let get_api=this.path + '/cart/'+uid+'/'+pid;
+    this.cartItem= {};
+    return this.httpClient.post<CartItem[]>(get_api,this.cartItem);
+  }
+
+  public getCart(uid:number):Observable<Cartdto[]>{
+    let get_api=this.path + '/cart/'+uid;
+    return this.httpClient.get<Cartdto[]>(get_api);
+  }
+
+  public getCartdto(uid:number):Observable<Cartdto[]>{
+    let get_api=this.path + '/cartdto/'+uid;
+    this.cartItem= {};
+    return this.httpClient.get<Cartdto[]>(get_api);
+  }
+
+  public addquantity(cid:number,quantity:number):Observable<Cartdto[]>{
+    let get_api=this.path + '/cartput/'+cid+'/'+quantity;
+    return this.httpClient.post<Cartdto[]>(get_api,this.cartItem);
+  }
+  public deleteCartItem(cid:number):Observable<any>{
+    let api=this.path+'/cart/'+cid;
+    return this.httpClient.delete<any>(api);
+  }
+
+  public deleteCart(uid:number):Observable<any>{
+    let api=this.path+'/usercart/'+uid;
+    return this.httpClient.delete<any>(api);
+  }
+
+  public getCartsum(uid:number):Observable<any>{
+    let get_api=this.path + '/cartsum/'+uid;
+    this.cartItem= {};
+    return this.httpClient.post<any>(get_api,this.cartItem);
+  }
+
+  public postOrder(order:Orderdto,uid:number):Observable<any>{
+    let get_api=this.path + '/order/'+uid;
+    return this.httpClient.post<any>(get_api,order);
+  }
+
+  public getOrder(uid:number):Observable<any>{
+    let get_api=this.path + '/orderdto/'+uid;
+    return this.httpClient.get<any>(get_api);
+  }
+
+  public deleteOrderItem(cid:number):Observable<any>{
+    let api=this.path+'/order/'+cid;
+    return this.httpClient.delete<any>(api);
+  }
+
+  public getordersum(uid:number,onid:number):Observable<any>{
+    let get_api=this.path + '/ordersum/'+uid+'/'+onid;
+    return this.httpClient.get<any>(get_api);
+  }
+
+  public getordersumByUid(uid:number):Observable<any>{
+    let get_api=this.path + '/orderuid/'+uid;
+    return this.httpClient.get<any>(get_api);
+  }
+  
+
+  public addquantityOrder(cid:number,quantity:number):Observable<Orderdto[]>{
+    let get_api=this.path + '/orderput/'+cid+'/'+quantity;
+    return this.httpClient.post<Orderdto[]>(get_api,this.cartItem);
+  }
+
+
+  getProducts()
+  {
+    return this.productList.asObservable();
+  }
+
+  setProduct(product : any)
+  {
+    this.cartItemList.push(...product)
+    this.productList.next(product)
+  }
+
+  addtoCart(product : any)
+  {
+    this.cartItemList.push(product);
+    this.productList.next(this.cartItemList);
+    this.getTotalPrice();
+  }
+
+  getTotalPrice() : number{
+    let grandTotal = 0;
+   this.cartItemList.map((a:any)=>{
+     a.total= a.price*a.quantity;
+     grandTotal+=a.total;
+   })
+   return grandTotal;
+  }
+ 
+  removeCartItem(product: any)
+  {
+    this.cartItemList.map((a:any,index:any)=>{
+      if(product.id===a.id)
+      {
+        this.cartItemList.splice(index,1);
+      }
+    })
+  }
+}
--- a/UI/src/app/service/products.service.spec.ts
+++ b/UI/src/app/service/products.service.spec.ts
@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ProductsService } from './products.service';
+
+describe('ProductsService', () => {
+  let service: ProductsService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ProductsService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
--- a/UI/src/app/service/products.service.ts
+++ b/UI/src/app/service/products.service.ts
@ -0,0 +1,37 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+
+import { Products } from '../model/Products';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ProductsService {
+  path : string = 'http://localhost:8001/api1';
+
+  constructor(private httpClient:HttpClient) { }
+
+  public getProducts():Observable<Products[]>{
+    let products_get_api=this.path + '/product';
+        return this.httpClient.get<Products[]>(products_get_api);
+  }
+  public getProductsByCategory(name:string):Observable<Products[]>{
+    let products_get_api=this.path + '/product/category/'+name;
+        return this.httpClient.get<Products[]>(products_get_api);
+  }
+  
+  
+  public getCart(uid:number):Observable<Products[]>{
+    let products_get_api=this.path + '/product/'+uid;
+    return this.httpClient.get<Products[]>(products_get_api);
+  }
+  public getUserById(uid:number):Observable<any>{
+    let products_get_api=this.path + '/user/'+uid;
+    return this.httpClient.get<any>(products_get_api)
+  }
+  public getIdbyUser(username:string):Observable<any>{
+    let products_get_api=this.path + '/userid/'+username;
+    return this.httpClient.get<any>(products_get_api)
+  }
+}
--- a/UI/src/assets/.gitkeep
+++ b/UI/src/assets/.gitkeep
--- a/UI/src/assets/js/main.js
+++ b/UI/src/assets/js/main.js
@ -0,0 +1,10 @@
+function calc() 
+{
+  var price = document.getElementById("price").innerHTML;
+  var quantity = document.getElementById("num").value;
+  var total = parseFloat(price) * quantity
+  if (!isNaN(total))
+    document.getElementById("total").innerHTML = total
+
+ 
+}
--- a/UI/src/environments/environment.prod.ts
+++ b/UI/src/environments/environment.prod.ts
@ -0,0 +1,3 @@
+export const environment = {
+  production: true
+};