print

src/pages/order/Print.tsx

@@ -1,8 +1,9 @@
 import { useState, type FC } from 'react'
 import { useParams } from 'react-router-dom'
 import { useFormik } from 'formik'
+import * as Yup from 'yup'
 import { useGetSections } from '../print/hooks/usePrintData'
-import { useGetOrderPrint, useSubmitOrderPrint } from './hooks/useOrderData'
+import { useGetOrderDetails, useGetOrderPrint, useSubmitOrderPrint } from './hooks/useOrderData'
 import type { OrderPrintFormType } from './types/Types'
 import PrintSectionCard from './components/PrintSectionCard'
 import PrintSectionNav from './components/PrintSectionNav'
@@ -10,6 +11,7 @@ import { ORDER_PRINT_STORAGE_KEY } from './PrintPreview'
 import Button from '@/components/Button'
 import BackButton from '@/components/BackButton'
 import RefreshButton from '@/components/RefreshButton'
+import Input from '@/components/Input'
 import { TickSquare } from 'iconsax-react'
 import { toast } from '@/shared/toast'
 import { extractErrorMessage } from '@/config/func'
@@ -19,6 +21,7 @@ const OrderPrint: FC = () => {
     const { id: orderId } = useParams()
     const { data, refetch: refetchSections, isFetching: isSectionsFetching } = useGetSections()
     const { isPending, mutate } = useSubmitOrderPrint()
+    const { data: order, refetch: refetchOrder, isFetching: isOrderFetching } = useGetOrderDetails(orderId!)
     const { data: print, refetch: refetchPrint, isFetching: isPrintFetching } = useGetOrderPrint(orderId!)
 
     const sections = data?.data ?? []
@@ -27,9 +30,13 @@ const OrderPrint: FC = () => {
 
     const formik = useFormik<OrderPrintFormType>({
         initialValues: {
+            title: print?.data?.title || order?.data?.title || '',
             fields: print?.data?.fileds ?? []
         },
         enableReinitialize: true,
+        validationSchema: Yup.object({
+            title: Yup.string().required('این فیلد اجباری می باشد.')
+        }),
         onSubmit: (values) => {
             if (!orderId) return
             mutate(
@@ -87,7 +94,7 @@ const OrderPrint: FC = () => {
 
         sessionStorage.setItem(
             ORDER_PRINT_STORAGE_KEY(orderId),
-            JSON.stringify({ fields: formik.values.fields })
+            JSON.stringify({ title: formik.values.title, fields: formik.values.fields })
         )
 
         const sectionIds = Array.from(selectedSections).join(',')
@@ -96,10 +103,11 @@ const OrderPrint: FC = () => {
 
     const handleRefresh = () => {
         refetchSections()
+        refetchOrder()
         refetchPrint()
     }
 
-    const isRefreshing = isSectionsFetching || isPrintFetching
+    const isRefreshing = isSectionsFetching || isOrderFetching || isPrintFetching
 
     return (
         <div className="mt-5">
@@ -125,6 +133,13 @@ const OrderPrint: FC = () => {
 
             <div className="flex gap-6 mt-6 items-start">
                 <div className="flex-1 flex flex-col gap-5 min-w-0">
+                    <div className="bg-white p-6 rounded-3xl">
+                        <Input
+                            {...formik.getFieldProps('title')}
+                            label="عنوان"
+                            error_text={formik.touched.title && formik.errors.title ? formik.errors.title : ''}
+                        />
+                    </div>
                     {sections.map((section) => (
                         <PrintSectionCard
                             key={section.id}

src/pages/order/PrintPreview.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, type FC } from 'react'
 import { useParams, useSearchParams } from 'react-router-dom'
 import { useGetSections } from '@/pages/print/hooks/usePrintData'
-import { useGetOrderPrint } from './hooks/useOrderData'
+import { useGetOrderDetails, useGetOrderPrint } from './hooks/useOrderData'
 import PrintFieldDisplay from './components/PrintFieldDisplay'
 import Button from '@/components/Button'
 import { Printer } from 'iconsax-react'
@@ -12,6 +12,7 @@ const OrderPrintPreview: FC = () => {
     const { id: orderId } = useParams()
     const [searchParams] = useSearchParams()
     const { data: sectionsData } = useGetSections()
+    const { data: orderData } = useGetOrderDetails(orderId!)
     const { data: printData } = useGetOrderPrint(orderId!)
 
     const selectedSectionIds = useMemo(() => {
@@ -19,18 +20,24 @@ const OrderPrintPreview: FC = () => {
         return param ? param.split(',').filter(Boolean) : []
     }, [searchParams])
 
-    const fieldValues = useMemo(() => {
+    const draft = useMemo(() => {
         const stored = sessionStorage.getItem(ORDER_PRINT_STORAGE_KEY(orderId!))
         if (stored) {
             try {
-                const parsed = JSON.parse(stored) as { fields: { fieldId: string; value: string }[] }
-                return parsed.fields ?? []
+                return JSON.parse(stored) as {
+                    title?: string
+                    fields: { fieldId: string; value: string }[]
+                }
             } catch {
                 // fall through to API data
             }
         }
-        return printData?.data?.fileds ?? []
-    }, [orderId, printData?.data?.fileds])
+        return null
+    }, [orderId])
+
+    const printTitle =
+        draft?.title || printData?.data?.title || orderData?.data?.title || 'فرم چاپ سفارش'
+    const fieldValues = draft?.fields ?? printData?.data?.fileds ?? []
 
     const sections = useMemo(
         () =>
@@ -41,7 +48,7 @@ const OrderPrintPreview: FC = () => {
     const handlePrint = () => window.print()
 
     useEffect(() => {
-        document.title = 'چاپ فرم سفارش'
+        document.title = printTitle
 
         const html = document.documentElement
         const root = document.getElementById('root')
@@ -67,7 +74,7 @@ const OrderPrintPreview: FC = () => {
             resetScroll(document.body)
             if (root) resetScroll(root)
         }
-    }, [])
+    }, [printTitle])
 
     if (!sections.length) {
         return (
@@ -96,7 +103,7 @@ const OrderPrintPreview: FC = () => {
 
             <div className="max-w-[210mm] mx-auto p-8 print:p-0">
                 <header className="text-center mb-8 pb-4 border-b-2 border-gray-800">
-                    <h1 className="text-2xl font-bold text-gray-900">فرم چاپ سفارش</h1>
+                    <h1 className="text-2xl font-bold text-gray-900">{printTitle}</h1>
                     <p className="text-sm text-gray-500 mt-2">
                         {new Date().toLocaleDateString('fa-IR')}
                     </p>
@@ -124,7 +131,7 @@ const OrderPrintPreview: FC = () => {
                 </div>
 
                 <footer className="mt-8 pt-4 border-t border-gray-200 text-center text-xs text-gray-400 print:mt-6">
-                    نگاره — فرم چاپ سفارش
+                    نگاره — {printTitle}
                 </footer>
             </div>
 

src/pages/order/types/Types.ts

@@ -272,11 +272,13 @@ export type OrderPrintFieldType = {
 };
 
 export type OrderPrintFormType = {
+  title: string;
   fields: OrderPrintFieldType[];
 };
 
 export type OrderPrintDataType = {
   id: string;
+  title: string;
   createdAt: string;
   deletedAt: string | null;
   fileds: OrderPrintFieldType[];