PurchaseOrderForm 기본 로직 생성

src/components/PurchaseOrderForm/index.tsx

@@ -0,0 +1,116 @@
+import { createPurchaseOrder, getAllItems, getAllSuppliers } from "@/service/api";
+import { Button, Card, DatePicker, Form, FormLayout, LegacyStack, Page, Range, Select, TextContainer, TextField } from "@shopify/polaris";
+import React, { useState, useEffect } from "react";
+
+const PurchaseOrderForm = () => {
+
+  const [supplierId, setSupplierId] = useState('');
+  const [dueDate, setDueDate] = useState(new Date());
+  const [memo, setMemo] = useState('');
+  const [items, setItems] = useState([{ itemId: '', quantity: '' }]);
+  const [availableItems, setAvailableItems] = useState<{ label: string, value: string }[]>([]);
+  const [suppliers, setSuppliers] = useState<{ label: string, value: string }[]>([]);
+
+  useEffect(() => {
+    const fetchSuppliersAndItems = async () => {
+      const suppliersResponse = await getAllSuppliers();
+      setSuppliers(suppliersResponse.map(supplier => ({
+        label: supplier.supplierName,
+        value: supplier.id.toString()
+      })));
+
+      const itemsResponse = await getAllItems();
+      setAvailableItems(itemsResponse.map(item => ({
+        label: item.name,
+        value: item.id.toString()
+      })));
+    };
+
+    fetchSuppliersAndItems();
+  }, []);
+
+  const handleItemChange = (index: number, value: string, name: string) => {
+    const newItems = [...items];
+    newItems[index] = { ...newItems[index], [name]: value };
+    setItems(newItems);
+  }
+  const handleSubmit = async () => {
+    interface PurchaseOrderItem {
+      item: { id: number };
+      quantity: number;
+    }
+
+    const purchaseOrder = {
+      orderNumber: '', // Add the orderNumber property
+      orderDate: new Date(),
+      dueDate: new Date(dueDate),
+      status: '', // Add the status property
+      // items: items.map((item): PurchaseOrderItem => ({
+      //   item: { id: parseInt(item.itemId, 10) },
+      //   quantity: parseInt(item.quantity, 10)
+      // })),
+      // supplier: { id: parseInt(supplierId, 10) },
+    };
+    await createPurchaseOrder(purchaseOrder);
+  };
+
+  const handleAddItem = () => setItems([...items, { itemId: '', quantity: '' }]);
+
+  const handleDateChange = (date: Range) => {
+    setDueDate(date.start);
+  };
+
+  return (
+    <Page title="Create Purchase Order">
+      <Card>
+        <Form onSubmit={handleSubmit}>
+          <FormLayout>
+            <Select
+              label="Supplier"
+              options={suppliers}
+              value={supplierId}
+              onChange={(value) => setSupplierId(value)}
+            />
+            <DatePicker
+              month={dueDate.getMonth()}
+              year={dueDate.getFullYear()}
+              onChange={handleDateChange}
+              selected={dueDate}
+              allowRange={false}
+            />
+            <TextField
+              autoComplete="off"
+              label="Memo"
+              value={memo}
+              onChange={(value) => setMemo(value)}
+              multiline={4}
+            />
+            <TextContainer>
+              {items.map((item, index) => (
+                <LegacyStack key={index} alignment="center">
+                  <Select
+                    label="Item"
+                    options={availableItems}
+                    value={item.itemId}
+                    onChange={(value) => handleItemChange(index, value, 'itemId')}
+                  />
+                  <TextField
+                    autoComplete="off"
+                    label="Quantity"
+                    type="number"
+                    value={item.quantity}
+                    onChange={(value) => handleItemChange(index, value, 'quantity')}
+                  />
+                </LegacyStack>
+              ))}
+              <Button onClick={handleAddItem}>Add Another Item</Button>
+            </TextContainer>
+            <Button submit primary>Create Purchase Order</Button>
+          </FormLayout>
+        </Form>
+      </Card>
+    </Page>
+  );
+};
+
+export default PurchaseOrderForm;

