proje-react-panel 1.4.1 → 1.6.0-test-1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "proje-react-panel",
-  "version": "1.4.1",
+  "version": "1.6.0-test-1",
   "type": "module",
   "description": "",
   "author": "SEFA DEMİR",
@@ -33,6 +33,7 @@
     "@types/react": "^19.0.10",
     "@typescript-eslint/eslint-plugin": "^8.26.1",
     "@typescript-eslint/parser": "^8.29.1",
+    "axios": "^1.12.2",
     "class-transformer": "^0.5.1",
     "class-validator": "^0.14.1",
     "eslint": "^9.24.0",
@@ -61,6 +62,7 @@
     "zustand": "^5.0.3"
   },
   "peerDependencies": {
+    "axios": ">=1.0.0",
     "react": ">=19.0.0",
     "react-hook-form": ">=7.54.2",
     "react-router": "7.3.0",

package/src/api/ApiConfig.ts

@@ -0,0 +1,63 @@
+import axios, { AxiosInstance } from 'axios';
+
+let axiosInstance: AxiosInstance;
+
+export interface ApiConfig {
+  baseUrl: string;
+}
+
+export function initApi(config: ApiConfig): void {
+  axiosInstance = axios.create({
+    baseURL: config.baseUrl,
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+
+  axiosInstance.interceptors.response.use(
+    response => response,
+    error => {
+      if (error.response && error.response.status === 401) {
+        setAuthLogout();
+        window.location.href = '/login';
+      }
+      return Promise.reject(error);
+    }
+  );
+}
+
+export function initAuthToken(): void {
+  if (!axiosInstance) {
+    throw new Error('API not initialized. Call initApi first.');
+  }
+  const token = localStorage.getItem('token');
+  if (token) {
+    axiosInstance.defaults.headers.common['Authorization'] = `Bearer ${token}`;
+  }
+}
+
+export function setAuthToken(token: string): void {
+  if (!axiosInstance) {
+    throw new Error('API not initialized. Call initApi first.');
+  }
+  axiosInstance.defaults.headers.common['Authorization'] = `Bearer ${token}`;
+  localStorage.setItem('token', token);
+}
+
+export function setAuthLogout(): void {
+  if (!axiosInstance) {
+    throw new Error('API not initialized. Call initApi first.');
+  }
+  axiosInstance.defaults.headers.common['Authorization'] = null;
+  localStorage.removeItem('token');
+}
+
+export function getAxiosInstance(): AxiosInstance {
+  if (!axiosInstance) {
+    throw new Error('API not initialized. Call initApi first.');
+  }
+  return axiosInstance;
+}
+
+// Export the axios instance for external use
+export { axiosInstance };

package/src/api/AuthApi.ts

@@ -0,0 +1,8 @@
+import { LoginForm, LoginResponse } from '../types/Login';
+import { getAxiosInstance } from './ApiConfig';
+
+export async function login<T>(data: LoginForm | FormData): Promise<LoginResponse<T>> {
+  const axiosInstance = getAxiosInstance();
+  const response = await axiosInstance.post<LoginResponse<T>>('/auth/login', data);
+  return response.data;
+}

package/src/api/CrudApi.ts

@@ -1,65 +1,101 @@
-interface FetchOptions {
-  token: string;
-  baseUrl: string;
-}
+import { GetDataForList, PaginatedResponse, GetDataParams } from '../decorators/list/List';
+import { OnSubmitFN } from '../decorators/form/Form';
+import { GetDetailsDataFN } from '../decorators/details/Details';
+import { getAxiosInstance } from './ApiConfig';
+import { AxiosError } from 'axios';
 
-export const CrudApi = {
-  getList: (options: FetchOptions, api: string) => {
-    return fetch(`${options.baseUrl}/${api}`, {
-      method: 'GET',
-      headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${options.token}` },
-    }).then(res => {
-      if (res.ok) {
-        return res.json();
-      }
-      throw res;
+export function getAll<T>(endpoint: string): GetDataForList<T> {
+  return async (params: GetDataParams): Promise<PaginatedResponse<T>> => {
+    const axiosInstance = getAxiosInstance();
+    const { page = 1, limit = 10 } = params;
+    const response = await axiosInstance.get<{
+      data: T[];
+      total: number;
+    }>(`/${endpoint}`, {
+      params: { page, limit, ...(params.filters ?? {}) },
     });
-  },
-  //TODO: fix this
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  create: (options: FetchOptions, api: string, data: any) => {
-    const headers: HeadersInit = { Authorization: `Bearer ${options.token}` };
-    // Don't set Content-Type for FormData
-    if (!(data instanceof FormData)) {
-      headers['Content-Type'] = 'application/json';
-    }
+    return {
+      data: response.data.data,
+      total: response.data.total,
+      page,
+      limit,
+    };
+  };
+}
+
+export function getOne<T>(endpoint: string, key = 'id'): GetDetailsDataFN<T> {
+  return async (params: Record<string, string>): Promise<T> => {
+    const axiosInstance = getAxiosInstance();
+    const response = await axiosInstance.get<T>(`/${endpoint}/${params[key]}`);
+    return response.data;
+  };
+}
 
-    return fetch(`${options?.baseUrl ?? ''}/${api}`, {
-      method: 'POST',
-      headers,
-      body: data instanceof FormData ? data : JSON.stringify(data),
-    }).then(res => res.json());
-  },
-  //TODO: fix this
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  details: (options: FetchOptions, api: string, id: any) => {
-    return fetch(`${options?.baseUrl ?? ''}/${api}/${id}`, {
-      method: 'GET',
-      headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${options.token}` },
-    }).then(res => {
-      return res.json();
+export function create<T>(endpoint: string): OnSubmitFN<T> {
+  return async (data: T | FormData): Promise<T> => {
+    const axiosInstance = getAxiosInstance();
+    const response = await axiosInstance.post<T>(`/${endpoint}`, data);
+    return response.data;
+  };
+}
+
+export function createFormData<T>(endpoint: string): OnSubmitFN<T> {
+  return async (data: T | FormData): Promise<T> => {
+    const axiosInstance = getAxiosInstance();
+    const response = await axiosInstance.post<T>(`/${endpoint}`, data, {
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
     });
-  },
-  //TODO: fix this
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  edit: (options: FetchOptions, api: string, data: any) => {
-    const headers: HeadersInit = { Authorization: `Bearer ${options.token}` };
-    // Don't set Content-Type for FormData
-    if (!(data instanceof FormData)) {
-      headers['Content-Type'] = 'application/json';
-    }
-    return fetch(`${options?.baseUrl ?? ''}/${api}/${data.id}`, {
-      method: 'PUT',
-      headers,
-      body: data instanceof FormData ? data : JSON.stringify(data),
-    }).then(res => res.json());
-  },
-  delete: (options: FetchOptions, api: string, id: string) => {
-    return fetch(`${options?.baseUrl ?? ''}/${api}/${id}`, {
-      method: 'DELETE',
-      headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${options.token}` },
-    }).then(res => {
-      return res.clone().json();
+    return response.data;
+  };
+}
+
+export function update<T>(endpoint: string, key = 'id'): OnSubmitFN<T> {
+  return async (data: T | FormData): Promise<T> => {
+    const axiosInstance = getAxiosInstance();
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const id = (data as any)[key];
+    const response = await axiosInstance.put<T>(`/${endpoint}/${id}`, data);
+    return response.data;
+  };
+}
+
+export function updateFormData<T>(endpoint: string, key = 'id'): OnSubmitFN<T> {
+  return async (data: T | FormData): Promise<T> => {
+    const axiosInstance = getAxiosInstance();
+    const id = (data as any)[key];
+    const response = await axiosInstance.put<T>(`/${endpoint}/${id}`, data, {
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
     });
-  },
-};
+    return response.data;
+  };
+}
+
+export function updateSimple<T>(endpoint: string): OnSubmitFN<T> {
+  return async (data: T | FormData): Promise<T> => {
+    const axiosInstance = getAxiosInstance();
+    const response = await axiosInstance.put<T>(`/${endpoint}`, data);
+    return response.data;
+  };
+}
+
+export function remove<T>(endpoint: string, key = 'id'): (data: T) => Promise<void> {
+  return async (data: T): Promise<void> => {
+    const axiosInstance = getAxiosInstance();
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const id = (data as any)[key];
+    await axiosInstance
+      .delete<T>(`/${endpoint}/${id}`)
+      .then((res: any) => res.data)
+      .catch((err: AxiosError) => {
+        const messageError = err.response?.data as { message: string };
+        if (messageError?.message) {
+          throw new Error(messageError.message);
+        }
+        throw err;
+      });
+  };
+}

package/src/assets/icons/svg/down-arrow-backup-2.svg

@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 1024 1024" class="icon"  version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M903.232 256l56.768 50.432L512 768 64 306.432 120.768 256 512 659.072z" fill="#000000" /></svg>

package/src/components/DetailsPage.tsx

@@ -33,10 +33,14 @@ export function DetailsPage<T extends AnyClass>({ model, CustomHeader }: Details
   }, [params, detailsClass.getDetailsData, detailsClass]);
 
   useEffect(() => {
+    if (!detailsClass.primaryId) {
+      return;
+    }
+
     setData(data => {
       if (data) {
         const detailsData =
-          allDetailsData?.[detailsClass.key]?.[data[detailsClass.primaryId] as string] ??
+          allDetailsData?.[detailsClass.key]?.[data[detailsClass.primaryId!] as string] ??
           ({} as Partial<T>);
 
         return { ...data, ...detailsData };

package/src/components/list/CellField.tsx

@@ -7,38 +7,53 @@ import { ImageCell } from './cells/ImageCell';
 import { UUIDCell } from './cells/UUIDCell';
 import { DefaultCell } from './cells/DefaultCell';
 import { DownloadCell } from './cells/DownloadCell';
+import { LinkCell } from './cells/LinkCell';
 
 interface CellFieldProps<T extends AnyClass> {
   configuration: CellConfiguration;
-  value: T[keyof T];
+  item: T;
 }
 
 export function CellField<T extends AnyClass>({
   configuration,
-  value,
+  item,
 }: CellFieldProps<T>): React.ReactElement {
   let render;
 
   switch (configuration.type) {
     case 'boolean':
-      render = <BooleanCell value={value} />;
+      render = <BooleanCell item={item} configuration={configuration} />;
       break;
     case 'date':
-      render = <DateCell value={value} />;
+      render = <DateCell item={item} configuration={configuration} />;
       break;
     case 'image':
-      render = <ImageCell value={value} configuration={configuration} />;
+      render = <ImageCell item={item} configuration={configuration} />;
       break;
     case 'uuid':
-      render = <UUIDCell value={value} />;
+      render = <UUIDCell item={item} configuration={configuration} />;
       break;
     case 'download':
-      render = <DownloadCell value={value} configuration={configuration} />;
+      render = <DownloadCell item={item} configuration={configuration} />;
+      break;
+    case 'link':
+      render = <LinkCell item={item} configuration={configuration} />;
       break;
     default:
-      render = <DefaultCell value={value} configuration={configuration} />;
+      render = <DefaultCell item={item} configuration={configuration} />;
       break;
   }
-
-  return <td key={configuration.name}>{render}</td>;
+  const width = configuration.style?.width;
+  const minWidth = configuration.style?.minWidth;
+  return (
+    <td
+      key={configuration.name}
+      style={{
+        minWidth,
+        width,
+      }}
+    >
+      {render}
+    </td>
+  );
 }

package/src/components/list/Datagrid.tsx

@@ -3,6 +3,7 @@ import { Link } from 'react-router';
 import { EmptyList } from './EmptyList';
 import SearchIcon from '../../assets/icons/svg/search.svg';
 import PencilIcon from '../../assets/icons/svg/pencil.svg';
+import DownArrowIcon from '../../assets/icons/svg/down-arrow-backup-2.svg';
 import TrashIcon from '../../assets/icons/svg/trash.svg';
 import { ListPageMeta } from '../../decorators/list/getListPageMeta';
 import { AnyClass } from '../../types/AnyClass';
@@ -23,10 +24,10 @@ export function Datagrid<T extends AnyClass>({
 }: DatagridProps<T>) {
   const cells = listPageMeta.cells;
   const listData = useAppStore(state => state.listData[listPageMeta.class.key]);
-  const listGeneralCells = data?.[0]
-    ? typeof listPageMeta.class.cells === 'function'
-      ? listPageMeta.class.cells?.(data[0])
-      : listPageMeta.class.cells
+  const listActions = data?.[0]
+    ? typeof listPageMeta.class.actions === 'function'
+      ? listPageMeta.class.actions?.(data[0])
+      : listPageMeta.class.actions
     : null;
 
   return (
@@ -38,72 +39,101 @@ export function Datagrid<T extends AnyClass>({
           <thead>
             <tr>
               {cells.map(cellOptions => (
-                <th key={cellOptions.name}>{cellOptions.title ?? cellOptions.name}</th>
+                <th
+                  key={cellOptions.name}
+                  style={{ width: cellOptions.style?.width, minWidth: cellOptions.style?.minWidth }}
+                >
+                  {cellOptions.title ?? cellOptions.name}
+                </th>
               ))}
-              {listGeneralCells?.details && <th>Details</th>}
-              {listGeneralCells?.edit && <th>Edit</th>}
-              {listGeneralCells?.delete && <th>Delete</th>}
+              {(listActions?.details ||
+                listActions?.edit ||
+                listActions?.delete ||
+                listActions?.customActions?.length) && <th style={{ width: '30px' }}>Actions</th>}
             </tr>
           </thead>
           <tbody>
             {data.map((item, index) => {
               const listCells = item
-                ? typeof listPageMeta.class.cells === 'function'
-                  ? listPageMeta.class.cells?.(item)
-                  : listPageMeta.class.cells
+                ? typeof listPageMeta.class.actions === 'function'
+                  ? listPageMeta.class.actions?.(item)
+                  : listPageMeta.class.actions
+                : null;
+              //TODO: memoize this
+              const listDataItem = listPageMeta.class.primaryId
+                ? (listData?.[item[listPageMeta.class.primaryId!] as string] as
+                    | Record<string, unknown>
+                    | undefined)
                 : null;
-              const listDataItem = listData?.[item[listPageMeta.class.primaryId]] as
-                | Record<string, unknown>
-                | undefined;
               return (
                 <tr key={index}>
                   {cells.map((configuration: CellConfiguration) => {
-                    const value = listDataItem?.[configuration.name] ?? item[configuration.name];
                     return (
                       <CellField
                         key={configuration.name}
+                        item={{
+                          ...(listDataItem ?? {}),
+                          ...item,
+                        }}
                         configuration={configuration}
-                        value={value}
                       />
                     );
                   })}
-                  {listCells?.details && (
-                    <td>
-                      <Link to={listCells.details.path} className="util-cell-link">
-                        <SearchIcon className="icon icon-search" />
-                        <span className="util-cell-label">{listCells.details.label}</span>
-                      </Link>
-                    </td>
-                  )}
-                  {listCells?.edit && (
-                    <td>
-                      <Link to={listCells.edit.path} className="util-cell-link">
-                        <PencilIcon className="icon icon-pencil" />
-                        <span className="util-cell-label">{listCells.edit.label}</span>
-                      </Link>
-                    </td>
-                  )}
-                  {listCells?.delete && (
-                    <td>
-                      <a
-                        onClick={() => {
-                          listCells.delete
-                            ?.onRemoveItem?.(item)
-                            .then(() => {
-                              onRemoveItem?.(item);
-                            })
-                            .catch((e: unknown) => {
-                              console.error(e);
-                              const message =
-                                e instanceof Error ? e.message : 'Error deleting item';
-                              alert(message);
-                            });
-                        }}
-                        className="util-cell-link util-cell-link-remove"
-                      >
-                        <TrashIcon className="icon icon-trash" />
-                        <span className="util-cell-label">{listCells.delete.label}</span>
-                      </a>
+                  {(listCells?.details || listCells?.edit || listCells?.delete) && (
+                    <td style={{ width: '30px' }}>
+                      <div className="util-cell-actions">
+                        <p className="util-cell-actions-label">
+                          Actions <DownArrowIcon className="icon icon-down" />
+                        </p>
+                        <ul className="util-cell-actions-list">
+                          {listCells?.details && (
+                            <li>
+                              <Link to={listCells.details.path} className="util-cell-link">
+                                <SearchIcon className="icon icon-search" />
+                                <span className="util-cell-label">{listCells.details.label}</span>
+                              </Link>
+                            </li>
+                          )}
+                          {listCells?.edit && (
+                            <li>
+                              <Link to={listCells.edit.path} className="util-cell-link">
+                                <PencilIcon className="icon icon-pencil" />
+                                <span className="util-cell-label">{listCells.edit.label}</span>
+                              </Link>
+                            </li>
+                          )}
+                          {listCells?.delete && (
+                            <li>
+                              <a
+                                onClick={() => {
+                                  listCells.delete
+                                    ?.onRemoveItem?.(item)
+                                    .then(() => {
+                                      onRemoveItem?.(item);
+                                    })
+                                    .catch((e: unknown) => {
+                                      console.error(e);
+                                      const message =
+                                        e instanceof Error ? e.message : 'Error deleting item';
+                                      alert(message);
+                                    });
+                                }}
+                                className="util-cell-link util-cell-link-remove"
+                              >
+                                <TrashIcon className="icon icon-trash" />
+                                <span className="util-cell-label">{listCells.delete.label}</span>
+                              </a>
+                            </li>
+                          )}
+                          {listCells?.customActions?.map(action => (
+                            <li key={action.label}>
+                              <a onClick={() => action.onClick(item)} className="util-cell-link">
+                                <span className="util-cell-label">{action.label}</span>
+                              </a>
+                            </li>
+                          ))}
+                        </ul>
+                      </div>
                     </td>
                   )}
                 </tr>

package/src/components/list/ListPage.tsx

@@ -106,6 +106,9 @@ export function ListPage<T extends AnyClass>({
       />
       <div className="list-footer">
         <Pagination pagination={pagination} onPageChange={fetchData} />
+        <p className="list-footer-total">
+          TOTAL: {pagination.total} / SHOWING: {pagination.limit}
+        </p>
       </div>
       <FilterPopup
         isOpen={isFilterOpen}

package/src/components/list/cells/BooleanCell.tsx

@@ -1,12 +1,17 @@
 import React from 'react';
 import CheckIcon from '../../../assets/icons/svg/check.svg';
 import CrossIcon from '../../../assets/icons/svg/cross.svg';
+import { AnyClass } from '../../../types/AnyClass';
+import { CellConfiguration } from '../../../decorators/list/Cell';
 
 interface BooleanCellProps {
-  value: boolean;
+  item: AnyClass;
+  configuration: CellConfiguration;
 }
 
-export function BooleanCell({ value }: BooleanCellProps) {
+export function BooleanCell({ item, configuration }: BooleanCellProps) {
+  const value = item[configuration.name];
+
   return value ? (
     <CheckIcon className="icon icon-true" />
   ) : (

package/src/components/list/cells/DateCell.tsx

@@ -1,10 +1,14 @@
 import React from 'react';
+import { AnyClass } from '../../../types/AnyClass';
+import { CellConfiguration } from '../../../decorators/list/Cell';
 
 interface DateCellProps {
-  value: string | number | Date;
+  item: AnyClass;
+  configuration: CellConfiguration;
 }
 
-export function DateCell({ value }: DateCellProps) {
+export function DateCell({ item, configuration }: DateCellProps) {
+  const value = item[configuration.name];
   if (!value) return <>-</>;
 
   const date = new Date(value);

package/src/components/list/cells/DefaultCell.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import { CellConfiguration } from '../../../decorators/list/Cell';
+import { AnyClass } from '../../../types/AnyClass';
 
 interface DefaultCellProps {
-  //TODO: any is not a good solution, we need to find a better way to do this
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  value: any;
+  item: AnyClass;
   configuration: CellConfiguration;
 }
 
-export function DefaultCell({ value, configuration }: DefaultCellProps): React.ReactElement {
+export function DefaultCell({ item, configuration }: DefaultCellProps): React.ReactElement {
+  const value = item[configuration.name];
   return <>{value ? value.toString() : configuration.placeHolder}</>;
 }

package/src/components/list/cells/DownloadCell.tsx

@@ -1,13 +1,15 @@
 import React from 'react';
 import { CellConfiguration } from '../../../decorators/list/Cell';
 import { DownloadCellConfiguration } from '../../../decorators/list/cells/DownloadCell';
+import { AnyClass } from '../../../types/AnyClass';
 
 interface DownloadCellProps {
-  value: string;
+  item: AnyClass;
   configuration: CellConfiguration;
 }
 
-export function DownloadCell({ value, configuration }: DownloadCellProps): React.ReactElement {
+export function DownloadCell({ item, configuration }: DownloadCellProps): React.ReactElement {
+  const value = item[configuration.name];
   if (!value) return <>-</>;
 
   const downloadConfiguration = configuration as DownloadCellConfiguration;

package/src/components/list/cells/ImageCell.tsx

@@ -1,13 +1,16 @@
 import React from 'react';
 import { CellConfiguration } from '../../../decorators/list/Cell';
 import { ImageCellConfiguration } from '../../../decorators/list/cells/ImageCell';
+import { AnyClass } from '../../../types/AnyClass';
+
 interface ImageCellProps {
-  value: string;
+  item: AnyClass;
   configuration: CellConfiguration;
 }
 
-export function ImageCell({ value, configuration }: ImageCellProps) {
+export function ImageCell({ item, configuration }: ImageCellProps) {
   const imageConfiguration = configuration as ImageCellConfiguration;
+  const value = item[configuration.name];
   if (!value) return <>-</>;
 
   return (