feature/profile-system (#1513)

* chore: merge every pr

* chore: added use query to system and profile

Author: SamTV12345

src/controllers/sys_info_controller.rs

@@ -192,7 +192,7 @@ pub struct LoginRequest {
     pub password: String,
 }
 
-#[derive(Debug, Serialize, Deserialize, Clone)]
+#[derive(Debug, Serialize, Deserialize, Clone, ToSchema)]
 pub struct VersionInfo {
     pub version: &'static str,
     pub r#ref: &'static str,
@@ -206,7 +206,7 @@ pub struct VersionInfo {
 get,
 path="/info",
 responses(
-(status = 200, description = "Gets the info of the server")),
+(status = 200, description = "Gets the info of the server", body=VersionInfo)),
 tag="info"
 )]
 pub async fn get_info() -> Json<VersionInfo> {

ui/components.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/index.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {}
+}

ui/package.json

@@ -35,12 +35,15 @@
     "@tanstack/react-query": "^5.89.0",
     "@types/uuid": "^11.0.0",
     "chart.js": "^4.5.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "copy-text-to-clipboard": "^3.2.1",
     "csstype": "^3.1.3",
     "framer-motion": "^12.23.16",
     "i18next": "^25.5.2",
     "i18next-browser-languagedetector": "^8.2.0",
     "javascript-time-ago": "^2.5.12",
+    "lucide-react": "^0.544.0",
     "material-symbols": "^0.35.2",
     "notistack": "^3.0.2",
     "oidc-client-ts": "^3.3.0",
@@ -57,6 +60,7 @@
     "react-waypoint": "^10.3.0",
     "sanitize-html": "^2.17.0",
     "socket.io-client": "^4.8.1",
+    "tailwind-merge": "^3.3.1",
     "uuid": "^13.0.0",
     "zustand": "^5.0.8"
   },
@@ -76,6 +80,7 @@
     "openapi-typescript": "^7.9.1",
     "postcss": "^8.5.6",
     "tailwindcss": "^4.1.13",
+    "tw-animate-css": "^1.3.8",
     "typescript": "^5.9.2",
     "vite": "npm:rolldown-vite@7.1.11",
     "vitest": "^3.2.4"

ui/pnpm-lock.yaml

@@ -1321,6 +1321,14 @@ export interface components {
             role: string;
             username: string;
         };
+        VersionInfo: {
+            ci: string;
+            commit: string;
+            os: string;
+            ref: string;
+            time: string;
+            version: string;
+        };
     };
     responses: never;
     parameters: never;
@@ -1386,7 +1394,9 @@ export interface operations {
                 headers: {
                     [name: string]: unknown;
                 };
-                content?: never;
+                content: {
+                    "application/json": components["schemas"]["VersionInfo"];
+                };
             };
         };
     };

ui/schema.d.ts

@@ -1,7 +1,14 @@
 import {ChangeEventHandler, FC, InputHTMLAttributes} from 'react'
+import {LoadingSkeletonSpan} from "./ui/LoadingSkeletonSpan";
 
 
-export const CustomInput: FC<InputHTMLAttributes<HTMLInputElement>> = ({ autoComplete, onBlur, className = '', id, name, onChange, disabled, placeholder, required, type = 'text', value, ...props }) => {
+export const CustomInput: FC<InputHTMLAttributes<HTMLInputElement> &  {
+    loading?: boolean
+}> = ({ autoComplete, onBlur, className = '', id, name, onChange, disabled, placeholder, required, type = 'text', value, ...props }) => {
+    if (props.loading) {
+        console.log("Loading")
+        return <LoadingSkeletonSpan text={""} loading={props.loading}/>
+    }
     return (
         <input onBlur={onBlur} autoComplete={autoComplete} disabled={disabled} className={"bg-(--input-bg-color)" +
             " px-4 py-2 rounded-lg text-sm text-(--input-fg-color) placeholder:text-(--input-fg-color-disabled) " + className} id={id} name={name} placeholder={placeholder} onChange={onChange} value={value} type={type} required={required} {...props} />

ui/src/components/CustomInput.tsx

@@ -0,0 +1,5 @@
+import {Skeleton} from "./skeleton";
+
+export const ChartLoadingSkeleton = ()=>{
+    return <Skeleton className="h-[20px] w-[100px] rounded-full" />
+}

ui/src/components/ui/ChartLoadingSkeleton.tsx

@@ -0,0 +1,16 @@
+import {FC} from "react";
+import {Skeleton} from "./skeleton";
+
+type LoadingSkeletonProps = {
+    loading?: boolean,
+    text: string| undefined|number
+}
+
+export const LoadingSkeletonDD: FC<LoadingSkeletonProps> = ({
+    loading,
+    text
+                                                          }) => {
+    return (
+        <dd className="text-(--fg-secondary-color)">{loading == true ? <Skeleton style={{height: '100%'}}/>: text}</dd>
+    )
+}

ui/src/components/ui/LoadingSkeletonDD.tsx

@@ -0,0 +1,16 @@
+import {FC} from "react";
+import {Skeleton} from "./skeleton";
+
+type LoadingSkeletonProps = {
+    loading?: boolean,
+    text: string| undefined
+}
+
+export const LoadingSkeletonSpan: FC<LoadingSkeletonProps> = ({
+                                                                loading,
+                                                                text
+                                                            }) => {
+    return (
+        <span className="text-(--fg-secondary-color)">{loading == true ? <Skeleton style={{height: '100%'}}/>: text}</span>
+    )
+}

ui/src/components/ui/LoadingSkeletonSpan.tsx

@@ -0,0 +1,13 @@
+import { cn } from "../../lib/utils"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("bg-(--input-bg-color) animate-pulse rounded-md", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }