From 7a5d9d6447a41e4420bc2320608c6f70b32ea791 Mon Sep 17 00:00:00 2001 From: hamid zarghami Date: Sun, 29 Dec 2024 16:27:07 +0330 Subject: [PATCH] receip and ticket and ... --- package-lock.json | 39 ++++++++ package.json | 1 + src/components/Button.tsx | 2 +- src/components/Input.tsx | 4 +- src/components/Select.tsx | 11 ++- src/components/Textarea.tsx | 25 +++++ src/components/UploadBox.tsx | 44 +++++++++ src/config/Pages.ts | 2 + src/langs/fa.json | 36 ++++++- src/pages/receipts/List.tsx | 104 ++++++++++++++++++++ src/pages/ticket/CreateTicket.tsx | 131 +++++++++++++++++++++++++ src/pages/ticket/Detail.tsx | 157 ++++++++++++++++++++++++++++++ src/pages/ticket/TicketList.tsx | 22 +++-- src/pages/transaction/List.tsx | 18 ++++ src/router/Main.tsx | 8 ++ 15 files changed, 589 insertions(+), 15 deletions(-) create mode 100644 src/components/Textarea.tsx create mode 100644 src/components/UploadBox.tsx create mode 100644 src/pages/receipts/List.tsx create mode 100644 src/pages/ticket/CreateTicket.tsx create mode 100644 src/pages/ticket/Detail.tsx create mode 100644 src/pages/transaction/List.tsx diff --git a/package-lock.json b/package-lock.json index 19ec2f0..8725eb9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,6 +14,7 @@ "iconsax-react": "^0.0.8", "react": "^19.0.0", "react-dom": "^19.0.0", + "react-dropzone": "^14.3.5", "react-i18next": "^15.2.0", "react-loading": "^2.0.3", "react-multi-date-picker": "^4.5.2", @@ -1832,6 +1833,15 @@ "dev": true, "license": "Python-2.0" }, + "node_modules/attr-accept": { + "version": "2.2.5", + "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.5.tgz", + "integrity": "sha512-0bDNnY/u6pPwHDMoF0FieU354oBi0a8rD9FcsLwzcGWbc8KS8KPIi7y+s13OlVY+gMWc/9xEMUgNE6Qm8ZllYQ==", + "license": "MIT", + "engines": { + "node": ">=4" + } + }, "node_modules/autoprefixer": { "version": "10.4.20", "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz", @@ -2522,6 +2532,18 @@ "node": ">=16.0.0" } }, + "node_modules/file-selector": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-2.1.2.tgz", + "integrity": "sha512-QgXo+mXTe8ljeqUFaX3QVHc5osSItJ/Km+xpocx0aSqWGMSCf6qYs/VnzZgS864Pjn5iceMRFigeAV7AfTlaig==", + "license": "MIT", + "dependencies": { + "tslib": "^2.7.0" + }, + "engines": { + "node": ">= 12" + } + }, "node_modules/fill-range": { "version": "7.1.1", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz", @@ -3671,6 +3693,23 @@ "react": "^19.0.0" } }, + "node_modules/react-dropzone": { + "version": "14.3.5", + "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.3.5.tgz", + "integrity": "sha512-9nDUaEEpqZLOz5v5SUcFA0CjM4vq8YbqO0WRls+EYT7+DvxUdzDPKNCPLqGfj3YL9MsniCLCD4RFA6M95V6KMQ==", + "license": "MIT", + "dependencies": { + "attr-accept": "^2.2.4", + "file-selector": "^2.1.0", + "prop-types": "^15.8.1" + }, + "engines": { + "node": ">= 10.13" + }, + "peerDependencies": { + "react": ">= 16.8 || 18.0.0" + } + }, "node_modules/react-element-popper": { "version": "2.1.7", "resolved": "https://registry.npmjs.org/react-element-popper/-/react-element-popper-2.1.7.tgz", diff --git a/package.json b/package.json index 3856163..e7823f0 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "iconsax-react": "^0.0.8", "react": "^19.0.0", "react-dom": "^19.0.0", + "react-dropzone": "^14.3.5", "react-i18next": "^15.2.0", "react-loading": "^2.0.3", "react-multi-date-picker": "^4.5.2", diff --git a/src/components/Button.tsx b/src/components/Button.tsx index d46d9a1..fb4fc65 100644 --- a/src/components/Button.tsx +++ b/src/components/Button.tsx @@ -12,7 +12,7 @@ type Props = { const Button: FC = memo((props: Props) => { const buttonClass = clx( - 'flex rounded-xl items-center justify-center text-center h-12 text-sm bg-primary text-white w-full', + 'flex rounded-xl items-center justify-center text-center h-10 text-sm bg-primary text-white w-full', props.disabled && 'cursor-not-allowed opacity-60', props.className ); diff --git a/src/components/Input.tsx b/src/components/Input.tsx index f66735e..cfcf5ea 100644 --- a/src/components/Input.tsx +++ b/src/components/Input.tsx @@ -22,7 +22,7 @@ const Input: FC = (props: Props) => { const inputClass = clx( 'w-full h-10 text-black block px-4 text-xs rounded-xl border border-border', - props.readOnly && 'bg-gray-100', + props.readOnly && 'bg-gray-100 border-0 text-description', props.variant === 'search' && 'bg-[#EEF0F7] border-0 ps-10', props.className ); @@ -34,7 +34,7 @@ const Input: FC = (props: Props) => { {props.label} -
+
{ diff --git a/src/components/Select.tsx b/src/components/Select.tsx index 49faf8b..7ed2dbd 100644 --- a/src/components/Select.tsx +++ b/src/components/Select.tsx @@ -1,4 +1,5 @@ import { FC, SelectHTMLAttributes } from 'react' +import { clx } from '../helpers/utils' export type ItemsSelectType = { value: string, @@ -9,12 +10,20 @@ type Props = { items: ItemsSelectType[], error_text?: string, placeholder?: string, + label?: string, } & SelectHTMLAttributes const Select: FC = (props: Props) => { return (
- { props.placeholder && diff --git a/src/components/Textarea.tsx b/src/components/Textarea.tsx new file mode 100644 index 0000000..406d495 --- /dev/null +++ b/src/components/Textarea.tsx @@ -0,0 +1,25 @@ +import { FC, InputHTMLAttributes } from 'react' + +type Props = { + label: string, +} & InputHTMLAttributes + +const Textarea: FC = (props: Props) => { + return ( +
+ + + + +
+ ) +} + +export default Textarea \ No newline at end of file diff --git a/src/components/UploadBox.tsx b/src/components/UploadBox.tsx new file mode 100644 index 0000000..a85f3ff --- /dev/null +++ b/src/components/UploadBox.tsx @@ -0,0 +1,44 @@ +import { FC, useCallback, useState } from 'react' +import { useTranslation } from 'react-i18next' +import { useDropzone } from 'react-dropzone' + + +type Props = { + label: string, +} + +const UploadBox: FC = (props: Props) => { + + const { t } = useTranslation('global') + const [file, setFile] = useState() + + const onDrop = useCallback((acceptedFiles: File[]) => { + setFile(acceptedFiles[0]) + }, []) + const { getRootProps, getInputProps } = useDropzone({ onDrop }) + + + return ( +
+
{props.label}
+
+ + +
+ { + file ? + file.name + : + t('no_select_file') + } +
+
+
+ ) +} + +export default UploadBox \ No newline at end of file diff --git a/src/config/Pages.ts b/src/config/Pages.ts index 2b904f8..3cea60d 100644 --- a/src/config/Pages.ts +++ b/src/config/Pages.ts @@ -13,6 +13,8 @@ export const Pages = { receipts: "/receipts", ticket: { list: "/tickets", + create: "/tickets/create", + detail: "/tickets/messages/", }, announcement: "/announcement", criticisms: "/criticisms", diff --git a/src/langs/fa.json b/src/langs/fa.json index 55b23f4..d2d68cd 100644 --- a/src/langs/fa.json +++ b/src/langs/fa.json @@ -40,6 +40,7 @@ "errors": { "required": "این فیلد اجباری می باشد" }, + "description": "توضیحات", "sidebar": { "menu": "منو", "mainpage": "صفحه اصلی", @@ -94,6 +95,37 @@ "date": "تاریخ", "status": "وضعیت", "priority": "الویت", - "detail": "جزییات" - } + "detail": "جزییات", + "submit_your_message": "ثبت پیام شما", + "name": "نام", + "email": "ایمیل", + "subject": "موضوع", + "enter_your_subject": "موضوع درخواست خودرا وارد کنید", + "select_your_service": "سرویس مربوطه", + "not_once": "هیچکدام", + "your_description": "توضیحات شما", + "attachment": "فایل های ضمیمه", + "send": "ارسال", + "title_hint": "جهت پاسخگویی بهتر به مسائل زیر توجه بفرمایید :", + "ticket_number": "تیکت شماره", + "user_name": "نام کاربر", + "expert": "کارشناس: ", + "answer": "پاسخ", + "send_answer": "ارسال پاسخ", + "close_ticket": "بستن تیکت", + "info_ticket": "اطلاعات تیکت", + "update_sms": "به روزرسانی این تیکت از طریق پیامک اطلاع داده میشود" + }, + "receip": { + "receip_list": "لیست صورتحساب ها", + "dont_pay": "پرداخت نشده", + "dont_confrim": "تایید نشده", + "paid": "پرداخت شده", + "canceled": "لغو شده", + "returned": "پس داده شده", + "its_time": "سررسیده شده", + "archive": "بایگانی شده" + }, + "select_file": "انتخاب فایل", + "no_select_file": "هیچ فایلی انتخاب نشده است" } diff --git a/src/pages/receipts/List.tsx b/src/pages/receipts/List.tsx new file mode 100644 index 0000000..324050d --- /dev/null +++ b/src/pages/receipts/List.tsx @@ -0,0 +1,104 @@ +import { FC, useState } from 'react' +import { useTranslation } from 'react-i18next' +import Tabs from '../../components/Tabs' +import { Calendar, CloseCircle, FolderOpen, MoneyChange, WalletCheck, WalletRemove, WalletSearch } from 'iconsax-react' +import Td from '../../components/Td' + +const ReceiptsList: FC = () => { + + const { t } = useTranslation('global') + const [activeTab, setActiveTab] = useState('unpaid') + + return ( +
+
+ {t('receip.receip_list')} +
+ +
+ , + label: t('receip.dont_pay'), + value: 'unpaid' + }, + { + icon: , + label: t('receip.dont_confrim'), + value: 'not_confimed' + }, + { + icon: , + label: t('receip.paid'), + value: 'paid' + }, + { + icon: , + label: t('receip.canceled'), + value: 'canceled' + }, + { + icon: , + label: t('receip.returned'), + value: 'returned' + }, + { + icon: , + label: t('receip.its_time'), + value: 'time' + }, + { + icon: , + label: t('receip.archive'), + value: 'archive' + }, + ]} + onChange={setActiveTab} + /> +
+ +
+ + + + + + + + + + + +
+ + + + + + + +
+ + + + + + + +
+ + + + + + + +
+
+
+ ) +} + +export default ReceiptsList \ No newline at end of file diff --git a/src/pages/ticket/CreateTicket.tsx b/src/pages/ticket/CreateTicket.tsx new file mode 100644 index 0000000..6477faf --- /dev/null +++ b/src/pages/ticket/CreateTicket.tsx @@ -0,0 +1,131 @@ +import { FC } from 'react' +import { useTranslation } from 'react-i18next' +import { SIDEBAR_SIZE_LEFT } from '../../config/Const' +import Input from '../../components/Input' +import Select from '../../components/Select' +import Textarea from '../../components/Textarea' +import UploadBox from '../../components/UploadBox' +import Button from '../../components/Button' +import { TickSquare } from 'iconsax-react' + +const CreateTicket: FC = () => { + + const { t } = useTranslation('global') + + return ( +
+
+ {t('ticket.new_ticket')} +
+ +
+
+
+ {t('ticket.submit_your_message')} +
+ +
+ + +
+ + +
+ + +
+
+