Add App1 UI source files

Components/App.razor

@@ -0,0 +1,20 @@
+
+
+<CascadingAuthenticationState>
+    <Router AppAssembly="@typeof(Program).Assembly">
+        <Found Context="routeData">
+            <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
+
+                <NotAuthorized>
+                    You are not authorized to view this content, Please <a class="btn btn-primary" href="/SignIn">Sign
+                        In</a>
+                </NotAuthorized>
+            </AuthorizeRouteView>
+        </Found>
+        <NotFound>
+            <LayoutView Layout="@typeof(MainLayout)">
+                <p>Sorry, there's nothing at this address.</p>
+            </LayoutView>
+        </NotFound>
+    </Router>
+</CascadingAuthenticationState>

Components/Layout/MainLayout.razor

@@ -0,0 +1,17 @@
+@inherits LayoutComponentBase
+
+<MudThemeProvider />
+<MudDialogProvider />
+<MudSnackbarProvider />
+
+<MudLayout>
+    <MudAppBar Elevation="1">
+        <MudText Typo="Typo.h5" Class="ml-3">App1</MudText>
+        <MudSpacer />
+    </MudAppBar>
+    <MudMainContent>
+        <MudContainer MaxWidth="MaxWidth.Large" Class="my-4 pt-4">
+            @Body
+        </MudContainer>
+    </MudMainContent>
+</MudLayout>

Components/Pages/ContactUs.razor

@@ -0,0 +1,58 @@
+@page "/contact"
+
+<section class="h-3/4 mx-auto my-auto bg-gray-900">
+    <div class="container px-6 py-12 mx-auto my-auto">
+        <div>
+            <p class="font-medium text-blue-400">Contact us</p>
+
+            <h1 class="mt-2 text-2xl font-semibold  md:text-3xl text-white">Get in touch</h1>
+
+            <p class="mt-3  text-gray-400">Our friendly team is always here to chat.</p>
+        </div>
+
+        <div class="grid grid-cols-1 gap-12 mt-10 md:grid-cols-2 lg:grid-cols-3">
+            <div>
+                <span class="inline-block p-3 text-blue-500 rounded-full bg-blue-100/80 bg-gray-800">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                        stroke="currentColor" class="w-6 h-6">
+                        <path stroke-linecap="round" stroke-linejoin="round"
+                            d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
+                    </svg>
+                </span>
+
+                <h2 class="mt-4 text-lg font-medium text-gray-800 text-white">Email</h2>
+                <p class="mt-2  text-gray-400">Our friendly team is here to help.</p>
+                <p class="mt-2  text-blue-400">hello@merakiui.com</p>
+            </div>
+
+            <div>
+                <span class="inline-block p-3 text-blue-500 rounded-full bg-blue-100/80 bg-gray-800">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                        stroke="currentColor" class="w-6 h-6">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" />
+                        <path stroke-linecap="round" stroke-linejoin="round"
+                            d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" />
+                    </svg>
+                </span>
+
+                <h2 class="mt-4 text-lg font-medium  text-white">Office</h2>
+                <p class="mt-2 text-gray-400">Come say hello at our office HQ.</p>
+                <p class="mt-2  text-blue-400">100 Smith Street Collingwood VIC 3066 AU</p>
+            </div>
+
+            <div>
+                <span class="inline-block p-3 text-blue-500 rounded-full bg-blue-100/80 bg-gray-800">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                        stroke="currentColor" class="w-6 h-6">
+                        <path stroke-linecap="round" stroke-linejoin="round"
+                            d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 01-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z" />
+                    </svg>
+                </span>
+
+                <h2 class="mt-4 text-lg font-medium  text-white">Phone</h2>
+                <p class="mt-2 text-gray-400">Mon-Fri from 8am to 5pm.</p>
+                <p class="mt-2 text-blue-400">+1 (555) 000-0000</p>
+            </div>
+        </div>
+    </div>
+</section>

Components/Pages/Error.razor

@@ -0,0 +1,36 @@
+@page "/Error"
+@using System.Diagnostics
+
+<PageTitle>Error</PageTitle>
+
+<h1 class="text-danger">Error.</h1>
+<h2 class="text-danger">An error occurred while processing your request.</h2>
+
+@if (ShowRequestId)
+{
+    <p>
+        <strong>Request ID:</strong> <code>@RequestId</code>
+    </p>
+}
+
+<h3>Development Mode</h3>
+<p>
+    Swapping to <strong>Development</strong> environment will display more detailed information about the error that occurred.
+</p>
+<p>
+    <strong>The Development environment shouldn't be enabled for deployed applications.</strong>
+    It can result in displaying sensitive information from exceptions to end users.
+    For local debugging, enable the <strong>Development</strong> environment by setting the <strong>ASPNETCORE_ENVIRONMENT</strong> environment variable to <strong>Development</strong>
+    and restarting the app.
+</p>
+
+@code{
+    @* [CascadingParameter] *@
+    @* private HttpContext? HttpContext { get; set; } *@
+
+    private string? RequestId { get; set; }
+    private bool ShowRequestId => !string.IsNullOrEmpty(RequestId);
+
+    @* protected override void OnInitialized() =>
+        RequestId = Activity.Current?.Id ?? HttpContext?.TraceIdentifier; *@
+}

