proje-react-panel 1.6.0 → 1.7.0

package/src/styles/layout.scss

@@ -11,14 +11,15 @@
     padding: 16px;
     margin: 20px 0;
     border-radius: 8px;
-    background-color: rgba(255, 77, 79, 0.1);
-    border-left: 4px solid #ff4d4f;
-    color: #f2f2f2;
+    background-color: var(--prp-bg-tertiary);
+    opacity: 0.3;
+    border-left: 4px solid var(--prp-color-error);
+    color: var(--prp-text-secondary);
     align-items: flex-start;
 
     .error-icon {
       margin-right: 16px;
-      color: #ff4d4f;
+      color: var(--prp-color-error);
       font-size: 24px;
       display: flex;
       align-items: center;
@@ -30,7 +31,7 @@
       h3 {
         margin: 0 0 8px;
         font-size: 18px;
-        color: #ff4d4f;
+        color: var(--prp-color-error);
       }
 
       p {
@@ -42,16 +43,16 @@
 
   // Additional error feedback styles
   .field-error {
-    border-color: #ff4d4f !important;
+    border-color: var(--prp-color-error) !important;
 
     &:focus {
-      box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.2);
+      box-shadow: 0 0 0 2px var(--prp-shadow-dark);
     }
   }
 
   .error-message {
     margin-top: 4px;
     font-size: 14px;
-    color: #ff4d4f;
+    color: var(--prp-color-error);
   }
 }

package/src/styles/list.scss

