feat: 🎸 create table component and test in order

.gitignore

@@ -14,3 +14,6 @@ vitest.config.*.timestamp*
 
 .nx
 .vscode
+
+.cursor/rules/nx-rules.mdc
+.github/instructions/nx.instructions.md

apps/be-api/src/app/app.ts

@@ -6,7 +6,6 @@ import * as path from 'path';
 export interface AppOptions {}
 
 export async function app(fastify: FastifyInstance, opts: AppOptions) {
-
   fastify.register(AutoLoad, {
     dir: path.join(__dirname, 'plugins'),
     options: { ...opts },

apps/fe-admin/src/components/ActionButtons/ActionButtons.module.scss

@@ -0,0 +1,4 @@
+.ActionButtons {
+  display: flex;
+  gap: 10px;
+}

apps/fe-admin/src/components/ActionButtons/ActionButtons.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { MdDelete, MdEdit } from 'react-icons/md';
+import { CustomButton } from '@shopery/ui-shared';
+import styles from './ActionButtons.module.scss';
+
+type ActionButtonsProps = {
+  onEdit?: () => void;
+  onDelete?: () => void;
+};
+
+const ActionButtons = ({ onEdit, onDelete }: ActionButtonsProps) => {
+  return (
+    <div className={styles.ActionButtons}>
+      <CustomButton onClick={onEdit}>
+        <MdEdit />
+      </CustomButton>
+      <CustomButton onClick={onDelete}>
+        <MdDelete />
+      </CustomButton>
+    </div>
+  );
+};
+
+export default ActionButtons;

apps/fe-admin/src/components/User/User.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button } from '@shopery/ui-shared';
+import { CustomButton } from '@shopery/ui-shared';
 import styles from './User.module.scss';
 import { User } from '../../types';
 import UserAvatarIcon from '@assets/icons/userAvatar.svg?react';
@@ -15,9 +15,9 @@ const UserComponent: React.FC<UserProps> = ({ user }) => {
         <p className={styles.userName}>{user.name}</p>
         <UserAvatarIcon className={styles.userIcon} />
       </div>
-      <Button size='small' variant='fill'>
+      <CustomButton size='small' variant='fill'>
         {'<- Log Out'}
-      </Button>
+      </CustomButton>
     </div>
   );
 };

apps/fe-admin/src/components/index.ts

@@ -1 +1,2 @@
 export { default as Sidebar } from './Sidebar/Sidebar';
+export { default as ActionsButtons } from './ActionButtons/ActionButtons';

apps/fe-admin/src/data/OrderTableData.ts

@@ -0,0 +1,86 @@
+export const dataSource = [
+  {
+    id: 1,
+    userId: 101,
+    totalNumberOfProducts: 2,
+    totalPrice: 50,
+    status: 'pending',
+  },
+  {
+    id: 2,
+    userId: 102,
+    totalNumberOfProducts: 3,
+    totalPrice: 75,
+    status: 'shipped',
+  },
+  {
+    id: 3,
+    userId: 103,
+    totalNumberOfProducts: 1,
+    totalPrice: 25,
+    status: 'delivered',
+  },
+  {
+    id: 4,
+    userId: 104,
+    totalNumberOfProducts: 5,
+    totalPrice: 100,
+    status: 'pending',
+  },
+  {
+    id: 5,
+    userId: 105,
+    totalNumberOfProducts: 4,
+    totalPrice: 80,
+    status: 'shipped',
+  },
+  {
+    id: 6,
+    userId: 106,
+    totalNumberOfProducts: 2,
+    totalPrice: 60,
+    status: 'delivered',
+  },
+  {
+    id: 7,
+    userId: 107,
+    totalNumberOfProducts: 3,
+    totalPrice: 90,
+    status: 'pending',
+  },
+  {
+    id: 8,
+    userId: 108,
+    totalNumberOfProducts: 1,
+    totalPrice: 30,
+    status: 'shipped',
+  },
+  {
+    id: 9,
+    userId: 109,
+    totalNumberOfProducts: 6,
+    totalPrice: 120,
+    status: 'delivered',
+  },
+  {
+    id: 10,
+    userId: 110,
+    totalNumberOfProducts: 2,
+    totalPrice: 40,
+    status: 'pending',
+  },
+  {
+    id: 11,
+    userId: 111,
+    totalNumberOfProducts: 3,
+    totalPrice: 70,
+    status: 'shipped',
+  },
+  {
+    id: 12,
+    userId: 112,
+    totalNumberOfProducts: 4,
+    totalPrice: 90,
+    status: 'delivered',
+  },
+];

apps/fe-admin/src/data/index.ts

@@ -0,0 +1 @@
+export { dataSource } from './OrderTableData';

apps/fe-admin/src/layouts/index.ts

@@ -1 +1 @@
-export { default as PageLayout } from './pageLayout/PageLayout';
+export { default as PageLayout } from './pageLayout/pageLayout';

apps/fe-admin/src/pages/DashboardPage.tsx

@@ -1,11 +1,11 @@
-import { Button } from '@shopery/ui-shared';
+import { CustomButton } from '@shopery/ui-shared';
 
 const DashboardPage = () => {
   return (
     <section>
-      <Button variant='fill' size='small'>
+      <CustomButton variant='fill' size='small'>
         Test
-      </Button>
+      </CustomButton>
     </section>
   );
 };

apps/fe-admin/src/pages/OrderPage/OrderPage.tsx

@@ -0,0 +1,163 @@
+import {
+  CustomButton,
+  CustomInput,
+  CustomModal,
+  CustomSelect,
+  CustomTable,
+} from '@shopery/ui-shared';
+import { useDeferredValue, useState } from 'react';
+import { Controller, useForm, useWatch } from 'react-hook-form';
+import ActionButtons from '../../components/ActionButtons/ActionButtons';
+import { dataSource } from '../../data';
+import styles from './OrderPage.module.scss';
+
+const OrderPage = () => {
+  const [orderData, setOrderData] = useState(dataSource);
+  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+  const [orderId, setOrderId] = useState<number | null>(null);
+  const [editStatus, setEditStatus] = useState<string | null>(null);
+  const { control } = useForm({
+    defaultValues: {
+      search: '',
+    },
+  });
+
+  const columns = [
+    { title: 'Order ID', dataIndex: 'id', key: 'id' },
+    { title: 'User', dataIndex: 'userId', key: 'userId' },
+    {
+      title: 'Total number of products',
+      dataIndex: 'totalNumberOfProducts',
+      key: 'totalNumberOfProducts',
+    },
+    { title: 'Total Price', dataIndex: 'totalPrice', key: 'totalPrice' },
+    { title: 'Status', dataIndex: 'status', key: 'status' },
+    {
+      title: 'Actions',
+      key: 'actions',
+      render: (record) => (
+        <ActionButtons
+          onEdit={() => handleOpenEditModal(record.id, record.status)}
+          onDelete={() => handleOpenDeleteModal(record.id)}
+        />
+      ),
+    },
+  ];
+
+  const statusOptions = [
+    { value: 'pending', label: 'Pending' },
+    { value: 'shipped', label: 'Shipped' },
+    { value: 'delivered', label: 'Delivered' },
+  ];
+
+  const handleOpenEditModal = (id: number, status: string) => {
+    setOrderId(id);
+    setIsEditModalOpen(true);
+    setEditStatus(status);
+  };
+
+  const handleOpenDeleteModal = (id: number) => {
+    setOrderId(id);
+    setIsDeleteModalOpen(true);
+  };
+
+  const searchValue = useWatch({ control, name: 'search' });
+  const debouncedSearch = useDeferredValue(searchValue?.trim() ?? '', 400);
+
+  const filteredData = orderData.filter((item) => {
+    if (!debouncedSearch) return true;
+    const searchStr = debouncedSearch.toLowerCase();
+
+    const matchesSearch = [
+      item.id,
+      item.userId,
+      item.totalNumberOfProducts,
+      item.totalPrice,
+      item.status?.toLowerCase(),
+    ].some((field) => String(field).includes(searchStr));
+
+    return matchesSearch;
+  });
+
+  const handleDelete = (id: number) => {
+    setOrderData(orderData.filter((item) => item.id !== id));
+    setIsDeleteModalOpen(false);
+    setOrderId(null);
+  };
+
+  const handleSave = () => {
+    if (typeof editStatus !== 'string') return;
+    setOrderData((prev) =>
+      prev.map((item) => {
+        if (item.id === orderId) {
+          return { ...item, status: editStatus };
+        }
+        return item;
+      })
+    );
+    setIsEditModalOpen(false);
+    setEditStatus(null);
+    setOrderId(null);
+  };
+
+  return (
+    <section className={styles.orderPage}>
+      <h1>Orders</h1>
+      <form>
+        <Controller
+          name='search'
+          control={control}
+          render={({ field, fieldState }) => (
+            <CustomInput
+              placeholder='Search...'
+              {...field}
+              hasError={!!fieldState.error}
+              error={fieldState.error?.message}
+            />
+          )}
+        />
+      </form>
+      <CustomSelect
+        prefix='Filter by status:'
+        options={[{ value: 'all', label: 'All' }, ...statusOptions]}
+      />
+      <CustomTable columns={columns} dataSource={filteredData} />
+      <CustomModal
+        open={isEditModalOpen}
+        onCancel={() => setIsEditModalOpen(false)}
+        title='Edit Order'
+        footer={
+          <CustomButton variant='fill' onClick={() => handleSave()}>
+            Save
+          </CustomButton>
+        }
+      >
+        <CustomSelect
+          value={editStatus}
+          options={statusOptions}
+          onChange={(value: string) => setEditStatus(value)}
+        />
+      </CustomModal>
+      <CustomModal
+        open={isDeleteModalOpen}
+        onCancel={() => setIsDeleteModalOpen(false)}
+        title='Delete Order'
+        footer={
+          <CustomButton
+            variant='danger'
+            onClick={() => {
+              handleDelete(orderId as number);
+            }}
+          >
+            Delete
+          </CustomButton>
+        }
+      >
+        <p>Are you sure you want to delete this order?</p>
+      </CustomModal>
+    </section>
+  );
+};
+
+export default OrderPage;

apps/fe-admin/src/pages/index.ts

@@ -1,4 +1,4 @@
 export { default as DashboardPage } from './DashboardPage';
-export { default as OrderPage } from './OrderPage';
+export { default as OrderPage } from './OrderPage/OrderPage';
 export { default as ProductPage } from './ProductPage';
 export { default as UserPage } from './UserPage';

libs/ui/ui-shared/src/lib/components/Button/Button.module.scss → libs/ui/ui-shared/src/lib/components/CustomButton/CustomButton.module.scss

@@ -32,6 +32,14 @@
     color: $tertiary;
   }
 }
+.danger {
+  background-color: $danger;
+  border: none;
+  color: $white;
+  &:hover {
+    filter: brightness(0.9);
+  }
+}
 .small {
   padding: 10px 24px;
   font-size: $font-size-xs;

libs/ui/ui-shared/src/lib/components/Button/Button.tsx → libs/ui/ui-shared/src/lib/components/CustomButton/CustomButton.tsx

@@ -1,14 +1,14 @@
 import { clsx } from 'clsx';
 import React, { ButtonHTMLAttributes } from 'react';
-import styles from './Button.module.scss';
+import styles from './CustomButton.module.scss';
 
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  children: string;
-  variant?: 'fill' | 'border' | 'ghost';
+  children: React.ReactNode;
+  variant?: 'fill' | 'border' | 'ghost' | 'danger';
   size?: 'small' | 'medium' | 'large';
 }
 
-export const Button: React.FC<ButtonProps> = ({
+export const CustomButton: React.FC<ButtonProps> = ({
   children,
   variant = 'fill',
   size = 'small',
@@ -30,4 +30,4 @@ export const Button: React.FC<ButtonProps> = ({
   );
 };
 
-export default Button;
+export default CustomButton;