src/route/MainRoutes/index.tsx

@@ -11,6 +11,7 @@ import InsertProduct from '../InsertProduct';
 import Product from '../Product';
 import SellerDashboard from '../../components/SellerDashboard';
 import InventoryManagement from '../InventoryManagement';
+import PurchaseOrderForm from '@/components/PurchaseOrderForm';
 
 const MainRoutes = () => {
   console.log("hihi mainroutes")
@@ -27,6 +28,7 @@ const MainRoutes = () => {
       <Route path="/productDetail" element={<ProductDetail />} />
       <Route path="/insertProduct" element={<InsertProduct />} />
       <Route path="/insertProducts" element={<InsertProducts />} />
+      <Route path="/create-purchase-order" element={<PurchaseOrderForm />} />
     </Routes>
   )
 };

src/service/api.ts

@@ -1,6 +1,9 @@
 import { ExpectedReceipt } from "@/types/expectedReceipt";
-import { Receipt } from "@/types/Receipt";
+import { PurchaseOrder } from "@/types/purchaseOrder";
+import { Receipt } from "../types/receipt";
+import { Supplier } from "@/types/supplier";
 import axios from "axios";
+import { Item } from "@/types/item";
 
 const api = axios.create({
   baseURL: process.env.BASE_URL || 'http://localhost:8080/api'
@@ -29,4 +32,16 @@ export const getReceipts = async (): Promise<Receipt[]> => {
   return handleApiCall(api.get<Receipt[]>('/receipts'));
 }
 
+//purchase order
+
+export const createPurchaseOrder = async (purchaseOrder: PurchaseOrder) => {
+  handleApiCall(api.post('/purchase-orders', purchaseOrder));
+};
+export const getAllSuppliers = async (): Promise<Supplier[]> => {
+  return handleApiCall(api.get<Supplier[]>('/suppliers'));
+};
+export const getAllItems = async (): Promise<Item[]> => {
+  return await handleApiCall(api.get('/items'));
+};
+
 export default api;

src/types/item.ts

@@ -0,0 +1,12 @@
+export interface Item {
+  id: number;
+  name: string;
+  specification: string;
+  unit: string;
+  category: string;
+  barcode: string;
+  image: string;
+  price: string;
+  stockAlertLevel?: number;
+  // inventories: Inventory[];
+}

src/types/purchaseOrder.ts

@@ -0,0 +1,11 @@
+import { PurchaseOrderItem } from "./purchaseOrderItem";
+import { Supplier } from "./supplier";
+
+export interface PurchaseOrder {
+  orderNumber: string;
+  orderDate: Date; // LocalDate -> string
+  dueDate: Date; // LocalDate -> string
+  status: string;
+  items?: PurchaseOrderItem[]; // 1개의 구매 주문에는 여러개의 purchaseOrderItem이 있을 수 있다.
+  supplier?: Supplier; // 여러개의 구매 주문은 1개의 공급자에게 발주될 수 있다.
+}

src/types/purchaseOrderItem.ts

@@ -0,0 +1,11 @@
+import { Item } from "./item";
+import { PurchaseOrder } from "./purchaseOrder";
+
+export interface PurchaseOrderItem {
+  id: number;
+  productCode: number;
+  quantity: number;
+  unitPrice: number;
+  purchaseOrder: PurchaseOrder;
+  item: Item;
+}

src/types/supplier.ts

@@ -0,0 +1,10 @@
+import { PurchaseOrder } from "./purchaseOrder";
+
+export interface Supplier {
+  id: number;
+  supplierName: string;
+  contactInfo: string;
+  address: String;
+  supplierType: string; // Change to Enum
+  purchaseOrder: PurchaseOrder[];
+}