proje-react-panel 1.0.15 → 1.0.17-test-8

package/src/styles/list.scss

@@ -1,12 +1,9 @@
-@import './scrollbar';
+@import 'utils/scrollbar';
 $header-height: 60px;
 $footer-height: 60px;
 $datagrid-height: calc(100vh - ($header-height + $footer-height));
 .list {
   width: 100%;
-  padding: 0 0 0 16px;
-  border-radius: 8px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   background-color: #2b2b2b;
   color: #e0e0e0;
   max-height: 100vh;
@@ -16,11 +13,51 @@ $datagrid-height: calc(100vh - ($header-height + $footer-height));
 
   .list-header {
     height: $header-height;
-    font-size: 24px;
-    font-weight: bold;
-    text-align: center;
-    color: #ffffff;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 24px;
+    background: linear-gradient(90deg, #2b2b2b 0%, #3c3c3c 100%);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+
+    .header-title {
+      font-size: 20px;
+      font-weight: 600;
+      color: #ffffff;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+
+    .header-actions {
+      display: flex;
+      gap: 16px;
+      align-items: center;
+
+      .create-button {
+        padding: 8px 16px;
+        background-color: #4caf50;
+        color: white;
+        border-radius: 4px;
+        text-decoration: none;
+        font-size: 14px;
+        font-weight: 500;
+        transition: background-color 0.2s ease;
+
+        &:hover {
+          background-color: #45a049;
+        }
+        .icon-create {
+          fill: currentColor;
+          stroke: none;
+          position: relative;
+          top: 2px;
+          right: 2px;
+        }
+      }
+    }
   }
+
   .list-footer {
     display: flex;
     justify-content: space-between;
@@ -32,6 +69,7 @@ $datagrid-height: calc(100vh - ($header-height + $footer-height));
     color: #ffffff;
   }
   .datagrid {
+    padding: 0 0 0 8px;
     height: $datagrid-height;
     min-height: $datagrid-height;
     max-height: $datagrid-height;
@@ -65,4 +103,109 @@ $datagrid-height: calc(100vh - ($header-height + $footer-height));
       background-color: #444444;
     }
   }
+
+  .empty-list {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    width: 100%;
+    padding: 2rem;
+
+    .empty-list-content {
+      text-align: center;
+      color: #888;
+
+      svg {
+        margin-bottom: 1rem;
+        color: #666;
+      }
+
+      h3 {
+        font-size: 1.5rem;
+        margin-bottom: 0.5rem;
+        font-weight: 500;
+        color: #fff;
+      }
+
+      p {
+        font-size: 1rem;
+        color: #888;
+      }
+    }
+  }
+}
+
+.util-cell-link {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #666;
+  text-decoration: none;
+  transition: color 0.2s ease;
+  &.util-cell-link-remove {
+    cursor: pointer;
+  }
+  &:hover {
+    color: #333;
+  }
+
+  .icon {
+    width: 16px;
+    height: 16px;
+    stroke: none;
+    &.icon-trash {
+      fill: #ff0000;
+      stroke: none;
+    }
+  }
+
+  .util-cell-label {
+    font-size: 14px;
+  }
+}
+
+.filter-button {
+  background-color: #4caf50;
+  color: white;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+
+  &:hover {
+    background-color: #45a049;
+  }
+  .icon-filter {
+    position: relative;
+    top: 2px;
+    right: 2px;
+    width: 15px;
+    height: 15px;
+    stroke: currentColor;
+    stroke-width: 2;
+    fill: none;
+    &.active {
+      fill: currentColor;
+    }
+  }
+}
+.header-custom {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 0 24px;
+  gap: 16px;
+  a {
+    padding: 8px 16px;
+    background-color: #4caf50;
+    color: white;
+    border-radius: 4px;
+    text-decoration: none;
+    font-size: 14px;
+    font-weight: 500;
+    transition: background-color 0.2s ease;
+  }
 }

package/src/styles/uploader.scss

@@ -0,0 +1,86 @@
+.uploader {
+  &-container {
+    padding: 1.5rem;
+    border: 2px dashed var(--border-color, #e0e0e0);
+    border-radius: 8px;
+    background-color: var(--bg-color, #fafafa);
+    transition: all 0.3s ease;
+
+    &:hover {
+      border-color: var(--primary-color, #2196f3);
+      background-color: var(--bg-hover-color, #f5f5f5);
+    }
+  }
+
+  &-button {
+    background-color: var(--primary-color, #2196f3);
+    color: var(--button-text-color, white);
+    padding: 0.75rem 1.5rem;
+    border: none;
+    border-radius: 4px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+
+    &:hover {
+      background-color: var(--primary-hover-color, #1976d2);
+    }
+
+    &:active {
+      background-color: var(--primary-active-color, #1565c0);
+    }
+  }
+
+  &-files {
+    margin-top: 1.5rem;
+    display: grid;
+    gap: 1rem;
+  }
+
+  &-file {
+    background-color: var(--file-bg-color, white);
+    padding: 1rem;
+    border-radius: 6px;
+    box-shadow: 0 2px 4px var(--shadow-color, rgba(0, 0, 0, 0.05));
+    display: grid;
+    gap: 0.5rem;
+
+    p {
+      margin: 0;
+      color: var(--text-color, #424242);
+      font-size: 0.875rem;
+
+      &:first-child {
+        color: var(--primary-color, #1976d2);
+        font-weight: 500;
+      }
+    }
+  }
+}
+
+:root {
+  --border-color: #424242;
+  --bg-color: #1e1e1e;
+  --bg-hover-color: #2d2d2d;
+  --primary-color: #64b5f6;
+  --primary-hover-color: #42a5f5;
+  --primary-active-color: #2196f3;
+  --button-text-color: #ffffff;
+  --file-bg-color: #2d2d2d;
+  --shadow-color: rgba(0, 0, 0, 0.2);
+  --text-color: #e0e0e0;
+}
+
+// Dark theme
+[data-theme='dark'] {
+  --border-color: #424242;
+  --bg-color: #1e1e1e;
+  --bg-hover-color: #2d2d2d;
+  --primary-color: #64b5f6;
+  --primary-hover-color: #42a5f5;
+  --primary-active-color: #2196f3;
+  --button-text-color: #ffffff;
+  --file-bg-color: #2d2d2d;
+  --shadow-color: rgba(0, 0, 0, 0.2);
+  --text-color: #e0e0e0;
+}

package/src/types/AnyClass.ts

@@ -1 +1,3 @@
-export type AnyClass = abstract new (...args: any[]) => any;
+//export type AnyClass = abstract new (...args: any[]) => any;
+//TODO2: ANY IS NOT A GOOD SOLUTION, WE NEED TO FIND A BETTER WAY TO DO THIS
+export type AnyClass = any;

package/src/types/ScreenCreatorData.ts

@@ -1,14 +1,14 @@
-import { CellOptions } from "../decorators/list/Cell";
-import { CrudOptions } from "../decorators/Crud";
-import { InputOptions } from "../decorators/form/Input";
-import { ListOptions } from "../decorators/list/List";
-
+import { CellOptions } from '../decorators/list/Cell';
+import { CrudOptions } from '../decorators/Crud';
+import { InputOptions } from '../decorators/form/Input';
+import { ListOptions } from '../decorators/list/List';
+//TODO: remove
 export interface ScreenCreatorData {
-	resolver: any;
-	fields: string[];
-	inputs: InputOptions[];
-	crud?: CrudOptions;
-	path: string;
-	list?: ListOptions;
-	cells: CellOptions[];
+  resolver: any;
+  fields: string[];
+  inputs: InputOptions[];
+  crud?: CrudOptions;
+  path: string;
+  list?: ListOptions<any>;
+  cells: CellOptions[];
 }

package/src/types/svg.d.ts

@@ -0,0 +1,5 @@
+declare module '*.svg' {
+  import React from 'react';
+  const SVGComponent: React.FC<React.SVGProps<SVGSVGElement>>;
+  export default SVGComponent;
+}

package/src/components/components/ImageUploader.tsx

@@ -1,301 +0,0 @@
-import React, { useEffect } from "react";
-import { useFormContext } from "react-hook-form";
-import { bytesToSize } from "../../utils/format";
-
-interface ThumbnailImageProps {
-	name: string;
-	src: string;
-	size: number;
-	style?: React.CSSProperties;
-}
-
-interface MultipleImageUploaderProps {
-	value?: Array<{ file: File; image: string; remove?: boolean }>;
-	onError?: (error: string | null) => void;
-	onClear?: () => void;
-	reset?: any;
-	onFilesChange?: (files: File[]) => void;
-}
-
-interface FileWithPreview {
-	file: File;
-	image: string;
-}
-
-const uploadState = Object.freeze({
-	BEFORE: "before",
-	HOVER: "hover",
-	AFTER: "after",
-} as const);
-
-type UploadStateType = (typeof uploadState)[keyof typeof uploadState];
-
-function ThumbnailImage(props: ThumbnailImageProps) {
-	return (
-		<div>
-			<img {...props} style={{ width: 100 }} />
-			<p>
-				{props.name} <span style={{ whiteSpace: "none" }}>({bytesToSize(props.size)})</span>
-			</p>
-		</div>
-	);
-}
-
-export function ImageUploader() {
-	const {
-		register,
-		formState: { errors },
-		watch,
-		setValue,
-		clearErrors,
-		setError,
-	} = useFormContext();
-	const up = watch("uploader");
-
-	useEffect(() => {
-		register("uploader", { required: true });
-	}, [register]);
-
-	return (
-		<div>
-			<span className="form-error" style={{ bottom: 2, top: "unset" }}>
-				{errors.uploader?.type === "required" && "At least 1 image is required!"}
-				{errors.uploader?.type === "custom" && errors.uploader.message?.toString()}
-			</span>
-			<MultipleImageUploader
-				reset={up}
-				onError={(data: string | null) => {
-					if (!data) {
-						setValue("uploader", { files: [] });
-						clearErrors("uploader");
-					} else {
-						setError("uploader", {
-							type: "custom",
-							message: data,
-						});
-					}
-				}}
-				onClear={() => {
-					setValue("uploader", { files: [] });
-					clearErrors("uploader");
-				}}
-				onFilesChange={(files) => {
-					setValue("uploader", { files });
-				}}
-			/>
-		</div>
-	);
-}
-
-export function MultipleImageUploader(props: MultipleImageUploaderProps) {
-	const [currentUploadState, setUploadState] = React.useState<UploadStateType>(uploadState.BEFORE);
-	const [images, setImages] = React.useState<Array<{ file: File; image: string; remove?: boolean }>>(
-		props.value || []
-	);
-	const [files, setFiles] = React.useState<FileWithPreview[]>([]);
-	const [counter, setCounter] = React.useState(0);
-	console.log("files", files);
-	const dropzoneElement = React.useRef<HTMLDivElement>(null);
-	const imageInputRef = React.useRef<HTMLInputElement>(null);
-
-	React.useEffect(() => {
-		const element = dropzoneElement.current;
-		if (!element) return;
-
-		const handleDragEnter = (e: DragEvent) => {
-			e.preventDefault();
-			e.stopPropagation();
-			dragEnter();
-		};
-
-		const handleDragLeave = (e: DragEvent) => {
-			e.preventDefault();
-			e.stopPropagation();
-			dragLeave();
-		};
-
-		const handleDragOver = (e: DragEvent) => {
-			e.preventDefault();
-			e.stopPropagation();
-		};
-
-		const handleDrop = (e: DragEvent) => {
-			e.preventDefault();
-			e.stopPropagation();
-			setCounter(0);
-			const droppedFiles = e.dataTransfer?.files;
-			if (!droppedFiles) return;
-
-			setFiles([]);
-			setUploadState(uploadState.AFTER);
-
-			const newFiles: File[] = [];
-			for (let i = 0; i < droppedFiles.length; i++) {
-				const reader = new FileReader();
-				reader.onload = (event) => {
-					if (!event.target) return;
-					const check = onFileChange([
-						...files,
-						{ file: droppedFiles[i], image: event.target.result as string },
-					]);
-					if (check) {
-						newFiles.push(droppedFiles[i]);
-						if (imageInputRef.current) {
-							imageInputRef.current.files = droppedFiles;
-						}
-						setFiles([]);
-					}
-					// Notify parent of file changes
-					if (props.onFilesChange) {
-						props.onFilesChange(newFiles);
-					}
-				};
-				reader.readAsDataURL(droppedFiles[i]);
-			}
-			if (imageInputRef.current) {
-				imageInputRef.current.files = droppedFiles;
-			}
-		};
-
-		element.addEventListener("dragenter", handleDragEnter, false);
-		element.addEventListener("dragleave", handleDragLeave, false);
-		element.addEventListener("dragover", handleDragOver, false);
-		element.addEventListener("drop", handleDrop, false);
-
-		return () => {
-			element.removeEventListener("dragenter", handleDragEnter);
-			element.removeEventListener("dragleave", handleDragLeave);
-			element.removeEventListener("dragover", handleDragOver);
-			element.removeEventListener("drop", handleDrop);
-		};
-	}, [files]);
-
-	const dragEnter = () => {
-		setCounter((prev) => prev + 1);
-		setUploadState(uploadState.HOVER);
-	};
-
-	const dragLeave = () => {
-		setCounter((prev) => {
-			if (prev - 1 === 0) {
-				setUploadState(uploadState.BEFORE);
-				return 0;
-			}
-			return prev - 1;
-		});
-	};
-
-	const clickRemoveImage = (i: number) => {
-		const sources = [...images];
-		sources[i].remove = !sources[i].remove;
-		setImages(sources);
-	};
-
-	const clickRemoveFile = () => {
-		setFiles([]);
-		if (imageInputRef.current) {
-			imageInputRef.current.value = "";
-		}
-		props.onClear?.();
-	};
-
-	const checkValid = (filesInner: FileWithPreview[]): string | null => {
-		if (!filesInner) return null;
-		if (filesInner.length >= 10) return "you can't send more than 10 images";
-		for (let i = 0; i < filesInner.length; i++) {
-			const file = filesInner[i].file;
-			const split = file.name.split(".");
-			if (!["png", "jpg", "jpeg"].includes(split[split.length - 1])) {
-				return `Extension of the file can only be "png", "jpg" or "jpeg" `;
-			}
-			if (file) {
-				if (file.size > 1048576) {
-					return `Size of "${file.name}" can't be bigger than 1mb`;
-				}
-			}
-		}
-		return null;
-	};
-
-	const onFileChange = (filesInner: FileWithPreview[]): string | null => {
-		const check = checkValid(filesInner);
-		if (!check) {
-			setFiles(filesInner);
-		}
-		props.onError?.(check);
-		return check;
-	};
-
-	const renderImages = () => {
-		const imageElements = [];
-		if (files) {
-			console.log("---->", files);
-			for (let i = 0; i < files.length; i++) {
-				let imageClassName = "image";
-				imageElements.push(
-					<div key={i} className="image-container">
-						<div className={imageClassName}>
-							<ThumbnailImage name={files[i].file.name} src={files[i].image} size={files[i].file.size} />
-						</div>
-					</div>
-				);
-			}
-		}
-		return imageElements;
-	};
-
-	return (
-		<div ref={dropzoneElement} className={"multi-image form-element dropzone " + currentUploadState}>
-			<input ref={imageInputRef} type="file" style={{ display: "none" }} className="target" name={"file"} />
-			<div className="container">
-				<button className="trash" onClick={clickRemoveFile} type="button">
-					Delete All
-				</button>
-				{renderImages()}
-				<div>
-					<button
-						type={"button"}
-						onClick={() => {
-							const fileInput = document.getElementById("file__") as HTMLInputElement;
-							if (fileInput) {
-								fileInput.click();
-							}
-						}}
-						className="plus">
-						<span>
-							+ Add Image
-							<p>Drag image here or Select Image</p>
-						</span>
-					</button>
-				</div>
-				<input
-					hidden
-					id={"file__"}
-					multiple
-					type={"file"}
-					onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-						const selectedFiles = event.target.files;
-						if (!selectedFiles) return;
-
-						setFiles([]);
-						setUploadState(uploadState.AFTER);
-						for (let i = 0; i < selectedFiles.length; i++) {
-							const reader = new FileReader();
-							reader.onload = (eventInner) => {
-								if (!eventInner.target) return;
-								onFileChange([
-									...files,
-									{ file: selectedFiles[i], image: eventInner.target.result as string },
-								]);
-							};
-							reader.readAsDataURL(selectedFiles[i]);
-						}
-						if (imageInputRef.current) {
-							imageInputRef.current.files = selectedFiles;
-						}
-					}}
-				/>
-			</div>
-		</div>
-	);
-}

package/src/components/list/Datagrid.tsx

@@ -1,101 +0,0 @@
-import React from 'react';
-import { CellOptions } from '../../decorators/list/Cell';
-import { Link } from 'react-router';
-import { useAppStore } from '../../store/store';
-import { ImageCellOptions } from '../../decorators/list/ImageCell';
-
-interface ListProps<T> {
-  data: T[];
-  cells: CellOptions[];
-}
-
-export function Datagrid<T>({ data, cells }: ListProps<T>) {
-  if (!data || data.length === 0) {
-    return <div>No items available</div>;
-  }
-
-  return (
-    <div className="datagrid">
-      <table className="datagrid-table">
-        <thead>
-          <tr>
-            {cells.map(cellOptions => (
-              <th key={cellOptions.name}>{cellOptions.title ?? cellOptions.name}</th>
-            ))}
-            <th />
-            <th>Delete</th>
-          </tr>
-        </thead>
-        <tbody>
-          {data.map((item, index) => (
-            <tr key={index}>
-              {cells.map(cellOptions => {
-                // @ts-ignore
-                const value = item[cellOptions.name];
-                let render = value ?? '-'; // Default value if the field is undefined or null
-
-                switch (cellOptions.type) {
-                  case 'date':
-                    if (value) {
-                      const date = new Date(value);
-                      render = `${date.getDate().toString().padStart(2, '0')}/${(
-                        date.getMonth() + 1
-                      )
-                        .toString()
-                        .padStart(
-                          2,
-                          '0'
-                        )}/${date.getFullYear()} ${date.getHours().toString().padStart(2, '0')}:${date
-                        .getMinutes()
-                        .toString()
-                        .padStart(2, '0')}`;
-                    }
-                    break;
-
-                  case 'image': {
-                    const imageCellOptions = cellOptions as ImageCellOptions;
-                    render = (
-                      <img
-                        width={100}
-                        height={100}
-                        src={imageCellOptions.baseUrl + value}
-                        style={{ objectFit: 'contain' }}
-                      />
-                    );
-                    break;
-                  }
-                  case 'string':
-                  default:
-                    render = value ? value.toString() : (cellOptions?.placeHolder ?? '-'); // Handles string type or default fallback
-                    break;
-                }
-                /*
-								if (cellOptions.linkTo) {
-									render = <Link to={cellOptions.linkTo(item)}>{formattedValue}</Link>;
-								}
-*/
-                return <td key={cellOptions.name}>{render}</td>;
-              })}
-              <td>
-                {/*@ts-ignore*/}
-                <Link to={'edit/' + (item?.id ?? '-')}>Edit</Link>
-                {/*@ts-ignore*/}
-                <Link to={'details/' + (item?.id ?? '-')}>Details</Link>
-              </td>
-              <td>
-                <button
-                  onClick={() => {
-                    /*@ts-ignore*/
-                    //CrudApi.delete({ ...fetchSettings, token }, screen.controller, item?.id);
-                  }}
-                >
-                  Delete
-                </button>
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
-  );
-}