Components/Pages/Home.razor

@@ -0,0 +1,13 @@
+@page "/"
+@using Frontend.Libs.Generic.Carousel.Components
+
+<Carousel Items="images" />
+
+@code {
+    private List<CarouselItem> images = new()
+{
+new CarouselItem { ImageUrl = "https://picsum.photos/1920/1080?random=1", Text = "Welcome to the Future" },
+new CarouselItem { ImageUrl = "https://picsum.photos/1920/1080?random=2", Text = "Experience Innovation" },
+new CarouselItem { ImageUrl = "https://picsum.photos/1920/1080?random=3", Text = "Build with Speed" }
+};
+}

Components/_Imports.razor

@@ -0,0 +1,26 @@
+@using System.Net.Http
+@using System.Net.Http.Json
+@using System.Net.Http.Headers
+@using Microsoft.AspNetCore.Components.Forms
+@using Microsoft.AspNetCore.Components.Routing
+@using Microsoft.AspNetCore.Components.Web
+@using Microsoft.AspNetCore.Components.Web.Virtualization
+@using Microsoft.AspNetCore.Components.WebAssembly.Http
+@using Microsoft.JSInterop
+@using Microsoft.AspNetCore.Authorization
+@using Microsoft.AspNetCore.Components.Authorization
+@using System.Security.Claims
+
+@using MudBlazor
+
+@using UI
+@using UI.Components
+@using UI.Components.Layout
+@using UI.Services
+
+@using Contracts
+@using Contracts.DTOs
+@using Contracts.DTOs.HR
+@using Contracts.DTOs.Auth
+@using Contracts.DTOs.Generic
+@using Contracts.DTOs.Users

Program.cs

@@ -0,0 +1,46 @@
+using Blazored.LocalStorage;
+using Microsoft.AspNetCore.Components.Authorization;
+using Microsoft.AspNetCore.Components.Web;
+using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+using MudBlazor;
+using MudBlazor.Services;
+using UI;
+using UI.Components;
+using UI.Services;
+
+var builder = WebAssemblyHostBuilder.CreateDefault(args);
+builder.RootComponents.Add<App>("#app");
+builder.RootComponents.Add<HeadOutlet>("head::after");
+
+builder.Services.AddScoped(sp => new HttpClient
+{
+    BaseAddress = new Uri("http://localhost:5211/api/v1/"),
+    
+});
+
+builder.Services.AddMudServices(config =>
+{
+    config.SnackbarConfiguration.PositionClass = Defaults.Classes.Position.BottomLeft;
+    config.SnackbarConfiguration.PreventDuplicates = false;
+    config.SnackbarConfiguration.NewestOnTop = false;
+    config.SnackbarConfiguration.ShowCloseIcon = true;
+    config.SnackbarConfiguration.VisibleStateDuration = 3000;
+    config.SnackbarConfiguration.HideTransitionDuration = 500;
+    config.SnackbarConfiguration.ShowTransitionDuration = 500;
+    config.SnackbarConfiguration.SnackbarVariant = Variant.Filled;
+});
+
+builder.Services.AddAuthorizationCore();
+builder.Services.AddBlazoredLocalStorage();
+
+// builder.Services.AddQueryStringParameters();
+
+builder.Services.AddScoped<AuthenticationStateProvider, ApiAuthenticationStateProvider>();
+
+builder.Services.AddSingleton<AppState, AppState>();
+builder.Services.AddScoped<RequestsService, RequestsService>();
+builder.Services.AddScoped<RoleService, RoleService>();
+
+builder.Services.AddScoped<UserService, UserService>();
+
+await builder.Build().RunAsync();

Properties/launchSettings.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://json.schemastore.org/launchsettings.json",
+  "profiles": {
+    "http": {
+      "commandName": "Project",
+      "dotnetRunMessages": true,
+      "launchBrowser": true,
+      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
+      "applicationUrl": "http://localhost:5055",
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
+    },
+    "https": {
+      "commandName": "Project",
+      "dotnetRunMessages": true,
+      "launchBrowser": true,
+      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
+      "applicationUrl": "https://localhost:7062;http://localhost:5055",
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
+    }
+  }
+}

Services/ApiAuthenticationStateProvider.cs

