print form

src/pages/order/components/PrintFieldDisplay.tsx

@@ -0,0 +1,44 @@
+import { type FC } from 'react'
+import type { EntityType } from '@/pages/formBuilder/types/Types'
+import type { OrderPrintFieldType } from '../types/Types'
+import { FieldTypeEnum } from '@/pages/formBuilder/enum/Enum'
+
+type Props = {
+    fields: EntityType[]
+    values: OrderPrintFieldType[]
+}
+
+const PrintFieldDisplay: FC<Props> = ({ fields, values }) => {
+    const getValue = (fieldId: string) =>
+        values.find((v) => v.fieldId === fieldId)?.value ?? ''
+
+    return (
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-4">
+            {fields.map((field) => {
+                const value = getValue(field.id)
+                const displayValue =
+                    field.type === FieldTypeEnum.checkbox && value
+                        ? value.split(',').map((v) => v.trim()).filter(Boolean).join('، ')
+                        : value || '—'
+
+                return (
+                    <div
+                        key={field.id}
+                        className={
+                            field.type === FieldTypeEnum.textarea
+                                ? 'sm:col-span-2'
+                                : ''
+                        }
+                    >
+                        <div className="text-xs text-gray-500 mb-1">{field.name}</div>
+                        <div className="text-sm text-gray-900 font-medium border-b border-gray-200 pb-1.5 min-h-[28px]">
+                            {displayValue}
+                        </div>
+                    </div>
+                )
+            })}
+        </div>
+    )
+}
+
+export default PrintFieldDisplay

src/pages/order/components/PrintSectionCard.tsx

@@ -0,0 +1,32 @@
+import { type FC } from 'react'
+import type { FormikProps } from 'formik'
+import type { EntityType } from '@/pages/formBuilder/types/Types'
+import type { OrderPrintFormType } from '../types/Types'
+import ManageForms from '@/pages/print/components/ManageForms'
+
+type Props = {
+    title: string
+    fields: EntityType[]
+    formik: FormikProps<OrderPrintFormType>
+}
+
+const PrintSectionCard: FC<Props> = ({ title, fields, formik }) => {
+    return (
+        <div className="flex bg-white rounded-2xl overflow-hidden border border-gray-200 shadow-sm min-h-[100px]">
+            <div className="bg-gray-100 flex items-center justify-center px-3 py-6 shrink-0 w-[72px]">
+                <h2 className="text-xl font-bold text-gray-700 [writing-mode:vertical-rl] rotate-180 whitespace-nowrap tracking-wide">
+                    {title}
+                </h2>
+            </div>
+            <div className="flex-1 p-6">
+                <ManageForms
+                    formik={formik}
+                    attributes={fields}
+                    formFieldKey="fields"
+                />
+            </div>
+        </div>
+    )
+}
+
+export default PrintSectionCard

src/pages/order/components/PrintSectionNav.tsx

@@ -0,0 +1,81 @@
+import { type FC } from 'react'
+import { Checkbox } from '@/components/ui/checkbox'
+import Button from '@/components/Button'
+import { Printer } from 'iconsax-react'
+import type { SectionItemType } from '@/pages/print/types/Types'
+
+type Props = {
+    sections: SectionItemType[]
+    selectedIds: Set<string>
+    onToggle: (id: string) => void
+    onToggleAll: (checked: boolean) => void
+    onSelectFilled: () => void
+    onPrint: () => void
+}
+
+const PrintSectionNav: FC<Props> = ({
+    sections,
+    selectedIds,
+    onToggle,
+    onToggleAll,
+    onSelectFilled,
+    onPrint,
+}) => {
+    const allSelected = sections.length > 0 && selectedIds.size === sections.length
+    const someSelected = selectedIds.size > 0 && selectedIds.size < sections.length
+
+    return (
+        <aside className="w-80 shrink-0 sticky top-4 self-start">
+            <div className="bg-white rounded-2xl border border-gray-200 shadow-sm p-5 flex flex-col gap-4">
+                <h3 className="text-sm font-bold text-gray-800 border-b border-gray-100 pb-3">
+                    بخش‌های چاپ
+                </h3>
+
+                <div className="flex items-center justify-between gap-2 pb-2 border-b border-gray-100">
+                    <label className="flex items-center gap-2.5 cursor-pointer">
+                        <Checkbox
+                            checked={allSelected ? true : someSelected ? 'indeterminate' : false}
+                            onCheckedChange={(checked) => onToggleAll(checked === true)}
+                        />
+                        <span className="text-sm text-gray-600">انتخاب همه</span>
+                    </label>
+                    <button
+                        type="button"
+                        onClick={onSelectFilled}
+                        className="text-xs text-[#8C90A3] hover:text-black border border-border rounded-lg px-2.5 py-1.5 transition-colors shrink-0 whitespace-nowrap"
+                    >
+                        دارای مقدار
+                    </button>
+                </div>
+
+                <div className="flex flex-col gap-3">
+                    {sections.map((section) => (
+                        <label
+                            key={section.id}
+                            className="flex items-center gap-2.5 cursor-pointer hover:bg-gray-50 rounded-lg p-1.5 -mx-1.5 transition-colors"
+                        >
+                            <Checkbox
+                                checked={selectedIds.has(section.id)}
+                                onCheckedChange={() => onToggle(section.id)}
+                            />
+                            <span className="text-sm text-gray-700 leading-snug">{section.title}</span>
+                        </label>
+                    ))}
+                </div>
+
+                <Button
+                    className="mt-2 w-full"
+                    onClick={onPrint}
+                    disabled={selectedIds.size === 0}
+                >
+                    <div className="flex gap-2 items-center justify-center">
+                        <Printer size={18} color="black" />
+                        <span className="text-[13px] font-medium">چاپ</span>
+                    </div>
+                </Button>
+            </div>
+        </aside>
+    )
+}
+
+export default PrintSectionNav