The preview failed to compile with the following build error: ``` ./components/meeting-form.tsx:454:3 Return statement is not allowed here 452 | } 453 | > 454 | return ( | ^^^^^^^ > 455 | <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 p-6 flex it... | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 456 | <Card className="w-full max-w-2xl shadow-lg"> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 457 | <form onSubmit={handleSubmit} className="p-8 space-y-8"> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 458 | <div> | ^^^^^^^^^^^^^^^ > 459 | <h1 className="text-3xl font-bold text-slate-900 mb-2"> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 460 | Create Meeting | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 461 | </h1> | ^^^^^^^^^^^^^^^^^ > 462 | <p className="text-slate-600"> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 463 | Set up your meeting with participants | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 464 | </p> | ^^^^^^^^^^^^^^^^ > 465 | </div> | ^^^^^^^^^^^^^^^^ > 466 | | ^ > 467 | {/* Basic Details Section */} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 468 | <div className="space-y-5"> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 469 | <div> | ^^^^^^^^^^^^^^^^^ > 470 | <Label htmlFor="title" className="text-sm font-semibold"> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 471 | Meeting Title | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 472 | </Label> | ^^^^^^^^^^^^^^^^^^^^^^ > 473 | <Input | ^^^^^^^^^^^^^^^^^^^^ > 474 | id="title" | ^^^^^^^^^^^^^^^^^^^^^^^^^^ > 475 | placeholder="e.g., Quarterly Planning Session" | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 476 | value={formData.title} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 477 | onChange={(e) => | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 478 | setFormData({ ...formData, title: e.target.value }) | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 479 | } | ^^^^^^^^^^^^^^^^^ > 480 | className="mt-2" | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 481 | /> | ^^^^^^^^^^^^^^^^ > 482 | </div> | ^^^^^^^^^^^^^^^^^^ > 483 | | ^ > 484 | <div className="grid grid-cols-2 gap-4"> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 485 | <div> | ^^^^^^^^^^^^^^^^^^^ > 486 | <Label htmlFor="starts_at" className="text-sm font-semibold"> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 487 | Start Time | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 488 | </Label> | ^^^^^^^^^^^^^^^^^^^^^^^^ > 489 | <Input | ^^^^^^^^^^^^^^^^^^^^^^ > 490 | id="starts_at" | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 491 | type="datetime-local" | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 492 | value={formData.starts_at} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 493 | onChange={(e) => | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 494 | setFormData({ ...formData, starts_at: e.target.value }) | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 495 | } | ^^^^^^^^^^^^^^^^^^^ > 496 | className="mt-2" | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 497 | /> | ^^^^^^^^^^^^^^^^^^ > 498 | </div> | ^^^^^^^^^^^^^^^^^^^^ > 499 | <div> | ^^^^^^^^^^^^^^^^^^^ > 500 | <Label htmlFor="ends_at" className="text-sm font-semibold"> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 501 | End Time | ^^^^^^^^^^^^^^^^^^^^^^^^^^ > 502 | </Label> | ^^^^^^^^^^^^^^^^^^^^^^^^ > 503 | <Input | ^^^^^^^^^^^^^^^^^^^^^^ > 504 | id="ends_at" | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 505 | type="datetime-local" | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 506 | value={formData.ends_at} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 507 | onChange={(e) => | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 508 | setFormData({ ...formData, ends_at: e.target.value }) | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 509 | } | ^^^^^^^^^^^^^^^^^^^ > 510 | className="mt-2" | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 511 | /> | ^^^^^^^^^^^^^^^^^^ > 512 | </div> | ^^^^^^^^^^^^^^^^^^^^ > 513 | </div> | ^^^^^^^^^^^^^^^^^^ > 514 | </div> | ^^^^^^^^^^^^^^^^ > 515 | | ^ > 516 | {/* Divider */} | ^^^^^^^^^^^^^^^^^^^^^^^^^ > 517 | <div className="border-t border-slate-200" /> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 518 | | ^ > 519 | {/* Section 1: Organizational Hierarchy */} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 520 | <div className="space-y-4"> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 521 | <div className="flex items-center gap-2"> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 522 | <div className="flex items-center justify-center w-8 h-8 rounded-full bg-bl... | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 523 | 1 | ^^^^^^^^^^^^^^^^^ > 524 | </div> | ^^^^^^^^^^^^^^^^^^^^ > 525 | <h2 className="text-lg font-bold text-slate-900"> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 526 | Select Organization Level | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 527 | </h2> | ^^^^^^^^^^^^^^^^^^^ > 528 | <p className="text-xs text-slate-500 ml-auto"> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 529 | (Automatically includes all members) | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 530 | </p> | ^^^^^^^^^^^^^^^^^^ > 531 | </div> | ^^^^^^^^^^^^^^^^^^ > 532 | | ^ > 533 | <div className="space-y-3 bg-blue-50 p-4 rounded-lg border border-blue-100"> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 534 | {/* Branches */} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 535 | <div className="relative"> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 536 | <Label className="text-sm font-semibold text-slate-700 block mb-2"> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 537 | Branches | ^^^^^^^^^^^^^^^^^^^^^^^^^^ > 538 | </Label> | ^^^^^^^^^^^^^^^^^^^^^^^^ > 539 | <div className="relative"> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 540 | <button | ^^^^^^^^^^^^^^^^^^^^^^^^^ > 541 | type="button" | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 542 | onClick={() => toggleDropdown('branches')} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 543 | className="w-full px-4 py-2 text-left bg-white border border-slate-30... | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 544 | > | ^^^^^^^^^^^^^^^^^^^ > 545 | {formData.participants.branches.length === 0 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 546 | ? 'Select branches...' | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 547 | : `${formData.participants.branches.length} selected`} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 548 | </button> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 549 | {dropdownOpen.branches && ( | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 550 | <div className="absolute top-full left-0 right-0 mt-2 bg-white border... | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 551 | {mockBranches.map((branch) => ( | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 552 | <label | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 553 | key={branch.id} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 554 | className="flex items-center px-4 py-2 hover:bg-slate-100 curso... | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 555 | > | ^^^^^^^^^^^^^^^^^^^^^^^^^ > 556 | <input | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 557 | type="checkbox" | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 558 | checked={formData.participants.branches.includes( | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 559 | branch.id | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 560 | )} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 561 | onChange={() => toggleSelection('branches', branch.id)} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 562 | className="mr-3" | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 563 | /> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 564 | <span className="text-slate-700">{branch.name}</span> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 565 | </label> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 566 | ))} | ^^^^^^^^^^^^^^^^^^^^^^^^^ > 567 | </div> | ^^^^^^^^^^^^^^^^^^^^^^^^^^ > 568 | )} | ^^^^^^^^^^^^^^^^^^^^ > 569 | </div> | ^^^^^^^^^^^^^^^^^^^^^^ > 570 | {formData.participants.branches.length > 0 && ( | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 571 | <div className="flex flex-wrap gap-2 mt-2"> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 572 | {getSelectedNames('branches').map((name, idx) => ( | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 573 | <Badge | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 574 | key={idx} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 575 | variant="secondary" | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 576 | className="flex items-center gap-1" | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 577 | > | ^^^^^^^^^^^^^^^^^^^^^^^ > 578 | {name} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 579 | <button | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 580 | type="button" | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 581 | onClick={() => | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 582 | removeSelection( | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 583 | 'branches', | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 584 | formData.participants.branches[idx] | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 585 | ) | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 586 | } | ^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 587 | className="ml-1 hover:text-slate-700" | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 588 | > | ^^^^^^^^^^^^^^^^^^^^^^^^^ > 589 | <X className="w-3 h-3" /> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 590 | </button> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 591 | </Badge> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 592 | ))} | ^^^^^^^^^^^^^^^^^^^^^^^ > 593 | </div> | ^^^^^^^^^^^^^^^^^^^^^^^^ > 594 | )} | ^^^^^^^^^^^^^^^^^^ > 595 | </div> | ^^^^^^^^^^^^^^^^^^^^ > 596 | | ^ > 597 | {/* Departments */} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 598 | <div className="relative"> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 599 | <Label className="text-sm font-semibold text-slate-700 block mb-2"> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 600 | Departments | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 601 | </Label> | ^^^^^^^^^^^^^^^^^^^^^^^^ > 602 | <div className="relative"> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 603 | <button | ^^^^^^^^^^^^^^^^^^^^^^^^^ > 604 | type="button" | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 605 | onClick={() => toggleDropdown('departments')} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 606 | className="w-full px-4 py-2 text-left bg-white border border-slate-30... | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 607 | > | ^^^^^^^^^^^^^^^^^^^ > 608 | {formData.participants.departments.length === 0 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 609 | ? 'Select departments...' | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 610 | : `${formData.participants.departments.length} selected`} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 611 | </button> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 612 | {dropdownOpen.departments && ( | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 613 | <div className="absolute top-full left-0 right-0 mt-2 bg-white border... | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 614 | {mockDepartments.map((dept) => ( | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 615 | <label | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 616 | key={dept.id} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 617 | className="flex items-center px-4 py-2 hover:bg-slate-100 curso... | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 618 | > | ^^^^^^^^^^^^^^^^^^^^^^^^^ > 619 | <input | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 620 | type="checkbox" | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 621 | checked={formData.participants.departments.includes( | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 622 | dept.id | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 623 | )} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 624 | onChange={() => | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 625 | toggleSelection('departments', dept.id) | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 626 | } | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 627 | className="mr-3" | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 628 | /> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 629 | <span className="text-slate-700">{dept.name}</span> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 630 | </label> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 631 | ))} | ^^^^^^^^^^^^^^^^^^^^^^^^^ > 632 | </div> | ^^^^^^^^^^^^^^^^^^^^^^^^^^ > 633 | )} | ^^^^^^^^^^^^^^^^^^^^ > 634 | </div> | ^^^^^^^^^^^^^^^^^^^^^^ > 635 | {formData.participants.departments.length > 0 && ( | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 636 | <div className="flex flex-wrap gap-2 mt-2"> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 637 | {getSelectedNames('departments').map((name, idx) => ( | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 638 | <Badge | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 639 | key={idx} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 640 | variant="secondary" | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 641 | className="flex items-center gap-1" | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 642 | > | ^^^^^^^^^^^^^^^^^^^^^^^ > 643 | {name} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 644 | <button | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 645 | type="button" | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 646 | onClick={() => | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 647 | removeSelection( | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 648 | 'departments', | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 649 | formData.participants.departments[idx] | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 650 | ) | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 651 | } | ^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 652 | className="ml-1 hover:text-slate-700" | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 653 | > | ^^^^^^^^^^^^^^^^^^^^^^^^^ > 654 | <X className="w-3 h-3" /> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 655 | </button> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 656 | </Badge> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 657 | ))} | ^^^^^^^^^^^^^^^^^^^^^^^ > 658 | </div> | ^^^^^^^^^^^^^^^^^^^^^^^^ > 659 | )} | ^^^^^^^^^^^^^^^^^^ > 660 | </div> | ^^^^^^^^^^^^^^^^^^^^ > 661 | | ^ > 662 | {/* Teams */} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 663 | <div className="relative"> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 664 | <Label className="text-sm font-semibold text-slate-700 block mb-2"> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 665 | Teams | ^^^^^^^^^^^^^^^^^^^^^^^ > 666 | </Label> | ^^^^^^^^^^^^^^^^^^^^^^^^ > 667 | <div className="relative"> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 668 | <button | ^^^^^^^^^^^^^^^^^^^^^^^^^ > 669 | type="button" | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 670 | onClick={() => toggleDropdown('teams')} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 671 | className="w-full px-4 py-2 text-left bg-white border border-slate-30... | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 672 | > | ^^^^^^^^^^^^^^^^^^^ > 673 | {formData.participants.teams.length === 0 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 674 | ? 'Select teams...' | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 675 | : `${formData.participants.teams.length} selected`} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 676 | </button> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 677 | {dropdownOpen.teams && ( | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 678 | <div className="absolute top-full left-0 right-0 mt-2 bg-white border... | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 679 | {mockTeams.map((team) => ( | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 680 | <label | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 681 | key={team.id} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 682 | className="flex items-center px-4 py-2 hover:bg-slate-100 curso... | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 683 | > | ^^^^^^^^^^^^^^^^^^^^^^^^^ > 684 | <input | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 685 | type="checkbox" | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 686 | checked={formData.participants.teams.includes( | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 687 | team.id | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 688 | )} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 689 | onChange={() => toggleSelection('teams', team.id)} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 690 | className="mr-3" | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 691 | /> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 692 | <span className="text-slate-700">{team.name}</span> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 693 | </label> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 694 | ))} | ^^^^^^^^^^^^^^^^^^^^^^^^^ > 695 | </div> | ^^^^^^^^^^^^^^^^^^^^^^^^^^ > 696 | )} | ^^^^^^^^^^^^^^^^^^^^ > 697 | </div> | ^^^^^^^^^^^^^^^^^^^^^^ > 698 | {formData.participants.teams.length > 0 && ( | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 699 | <div className="flex flex-wrap gap-2 mt-2"> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 700 | {getSelectedNames('teams').map((name, idx) => ( | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 701 | <Badge | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 702 | key={idx} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 703 | variant="secondary" | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 704 | className="flex items-center gap-1" | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 705 | > | ^^^^^^^^^^^^^^^^^^^^^^^ > 706 | {name} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 707 | <button | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 708 | type="button" | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 709 | onClick={() => | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 710 | removeSelection('teams', formData.participants.teams[idx]) | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 711 | } | ^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 712 | className="ml-1 hover:text-slate-700" | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 713 | > | ^^^^^^^^^^^^^^^^^^^^^^^^^ > 714 | <X className="w-3 h-3" /> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 715 | </button> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 716 | </Badge> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 717 | ))} | ^^^^^^^^^^^^^^^^^^^^^^^ > 718 | </div> | ^^^^^^^^^^^^^^^^^^^^^^^^ > 719 | )} | ^^^^^^^^^^^^^^^^^^ > 720 | </div> | ^^^^^^^^^^^^^^^^^^^^ > 721 | </div> | ^^^^^^^^^^^^^^^^^^ > 722 | </div> | ^^^^^^^^^^^^^^^^ > 723 | | ^ > 724 | {/* Section 2: Individual Selection */} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 725 | <div className="space-y-4"> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 726 | <div className="flex items-center gap-2"> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 727 | <div className="flex items-center justify-center w-8 h-8 rounded-full bg-am... | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 728 | 2 | ^^^^^^^^^^^^^^^^^ > 729 | </div> | ^^^^^^^^^^^^^^^^^^^^ > 730 | <h2 className="text-lg font-bold text-slate-900"> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 731 | Add Specific Employees | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 732 | </h2> | ^^^^^^^^^^^^^^^^^^^ > 733 | <p className="text-xs text-slate-500 ml-auto"> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 734 | (Optional - in addition to organization levels) | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 735 | </p> | ^^^^^^^^^^^^^^^^^^ > 736 | </div> | ^^^^^^^^^^^^^^^^^^ > 737 | | ^ > 738 | <div className="bg-amber-50 p-4 rounded-lg border border-amber-100"> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 739 | <div className="relative"> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 740 | <Label className="text-sm font-semibold text-slate-700 block mb-2"> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 741 | Employees | ^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 742 | </Label> | ^^^^^^^^^^^^^^^^^^^^^^^^ > 743 | <div className="relative"> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 744 | <button | ^^^^^^^^^^^^^^^^^^^^^^^^^ > 745 | type="button" | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 746 | onClick={() => toggleDropdown('employees')} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 747 | className="w-full px-4 py-2 text-left bg-white border border-slate-30... | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 748 | > | ^^^^^^^^^^^^^^^^^^^ > 749 | {formData.participants.employees.length === 0 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 750 | ? 'Select employees...' | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 751 | : `${formData.participants.employees.length} selected`} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 752 | </button> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 753 | {dropdownOpen.employees && ( | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 754 | <div className="absolute top-full left-0 right-0 mt-2 bg-white border... | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 755 | {mockEmployees.map((emp) => ( | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 756 | <label | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 757 | key={emp.id} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 758 | className="flex items-center px-4 py-2 hover:bg-slate-100 curso... | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 759 | > | ^^^^^^^^^^^^^^^^^^^^^^^^^ > 760 | <input | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 761 | type="checkbox" | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 762 | checked={formData.participants.employees.includes( | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 763 | emp.id | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 764 | )} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 765 | onChange={() => | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 766 | toggleSelection('employees', emp.id) | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 767 | } | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 768 | className="mr-3" | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 769 | /> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 770 | <span className="text-slate-700">{emp.name}</span> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 771 | </label> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 772 | ))} | ^^^^^^^^^^^^^^^^^^^^^^^^^ > 773 | </div> | ^^^^^^^^^^^^^^^^^^^^^^^^^^ > 774 | )} | ^^^^^^^^^^^^^^^^^^^^ > 775 | </div> | ^^^^^^^^^^^^^^^^^^^^^^ > 776 | {formData.participants.employees.length > 0 && ( | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 777 | <div className="flex flex-wrap gap-2 mt-2"> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 778 | {getSelectedNames('employees').map((name, idx) => ( | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 779 | <Badge | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 780 | key={idx} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 781 | variant="secondary" | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 782 | className="flex items-center gap-1" | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 783 | > | ^^^^^^^^^^^^^^^^^^^^^^^ > 784 | {name} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 785 | <button | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 786 | type="button" | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 787 | onClick={() => | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 788 | removeSelection( | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 789 | 'employees', | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 790 | formData.participants.employees[idx] | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 791 | ) | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 792 | } | ^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 793 | className="ml-1 hover:text-slate-700" | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 794 | > | ^^^^^^^^^^^^^^^^^^^^^^^^^ > 795 | <X className="w-3 h-3" /> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 796 | </button> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 797 | </Badge> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 798 | ))} | ^^^^^^^^^^^^^^^^^^^^^^^ > 799 | </div> | ^^^^^^^^^^^^^^^^^^^^^^^^ > 800 | )} | ^^^^^^^^^^^^^^^^^^ > 801 | </div> | ^^^^^^^^^^^^^^^^^^^^ > 802 | </div> | ^^^^^^^^^^^^^^^^^^ > 803 | </div> | ^^^^^^^^^^^^^^^^ > 804 | | ^ > 805 | {/* Divider */} | ^^^^^^^^^^^^^^^^^^^^^^^^^ > 806 | <div className="border-t border-slate-200" /> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 807 | | ^ > 808 | {/* Description */} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 809 | <div> | ^^^^^^^^^^^^^^^ > 810 | <Label htmlFor="description" className="text-sm font-semibold"> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 811 | Description | ^^^^^^^^^^^^^^^^^^^^^^^^^ > 812 | </Label> | ^^^^^^^^^^^^^^^^^^^^ > 813 | <Textarea | ^^^^^^^^^^^^^^^^^^^^^ > 814 | id="description" | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 815 | placeholder="Add details about your meeting..." | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 816 | value={formData.description} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 817 | onChange={(e) => | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 818 | setFormData({ ...formData, description: e.target.value }) | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 819 | } | ^^^^^^^^^^^^^^^ > 820 | className="mt-2" | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 821 | rows={4} | ^^^^^^^^^^^^^^^^^^^^^^ > 822 | /> | ^^^^^^^^^^^^^^ > 823 | </div> | ^^^^^^^^^^^^^^^^ > 824 | | ^ > 825 | {/* Summary Section */} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 826 | {(formData.participants.branches.length > 0 || | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 827 | formData.participants.departments.length > 0 || | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 828 | formData.participants.teams.length > 0 || | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 829 | formData.participants.employees.length > 0) && ( | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 830 | <div className="bg-slate-100 p-4 rounded-lg"> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 831 | <h3 className="font-semibold text-slate-900 mb-2"> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 832 | Participants Summary | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 833 | </h3> | ^^^^^^^^^^^^^^^^^^^ > 834 | <ul className="space-y-1 text-sm text-slate-700"> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 835 | {formData.participants.branches.length > 0 && ( | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 836 | <li>✓ {formData.participants.branches.length} branch(es)</li> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 837 | )} | ^^^^^^^^^^^^^^^^^^ > 838 | {formData.participants.departments.length > 0 && ( | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 839 | <li> | ^^^^^^^^^^^^^^^^^^^^^^ > 840 | ✓ {formData.participants.departments.length} department(s) | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 841 | </li> | ^^^^^^^^^^^^^^^^^^^^^^^ > 842 | )} | ^^^^^^^^^^^^^^^^^^ > 843 | {formData.participants.teams.length > 0 && ( | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 844 | <li>✓ {formData.participants.teams.length} team(s)</li> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 845 | )} | ^^^^^^^^^^^^^^^^^^ > 846 | {formData.participants.employees.length > 0 && ( | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 847 | <li> | ^^^^^^^^^^^^^^^^^^^^^^ > 848 | ✓ {formData.participants.employees.length} individual | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 849 | employee(s) | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 850 | </li> | ^^^^^^^^^^^^^^^^^^^^^^^ > 851 | )} | ^^^^^^^^^^^^^^^^^^ > 852 | </ul> | ^^^^^^^^^^^^^^^^^^^ > 853 | </div> | ^^^^^^^^^^^^^^^^^^ > 854 | )} | ^^^^^^^^^^^^ > 855 | | ^ > 856 | {/* Submit Button */} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 857 | <Button | ^^^^^^^^^^^^^^^^^ > 858 | type="submit" | ^^^^^^^^^^^^^^^^^^^^^^^^^ > 859 | className="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3" | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 860 | > | ^^^^^^^^^^^ > 861 | Create Meeting | ^^^^^^^^^^^^^^^^^^^^^^^^^^ > 862 | </Button> | ^^^^^^^^^^^^^^^^^^^ > 863 | </form> | ^^^^^^^^^^^^^^^ > 864 | </Card> | ^^^^^^^^^^^^^ > 865 | </div> | ^^^^^^^^^^ > 866 | ) | ^^^ 867 | } 868 | Parsing ecmascript source code failed Import trace: Server Component: ./components/meeting-form.tsx ./app/page.tsx ``` Revise the code to address the error. I was previewing: /