@@ -0,0 +1,15 @@
+using System.Security.Claims;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Components.Authorization;
+
+namespace UI.Services;
+
+public class ApiAuthenticationStateProvider : AuthenticationStateProvider
+{
+    public override async Task<AuthenticationState> GetAuthenticationStateAsync()
+    {
+        var identity = new ClaimsIdentity();
+        var user = new ClaimsPrincipal(identity);
+        return await Task.FromResult(new AuthenticationState(user));
+    }
+}

Services/AppState.cs

@@ -0,0 +1,5 @@
+namespace UI.Services;
+
+public class AppState
+{
+}

Services/RequestsService.cs

@@ -0,0 +1,13 @@
+using System.Net.Http;
+
+namespace UI.Services;
+
+public class RequestsService
+{
+    private readonly HttpClient _httpClient;
+
+    public RequestsService(HttpClient httpClient)
+    {
+        _httpClient = httpClient;
+    }
+}

Services/RoleService.cs

@@ -0,0 +1,5 @@
+namespace UI.Services;
+
+public class RoleService
+{
+}

Services/UserService.cs

@@ -0,0 +1,5 @@
+namespace UI.Services;
+
+public class UserService
+{
+}

UI.csproj

@@ -0,0 +1,31 @@
+<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
+
+  <PropertyGroup>
+    <TargetFramework>net10.0</TargetFramework>
+    <Nullable>enable</Nullable>
+    <ImplicitUsings>enable</ImplicitUsings>
+  </PropertyGroup>
+
+  <ItemGroup>
+
+    <PackageReference Include="Blazored.LocalStorage" Version="4.5.0" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.Authorization" Version="10.0.1" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.DataAnnotations.Validation" Version="3.2.0-rc1.20223.4" />
+
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="10.0.1" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="10.0.1" PrivateAssets="all" />
+    <PackageReference Include="MudBlazor" Version="8.9.0" />
+
+  </ItemGroup>
+
+  <ItemGroup>
+    <ProjectReference Include="../../../../Backend/TempProjects/HR/Contracts/Contracts.csproj" />
+    <ProjectReference Include="../../../../Backend/APIs/Auth/Auth.Contracts/Auth.Contracts.csproj" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <ProjectReference Include="..\..\..\Libs\Layouts\LayoutLib.Layout\LayoutLib.Layout.csproj" />
+    <ProjectReference Include="..\..\..\Libs\Generic\Carousel.RCL\Carousel.RCL.csproj" />
+  </ItemGroup>
+
+</Project>

package.json

@@ -0,0 +1,23 @@
+{
+  "devDependencies": {
+    "@tailwindcss/typography": "^0.5.16",
+    "autoprefixer": "^10.4.21",
+    "daisyui": "^5.0.46",
+    "postcss": "^8.5.6",
+    "postcss-cli": "^11.0.1",
+    "tailwindcss": "^3.4.3"
+  },
+  "name": "ui",
+  "version": "1.0.0",
+  "description": "",
+  "main": "tailwind.config.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build:css": "tailwindcss -i ./wwwroot/css/tail.css -o ./wwwroot/css/app.css --minify",
+    "watch:css": "tailwindcss -i ./wwwroot/css/tail.css -o ./wwwroot/css/app.css --watch"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "type": "commonjs"
+}

tailwind.config.js

@@ -0,0 +1,96 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "../../../**/*.{razor,html,cshtml}",
+    // "./src/**/*.{razor,html,cshtml}",
+    // "./Components/*.{razor,html,cshtml}",
+    // "./Components/**/*.{razor,html,cshtml}",
+
+    "../../../Pages/**/*.{razor,html,cshtml}",
+    "../../../Components/Pages/**/*.{razor,html,cshtml}",
+
+    // "./Shared/**/*.{razor,html,cshtml}",
+    // "./Shared/*.{razor,html,cshtml}",
+    // "./Pages/*.{razor,html,cshtml}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        c1: "#E2E8F0",
+        c2: "#94A3B8",
+        c3: "#37918C",
+        c4: "#A4ADD4",
+        c5: "#818CF8",
+
+        c6: "#303A4D",
+        c7: "#0F172A",
+        c8: "#BDB068",
+        c9: "#012C63",
+        c10: "#E9B135",
+      },
+      // Some useful comment
+      fontFamily: {
+        nunito: ["nunito", "sans-serif"],
+        qatar: ["qatar", "serif"], // Ensure fonts with spaces have " " surrounding it.
+        qatarbold: ["qatarbold", "serif"], // Ensure fonts with spaces have " " surrounding it.
+      },
+    },
+  },
+
+  plugins: [require("@tailwindcss/typography"), require("daisyui")],
+  daisyui: {
+    themes: [
+      {
+        test: {
+          primary: "#4ECEDA",
+          secondary: "#44B4BE",
+          accent: "#E9B135",
+          neutral: "#27666C",
+          "base-100": "#ffffff",
+          info: "#fde047",
+          success: "#15803d",
+          warning: "#b91c1c",
+          error: "#ffffff",
+        },
+      },
+      "dark",
+      "cupcake",
+      "bumblebee",
+      "emerald",
+      "corporate",
+      "synthwave",
+      "retro",
+      "cyberpunk",
+      "valentine",
+      "halloween",
+      "garden",
+      "forest",
+      "aqua",
+      "lofi",
+      "pastel",
+      "fantasy",
+      "wireframe",
+      "black",
+      "luxury",
+      "dracula",
+      "cmyk",
+      "autumn",
+      "business",
+      "acid",
+      "lemonade",
+      "night",
+      "coffee",
+      "winter",
+      "dim",
+      "nord",
+      "sunset",
+    ], // false: only light + dark | true: all themes | array: specific themes like this ["light", "dark", "cupcake"]
+    darkTheme: "cupcake", // name of one of the included themes for dark mode
+    base: true, // applies background color and foreground color for root element by default
+    styled: true, // include daisyUI colors and design decisions for all components
+    utils: true, // adds responsive and modifier utility classes
+    prefix: "", // prefix for daisyUI classnames (components, modifiers and responsive class names. Not colors)
+    logs: true, // Shows info about daisyUI version and used config in the console when building your CSS
+    themeRoot: ":root", // The element that receives theme color CSS variables
+  },
+};

