[dev]campaign detail

package-lock.json

@@ -25,6 +25,7 @@
                 "react-bootstrap-range-slider": "^3.0.8",
                 "react-chartjs-2": "^5.3.0",
                 "react-dom": "^19.1.0",
+                "react-dropzone": "^14.3.8",
                 "react-redux": "^9.2.0",
                 "react-router-dom": "^7.6.0",
                 "redux-persist": "^6.0.0"
@@ -1962,6 +1963,14 @@
             "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
             "dev": true
         },
+        "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==",
+            "engines": {
+                "node": ">=4"
+            }
+        },
         "node_modules/balanced-match": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -2790,6 +2799,17 @@
                 "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==",
+            "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",
@@ -4037,6 +4057,22 @@
                 "react": "^19.1.0"
             }
         },
+        "node_modules/react-dropzone": {
+            "version": "14.3.8",
+            "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.3.8.tgz",
+            "integrity": "sha512-sBgODnq+lcA4P296DY4wacOZz3JFpD99fp+hb//iBO2HHnyeZU3FwWyXJ6salNpqQdsZrgMrotuko/BdJMV8Ug==",
+            "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-is": {
             "version": "16.13.1",
             "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

package.json

@@ -27,6 +27,7 @@
         "react-bootstrap-range-slider": "^3.0.8",
         "react-chartjs-2": "^5.3.0",
         "react-dom": "^19.1.0",
+        "react-dropzone": "^14.3.8",
         "react-redux": "^9.2.0",
         "react-router-dom": "^7.6.0",
         "redux-persist": "^6.0.0"

src/pages/CampaignScript.jsx

@@ -1,6 +1,8 @@
 import { useDispatch, useSelector } from 'react-redux';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
-import { Form } from 'react-bootstrap';
+import { Button, Card, Col, Form, Row } from 'react-bootstrap';
+import { CloudUpload, Paperclip } from 'lucide-react';
+import { useDropzone } from 'react-dropzone';
 
 export default function CampaignScript() {
     const dispatch = useDispatch();
@@ -75,7 +77,7 @@ export default function CampaignScript() {
                         Campaigns & Collaborated Creators
                     </div>
                 </div>
-                <div className='product-script-video-req'>
+                <Card className='product-script-video-req'>
                     <Form className='video-req-form'>
                         <div className='form-header'>Video Posting Requirement</div>
                         <Form.Group>
@@ -123,9 +125,101 @@ export default function CampaignScript() {
 3.正确的hashtags 以及正确@官方账号'
                             />
                         </Form.Group>
+                        <Form.Group className='upload-group'>
+                            <FileUpload />
+                        </Form.Group>
                     </Form>
-                </div>
+                    <div className='product-ai-script'>
+                        <div className='header'>
+                            <div className='title'>Script</div>
+                            <Button variant='primary' className='generate-btn'>
+                                AI Generate
+                            </Button>
+                        </div>
+                        <Form className='script-versions'>
+                            <Form.Group>
+                                <Form.Label>Version 1</Form.Label>
+                                <Form.Control type='textarea' as='textarea' rows={4} />
+                            </Form.Group>
+                            <Form.Group>
+                                <Form.Label>Version 2</Form.Label>
+                                <Form.Control type='textarea' as='textarea' rows={4} />
+                            </Form.Group>
+                        </Form>
+                    </div>
+                </Card>
             </div>
         )
     );
 }
+
+const FileUpload = () => {
+    const [files, setFiles] = useState([]);
+
+    const onDrop = useCallback((acceptedFiles) => {
+        setFiles((prev) => [...prev, ...acceptedFiles]);
+    }, []);
+
+    const { getRootProps, getInputProps, isDragActive } = useDropzone({
+        onDrop,
+        accept: {
+            'application/pdf': [],
+            'application/vnd.openxmlformats-officedocument.wordprocessingml.document': [],
+            'image/png': [],
+            'image/jpeg': [],
+            'text/csv': [],
+            'application/vnd.openxmlformats-officedocument.presentationml.presentation': [],
+        },
+    });
+
+    const renderFileIcon = (file) => {
+        if (file.name.endsWith('.pdf')) return <FaFilePdf size={24} color='#6366f1' className='me-2' />;
+        if (file.name.endsWith('.docx')) return <FaFileWord size={24} color='#6366f1' className='me-2' />;
+        return <Paperclip />;
+    };
+
+    return (
+        <Row>
+            <Col md={6}>
+                <div className='form-label'>Documents Upload</div>
+                <div
+                    {...getRootProps()}
+                    style={{
+                        border: '2px dashed #BCC1CAFF',
+                        textAlign: 'center',
+                        padding: '24px',
+                        cursor: 'pointer',
+                        borderRadius: '10px',
+                    }}
+                >
+                    <input {...getInputProps()} />
+                    <div className='d-flex flex-column align-items-center gap-1'>
+                        <CloudUpload size={60} color='#6E7787FF' />
+                        <strong>Drop files here</strong>
+                        <p className='text-muted m-0'>Supported format: PNG, JPG, CSV, PDF, DOCX, PPTX</p>
+                        <p className='text-muted fw-bold m-0'>OR</p>
+                        <span style={{ color: '#6366f1', textDecoration: 'underline' }}>Browse files</span>
+                    </div>
+                </div>
+            </Col>
+
+            <Col md={6}>
+                <div className='form-label'>Uploaded Files</div>
+                {files.length === 0 && <div className='text-muted'>No files uploaded.</div>}
+                {files.map((file, index) => (
+                    <div key={index} className='d-flex align-items-center my-2'>
+                        {renderFileIcon(file)}
+                        <a
+                            href={URL.createObjectURL(file)}
+                            target='_blank'
+                            rel='noreferrer'
+                            className='text-primary text-decoration-none'
+                        >
+                            {file.name}
+                        </a>
+                    </div>
+                ))}
+            </Col>
+        </Row>
+    );
+};

src/styles/Brands.scss

@@ -51,7 +51,9 @@
         }
     }
 }
-
+.brand-tab-switches {
+    margin: 1rem 0;
+}
 .add-brand-form {
     .button-group {
         display: flex;

src/styles/Campaign.scss

@@ -71,6 +71,8 @@
             display: flex;
             flex-flow: column nowrap;
             gap: 0.5rem;
+            padding-bottom: 1rem;
+            border-bottom: 1px solid $neutral-200;
 
             .form-header {
                 font-size: 1.25rem;
@@ -80,6 +82,26 @@
                 color: $neutral-700;
                 font-weight: 700;
                 margin: 0;
+                margin-bottom: 0.25rem;
+            }
+        }
+        .product-ai-script {
+            padding: 1rem 0;
+            .header {
+                display: flex;
+                flex-flow: row nowrap;
+                justify-content: space-between;
+                align-items: center;
+                .title {
+                    font-weight: 700;
+                    font-size: 1.125rem;
+                }
+            }
+            .form-label {
+                color: $neutral-700;
+                font-weight: 700;
+                margin: 0;
+                margin-bottom: 0.25rem;
             }
         }
     }