@@ -4,8 +4,8 @@ $footer-height: 60px;
 $datagrid-height: calc(100vh - #{$header-height} - #{$footer-height});
 .list {
   width: 100%;
-  background-color: #2b2b2b;
-  color: #e0e0e0;
+  background-color: var(--prp-bg-secondary);
+  color: var(--prp-text-muted);
   max-height: 100vh;
   height: 100vh;
   min-height: 100vh;
@@ -17,14 +17,14 @@ $datagrid-height: calc(100vh - #{$header-height} - #{$footer-height});
     align-items: center;
     justify-content: space-between;
     padding: 0 24px;
-    background: linear-gradient(90deg, #2b2b2b 0%, #3c3c3c 100%);
+    background: linear-gradient(90deg, var(--prp-bg-secondary) 0%, var(--prp-bg-tertiary) 100%);
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 2px 4px var(--prp-shadow-medium);
 
     .header-title {
       font-size: 20px;
       font-weight: 600;
-      color: #ffffff;
+      color: var(--prp-text-primary);
       text-transform: uppercase;
       letter-spacing: 0.5px;
     }
@@ -36,8 +36,8 @@ $datagrid-height: calc(100vh - #{$header-height} - #{$footer-height});
 
       .create-button {
         padding: 8px 16px;
-        background-color: #4caf50;
-        color: white;
+        background-color: var(--prp-bg-button-success);
+        color: var(--prp-text-primary);
         border-radius: 4px;
         text-decoration: none;
         font-size: 14px;
@@ -45,7 +45,8 @@ $datagrid-height: calc(100vh - #{$header-height} - #{$footer-height});
         transition: background-color 0.2s ease;
 
         &:hover {
-          background-color: #45a049;
+          background-color: var(--prp-bg-button-success);
+          opacity: 0.9;
         }
         .icon-create {
           fill: currentColor;
@@ -95,22 +96,22 @@ $datagrid-height: calc(100vh - #{$header-height} - #{$footer-height});
     td {
       padding: 12px 16px;
       text-align: left;
-      border-bottom: 1px solid #444444;
+      border-bottom: 1px solid var(--prp-border-primary);
       text-overflow: ellipsis;
       white-space: nowrap;
     }
 
     th {
-      color: #ffffff;
-      background-color: #3c3c3c;
+      color: var(--prp-text-primary);
+      background-color: var(--prp-bg-tertiary);
     }
 
     tr:nth-child(even) {
-      background-color: #353535;
+      background-color: var(--prp-bg-secondary);
     }
 
     tr:hover {
-      background-color: #444444;
+      background-color: var(--prp-bg-tertiary);
     }
   }
 
@@ -124,23 +125,23 @@ $datagrid-height: calc(100vh - #{$header-height} - #{$footer-height});
 
     .empty-list-content {
       text-align: center;
-      color: #888;
+      color: var(--prp-text-muted);
 
       svg {
         margin-bottom: 1rem;
-        color: #666;
+        color: var(--prp-text-muted);
       }
 
       h3 {
         font-size: 1.5rem;
         margin-bottom: 0.5rem;
         font-weight: 500;
-        color: #fff;
+        color: var(--prp-text-primary);
       }
 
       p {
         font-size: 1rem;
-        color: #888;
+        color: var(--prp-text-muted);
       }
     }
   }
@@ -150,14 +151,14 @@ $datagrid-height: calc(100vh - #{$header-height} - #{$footer-height});
   display: flex;
   align-items: center;
   gap: 8px;
-  color: #666;
+  color: var(--prp-text-muted);
   text-decoration: none;
   transition: color 0.2s ease;
   &.util-cell-link-remove {
     cursor: pointer;
   }
   &:hover {
-    color: #333;
+    color: var(--prp-text-muted);
   }
 
   .icon {
@@ -165,7 +166,7 @@ $datagrid-height: calc(100vh - #{$header-height} - #{$footer-height});
     height: 16px;
     stroke: none;
     &.icon-trash {
-      fill: #ff0000;
+      fill: var(--prp-color-error);
       stroke: none;
     }
     &.icon-down {
@@ -181,8 +182,8 @@ $datagrid-height: calc(100vh - #{$header-height} - #{$footer-height});
 }
 
 .filter-button {
-  background-color: #4caf50;
-  color: white;
+  background-color: var(--prp-bg-button-success);
+  color: var(--text-primary);
   border: none;
   padding: 8px 16px;
   border-radius: 4px;
@@ -190,7 +191,8 @@ $datagrid-height: calc(100vh - #{$header-height} - #{$footer-height});
   transition: background-color 0.2s ease;
 
   &:hover {
-    background-color: #45a049;
+    background-color: var(--prp-bg-button-success);
+    opacity: 0.9;
   }
   .icon-filter {
     position: relative;
@@ -215,7 +217,7 @@ $datagrid-height: calc(100vh - #{$header-height} - #{$footer-height});
   gap: 16px;
   a {
     padding: 8px 16px;
-    background-color: #4caf50;
+    background-color: var(--prp-bg-button-success);
     color: white;
     border-radius: 4px;
     text-decoration: none;
@@ -251,8 +253,8 @@ $datagrid-height: calc(100vh - #{$header-height} - #{$footer-height});
   list-style: none;
   margin: 0;
   padding: 0;
-  background-color: #2b2b2b;
-  border: 1px solid #444444;
+  background-color: var(--prp-bg-secondary);
+  border: 1px solid var(--prp-border-primary);
   border-radius: 4px;
   z-index: 1000;
   > li {
@@ -262,7 +264,7 @@ $datagrid-height: calc(100vh - #{$header-height} - #{$footer-height});
     border-bottom: 1px solid #444444;
     cursor: pointer;
     &:hover {
-      background-color: #444444;
+      background-color: var(--prp-bg-tertiary);
     }
     &:last-child {
       border-bottom: none;

package/src/styles/loading-screen.scss

@@ -1,7 +1,7 @@
 .loading-screen {
   width: 100%;
   height: 100%;
-  background-color: #1a1a1a;
+  background-color: var(--prp-bg-primary);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -17,14 +17,14 @@
   .loading-spinner {
     width: 50px;
     height: 50px;
-    border: 3px solid #2a2a2a;
-    border-top: 3px solid #3498db;
+    border: 3px solid var(--prp-bg-secondary);
+    border-top: 3px solid var(--prp-bg-button-primary);
     border-radius: 50%;
     animation: spin 1s linear infinite;
   }
 
   .loading-text {
-    color: #ffffff;
+    color: var(--prp-text-primary);
     font-size: 1.2rem;
     font-weight: 500;
     letter-spacing: 1px;

package/src/styles/login.scss

@@ -5,11 +5,11 @@
   min-height: 100vh;
   max-width: 100vw;
   max-height: 100vh;
-  background: linear-gradient(135deg, #1a1a1a 0%, #2d3436 100%);
+  background: linear-gradient(135deg, var(--prp-bg-primary) 0%, var(--prp-bg-secondary) 100%);
   padding: 0;
-   form {
+  form {
     width: 400px;
-    background: #1a1a1a;
+    background: var(--prp-bg-primary);
     border-radius: 8px;
     padding: 40px;
   }

package/src/styles/pagination.scss

@@ -14,34 +14,34 @@ $footer-height2: 60px;
     display: flex;
     align-items: center;
     justify-content: center;
-    border: 1px solid var(--border-color, #e2e8f0);
+    border: 1px solid var(--prp-border-light);
     border-radius: 8px;
     text-decoration: none;
-    color: var(--text-color, #2d3748);
-    background-color: var(--bg-color, #ffffff);
+    color: var(--prp-text-muted);
+    background-color: var(--prp-bg-white);
     font-weight: 500;
     font-size: 14px;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+    box-shadow: 0 1px 2px var(--prp-shadow-light);
     cursor: pointer;
 
     &:hover:not(.disabled) {
-      background-color: var(--hover-bg-color, #f7fafc);
+      background-color: var(--prp-bg-tertiary);
       transform: translateY(-1px);
-      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-      border-color: var(--primary-color, #007bff);
+      box-shadow: 0 4px 6px var(--prp-shadow-medium);
+      border-color: var(--prp-bg-button-primary);
     }
 
     &.active {
-      background-color: var(--primary-color, #007bff);
-      color: var(--active-text-color, white);
-      border-color: var(--primary-color, #007bff);
-      box-shadow: 0 4px 6px rgba(0, 123, 255, 0.2);
+      background-color: var(--prp-bg-button-primary);
+      color: var(--prp-text-primary);
+      border-color: var(--prp-bg-button-primary);
+      box-shadow: 0 4px 6px var(--prp-shadow-focus);
       font-weight: 600;
 
       &:hover {
         transform: translateY(-1px);
-        box-shadow: 0 6px 8px rgba(0, 123, 255, 0.3);
+        box-shadow: 0 6px 8px var(--prp-shadow-focus);
       }
     }
 
@@ -49,7 +49,7 @@ $footer-height2: 60px;
       opacity: 0.5;
       cursor: not-allowed;
       pointer-events: none;
-      background-color: var(--disabled-bg-color, #f1f5f9);
+      background-color: var(--prp-bg-secondary);
     }
   }
 }

package/src/styles/sidebar.scss

@@ -1,9 +1,9 @@
 .sidebar {
   position: relative;
-  background-color: #343a40;
+  background-color: var(--prp-bg-tertiary);
   height: 100vh;
   transition: width 0.3s ease;
-  border-right: 1px solid #454d55;
+  border-right: 1px solid var(--prp-border-primary);
   &.open {
     width: 250px;
   }
@@ -14,14 +14,12 @@
     .nav-links a.active {
       border-radius: 0;
       &::before {
-     
-        background-color: #9b1a1a;
+        background-color: var(--prp-bg-button-primary);
       }
-    
     }
     .nav-links a:hover {
-        transform: none !important;
-      }
+      transform: none !important;
+    }
   }
 
   .toggle-button {
@@ -31,8 +29,8 @@
     width: 24px;
     height: 24px;
     border-radius: 50%;
-    background-color: #495057;
-    border: 1px solid #6c757d;
+    background-color: var(--prp-bg-tertiary);
+    border: 1px solid var(--prp-border-primary);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -40,7 +38,8 @@
     z-index: 10;
 
     &:hover {
-      background-color: #6c757d;
+      background-color: var(--prp-bg-tertiary);
+      opacity: 0.9;
     }
   }
 
@@ -55,7 +54,7 @@
       padding: 0.75rem 0;
       white-space: nowrap;
       margin-bottom: 0.5rem;
-      color: #e9ecef;
+      color: var(--prp-text-muted);
       text-decoration: none;
       border-radius: 4px;
       font-weight: 500;
@@ -64,13 +63,15 @@
       overflow: hidden;
 
       &:hover {
-        background-color: rgba(233, 236, 239, 0.1);
+        background-color: var(--prp-bg-tertiary);
+        opacity: 0.8;
         transform: translateX(2px);
       }
 
       &.active {
-        background-color: rgba(233, 236, 239, 0.2);
-        color: #fff;
+        background-color: var(--prp-bg-tertiary);
+        opacity: 0.9;
+        color: var(--prp-text-primary);
         font-weight: 600;
 
         &::before {
@@ -80,7 +81,7 @@
           top: 0;
           height: 100%;
           width: 4px;
-          background-color: #fff;
+          background-color: var(--prp-bg-white);
         }
       }
 
@@ -95,19 +96,19 @@
       margin-top: auto;
 
       a {
-        color: #adb5bd;
+        color: var(--prp-text-secondary);
         font-weight: 400;
       }
     }
   }
-  
+
   .sidebar-footer {
     position: absolute;
     bottom: 0;
     width: 100%;
     padding: 1rem 0;
     border-top: 1px solid #454d55;
-    
+
     .logout-button {
       display: flex;
       align-items: center;
@@ -119,12 +120,13 @@
       cursor: pointer;
       font-weight: 500;
       transition: all 0.2s ease;
-      
+
       &:hover {
-        color: #fff;
-        background-color: rgba(233, 236, 239, 0.1);
+        color: var(--prp-text-primary);
+        background-color: var(--prp-bg-tertiary);
+        opacity: 0.8;
       }
-      
+
       .nav-links-icon {
         display: inline-block;
         width: 60px;

package/src/styles/utils/scrollbar.scss

@@ -5,15 +5,16 @@
   }
 
   &::-webkit-scrollbar-track {
-    background: #2b2b2b;
+    background: var(--prp-bg-secondary);
   }
 
   &::-webkit-scrollbar-thumb {
-    background: #666666;
+    background: var(--prp-bg-tertiary);
     border-radius: 4px;
 
     &:hover {
-      background: #777777;
+      background: var(--prp-bg-tertiary);
+      opacity: 0.9;
     }
   }
 }

package/src/types/Login.ts

@@ -0,0 +1,9 @@
+export interface LoginResponse<T> {
+  access_token: string;
+  admin: T;
+}
+
+export interface LoginForm {
+  username: string;
+  password: string;
+}

package/src/utils/logout.ts

@@ -1,6 +1,8 @@
+import { setAuthLogout } from '../api/ApiConfig';
 import { useAppStore } from '../store/store';
 
 export function logout(navigate: () => void) {
+  setAuthLogout();
   localStorage.removeItem('token');
   useAppStore.getState().logout();
   navigate();

package/dist/components/components/Checkbox.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-import { InputOptions } from '../../decorators/form/Input';
-interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
-    input: InputOptions;
-}
-export declare function Checkbox({ input, ...props }: CheckboxProps): React.JSX.Element;
-export {};

package/dist/components/components/Counter.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-interface CounterProps {
-    image: React.ReactNode;
-    text: string;
-    targetNumber: number;
-    duration?: number;
-}
-export declare function Counter({ image, text, targetNumber, duration }: CounterProps): React.JSX.Element;
-export {};

package/dist/components/components/ErrorBoundary.d.ts

@@ -1,16 +0,0 @@
-import React, { Component, ErrorInfo, ReactNode } from "react";
-interface Props {
-    children: ReactNode;
-}
-interface State {
-    hasError: boolean;
-    error: Error | null;
-    errorInfo: ErrorInfo | null;
-}
-export declare class ErrorBoundary extends Component<Props, State> {
-    state: State;
-    static getDerivedStateFromError(error: Error): State;
-    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
-    render(): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | React.JSX.Element | null | undefined;
-}
-export {};

package/dist/components/components/ErrorComponent.d.ts

@@ -1,4 +0,0 @@
-import React from "react";
-export declare function ErrorComponent({ error }: {
-    error: unknown | Response;
-}): React.JSX.Element;

package/dist/components/components/FormField.d.ts

@@ -1,17 +0,0 @@
-import React from 'react';
-import { InputOptions } from '../../decorators/form/Input';
-import { UseFormRegister } from 'react-hook-form';
-interface FormFieldProps {
-    input: InputOptions;
-    register: UseFormRegister<any>;
-    error?: {
-        message?: string;
-    };
-    baseName?: string;
-    onSelectPreloader?: (inputOptions: InputOptions) => Promise<{
-        label: string;
-        value: string;
-    }[]>;
-}
-export declare function FormField({ input, register, error, baseName, onSelectPreloader }: FormFieldProps): React.JSX.Element;
-export {};

package/dist/components/components/ImageUploader.d.ts

@@ -1,15 +0,0 @@
-import React from "react";
-interface MultipleImageUploaderProps {
-    value?: Array<{
-        file: File;
-        image: string;
-        remove?: boolean;
-    }>;
-    onError?: (error: string | null) => void;
-    onClear?: () => void;
-    reset?: any;
-    onFilesChange?: (files: File[]) => void;
-}
-export declare function ImageUploader(): React.JSX.Element;
-export declare function MultipleImageUploader(props: MultipleImageUploaderProps): React.JSX.Element;
-export {};

package/dist/components/components/InnerForm.d.ts

@@ -1,17 +0,0 @@
-import React from 'react';
-import { InputOptions } from '../../decorators/form/Input';
-import { FormOptions } from '../../decorators/form/FormOptions';
-import { OnSubmitFN, GetDetailsDataFN } from '../pages/FormPage';
-interface InnerFormProps<T> {
-    formOptions: FormOptions;
-    onSubmit: OnSubmitFN<T>;
-    getDetailsData?: GetDetailsDataFN<T>;
-    redirectBackOnSuccess?: boolean;
-    onSelectPreloader?: (inputOptions: InputOptions) => Promise<{
-        label: string;
-        value: string;
-    }[]>;
-    type?: 'json' | 'formData';
-}
-export declare function InnerForm<T>({ formOptions, onSubmit, getDetailsData, redirectBackOnSuccess, onSelectPreloader, type, }: InnerFormProps<T>): React.JSX.Element;
-export {};

package/dist/components/components/Label.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
-    htmlFor: string;
-    label?: string;
-    fieldName: string;
-    children?: React.ReactNode;
-}
-export declare function Label({ label, fieldName, children, ...props }: LabelProps): React.JSX.Element;
-export {};

package/dist/components/components/LoadingScreen.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare function LoadingScreen(): React.JSX.Element;

package/dist/components/components/Uploader.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-import { InputOptions } from '../../decorators/form/Input';
-interface UploaderProps {
-    input: InputOptions;
-    maxLength?: number;
-}
-export declare function Uploader({ input, maxLength }: UploaderProps): React.JSX.Element;
-export {};

package/dist/components/components/index.d.ts

@@ -1,8 +0,0 @@
-export { InnerForm } from './InnerForm';
-export { FormField } from './FormField';
-export { LoadingScreen } from './LoadingScreen';
-export { Counter } from './Counter';
-export { Uploader } from './Uploader';
-export { ErrorComponent } from './ErrorComponent';
-export { Label } from './Label';
-export { ErrorBoundary } from './ErrorBoundary';

package/dist/components/components/list/Datagrid.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import { ListData } from '../../../decorators/list/ListData';
-interface DatagridProps<T> {
-    data: T[];
-    listData: ListData<T>;
-    onRemoveItem?: (item: T) => Promise<void>;
-}
-export declare function Datagrid<T>({ data, listData, onRemoveItem }: DatagridProps<T>): React.JSX.Element;
-export {};

package/dist/components/components/list/EmptyList.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const EmptyList: React.FC;

package/dist/components/components/list/FilterPopup.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-import { ListData } from '../../../decorators/list/ListData';
-interface FilterPopupProps<T> {
-    isOpen: boolean;
-    onClose: () => void;
-    onApplyFilters: (filters: Record<string, string>) => void;
-    listData: ListData<T>;
-    activeFilters?: Record<string, string>;
-}
-export declare function FilterPopup<T>({ isOpen, onClose, onApplyFilters, listData, activeFilters, }: FilterPopupProps<T>): React.ReactElement | null;
-export {};

package/dist/components/components/list/ListPage.d.ts

@@ -1,20 +0,0 @@
-import React from 'react';
-import { AnyClass } from '../../../types/AnyClass';
-export interface GetDataParams {
-    page?: number;
-    limit?: number;
-    filters?: Record<string, any>;
-}
-export interface PaginatedResponse<T> {
-    data: T[];
-    total: number;
-    page: number;
-    limit: number;
-}
-export type GetDataForList<T> = (params: GetDataParams) => Promise<PaginatedResponse<T>>;
-export declare function ListPage<T extends AnyClass>({ model, getData, onRemoveItem, customHeader, }: {
-    model: any;
-    getData: GetDataForList<T>;
-    customHeader?: React.ReactNode;
-    onRemoveItem?: (item: T) => Promise<void>;
-}): React.JSX.Element;