wwwroot/css/tail.css

@@ -0,0 +1,93 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+
+@layer base {
+  h1{
+    @apply font-bold text-4xl my-2.5
+  }
+  h2{
+    @apply font-bold text-3xl my-3
+
+  }
+  h3{
+    @apply font-bold text-lg my-3.5
+
+  }
+  h4{
+    @apply font-bold my-4
+
+  }
+  h5{
+    @apply font-bold text-sm
+
+  }
+  h6{
+    @apply font-bold text-xs 
+
+  }
+
+  p{
+    @apply  text-base 
+  }
+
+
+  span{
+    @apply  text-base
+
+  }
+  };
+  
+  /* @layer components {
+    .btn-blue {
+      @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
+    }
+    .btn1 {
+      @apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
+    }
+
+    .input1{
+      @apply w-full h-10 rounded-xl border border-black px-3
+    }
+
+
+    .navtext{
+        @apply uppercase text-lg py-2 justify-end  hover:text-c10  border-b-4 mr-6 text-c10 hover:border-c10 tracking-wider
+    }
+
+    .table1{
+
+    }
+    .th1{
+
+    }
+
+    .tr1{
+
+    }
+    .cell1{
+
+    } 
+
+    
+  }*/
+
+  
+  @layer utilities {
+    .filter-none {
+      filter: none;
+    }
+    .filter-grayscale {
+      filter: grayscale(100%);
+    }
+    input[type=number]::-webkit-inner-spin-button,
+    input[type=number]::-webkit-outer-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+    }
+
+    input[type=number] {
+      -moz-appearance: textfield;
+    }
+  }

wwwroot/index.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>UI</title>
+    <base href="/" />
+    <link rel="stylesheet" href="css/app.css" />
+    <link rel="icon" type="image/png" href="favicon.png" />
+    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
+<!-- Important: Increment the version parameter whenever you update MudBlazor to prevent caching issues -->
+    <link href="_content/MudBlazor/MudBlazor.min.css?v=1" rel="stylesheet" />
+</head>
+
+<body>
+    <div id="app">
+        <svg class="loading-progress">
+            <circle r="40%" cx="50%" cy="50%" />
+            <circle r="40%" cx="50%" cy="50%" />
+        </svg>
+        <div class="loading-progress-text"></div>
+    </div>
+
+    <div id="blazor-error-ui">
+        An unhandled error has occurred.
+        <a href="." class="reload">Reload</a>
+        <span class="dismiss">🗙</span>
+    </div>
+    <script src="_framework/blazor.webassembly.js"></script>
+    <script src="_content/MudBlazor/MudBlazor.min.js?v=1"></script>
+
+</body>
+
+</html>

wwwroot/sample-data/weather.json

@@ -0,0 +1,27 @@
+[
+  {
+    "date": "2022-01-06",
+    "temperatureC": 1,
+    "summary": "Freezing"
+  },
+  {
+    "date": "2022-01-07",
+    "temperatureC": 14,
+    "summary": "Bracing"
+  },
+  {
+    "date": "2022-01-08",
+    "temperatureC": -13,
+    "summary": "Freezing"
+  },
+  {
+    "date": "2022-01-09",
+    "temperatureC": -16,
+    "summary": "Balmy"
+  },
+  {
+    "date": "2022-01-10",
+    "temperatureC": -2,
+    "summary": "Chilly"
+  }
+]